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
9 months ago
|
<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>
|