182 lines
3.6 KiB
Vue
182 lines
3.6 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="购买卡劵" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
title-size='36' height='50' id="navbar">
|
||
</u-navbar>
|
||
<view class="list">
|
||
<view class="zong">
|
||
<view class="lt">
|
||
卡劵名称
|
||
</view>
|
||
<view class="rt">
|
||
{{xqobj.name == null ? '--' : xqobj.name}}
|
||
</view>
|
||
</view>
|
||
<view class="zong">
|
||
<view class="lt">
|
||
适用门店
|
||
</view>
|
||
<view class="rt">
|
||
{{xqobj.storeName == null ? '--' : xqobj.storeName}}
|
||
</view>
|
||
</view>
|
||
<view class="zong">
|
||
<view class="lt">
|
||
适用项目
|
||
</view>
|
||
<view class="rt">
|
||
预约门店
|
||
</view>
|
||
</view>
|
||
<view class="zong">
|
||
<view class="lt">
|
||
有效期至
|
||
</view>
|
||
<view class="rt">
|
||
{{xqobj.validityValue == null ? '--' : xqobj.validityValue + '天'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="anniu">
|
||
<view class="price">
|
||
总计：<text>￥{{xqobj.retailPrice == null ? '--' : xqobj.retailPrice}}</text>
|
||
</view>
|
||
<view class="qd" @click="btngm">
|
||
确定购买
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
couponId:'',
|
||
xqobj:{}
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.couponId = option.couponId
|
||
this.getxq()
|
||
},
|
||
methods: {
|
||
// 点击购买
|
||
btngm(){
|
||
let data = {
|
||
cardId: this.couponId,
|
||
payType: "wx",
|
||
appid: 4
|
||
}
|
||
this.$u.post(`/app/order/cardOrder`,data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.response.timeStamp,
|
||
nonceStr: res.data.response.nonceStr,
|
||
package: res.data.response.packageVal,
|
||
signType: res.data.response.signType,
|
||
paySign: res.data.response.paySign,
|
||
success: (res) => {
|
||
console.log(res, '支付成功')
|
||
uni.reLaunch({
|
||
url:'/page_user/kabao/index'
|
||
})
|
||
},
|
||
fail(err) {
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getxq(){
|
||
this.$u.get(`app/card/${this.couponId}`).then(res => {
|
||
if (res.code == 200) {
|
||
this.xqobj = res.data
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ .u-iconfont,
|
||
/deep/ .u-title{
|
||
padding-bottom: 20rpx;
|
||
}
|
||
page {
|
||
background-color: #F6F6F6;
|
||
}
|
||
.anniu{
|
||
width: 668rpx;
|
||
height: 116rpx;
|
||
line-height: 116rpx;
|
||
padding: 0 42rpx;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
||
border-radius: 83rpx 83rpx 83rpx 83rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 50rpx;
|
||
.qd{
|
||
width: 258rpx;
|
||
height: 76rpx;
|
||
background: #48893B;
|
||
border-radius: 49rpx 49rpx 49rpx 49rpx;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 76rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.price{
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
text{
|
||
color: #FF1818;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
.list{
|
||
width: 750rpx;
|
||
max-height: 498rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
margin-top: 20rpx;
|
||
.zong{
|
||
width: 100%;
|
||
height: 106rpx;
|
||
line-height: 106rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1rpx solid #D8D8D8;
|
||
padding: 0 42rpx;
|
||
box-sizing: border-box;
|
||
.lt{
|
||
font-size: 28rpx;
|
||
color: #7C7C7C;
|
||
}
|
||
.rt{
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
</style> |