406 lines
8.9 KiB
Vue
406 lines
8.9 KiB
Vue
<template>
|
|
<div class="flex-col list-item space-y-12">
|
|
<div class="flex-row justify-between" style="margin-bottom: 8px">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
"
|
|
>
|
|
<!-- <div class="font_41" v-if="obj.SALEBILL_STATE === 1010 || obj.SALEBILL_STATE === 3050">期望送达:
|
|
{{ obj.RESERVATION_DATE }}</div>
|
|
<div class="font_41" v-if="obj.SALEBILL_STATE === 4000 || obj.SALEBILL_STATE === 5000">
|
|
<p class="self-start font_7">{{ obj.ORDER_DATE }}</p>
|
|
</div> -->
|
|
<span class="font_2 text_6" style="margin-left: 8px">{{
|
|
statusText
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex-col justify-start items-start relative info"
|
|
style="overflow: hidden; display: flex; align-items: center"
|
|
>
|
|
<scroll-view
|
|
class="flex-row space-x-8"
|
|
:scroll-x="true"
|
|
style="height: 82px; width: 70%; white-space: nowrap"
|
|
>
|
|
<view class="imgBox" v-for="(item, idx) in obj.GOODSList" :key="idx">
|
|
<view style="display: flex; flex-direction: column">
|
|
<!-- -->
|
|
<img
|
|
class="equal-division-item"
|
|
:src="
|
|
item.IMAGE_URL ||
|
|
'https://eshangtech.com/ShopICO/no-picture.png'
|
|
"
|
|
/>
|
|
<text class="name">{{ item.COMMODITY_NAME }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<div
|
|
class="section_7"
|
|
style="
|
|
height: 82px;
|
|
width: 30%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
"
|
|
>
|
|
<div>
|
|
<span class="font_6">¥</span>
|
|
<span class="font_5 text_7">{{ obj.ORDER_AMOUNT }}</span>
|
|
</div>
|
|
<span class="font_7">共{{ obj.TOTAL_COUNT }}件</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex-row justify-between"
|
|
style="display: flex; align-items: center"
|
|
>
|
|
<div style="flex: 1; margin-right: 4px">
|
|
<p
|
|
class="self-start font_7"
|
|
v-if="obj.SALEBILL_STATE !== 4000 && obj.SALEBILL_STATE !== 5000"
|
|
>
|
|
{{ obj.ORDER_DATE }}
|
|
</p>
|
|
<view class="desc" v-if="obj.SALEBILL_DESC">
|
|
<text>{{ obj.SALEBILL_DESC }}</text>
|
|
</view>
|
|
</div>
|
|
<!-- <div class="flex-row items-center section_8 view space-x-4" v-if="obj.SALEBILL_STATE === 1010 && isCuntTime">
|
|
<img class="shrink-0 image_9" src="/static/images/recons/deliver.svg" />
|
|
<span class="font_1">催单</span>
|
|
</div> -->
|
|
<div
|
|
class="section_8 view space-x-4"
|
|
style="display: flex; align-items: center"
|
|
v-if="obj.SALEBILL_STATE === 2010"
|
|
@click.stop="handleConfirmReceipt(obj)"
|
|
>
|
|
<img class="shrink-0 image_9" src="/static/images/home/notice.svg" />
|
|
<span class="font_1">确认收货</span>
|
|
</div>
|
|
<div
|
|
class="flex-row items-center section_8 view space-x-4"
|
|
v-if="obj.SALEBILL_STATE === 4000"
|
|
>
|
|
<img class="shrink-0 image_9" src="/static/images/recons/notice.svg" />
|
|
<span class="font_1">去评价</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
obj: {},
|
|
},
|
|
data() {
|
|
return {
|
|
timeText: "",
|
|
isCuntTime: false,
|
|
isShowTime: false,
|
|
timeOut: 0, // 1超时 2不超时
|
|
};
|
|
},
|
|
computed: {
|
|
statusText() {
|
|
let text = "";
|
|
switch (this.obj.SALEBILL_STATE) {
|
|
case 1005:
|
|
text = "待支付";
|
|
break;
|
|
case 1010:
|
|
text = "待接单";
|
|
break;
|
|
case 2000:
|
|
text = "制作中";
|
|
break;
|
|
case 2010:
|
|
text = "已完成";
|
|
break;
|
|
case 8000:
|
|
text = "退款申请中";
|
|
break;
|
|
case 8010:
|
|
text = "商品退货中";
|
|
break;
|
|
case 8020:
|
|
text = "退款处理中";
|
|
break;
|
|
case 8900:
|
|
text = "订单已退款";
|
|
break;
|
|
case 8999:
|
|
text = "退款已关闭";
|
|
break;
|
|
case 9000:
|
|
text = "订单已关闭";
|
|
break;
|
|
case 9999:
|
|
text = "订单已撤销";
|
|
break;
|
|
default:
|
|
text = "待发货";
|
|
}
|
|
return text;
|
|
},
|
|
imgList() {
|
|
if (this.obj.IMAGELIST && this.obj.IMAGELIST.length > 4) {
|
|
return this.obj.IMAGELIST.slice(0, 4);
|
|
}
|
|
return this.obj.IMAGELIST || [];
|
|
},
|
|
toDeatil() {
|
|
return function (item) {
|
|
this.$emit("toDeatil", item);
|
|
};
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.countDownTime();
|
|
this.cuntDown();
|
|
},
|
|
methods: {
|
|
cuntDown() {
|
|
let time =
|
|
new Date(this.obj.RESERVATION_DATE).getTime() - new Date().getTime();
|
|
if (time < 86400000) {
|
|
this.isCuntTime = true;
|
|
}
|
|
},
|
|
countDownTime() {},
|
|
handleToEvaluate(obj) {
|
|
console.log("obj", obj);
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/newEvaluate/index?sellchildid=" +
|
|
obj.SALEBILL_CHILD_ID +
|
|
"&orderInternal=" +
|
|
obj.SALEBILL_ID +
|
|
"&proid=" +
|
|
obj.SALEBILL_ID +
|
|
"type=" +
|
|
"DeliverId",
|
|
});
|
|
},
|
|
// 确认收货按钮
|
|
async handleConfirmReceipt(obj) {
|
|
const req = {
|
|
action_type: "UpdateOrderState",
|
|
action_data: obj.SALEBILL_ID,
|
|
saleBillChildId: obj.SALEBILL_CHILD_ID,
|
|
SALEBILL_STATE: 3000,
|
|
// deliverDate: new Date()
|
|
};
|
|
const data = await this.$api.getCoop(req);
|
|
console.log("data", data);
|
|
uni.showToast({
|
|
title: data.msg,
|
|
icon: "none",
|
|
});
|
|
if (data.error === 1) {
|
|
this.$emit("handleGetOrderList");
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.list-item {
|
|
width: 638rpx;
|
|
padding: 24rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
margin: 0 auto 24rpx;
|
|
|
|
.box {
|
|
padding: 5px 15px;
|
|
box-sizing: border-box;
|
|
background: #f6f8f8;
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.space-x-8 {
|
|
& > *:not(:first-child) {
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.font_3 {
|
|
font-size: 28rpx;
|
|
font-family: "PingFang SC";
|
|
line-height: 40rpx;
|
|
color: #020e1a;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.active {
|
|
width: 150px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.normal {
|
|
width: 275px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.font_4 {
|
|
font-size: 24rpx;
|
|
font-family: "PingFang SC";
|
|
line-height: 34rpx;
|
|
color: #fa5151;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.imgBox {
|
|
display: inline-block;
|
|
text-align: center;
|
|
margin-right: 16rpx;
|
|
width: 60px;
|
|
height: 80px;
|
|
|
|
.name {
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.equal-division-item {
|
|
border-radius: 8rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
.font_2 {
|
|
font-size: 28rpx;
|
|
font-family: "PingFang SC";
|
|
line-height: 40rpx;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.section_7 {
|
|
padding: 24rpx 0 24rpx 24rpx;
|
|
background-image: linear-gradient(
|
|
270deg,
|
|
#ffffff 0%,
|
|
#ffffff 95.72%,
|
|
#ffffff00 100%
|
|
);
|
|
|
|
.font_6 {
|
|
font-size: 24rpx;
|
|
font-family: "DIN Alternate";
|
|
line-height: 28rpx;
|
|
font-weight: 700;
|
|
color: #020e1a;
|
|
}
|
|
|
|
.font_5 {
|
|
font-size: 32rpx;
|
|
font-family: "DIN Alternate";
|
|
line-height: 40rpx;
|
|
font-weight: 700;
|
|
color: #020e1a;
|
|
}
|
|
|
|
.text_7 {
|
|
line-height: 38rpx;
|
|
}
|
|
}
|
|
|
|
.font_41 {
|
|
font-size: 24rpx;
|
|
font-family: "PingFang SC";
|
|
line-height: 34rpx;
|
|
color: #fa5151;
|
|
}
|
|
|
|
.pos {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.font_7 {
|
|
font-size: 24rpx;
|
|
font-family: "PingFang SC";
|
|
line-height: 34rpx;
|
|
color: #9fa3a8;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ff6219;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.section_8 {
|
|
.image_9 {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.font_1 {
|
|
font-size: 28rpx;
|
|
font-family: "PingFang SC";
|
|
line-height: 40rpx;
|
|
color: #6c737a;
|
|
}
|
|
}
|
|
|
|
.view {
|
|
border-radius: 8rpx;
|
|
height: 64rpx;
|
|
border: solid 2rpx #d9dbdd;
|
|
line-height: 64rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.space-x-4 {
|
|
& > *:not(:first-child) {
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.space-y-12 {
|
|
& > *:not(:first-child) {
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
</style>
|