|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <view style="overflow: hidden;">
|
|
|
+ <payment-pasword ref="paymentPassword" mode="1" @submit="balancePay"></payment-pasword>
|
|
|
+ <timer-tips v-if="orders.length" :createtime="orders[0].createtime"></timer-tips>
|
|
|
+ <view class="money-info">
|
|
|
+ 保证金:{{deposit}}元
|
|
|
+ </view>
|
|
|
+ <!-- <view class="sum">合计:{{total_amount_sum|priceFilter}}元</view> -->
|
|
|
+
|
|
|
+ <view class="pay-method">
|
|
|
+ <view class="label">请选择支付方式</view>
|
|
|
+ <view>
|
|
|
+ <view class="item" :class="{'active':pay_method==='alipay'}"
|
|
|
+ @tap="pay_method='alipay',pay_provider='alipay'">
|
|
|
+ <image class="image" src="../../static/alipay.png" mode="scaleToFill"
|
|
|
+ style="width: 50upx;height: 50upx;"></image>支付宝
|
|
|
+ </view>
|
|
|
+ <view class="item" :class="{'active':pay_method==='wechat'}"
|
|
|
+ @tap="pay_method='wechat',pay_provider='wxpay'">
|
|
|
+ <image class="image" src="../../static/wxpay.png" mode="scaleToFill"
|
|
|
+ style="width: 50upx;height: 50upx;"></image>微信支付
|
|
|
+ </view>
|
|
|
+ <!-- <view class="item" :class="{'active':pay_method==='balance'}" @tap="pay_method='balance'">
|
|
|
+ <image class="image" src="../../static/logo.png" mode="scaleToFill"
|
|
|
+ style="width: 50upx;height: 50upx;"></image>使用余额({{$store.state.user.money}})
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="" style="margin-top: 40upx;">
|
|
|
+ <button class="pay-btn" type="default" @tap="pay">立即支付</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import paymentPasword from "@/components/sanshui-payment-password/index.vue"
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ deposit: 2000,
|
|
|
+ pay_method: "alipay",
|
|
|
+ pay_provider: "alipay",
|
|
|
+ orders: [],
|
|
|
+ order_no: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ paymentPasword
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ total_amount_sum() {
|
|
|
+ return deposit;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad(option) {
|
|
|
+ this.order_no = option.order_no;
|
|
|
+ // this.getCashierData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCashierData() {
|
|
|
+ this.$http.get({
|
|
|
+ url: "/order/cashier",
|
|
|
+ data: {
|
|
|
+ order_no: this.order_no
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ this.orders = res.data.data.map((value) => {
|
|
|
+ value.products_json = JSON.parse(value.products_snapshot)
|
|
|
+ return value;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ balancePay(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.$http.post({
|
|
|
+ url: '/order/balancePay',
|
|
|
+ data: {
|
|
|
+ 'order_no': this.order_no,
|
|
|
+ 'pay_method': this.pay_method,
|
|
|
+ 'amount': this.total_amount_sum,
|
|
|
+ 'safe_pass': e.value
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/order/order",
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ pay() {
|
|
|
+ if (this.pay_method !== 'balance') {
|
|
|
+ this.$http.get({
|
|
|
+ url: '/order/pay',
|
|
|
+ data: {
|
|
|
+ 'order_no': this.order_no,
|
|
|
+ 'pay_method': this.pay_method,
|
|
|
+ 'amount': this.total_amount_sum
|
|
|
+
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: this.pay_provider,
|
|
|
+ orderInfo: res.data.data,
|
|
|
+ success: (res) => {
|
|
|
+ uni.showModal({
|
|
|
+ content: JSON.stringify(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: (res) => {
|
|
|
+ uni.showModal({
|
|
|
+ content: "支付失败",
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$refs.paymentPassword.modalFun('show');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .order {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money-info {
|
|
|
+ font-size: 50upx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 150upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sum {
|
|
|
+ margin: 20upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ text-align: right;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-method {
|
|
|
+ margin: 20upx;
|
|
|
+ padding: 20upx;
|
|
|
+ background: white;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 30upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ height: 80upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 30upx;
|
|
|
+ border-bottom: 2upx solid #F5F5F5;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ margin-right: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: url(../../static/gou.png) no-repeat;
|
|
|
+ background-size: 40upx 40upx;
|
|
|
+ background-position: 600upx 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-btn {
|
|
|
+ margin: 20upx 0;
|
|
|
+ background: $primary-color;
|
|
|
+ color: white;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+</style>
|