wx-qhb/pageD/commodityManage/component/screenPopup.vue

<template>
	<view class="">
		<u-popup :show="show" :round="10" mode="top" @close="close">
			<view class="top-tab-search">
				<view class="search">
					<u--input placeholder="搜索商品名称" shape="circle" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
					<view class="screen" @click="openPopup">
						筛选
						<image class="screen-icon" src="../../../static/mine/335.png" mode=""></image>
					</view>
				</view>
				<view class="tab">
					<view class="top-tab">
						<view :class="{commodity:followPopup==1}" class="tab" @click="tabSwitch(1)">
							全部
						</view>
						<view :class="{commodity:followPopup==2}" class="tab" @click="tabSwitch(2)">
							已上架
						</view>
						<view :class="{commodity:followPopup==3}" class="tab" @click="tabSwitch(3)">
							已下架
						</view>
					</view>
				</view>
				<view class="btn-list">
					<view :class="{'select-tab':selectTab == 1}" @click="selected(1)">我的商品</view>
					<view :class="{'select-tab':selectTab == 2}" @click="selected(2)">供应链商品</view>
					<view :class="{'select-tab':selectTab == 3}" @click="selected(3)">平台自营商品</view>
				</view>
				<view class="reset-config">
					<button class="reset">重置</button><button class="config">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				followPopup: 1,
				selectTab:1
			}
		},
		props: {
			follow: {
				typeof: Number,
				default: 1
			},
			show: {
				typeof: Boolean,
				default: false
			}
		},
		watch: {
			//监听横向tab栏的数据，同步父组件和子组件横向tab栏的状态
			follow(newVal) {
				this.followPopup = newVal
			}
		},
		methods: {
			//切换tab
			tabSwitch(num) {
				this.followPopup = num
			},
			//关闭弹窗,将数据传入如=父组件
			close() {
				this.$emit('close', this.followPopup)
			},
			//切换选中状态
			selected(num){
				this.selectTab = num
			}
		}
	}
</script>

<style scoped lang="scss">
	.top-tab-search {
		background-color: #fff;
		padding: 10rpx 24rpx;
		z-index: 20174;

		.search {
			display: flex;
			align-items: center;

			.screen {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #F83224 ;
				font-weight: 600;
				margin-left: 20rpx;

				.screen-icon {
					width: 24rpx;
					height: 24rpx;
					margin-left: 5rpx;
				}
			}
		}

		.top-tab {
			margin-top: 10rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;

			.tab {
				font-size: 26rpx;
				color: rgba(34, 34, 34, .8);
				flex-shrink: 0;
				height: 44rpx;
				display: flex;
				align-items: flex-end;
				padding-bottom: 12rpx;
			}

			.commodity {
				position: relative;
				font-weight: 600;
			}

			.commodity::before {
				content: '';
				display: block;
				height: 4rpx;
				width: 50%;
				background: #f83224;
				position: absolute;
				bottom: -10rpx;
				opacity: 0.8;
				left: 50%;
				transform: translate(-50%, 50%);
			}
		}
		.btn-list{
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 32rpx;
			view{
				width: 210rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				background-color: #f3f3f3;
				border-radius: 10rpx;
				font-size: 26rpx;
				color: #444;
			}
			.select-tab{
				background-color: rgba(248, 50, 36, .1);
				color: #f83224;
				font-weight: 600;
			}
		}
		.reset-config{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 44rpx;
			.reset{
				width: 260rpx;
				height: 76rpx;
				background-color: #f3f3f3;
				border: none;
				border-radius: 38rpx;
				color: #333;
				font-size: 28rpx;
			}
			.config{
				width: 402rpx;
				height: 76rpx;
				background-color: #F83224;
				color: #fff;
				border: none;
				border-radius: 38rpx;
				font-size: 28rpx;
				
			}
		}
	}
</style>