QianNiaoShop/pages/order/index.vue

<template>
	<view>
		<u-navbar :border-bottom="false" :is-back="false" title-color="#2b85e4" title=" " :background="nav_background">
			<view class="tabs-ul">
				<block v-for="(item, index) in list" :key="index">
					<view v-if="$accessCheck($Access[item.access])" @click="tabChange(index)" :class="[tab_current === index ? 'tabs-on' : '']" class="tabs-li">
						{{ item.label }}
					</view>
				</block>
			</view>
		</u-navbar>
		<view v-if="tab_current === 0 && $accessCheck($Access['orderQuery'])">
			<OrderList :customerData="customerData" :shopData="shopData" :paymentData="paymentData" :customerTypeData="customerTypeData" :staffData="staffData"></OrderList>
		</view>
		<view v-else-if="tab_current === 1 && $accessCheck($Access['ReturnWarehousingOrder'])"><OrderReturn :shopData="shopData" :staffData="staffData"></OrderReturn></view>
		<view v-else class="empty-view"><u-empty text="没有权限" mode="order"></u-empty></view>
		<!-- 底部tabbar -->
		<Tabbar v-model="tabbar_current"></Tabbar>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import OrderReturn from './OrderReturn.vue';
import OrderList from './OrderList.vue';
export default {
	components: {
		OrderReturn,
		OrderList
	},
	data() {
		return {
			tabbar_current: 1,
			nav_background: {
				backgroundColor: '#ffffff'
			},
			tab_current: 0, // 页面current 0，订单，1，退货单
			list: [
				{
					label: '订单',
					access: 'orderQuery'
				},
				{
					label: '退货单',
					access: 'ReturnWarehousingOrder'
				}
			],
			customerData: '',
			shopData: '',
			paymentData: '',
			staffData: '',
			customerTypeData: '',
			search_data: {}
		};
	},
	onLoad() {
		if (!this.$store.state.hasLogin) {
			this.logout();
		}
	},
	methods: {
		...mapActions({
			logout: 'logout'
		}),
		tabChange(index) {
			this.tab_current = index;
		}
	}
};
</script>

<style scoped lang="scss">
.tabs-ul {
	color: #ffffff;
	// border: 1px solid rgba($color: #ffffff, $alpha: 0.7);
	// border-right:1rpx solid #F1F1F1;
	// border-left:1rpx solid #F1F1F1;
	display: flex;
	width: 280rpx;
	height: 64rpx;
	font-size: 28rpx;
	font-weight: 500;
	line-height: 60rpx;
	color: #ffffff;
	background-color: #4076d6;
	position: absolute;
	/* #ifdef MP*/
	right: 20rpx;
	/*#endif*/
	/* #ifdef H5 || APP-PLUS*/
	left: 50%;
	transform: translateX(-50%);
	/*#endif*/
	border-radius: 32rpx;
	//       color: #FFFFFF;
	// background-color: #4076D6;
	.tabs-li {
		flex: 2;
		text-align: center;
	}

	.tabs-on {
		background-color: #ffffff;
		border-radius: 32rpx;
		color: #62738e;
		border-right: 1rpx solid #f1f1f1;
		border-left: 1rpx solid #f1f1f1;
		font-size: 32rpx;
	}
}
</style>