junzitang/pages/classification/cate.vue

<template>
	<view class="content" :class="['qn-page-' + theme]">
		<view :style="{ backgroundColor: cateModel === 4 ? '#ffffff' : '#f4f5f6' }" class="mp-search-box">
			<view @click="goPage('/pagesT/search/index')" :style="{ backgroundColor: cateModel !== 4 ? '#ffffff' : '#f4f5f6' }" class="ser-input-view">
				<text class="ibonfont ibonsousuo1"></text>
				<text>输入搜索商品发现更多好物…</text>
			</view>
			<view class="right-view">
				<!-- #ifdef MP-WEIXIN -->
				<button class="contact-btn" open-type="contact">
					<u-icon name="server-fill" color="#000000" size="32"></u-icon>
					<view>商城客服</view>
				</button>
				<!--  #endif -->
				<!-- #ifdef APP-PLUS || H5 -->
				<button class="contact-btn" @click="callphone">
					<u-icon name="server-fill" color="#000000" size="32"></u-icon>
					<view>客服</view>
				</button>
				<!--  #endif -->
			</view>
		</view>
		<view class="cate-main" :style="{ top: cateModel === 4 ? '100rpx' : '110rpx', zIndex: cateModel === 4 ? '1000' : '900' }">
			<cateOne v-if="cateModel === 1"></cateOne>
			<CateTwo v-if="cateModel === 2"></CateTwo>
			<CateThree v-if="cateModel === 3"></CateThree>
			<CateFive v-if="cateModel === 5"></CateFive>
			<CateFour :selAddress="now_sel_address" v-if="cateModel === 4" :isLogin="isLogin"></CateFour>
		</view>
		<!-- 底部tabbar -->
		<Tabbar v-model="current"></Tabbar>
	</view>
</template>

<script>
import cateOne from './CateOne.vue';
import CateTwo from './CateTwo.vue';
import CateThree from './CateThree.vue';
import CateFour from './CateFour.vue';
import CateFive from './CateFive.vue';

export default {
	components: {
		cateOne,
		CateTwo,
		CateThree,
		CateFour,
		CateFive
	},
	computed: {
		style() {
			const systemInfo = uni.getSystemInfoSync();
			return `top:${systemInfo.statusBarHeight + 44}px`;
		},
		enterprisemobile() {
			return this.$store.state.enterpriseInfo.mobile;
		},
		cateModel(){
			return this.$store.state.cateModel;
		}
	},
	onNavigationBarButtonTap() {
		this.goPage('/pagesT/search/index');
	},
	data() {
		return {
			current: 1,
			now_sel_address: {},
			conptop: {
				// #ifdef H5
				paddingTop: '44px',
				// #endif
				// #ifdef MP-WEIXIN
				paddingTop: '124rpx'
				// #endif
			},
			// cateModel: 4,
			isLogin: true
		};
	},
	onShow() {
		this.isLogin = this.$common.isLogin();
		// this.cateModel = this.$store.state.cateModel;
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		// 小程序的原生菜单中显示分享按钮
		uni.showShareMenu({
			withShareTicket: false,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	methods: {
		callphone() {
			uni.makePhoneCall({
				phoneNumber: this.enterprisemobile
			});
		}
	},
	// 发送给朋友
	onShareAppMessage() {
		return {
			title: this.$store.state.baseSet.shop,
			path: '/pages/index/index?businessmanId=' + (this.$store.state.userStatus.id||''),
			success: res => {
				console.log(res);
			}
		};
	},
	// #ifdef MP-WEIXIN
	// 分享到朋友圈
	onShareTimeline(obj) {},
	// 收藏小程序
	onAddToFavorites() {}
	// #endif
};
</script>

<style lang="scss">
.content {
	height: 100vh;
	background-color: #fff;
}
.cate-main {
	position: fixed;
	left: 0;
	width: 100%;
	top: 110rpx;
	z-index: 997;
}
.mp-search-box {
	background-color: #f5f6f7;
	position: fixed;
	padding: 24upx 0;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 100%;
	padding-left: 30rpx;
	.ser-input-view {
		width: 620rpx;
		height: 64rpx;
		background-color: #ffffff;
		border-radius: 64upx;
		line-height: 64upx;
		font-size: 24upx;
		color: #9fa8bd;
		font-weight: 400;
		.ibonfont {
			margin: 0 18rpx;
			display: inline-block;
			vertical-align: middle;
			font-size: 38rpx;
		}
	}
	.right-view {
		position: absolute;
		right: 16rpx;
		top: 50%;
		transform: translateY(-50%);
		.contact-btn {
			background-color: transparent;
			font-size: 18rpx;
			font-weight: 400;
			color: #2a2a2a;
			line-height: 25rpx;
			text-align: center;
			padding: 0;
			&::after {
				border: 0 none;
			}
		}
	}
}
</style>