271 lines
6.9 KiB
Vue
271 lines
6.9 KiB
Vue
<template>
|
||
<view class="aircraft-order">
|
||
<u-image width="100%" :src="fileUrl+banner" mode="widthFix" />
|
||
<view class="order-list">
|
||
<view class="order-item" v-for="(item,index) in orders" :key="index" @click="showDetail(item)">
|
||
<view class="item-first">
|
||
<view class="item-status">{{ orderStatus[item.mainOrderStatus] }}</view>
|
||
<view class="item-type">订单类型：<text>{{ orderTypes[item.orderType] }}</text></view>
|
||
</view>
|
||
<view class="item-second">
|
||
<view class="item-spot">
|
||
<view class="item-dot"/>景区：{{ scenics[item.attractionId] }}
|
||
</view>
|
||
<view class="item-route">
|
||
<view class="item-dot"/>路线：{{ item.routeName }}
|
||
</view>
|
||
</view>
|
||
<view class="item-third">
|
||
<view class="item-identity">
|
||
<u-image class="item-avatar" width="80rpx" height="80rpx"
|
||
:src="fileUrl+(customers[item.customerId].gender === '男' ? boyIcon : girlIcon)" />
|
||
<view class="item-self">
|
||
<text class="item-name">{{ customers[item.customerId].name }}</text>
|
||
<text class="item-phone">{{ item.customerPhone }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-active">
|
||
<u-button type="warning" :custom-style="customStyle"
|
||
:hair-line="false" @click.stop="handleDoAction(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="order-empty" 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-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import configService from '@/common/config.service.js';
|
||
export default {
|
||
// #ifdef MP
|
||
options: {
|
||
styleIsolation: 'shared'
|
||
},
|
||
// #endif
|
||
data(){
|
||
return {
|
||
fileUrl: configService.fileUrl + 'aerocraft/order/',//订单页图标基础路径
|
||
// 轮播图
|
||
banner: 'banner.png',
|
||
// 女生头像
|
||
girlIcon: 'girl.png',
|
||
// 男生头像
|
||
boyIcon: 'boy.png',
|
||
// 订单状态
|
||
orderStatus: {
|
||
0:'未进行',
|
||
1:'进行中',
|
||
2:'已完成',
|
||
3:'已取消'
|
||
},
|
||
// 订单类型
|
||
orderTypes: {
|
||
1: '载物',
|
||
2: '载人'
|
||
},
|
||
// 订单列表
|
||
orders: [],
|
||
// 执行任务按钮样式
|
||
customStyle: {
|
||
backgroundColor: '#FEE547',
|
||
color: '#333333',
|
||
fontSize: '30rpx',
|
||
fontWeight: 'bold',
|
||
fontFamily: 'Source Han Sans SC',
|
||
width: '180rpx',
|
||
height: '72rpx',
|
||
borderRadius: '12rpx',
|
||
border: 'none'
|
||
},
|
||
// 用户信息
|
||
userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
|
||
// 翻页参数
|
||
form:{
|
||
current: 1,
|
||
size: 10,
|
||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||
isFinish: 'nomore',
|
||
mainOrderStatusList: '0,1,3',
|
||
},
|
||
// 用户列表
|
||
customers: {},
|
||
// 景区列表
|
||
scenics: {}
|
||
}
|
||
},
|
||
methods:{
|
||
// 初始化
|
||
async init(){
|
||
this.form = {size: 10,current: 1,isFinish: 'nomore',mainOrderStatusList: '0,1,3'};
|
||
// 查询订单列表
|
||
await this.getOrderList();
|
||
// 查询全部客户
|
||
let cusRes = await this.$api.allCustomers();
|
||
if(!cusRes){
|
||
this.$refs.uToast.show({type: 'error',title: "客户获取失败!"});
|
||
}else this.customers = await cusRes.reduce((obj, item) => ({...obj,[item.id]: item}), {})||{};
|
||
// 查询全部景区
|
||
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();
|
||
},
|
||
// 执行任务
|
||
handleDoAction(item){
|
||
uni.navigateTo({
|
||
url: `/aircraft/server/order/detail?id=${item.id}`
|
||
})
|
||
},
|
||
// 查看详情
|
||
showDetail(item){
|
||
uni.navigateTo({
|
||
url: `/aircraft/server/order/add?id=${item.id}`
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.aircraft-order{
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.order-list{
|
||
flex: 1;
|
||
z-index: 1;
|
||
margin-top: -30rpx;
|
||
width: 100%;
|
||
background-color: #F5F5F5;
|
||
border-radius: 24rpx 16rpx 16rpx 16rpx;
|
||
.order-item{
|
||
border-radius: 24rpx 16rpx 16rpx 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0rpx 0rpx 38rpx;
|
||
background: #FFFFFF;
|
||
margin-bottom: 26rpx;
|
||
.item-first{
|
||
display: flex;
|
||
align-items: center;
|
||
.item-status{
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
background: linear-gradient(0deg, #666666, #333333);
|
||
border-radius: 24rpx 0rpx 30rpx 0rpx;
|
||
margin-right: 30rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FFFEFE;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.item-type{
|
||
margin-top: 20rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
text{
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.item-second{
|
||
margin: 38rpx 30rpx 0;
|
||
border-bottom: 2rpx solid #E6E6E6;
|
||
.item-spot,.item-route{
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
.item-dot{
|
||
background-color: #FCCF16;
|
||
border-radius: 50%;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
.item-spot{
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.item-route{
|
||
margin-bottom: 36rpx;
|
||
}
|
||
}
|
||
.item-third{
|
||
margin: 28rpx 30rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.item-identity{
|
||
display: flex;
|
||
align-items: center;
|
||
.item-avatar{
|
||
margin-right: 14rpx;
|
||
}
|
||
.item-self{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
.item-name{
|
||
margin-top: 6rpx;
|
||
}
|
||
.item-phone{
|
||
margin-bottom: 6rpx;
|
||
font-family: Arial;
|
||
}
|
||
}
|
||
}
|
||
.item-active{
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.order-empty{
|
||
&::v-deep .u-icon__label{
|
||
margin-top: 24rpx !important;
|
||
font-weight: 500;
|
||
font-family: Source Han Sans SC;
|
||
}
|
||
}
|
||
}
|
||
</style> |