From 52a4d16ecb99697a698ce1eda151a5b16c8230d1 Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期二, 16 七月 2024 21:06:45 +0800
Subject: [PATCH] feat(支付): 支付成功页面
---
pay/scanpay.vue | 312 +++++++++++++++++++++++++++++----------------------
1 files changed, 178 insertions(+), 134 deletions(-)
diff --git a/pay/scanpay.vue b/pay/scanpay.vue
index 6257895..4c60469 100644
--- a/pay/scanpay.vue
+++ b/pay/scanpay.vue
@@ -1,102 +1,114 @@
<!-- 鎵爜鏀粯 -->
<template>
<view class="page">
- <view class="shop u-flex u-row-between">
- <view class="u-m-r-30">
- <view class="u-font-26 color-666 u-m-b-10">浠樻缁�</view>
- <view class="u-font-34 color-333">{{ shopInfo.shopName }}</view>
- </view>
- <u-image width="88rpx" height="88rpx" shape="circle" :src="shopInfo.logoImage||'/static/store-logo.png'"></u-image>
- </view>
- <view class="u-p-24 bg-fff u-m-32 u-br-10">
- <view class="u-flex u-row-between">
- <view class="u-font-28 color-666">閲戦</view>
- <view class="remark">娣诲姞澶囨敞</view>
- </view>
- <view class="u-p-v-20 u-flex u-col-bottom u-border-bottom u-relative money-box">
- <view class="money-icon color-333 lh-1">楼</view>
- <view class="u-flex-1 u-flex u-col-bottom u-m-l-10" style="height: 80rpx;">
- <view v-if="money" class="money-num lh-1">{{ money }}</view>
- <view :class="['cursor',{'cursor-act':!money&&bordShow}]"></view>
- <view v-if="!money" class="u-font-50 color-999 lh-1">璇疯緭鍏ラ噾棰�</view>
- <view :class="['cursor',{'cursor-act':money&&bordShow}]"></view>
+ <u-loading-page :loading="loading"></u-loading-page>
+ <block v-if="shopInfo.scanFlag==1">
+ <view class="shop u-flex u-row-between">
+ <view class="u-m-r-30">
+ <view class="u-font-26 color-666 u-m-b-10">浠樻缁�</view>
+ <view class="u-font-34 color-333">{{ shopInfo.shopName }}</view>
</view>
- <view class="mask" @click="showBord"></view>
+ <u-image width="88rpx" height="88rpx" shape="circle" errorIcon="/static/store-logo.png" loadingIcon="/static/store-logo.png" :src="shopInfo.logoImage||'/static/store-logo.png'" bgColor="#fff"></u-image>
</view>
-<!-- <image v-if="isNew&&(this.payWay == 2&&!UNIONID)" @click="toRegister" class="reg-btn" src="/static/register-btn.png" mode=""></image>-->
-
- </view>
- <block v-if="shopInfo.userCouponFlag==1">
- <view class="bg-fff u-m-32 u-br-10">
- <view class="u-flex u-p-24 u-border-bottom">
-<!-- <u-icon name="coupon-fill" size="60rpx" color="#D31F28"></u-icon>-->
- <view class="u-font-32 u-flex-1 u-m-h-16">浼樻儬鍒�</view>
- <view @click="showCoupon" class="u-flex">
- <view v-if="couponInfo.id" class="tag-pain">
- 婊{ parseFloat((couponInfo.thresholdValue / 100).toFixed(2)) }}鍏冨噺{{ parseFloat((couponInfo.discount / 100).toFixed(2)) }}鍏�
- </view>
- <view v-else class="u-font-28 lh-1 u-tips-color">璇烽�夋嫨</view>
- <u-icon class="u-m-l-10" name="arrow-right" color="#999" size="16"></u-icon>
+ <view class="u-p-24 bg-fff u-m-32 u-br-10">
+ <view class="u-flex u-row-between">
+ <view class="u-font-28 color-666">閲戦</view>
+ <view @click="showRemark=true" class="remark">娣诲姞澶囨敞</view>
+ </view>
+ <view class="u-p-v-20 u-flex u-col-bottom u-border-bottom u-relative money-box">
+ <view class="money-icon color-333 lh-1">楼</view>
+ <view class="u-flex-1 u-flex u-col-bottom u-m-l-10" style="height: 80rpx;">
+ <view v-if="money" class="money-num lh-1">{{ money }}</view>
+ <view :class="['cursor',{'cursor-act':!money&&bordShow}]"></view>
+ <view v-if="!money" class="u-font-50 color-999 lh-1">璇疯緭鍏ラ噾棰�</view>
+ <view :class="['cursor',{'cursor-act':money&&bordShow}]"></view>
</view>
+ <view class="mask" @click="showBord"></view>
</view>
- <view class="u-font-26 u-tips-color u-p-24">寰俊鎼滅储鎴栫洿鎺ョ偣鍑绘墦寮�
+ <!-- <image v-if="isNew&&(this.payWay == 2&&!UNIONID)" @click="toRegister" class="reg-btn" src="/static/register-btn.png" mode=""></image>-->
+ <view v-if="shopInfo.userCouponFlag==0" class="u-font-26 u-tips-color u-p-t-24">寰俊鎼滅储鎴栫洿鎺ョ偣鍑绘墦寮�
<text style="color: #1E8BE0">銆愬唨浼橀偖銆�</text>
灏忕▼搴忥紝浜彈鏇村浼樻儬
</view>
</view>
- </block>
-
-
- <block v-if="shopInfo.userCouponFlag==1&&discount">
- <view class="u-m-32 u-br-10 bg-fff">
- <view class="u-p-24 u-flex u-row-between u-border-bottom">
- <view class="u-font-32 color-333">鎶垫墸閲戦</view>
- <view class="color-green">- {{ discount }}</view>
- </view>
- <view class="u-p-24 u-flex u-row-between u-br-10 bg-fff">
- <view class="u-font-32 color-333">瀹炰粯閲戦</view>
- <view class="color-red">
- <text class="u-font-26 u-m-r-6">楼</text>
- <text class="u-font-34">{{ payMoney }}</text>
- </view>
- </view>
- </view>
- </block>
- <button class="pay-it" @click="pay">浠樻</button>
- <!-- 鏁板瓧閿洏 -->
- <u-popup :show="bordShow" :overlay="false" @close="bordShow = false">
- <key-bord @changeMoney="changeMoney" :num.sync="money" @close="bordShow = false" @pay="pay"></key-bord>
- </u-popup>
- <!-- 浼樻儬鍒稿脊绐� -->
- <u-popup mode="bottom" :closeable="true" :show="couponShow" @close="couponShow = false" :round="10">
- <view class="u-font-32 color-333 u-text-center u-p-t-30">浼樻儬鍒�</view>
- <view v-if="checkCoupon.id" class="choose-coupon">
- 宸查�夋嫨浼樻儬鍒�1寮狅紝鍏辨姷鎵ｏ骏{{ parseFloat((checkCoupon.discount / 100).toFixed(2)) }}
- </view>
- <scroll-view scroll-y class="u-p-30 coupon-list">
- <view @click="clickCoupon(item)" class="u-m-b-24 u-flex coupon" v-for="(item, index) in couponList" :key="index">
- <view style="color: #D31F28;" class="u-p-h-28">
- <view class="font-bold">
- <text class="u-font-36">锟�</text>
- <text class="money">{{ parseFloat(item.discount / 100) }}</text>
- </view>
- <view class="u-font-24 u-m-t-20">婊{ parseFloat(item.thresholdValue / 100) }}鍏冧娇鐢�</view>
- </view>
- <view class="butt"></view>
- <view class="u-p-30 u-flex-1 u-flex">
- <view class="u-flex-1">
- <view class="u-font-28 color-333 u-line-2">{{ item.name }}</view>
- <view class="u-font-22 color-999 u-m-t-20">
- 鏈夋晥鏈熻嚦锛歿{ $u.timeFormat(item.outTime, 'yyyy-mm-dd hh:MM') }}
+ <block v-if="shopInfo.userCouponFlag==1">
+ <view class="bg-fff u-m-32 u-br-10">
+ <view class="u-flex u-p-24 u-border-bottom">
+ <!-- <u-icon name="coupon-fill" size="60rpx" color="#D31F28"></u-icon>-->
+ <view class="u-font-32 u-flex-1 u-m-h-16">浼樻儬鍒�</view>
+ <view @click="showCoupon" class="u-flex">
+ <view v-if="couponInfo.id" class="tag-pain">
+ 婊{ parseFloat((couponInfo.thresholdValue / 100).toFixed(2)) }}鍏冨噺{{ parseFloat((couponInfo.discount / 100).toFixed(2)) }}鍏�
</view>
+ <view v-else class="u-font-28 lh-1 u-tips-color">璇烽�夋嫨</view>
+ <u-icon class="u-m-l-10" name="arrow-right" color="#999" size="16"></u-icon>
</view>
- <u-icon v-if="item.id==checkCoupon.id" name="checkmark-circle-fill" color="#D31F28" size="20">
- </u-icon>
+ </view>
+ <view class="u-font-26 u-tips-color u-p-24">寰俊鎼滅储鎴栫洿鎺ョ偣鍑绘墦寮�
+ <text style="color: #1E8BE0">銆愬唨浼橀偖銆�</text>
+ 灏忕▼搴忥紝浜彈鏇村浼樻儬
</view>
</view>
- </scroll-view>
- <view @click="getCoupon" class="coupon-btn">纭畾</view>
- </u-popup>
+ </block>
+ <block v-if="shopInfo.userCouponFlag==1&&discount">
+ <view class="u-m-32 u-br-10 bg-fff">
+ <view class="u-p-24 u-flex u-row-between u-border-bottom">
+ <view class="u-font-32 color-333">鎶垫墸閲戦</view>
+ <view class="color-green">- {{ discount }}</view>
+ </view>
+ <view class="u-p-24 u-flex u-row-between u-br-10 bg-fff">
+ <view class="u-font-32 color-333">瀹炰粯閲戦</view>
+ <view class="color-red">
+ <text class="u-font-26 u-m-r-6">楼</text>
+ <text class="u-font-34">{{ payMoney }}</text>
+ </view>
+ </view>
+ </view>
+ </block>
+ <button class="pay-it" @click="pay">浠樻</button>
+ <!-- 鏁板瓧閿洏 -->
+ <u-popup zIndex="500" :show="bordShow" :overlay="false" @close="bordShow = false">
+ <key-bord @changeMoney="changeMoney" :num.sync="money" @close="bordShow = false" @pay="pay"></key-bord>
+ </u-popup>
+ <!-- 浼樻儬鍒稿脊绐� -->
+ <u-popup zIndex="800" mode="bottom" :closeable="true" :show="couponShow" @close="couponShow = false" :round="10">
+ <view class="u-font-32 color-333 u-text-center u-p-t-30">浼樻儬鍒�</view>
+ <view v-if="checkCoupon.id" class="choose-coupon">
+ 宸查�夋嫨浼樻儬鍒�1寮狅紝鍏辨姷鎵ｏ骏{{ parseFloat((checkCoupon.discount / 100).toFixed(2)) }}
+ </view>
+ <scroll-view scroll-y class="u-p-30 coupon-list">
+ <view @click="clickCoupon(item)" class="u-m-b-24 u-flex coupon" v-for="(item, index) in couponList" :key="index">
+ <view style="color: #D31F28;" class="u-p-h-28">
+ <view class="font-bold">
+ <text class="u-font-36">锟�</text>
+ <text class="money">{{ parseFloat(item.discount / 100) }}</text>
+ </view>
+ <view class="u-font-24 u-m-t-20">婊{ parseFloat(item.thresholdValue / 100) }}鍏冧娇鐢�</view>
+ </view>
+ <view class="butt"></view>
+ <view class="u-p-30 u-flex-1 u-flex">
+ <view class="u-flex-1">
+ <view class="u-font-28 color-333 u-line-2">{{ item.name }}</view>
+ <view class="u-font-22 color-999 u-m-t-20">
+ 鏈夋晥鏈熻嚦锛歿{ $u.timeFormat(item.outTime, 'yyyy-mm-dd hh:MM') }}
+ </view>
+ </view>
+ <u-icon v-if="item.id==checkCoupon.id" name="checkmark-circle-fill" color="#D31F28" size="20">
+ </u-icon>
+ </view>
+ </view>
+ </scroll-view>
+ <view @click="getCoupon" class="coupon-btn">纭畾</view>
+ </u-popup>
+ <u-modal showCancelButton :show="showRemark" title="澶囨敞" cancelText="鍏抽棴" confirmText="娓呴櫎" confirmColor="#D31F28" @close="showRemark = false" @cancel="showRemark = false" @confirm="buyerNote = ''">
+ <u--textarea v-model="buyerNote" placeholder="璇疯緭鍏ュ娉ㄥ唴瀹�" count></u--textarea>
+ </u-modal>
+ </block>
+ <view v-if="shopInfo.scanFlag==0" class="empty-box">
+ <image src="/static/empty.png" class="empty"></image>
+ <view class="tips">{{tips}}</view>
+ <view @click="clickDone" class="clickDone">鍏抽棴</view>
+ </view>
</view>
</template>
@@ -116,6 +128,10 @@
export default {
data() {
return {
+ tips: '璇ュ晢鎴锋殏鏈紑閫氭敮浠樺姛鑳�',
+ loading: true,
+ buyerNote: '',
+ showRemark: false,
UNIONID: null,
payWay: this.$utils.getPlat(),
cid: '',
@@ -124,16 +140,14 @@
cusid: '',
shopName: '',
logoImage: '',
- scanFlag: '',
- useScoreFlag: 0, //鍟嗛摵鏄惁鍙敤绉垎 0鍚� 1鏄�
- userCouponFlag: 0, //鍟嗛摵鏄惁鍙敤浼樻儬鍒� 0鍚� 1鏄�
+ scanFlag: -1,
+ useScoreFlag: -1, //鍟嗛摵鏄惁鍙敤绉垎 0鍚� 1鏄�
+ userCouponFlag: -1, //鍟嗛摵鏄惁鍙敤浼樻儬鍒� 0鍚� 1鏄�
},
money: '', // 閲戦
token: null,
isNew: false, // 鏄惁鏂扮敤鎴凤紝鏂扮敤鎴锋煡璇笉鍒扮Н鍒嗗拰閾惰鍗�
canReset: false,
- end: 0,
- count: 0,
couponShow: false, // 浼樻儬鍒稿脊绐�
couponList: [], // 浼樻儬鍒�
couponInfo: {
@@ -163,7 +177,6 @@
},
onLoad(opt) {
this.isNew = uni.getStorageSync('IS_NEW')
- uni.showLoading()
if (opt.cid) {
this.cid = opt.cid
this.init()
@@ -173,7 +186,6 @@
if (this.payWay == 5) {
code = opt.auth_code
}
- this.end++
userLogin({
platform: this.payWay,
params: {
@@ -181,32 +193,40 @@
}
}).then(res => {
this.getToken(res)
- }).catch(() => {
- this.count++
- if (this.count >= this.end) {
- uni.hideLoading()
- }
})
}
},
- onShow() {
- this.UNIONID = uni.getStorageSync('UNIONID' + this.payWay) || null
- this.token = uni.getStorageSync(ACCESSTOKEN) || null
- if (this.canReset && this.token && !this.isNew) {
- this.end = 0
- this.count = 0
- uni.showLoading()
- this.showCoupon()
- }
- this.canReset = true
- },
methods: {
- getToken(res) {
- this.count++
- if (this.count >= this.end) {
- uni.hideLoading()
+ clickDone() {
+ let browser = navigator.userAgent.toLowerCase();
+ if (browser.match(/Alipay/i) == "alipay") {
+ console.log("鏀粯瀹漚pp鐨勬祻瑙堝櫒");
+ //杩欎釜鍙互鍏抽棴瀹夊崜绯荤粺鐨勬墜鏈�
+ document.addEventListener("AlipayJSBridgeReady", function () {
+ AlipayJSBridge.call("closeWindow");
+ },
+ false
+ );
+ //杩欎釜鍙互鍏抽棴ios绯荤粺鐨勬墜鏈�
+ AlipayJSBridge.call('closeWebview'); //鏀粯瀹�
+ } else if (browser.match(/MicroMessenger/i) == "micromessenger") {
+ //杩欎釜鍙互鍏抽棴瀹夊崜绯荤粺鐨勬墜鏈�
+ document.addEventListener("WeixinJSBridgeReady", function () {
+ WeixinJSBridge.call("closeWindow");
+ },
+ false
+ );
+ //杩欎釜鍙互鍏抽棴ios绯荤粺鐨勬墜鏈�
+ WeixinJSBridge.call("closeWindow");
+ } else {
+ console.log("鍏跺畠娴忚鍣�");
+ window.opener = null; //濡傛灉娌℃湁杩欒鍜屼笅闈㈢殑涓�琛屽垯浼氬嚭鐜颁笂闈㈢殑绗簩涓闂銆�
+ window.open(' ', '_self', ' ');
+ window.close()
}
+ },
+ getToken(res) {
this.token = res.token
if (res.openid) {
uni.setStorageSync('OPENID' + this.payWay, res.token)
@@ -243,31 +263,32 @@
this.bordShow = true;
},
init() {
- this.end += 1
+ let timer = setTimeout(() => {
+ this.shopInfo.scanFlag = 0
+ this.tips = '褰撳墠鐢ㄦ埛杩囧锛岃绋嶅悗閲嶈瘯锝瀇锝�'
+ this.loading = false
+ }, 2000)
//鑾峰彇鍟嗛摵淇℃伅
queryShop({
params: {
cid: this.cid
}
}).then(res => {
- this.count++
- if (this.count >= this.end) {
- uni.hideLoading()
- }
+ clearTimeout(timer)
+ this.loading = false
if (!uni.$u.test.isEmpty(res.logoImage)) {
res.logoImage = config.baseURL + res.logoImage
}
this.shopInfo = res
- }).catch(() => {
- this.count++
- if (this.count >= this.end) {
- uni.hideLoading()
- }
+ }).catch(()=>{
+ clearTimeout(timer)
+ this.shopInfo.scanFlag = 0
+ this.tips = '褰撳墠鐢ㄦ埛杩囧锛岃绋嶅悗閲嶈瘯锝瀇锝�'
+ this.loading = false
})
},
// 鑾峰彇浼氬憳鐩稿叧淇℃伅
showCoupon() {
- this.end += 1
//鑾峰彇鐢ㄦ埛浼樻儬鍒�
queryUseSweepPayCoupon({
params: {
@@ -276,17 +297,8 @@
money: Number(this.money * 100),
}
}).then(res => {
- this.count++
- if (this.count >= this.end) {
- uni.hideLoading()
- }
this.couponList = res
this.couponShow = true
- }).catch(() => {
- this.count++
- if (this.count >= this.end) {
- uni.hideLoading()
- }
})
},
//閫夋嫨浼樻儬鍒�
@@ -321,6 +333,7 @@
shopId: this.shopInfo.id,
cid: this.cid,
payWay: this.payWay,
+ buyerNote: this.buyerNote,
score: 0,
couponDetailId: this.couponInfo.id
}
@@ -507,15 +520,13 @@
}
.cursor {
- position: relative;
- bottom: 10rpx;
width: 1px;
height: 70rpx;
}
.cursor-act {
width: 1px;
- background-color: #333;
+ background-color: #999;
animation: cursor-blinks 1s infinite steps(1, start);
}
@@ -662,4 +673,37 @@
text-align: center;
}
+.empty-box {
+ height: calc(80vh - 64rpx);
+ margin: 32rpx;
+ background-color: #fff;
+ border-radius: 10rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .tips {
+ font-size: 28rpx;
+ color: #999;
+ margin: 60rpx 0;
+ }
+
+ .empty {
+ width: 291rpx;
+ height: 302rpx;
+ }
+
+ .clickDone {
+ font-size: 34rpx;
+ color: #fff;
+ width: 331rpx;
+ height: 88rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 61rpx;
+ background: linear-gradient(0deg, #D31F28 0%, #D31F28 100%), linear-gradient(270deg, #F62B20 13.24%, #FC4E0B 111.68%), #D9D9D9;
+ }
+}
</style>
--
Gitblit v1.9.1