parent
4c26b12fa5
commit
8a03335551
@ -0,0 +1,467 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 1">待支付</view> |
||||||
|
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 2">已支付</view> |
||||||
|
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 3">已完成</view> |
||||||
|
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 4">已取消</view> |
||||||
|
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 5">已退款</view> |
||||||
|
<!-- 购买商品列表 --> |
||||||
|
<view class="buy-list"> |
||||||
|
<view class="row"> |
||||||
|
<view class="goods-info"> |
||||||
|
<view class="img"> |
||||||
|
<image mode="widthFix" :src="imagewxUrl+imgadres1"></image> |
||||||
|
</view> |
||||||
|
<view class="info"> |
||||||
|
<view class="title">{{recinfo.remarks}}</view> |
||||||
|
<view class="price-number"> |
||||||
|
<view class="price">¥{{recinfo.payPrice}}<text |
||||||
|
class="padleft15 font13 fcor999">x1</text></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 提示-备注 --> |
||||||
|
<view class="order"> |
||||||
|
<view class="row" v-if="recinfo.orderNo"> |
||||||
|
<view class="left" > |
||||||
|
订单流水号 : |
||||||
|
</view> |
||||||
|
<view class="right"> |
||||||
|
{{recinfo.orderNo}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="row" v-if="recinfo.paySerialNo"> |
||||||
|
<view class="left"> |
||||||
|
支付流水号 : |
||||||
|
</view> |
||||||
|
<view class="right"> |
||||||
|
{{recinfo.paySerialNo}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="row" v-if="recinfo.payPrice"> |
||||||
|
<view class="left"> |
||||||
|
订单总额 : |
||||||
|
</view> |
||||||
|
<view class="right"> |
||||||
|
¥{{recinfo.payPrice}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="row" v-if="recinfo.payRealPrice"> |
||||||
|
<view class="left"> |
||||||
|
实付金额 : |
||||||
|
</view> |
||||||
|
<view class="right"> |
||||||
|
¥{{recinfo.payRealPrice}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="row" v-if="recinfo.createTime"> |
||||||
|
<view class="left"> |
||||||
|
下单时间 : |
||||||
|
</view> |
||||||
|
<view class="right"> |
||||||
|
{{recinfo.createTime | formatDate('-')}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="row" v-if="recinfo.payTime"> |
||||||
|
<view class="left"> |
||||||
|
支付时间 : |
||||||
|
</view> |
||||||
|
<view class="right"> |
||||||
|
{{recinfo.payTime | formatDate('-')}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="row" v-if="recinfo.cancelTime"> |
||||||
|
<view class="left"> |
||||||
|
取消时间 : |
||||||
|
</view> |
||||||
|
<view class="right"> |
||||||
|
{{recinfo.cancelTime | formatDate('-')}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="row" v-if="recinfo.finishTime"> |
||||||
|
<view class="left"> |
||||||
|
完成时间 : |
||||||
|
</view> |
||||||
|
<view class="right"> |
||||||
|
{{recinfo.finishTime | formatDate('-')}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="width100 height60"></view> |
||||||
|
<view class="footer"> |
||||||
|
<view class="settlement"> |
||||||
|
<view class="sum">合计: |
||||||
|
<view class="money">¥{{recinfo.payPrice}}</view> |
||||||
|
</view> |
||||||
|
<view class="btn" @tap="toPay" style="background-color: #0083f5;color: #fff;">去支付</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
paygetOrderById, |
||||||
|
orderToUnionPayphone |
||||||
|
} from '../../../Utils/Api.js'; |
||||||
|
let app = getApp() |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
buylist: [], //订单列表 |
||||||
|
goodsPrice: 0.0, //商品合计价格 |
||||||
|
sumPrice: 0.0, //用户付款价格 |
||||||
|
freight: 12.00, //运费 |
||||||
|
note: '', //备注 |
||||||
|
int: 1200, //抵扣积分 |
||||||
|
deduction: 0, //抵扣价格 |
||||||
|
recinfo: '', |
||||||
|
orderId: '', |
||||||
|
imageUrl: app.globalData.imgUrl, |
||||||
|
imagewxUrl: app.globalData.imageWxImg, |
||||||
|
imgadres1: 'dhf.png', |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
//页面显示时,加载订单信息 |
||||||
|
}, |
||||||
|
onHide() { |
||||||
|
|
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.orderId = options.id; |
||||||
|
this.paygetOrderById(); |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
toFixed: function(x) { |
||||||
|
return parseFloat(x).toFixed(2); |
||||||
|
}, |
||||||
|
//过滤器 用于格式化时间 |
||||||
|
formatDate: function(value, spe = '/') { |
||||||
|
let data = new Date(value); |
||||||
|
let year = data.getFullYear(); |
||||||
|
let month = data.getMonth() + 1; |
||||||
|
let day = data.getDate(); |
||||||
|
let h = data.getHours(); |
||||||
|
let mm = data.getMinutes(); |
||||||
|
let s = data.getSeconds(); |
||||||
|
month = month >= 10 ? month : "0" + month; |
||||||
|
day = day >= 10 ? day : "0" + day; |
||||||
|
h = h >= 10 ? h : "0" + h; |
||||||
|
mm = mm >= 10 ? mm : "0" + mm; |
||||||
|
s = s >= 10 ? s : "0" + s; |
||||||
|
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
paygetOrderById() { |
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中...' |
||||||
|
}) |
||||||
|
let params = { |
||||||
|
orderId: this.orderId, |
||||||
|
} |
||||||
|
paygetOrderById(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
uni.hideLoading(); |
||||||
|
this.recinfo = res.return_data; |
||||||
|
} else { |
||||||
|
uni.hideLoading() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//获取订单信息 |
||||||
|
toPay() { |
||||||
|
let params = { |
||||||
|
"orderId" : this.orderId |
||||||
|
} |
||||||
|
orderToUnionPayphone(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.uniontopay(res.return_data.prepayid); |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none' |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//银联支付 |
||||||
|
uniontopay(item) { |
||||||
|
let that = this; |
||||||
|
upsdk.pluginReady(function() { |
||||||
|
upsdk.pay({ |
||||||
|
tn: item, |
||||||
|
success: function(res) { |
||||||
|
uni.showToast({ |
||||||
|
title: '支付成功' |
||||||
|
}) |
||||||
|
uni.navigateBack({ |
||||||
|
}) |
||||||
|
}, |
||||||
|
fail: function(err) { |
||||||
|
uni.showToast({ |
||||||
|
title: err.msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
// 支付失败, err.msg 是失败原因描述, 比如TN号不合法, 或者用户取消了交易 等等。 |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.addr { |
||||||
|
width: 86%; |
||||||
|
padding: 20upx 3%; |
||||||
|
margin: 30upx auto 20upx auto; |
||||||
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 20upx; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.icon { |
||||||
|
width: 80upx; |
||||||
|
height: 80upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 60upx; |
||||||
|
height: 60upx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tel-name { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
font-size: 32upx; |
||||||
|
|
||||||
|
.tel { |
||||||
|
margin-left: 40upx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.addres { |
||||||
|
width: 100%; |
||||||
|
font-size: 26upx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.buy-list { |
||||||
|
width: 86%; |
||||||
|
padding: 10upx 3%; |
||||||
|
margin: 30upx auto 20upx auto; |
||||||
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 20upx; |
||||||
|
|
||||||
|
.row { |
||||||
|
margin: 20rpx 0; |
||||||
|
|
||||||
|
.goods-info { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.img { |
||||||
|
width: 80px; |
||||||
|
max-height: 80px; |
||||||
|
border-radius: 10upx; |
||||||
|
overflow: hidden; |
||||||
|
flex-shrink: 0; |
||||||
|
margin-right: 20upx; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 80px; |
||||||
|
max-height: 80px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.info { |
||||||
|
width: 100%; |
||||||
|
height: 22vw; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
font-size: 32upx; |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
-webkit-line-clamp: 2; |
||||||
|
// text-align: justify; |
||||||
|
overflow: hidden; |
||||||
|
max-height: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.spec { |
||||||
|
font-size: 22upx; |
||||||
|
color: #a7a7a7; |
||||||
|
height: 40upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 0 15upx; |
||||||
|
border-radius: 20upx; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.zspec { |
||||||
|
font-size: 22upx; |
||||||
|
background-color: red; |
||||||
|
color: #FFFFFF; |
||||||
|
height: 40upx; |
||||||
|
line-height: 40rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 0 15upx; |
||||||
|
border-radius: 20upx; |
||||||
|
margin-bottom: 10px; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.price-number { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
top: 50px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-end; |
||||||
|
font-size: 28upx; |
||||||
|
height: 40upx; |
||||||
|
|
||||||
|
.price { |
||||||
|
color: #fe4343; |
||||||
|
} |
||||||
|
|
||||||
|
.number { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.order { |
||||||
|
width: 86%; |
||||||
|
padding: 10upx 3%; |
||||||
|
margin: 30upx auto 20upx auto; |
||||||
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 20upx; |
||||||
|
|
||||||
|
.row { |
||||||
|
margin: 20upx 0; |
||||||
|
height: 80rpx; |
||||||
|
line-height: 80rpx; |
||||||
|
border-bottom: 1px solid #f4f4f4; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.left { |
||||||
|
font-size: 28upx; |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
margin-left: 40upx; |
||||||
|
font-size: 26upx; |
||||||
|
color: #999; |
||||||
|
|
||||||
|
input { |
||||||
|
font-size: 26upx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.blck { |
||||||
|
width: 100%; |
||||||
|
height: 100upx; |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
width: 92%; |
||||||
|
padding: 0 4%; |
||||||
|
background-color: #fbfbfb; |
||||||
|
height: 100upx; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
font-size: 28upx; |
||||||
|
position: fixed; |
||||||
|
bottom: 0upx; |
||||||
|
z-index: 5; |
||||||
|
|
||||||
|
.settlement { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.sum { |
||||||
|
color: #FE1A1A; |
||||||
|
width: 60%; |
||||||
|
font-size: 28upx; |
||||||
|
margin-right: 10upx; |
||||||
|
display: flex; |
||||||
|
height: 26px; |
||||||
|
line-height: 26px; |
||||||
|
justify-content: flex-start; |
||||||
|
|
||||||
|
.money { |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 600; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
padding: 0 20upx; |
||||||
|
height: 70rpx; |
||||||
|
width: 25%; |
||||||
|
margin-left: 10px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 30upx; |
||||||
|
border-radius: 40upx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.detail { |
||||||
|
width: 86%; |
||||||
|
padding: 10upx 3%; |
||||||
|
margin: 30upx auto 20upx auto; |
||||||
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 20upx; |
||||||
|
|
||||||
|
.row { |
||||||
|
height: 60upx; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.nominal { |
||||||
|
font-size: 28upx; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
font-size: 26upx; |
||||||
|
color: #0083f5; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue