<template>
<div class="page" :class="{ 'page--iphoneX': iphoneX }">
<div class="tips">温馨提示：请优先联系用户协商处理</div>
<div class="black-tit">请选择退差价商品</div>
<div v-if="orderData">
<checkbox-group class="item-list" @change="itemChange">
<label
class="item"
v-for="(item, index) of orderData.orderItems"
:key="index"
:class="{ invalid: item.invalid }"
>
<div class="check">
<checkbox
v-if="!item.invalid"
class="checkbox"
:value="item.id"
/>
</div>
<div class="main">
<div class="info">
<my-image
:src="item.productImage"
class="img"
></my-image>
<div class="data">
<div class="tit">
{{ item.productName }}
</div>
<div>
<span class="num"
>数量：x {{ item.count }}</span
>
<span class="num" v-if="item.skuName"
>规格： {{ item.skuName }}</span
>
</div>
<div class="des">
支付金额：
<span class="price"
>￥{{
item.payAmount | minuteToRmb
}}</span
>
</div>
</div>
</div>
<div
class="difference"
v-if="item.refundAmount && item.actualPickingWeight"
>
<div class="name">
已退差价：￥{{
item.refundAmount | minuteToRmb
}}
</div>
<div class="">已退重量：{{item.actualPickingWeight || '0'}}g</div>
</div>
</div>
</label>
</checkbox-group>
</div>
<div class="btn-box">
<span class="btn" v-if="!allInvalid" @click="disparity">退差价</span>
<span class="btn allInvalid" v-if="allInvalid">没有可退差价商品</span>
</div>
</div>
</template>
<script>
import MyImage from "../../components/image/index";
export default {
name: "",
components: { MyImage },
// 数据
data() {
return {
orderData: {},
curReason: "",
curGoodItemIds: [],
submitLoading: false,
allInvalid:false,
};
},
onLoad() {
let curOrder = this.$store.state.common.curOrder;
this.orderData = this.initData(curOrder);
console.log(curOrder);
this.$store.commit("common/update", {
curOrder: null,
});
if (!curOrder) {
this.router.back();
}
},
async onShow() {},
// 函数
methods: {
// 初始化订单数据
initData(data) {
let d = JSON.parse(JSON.stringify(data));
console.log(d);
if (d.afterSaleList) {
for (let orderItem of d.orderItems) {
for (let afterSale of d.afterSaleList) {
// 判断订单项是否有退款
if (afterSale.orderInfo.orderItemId === orderItem.id) {
orderItem.invalid = true;
}
}
// 判断是否有退差价
if (
orderItem.refundAmount &&
orderItem.actualPickingWeight
) {
orderItem.invalid = true;
}
}
}
let num =0;
for(let item of d.orderItems){
if(item.invalid){
num++;
}
}
if(num === d.orderItems.length){
this.allInvalid = true;
}
d.orderItems.sort((a, b) => (a.invalid ? 1 : -1));
return d;
},
itemChange(e) {
this.curGoodItemIds = e.detail.value;
},
// 退差价
disparity() {
if (this.submitLoading) {
return;
}
if (this.curGoodItemIds.length === 0) {
return this.fn.showToast("请选择订单项");
}
let arr = [];
for (id of this.curGoodItemIds) {
for (let item of this.orderData.orderItems) {
if (item.id === id) {
arr.push(item);
}
}
}
this.$store.commit("common/update", {
disparityData: arr,
});
let id = this.orderData.orderInfo.id;
this.router.push({
path: "/pages/index/disparity",
query: {
orderId: id,
},
});
},
// 取消订单
cancelOrder(flag) {
let str = "确认取消该订单，并全部退款";
if (flag === true) {
str = "你已选中所有商品，确认后将取消订单全部退款";
}
let val = this.orderData;
this.fn
.showModal({
content: str,
})
.then((res) => {
if (res.confirm) {
if (val.loading) {
return;
}
val.loading = true;
uni.showLoading({
title: "提交中...",
mask: true,
});
this.api
.post(
"/Order/Cancel",
{
query: true,
id: val.orderInfo.id,
},
{ pass: true }
)
.then((res) => {
uni.hideLoading();
val.loading = false;
if (res.success) {
this.fn.showToast("取消成功");
this.router.back();
} else {
this.fn.showToast(
"取消失败：" + res.message
);
}
});
}
});
},
},
// 数据计算
computed: {
user() {
return this.$store.state.user.user;
},
refundNum() {
let num = 0;
for (let id of this.curGoodItemIds) {
for (let item of this.orderData.orderItems) {
if (item.id === id) {
num += item.payAmount;
}
}
}
num = num.toFixed(2);
return num;
},
},
// 数据监听
watch: {},
};
</script>
<style lang="scss" scoped>
.page {
padding-bottom: px(180);
}
.tips {
background-color: #fef9f3;
font-size: px(40);
padding: 0 px(40);
height: px(100);
line-height: px(100);
color: #ec883d;
}
.black-tit {
padding: px(50) px(40) px(30);
background-color: #f1f0f5;
font-size: px(42);
}
.btn-box {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background-color: #fff;
padding: px(40);
display: flex;
justify-content: space-between;
align-items: center;
.btn {
display: block;
width: 100%;
height: px(110);
border-radius: px(10);
color: #fff;
text-align: center;
line-height: px(110);
background-color: rgb(0, 188, 38);
}
.all-btn {
background-color: #f3f3f3;
color: #666;
}
.allInvalid{
background-color: #e9e9e9;
color: #666;
}
}
.item-list {
padding: px(20) px(40);
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: px(40) 0;
border-bottom: 1px solid #f1f1f1;
&.invalid {
background-color: #efefef;
}
}
.check {
width: px(100);
flex-shrink: 0;
margin-right: px(20);
}
.checkbox {
transform: scale(0.8);
}
.main {
width: 100%;
}
.info {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
}
.img {
width: px(180);
height: px(180);
flex-shrink: 0;
margin-right: px(20);
/deep/ img {
width: px(180);
height: px(180);
background: #f1f1f1;
}
}
.data {
width: 100%;
}
.tit {
font-size: px(44);
@include omits(1);
}
.des {
margin-top: px(10);
font-size: px(40);
}
.price {
font-size: px(40);
color: #ff475f;
}
.num {
font-size: px(36);
color: #666;
display: inline-block;
width: px(300);
}
}
.refund-info {
padding: px(50) px(40) px(30);
.head {
display: flex;
justify-content: space-between;
align-items: center;
}
.tit {
font-size: px(44);
font-weight: 700;
color: #666;
}
.money {
font-size: px(48);
color: #ff475f;
font-weight: 700;
}
}
.info-list {
background-color: #fff;
.item {
padding: px(30) px(40);
border-bottom: 1px solid #f1f1f1;
display: flex;
justify-content: space-between;
align-items: center;
}
.radio {
width: px(100);
flex-shrink: 0;
.radio-inp {
transform: scale(0.8);
}
}
.info {
width: 100%;
font-size: px(44);
}
}
.difference {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #e9e9e9;
color: #666;
padding: px(20) px(10);
font-size: px(38);
.link {
text-decoration: underline;
}
}
</style>