|
@@ -0,0 +1,264 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="flex-common-css iPhone-bottom flex-common-css box-border-box">
|
|
|
|
|
+ <Nav title="订单支付" bgckgroundBox='transparent'></Nav>
|
|
|
|
|
+ <scroll-view :scroll-y="true" class="box-sizing-border scroll-view-css plr-30 box-border-box">
|
|
|
|
|
+ <view class="fs-28 fc-121212 mb-20 p-t-40 text-align-center">
|
|
|
|
|
+ 剩余时间 {{time.m}}:{{time.s}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-baseline flex-justify-center mb-40">
|
|
|
|
|
+ <view class="fs-40 fw-500 fc-FB3D03">
|
|
|
|
|
+ ¥
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-64 fw-500 fc-FB3D03">
|
|
|
|
|
+ {{Number(payData.pay_money).toFixed(2) || '0.00'}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mb-40 text-align-center">
|
|
|
|
|
+ 订单编号: {{payData.order_sn}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-32 fw-500 fc-3 mb-22">
|
|
|
|
|
+ 支付方式
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="plr-16 box-border-box b-rad-20 bgc-f">
|
|
|
|
|
+ <view class="align-items-center flex-justify-space p-26-0 b-t-F4" @click="setPayType(3)">
|
|
|
|
|
+ <view class="align-items-center">
|
|
|
|
|
+ <image class="icon-img mr-16" src="static/ye.png" mode=""></image>
|
|
|
|
|
+ <view class="fs-28 fc-333">
|
|
|
|
|
+ 余额支付
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-28 fc-707070">
|
|
|
|
|
+ (可用{{Number(payData.member_money).toFixed(2) || '0.00'}})
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image v-if="payType === 3" class="w-h-36 mr-10" src="@/static/img/common/y-select.png" mode="">
|
|
|
|
|
+ </image>
|
|
|
|
|
+ <image v-else class="w-h-36 mr-10" src="@/static/img/common/n-select.png" mode=""></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center flex-justify-space p-26-0 b-t-F4" @click="setPayType(1)">
|
|
|
|
|
+ <view class="align-items-center">
|
|
|
|
|
+ <image class="icon-img mr-16" src="@/static/img/common/wx-zf.png" mode="scaleToFill"></image>
|
|
|
|
|
+ <view class="fs-28 fc-333">
|
|
|
|
|
+ 微信支付
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image v-if="payType === 1" class="w-h-36 mr-10" src="@/static/img/common/y-select.png" mode="">
|
|
|
|
|
+ </image>
|
|
|
|
|
+ <image v-else class="w-h-36 mr-10" src="@/static/img/common/n-select.png" mode=""></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-32 fw-500 fc-f text-align-center pay-but b-rad-200" @click="paySure"
|
|
|
|
|
+ :class="butType === 1?'bgc-4FB3EF':'bgc-9'">
|
|
|
|
|
+ 立即支付¥{{Number(payData.pay_money).toFixed(2) || '0.00'}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ import {
|
|
|
|
|
+ getExpressPay,
|
|
|
|
|
+ expressPayInfo
|
|
|
|
|
+ } from '@/api/express.js';
|
|
|
|
|
+ import tools from "@/service/tools.js"
|
|
|
|
|
+ export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ payType: 1,
|
|
|
|
|
+ order_id: 0,
|
|
|
|
|
+ isAJAX: false,
|
|
|
|
|
+ payData: {},
|
|
|
|
|
+ butType: 1,
|
|
|
|
|
+ time: {
|
|
|
|
|
+ day: '',
|
|
|
|
|
+ h: "",
|
|
|
|
|
+ m: '',
|
|
|
|
|
+ s: '',
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad(data) {
|
|
|
|
|
+ if (data) {
|
|
|
|
|
+ this.order_id = data.orderId
|
|
|
|
|
+ this.expressPayInfo()
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {},
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ expressPayInfo() {
|
|
|
|
|
+ expressPayInfo({
|
|
|
|
|
+ order_id: this.order_id
|
|
|
|
|
+ }).then((res) => {
|
|
|
|
|
+ if (res.code === 1) {
|
|
|
|
|
+ this.payData = res.data
|
|
|
|
|
+ let createDate = new Date(res.data.created_at); //格式化订单创建时候的时间
|
|
|
|
|
+ createDate.setMinutes(createDate.getMinutes() + 10)
|
|
|
|
|
+ this.setCountDown(createDate)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ setCountDown(sTime) {
|
|
|
|
|
+ let end = new Date(sTime).getTime();
|
|
|
|
|
+ let now = new Date().getTime();
|
|
|
|
|
+ let msec = end - now;
|
|
|
|
|
+ this.time.day = parseInt(msec / 1000 / 60 / 60 / 24);
|
|
|
|
|
+ let h = parseInt(msec / 1000 / 60 / 60 % 24);
|
|
|
|
|
+ let m = parseInt(msec / 1000 / 60 % 60);
|
|
|
|
|
+ let s = parseInt(msec / 1000 % 60);
|
|
|
|
|
+ this.time.h = h > 9 ? h : '0' + h;
|
|
|
|
|
+ this.time.m = m > 9 ? m : '0' + m;
|
|
|
|
|
+ this.time.s = s > 9 ? s : '0' + s;
|
|
|
|
|
+ msec -= 1000;
|
|
|
|
|
+ if (this.time.day >= 1) {
|
|
|
|
|
+ this.showTime = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.showTime = false;
|
|
|
|
|
+ };
|
|
|
|
|
+ if (msec >= 0) {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.setCountDown(sTime);
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.isTimeEnd = true;
|
|
|
|
|
+ this.bText = '活动结束';
|
|
|
|
|
+ this.time.h = '--';
|
|
|
|
|
+ this.time.m = '--';
|
|
|
|
|
+ this.time.s = '--';
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ setPayType(payType) {
|
|
|
|
|
+ this.payType = payType
|
|
|
|
|
+ if (payType === 3) {
|
|
|
|
|
+ if (Number(this.payData.member_money) < Number(this.payData.pay_money)) {
|
|
|
|
|
+ this.butType = 2
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.butType = 1
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.butType = 1
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ paySure() {
|
|
|
|
|
+ if (this.butType === 2) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ getExpressPay({
|
|
|
|
|
+ order_id: this.order_id,
|
|
|
|
|
+ pay_type: this.payType
|
|
|
|
|
+ }).then((ret) => {
|
|
|
|
|
+ if (ret.code === 1) {
|
|
|
|
|
+ if (this.payType === 1) {
|
|
|
|
|
+ uni.requestPayment({
|
|
|
|
|
+ provider: "wxpay", //支付类型-固定值
|
|
|
|
|
+ timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳(单位:秒)
|
|
|
|
|
+ nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
|
|
|
|
|
+ package: ret.data.wx_pay.package, // 固定值
|
|
|
|
|
+ signType: ret.data.wx_pay.signType, //固定值
|
|
|
|
|
+ paySign: ret.data.wx_pay.paySign, //签名
|
|
|
|
|
+ success: (ren) => {
|
|
|
|
|
+ uni.removeStorageSync('isConfirmAddressFlag')
|
|
|
|
|
+ tools.success("支付成功");
|
|
|
|
|
+ this.isAJAX = false;
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: "/pages/order/index"
|
|
|
|
|
+ })
|
|
|
|
|
+ uni.setStorageSync('orderPayType', 2)
|
|
|
|
|
+ uni.setStorageSync('saveData', false)
|
|
|
|
|
+ }, 1000)
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: (err) => {
|
|
|
|
|
+ uni.removeStorageSync('isConfirmAddressFlag')
|
|
|
|
|
+ this.isAJAX = false;
|
|
|
|
|
+ tools.error("支付失败");
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: "/pages/order/index"
|
|
|
|
|
+ })
|
|
|
|
|
+ uni.setStorageSync('orderPayType', 2)
|
|
|
|
|
+ uni.setStorageSync('saveData', false)
|
|
|
|
|
+ }, 1000)
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ } else if (this.payType === 3) {
|
|
|
|
|
+ uni.removeStorageSync('isConfirmAddressFlag')
|
|
|
|
|
+ tools.success("支付成功");
|
|
|
|
|
+ this.isAJAX = false;
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: "/pages/order/index"
|
|
|
|
|
+ })
|
|
|
|
|
+ uni.setStorageSync('orderPayType', 2)
|
|
|
|
|
+ uni.setStorageSync('saveData', false)
|
|
|
|
|
+ }, 1000)
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ uni.removeStorageSync('isConfirmAddressFlag')
|
|
|
|
|
+ this.isAJAX = false;
|
|
|
|
|
+ tools.error("支付失败");
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: "/pages/order/index"
|
|
|
|
|
+ })
|
|
|
|
|
+ uni.setStorageSync('orderPayType', 2)
|
|
|
|
|
+ uni.setStorageSync('saveData', false)
|
|
|
|
|
+ }, 1000)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+ .pop-box {
|
|
|
|
|
+ width: 80vw;
|
|
|
|
|
+ height: 30vh;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .p-t-40 {
|
|
|
|
|
+ padding: 40rpx 0 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .p-12-30 {
|
|
|
|
|
+ padding: 12rpx 30rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .p-23-16 {
|
|
|
|
|
+ padding: 23rpx 16rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .plr-16 {
|
|
|
|
|
+ padding: 0 16rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .p-26-0 {
|
|
|
|
|
+ padding: 26rpx 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .icon-img {
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .w-h-36 {
|
|
|
|
|
+ width: 36rpx;
|
|
|
|
|
+ height: 36rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .pay-but {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
|
+ margin: 30rpx auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .pop-but {
|
|
|
|
|
+ width: 80%;
|
|
|
|
|
+ padding: 24rpx 0;
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+
|
|
|
|
|
+ .add-card {
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|