code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-18 17:05:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加pc余额支付功能。增加倒计时

Browse Source
This commit is contained in:
Chopper
2021-06-25 17:31:12 +08:00
parent 0a11a25ccd
commit 75d4fda92d
3 changed files with 129 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
buyer/src/pages/payment/PayMent.vue
View File

@@ -5,31 +5,68 @@
<div class="head-left">
<div class="left-tips">订单提交成功，请尽快付款！</div>
<div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
<div class="left-tips-count-down">
<mv-count-down :startTime="startTime"
:endTime="endTime"
:endText="endText"
:dayTxt="'天'"
:hourTxt="'小时'"
:minutesTxt="'分钟'"
:secondsTxt="'秒'"
:isStart="isStart"></mv-count-down>
</div>
</div>
<div class="head-right">
<div>应付金额 <span class="price">{{payDetail.price | unitPrice}}</span>元</div>
<div>应付金额 <span class="price">{{ payDetail.price | unitPrice }}</span>元</div>
</div>
</div>
<div class="wrapper-box">
<div class="-box-item" @click="handlePay('ALIPAY')">
<img src="https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/a9936a369e82e0c6c42112674a5220e8_fullsize.jpg" alt="">
<span>支付宝</span>
</div>
<div class="-box-item" @click="handlePay('WECHAT')">
<img src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3774939867,2826752539&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=796e842a5ef2d16d9edc872d6f1147ef" alt="">
<span>微信</span>
<div v-for="item in support">
<div v-if="item === 'ALIPAY'" class="-box-item" @click="handlePay('ALIPAY')">
<img
src="https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/a9936a369e82e0c6c42112674a5220e8_fullsize.jpg"
alt="">
<span>支付宝</span>
</div>
<div v-if="item === 'WECHAT'" class="-box-item" @click="handlePay('WECHAT')">
<img
src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3774939867,2826752539&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=796e842a5ef2d16d9edc872d6f1147ef"
alt="">
<span>微信</span>
</div>
<div v-if="item === 'WALLET'" class="-box-item" @click="handlePay('WALLET')">
<img
src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3774939867,2826752539&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=796e842a5ef2d16d9edc872d6f1147ef"
alt="">
<span>余额支付</span>
<span>当前剩余({{ walletValue|unitPrice('￥') }})</span>
</div>
</div>
</div>
<BaseFooter></BaseFooter>
</div>
</template>
<script>
import { tradeDetail } from '@/api/pay.js';
import {tradeDetail} from '@/api/pay.js';
import MvCountDown from 'mv-count-down'
import {Message} from 'view-design';
export default {
components: {
MvCountDown
},
data () {
return {
payDetail: {}, // 支付详情
qrcode: '' // 支付二维码
support: [], // 支持配送方式
walletValue: 0, // 当前余额
qrcode: '', // 支付二维码
startTime: new Date().getTime(), // 开始时间（时间戳）
endTime: 0, // 完成的时间（时间戳）
endText: '订单已超时取消', // 倒计时完成的提示文本
isStart: false // 控制倒计时开始的时机（异步请求完成开启）
};
},
methods: {
@@ -39,10 +76,23 @@ export default {
tradeDetail(params).then(res => {
if (res.success) {
this.payDetail = res.result;
this.endTime = this.payDetail.autoCancel
this.isStart = true
this.support = this.payDetail.support
this.walletValue = this.payDetail.walletValue
}
});
},
// 支付
handlePay (way) {
// 余额支付则直接跳转
if (way === 'WALLET') {
// 如果待支付金额大于余额，则报错
if (this.payDetail.price > this.walletValue) {
Message.error('余额不足以支付当前订单，如需充值请前往会员中心');
return;
}
}
const params = this.$route.query;
params.paymentMethod = way;
params.paymentClient = 'NATIVE';
@@ -56,64 +106,81 @@ export default {
};
</script>
<style scoped lang="scss">
.head-left{
font-weight: bold;
.head-left {
font-weight: bold;
}
.left-tips{
font-size: 21px;
.left-tips {
font-size: 21px;
}
.-box-item{
margin-right: 30px;
display: flex;
font-size: 21px;
font-weight: bold;
align-items: center;
margin: 20px 20px;
cursor: pointer;
@include content_color($light_content_color);
&:hover{color: $theme_color;}
.-box-item {
margin-right: 30px;
display: flex;
font-size: 21px;
font-weight: bold;
align-items: center;
margin: 20px 20px;
cursor: pointer;
@include content_color($light_content_color);
>span{
margin-left: 10px;
}
>img{
border-radius: 10px;
width: 60px;
height: 60px;
}
&:hover {
color: $theme_color;
}
> span {
margin-left: 10px;
}
> img {
border-radius: 10px;
width: 60px;
height: 60px;
}
}
.left-tips-time{
font-size: 16px;
.left-tips-time {
font-size: 16px;
}
.wrapper-head{
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1.75;
.left-tips-count-down {
font-size: 10px;
color: red;
}
.wrapper-head {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1.75;
}
.wrapper-head,
.wrapper-box {
padding: 20px 40px;
width: 1200px;
margin: 20px auto;
}
.wrapper-box {
@include white_background_color();
height: auto;
display: flex;
}
.wrapper {
width: 100%;
height: 100%;
}
.price{
font-size: 18px;
font-weight: bold;
color: $theme_color;
.price {
font-size: 18px;
font-weight: bold;
color: $theme_color;
}
.head-right{
font-weight: bold;
.head-right {
font-weight: bold;
}
</style>