wx-qhb/pageD/supplyChainGoods/supplyChainGoods.vue

<template>
	<view>
		<view class="top-tab-search">
			<u--input placeholder="搜索商品名称" shape="circle" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399"></u--input>
			<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 :class="{commodity:follow==4}" class="tab" @click="tabSwitch(4)">
						审核失败
					</view>
					<view :class="{commodity:follow==5}" class="tab" @click="tabSwitch(5)">
						已下架
					</view>
				</view>
			</view>
		</view>

		<view class="page">
			<GoodsInformation productAndCommodity="product" :status="status" @toDetail="toDetail" />
		</view>
		<view class="footer">
			<button class="btn">添加供应链商品</button>
		</view>
	</view>
</template>

<script>
	import GoodsInformation from '../components/goodsInformation.vue'
	export default {
		components: {
			GoodsInformation
		},
		data() {
			return {
				follow: 1,
				status: "1",
			}
		},
		computed: {
			i18n() {
				return this.$t("index")
			},
		},
		methods: {
			tabSwitch(num) {
				this.follow = num
			},
			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;

		.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;
	}
	.footer{
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		padding:16rpx 24rpx 70rpx 24rpx;
		.btn{
			border-radius: 52rpx;
			background-color: #f83224;
			color: #fff;
			border: none;
			padding: 0;
			margin: 0;
			width: 94%;
			font-size: 30rpx;
		}
	}
</style>