<template>
|
<view class="zf">
|
<view class="zf_time">支付剩余时间 <u-count-down :time="30 * 60 * 1000" format="mm:ss" @finish="fanhui"></u-count-down></view>
|
<view class="zf_price">¥{{info.price}}</view>
|
<view class="zf_tc">骑行套餐</view>
|
<view class="zf_list">
|
<view class="zf_list_row">
|
<view class="zf_list_row_left">
|
<image src="@/static/icon/ic_wechat@2x.png" mode="widthFix"></image>
|
<text>微信支付</text>
|
</view>
|
<view class="zf_list_row_icon">
|
<image src="@/static/icon/ic_choose@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
<view class="tcx_footer" @click="pay">
|
<viwe class="tcx_footer_button">确认支付</viwe>
|
<view style="padding-bottom: env(safe-area-inset-bottom)"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
id: null,
|
info: null
|
};
|
},
|
onLoad(options) {
|
this.id = options.id
|
this.getDesc()
|
},
|
methods: {
|
fanhui() {
|
uni.navigateBack({ delta: 1 });
|
},
|
async getDesc() {
|
let res = await this.$u.api.discountDetail({ id: this.id })
|
if (res.code === 200) {
|
this.info = res.data
|
}
|
},
|
async pay() {
|
let res = await this.$u.api.createDiscountOrderPay({ discountId: this.id })
|
if (res.code === 200) {
|
wx.requestPayment({
|
timeStamp: res.data.timeStamp,
|
nonceStr: res.data.nonceStr,
|
package: res.data.packageVal,
|
signType: res.data.signType,
|
paySign: res.data.paySign,
|
success (res) {
|
if (res.errMsg = 'requestPayment:ok') {
|
uni.showToast({ title: '充值成功', icon: 'success', duration: 2000 });
|
uni.navigateBack({ delta: 1 });
|
} else {
|
uni.showToast({ title: '未支付', icon: 'error', duration: 2000 });
|
}
|
},
|
fail(err) {
|
uni.showToast({ title: '未支付', icon: 'error', duration: 2000 });
|
}
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.zf {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
.zf_time {
|
display: flex;
|
align-items: center;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #01B6AD;
|
margin-top: 60rpx;
|
/deep/ .u-count-down__text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #01B6AD;
|
margin-left: 10rpx;
|
}
|
}
|
.zf_price {
|
font-weight: 600;
|
font-size: 60rpx;
|
color: #111111;
|
margin-top: 20rpx;
|
}
|
.zf_tc {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
margin-top: 20rpx;
|
}
|
.zf_list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.zf_list_row {
|
width: 100%;
|
height: 108rpx;
|
background: rgba(1,182,173,0.06);
|
border-radius: 20rpx;
|
box-sizing: border-box;
|
border: 3rpx solid #01B6AD;
|
margin-top: 60rpx;
|
padding: 0 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.zf_list_row_left {
|
display: flex;
|
align-items: center;
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 20rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
}
|
.zf_list_row_icon {
|
width: 40rpx;
|
height: 40rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
.tcx_footer {
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
z-index: 999;
|
.tcx_footer_button {
|
width: 100%;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #01B6AD;
|
box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1,182,173,0.24);
|
border-radius: 46rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
margin-bottom: 20rpx;
|
}
|
}
|
}
|
</style>
|
