huajucanyin/components/wanl-shop/shop/head.vue

<template>
	<view class="wanlshophead-container" :style="{ height: `${headHeight}px`, paddingTop:`${headTop}px` }">
		<view class="text-xl text-bold" @tap="handleBack()">
			<text class="wlIcon-fanhui1"></text>
		</view>
		<view class="content">
			<view v-if="tabbarId === 'home'" class="home">
				<view :class="{active: headTabbarId === 'page'}" @tap="handleHeadTabbarId('page')">
					<text>推荐</text>
				</view>
				<view :class="{active: headTabbarId === 'news'}" @tap="handleHeadTabbarId('news')">
					<text>新品</text>
				</view>
				<view :class="{active: headTabbarId === 'groups'}" @tap="handleHeadTabbarId('groups')">
					<text>拼团</text>
				</view>
			</view>
			<view v-else class="search round" @tap="handleSearch">
				<text class="wlIcon-sousuo1 text-bold margin-left-bj margin-right-xs"></text>
				<text>搜索店铺内宝贝</text>
			</view>
		</view>
		<view class="text-xl">
			<text @tap="handleSearch" v-if="tabbarId === 'home'" class="wlIcon-sousuo1 margin-right"></text>
			<text @tap="showModal('menu')" class="wlIcon-gengduo"></text>
		</view>
		<!-- 模态框 -->
		<view class="WANL-MODAL wanlgroups-user-container__modal">
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal">
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct @change="hideModal" />
				</view>
			</view>
			<!-- 分享 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share :scrollAnimation="scrollAnimation" shareTitle="我发现了一个很好的线上购物商城，这是商城类目"
						shareText="品质好而且很省钱如果自己在上面购买，每年可以省下1%~40%的钱" :image="$wanlshop.appstc('/common/logo.png')"
						:href="`${$store.state.common.appConfig.domain}/pages/shop/index?id=${shopId}&QRtype=shop`"
						@change="hideModal" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "WanlShopHead",
		props: {
			headHeight: {
				type: Number,
				default: 0
			},
			headTop: {
				type: Number,
				default: 0
			},
			shopId: {
				type: Number,
				default: 0
			},
			tabbarId: {
				type: String,
				default: ""
			},
			headTabbarId: {
				type: String,
				default: "page"
			}
		},
		data() {
			return {
				modalName: null,
				scrollAnimation: 300
			}
		},
		methods: {
			handleBack() {
				this.$wanlshop.back(1);
			},
			// 弹出层
			showModal(name) {
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 300;
					}, 300);
				}
				this.modalName = name;
			},
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			handleHeadTabbarId(name){
				this.$emit('headId', name);
			},
			handleSearch() {
				this.$wanlshop.to(`/pages/shop/product/list?shop_id=${this.shopId}`, 'fade-in', 100);
			}
		}
	}
</script>

<style lang="scss">
	.wanlshophead-container {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 22rpx;
		padding-right: 24rpx;
		/* #ifdef MP */
		padding-right: 220rpx;
		/* #endif */

		.content {
			flex: 1;

			.home {
				display: flex;
				align-items: center;
				margin: 0 25rpx;
				font-size: 32rpx;
				color: #555;
				&>view + view{
					margin-left: 40rpx;
				}
				.active{
					color: #333;
					font-size: 38rpx;
					font-weight: 600;
				}
			}

			.search {
				display: flex;
				align-items: center;
				margin: 0 25rpx;
				background-color: #f9f9f9;
				line-height: 68rpx;
				height: 68rpx;
				color: grey;
			}

		}
	}
</style>