编写商品管理-筛选

pageD/commodityManage/commodityManage.vue

@@ -0,0 +1,184 @@
+<template>
+	<view>
+		<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/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>
+
+		<view class="page">
+			<GoodsInformation productAndCommodity="commodity" :status="status" @toDetail="toDetail" />
+		</view>
+		<view class="footer">
+			<view class="batch">
+				批量打折
+			</view>
+			<button class="btn-1">上架平台商品</button>
+		</view>
+		
+		<ScreenPopup :show="show" @close="close" :follow='follow' />
+	</view>
+</template>
+
+<script>
+	import GoodsInformation from '../components/goodsInformation.vue'
+	import ScreenPopup from './component/screenPopup.vue'
+	export default {
+		components: {
+			GoodsInformation,
+			ScreenPopup
+		},
+		data() {
+			return {
+				follow: 1,
+				status: "1",
+				show:false
+			}
+		},
+		computed: {
+			i18n() {
+				return this.$t("index")
+			},
+		},
+		methods: {
+			tabSwitch(num) {
+				this.follow = num
+			},
+			openPopup(){
+				this.show = true
+			},
+			close(num) {
+					this.show = false
+					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;
+		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;
+	}
+
+	.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;
+		}
+		.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>

pageD/commodityManage/component/screenPopup.vue

@@ -0,0 +1,187 @@
+<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>

pageD/components/goodsInformation.vue

@@ -4,17 +4,17 @@
 			<image
 				src="https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/229465/15/14432/86913/6631bc7cF31d5200b/63dd6b0e1dc4e73c.jpg.webp"
 				mode="" class="content-img"></image>
-				<view class="mask" v-if="status!=1">
-					<view class="text-1" v-if="status == 2">
-						审核中
-					</view>
-					<view class="text-1" v-if="status == 3">
-						审核失败
-					</view>
-					<view class="text-1" v-if="status == 4">
-						已下架
-					</view>
+			<view class="mask" v-if="status!=1">
+				<view class="text-1" v-if="status == 2">
+					审核中
 				</view>
+				<view class="text-1" v-if="status == 3">
+					审核失败
+				</view>
+				<view class="text-1" v-if="status == 4">
+					已下架
+				</view>
+			</view>
 			<view class="content-right">
 				<view class="goods-title">
 					La Chapelle Sport拉夏贝尔高级感收…
@@ -31,21 +31,32 @@
 				</view>
 			</view>
 		</view>
-		<view class="btn-list">
+		<view class="btn-list" v-if="productAndCommodity=='product'">
 			<button class="btn-1" v-if="status == 1">下架商品</button>
 			<button class="btn-1" v-if="status == 2">查看详情</button>
 			<button class="btn-2" v-if="status == 3">重新提交</button>
 			<button class="btn-1" v-if="status == 4">编辑</button>
 			<button class="btn-1" v-if="status == 4">上架商品</button>
 		</view>
+		<view class="btn-list" v-else>
+			<button class="btn-1" v-if="status == 1">我要打折</button>
+			<button class="btn-1" v-if="status == 1">下架</button>
+			<button class="btn-1" v-if="status == 4">删除</button>
+			<button class="btn-1" v-if="status == 4">商家</button>
+			<button class="btn-2" v-if="status == 3">编辑</button>
+		</view>
 	</view>
 </template>
 
 <script>
 	export default {
-		props:{
-			status:{
-				typeof:String,
+		props: {
+			status: {
+				typeof: String,
+				default: ""
+			},
+			productAndCommodity:{
+				typeof: String,
 				default:""
 			}
 		},
@@ -56,20 +67,25 @@
 </script>
 
 <style lang="scss" scoped>
-	.detail{
+	.detail {
 		padding: 24rpx 20rpx;
 		background-color: #fff;
 		border-radius: 16rpx;
-		.content{
+
+		.content {
 			display: flex;
 			position: relative;
-			.content-img{
+			flex-shrink: 0;
+			justify-content: flex-start;
+			.content-img {
 				width: 164rpx;
 				height: 164rpx;
 				border-radius: 12rpx;
 				margin-right: 20rpx;
+				flex-shrink: 0;
 			}
-			.mask{
+
+			.mask {
 				width: 164rpx;
 				height: 164rpx;
 				border-radius: 12rpx;
@@ -79,7 +95,8 @@
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				.text-1{
+
+				.text-1 {
 					width: 108rpx;
 					height: 44rpx;
 					text-align: center;
@@ -90,40 +107,51 @@
 					font-size: 20rpx;
 				}
 			}
-			.content-right{
-				.goods-title{
+
+			.content-right {
+				.goods-title {
 					color: #333;
 					margin-bottom: 20rpx;
+					width: 88%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					word-break: break-word;
 				}
-				.inventory{
-					color: rgba(54,54,54,.5);
+
+				.inventory {
+					color: rgba(54, 54, 54, .5);
 					font-size: 24rpx;
 					margin-bottom: 30rpx;
 				}
-				.commodity-price{
+
+				.commodity-price {
 					color: #f83224;
 					font-size: 32rpx;
 					font-weight: 600;
 				}
 			}
 		}
-		.btn-list{
+
+		.btn-list {
 			display: flex;
 			justify-content: flex-end;
-			.btn-1{
+
+			.btn-1 {
 				width: 152rpx;
 				height: 60rpx;
 				margin: 0;
 				padding: 0;
 				font-size: 26rpx;
 				color: #333;
-				border: 2rpx solid rgba(151,151,151,.3);
+				border: 2rpx solid rgba(151, 151, 151, .3);
 				border-radius: 30rpx;
 				background-color: #fff;
 				line-height: 60rpx;
 				margin-left: 20rpx;
 			}
-			.btn-2{
+
+			.btn-2 {
 				width: 152rpx;
 				height: 60rpx;
 				margin: 0;

pageD/supplyChainGoods/supplyChainGoods.vue

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

pages.json

@@ -506,6 +506,13 @@
 					{
 						"navigationBarTitleText" : ""
 					}
+				},
+				{
+					"path" : "commodityManage/commodityManage",
+					"style" : 
+					{
+						"navigationBarTitleText" : ""
+					}
 				}
 
 			]

pages/mine/component/teamFunction.vue

@@ -7,7 +7,7 @@
 				<image class="form-icon" src="../../../static/mine/319.png" mode=""></image>
 				<view class="characters">{{i18n.platform}}</view>
 			</view>
-			<view class="icon-center">
+			<view class="icon-center" @click="toNextPage('/pageD/commodityManage/commodityManage')">
 				<image class="form-icon" src='../../../static/mine/318.png' mode=""></image>
 				<view class="characters">{{i18n.productManagement}}</view>
 			</view>

unpackage/dist/dev/mp-weixin/app.json

@@ -81,7 +81,8 @@
       "pages": [
         "index",
         "supplyChainGoods/supplyChainGoods",
-        "productDetails/productDetails"
+        "productDetails/productDetails",
+        "commodityManage/commodityManage"
       ]
     }
   ],

unpackage/dist/dev/mp-weixin/project.config.json

@@ -15,7 +15,8 @@
       "ignore": [],
       "disablePlugins": [],
       "outputPath": ""
-    }
+    },
+    "condition": false
   },
   "compileType": "miniprogram",
   "libVersion": "3.4.3",