407 lines
8.9 KiB
Vue
407 lines
8.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="c-box">
|
||
<view class="top">
|
||
<view class="t-img">
|
||
<image :src="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>
|
||
<view class="containerInfo">
|
||
<view class="c-top">
|
||
<view class="t-box">
|
||
<view class="box">无论您身处何处，遇到道路困境时，我们都是您最可靠的伙伴</view>
|
||
<view class="box"> 我们的道路救援团队随时待命，为您提供快速、安全的救援服务</view>
|
||
<view class="box">无论是车辆故障、意外事故还是其他突发状况，我们具备专业知识和先进设备</view>
|
||
<view class="box">能够迅速解决问题，让您重新上路。我们的使命是保障您的安全与顺利</view>
|
||
<view class="box"> 为您驱走困境，让您的旅途更加畅通无阻</view>
|
||
<view class="box"> 选择我们，让道路上的困扰不再成为您的负担</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="c-bottom">
|
||
<view class="b-left">
|
||
<view class="xju"> 余额抵扣{{yedkAmount/100}}元</view>
|
||
</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 {
|
||
title:'',
|
||
num:'',
|
||
baseUrl: getApp().globalData.config.baseUrl,
|
||
imagesUrl: getApp().globalData.config.imagesUrl,
|
||
id: '',
|
||
user: {},
|
||
type: 'qx',
|
||
yedkAmount:0,
|
||
wxAmount:0,
|
||
arr: {},
|
||
orderid: '',
|
||
goodsPrice: '', //总价格
|
||
preferential: '', //优惠
|
||
current: 0, //积分已经÷100 相当于能抵的价格
|
||
yhqtitle:'',
|
||
userCouponId: null, // 使用的优惠券
|
||
discount: 0 // 使用的优惠券价格
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.title = option.title
|
||
|
||
this.num = option.num * 100
|
||
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.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=jymd&title='+this.title+'&amount='+this.num,
|
||
})
|
||
console.log('获取支付页信息', res);
|
||
this.arr = res.data
|
||
console.log(this.arr);
|
||
//处理积分
|
||
this.current = this.arr.balance / 100
|
||
|
||
this.goodsPrice = this.arr.goodsPrice / 100
|
||
this.preferential = 0
|
||
|
||
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
|
||
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: {
|
||
goodsTitle :this.title,
|
||
mdAmount:this.num,
|
||
goodsId: this.id,
|
||
goodsType: 'jymd',
|
||
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 {}
|
||
.containerInfo{
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #ffffff;
|
||
}
|
||
.c-top{
|
||
width: 100%;
|
||
padding: 15px;
|
||
}
|
||
.t-title{
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color:#FFFFFF;
|
||
}
|
||
.t-box{
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
padding: 0px 15px;
|
||
border-radius: 6px;
|
||
}
|
||
.box{
|
||
padding: 4px 1px;
|
||
color: rgba(0, 0, 0, 1.0) ;
|
||
}
|
||
.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> |