428 lines
10 KiB
Vue
428 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="c-box">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="t-img">
|
|||
|
|
<image :src="baseUrl + arr.goodsImage" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="t-right">
|
|||
|
|
<!-- <view class="hi1">xxx汽车站</view> -->
|
|||
|
|
<view class="hi2">{{arr.goodsName}}</view>
|
|||
|
|
<view style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
|||
|
|
<view class="hi3">随时退 · 过期退 · 到店</view>
|
|||
|
|
<view class="juz">￥{{arr.goodsPrice / 100}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="cont-top margin-bottom">
|
|||
|
|
<view class="dis">
|
|||
|
|
<image :src="imagesUrl+'jf.png'" mode=""></image>
|
|||
|
|
<text>余额</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="xju">{{arr.balance / 100}}元</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cont-top">
|
|||
|
|
<view class="dis">
|
|||
|
|
<image :src="imagesUrl+'quan.png'" mode=""></image>
|
|||
|
|
<text>优惠券</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-row" style="font-size: 14px;"
|
|||
|
|
@click="this.$tab.navigateTo(`/subCouponPages/useCoupon/useCoupon?goodId=${id}&type=qx`)">
|
|||
|
|
<text class="margin-right-xs text-gray">{{ yhqtitle || '去选择' }}</text>
|
|||
|
|
<u-icon name="arrow-right"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cont-vip">
|
|||
|
|
<view class="v-left" v-if="arr.userLevel==0">普通会员</view>
|
|||
|
|
<view class="v-left" v-if="arr.userLevel==1">白银会员</view>
|
|||
|
|
<view class="v-left" v-if="arr.userLevel==2">黄金会员</view>
|
|||
|
|
<view class="v-left" v-if="arr.userLevel==3">白金会员</view>
|
|||
|
|
<view class="">
|
|||
|
|
白银会员本单打{{arr.silver}}折，将为您节省{{((arr.goodsPrice/100)*((10-arr.silver)/10)).toFixed(2)}}元</view>
|
|||
|
|
<view class="">黄金会员本单打{{arr.gold}}折，将为您节省{{((arr.goodsPrice/100)*((10-arr.gold)/10)).toFixed(2)}}元
|
|||
|
|
</view>
|
|||
|
|
<view class="">
|
|||
|
|
白金会员本单打{{arr.platinum}}折，将为您节省{{((arr.goodsPrice/100)*((10-arr.platinum)/10)).toFixed(2)}}元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cont-bottom">
|
|||
|
|
<view class="c-z">会员折扣</view>
|
|||
|
|
<view class="c-j">￥{{preferential}}</view>
|
|||
|
|
<!-- <view class="c-z">小计</view>
|
|||
|
|
<view class="c-jc">￥{{goodsPrice}}</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="c-bottom">
|
|||
|
|
<view class="b-left" v-if="couponType != 'offset'">
|
|||
|
|
<view class="ju">
|
|||
|
|
优惠券减免{{discount}}元
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="hui">会员折扣{{preferential}}元</view>
|
|||
|
|
|
|||
|
|
<view class="xju"> 余额抵扣{{yedkAmount/100}}元</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="juz" v-if="couponType == 'offset'">
|
|||
|
|
优惠券全额减免！
|
|||
|
|
</view>
|
|||
|
|
<view style="display: flex; align-items: center;">
|
|||
|
|
|
|||
|
|
<view class="juz">￥{{wxAmount.toFixed(2)}}</view>
|
|||
|
|
<view class="b-right" @click="getpayment()">
|
|||
|
|
<view class="">立即支付</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
baseUrl: getApp().globalData.config.baseUrl,
|
|||
|
|
imagesUrl: getApp().globalData.config.imagesUrl,
|
|||
|
|
id: '',
|
|||
|
|
user: {},
|
|||
|
|
type: 'qx',
|
|||
|
|
yedkAmount: 0,
|
|||
|
|
wxAmount: 0,
|
|||
|
|
arr: {},
|
|||
|
|
couponType:'',
|
|||
|
|
orderid: '',
|
|||
|
|
goodsPrice: '', //总价格
|
|||
|
|
preferential: '', //优惠
|
|||
|
|
current: 0, //积分已经÷100 相当于能抵的价格
|
|||
|
|
yhqtitle: '',
|
|||
|
|
userCouponId: null, // 使用的优惠券
|
|||
|
|
discount: 0 // 使用的优惠券价格
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.id = option.id
|
|||
|
|
this.type = option.type
|
|||
|
|
this.userinfo = uni.getStorageSync("userinfo")
|
|||
|
|
console.log('用户信息', this.userinfo);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
uni.$on('userCouponDiscount', (data) => {
|
|||
|
|
console.log('jianting', data);
|
|||
|
|
//优惠券页面返回的东西
|
|||
|
|
this.userCouponId = data.userCouponId
|
|||
|
|
this.discount = data.discount
|
|||
|
|
this.yhqtitle = data.title
|
|||
|
|
this.couponType = data.couponType
|
|||
|
|
})
|
|||
|
|
this.getorder()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//简单的加减法
|
|||
|
|
getjaj(one, two) {
|
|||
|
|
let num = one - two
|
|||
|
|
if (num <= 0) {
|
|||
|
|
return 0
|
|||
|
|
} else {
|
|||
|
|
return num
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//获取支付页信息
|
|||
|
|
async getorder() {
|
|||
|
|
const res = await this.$request({
|
|||
|
|
url: '/orderApi/orderDetail?goodsId=' + this.id + '&type=qx',
|
|||
|
|
})
|
|||
|
|
console.log('获取支付页信息', res);
|
|||
|
|
this.arr = res.data
|
|||
|
|
this.isSpecial = res.data.isSpecial
|
|||
|
|
console.log(this.arr);
|
|||
|
|
//处理积分
|
|||
|
|
this.current = this.arr.balance / 100
|
|||
|
|
//页面处理
|
|||
|
|
if (res.data.userLevel == 0) {
|
|||
|
|
this.goodsPrice = this.arr.goodsPrice / 100
|
|||
|
|
this.preferential = 0
|
|||
|
|
}
|
|||
|
|
if (res.data.userLevel == 1) {
|
|||
|
|
this.goodsPrice = ((this.arr.goodsPrice / 1000) * this.arr.silver).toFixed(2)
|
|||
|
|
this.preferential = ((this.arr.goodsPrice / 100) * ((10 - this.arr.silver) / 10)).toFixed(2)
|
|||
|
|
}
|
|||
|
|
if (res.data.userLevel == 2) {
|
|||
|
|
this.goodsPrice = ((this.arr.goodsPrice / 1000) * this.arr.gold).toFixed(2)
|
|||
|
|
this.preferential = ((this.arr.goodsPrice / 100) * ((10 - this.arr.gold) / 10)).toFixed(2)
|
|||
|
|
}
|
|||
|
|
if (res.data.userLevel == 3) {
|
|||
|
|
this.goodsPrice = ((this.arr.goodsPrice / 1000) * this.arr.platinum).toFixed(2)
|
|||
|
|
this.preferential = ((this.arr.goodsPrice / 100) * ((10 - this.arr.platinum) / 10)).toFixed(2)
|
|||
|
|
}
|
|||
|
|
//处理优惠卷逻辑
|
|||
|
|
|
|||
|
|
let tmpPrice = this.goodsPrice * 100
|
|||
|
|
let needAmount = tmpPrice >= this.discount * 100 ? tmpPrice - this.discount * 100 : 0
|
|||
|
|
this.yedkAmount = this.arr.balance < needAmount ? this.arr.balance : needAmount
|
|||
|
|
if(this.couponType&&this.couponType=='offset'){
|
|||
|
|
this.wxAmount =0
|
|||
|
|
}else{
|
|||
|
|
this.wxAmount = ((this.goodsPrice * 100) - this.discount * 100 - this.yedkAmount) > 0 ? ((this
|
|||
|
|
.goodsPrice * 100) - this.discount * 100 - this.yedkAmount) / 100 : 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 创建订单 吊起支付
|
|||
|
|
async getpayment() {
|
|||
|
|
let that = this
|
|||
|
|
console.log('正常掏钱');
|
|||
|
|
const res = await this.$request({
|
|||
|
|
method: 'post',
|
|||
|
|
url: '/orderApi/createOrder',
|
|||
|
|
data: {
|
|||
|
|
goodsId: this.id,
|
|||
|
|
goodsType: 'qx',
|
|||
|
|
balance: this.yedkAmount,
|
|||
|
|
couponId: this.userCouponId
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.orderid = res.data
|
|||
|
|
if (res.data == 11111111) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/subInspectionPages/Paymentsuccessful/Paymentsuccessful'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
const ress = await this.$request({
|
|||
|
|
url: '/payApi/prepayment?type=jsapi' + '&orderId=' + this.orderid,
|
|||
|
|
})
|
|||
|
|
console.log(ress);
|
|||
|
|
wx.requestPayment({
|
|||
|
|
timeStamp: ress.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
|
|||
|
|
nonceStr: ress.nonceStr, // 随机字符串，长度为32个字符以下。
|
|||
|
|
package: ress.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
|
|||
|
|
signType: ress.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
|
|||
|
|
paySign: ress.paySign, // 签名，详见签名生成算法
|
|||
|
|
success: function(res) {
|
|||
|
|
console.log('成功', res);
|
|||
|
|
if (res.errMsg = 'requestPayment:ok') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付成功'
|
|||
|
|
})
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/subInspectionPages/Paymentsuccessful/Paymentsuccessful'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
|
|||
|
|
},
|
|||
|
|
fail: function(res) {
|
|||
|
|
console.log('执行失败1', res);
|
|||
|
|
that.cancelpay()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
async cancelpay() {
|
|||
|
|
console.log('执行失败2');
|
|||
|
|
const resx = await this.$request({
|
|||
|
|
method: 'post',
|
|||
|
|
url: '/orderApi/cancelPay',
|
|||
|
|
params: {
|
|||
|
|
orderId: this.orderid,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付失败'
|
|||
|
|
})
|
|||
|
|
console.log(resx);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.container {}
|
|||
|
|
|
|||
|
|
.c-box {
|
|||
|
|
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t-right {
|
|||
|
|
width: 220px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
background: white;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
background: white;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cont-top {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cont-vip {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
background: #fffaf5;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 10px;
|
|||
|
|
padding-top: 35px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-left {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0px;
|
|||
|
|
top: 0px;
|
|||
|
|
background: linear-gradient(to left, #FFEBC4, #E2B48C, );
|
|||
|
|
border-radius: 0px 0px 10px 0px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 5px;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cont-bottom {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t-img {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c-bottom {
|
|||
|
|
|
|||
|
|
height: 70px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0px 15px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0px;
|
|||
|
|
background: white;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ju {
|
|||
|
|
color: rgba(255, 103, 29, 1);
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.juz {
|
|||
|
|
color: rgba(255, 103, 29, 1);
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.xju {
|
|||
|
|
color: rgba(255, 103, 29, 1);
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-right {
|
|||
|
|
background: linear-gradient(to left, #ff6123, #ffa32e, );
|
|||
|
|
width: 110px;
|
|||
|
|
height: 38px;
|
|||
|
|
border-radius: 50px;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hi1 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
color: #4F4F4F;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hi2 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #4F4F4F;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hi3 {
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #4F4F4F;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c-z {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c-j {
|
|||
|
|
color: #FF671D;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c-jc {
|
|||
|
|
color: #FF671D;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dis {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 14px;
|
|||
|
|
height: 14px;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|