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