zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
Chopper 2021-06-25 17:31:12 +08:00
parent 0a11a25ccd
commit 75d4fda92d
3 changed files with 129 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
buyer/package.json
View File

@ -14,6 +14,7 @@
"js-cookie": "^2.2.1",
"less": "^3.12.2",
"less-loader": "^5.0.0",
"mv-count-down": "^0.1.15",
"psl": "^1.8.0",
"qs": "^6.9.4",
"swiper": "^6.4.1",

101
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="">
<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 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="">
<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,14 +106,16 @@ export default {
};
</script>
<style scoped lang="scss">
.head-left{
.head-left {
font-weight: bold;
}
.left-tips{
.left-tips {
font-size: 21px;
}
.-box-item{
.-box-item {
margin-right: 30px;
display: flex;
font-size: 21px;
@ -73,47 +125,62 @@ export default {
cursor: pointer;
@include content_color($light_content_color);
&:hover{color: $theme_color;}
&:hover {
color: $theme_color;
}
>span{
> span {
margin-left: 10px;
}
>img{
> img {
border-radius: 10px;
width: 60px;
height: 60px;
}
}
.left-tips-time{
.left-tips-time {
font-size: 16px;
}
.wrapper-head{
.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{
.price {
font-size: 18px;
font-weight: bold;
color: $theme_color;
}
.head-right{
.head-right {
font-weight: bold;
}
</style>

17
buyer/yarn.lock
View File

@ -2051,7 +2051,7 @@ copy-webpack-plugin@^4.0.1:
p-limit "^1.0.0"
serialize-javascript "^1.4.0"
core-js@^2.4.0, core-js@^2.5.0:
core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
version "2.6.12"
resolved "https://registry.npm.taobao.org/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1607216048810&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
integrity sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw=
@ -5150,6 +5150,16 @@ mute-stream@0.0.7:
resolved "https://registry.npm.taobao.org/mute-stream/download/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
mv-count-down@^0.1.15:
version "0.1.15"
resolved "https://registry.npmjs.org/mv-count-down/-/mv-count-down-0.1.15.tgz#a3f3c1677576e592c7710b441b2dda96acac2702"
integrity sha512-7poh86i27D/u4AvE9Ne8QHhy61p4MYAhSf4XAVyxzL0gXVCyccJ0NtJferEOxBP6C2q9jImknpKLGdwnEeJ7qQ==
dependencies:
core-js "^2.6.5"
vue "^2.6.10"
vue-router "^3.0.3"
vuex "^3.0.1"
nan@^2.12.1, nan@^2.13.2:
version "2.14.2"
resolved "https://registry.npm.taobao.org/nan/download/nan-2.14.2.tgz?cache=0&sync_timestamp=1602591700047&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnan%2Fdownload%2Fnan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
@ -8315,6 +8325,11 @@ vue-router@^3.0.1:
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1607347231238&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
integrity sha1-wBb0IDCuKTLxTkdIs5odmg4lDmY=
vue-router@^3.0.3:
version "3.5.2"
resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
version "3.1.2"
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-3.1.2.tgz#6b66ad34998fc9520c2f1e4d5fa4091641c1597a"