267 lines
7.8 KiB
Vue
267 lines
7.8 KiB
Vue
<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> |