CBB3/pages/guild/order/order.vue

<style lang="scss">
	.app-bg{
		position: absolute;
		image{width: 100vw;height: 45vw;}
		height: 50vw;
		background: #ca3a35;
	}
	.order-top{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 20;
		top: 0px;
		.topbtn{
			height: 40px;
			line-height: 40px;
			border: 1px solid #fff;
			border-radius: 5px;
			text-align: center;
			font-size: 15px;
			font-weight: 700;
			color: #fff;
			background: #dc262b;
			width: calc(50% - 100rpx);
			margin-right: 50rpx;
			&:nth-child(2n) {
				margin-left: 50rpx;
				margin-right: 0px;
			}
			&.active{
				color: #dc262b;
				background: #fff;
			}
		}
		
		
	}

</style>
<template>
	<view>
		<view class="app-bg">
			<image src="/static/img/au_order_bg.png"></image>
			<view class="order-top fx-r fx-bc fx-ac" :style="'height:calc(45vw  - 44px - ' + statusBarHeight + 'px - 20px);top:' + (statusBarHeight + 20 + 44) + 'px' ">
				<view class="topbtn" @tap="tapCk('buy')" :class="navType == 'buy' ? 'active' : ''">
					我的买单
				</view>
				<view class="topbtn" @tap="tapCk('out')" :class="navType == 'out' ? 'active' : ''">
					我的卖单
				</view>
			</view>
		</view>
		<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left" @clickLeft="utils.navigateBack()" fixed title="我的订单"></uni-nav-bar>
		
		<view class="htop" :style="'height:calc(45vw  - 44px);'"></view>
		<view :hidden="navType != 'buy'">
			<buyorder ref="buyorder"></buyorder>
		</view>
		<view :hidden="navType != 'out'">
			<outorder ref="outorder"></outorder>
		</view>
		
	</view>	
</template>



<script>
	import {mapState,mapMutations } from 'vuex';
	import buyorder from  "./info/buyorder";
	import outorder from "./info/outorder";
	export default {
		computed: mapState(['user']),
		components: {buyorder,outorder},
		data() {
		    return {
				statusBarHeight : 0,
				navType  : "buy",
				
		    }
		}, 
		onLoad(options) {
			this.navType = options.type || "buy";
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		
		onShow() {
			this.initView();
		},
			 
		methods: {
			/**
			 * 加载基础配置
			 */
			initView:function(){
				this.$nextTick(()=>{
					setTimeout(()=>{
						if(this.navType == 'buy') {
							this.$refs['buyorder'].initView();
						}
						
						if(this.navType == 'out') {
							this.$refs['outorder'].initView();
						}
					},200);
				});
			},
			/**
			 * 切换数据
			 */
			tapCk:function(ev){
				this.navType = ev;
				if(ev == 'buy') {
					this.$refs['buyorder'].initView();
				}
				
				if(ev == 'out') {
					this.$refs['outorder'].initView();
				}
			}
	},
}
</script>