|
|
|
@ -0,0 +1,141 @@ |
|
|
|
<template> |
|
|
|
<view class="order-manage"> |
|
|
|
<view class="om-section-list" v-for="(e, i) in tabList" :key="i"> |
|
|
|
<view class="osl-item"> |
|
|
|
<view class="oi-title">{{ e.title }}</view> |
|
|
|
<view class="oi-list"> |
|
|
|
<view class="ol-item" @click="tabClick(v)" v-for="(v, j) in e.tabArr" :key="j"> |
|
|
|
<image mode="aspectFit" :src="getIconPath(v.iconName)"></image> |
|
|
|
<view>{{ v.name }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import util from '../../../../utils/util' |
|
|
|
export default { |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
tabList: getTabList() |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getIconPath(iconName){ |
|
|
|
return `../../static/images/order_manage/${iconName}.png` |
|
|
|
}, |
|
|
|
tabClick(ele){ |
|
|
|
if(!this.isFinish(ele.key))return util.showNone('待开放中！'); |
|
|
|
|
|
|
|
if(ele.orderType === 3){ // 订场&次卡订单入口拆分 |
|
|
|
let _type = ele.key - 1; // 0 -> 订场 / 1 -> 次卡 |
|
|
|
let _path = getTabRoutePath() + `?order_type=${ele.orderType}&type=${_type}`; |
|
|
|
return util.routeTo(_path, 'nT'); |
|
|
|
} |
|
|
|
|
|
|
|
util.routeTo(getTabRoutePath() + `?order_type=${ele.orderType}`,'nT'); |
|
|
|
}, |
|
|
|
isFinish(key){ |
|
|
|
let _endKeyArr = [1, 2, 3, 4, 5, 7, 9, 10, 11, ] |
|
|
|
return _endKeyArr.includes(key); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function getTabRoutePath(ele){ |
|
|
|
return `/pages/order_list/order_list`; |
|
|
|
} |
|
|
|
|
|
|
|
function getTabList(){ |
|
|
|
let _tabAry = []; |
|
|
|
// orderType 为兼容之前逻辑 |
|
|
|
_tabAry[0] = { |
|
|
|
id: 1, |
|
|
|
title: '服务订单', |
|
|
|
tabArr: [ |
|
|
|
{ id: 1, name: '订场订单', key: 1, iconName: 'order_14', orderType: 3 }, |
|
|
|
{ id: 2, name: '次卡订单', key: 2, iconName: 'order_2', orderType: 3 }, |
|
|
|
{ id: 3, name: '计时订单', key: 3, iconName: 'order_6', orderType: 1 }, |
|
|
|
{ id: 4, name: '储值卡订单', key: 4, iconName: 'order_1', orderType: 4 }, |
|
|
|
{ id: 5, name: '课程订单', key: 5, iconName: 'order_8', orderType: 12 }, |
|
|
|
{ id: 6, name: '赛事订单', key: 6, iconName: 'order_9', orderType: 14 }, |
|
|
|
{ id: 7, name: '约玩订单', key: 7, iconName: 'order_15', orderType: 10 }, |
|
|
|
{ id: 8, name: '商城订单', key: 8, iconName: 'order_4', orderType: 2 }, |
|
|
|
{ id: 9, name: '积分兑换订单', key: 9, iconName: 'order_5', orderType: 5 }, |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
_tabAry[1] = { |
|
|
|
id: 2, |
|
|
|
title: '智能订单', |
|
|
|
tabArr: [ |
|
|
|
{ id: 1, name: '高光时刻', key: 10, iconName: 'order_3', orderType: 15 }, |
|
|
|
{ id: 2, name: '租球机订单', key: 11, iconName: 'order_16', orderType: 16 }, |
|
|
|
{ id: 3, name: '租售柜订单', key: 12, iconName: 'order_17', orderType: 8 }, |
|
|
|
{ id: 4, name: '储物柜订单', key: 13, iconName: 'order_0', orderType: 7 }, |
|
|
|
{ id: 5, name: '售货柜订单', key: 14, iconName: 'order_10', orderType: 6 }, |
|
|
|
{ id: 6, name: '咖啡机订单', key: 15, iconName: 'order_7', orderType: 9 }, |
|
|
|
{ id: 7, name: '浴室订单', key: 16, iconName: 'order_13', orderType: 11 }, |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
_tabAry[2] = { |
|
|
|
id: 3, |
|
|
|
title: '售后维权订单', |
|
|
|
tabArr: [ |
|
|
|
{ id: 1, name: '售后维权', key: 17, iconName: 'order_12', orderType: 17 }, |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
return _tabAry; |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
@import '~style/public.scss'; |
|
|
|
.order-manage{ |
|
|
|
padding-bottom: 0upx; |
|
|
|
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|
|
|
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
|
} |
|
|
|
.om-section-list{ |
|
|
|
.osl-item{ |
|
|
|
margin-bottom: 24upx; |
|
|
|
padding: 60upx 40upx 40upx; |
|
|
|
background-color: #fff; |
|
|
|
.oi-title{ |
|
|
|
margin-bottom: 56upx; |
|
|
|
font-size: 32upx; |
|
|
|
line-height: 44upx; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
.oi-list{ |
|
|
|
display: flex; |
|
|
|
align-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
.ol-item{ |
|
|
|
flex-shrink: 0; |
|
|
|
flex-grow: 0; |
|
|
|
margin-bottom: 40upx; |
|
|
|
width: 25%; |
|
|
|
>image{ |
|
|
|
margin: 0 auto 18upx; |
|
|
|
display: block; |
|
|
|
width: 60upx; |
|
|
|
height: 60upx; |
|
|
|
} |
|
|
|
>view{ |
|
|
|
text-align: center; |
|
|
|
font-size: 22upx; |
|
|
|
line-height: 32upx; |
|
|
|
color: #1a1a1a; |
|
|
|
@include textHide(1); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
