14 changed files with 426 additions and 29 deletions
Split View
Diff Options
-
14apis/orderApi.js
-
7components/scroll-list/scroll-list.vue
-
84enums/index.js
-
6manifest.json
-
8pages.json
-
18pages/error/index.vue
-
12pages/login/index.vue
-
29pages/mine/index.vue
-
263pages/order-list/index.vue
-
BINstatic/imgs/order/order-empty.png
-
BINstatic/imgs/order/paper-default-icon.png
-
4store/index.js
-
6utils/index.js
-
4utils/is.js
@ -0,0 +1,14 @@ |
|||
import http from '../utils/http/index.js' |
|||
|
|||
/** |
|||
* 获取客户订单列表 |
|||
* @param {object} data 获取验证码参数 |
|||
* @returns {Promise<object[]>} |
|||
* swagger: http://api-ops-yyt-test.qniao.cn//base-paper-trading/swagger-ui/index.html?urls.primaryName=CustomerApi#/%E5%8E%9F%E7%BA%B8%E8%AE%A2%E5%8D%95/getCustomerOrderListPageUsingGET
|
|||
*/ |
|||
export const getOrderList = (data) => { |
|||
return http.get({ |
|||
url: '/base-paper-trading/get/customer/order/list/page', |
|||
data |
|||
}) |
|||
} |
|||
@ -0,0 +1,263 @@ |
|||
<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"> |
|||
<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 |
|||
} |
|||
}, |
|||
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> |
|||
| Before | After |
|---|---|
|
|
| Width: 560 | Height: 560 | Size: 45 KiB |
| Before | After |
|---|---|
|
|
| Width: 100 | Height: 100 | Size: 16 KiB |
Write
Preview
Loading…
Cancel
Save