You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
429 lines
8.7 KiB
429 lines
8.7 KiB
<template> |
|
<view class="content"> |
|
<view class="bk-top"></view> |
|
<view class="order-card"> |
|
<view class="order-title"> |
|
<text class="order-title-text">订单详情</text> |
|
</view> |
|
<view class="commodity-list" v-for="(commodity,index) in commdodiryList" :key="index"> |
|
<text class="commodity-name">{{ commodity.commodityName }}</text> |
|
<text class="commodity-name-en">{{ commodity.commodityNameEn }}</text> |
|
<text class="commodity-number">x{{ commodity.number }}</text> |
|
<text class="commodity-money">￥{{ commodity.money }}</text> |
|
</view> |
|
<view class="order-hr"></view> |
|
<view class="order-all-money"> |
|
<text class="all-money">￥{{ order.money == undefined ? 0 : order.money }}</text> |
|
<text class="all-money-remark">合计</text> |
|
</view> |
|
<view class="bk-on"></view> |
|
<radio-group @change="radioChange"> |
|
<view class="pay-way"> |
|
<view class="pay-way-view"> |
|
<icon class="iconfont iconwallet i-iconwallet" :class="iconwallet"></icon> |
|
<text class="pay-name" :class="payNameColor">余额支付</text> |
|
<text class="pay-money" :class="payNameColor">（剩余：￥{{ money }}）</text> |
|
<text class="pay-money pay-name-no" v-if="!userMoneyOK">余额不足</text> |
|
<radio value="userPay" class="pay-radio" v-if="userMoneyOK" color="#8ADE4D" /> |
|
</view> |
|
</view> |
|
<view class="pay-way"> |
|
<view class="pay-way-view pay-way-view-no"> |
|
<icon class="iconfont iconzfbpay i-iconwallet i-iconwechatpay"></icon> |
|
<text class="pay-name pay-name-yes">支付宝支付</text> |
|
<radio value="aliApy" class="pay-radio" :checked="true" color="#8ADE4D" /> |
|
</view> |
|
</view> |
|
</radio-group> |
|
</view> |
|
<view class="order-bottom"> |
|
<text class="bottom-all-money">合计：￥{{ order.money == undefined ? 0 : order.money }}</text> |
|
<button class="to-pay" :class="toPayColor" @click="toPay">去支付（{{ order.number === undefined ? 0 : order.number }}）</button> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
import {getOrderInfo,unifiedOrder,useUserPay,pay} from '@/api/index/index.js' |
|
|
|
// document.title = '确认订单' |
|
|
|
export default { |
|
data() { |
|
return { |
|
commdodiryList: [], |
|
money: 0, |
|
order: {}, |
|
userId: '', |
|
sysOpenId: '', |
|
code: '', |
|
openId: '', |
|
wxPayResult: {}, |
|
isPay: false, |
|
iconwallet: 'i-iconwallet-no', |
|
payNameColor: 'pay-name-no', |
|
userMoneyOK: false, |
|
toPayColor: 'to-pay-no', |
|
isOrder: false, |
|
payWay: 'aliApy', |
|
isPaySuccess: false |
|
} |
|
}, |
|
onLoad(param) { |
|
this.userId = param.userId |
|
this.sysOpenId = param.sysOpenId |
|
// this.userId = '59c7808b-c098-41ca-abe0-e2035ce39f78' |
|
// this.sysOpenId = 'oMt0N5KE4QbBPvovuJt6OrIk_wuI' |
|
this.getOrderInfo() |
|
}, |
|
methods: { |
|
radioChange(event){ |
|
this.payWay = event.detail.value |
|
}, |
|
toPay(){ |
|
if(this.isOrder){ |
|
if(!this.isPaySuccess){ |
|
if(this.payWay == 'aliApy'){ |
|
this.aliApy() |
|
}else if(this.payWay == 'userPay'){ |
|
this.useUserPay() |
|
}else { |
|
uni.showToast({ |
|
title: '请选择支付方式', |
|
icon: 'none' |
|
}) |
|
} |
|
}else { |
|
uni.showToast({ |
|
title: '请勿重复提交订单', |
|
icon: 'none' |
|
}) |
|
} |
|
}else { |
|
uni.showToast({ |
|
title: '数据加载中', |
|
icon: 'none' |
|
}) |
|
} |
|
}, |
|
aliApy(){ |
|
let body = '' |
|
for(var i = 0; i < this.commdodiryList; i++){ |
|
body = body + this.commdodiryList[i].commodityName |
|
} |
|
let query = { |
|
outTradeNo: this.order.orderId, |
|
subject: '商品', |
|
totalAmount: this.order.money, |
|
body: body |
|
} |
|
pay(query).then(res=>{ |
|
document.querySelector('body').innerHTML = res |
|
document.forms[0].submit() |
|
}) |
|
}, |
|
useUserPay(){ |
|
let query = { |
|
sysOpenId: this.sysOpenId, |
|
userId: this.userId |
|
} |
|
useUserPay(query).then(res=>{ |
|
if(res.success){ |
|
uni.showToast({ |
|
title: '付款成功', |
|
icon: 'success' |
|
}) |
|
this.isPaySuccess = true |
|
this.toreLaunchPage() |
|
}else { |
|
uni.showToast({ |
|
title: '支付失败', |
|
icon: 'none' |
|
}) |
|
} |
|
}) |
|
}, |
|
getOrderInfo(){ |
|
let query = { |
|
userId: this.userId |
|
} |
|
getOrderInfo(query).then(res=>{ |
|
this.sysOpenId = res |
|
if(res.success){ |
|
this.order = res.data.order |
|
this.commdodiryList = res.data.order.orderCommodityList |
|
this.money = res.data.money |
|
if(this.order.money != undefined && this.order.money > 0){ |
|
this.isOrder = true |
|
this.toPayColor = 'to-pay-yes' |
|
if(this.order.money <= this.money){ |
|
this.iconwallet = 'i-iconwallet-yes' |
|
this.payNameColor = 'pay-name-yes' |
|
this.userMoneyOK = true |
|
} |
|
} |
|
} |
|
}) |
|
}, |
|
toreLaunchPage(){ |
|
let vm = this |
|
uni.reLaunch({ |
|
url: '/pages/pay-ok/pay-ok?money=' + vm.order.money |
|
}); |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
|
|
page { |
|
background: #FFFFFF; |
|
} |
|
|
|
.content { |
|
width: 750upx; |
|
width: 750upx; |
|
} |
|
|
|
.bk-top { |
|
background: #F7F7F7; |
|
width: 750upx; |
|
height: 10.41upx; |
|
} |
|
|
|
.order-card { |
|
width: 750upx; |
|
width: 100%; |
|
margin-bottom: 625upx; |
|
} |
|
|
|
.order-title { |
|
height: 97.91upx; |
|
width: 750upx; |
|
} |
|
|
|
.order-title-text { |
|
height:45.83upx; |
|
font-size:33.33upx; |
|
font-family:PingFangSC-Regular; |
|
font-weight:700; |
|
color:rgba(17,17,17,1); |
|
line-height:45.83upx; |
|
margin-top: 31.25upx; |
|
margin-left: 31.25upx; |
|
float: left; |
|
} |
|
|
|
.commodity-list { |
|
width: 750upx; |
|
height: 118.75upx; |
|
position: relative; |
|
} |
|
|
|
.commodity-name { |
|
height:41.66upx; |
|
font-size:29.16upx; |
|
font-family:PingFangSC-Semibold; |
|
font-weight:700; |
|
color:rgba(17,17,17,1); |
|
line-height:41.66upx; |
|
position: absolute; |
|
left: 41.66upx; |
|
top: 0; |
|
} |
|
|
|
.commodity-name-en { |
|
height:29.16upx; |
|
font-size:25upx; |
|
font-family:PingFangSC-Regular; |
|
font-weight:400; |
|
color: #333333; |
|
line-height:29.16upx; |
|
position: absolute; |
|
left: 41.66upx; |
|
top: 47.91upx; |
|
} |
|
|
|
.commodity-number { |
|
height:35.41upx; |
|
font-size:25upx; |
|
font-family:PingFangSC-Regular; |
|
font-weight:400; |
|
color:rgba(17,17,17,1); |
|
line-height:35.41upx; |
|
position: absolute; |
|
left: 550upx; |
|
top: 52.08upx; |
|
} |
|
|
|
.commodity-money { |
|
height:35.41upx; |
|
font-size:25upx; |
|
font-family:PingFangSC-Regular; |
|
font-weight:700; |
|
color:rgba(17,17,17,1); |
|
line-height:35.41upx; |
|
position: absolute; |
|
right: 31.25upx; |
|
top: 52.08upx; |
|
} |
|
|
|
.order-hr { |
|
width:687.5upx; |
|
height:2.08upx; |
|
margin-left: 31.25upx; |
|
background: #F0F0F0; |
|
} |
|
|
|
.order-all-money { |
|
width: 750upx; |
|
height: 45.83upx; |
|
margin-top: 29.16upx; |
|
} |
|
|
|
.all-money-remark { |
|
height:33.33upx; |
|
font-size:22.91upx; |
|
font-family:PingFangSC-Regular; |
|
font-weight:400; |
|
color:rgba(17,17,17,1); |
|
line-height:33.33upx; |
|
margin-top: 37.5upx; |
|
margin-right: 12.5upx; |
|
float: right; |
|
} |
|
|
|
.all-money { |
|
height:45.83upx; |
|
font-size:33.33upx; |
|
font-family:PingFangSC-Medium; |
|
font-weight:700; |
|
color:rgba(17,17,17,1); |
|
line-height:45.83upx; |
|
margin-top: 29.16upx; |
|
margin-right: 31.25upx; |
|
float: right; |
|
} |
|
|
|
.order-bottom { |
|
width: 750upx; |
|
height: 112.5upx; |
|
border-top: 4.16upx solid #EFEFEF; |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
background: #FFFFFF; |
|
} |
|
|
|
.bottom-all-money { |
|
height:112.5upx; |
|
font-size:33.33upx; |
|
font-family:PingFangSC-Medium; |
|
font-weight:650; |
|
color:rgba(17,17,17,1); |
|
line-height:112.5upx; |
|
margin-left: 20.83upx; |
|
} |
|
|
|
.to-pay { |
|
padding: 0; |
|
margin: 0; |
|
border: 0 solid #38ADFF !important; |
|
width:281.25upx; |
|
height:114.58upx; |
|
margin-top: -2.08upx; |
|
line-height: 114.58upx; |
|
float: right; |
|
border-radius: 0; |
|
font-size:37.5upx; |
|
font-family:PingFangSC-Medium; |
|
color: #FFFFFF; |
|
font-weight:500; |
|
} |
|
|
|
.to-pay-no { |
|
background: #98D4FF; |
|
} |
|
|
|
.to-pay-yes { |
|
background: #38ADFF; |
|
} |
|
|
|
.to-pay:after { |
|
border: 0 solid #38ADFF !important; |
|
} |
|
|
|
.bk-on { |
|
width:750upx; |
|
height:20.83upx; |
|
background:rgba(247,247,247,1); |
|
margin-top: 47.91upx; |
|
} |
|
|
|
.pay-way { |
|
width: 750upx; |
|
height: 102.08upx; |
|
} |
|
|
|
.pay-way-view { |
|
width: 687.5upx; |
|
height: 102.08upx; |
|
margin-left: 31.25upx; |
|
border-bottom: 2.08upx solid #F0F0F0; |
|
} |
|
|
|
.pay-way-view-no { |
|
border-bottom: 0upx; |
|
} |
|
|
|
.i-iconwallet { |
|
width:35.41upx; |
|
height:41.66upx; |
|
font-size: 39.58upx; |
|
line-height: 102.08upx; |
|
} |
|
|
|
.i-iconwallet-yes { |
|
color: #FD9B2F; |
|
} |
|
|
|
.i-iconwallet-no { |
|
color: #FFCD97; |
|
} |
|
|
|
.pay-name { |
|
font-size:29.16upx; |
|
font-family:PingFangSC-Regular; |
|
font-weight:400; |
|
line-height:102.08upx; |
|
margin-left: 35.41upx; |
|
} |
|
|
|
.pay-name-yes { |
|
color: #111111; |
|
} |
|
|
|
.pay-name-no { |
|
color: #C3C3C3; |
|
} |
|
|
|
.pay-money { |
|
font-size:25upx; |
|
font-family:PingFangSC-Regular; |
|
font-weight:400; |
|
line-height:102.08upx; |
|
margin-left: 4.16upx; |
|
} |
|
|
|
.pay-radio { |
|
text-align: center; |
|
line-height: 102.08upx; |
|
float: right; |
|
transform:scale(0.8) |
|
} |
|
|
|
.i-iconwechatpay { |
|
color: #1AACEB; |
|
} |
|
|
|
</style>
|
|
|