From 6c2609b9f3212e4e502e1dc4d0d4f1382d8782e8 Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期四, 11 七月 2024 11:28:14 +0800
Subject: [PATCH] feat(支付): 支付页修改
---
pay/scanpay.vue | 383 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 254 insertions(+), 129 deletions(-)
diff --git a/pay/scanpay.vue b/pay/scanpay.vue
index 07ad5f1..89935e8 100644
--- a/pay/scanpay.vue
+++ b/pay/scanpay.vue
@@ -4,13 +4,13 @@
<view class="shop u-flex u-row-between">
<view class="u-m-r-30">
<view class="u-font-28 color-666 u-m-b-10">浠樻缁�</view>
- <view class="u-font-34 font-bold color-333">{{ shopInfo.shop_name }}</view>
+ <view class="u-font-34 font-bold color-333">{{ shopInfo.shopName }}</view>
</view>
- <image :src="shopInfo.logo_image||'/static/imgs/store-logo.png'" class="avg-img"></image>
+ <u-image width="94rpx" height="94rpx" radius="10rpx" :src="shopInfo.logoImage||'/static/imgs/store-logo.png'"></u-image>
</view>
<view class="u-p-48 bg-fff u-flex-1 content">
<view class="u-font-28 color-666">閲戦</view>
- <view class="u-p-v-20 u-flex u-border-bottom u-relative">
+ <view class="u-p-v-20 u-flex u-border-bottom u-relative money-box">
<view class="money-icon color-333">楼</view>
<view class="u-flex-1 u-flex u-m-l-10" style="height: 80rpx;">
<view v-if="money" class="money-num">{{ money }}</view>
@@ -21,11 +21,66 @@
<view class="mask" @click="showBord"></view>
</view>
<image v-if="isNew&&(this.payWay == 2&&!UNIONID)" @click="toRegister" class="reg-btn" src="/static/register-btn.png" mode=""></image>
+ <block v-if="shopInfo.userCouponFlag==1">
+ <view class="u-flex u-p-v-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">璇烽�夋嫨</view>
+ <u-icon class="u-m-l-10" name="arrow-right" color="#999" size="16"></u-icon>
+ </view>
+ </view>
+ <view v-if="discount" class="u-p-v-30 u-flex u-row-between u-border-bottom">
+ <view class="u-font-32 color-333">瀹為檯鎶垫墸</view>
+ <view class="color-green">- {{ discount }}</view>
+ </view>
+ <view v-if="discount" class="u-p-v-30 u-flex u-row-between u-border-bottom">
+ <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>
+ </block>
</view>
<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>
+ <!-- <view class="choose-coupon">閫夋嫨浼樻儬鍒�</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>
</view>
</template>
@@ -38,7 +93,7 @@
import {
queryShop,
userLogin,
- queryMyUseSweepPayMaxCoupon,
+ queryUseSweepPayCoupon,
closeOrder,
saveOrder,
} from 'common/api/index'
@@ -51,31 +106,51 @@
cid: '',
bordShow: true, // 鏄剧ず閿洏
shopInfo: {
- shop_name: '',
- scan_flag: '',
- use_score_flag: 0, //鍟嗛摵鏄惁鍙敤绉垎 0鍚� 1鏄�
- user_coupon_flag: 0, //鍟嗛摵鏄惁鍙敤浼樻儬鍒� 0鍚� 1鏄�
- app_pay_use_score_flag: 0, //寰俊/鏀粯瀹濇槸鍚﹀彲鐢ㄧН鍒� 0鍚� 1鏄�
- app_pay_use_coupon_flag: 0, //寰俊/鏀粯瀹濇槸鍚﹀彲鐢ㄤ紭鎯犲埜 0鍚� 1鏄�
- bank_pay_use_score_flag: 0, //閾惰鍗℃敮浠樻槸鍚﹀彲鐢ㄧН鍒� 0鍚� 1鏄�
- bank_pay_use_coupon_flag: 0, //閾惰鍗℃敮浠樻槸鍚﹀彲鐢ㄤ紭鎯犲埜 0鍚� 1鏄�
+ cusid: '',
+ shopName: '',
+ logoImage: '',
+ scanFlag: '',
+ useScoreFlag: 0, //鍟嗛摵鏄惁鍙敤绉垎 0鍚� 1鏄�
+ userCouponFlag: 0, //鍟嗛摵鏄惁鍙敤浼樻儬鍒� 0鍚� 1鏄�
},
money: '', // 閲戦
- couponInfo: null, // 浼樻儬鍒稿唴瀹�
token: null,
isNew: false, // 鏄惁鏂扮敤鎴凤紝鏂扮敤鎴锋煡璇笉鍒扮Н鍒嗗拰閾惰鍗�
canReset: false,
end: 0,
count: 0,
+ couponShow: false, // 浼樻儬鍒稿脊绐�
+ couponList: [], // 浼樻儬鍒�
+ couponInfo: {
+ id: '',
+ discount: 0,
+ thresholdValue: 0
+ }, // 浼樻儬鍒稿唴瀹�
+ checkCoupon: {
+ id: null,
+ discount: 0,
+ thresholdValue: 0
+ },
};
+ },
+ computed: {
+ discount() {
+ let num = 0;
+ num = (this.couponInfo.discount / 100).toFixed(2);
+ return parseFloat(num);
+ },
+ payMoney() {
+ let num = 0;
+ num = Number((this.money || 0) * 100) - this.couponInfo.discount;
+ num = num > 0 ? (num / 100).toFixed(2) : '0.00';
+ return parseFloat(num);
+ }
},
onLoad(opt) {
this.isNew = uni.getStorageSync('IS_NEW')
- // uni.setStorageSync('OPENID' + this.payWay, opt.code)
uni.showLoading()
if (opt.cid) {
this.cid = opt.cid
- uni.setStorageSync('CID', opt.cid)
this.init()
}
if (opt.code || opt.auth_code) {
@@ -92,7 +167,10 @@
}).then(res => {
this.getToken(res)
}).catch(() => {
- uni.hideLoading()
+ this.count++
+ if (this.count >= this.end) {
+ uni.hideLoading()
+ }
})
}
@@ -104,7 +182,7 @@
this.end = 0
this.count = 0
uni.showLoading()
- this.getUserInfo()
+ this.showCoupon()
}
this.canReset = true
},
@@ -125,7 +203,7 @@
uni.setStorageSync('IS_NEW', res.isNew)
this.isNew = res.isNew
if (!res.isNew) {
- this.getUserInfo()
+ this.showCoupon()
}
},
toRegister() {
@@ -161,35 +239,34 @@
if (this.count >= this.end) {
uni.hideLoading()
}
- if (res.logo_image) {
- try {
- let arr = JSON.parse(res.logo_image)
- res.logo_image = config.sftpURL + arr[0].path
- } catch (e) {
- //TODO handle the exception
- res.logo_image = ''
- }
+ if (!uni.$u.test.isEmpty(res.logoImage)) {
+ res.logoImage = config.baseURL + res.logoImage
}
this.shopInfo = res
}).catch(() => {
- uni.hideLoading()
- })
- },
- // 鑾峰彇浼氬憳鐩稿叧淇℃伅
- getUserInfo() {
- this.end += 1
- //鑾峰彇鐢ㄦ埛浼樻儬鍒�
- queryMyUseSweepPayMaxCoupon({
- params: {
- shopId: this.shopInfo.id
- }
- }).then(res => {
-
this.count++
if (this.count >= this.end) {
uni.hideLoading()
}
- this.couponInfo = res
+ })
+ },
+ // 鑾峰彇浼氬憳鐩稿叧淇℃伅
+ showCoupon() {
+ this.end += 1
+ //鑾峰彇鐢ㄦ埛浼樻儬鍒�
+ queryUseSweepPayCoupon({
+ params: {
+ cusid: this.shopInfo.cusid,
+ cid: this.cid,
+ 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) {
@@ -197,44 +274,23 @@
}
})
},
- //璺宠浆钀ラ攢椤甸潰
- toDiscount() {
- const shopInfo = encodeURIComponent(JSON.stringify(this.shopInfo))
- if (!this.isNew) { //鏄細鍛�
- if (this.integral > 0 || this.couponInfo) { //鏈変紭鎯犲埜鎴栫Н鍒�
- if (this.payWay == 3 && (this.shopInfo.bank_pay_use_score_flag || this.shopInfo
- .bank_pay_use_coupon_flag)) { //閾惰鍗℃敮浠�
-
- uni.navigateTo({
- url: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
- })
- return false
- } else if ((this.shopInfo.use_score_flag && this.shopInfo.app_pay_use_score_flag) || (this
- .shopInfo
- .user_coupon_flag && this.shopInfo.app_pay_use_coupon_flag)) {
- uni.navigateTo({
- url: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
- })
- return false
- } else if (this.discount.shopDiscount != 1) {
- uni.navigateTo({
- url: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
- })
- return false
- } else {
- return true
- }
- } else if (this.discount.shopDiscount != 1) {
- uni.navigateTo({
- url: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
- })
- return false
- } else {
- return true
+ //閫夋嫨浼樻儬鍒�
+ clickCoupon(item) {
+ if (this.checkCoupon.id == item.id) {
+ this.checkCoupon = {
+ id: '',
+ discount: 0,
+ thresholdValue: 0
}
} else {
- return true
+ this.checkCoupon = item
}
+ },
+ //纭浼樻儬鍒�
+ getCoupon() {
+ // item 涓轰紭鎯犲埜淇℃伅
+ this.couponInfo = this.checkCoupon;
+ this.couponShow = false;
},
//纭鏀粯
pay() {
@@ -242,44 +298,37 @@
uni.$u.toast('璇疯緭鍏ラ噾棰濓紒')
return
}
- this.bordShow = true
- // return this.toDiscount() //鍒ゆ柇鏄惁闇�瑕佽烦杞惀閿�椤甸潰
- if (this.toDiscount()) {
- // 閲戦 this.money
- uni.showLoading()
- const params = {
- money: parseFloat((this.money * 100).toPrecision(12)),
- shopId: this.shopInfo.id,
- cid: this.cid,
- payWay: this.payWay,
- score: 0,
- couponDetailId: ''
- }
- if (this.payWay == 3) {
- params.bankCardId = this.bankCardId
- }
- //鐢熸垚璁㈠崟
- saveOrder(params).then(res => {
- uni.hideLoading()
- try {
- this.orderId = res.orderId
- res.youHuiInfo.shopName = this.shopInfo.shop_name
- this.youHuiInfo = res.youHuiInfo
- if (this.payWay == 2) {
- this.wxPay(res.paymentData)
- }
- if (this.payWay == 5) {
- this.aliPay(res.paymentData)
- }
- } catch (e) {
- //TODO handle the exception
- console.error(e);
- }
- }).catch(() => {
- uni.hideLoading()
- })
+ this.bordShow = false
+ // 閲戦 this.money
+ uni.showLoading()
+ const params = {
+ money: Number(this.payMoney * 100),
+ shopId: this.shopInfo.id,
+ cid: this.cid,
+ payWay: this.payWay,
+ score: 0,
+ couponDetailId: this.couponInfo.id
}
-
+ //鐢熸垚璁㈠崟
+ saveOrder(params).then(res => {
+ uni.hideLoading()
+ try {
+ this.orderId = res.orderId
+ res.youHuiInfo.shopName = this.shopInfo.shopName
+ this.youHuiInfo = res.youHuiInfo
+ if (this.payWay == 2) {
+ this.wxPay(res.paymentData)
+ }
+ if (this.payWay == 5) {
+ this.aliPay(res.paymentData)
+ }
+ } catch (e) {
+ //TODO handle the exception
+ console.error(e);
+ }
+ }).catch(() => {
+ uni.hideLoading()
+ })
},
// 寰俊鏀粯
wxPay(res) {
@@ -298,8 +347,7 @@
// 浣跨敤浠ヤ笂鏂瑰紡鍒ゆ柇鍓嶇杩斿洖,寰俊鍥㈤槦閮戦噸鎻愮ず锛�
//res.err_msg灏嗗湪鐢ㄦ埛鏀粯鎴愬姛鍚庤繑鍥瀘k锛屼絾骞朵笉淇濊瘉瀹冪粷瀵瑰彲闈犮��
uni.navigateTo({
- url: `/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
- .stringify(this.youHuiInfo)}`
+ url: `/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON.stringify(this.youHuiInfo)}`
})
} else {
this.closeOrder()
@@ -362,11 +410,17 @@
font-size: 40rpx;
color: #333;
}
-
+.money-box{
+ padding-left: 50rpx;
+}
.money-icon {
- font-size: 70rpx;
+ position: absolute;
+ font-size: 50rpx;
// font-weight: bold;
+ color: #666;
margin-right: 20rpx;
+ bottom: 10rpx;
+ left: 0;
}
.money-num {
@@ -386,12 +440,9 @@
margin: 32rpx;
}
-.bank-card-ad {
- padding-top: 50rpx;
- background-image: url(~@/static/bank-card-ad1.png);
- background-size: 100% auto;
- background-position: top center;
- background-repeat: no-repeat;
+.item-icon {
+ width: 38rpx;
+ height: 38rpx;
}
.pay-icon {
@@ -437,7 +488,7 @@
50% {
opacity: 0;
- display: none;
+ display: block;
}
100% {
@@ -447,12 +498,13 @@
}
.cursor {
- border-left: 1px solid transparent;
+ width: 1px;
height: 80rpx;
}
.cursor-act {
- border-left: 1px solid #333;
+ width: 1px;
+ background-color: #333;
animation: cursor-blinks 1s infinite steps(1, start);
}
@@ -505,10 +557,7 @@
}
.btn {
- /* position: fixed;
-bottom: 100rpx; */
- margin: 0 auto;
- margin-top: 120rpx;
+ margin: 120rpx auto 0;
position: relative;
width: 680rpx;
height: 100rpx;
@@ -519,4 +568,80 @@
width: 680rpx;
height: 100rpx;
}
+
+.coupon {
+ background-color: rgba(255, 241, 241, 0.47);
+ height: 171rpx;
+ border: solid 1rpx #f85d64;
+ border-radius: 10rpx;
+ position: relative;
+ overflow: hidden;
+}
+
+.choose-coupon {
+ margin: 32rpx 32rpx 0;
+ border-radius: 10rpx;
+ background: #fff1f1;
+ padding: 26rpx 16rpx;
+ color: #D31F28;
+ font-size: 28rpx;
+}
+
+.coupon-list {
+ box-sizing: border-box;
+ height: calc(50vh - 44px);
+}
+
+
+.butt {
+ width: 1rpx;
+ height: 100%;
+ position: relative;
+ z-index: 9;
+ border-left: 1rpx dashed #f85d64;
+}
+
+.butt:before {
+ z-index: 10;
+ box-sizing: border-box;
+ position: absolute;
+ content: "";
+ width: 24rpx;
+ height: 12rpx;
+ border-bottom: 1rpx solid #f85d64;
+ border-right: 1rpx solid #f85d64;
+ border-left: 1rpx solid #f85d64;
+ border-radius: 0 0 24rpx 24rpx;
+ left: -12rpx;
+ background-color: #ffffff;
+}
+
+.butt:after {
+ box-sizing: border-box;
+ position: absolute;
+ content: "";
+ width: 24rpx;
+ height: 12rpx;
+ bottom: 0;
+ border-bottom: 1rpx solid #ffff;
+ border-right: 1rpx solid #f85d64;
+ border-left: 1rpx solid #f85d64;
+ border-top: 1rpx solid #f85d64;
+ border-radius: 24rpx 24rpx 0 0;
+ left: -12rpx;
+ background-color: #ffffff;
+}
+
+
+.coupon-btn {
+ margin: 0 30rpx 30rpx;
+ height: 98rpx;
+ border-radius: 10rpx;
+ background-color: #D31F28;
+ font-size: 34rpx;
+ color: #fff;
+ line-height: 98rpx;
+ text-align: center;
+}
+
</style>
--
Gitblit v1.9.1