From a3b72d5ad6f9ae4779dc0b62ccf5bf44eed9d4c4 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Sat, 14 Sep 2024 18:26:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E9=83=A8=E5=88=86=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pageProduct/add-Product/add-Product.vue       |   2 +-
 .../index/components/category - 副本 (2).vue  | 120 +++++++++++
 pageProduct/index/components/category.vue     |  88 ++++----
 pageProduct/index/components/control.vue      |   4 +-
 pageProduct/index/components/goods.vue        |  84 ++++----
 pageProduct/index/index.vue                   | 190 +++++++++---------
 6 files changed, 296 insertions(+), 192 deletions(-)
 create mode 100644 pageProduct/index/components/category - 副本 (2).vue

diff --git a/pageProduct/add-Product/add-Product.vue b/pageProduct/add-Product/add-Product.vue
index 6268391..b13bd6f 100644
--- a/pageProduct/add-Product/add-Product.vue
+++ b/pageProduct/add-Product/add-Product.vue
@@ -1,6 +1,6 @@
 <template>
 	<view class="u-p-30 safe-page">
-		<up-sticky v-if="option.type==='edit'" offset-top="20">
+		<up-sticky v-if="option.type==='edit'" offset-top="20" zIndex="99">
 			<myTabs :list="tabsList" @change="tabsChange"></myTabs>
 		</up-sticky>
 
diff --git a/pageProduct/index/components/category - 副本 (2).vue b/pageProduct/index/components/category - 副本 (2).vue
new file mode 100644
index 0000000..ebf1a34
--- /dev/null
+++ b/pageProduct/index/components/category - 副本 (2).vue	
@@ -0,0 +1,120 @@
+<template>
+	<view>
+		<view class="category " :style="getCompouteStyle()">
+			<scroll-view scroll-y="true" :style="{height:props.height+'rpx'}">
+				<view class="list">
+					<view v-if="showAllText" class="font-bold item border-bottom u-font-28" @tap="cateClick({id:'',name:'全部分类'})">全部分类</view>
+					<view  v-for="(item,index) in category.list" :key="index">
+						<view class="item font-bold border-bottom"  @tap="cateClick(item)">
+							{{item.name}}
+						</view>
+							<view class="item border-bottom"  @tap="cateClick(child)" 
+							v-for="(child,childIndex) in item.childrenList"
+							 :key="childIndex"  >
+								<text>&nbsp;&nbsp;</text>
+								{{child.name}}
+							</view>
+						
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref, warn, watch, watchEffect,
+		onMounted,reactive
+	} from 'vue';
+	import {$tbShopCategory} from '@/http/yskApi/goods.js'
+	const emite=defineEmits(['cateClick','change'])
+	const props = defineProps({
+		showAllText:{
+			type:Boolean,
+			default:true
+		},
+		width: {
+			type: [Number, String],
+			default: 264
+		},
+		height: {
+			type: [Number, String],
+			default: 420
+		},
+		right: {
+			type: [Number, String],
+			default: 30
+		},
+		bottom: {
+			type: [Number, String],
+			default: 0
+		}
+	})
+	let show = ref(false)
+	
+	watch(()=>show.value,(newval)=>{
+		emite('change',newval)
+	})
+	
+	function open() {
+		show.value = true
+	}
+
+	function close() {
+		show.value = false
+	}
+
+	function toggle() {
+		show.value = !show.value
+	}
+	
+	function cateClick(item){
+		emite('cateClick',item)
+		close()
+	}
+	
+	function getCompouteStyle() {
+		return {
+			width: props.width + 'rpx',
+			height: props.height + 'rpx',
+			right: props.right + 'rpx',
+			bottom: props.bottom + 'rpx',
+			transform:`scaleY(${show.value?1:0})`
+		}
+	}
+	const category=reactive({
+		list:[],
+		categoryId:'',
+		categoryName:'',
+		
+	})
+	onMounted(()=>{
+		$tbShopCategory({
+			page:0,size:200
+		}).then(res=>{
+			category.list=res.content
+		})
+	})
+	defineExpose({
+		open,
+		close,toggle
+	})
+</script>
+
+<style lang="scss" scoped>
+	.category {
+		background: #FFFFFF;
+		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
+		border-radius: 14rpx 14rpx 14rpx 14rpx;
+		position: fixed;
+		font-size: 24rpx;
+		color: #333;
+		.list{
+			box-sizing: border-box;
+			.item{
+				padding: 24rpx 24rpx 24rpx 48rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pageProduct/index/components/category.vue b/pageProduct/index/components/category.vue
index ebf1a34..3e86e9f 100644
--- a/pageProduct/index/components/category.vue
+++ b/pageProduct/index/components/category.vue
@@ -1,25 +1,5 @@
 <template>
-	<view>
-		<view class="category " :style="getCompouteStyle()">
-			<scroll-view scroll-y="true" :style="{height:props.height+'rpx'}">
-				<view class="list">
-					<view v-if="showAllText" class="font-bold item border-bottom u-font-28" @tap="cateClick({id:'',name:'全部分类'})">全部分类</view>
-					<view  v-for="(item,index) in category.list" :key="index">
-						<view class="item font-bold border-bottom"  @tap="cateClick(item)">
-							{{item.name}}
-						</view>
-							<view class="item border-bottom"  @tap="cateClick(child)" 
-							v-for="(child,childIndex) in item.childrenList"
-							 :key="childIndex"  >
-								<text>&nbsp;&nbsp;</text>
-								{{child.name}}
-							</view>
-						
-					</view>
-				</view>
-			</scroll-view>
-		</view>
-	</view>
+	<up-picker :show="show" keyName="name" @confirm="confirm" :columns="category.list" @close="close" @cancel="close" :closeOnClickOverlay="true"></up-picker>
 </template>
 
 <script setup>
@@ -28,7 +8,7 @@
 		onMounted,reactive
 	} from 'vue';
 	import {$tbShopCategory} from '@/http/yskApi/goods.js'
-	const emite=defineEmits(['cateClick','change'])
+	const emite=defineEmits(['change','update:isShow','confirm'])
 	const props = defineProps({
 		showAllText:{
 			type:Boolean,
@@ -49,57 +29,63 @@
 		bottom: {
 			type: [Number, String],
 			default: 0
+		},
+		isShow:{
+			type:Boolean,
+			default:false
 		}
 	})
-	let show = ref(false)
+	
+	let show = ref(props.isShow)
 	
 	watch(()=>show.value,(newval)=>{
 		emite('change',newval)
+		emite('update:isShow',newval)
+	})
+	watch(()=>props.isShow,(newval)=>{
+		console.log(newval);
+		show.value=newval
 	})
 	
-	function open() {
-		show.value = true
+	function confirm(e){
+		console.log(e.value[0]);
+		show.value = false
+		emite('confirm',e.value[0])
 	}
-
 	function close() {
+		console.log('close');
 		show.value = false
 	}
-
-	function toggle() {
-		show.value = !show.value
-	}
 	
-	function cateClick(item){
-		emite('cateClick',item)
-		close()
-	}
 	
-	function getCompouteStyle() {
-		return {
-			width: props.width + 'rpx',
-			height: props.height + 'rpx',
-			right: props.right + 'rpx',
-			bottom: props.bottom + 'rpx',
-			transform:`scaleY(${show.value?1:0})`
-		}
-	}
 	const category=reactive({
 		list:[],
-		categoryId:'',
-		categoryName:'',
-		
 	})
 	onMounted(()=>{
 		$tbShopCategory({
 			page:0,size:200
 		}).then(res=>{
-			category.list=res.content
+			res.content.unshift({
+				name:'全部',
+				id:'',
+				childrenList:[]
+			})
+			category.list=[res.content.reduce((prve, cur) => {
+				prve.push(...[{
+					...cur,
+					name: '' + cur.name,
+					childrenList:undefined
+				}, ...cur.childrenList.map(v => {
+					return {
+						...v,
+						name: '' + v.name
+					}
+				})])
+				return prve
+			}, [])]
+			console.log(category.list);
 		})
 	})
-	defineExpose({
-		open,
-		close,toggle
-	})
 </script>
 
 <style lang="scss" scoped>
diff --git a/pageProduct/index/components/control.vue b/pageProduct/index/components/control.vue
index 249b2a8..a51e690 100644
--- a/pageProduct/index/components/control.vue
+++ b/pageProduct/index/components/control.vue
@@ -3,12 +3,12 @@
 		<view class="u-flex control1" v-if="showControl1">
 			<view class="btn" @click="changeShowControl1">批量管理</view>
 			<view class="btn" @tap="go.to('PAGES_PRODUCT_ADD')">商品添加</view>
-			<view class="color-999 btn u-flex u-row-center" @click="emitToggleCategory">
+			<!-- <view class="color-999 btn u-flex u-row-center" @click="emitToggleCategory">
 				<text class="u-m-r-10">{{categoryName||'选择分类'}}</text>
 				<view class="arrow-down" :class="{'up':categoryShow}">
 					<uni-icons type="right" size="16" color="#999"></uni-icons>
 				</view>
-			</view>
+			</view> -->
 		</view>
 		<view class="u-flex control2 u-row-between" v-else>
 			<view class="u-flex btn">
diff --git a/pageProduct/index/components/goods.vue b/pageProduct/index/components/goods.vue
index d30ef1a..09ac0ba 100644
--- a/pageProduct/index/components/goods.vue
+++ b/pageProduct/index/components/goods.vue
@@ -7,9 +7,9 @@
 					<text class="u-m-l-20">{{data.sort}}</text>
 				</view>
 				<view class="color-333 u-m-l-42 u-flex">
-					<text class="stock">库存</text>
+					<up-icon name="edit-pen" :size="16" :color="ColorMain"></up-icon>
+					<text class="stock">库存:</text>
 					<text class="font-bold u-m-l-10">{{data.stockNumber}}</text>
-					<uni-icons type="right" size="16" color="#000"></uni-icons>
 				</view>
 			</view>
 			<text class="u-font-28 color-666" @click="changeClick">修改</text>
@@ -24,16 +24,20 @@
 				</label>
 			</view>
 			<image :src="data.coverImg" lazy-load class="img"></image>
-			<view class="h-100 u-p-l-16 u-flex u-flex-col u-row-between">
-				<view class="color-333"> <text class="u-m-r-24">{{data.name}}</text><uni-tag size="small" type="primary"
-						custom-style="background-color: #318AFE;" :text="data.typeEnum"></uni-tag></view>
+			<view class="h-100 u-p-l-16 u-flex-1 u-flex u-flex-col u-row-between">
+				<view class="color-333 w-full u-flex u-row-between">
+					<view class="u-flex">
+						<text class="u-m-r-24">{{data.name}}</text><uni-tag size="small" type="primary"
+							custom-style="background-color: #318AFE;" :text="data.typeEnum"></uni-tag>
+					</view>
+					<view class="price">¥{{data.lowPrice}}</view>
+				</view>
 
-				<view class="price">¥{{data.lowPrice}}</view>
 			</view>
 		</view>
 
-		<view class="u-m-t-16 skus u-text-center" v-if="showDetail&&data.skuList.length>=2">
-			<view class="u-flex u-row-between font-bold">
+		<view class="u-m-t-16 skus u-text-center" v-if="data.skuList.length>=2">
+			<!-- <view class="u-flex u-row-between font-bold">
 				<view class="u-flex-1">商品信息</view>
 				<view class="u-flex-1">售价</view>
 				<view class="u-flex-1">库存</view>
@@ -44,30 +48,28 @@
 					<view class="price u-flex-1">¥{{data.lowPrice||0}}</view>
 					<view class=" u-flex-1">{{item.stockNumber||0}} {{data.unitName||''}}</view>
 				</view>
-			</view>
-			<!-- <view class="u-flex">
-				<view class="sku">做法</view>
-				<view class="u-flex u-flex-wrap u-flex-1 skds">
-					<view class="skd">汤
-						<view class="tag-primary tag">上架中</view>
-					</view>
-					<view class="skd">干
-						<view class="tag-primary tag">上架中</view>
-					</view>
-				</view>
 			</view> -->
+			<view class="u-flex u-flex-wrap  skds">
+				<view class="skd" v-for="(item,index) in data.skuList" :key="index"><text>{{item.specSnap}}</text>
+					<view class="tag-primary tag">上架中</view>
+				</view>
+			</view>
 
 		</view>
 		<view class="u-m-t-24 u-flex u-row-between">
 			<view class="u-flex">
-				<view class="u-m-r-18 color-999">设置热门</view>
-				<my-switch v-model="data.isHot" @change="isHotChange"></my-switch>
-			<!-- 	<view class="u-m-r-18 color-999">售罄</view>
-				<my-switch v-model="isSellNone" @change="isSellNoneChange"></my-switch> -->
+				<view class="u-flex">
+					<view class="u-m-r-18 color-999">售罄</view>
+					<my-switch v-model="data.isSellNoneChange" @change="isHotChange"></my-switch>
+				</view>
+				<view class="u-flex u-m-l-30">
+					<view class="u-m-r-18 color-999">下架产品</view>
+					<my-switch v-model="data.isSellNoneChange" @change="isHotChange"></my-switch>
+				</view>
 			</view>
 			<view class="u-flex">
 				<!-- <view class="btn-default btn" @tap="xiajia">下架商品</view> -->
-				<view class="btn-default btn" @tap="del">删除</view>
+				<!-- <view class="btn-default btn" @tap="del">删除</view> -->
 				<view class="btn-primary btn u-m-l-38" @click="toEdit">编辑</view>
 			</view>
 		</view>
@@ -83,13 +85,15 @@
 		ref,
 		watchEffect
 	} from 'vue';
-	import {$goodsIsHot} from '@/http/yskApi/goods.js'
+	import {
+		$goodsIsHot
+	} from '@/http/yskApi/goods.js'
 	import mySwitch from '@/components/my-components/my-switch.vue'
 	import go from '@/commons/utils/go.js';
 	import {
 		ColorMain
 	} from '@/commons/color.js'
-	const emits = defineEmits(['radioClick', 'changeClick', 'xiajia','del'])
+	const emits = defineEmits(['radioClick', 'changeClick', 'xiajia', 'del'])
 	const props = defineProps({
 		index: {
 			type: Number
@@ -110,19 +114,19 @@
 		}
 	})
 
-	
-	function isHotChange(e){
+
+	function isHotChange(e) {
 		$goodsIsHot({
-			id:props.data.id,
-			isHot:props.data.isHot
-		}).then(res=>{
+			id: props.data.id,
+			isHot: props.data.isHot
+		}).then(res => {
 			uni.showToast({
-				title:'修改成功',
-				icon:'none'
+				title: '修改成功',
+				icon: 'none'
 			})
 		})
 	}
-	
+
 	let isSellNone = ref(false)
 	isSellNone.value = props.isSellNone
 
@@ -132,8 +136,8 @@
 	}
 
 	let checked = ref(false)
-	
-	
+
+
 	function radioClick() {
 		console.log(props.index);
 		emits('radioClick', props.index)
@@ -146,7 +150,8 @@
 	function xiajia() {
 		emits('xiajia', props.index)
 	}
-	function del(){
+
+	function del() {
 		emits('del', props.index)
 	}
 
@@ -223,7 +228,7 @@
 		.skus {
 			background: #F9F9F9;
 			border-radius: 14rpx 14rpx 14rpx 14rpx;
-			padding: 28rpx 42rpx;
+			padding: 20rpx;
 
 			.sku {
 				color: #000;
@@ -236,12 +241,13 @@
 			}
 
 			.skd {
-				padding: 14rpx 40rpx;
+				padding: 14rpx 40rpx 14rpx 20rpx;
 				background: #F0F2F5;
 				border-radius: 4rpx;
 				position: relative;
 				color: #666;
 				overflow: hidden;
+				margin-bottom: 10rpx;
 
 				.tag {
 					position: absolute;
diff --git a/pageProduct/index/index.vue b/pageProduct/index/index.vue
index 1ae8e60..e55fdba 100644
--- a/pageProduct/index/index.vue
+++ b/pageProduct/index/index.vue
@@ -1,70 +1,63 @@
 <template>
 	<view class="safe-page">
-		<view class="bg-fff u-p-l-30 u-p-t-16 u-p-r-30 u-p-b-30">
-			<view class="myTabs ">
+		<up-sticky>
+			<view class="bg-fff u-p-l-30  u-p-r-30 u-p-b-30">
+				<!-- <view class="myTabs ">
 				<myTabs :list="tabsList" @change="tabsChange"></myTabs>
-			</view>
-			<view class="input-wrapper">
-				<view class="input-main">
-					<uni-easyinput 
-					 clearable 
-					 class='jeepay-search' :inputBorder="false" :placeholder="pageData.search.placeholder"
-						v-model="pageData.query.name" @confirm="searchFunc">
-						<template #prefixIcon>
-							<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
-						</template>
-					</uni-easyinput>
-					<button type="text" @click="searchFunc()">搜索</button>
-				</view>
-			</view>
-			<view class="u-flex u-m-t-20 u-p-l-30 u-p-r-30 u-font-28 u-p-b-20 border-bottom">
-				<view class="u-flex-1 tranistion u-text-center color-333"
-					:class="{'color-main':pageData.stateCurrent==index}" @tap="statesTableClick(index)"
-					v-for="(item,index) in statesTabsList" :key="index">
-					{{item}}
-				</view>
-			</view>
-
-			<view class="u-flex  states1 u-row-between  u-font-28">
-				<view class="u-flex">
-					<view class="u-p-l-16 item u-p-r-16 u-p-t-6 u-p-b-6 tranistion u-text-center color-333"
-						:class="{'active':pageData.stateCurrent1==index}" @tap="states1TableClick(index)"
-						v-for="(item,index) in states1TabsList" :key="index">
-						{{item}}
+			</view> -->
+				<view class="input-wrapper">
+					<view class="input-main">
+						<view class="u-flex u-p-r-30 u-font-28" @click="onCategoryShowChange(true)">
+							<text class="u-m-r-10 u-line-1" style="max-width: 100rpx;">{{pageData.categoryName||'分类' }}</text>
+							<up-icon name="arrow-down" size="16"></up-icon>
+						</view>
+						<uni-easyinput clearable class='jeepay-search' :inputBorder="false"
+							:placeholder="pageData.search.placeholder" v-model="pageData.query.name"
+							@confirm="searchFunc">
+							<template #prefixIcon>
+								<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
+							</template>
+						</uni-easyinput>
+						<button type="text" @click="searchFunc()">搜索</button>
 					</view>
 				</view>
-				<view class="u-flex u-col-center" @click="go.to('PAGES_PRODUCT_SPECIF_TEMPLATE')">
-					<image src="/pageProduct/static/images/icon-guige.svg" class="icon-guige" />
-					<text class="color-666 u-m-l-12 u-font-24">规格模版</text>
+				<view class="u-flex  states1 u-row-between  u-font-28">
+					<view class="u-flex">
+						<view class="u-p-l-16 item u-p-r-16 u-p-t-6 u-p-b-6 tranistion u-text-center color-333"
+							:class="{'active':pageData.stateCurrent==index}" @tap="statesTableClick(index)"
+							v-for="(item,index) in statesTabsList" :key="index">
+							{{item}}
+						</view>
+					</view>
+					<view class="u-flex u-col-center" @click="go.to('PAGES_PRODUCT_SPECIF_TEMPLATE')">
+						<image src="/pageProduct/static/images/icon-guige.svg" class="icon-guige" />
+						<text class="color-666 u-m-l-12 u-font-24">规格模版</text>
+					</view>
 				</view>
+
 			</view>
-
-		</view>
-
-		<view class="goods-list u-p-30" >
+		</up-sticky>
+		<view class="goods-list u-p-30">
 			<template v-if="pageData.goodsList.length">
 				<view class="u-m-b-32" v-for="(item,index) in pageData.goodsList" :key="index">
 					<my-goods @changeClick="goodsChangeClick" @radioClick="goodsRadioClick" :index="index" :data="item"
-					@del="goodsDel"
-						:showChecked="showChecked" :showDetail="pageData.showGoodsDetail"></my-goods>
+						@del="goodsDel" :showChecked="showChecked" :showDetail="pageData.showGoodsDetail"></my-goods>
 				</view>
 			</template>
 			<template v-if="pageData.hasAjax&&!pageData.goodsList.length">
 				<my-img-empty tips="未找到相关商品"></my-img-empty>
 			</template>
-			<my-pagination :totalElements="pageData.totalElements" :size="pageData.query.size" @change="pageChange"></my-pagination>
+			<my-pagination :totalElements="pageData.totalElements" :size="pageData.query.size"
+				@change="pageChange"></my-pagination>
 			<view style="height: 100rpx;"></view>
 		</view>
 
-		<my-control ref="control"
-		:categoryShow="pageData.categoryShow"
-		:categoryName="pageData.categoryName"
-		 @categoryChange="categoryIdChange"
-		 @offShelf="offShelf" @allCheckedChange="allCheckedChange"
+		<my-control ref="control" :categoryShow="pageData.categoryShow" :categoryName="pageData.categoryName"
+			@categoryChange="categoryIdChange" @offShelf="offShelf" @allCheckedChange="allCheckedChange"
 			@controlChange="controlChange" @toggleCategory="toggleCategory"
 			:bottom="pageData.componentBottom"></my-control>
-		<my-category ref="category" 
-		@change="onCategoryShowChange"  @cateClick="cateClick" :bottom="pageData.componentBottom+100"></my-category>
+		<!-- <my-category ref="category" @change="onCategoryShowChange" @cateClick="cateClick"
+			:bottom="pageData.componentBottom+100"></my-category> -->
 		<!-- 下架弹窗 -->
 		<my-model :desc="pageData.modelDesc" ref="model" @confirm="modelConfirm"></my-model>
 		<!-- 商品库存修改弹窗 -->
@@ -80,7 +73,7 @@
 					<view class="u-flex u-m-t-32">
 						<view class="">库存开关:</view>
 						<view class="u-m-l-46 ">
-							<my-switch  v-model="goodsStockData.isStock"></my-switch>
+							<my-switch v-model="goodsStockData.isStock"></my-switch>
 						</view>
 					</view>
 					<!-- <view class="u-flex u-m-t-32">
@@ -101,7 +94,7 @@
 							<my-switch v-model="goodsStockData.isGrounding"></my-switch>
 						</view>
 					</view> -->
-					
+
 					<!-- <view class="u-m-t-24 u-m-t-32" v-if="goodsStockData.isStock">
 						<view class="">数量:</view>
 						<view class="u-m-t-24">
@@ -118,6 +111,9 @@
 				</view>
 			</template>
 		</my-model>
+
+		<!-- 分类 -->
+		<my-category  v-model:isShow="pageData.categoryShow" @confirm="setCategory"></my-category>
 	</view>
 
 </template>
@@ -136,24 +132,21 @@
 		watch
 	} from 'vue';
 	import go from '@/commons/utils/go.js';
-	import myTabs from '@/pageProduct/components/my-tabs.vue'
 	import myGoods from './components/goods.vue'
 	import myControl from './components/control.vue'
 	import myCategory from './components/category.vue'
 	import infoBox from "@/commons/utils/infoBox.js"
-	import myPagination from '@/components/my-components/my-pagination'
-	import myModel from "@/components/my-components/my-model.vue"
-	import myButton from "@/components/my-components/my-button.vue"
-	import mySwitch from "@/components/my-components/my-switch.vue"
 	import {
 		$tbProduct,
 		$upProSort,
-		$updateProduct,$getProductDetail,$delProduct,$updateProductStatus
+		$updateProduct,
+		$getProductDetail,
+		$delProduct,
+		$updateProductStatus
 	} from "@/http/yskApi/goods.js"
 	const pageData = reactive({
 		modelDesc: '是否下架',
 		stateCurrent: 0,
-		stateCurrent1: 0,
 		componentBottom: 45,
 		search: {
 			value: '',
@@ -167,25 +160,29 @@
 		query: {
 			page: 0,
 			size: 10,
-			categoryId:'',
-			name:''
+			categoryId: '',
+			name: ''
 		},
-		category:'',
-		categoryShow:false,
-		categoryName:'',
-		hasAjax:false
+		category: '',
+		categoryShow: false,
+		categoryName: '',
+		hasAjax: false
 	})
-	function onCategoryShowChange(show){
-		console.log(show);
-		pageData.categoryShow=show
-	}
-	function categoryIdChange(categoryId){
-		pageData.query.categoryId=categoryId
+	watch(()=>pageData.query.categoryId,(newval)=>{
 		getGoodsList()
+	})
+	function onCategoryShowChange(show) {
+		console.log(show);
+		pageData.categoryShow = show
 	}
+	function setCategory(category){
+		pageData.query.categoryId = category.id
+		pageData.categoryName = category.name
+	}
+
 	function getGoodsList() {
 		$tbProduct(pageData.query).then(res => {
-			pageData.hasAjax=true
+			pageData.hasAjax = true
 			console.log(res);
 			pageData.goodsList = res.content.map(v => {
 				return {
@@ -203,8 +200,7 @@
 	})
 
 	const tabsList = ['简洁', '详情']
-	const statesTabsList = ['在售中', '已下架']
-	const states1TabsList = ['全部', '已售罄']
+	const statesTabsList = ['全部', '已售罄','在售中', '已下架']
 	const control = ref(null)
 	const model = ref(null)
 	const goodsStockModel = ref(null)
@@ -213,9 +209,9 @@
 		return reactive({
 			sort: 0,
 			isStock: false,
-			isDistribute:false,
-			isPauseSale:false,
-			isGrounding:false,
+			isDistribute: false,
+			isPauseSale: false,
+			isGrounding: false,
 			stockNumber: 0,
 		})
 	}
@@ -234,15 +230,15 @@
 
 	async function goodsStockModelSave() {
 		const item = pageData.goodsList[pageData.selGoodsIndex]
-		const goods =await $getProductDetail(item.id,false)
+		const goods = await $getProductDetail(item.id, false)
 		$updateProduct({
 			...goods,
-			sort:goodsStockData.sort,
-			isStock:goodsStockData.isStock
-		}).then(res=>{
-			item.sort=goodsStockData.sort
-			item.isStock=goodsStockData.isStock
-			item.stockNumber=goodsStockData.stockNumber
+			sort: goodsStockData.sort,
+			isStock: goodsStockData.isStock
+		}).then(res => {
+			item.sort = goodsStockData.sort
+			item.isStock = goodsStockData.isStock
+			item.stockNumber = goodsStockData.stockNumber
 			goodsStockModelCancel()
 		})
 	}
@@ -253,38 +249,34 @@
 	function goodsChangeClick(index) {
 		pageData.selGoodsIndex = index
 		const goods = pageData.goodsList[index]
-		Object.assign(goodsStockData,goods)
+		Object.assign(goodsStockData, goods)
 		goodsStockModel.value.open()
 	}
 	//删除商品
-	function goodsDel(index){
+	function goodsDel(index) {
 		const goods = pageData.goodsList[index]
 		uni.showModal({
 			title: '提示',
 			content: '确认删除该商品',
-			success: function (res) {
+			success: function(res) {
 				if (res.confirm) {
-					$delProduct([goods.id]).then(res=>{
+					$delProduct([goods.id]).then(res => {
 						uni.showToast({
-							title:'删除成功',
-							icon:'none'
+							title: '删除成功',
+							icon: 'none'
 						})
-						pageData.goodsList.splice(index,1) 
+						pageData.goodsList.splice(index, 1)
 					})
-				} else if (res.cancel) {
-				}
+				} else if (res.cancel) {}
 			}
 		});
 	}
 
+
 	function statesTableClick(index) {
 		pageData.stateCurrent = index
 	}
 
-	function states1TableClick(index) {
-		pageData.stateCurrent1 = index
-	}
-
 	let test = ref(false)
 
 	function tabsChange(i) {
@@ -292,7 +284,7 @@
 		pageData.showGoodsDetail = i ? true : false
 	}
 
-	
+
 	//改变商品的选中状态
 	function changeGoodsChecked(checked, index) {
 		if (index !== undefined) {
@@ -379,9 +371,9 @@
 
 	function cateClick(cate) {
 		console.log(cate);
-		pageData.query.categoryId=cate.id
-		pageData.categoryName=cate.name
-		pageData.category=cate
+		pageData.query.categoryId = cate.id
+		pageData.categoryName = cate.name
+		pageData.category = cate
 		getGoodsList()
 	}
 </script>
@@ -491,7 +483,7 @@
 		.item {
 			font-size: 24rpx;
 			color: #666;
-			margin-right: 70rpx;
+			margin-right: 30rpx;
 			background: #F4F4F4;
 			border-radius: 8rpx 8rpx 8rpx 8rpx;
 		}