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 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 {
		mapGetters
	} from 'vuex'
	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: {},
		data() {
			return {
				tabs: [{
						name: '全部订单'
					},
					{
						name: '待付款'
					},
					{
						name: '待核销'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消'
					},
				],
				current: 0,
				mixinsListApi: 'queryOrderList',
			}
		},
		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;
			}
		}
	}
</style>