349 lines
8.3 KiB
Vue
349 lines
8.3 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.IMAGELIST" :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 2010:
|
|
text = '待收货'
|
|
break
|
|
case 3000:
|
|
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.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>
|