<template> <view class="order-pages"> <view class="order-info"> <u-cell-group> <u-cell-item title="订单状态" :arrow="false"> <view slot="right-icon"> <text :class="orderInfo.orderStatus">{{getOptionName(orderStatusList,orderInfo?orderInfo.orderStatus:'')}}</text> </view> </u-cell-item> <u-cell-item title="订单编号" :arrow="false" > {{orderInfo.orderNo}} </u-cell-item> <u-cell-item title="创建时间" :arrow="false" > {{orderInfo.orderTime}} </u-cell-item> <u-cell-item title="服务网点" :arrow="false"> {{orderInfo.storeName}} </u-cell-item> <u-cell-item title="服务项目" :arrow="false"> {{orderInfo.itemName}} </u-cell-item> <u-cell-item title="手机号" :arrow="false"> {{orderInfo.customerMobile}} </u-cell-item> <u-cell-item v-if="orderInfo.payType" title="支付方式" :arrow="false"> {{orderInfo.payType}} </u-cell-item> <u-cell-item title="应付金额" :arrow="false"> ¥{{orderInfo.payableAmount}} </u-cell-item> <!-- 已取消订单优惠金额显示0 --> <u-cell-item title="优惠金额" :arrow="false"> {{(orderInfo.couponAmount && orderInfo.orderStatus!='CANCELED')?orderInfo.couponAmount:0}} </u-cell-item> <u-cell-item v-if="orderInfo.orderCoupons && orderInfo.orderCoupons.length" title="优惠券" :arrow="false"> {{orderInfo.orderCoupons[0].couponTitle}} </u-cell-item> <u-cell-item title="实付金额" :arrow="false"> <text class="order-price">¥{{orderInfo.payStatus=='PAID' ? orderInfo.paymentAmount : 0}}</text> </u-cell-item> </u-cell-group> <view class="order-photo"> <view v-if="orderInfo.beginImage"> <view>洗车前</view> <u-image @click="showImage(orderInfo.beginImage)" width="100%" height="400rpx" mode="aspectFit" :src="orderInfo.beginImage"></u-image> </view> <view v-if="orderInfo.endImage"> <view>洗车后</view> <u-image @click="showImage(orderInfo.endImage)" width="100%" height="400rpx" mode="aspectFit" :src="orderInfo.endImage"></u-image> </view> </view> </view> <view v-if="orderInfo.orderStatus=='UN_PAY'" class="footer"> <u-button @click="cancleOrder" type="error" plain>取消订单</u-button> </view> </view> </template> <script> import {orderDetail, cancleOrder} from '@/api/order.js' import {getLookUpDatas} from '@/api/data.js' export default{ data() { return { orderInfo: null, src: '', orderStatusList: [] } }, onLoad(options) { if (options.id) { console.log(options.id) this.getOrderDetail(options.id) this.orderStatusList = this.$store.state.vuex_payStatus } }, methods:{ getOptionName (list,val) { if(val){ let p = list.find((item) => { return item.code == val }) return p ? p.dispName : '-' } return '-' }, // 获取订单详情 getOrderDetail (id) { let payTypeList = this.$store.state.vuex_payType orderDetail({id:id}).then(res =>{ if (res.status == 200) { this.orderInfo = res.data this.orderInfo.payType = this.orderInfo.payType ? this.getOptionName(payTypeList,this.orderInfo.payType) : '' } else { } }) }, // 取消订单 cancleOrder (){ cancleOrder({id:this.orderInfo.id}).then(res=>{ if (res.status==200) { this.toashMsg(res.message) setTimeout(()=>{ uni.navigateBack() },500) } }) }, // 图片预览 showImage (url) { uni.previewImage({ urls: [url], longPressActions: { itemList: ['发送给朋友', '保存图片', '收藏'], success: function(data) { console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); }, fail: function(err) { console.log(err.errMsg); } } }); } }, } </script> <style lang="scss"> page { height: 100%; } .order-pages{ width: 100%; height: 100%; display: flex; flex-direction: column; .order-info{ width: 100%; flex: 1; overflow-y: scroll; .u-cell{ padding:10rpx 32rpx; } .order-photo{ padding:0 30rpx; >view{ text-align: center; padding: 20rpx; } } .FINISHED{ color: #00aa00; } .UN_PAY{ color: #ff0000; } .CANCELED{ color: #7e7b88; } .PAID{ color: #00aaff; } .REFUNDING{ color: #00557f; } .REFUNDED{ color: #005500; } .order-price{ font-size: 36rpx; color: red; } } .footer{ padding: 20rpx; } } </style>