<template> <view> <view class="width100 font18 fcorfff fotct height40 backcorf06">{{typeText[recinfo.payStatus]}}</view> <!-- 购买商品列表 --> <view class="buy-list"> <!-- v-for="(row,index) in buylist" :key="index" --> <view class="row"> <view class="goods-info"> <view class="img"> <image mode="widthFix" v-if="recinfo.operatorType == 3" src="../static/cz1.jpg"></image> <image mode="widthFix" v-if="recinfo.operatorType == 2" src="../static/cz3.jpg"></image> <image mode="widthFix" v-if="recinfo.operatorType == 1" src="../static/cz2.jpg"></image> </view> <view class="info"> <view class="title">{{recinfo.operatorName}}</view> <view class="price-number"> ¥{{recinfo.orderPrice}} </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.payType"> <view class="left"> 支付方式 : </view> <view class="right" v-if="recinfo.payType == 1"> 支付宝 </view> <view class="right" v-if="recinfo.payType == 2"> 微信 </view> <view class="right" v-if="recinfo.payType == 3"> 汇联通工会卡 </view> <view class="right" v-if="recinfo.payType == 4"> 银联支付 </view> </view> <view class="row" v-if="recinfo.rechargeStatus"> <view class="left"> 充值状态 : </view> <view class="right" v-if="recinfo.rechargeStatus == 201 || recinfo.rechargeStatus == 204"> 充值中 </view> <view class="right" v-if="recinfo.rechargeStatus == 202"> 充值成功 </view> <view class="right" v-if="recinfo.rechargeStatus == 203"> 充值失败 </view> </view> <view class="row" > <view class="left"> 充值手机 : </view> <view class="right"> {{recinfo.rechargeContent}} </view> </view> <view class="row" v-if="recinfo.orderPrice"> <view class="left"> 订单总额 : </view> <view class="right"> ¥{{recinfo.orderPrice}} </view> </view> <view class="row" v-if="recinfo.discountDeductionPrice"> <view class="left"> 优惠抵扣 : </view> <view class="right"> ¥{{recinfo.discountDeductionPrice == null ? '0': recinfo.discountDeductionPrice}} </view> </view> <view class="row" v-if="recinfo.outRechargePrice.payPrice"> <view class="left"> 应付金额 : </view> <view class="right"> ¥{{recinfo.outRechargePrice.payPrice == null ? '0': recinfo.outRechargePrice.payPrice}} </view> </view> <view class="row" v-if="recinfo.integralDeductionPrice"> <view class="left"> 积分抵扣 : </view> <view class="right"> ¥{{recinfo.integralDeductionPrice == null ? '0': recinfo.integralDeductionPrice}} </view> </view> <view class="row"> <view class="left"> 实付金额 : </view> <view class="right"> ¥{{recinfo.payRealPrice == null ? '0': recinfo.payRealPrice}} </view> </view> <view class="row"> <view class="left"> 下单时间 : </view> <view class="right"> {{recinfo.createTimed | 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.refundTime"> <view class="left"> 退款时间 : </view> <view class="right"> {{recinfo.refundTime | 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" v-if="recinfo.payStatus == 101"> <view class="settlement"> <view class="sum">合计: <view class="money">¥{{recinfo.payRealPrice}}</view> </view> <view class="btn" @tap="cancelOrder" style="border: 1px solid #0083f5;color: #0083f5;">取消订单</view> <view class="btn" @tap="toPay" style="background-color: #0083f5;color: #fff;">去支付</view> </view> </view> </view> </template> <script> import { getPhoneOrderById, cancel, } 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, preByOrderInfo: '', typeText: { 101: '等待付款', 102: '订单已支付', 100: '订单已完成', 104: '订单已取消', 105: '订单已退款' }, }; }, onShow() { //页面显示时,加载订单信息 this.getPhoneOrderById(); }, onHide() { }, onLoad(option) { this.orderId = option.id }, 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: { getPhoneOrderById() { uni.showLoading({ title: '加载中...' }) let params = { orderId: this.orderId, } getPhoneOrderById(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); this.recinfo = res.return_data; } else { uni.hideLoading() } }) }, //取消订单 cancelOrder() { let that = this; uni.showModal({ title: '取消订单', content: '确定取消此订单?', success: (res) => { if (res.confirm) { uni.showLoading({ title: '加载中...' }) let params = { orderNo: this.recinfo.orderNo } cancel(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); uni.showToast({ title: res.return_data, icon: 'none', duration: 2000 }) let pages = getCurrentPages() //页面栈 let prePage = pages[pages.length - 2] //上一页 prePage.$vm.reFresh = Math.random() //触发上一页监听器 uni.navigateBack() //返回上一页 } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) uni.hideLoading() } }) } else if (res.cancel) { console.log('用户点击取消'); } } }); }, toPay() { uni.redirectTo({ url: '../recharge-pay/recharge-pay?goodsId=' + this.recinfo.goodsId + '&payPrice=' + this .recinfo.payRealPrice+'&orderId='+this.recinfo.id }) }, } } </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: 10upx; image { width: 80px; max-height: 80px; } } .info { width: 100%; height: 17vw; 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: 25px; } .price-number { position: absolute; width: 100%; bottom: 0upx; display: flex; justify-content: space-between; align-items: flex-end; font-size: 28upx; height: 40upx; color: #fe4343; } } } } } .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: 50%; 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>