wx-qhb/pageD/commodityManage/commodityManage.vue

<template>
	<view>
		<!-- 顶部搜索加tab栏部分，点击批量打折是隐藏该部分 -->
		<view class="top-tab-search" v-if="!batch">
			<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/334.png" mode=""></image>
				</view>
			</view>
			<view class="tab">
				<view class="top-tab">
					<view :class="{commodity:follow==1}" class="tab" @click="tabSwitch(1)">
						全部
					</view>
					<view :class="{commodity:follow==2}" class="tab" @click="tabSwitch(2)">
						已上架
					</view>
					<view :class="{commodity:follow==3}" class="tab" @click="tabSwitch(3)">
						已下架
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部搜索加tab栏部分，点击批量打折是隐藏该部分 -->


		<!-- 内容 -->
		<view class="page">
			<view class="list">
				<view class="radio" v-if="batch">
					<radio @click="value=!value" :checked='value' style="transform:scale(0.7)" color="#f83224"
						activeBackgroundColor="#f83224" backgroundColor="#f83224"></radio>
				</view>
				<GoodsInformation :batch="batch" productAndCommodity="commodity"
					@openDiscountsPopup="openDiscountsPopup" :status="status" @toDetail="toDetail" />
			</view>
		</view>
		<view class="footer" v-if="!batch">
			<view class="batch" @click="batchDiscount">
				批量打折
			</view>
			<button class="btn-1">上架平台商品</button>
		</view>
		<view class="footer" v-else>
			<view class="batch" @click="batchDiscount">
				<radio @click="value=!value" :checked='value' style="transform:scale(0.7)" color="#f83224"
					activeBackgroundColor="#f83224" backgroundColor="#f83224"></radio>
				全选
			</view>
			<button class="btn" @click="wantDiscount">我要打折</button>
		</view>
		<!-- 筛选弹窗 -->
		<ScreenPopup :show="show" @close="close" :follow='follow' />
		<!-- 筛选弹窗 -->

		<!-- 打折弹窗 -->
		<DiscountsPopup :show="discountsShow" :goodsInformation="goodsInformation" @close="closeDiscountsPopup" />
		<!-- 打折弹窗 -->

		<!-- 批量打折 -->
		<BatchDiscountPopup :show="batchPopup" @close = 'closeDiscountsPopup' />
	</view>
</template>

<script>
	import GoodsInformation from '../components/goodsInformation.vue'
	import ScreenPopup from './component/screenPopup.vue'
	import DiscountsPopup from './component/discountsPopup.vue'
	import BatchDiscountPopup from './component/batchDiscountPopup.vue'
	export default {
		components: {
			GoodsInformation,
			ScreenPopup,
			DiscountsPopup,
			BatchDiscountPopup
		},
		data() {
			return {
				follow: 1,
				status: "1",
				show: false,
				discountsShow: false,
				goodsInformation: {},
				batch: false,
				value: false,
				batchPopup:false
			}
		},
		computed: {
			i18n() {
				return this.$t("index")
			},
		},
		methods: {
			//切换横向tab栏
			tabSwitch(num) {
				this.follow = num
			},
			//打开筛选弹窗
			openPopup() {
				this.show = true
			},
			//关闭筛选弹窗
			close(num) {
				this.show = false
				this.follow = num
				
			},
			//批量打折
			batchDiscount() {
				this.batch = !this.batch;

				uni.setNavigationBarTitle({
					title: "批量打折"
				})
			},
			//打开我要打折窗口
			wantDiscount(){
				this.batchPopup = true
			},
			
			//关闭折扣弹窗
			closeDiscountsPopup() {
				this.discountsShow = false
				this.batchPopup = false
			},
			//打开折扣弹窗
			openDiscountsPopup(value) {
				this.goodsInformation = value
				this.discountsShow = true
			},
			toDetail() {
				uni.navigateTo({
					url: "/pageD/productDetails/productDetails"
				})
			},
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: "商品管理"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.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: #333;
				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%);
			}
		}
	}

	.page {
		padding: 20rpx 24rpx;
		background-color: #fff;
		height: 85vh;

		.list {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;

			.radio {
				margin-right: 20rpx;
			}
		}
	}

	.footer {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 0;
		background-color: #fff;
		width: 93%;
		padding: 16rpx 24rpx 70rpx 24rpx;

		.batch {
			color: #333;
			font-size: 28rpx;
			margin-right: 50rpx;
			display: flex;
			align-items: center;
		}

		.btn-1 {
			width: 236rpx;
			height: 76rpx;
			border-radius: 52rpx;
			background-color: #fff;
			color: #f83224;
			border: 2rpx solid #f83224;
			padding: 0;
			margin: 0;
			font-size: 30rpx;
		}

		.btn {
			width: 236rpx;
			height: 76rpx;
			border-radius: 52rpx;
			background-color: #f83224;
			color: #fff;
			border: none;
			padding: 0;
			margin: 0;
			font-size: 30rpx;
		}
	}
</style>