You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
7.8 KiB
267 lines
7.8 KiB
<template> |
|
<view class="orderDetails-body"> |
|
<view class="orderDetails-header flex jw ac"> |
|
<text class="orderType">{{orderData.statusMerge}}</text> |
|
<text class="orderTime" v-if="orderData.statusMerge=='已完成'">完成时间：{{orderData.createTime}}</text> |
|
<text style="font-size: 36rpx;color: #333333;font-weight: 600;" v-if="orderData.statusMerge=='待核销'"> |
|
提货码： |
|
<text style="color: #F83D3D;font-weight: 600;">{{orderData.takeCode}}</text> |
|
</text> |
|
</view> |
|
<view class="orderDetails-center"> |
|
<view class="orderDetails-center-header">自提油站：</view> |
|
<view class="orderDetails-center-site"> |
|
<view class="siteName">{{orderData.takeSiteName}}</view> |
|
<view class="address textov">{{orderData.takeSiteAddress}}100米处</view> |
|
<!-- <view> |
|
<text class="juli">距离：12.8KM</text> |
|
</view> --> |
|
</view> |
|
<view v-for="item in orderData.mallOrderInfoDetails" class="orderDetails-product flex ac"> |
|
<view class="orderDetails-product-img"> |
|
<image :src="item.oderDetailImg" mode="aspectFit" style="width: 100%;height: 100%;"></image> |
|
</view> |
|
<view class="orderDetails-product-right"> |
|
<view class="name">{{item.productName}}</view> |
|
<view class="gg">规格：默认</view> |
|
<view class="gg">{{item.marketPrice}} X{{item.orderNum}}</view> |
|
</view> |
|
</view> |
|
<view class="orderDetails-message"> |
|
<view class="orderDetails-message-row flex jw "> |
|
<text>订单编号：</text> |
|
<text>{{orderData.orderCode}}</text> |
|
</view> |
|
<view class="orderDetails-message-row flex jw "> |
|
<text>下单时间：</text> |
|
<text>{{orderData.createTime}}</text> |
|
</view> |
|
<!-- <view class="orderDetails-message-row flex jw "> |
|
<text>站点电话：</text> |
|
<text>{{}}</text> |
|
</view> --> |
|
<view class="orderDetails-message-row flex jw"> |
|
<text>支付方式：</text> |
|
<text>积分</text> |
|
</view> |
|
<view class="orderDetails-message-row flex jw"> |
|
<text>商品金额：</text> |
|
<text>{{orderData.marketPrice}}</text> |
|
</view> |
|
<view class="orderDetails-message-row flex jw "> |
|
<text>支付积分：</text> |
|
<text>{{orderData.integral}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view v-if="orderData.statusMerge=='待核销'" @click="cancelOrder" class="orderDetails-button-qx"> |
|
取消订单 |
|
</view> |
|
<view v-if="orderData.statusMerge=='已核销'" @click="$refs.popup.open('bottom')" class="orderDetails-button-qx"> |
|
申请退款 |
|
</view> |
|
<uni-popup @change="popupChange" :safe-area="false" ref="popup" type="bottom"> |
|
<view class="refundment-body"> |
|
<view class="refundment-form "> |
|
<view class="refundment-form-row-container oneflex"> |
|
<view @click="$refs.type.open('bottom')" class="refundment-form-row flex"> |
|
<view class="refundment-form-row-label oneflex">退款类型</view> |
|
<view class="refundment-form-row-right "> |
|
<text style="color: #999999;font-size: 28rpx; margin-right: 10rpx;" |
|
v-if="refundType">{{ selects[refundType].label }}</text> |
|
<uni-icons type="right" size="16" color="#999999"></uni-icons> |
|
</view> |
|
</view> |
|
<view @click="$refs.reason.open('bottom')" class="refundment-form-row flex"> |
|
<view class="refundment-form-row-label oneflex">退款原因</view> |
|
<view class="refundment-form-row-right "> |
|
<text style="color: #999999;font-size: 28rpx; margin-right: 10rpx;" |
|
v-if="refundMark">{{ refundMark }}</text> |
|
<uni-icons type="right" size="16" color="#999999"></uni-icons> |
|
</view> |
|
</view> |
|
<view class="refundment-form-row flex"> |
|
<view class="refundment-form-row-label oneflex">可退积分</view> |
|
<view class="refundment-form-row-right "> |
|
<text style="margin-right: 20px;">{{orderData.integral}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view @click="refundOrder" class="refundment-form-button flex jc"> |
|
提交 |
|
</view> |
|
</view> |
|
</view> |
|
</uni-popup> |
|
<uni-popup :safe-area="false" ref="type" type="bottom"> |
|
<view class="select-body"> |
|
<view class="select-title">退款类型</view> |
|
<view @click="refundType=item.value" v-for="(item,index) in selects" :key="index" |
|
class="select-item-container"> |
|
<view class="select-item flex"> |
|
<view class="select-item-left oneflex">{{item.label}}</view> |
|
<view class="select-item-right"> |
|
<radio style="transform:scale(0.7)" :value="item.value" color="#F83D3D" |
|
:checked="refundType===item.value" /> |
|
</view> |
|
</view> |
|
</view> |
|
<view @click="$refs.type.close()" class="select-button flex jc"> |
|
关闭 |
|
</view> |
|
</view> |
|
</uni-popup> |
|
<uni-popup :safe-area="false" ref="reason" type="bottom"> |
|
<view class="select-body"> |
|
<view class="select-title">退款原因</view> |
|
<view @click="refundMark=item.value" v-for="(item,index) in refundMarks" :key="index" |
|
class="select-item-container"> |
|
<view class="select-item flex"> |
|
<view class="select-item-left oneflex">{{item.label}}</view> |
|
<view class="select-item-right"> |
|
<radio style="transform:scale(0.7)" :value="item.value" color="#F83D3D" |
|
:checked="refundMark===item.value" /> |
|
</view> |
|
</view> |
|
</view> |
|
<view @click="$refs.reason.close()" class="select-button flex jc"> |
|
关闭 |
|
</view> |
|
</view> |
|
</uni-popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import orderApi from "@/api/order.js"; |
|
|
|
export default { |
|
data() { |
|
return { |
|
isRefundment: false, |
|
refundMark: "", |
|
refundType: "", |
|
selects: [{ |
|
label: "退货退款", |
|
value: "0" |
|
}, |
|
{ |
|
label: "仅退款", |
|
value: "1" |
|
} |
|
], |
|
refundMarks: [{ |
|
label: "质量问题", |
|
value: "质量问题" |
|
}, |
|
{ |
|
label: "不想要了", |
|
value: "不想要了" |
|
}, |
|
{ |
|
label: "缺货", |
|
value: "缺货" |
|
} |
|
], |
|
orderData: { |
|
takeSiteName: "", |
|
takeSiteAddress: "", |
|
createTime: "", |
|
orderStatus: "", |
|
mallOrderInfoDetails: [] |
|
} |
|
} |
|
}, |
|
filters: { |
|
orderStatus(e) { |
|
switch (Number(e)) { |
|
case 1: |
|
return '待核销' |
|
case 2: |
|
return '已核销' |
|
case 3: |
|
return '已完成' |
|
case 0: |
|
return '待支付' |
|
case -1: |
|
return '已取消' |
|
default: |
|
return '数据错误' |
|
} |
|
}, |
|
}, |
|
onLoad(e) { |
|
if (e.id) { |
|
this.getOrderDetails(e.id) |
|
} |
|
console.log(e) |
|
}, |
|
watch: { |
|
isRefundment(n) { |
|
if (!n) { |
|
this.refundType = ""; |
|
this.refundMark = ""; |
|
} |
|
} |
|
}, |
|
methods: { |
|
popupChange({ |
|
show |
|
}) { |
|
this.isRefundment = show; |
|
console.log(show, "showshow") |
|
}, |
|
refundOrder() { |
|
if (this.refundType === "" || this.refundMark === "") { |
|
uni.showToast({ |
|
title: "请选择相关信息", |
|
icon: "none" |
|
}) |
|
return |
|
} |
|
orderApi.refundOrder({ |
|
"id": this.orderData.id, |
|
"refundType": this.refundType, //0 退货退款 1仅退款 【必填】 |
|
"refundMark": this.refundMark |
|
}).then(res => { |
|
if (res.code == 20000) { |
|
this.$refs.popup.close(); |
|
this.getOrderDetails(this.orderData.id) |
|
} |
|
}) |
|
}, |
|
cancelOrder() { |
|
let that = this |
|
uni.showModal({ |
|
title: "订单取消", |
|
content: "是否确定取消", |
|
success(result) { |
|
if (result.confirm) { |
|
orderApi.cancelOrder({ |
|
"id": that.orderData.id, |
|
"createSource": "MALL_COMS_MINI" |
|
}).then(res => { |
|
if (res.code == 20000) { |
|
that.getOrderDetails(that.orderData.id) |
|
} |
|
}) |
|
} else if (result.cancel) { |
|
console.log('用户点击取消'); |
|
} |
|
|
|
} |
|
}) |
|
|
|
}, |
|
getOrderDetails(id) { |
|
orderApi.getOrderInfo(id).then(res => { |
|
res.code == 20000 && (this.orderData = res.data) |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
@import 'index.scss'; |
|
</style> |