massage-front/pages/index/order.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="订单" leftClick @leftClick="$utils.navigateBack" color="#fff" />
		
		<!-- 订单筛选 -->
		<view class="tabs">
			<uv-tabs :list="tabs" 
			:customStyle="{
				backgroundColor: '#FFFFFF',
			}"
			:activeStyle="{
				color: '#84A73F',
				fontSize: '28rpx',
				whiteSpace: 'nowrap',
				paddingTop: '29rpx',
				paddingBottom: '21rpx',
			}"
			:inactiveStyle="{
				color: '#000000',
				fontSize: '28rpx',
				whiteSpace: 'nowrap',
				paddingTop: '29rpx',
				paddingBottom: '21rpx',
			}"
			lineHeight="8rpx" 
			lineWidth="92rpx" 
			lineColor="linear-gradient(to right, #84A73F, #D8FF8F)"
			:scrollable="false"
			:current="current"
			@click="clickTabs"></uv-tabs>
		</view>
        
		<!-- 未登录显示 -->
		<view v-if="!isLogin" class="no-login">
			<image class="no-login-img" src="@/static/image/center/icon-member-center.png" mode="widthFix"></image>
			<view class="no-login-text">登录后查看您的订单</view>
			<button class="no-login-btn" @click="$utils.toLogin">立即登录</button>
		</view>

		<view v-if="isLogin" class="list">
			<orderCard class="list-item" v-for="item in list" :data="item" :key="item.id" @done="getData"></orderCard>
		</view>
		
		<tabber select="order" />
	</view>
</template>

<script>
	import orderCard from '@/components/order/orderCard.vue'
	import mixinsList from '@/mixins/list.js'
	import mixinsOrder from '@/mixins/order.js'
	import tabber from '@/components/base/tabbar.vue'
	
	export default {
		mixins: [mixinsList, mixinsOrder],
		components: {
			orderCard,
			tabber,
		},
		computed: {
			isLogin() {
				return this.userInfo && this.userInfo.id
			}
		},
		data() {
			return {
				tabs: [{
						name: '全部订单'
					},
					{
						name: '待付款'
					},
					{
						name: '待核销'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消'
					},
				],
				current: 0,
				mixinsListApi: '',
			}
		},
		onShow() {
			if (this.isLogin) {
                this.mixinsListApi = 'queryOrderList'
				this.getData()
			}
		},
		methods: {
			//点击tab栏
			clickTabs({ index }) {
				if (index == 0) {
					delete this.queryParams.status
				} else {
					this.queryParams.status = index - 1
				}
				this.getData()
			},
			//跳转订单详情页面
			toOrderDetail(id) {
				uni.navigateTo({
					url: '/pages_order/order/orderDetail?id=' + id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #F5F5F5;
				
		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}
	}

	.tabs {
		/deep/ .uv-tabs__wrapper__nav__line {
			bottom: 0;
		}
	}

	.list {
		padding: 16rpx 17rpx;

		&-item {
			display: block;

			& + & {
				margin-top: 20rpx;
			}
		}
	}

	.no-login {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		background-color: #FFFFFF;

		&-img {
			width: 120rpx;
			height: auto;
			margin-bottom: 20rpx;
		}

		&-text {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 40rpx;
		}

		&-btn {
			padding: 16rpx 60rpx;
			background-image: linear-gradient(to right, #84A73F, #D8FF8F);
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		}
	}
</style>