历史订单界面完善+接口对接
This commit is contained in:
parent
2a9c5ee010
commit
923055e757
@ -1,14 +1,53 @@
|
|||||||
<!-- 历史订单 -->
|
<!-- 历史订单 -->
|
||||||
<template>
|
<template>
|
||||||
<view class="aircraft-history">
|
<view class="aircraft-history" :style="{backgroundImage: `url(${fileUrl+topBg})`}">
|
||||||
<Topnav :topLevel="topLevel" title="历史订单" defaultBackColor="#333333"
|
<Topnav :topLevel="topLevel" title="历史订单" defaultBackColor="#333333"
|
||||||
defaultNavTextColor="#333333" showBack />
|
defaultNavTextColor="#333333" showBack />
|
||||||
<view class="history-content">
|
<view class="history-content">
|
||||||
<u-image width="100%" :src="fileUrl+topBg" mode="widthFix" />
|
<view class="order-history" :style="{marginTop: CustomBar+'px'}">
|
||||||
<view class="order-history" :style="{top: CustomBar+'px'}">
|
<view class="history-item" v-for="(item,index) in orders" :key="index">
|
||||||
123
|
<view class="hi-top">
|
||||||
|
<view class="hi-top-left">
|
||||||
|
<u-icon :name="fileUrl+(item.orderType===1?goods:manned)" size="60"
|
||||||
|
style="margin-right: 10rpx;" />
|
||||||
|
{{ orderTypes[item.orderType] }}
|
||||||
|
</view>
|
||||||
|
<view class="hi-top-right" :style="{color: item.mainOrderStatus===0?'#F8B500':'#666666'}">
|
||||||
|
{{ orderStatus[item.mainOrderStatus] }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="hi-second">
|
||||||
|
<view class="hi-second-lam">
|
||||||
|
<view class="lam-circle" />
|
||||||
|
景区： {{ scenics[item.attractionId] }}
|
||||||
|
</view>
|
||||||
|
<view class="hi-second-lam">
|
||||||
|
<view class="lam-circle" />
|
||||||
|
路线： {{ item.routeName }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hi-bottom">
|
||||||
|
<view class="hi-bottom-left">
|
||||||
|
下单时间：{{ item.orderCreateTime }}
|
||||||
|
</view>
|
||||||
|
<u-button type="warning" :custom-style="customStyle" :hair-line="false"
|
||||||
|
@click="showDetail(item)">
|
||||||
|
查看详情
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-loadmore v-if="orders.length>0" @loadmore="getMore" :status="form.isFinish" color="#333333" marginTop="30" marginBottom="20" />
|
||||||
|
<view class="history-empty" :style="{marginTop: CustomBar+'px'}" v-else>
|
||||||
|
<u-empty text="历史订单为空" mode="list"
|
||||||
|
src="/static/empty.png" icon-size="300" font-size="40"
|
||||||
|
margin-top="250"></u-empty>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-back-top :scrollTop="scrollTop" zIndex="100" :duration="500"
|
||||||
|
:iconStyle="{ color: '#fff' }" :customStyle="{background: 'linear-gradient(180deg, #f8b500 0%, #fceabb 100%)',
|
||||||
|
boxShadow: '0rpx 0rpx 12rpx rgba(202,202,182,0.5)',
|
||||||
|
filter: 'opacity(0.96)'}"></u-back-top>
|
||||||
<u-toast ref="uToast"></u-toast>
|
<u-toast ref="uToast"></u-toast>
|
||||||
<Loading :show="loading" />
|
<Loading :show="loading" />
|
||||||
</view>
|
</view>
|
||||||
@ -39,8 +78,47 @@ export default {
|
|||||||
// 载物图标
|
// 载物图标
|
||||||
goods: 'goods.png',
|
goods: 'goods.png',
|
||||||
loading: true, // 加载
|
loading: true, // 加载
|
||||||
|
// 订单状态
|
||||||
|
orderStatus: {
|
||||||
|
0:'未进行',
|
||||||
|
1:'进行中',
|
||||||
|
2:'已完成',
|
||||||
|
3:'已取消',
|
||||||
|
4:'待确认',
|
||||||
|
},
|
||||||
|
// 订单类型
|
||||||
|
orderTypes: {
|
||||||
|
1: '载物',
|
||||||
|
2: '载人'
|
||||||
|
},
|
||||||
// 页面是否滚动到顶
|
// 页面是否滚动到顶
|
||||||
topLevel: 0,
|
topLevel: 0,
|
||||||
|
// 滚动顶部
|
||||||
|
scrollTop: 0,
|
||||||
|
// 查看详情按钮样式
|
||||||
|
customStyle: {
|
||||||
|
backgroundColor: '#FEE547',
|
||||||
|
color: '#333333',
|
||||||
|
fontSize: '28rpx',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontFamily: 'Source Han Sans SC',
|
||||||
|
width: '160rpx',
|
||||||
|
height: '68rpx',
|
||||||
|
borderRadius: '12rpx',
|
||||||
|
border: 'none'
|
||||||
|
},
|
||||||
|
// 景区列表
|
||||||
|
scenics: {},
|
||||||
|
// 订单列表
|
||||||
|
orders: [],
|
||||||
|
// 翻页参数
|
||||||
|
form:{
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||||||
|
isFinish: 'nomore',
|
||||||
|
mainOrderStatusList: '0,1,2,3,4',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onPageScroll(e) {
|
onPageScroll(e) {
|
||||||
@ -51,12 +129,49 @@ export default {
|
|||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
|
this.init();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 返回
|
// 返回
|
||||||
back() {
|
back() {
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
},
|
},
|
||||||
|
async init(){
|
||||||
|
this.form = {size: 10,current: 1,isFinish: 'nomore',mainOrderStatusList: '0,1,2,3,4'};
|
||||||
|
// 查询订单列表
|
||||||
|
await this.getOrderList();
|
||||||
|
// 查询全部景区
|
||||||
|
let scenRes = await this.$api.allScenic();
|
||||||
|
if(!scenRes)
|
||||||
|
this.$refs.uToast.show({type: 'error',title: "景区列表获取失败!"});
|
||||||
|
else this.scenics = await scenRes.reduce((obj, item) => ({...obj,[item.id]: item.name}), {})||{};
|
||||||
|
},
|
||||||
|
// 查询订单列表
|
||||||
|
async getOrderList(){
|
||||||
|
this.form.isFinish = 'loading';
|
||||||
|
let ordRes = await this.$api.getOrders(this.form);
|
||||||
|
if(ordRes){
|
||||||
|
const { records, size, total, current } = ordRes;
|
||||||
|
if(current == 1) this.orders = records || [];
|
||||||
|
else this.orders.push(...records);
|
||||||
|
this.form.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
||||||
|
}else{
|
||||||
|
this.$refs.uToast.show({type:'error',title: "订单列表获取失败!"});
|
||||||
|
this.form.isFinish = 'loadmore';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 加载更多
|
||||||
|
getMore(){
|
||||||
|
if(this.form.isFinish === 'nomore') return;
|
||||||
|
this.form.current++;
|
||||||
|
this.getOrderList();
|
||||||
|
},
|
||||||
|
// 查看详情
|
||||||
|
showDetail(item){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/aircraft/server/order/detail?id=${item.id}`
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -66,12 +181,86 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: #F5F5F5;
|
background-color: #F5F5F5;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
.history-content{
|
.history-content{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
.history-empty{
|
||||||
|
width: 100%;
|
||||||
|
&::v-deep .u-icon__label{
|
||||||
|
margin-top: 24rpx !important;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: Source Han Sans SC;
|
||||||
|
}
|
||||||
|
}
|
||||||
.order-history{
|
.order-history{
|
||||||
position: absolute;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 24rpx 30rpx;
|
||||||
|
width: 100%;
|
||||||
|
.history-item{
|
||||||
|
margin-top: 26rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20rpx 30rpx 20rpx 20rpx;
|
||||||
|
.hi-top{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
&-left{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-family: SourceHanSansCN;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
&-right{
|
||||||
|
font-family: Source Han Sans SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #F8B500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hi-second{
|
||||||
|
margin-top: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
&-lam{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-family: SourceHanSansCN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
.lam-circle{
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background: #FCCF16;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hi-bottom{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
&-left{
|
||||||
|
font-family: SourceHanSansCN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,8 +20,8 @@
|
|||||||
<u-image class="item-avatar" width="80rpx" height="80rpx"
|
<u-image class="item-avatar" width="80rpx" height="80rpx"
|
||||||
:src="fileUrl+(!isPilot?pilotIcon:(customers[item.customerId].gender === '男' ? boyIcon : girlIcon))" />
|
:src="fileUrl+(!isPilot?pilotIcon:(customers[item.customerId].gender === '男' ? boyIcon : girlIcon))" />
|
||||||
<view class="item-self">
|
<view class="item-self">
|
||||||
<text class="item-name">{{ customers[item.customerId].name }}</text>
|
<text class="item-name">{{ customers[item[isPilot?'customerId':'orderInitiatorId']].name }}</text>
|
||||||
<text class="item-phone">{{ item.customerPhone }}</text>
|
<text class="item-phone">{{ isPilot?item.customerPhone:customers[item.orderInitiatorId].phone }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item-active">
|
<view class="item-active">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user