14 changed files with 426 additions and 29 deletions
Unified 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