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.
271 lines
8.1 KiB
271 lines
8.1 KiB
<template>
|
|
<view class="content">
|
|
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单列表"></uni-nav-bar>
|
|
<view class="status-bar">
|
|
<view
|
|
v-for="item in statusBarArray"
|
|
:key="item.value"
|
|
:class="{ box: true, 'box--selected': condition.status == item.value }"
|
|
@click="selectStatus(item.value)"
|
|
>
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
<view class="list-area">
|
|
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
|
|
<view v-for="item in list" :key="item.orderId" class="order-area" @click="goDetail(item)">
|
|
<view class="order-header">
|
|
<view class="left">
|
|
<text style="font-size: 30rpx; color: #000000; font-weight: 600">{{ item.orderId }}</text>
|
|
<text style="font-size: 26rpx; color: #888888; margin-top: 16rpx">{{ dateTimeFormat(item.createTime, 'yyyy/mm/dd') }}</text>
|
|
</view>
|
|
<view class="right">
|
|
<text style="font-size: 30rpx; color: #ff5368; font-weight: 500">{{ orderStatusMap[item.status] }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="order-content" v-for="order in item.supplierOrderList" :key="order.supplierOrderId">
|
|
<view class="header">
|
|
<text style="font-size: 30rpx; color: #000000">{{ order.supplierEnterpriseName }}</text>
|
|
<text style="font-size: 30rpx; color: #888888; font-weight: 500">{{ supplierOrderStatusMap[order.status] }}</text>
|
|
</view>
|
|
<view v-for="(target, index) in order.orderItems" :key="target.productId" :class="{ 'order-item': true, border: index > 0 }">
|
|
<image class="img" :src="target.productImg || '/static/imgs/order/paper-default-icon.png'"></image>
|
|
<view class="right">
|
|
<text style="font-size: 30rpx; color: #000000">{{ target.productName }}</text>
|
|
<text style="font-size: 26rpx; color: #888888; margin-top: 26rpx; word-break: break-all">{{ transformTarget(target) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="order-footer">
|
|
<view class="left">
|
|
<text style="font-size: 26rpx; color: #888888; margin-right: 8rpx">交货时间:</text>
|
|
<text style="font-size: 26rpx; color: #333333">{{ item.deliveryLeadtime || '-' }}</text>
|
|
</view>
|
|
<view class="right">
|
|
<text style="font-size: 30rpx; color: #ff5368">￥ {{ item.totalOfferPrice }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-list>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { go2, back } from '@/utils/hook.js'
|
|
import { dateTimeFormat } from '@/utils/index.js'
|
|
import { orderStatusArray, orderStatusEnum, orderStatusMap, supplierOrderStatusMap } from '@/enums/index.js'
|
|
import { getOrderList } from '@/apis/orderApi.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
condition: {
|
|
status: orderStatusEnum.ALL,
|
|
pageNum: 0, // 初始会执行一次下拉加载
|
|
pageSize: 10
|
|
},
|
|
option: {
|
|
size: 10,
|
|
auto: true,
|
|
emptyText: '暂无订单~',
|
|
background: '#F7F8FA',
|
|
emptyImage: '/static/imgs/order/order-empty.png'
|
|
},
|
|
list: [],
|
|
statusBarArray: Object.freeze(orderStatusArray.filter((item) => item.value !== orderStatusEnum.CANCELED)),
|
|
orderStatusMap: Object.freeze(orderStatusMap),
|
|
supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap)
|
|
}
|
|
},
|
|
methods: {
|
|
go2,
|
|
back,
|
|
dateTimeFormat,
|
|
getList() {
|
|
return new Promise((resolve, reject) => {
|
|
getOrderList({ ...this.condition })
|
|
.then((res) => {
|
|
if (res) {
|
|
if (this.condition.pageNum == 1) {
|
|
this.list = res.records
|
|
} else {
|
|
this.list = this.list.concat(res.records)
|
|
}
|
|
resolve({ list: this.list, total: res.total })
|
|
} else {
|
|
reject()
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
reject(err)
|
|
})
|
|
})
|
|
},
|
|
downCallback() {
|
|
this.condition.pageNum = 1
|
|
this.getList()
|
|
.then(({ list, total }) => {
|
|
this.$refs.list.refreshSuccess({ list, total })
|
|
})
|
|
.catch(() => {
|
|
this.$refs.list.refreshFail()
|
|
})
|
|
},
|
|
upCallback(page) {
|
|
this.condition.pageNum++
|
|
this.getList()
|
|
.then(({ list, total }) => {
|
|
this.$refs.list.loadSuccess({ list, total })
|
|
})
|
|
.catch(() => {
|
|
this.$refs.list.loadFail()
|
|
})
|
|
},
|
|
selectStatus(status) {
|
|
this.condition.status = status
|
|
this.downCallback()
|
|
},
|
|
transformTarget(target) {
|
|
let result = ''
|
|
if (target.categoryName) {
|
|
result += `${target.categoryName}`
|
|
}
|
|
if (target.brandName) {
|
|
result += `/${target.brandName}`
|
|
}
|
|
if (target.gramWeight) {
|
|
result += `/${target.gramWeight}g`
|
|
}
|
|
if (target.length && target.width) {
|
|
result += `/${target.width}*${target.length}`
|
|
}
|
|
if (target.pieceQuantity) {
|
|
result += `/${target.pieceQuantity}张`
|
|
}
|
|
return result
|
|
},
|
|
// 根据状态跳转到不同页面
|
|
goDetail(order) {
|
|
if (order.status === orderStatusEnum.WAIT_CONFIRM) {
|
|
go2('order-make', { orderId: order.orderId })
|
|
} else {
|
|
go2('order-detail', { orderId: order.orderId })
|
|
}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if (option.status) {
|
|
this.condition.status = option.status
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 100vh;
|
|
.status-bar {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
border-bottom: 2rpx solid #f8f8f8;
|
|
background-color: #fff;
|
|
height: 90rpx;
|
|
.box {
|
|
height: 86rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
color: #000000;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 4rpx solid #f8f8f8;
|
|
}
|
|
.box--selected {
|
|
border-bottom: 4rpx solid #007aff;
|
|
color: #007aff;
|
|
}
|
|
}
|
|
.list-area {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
.order-area {
|
|
width: 750rpx;
|
|
margin-bottom: 20rpx;
|
|
background-color: #fff;
|
|
.order-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 18rpx 32rpx;
|
|
border-bottom: 2rpx solid #f8f8f8;
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
.order-content {
|
|
border-bottom: 2rpx solid #f8f8f8;
|
|
.header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 24rpx 32rpx;
|
|
border-bottom: 2rpx solid #f8f8f8;
|
|
}
|
|
.order-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 686rpx;
|
|
margin: 24rpx 32rpx;
|
|
.img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin-right: 20rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
.border {
|
|
border-top: 2rpx solid #f8f8f8;
|
|
}
|
|
}
|
|
.order-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 32rpx;
|
|
border-bottom: 2rpx solid #f8f8f8;
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|