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>
|