147 lines
3.7 KiB
Vue
147 lines
3.7 KiB
Vue
<script>
|
||
import StaticConstant from "@/common/StaticConstant";
|
||
import ApiConstant from "@/common/ApiConstant";
|
||
import Request from '@/common/request'
|
||
|
||
let request = new Request()
|
||
export default {
|
||
computed: {
|
||
ApiConstant() {
|
||
return ApiConstant
|
||
},
|
||
StaticConstant() {
|
||
return StaticConstant
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
orderCode:'',
|
||
order:{}
|
||
}
|
||
},
|
||
onShow() {
|
||
},
|
||
onLoad(e) {
|
||
if (e.orderCode) {
|
||
this.orderCode = e.orderCode
|
||
this.getDetail()
|
||
}
|
||
},
|
||
methods: {
|
||
getDetail(){
|
||
request.get(ApiConstant.VIP.orderDetail, {orderCode: this.orderCode}).then(r => {
|
||
console.log(r)
|
||
if (r.success) {
|
||
this.order = r.result
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
getColorByStatus(status){
|
||
if (status === '1') {
|
||
return '#f96543';
|
||
}else if (status === '2') {
|
||
return '#85e689';
|
||
}else if (status === '5') {
|
||
return '#f2891b';
|
||
}else{
|
||
return '#bb0303';
|
||
}
|
||
},
|
||
getTextByStatus(status){
|
||
if (status === '1') {
|
||
return '待支付';
|
||
}else if (status === '2') {
|
||
return '已支付';
|
||
}else if (status === '5') {
|
||
return '已退款';
|
||
}else{
|
||
return '未知';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="order-list border-top">
|
||
<view class="order-item">
|
||
<view class="flexWrap border-bottom" style="padding: 20rpx">
|
||
<view class="flex-item-2">订单号</view>
|
||
<view class="flex-item-6">
|
||
<text class="multiline-text">{{ order.orderCode }}</text>
|
||
</view>
|
||
<view class="flex-item-2 font-weight-b">
|
||
<text class="float-right" :style="'color:'+getColorByStatus(order.orderStatus)">{{ getTextByStatus(order.orderStatus) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flexWrap" style="padding: 5rpx 0">
|
||
<view class="flex-item-2"></view>
|
||
<view class="flex-item-8 font-weight-b"><text>{{ order.skuName }}</text></view>
|
||
</view>
|
||
<view class="flexWrap" style="padding: 5rpx 0">
|
||
<view class="flex-item-2"></view>
|
||
<view class="flex-item-8"><text class="multiline-text">{{ order.skuDetail }}</text></view>
|
||
</view>
|
||
<view class="flexWrap" style="padding: 5rpx 0">
|
||
<view class="flex-item-2"></view>
|
||
<view class="flex-item-8">下单时间：<text>{{ order.createTime }}</text></view>
|
||
</view>
|
||
<view class="flexWrap" style="padding: 5rpx 0" v-if="order.orderStatus && order.orderStatus==='2'">
|
||
<view class="flex-item-2"></view>
|
||
<view class="flex-item-8">付款时间：<text>{{ order.paymentTime }}</text></view>
|
||
</view>
|
||
<view class="flexWrap" style="padding: 5rpx 0" v-if="order.refundTime">
|
||
<view class="flex-item-2"></view>
|
||
<view class="flex-item-8">退款时间：<text>{{ order.refundTime }}</text></view>
|
||
</view>
|
||
<view class="flexWrap" style="padding: 5rpx 0">
|
||
<view class="flex-item-2"></view>
|
||
<view class="flex-item-8"><text class="redOrange2">￥{{ order.totalAmount }}</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.order-item {
|
||
background-color: #ffffff;
|
||
padding: 20rpx;
|
||
margin: 5px 0;
|
||
//border-bottom: 1px solid #eeeeee;
|
||
|
||
.order-id {
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.product-name {
|
||
color: #666;
|
||
}
|
||
|
||
.totalAmount {
|
||
color: #009688;
|
||
}
|
||
|
||
.status {
|
||
color: #ff9900;
|
||
}
|
||
|
||
&:last-child {
|
||
border-bottom: none; // Remove bottom border for the last item
|
||
}
|
||
}
|
||
|
||
.divider {
|
||
height: 1px;
|
||
background-color: #eeeeee;
|
||
}
|
||
|
||
.no-orders-text {
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
color: #999;
|
||
}
|
||
</style>
|