From 6a40be57fb60d9bb4b1f718784abb81abdc4a1d2 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Sat, 11 May 2024 09:52:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=86=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E4=B8=89=E7=BA=A7=E5=88=86=E7=B1=BB=E5=88=86=E5=88=AB=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2,=20=E4=BC=98=E5=8C=96=E5=93=8D=E5=BA=94=E9=80=9F?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue | 1481 +++++++++++++++++++++--------------------
 1 file changed, 758 insertions(+), 723 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 7e0eb0d..89e1309 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,816 +1,851 @@
 <template>
-	<view class="content">
-		<up-navbar placeholder style="z-index: 10080;">
-			<template #left>
-				<view style="font-size: 30rpx;font-weight: bold;" @click="test">惠农批发 </view>
-			</template>
-		</up-navbar>
-		<view class="navbar">
-			<view style="width: 500rpx;">
-				<up-search placeholder="请输入商品" @search="searchKeyword" @clear="searchKeyword" v-model="keyword"
-					:showAction="false"></up-search>
-			</view>
-			<view class="nav-item" @click="navTo('/pages/cart/cart')">
-				<image src="@/static/tab/ba.png"></image>
-				<text>购物车</text>
-			</view>
-			<view class="nav-item" @click="navTo('/pages/my/my')">
-				<image src="@/static/tab/ca.png"></image>
-				<text>个人中心</text>
-			</view>
-		</view>
-		<view class='headScoll' ref='headscroll' :style="{height:isScroll?'0':'200rpx'}">
-			<scroll-view class="head-view" scroll-x>
-				<view class="list">
-					<view class="item" :class="{'item-active': topActive===item.id}"
-						v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
-						<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
-						<view class="c-text u-line-1">{{item.name}}</view>
-					</view>
-					<view class="item" style="width: 80rpx;height: 20rpx;">
-					</view>
-				</view>
-			</scroll-view>
-			<view class="r-btn" @click="show=1">
-				<view>全</view>
-				<view>部</view>
-				<up-icon name="list"></up-icon>
-			</view>
-		</view>
-		<viewPopup nav v-if="show===1" @close="show=0">
-			<view class="cateOne">
-				<view class="head-title">全部分类</view>
-				<scroll-view scroll-y style="height: 600rpx;">
-					<view class="list">
-						<view class="item" :class="{'item-active': topActive===item.id}"
-							v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
-							<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image>
-							</view>
-							<view class="c-text u-line-1">{{item.name}}</view>
-						</view>
-					</view>
-				</scroll-view>
-			</view>
-		</viewPopup>
-		<view class="scroll-box">
-			<scroll-view class="left" scroll-y>
-				<view class="item u-line-1" :class="{'item-active': leftActive===item.id}"
-					v-for="(item, index) in goodClassTow" :key="index" @click="changeTwo(item, index)">{{item.name}}
-				</view>
-				<view style="width: 100%;height: 450rpx;"></view>
-			</scroll-view>
-			<view class="right">
-				<view class="classify">
-					<scroll-view style="height: 90rpx;" scroll-x>
-						<view class="classify-list">
-							<view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
-								v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
-								{{item.name}}
-							</view>
-							<view style="width: 70rpx;flex-shrink: 0;"></view>
-						</view>
-					</scroll-view>
-					<view class="done" @click="show=2">
-						<up-icon name="arrow-down"></up-icon>
-					</view>
-					<view class="order-by">
-						<view class="item" :class="{'order-active': where.order==''}" @click="changeOrder('')">综合</view>
-						<view class="item" :class="{'order-active': where.order=='desc'||where.order=='asc'}"
-							@click="changeOrder(where.order=='asc'?'desc':'asc')">价格</view>
-						<view class="item" :class="{'order-active': where.order=='sales'}"
-							@click="changeOrder('sales')">销量</view>
-					</view>
-				</view>
-				<viewPopup v-if="show===2" @close="show=0">
-					<view class="cateOne">
-						<scroll-view scroll-y style="height: 230rpx;">
-							<view class="classify-list">
-								<view class="classify-list-item u-line-1"
-									:class="{'item-active': rightActive===item.id}"
-									v-for="(item, index) in goodClassThree" :key="index"
-									@click="changeThree(item, index)">
-									{{item.name}}
-								</view>
-							</view>
-						</scroll-view>
-					</view>
-				</viewPopup>
-				<scroll-view class="list" id='drag_area' style="overscroll-behavior: none;" @scroll="hideHeadView"
-					scroll-y @scrolltolower="loadMoreGood">
-					<view class="shop-item" v-for="(item, index) in goodList" :key="item.id"
-						@click="openGoodPopup(item)">
-						<view class="shop-img">
-							<up-image width="120rpx" height="120rpx" :src="item.imgs"></up-image>
-						</view>
-						<view class="shop-content">
-							<view class="title">
-								<view class="name u-line-2">{{item.name}}</view>
-								<view class="tip u-line-1">
-									<text>{{item.brand_name}}|</text>
-									<text>{{item.class_name}}|</text>
-									<text>{{item.unit_name}}</text>
-								</view>
-							</view>
-							<view class="price-btn">
-								<view class="price">￥{{item.sell}}</view>
-								<view class="btn">
-									<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
-								</view>
-							</view>
-						</view>
-					</view>
-					<view style="width: 100%;height: 350rpx;"></view>
-				</scroll-view>
-			</view>
-		</view>
-		<view class="fiexd-btn-box">
-			<view class="price-info">
-				<view class="row">
-					<view>合计</view>
-					<view class="price">¥<text style="font-size: 36rpx;">{{cartInfo.total_price}}</text></view>
-				</view>
-				<!-- <view class="row">
+  <view class="content">
+    <up-navbar placeholder style="z-index: 10080;">
+      <template #left>
+        <view style="font-size: 30rpx;font-weight: bold;" @click="test">惠农批发 </view>
+      </template>
+    </up-navbar>
+    <view class="navbar">
+      <view style="width: 500rpx;">
+        <up-search placeholder="请输入商品" @search="searchKeyword" @clear="searchKeyword" v-model="keyword"
+          :showAction="false"></up-search>
+      </view>
+      <view class="nav-item" @click="navTo('/pages/cart/cart')">
+        <image src="@/static/tab/ba.png"></image>
+        <text>购物车</text>
+      </view>
+      <view class="nav-item" @click="navTo('/pages/my/my')">
+        <image src="@/static/tab/ca.png"></image>
+        <text>个人中心</text>
+      </view>
+    </view>
+    <view class='headScoll' ref='headscroll' :style="{height:isScroll?'0':'200rpx'}">
+      <scroll-view class="head-view" scroll-x>
+        <view class="list">
+          <view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
+            :key="index" @click="changeOne(item, index)">
+            <view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
+            <view class="c-text u-line-1">{{item.name}}</view>
+          </view>
+          <view class="item" style="width: 80rpx;height: 20rpx;">
+          </view>
+        </view>
+      </scroll-view>
+      <view class="r-btn" @click="show=1">
+        <view>全</view>
+        <view>部</view>
+        <up-icon name="list"></up-icon>
+      </view>
+    </view>
+    <viewPopup nav v-if="show===1" @close="show=0">
+      <view class="cateOne">
+        <view class="head-title">全部分类</view>
+        <scroll-view scroll-y style="height: 600rpx;">
+          <view class="list">
+            <view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
+              :key="index" @click="changeOne(item, index)">
+              <view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image>
+              </view>
+              <view class="c-text u-line-1">{{item.name}}</view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </viewPopup>
+    <view class="scroll-box">
+      <scroll-view class="left" scroll-y>
+        <view class="item u-line-1" :class="{'item-active': leftActive===item.id}" v-for="(item, index) in goodClassTow"
+          :key="index" @click="changeTwo(item, index)">{{item.name}}
+        </view>
+        <view style="width: 100%;height: 450rpx;"></view>
+      </scroll-view>
+      <view class="right">
+        <view class="classify">
+          <scroll-view style="height: 90rpx;" scroll-x>
+            <view class="classify-list">
+              <view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
+                v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
+                {{item.name}}
+              </view>
+              <view style="width: 70rpx;flex-shrink: 0;"></view>
+            </view>
+          </scroll-view>
+          <view class="done" @click="show=2">
+            <up-icon name="arrow-down"></up-icon>
+          </view>
+          <view class="order-by">
+            <view class="item" :class="{'order-active': where.order==''}" @click="changeOrder('')">综合</view>
+            <view class="item" :class="{'order-active': where.order=='desc'||where.order=='asc'}"
+              @click="changeOrder(where.order=='asc'?'desc':'asc')">价格</view>
+            <view class="item" :class="{'order-active': where.order=='sales'}" @click="changeOrder('sales')">销量</view>
+          </view>
+        </view>
+        <viewPopup v-if="show===2" @close="show=0">
+          <view class="cateOne">
+            <scroll-view scroll-y style="height: 230rpx;">
+              <view class="classify-list">
+                <view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
+                  v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
+                  {{item.name}}
+                </view>
+              </view>
+            </scroll-view>
+          </view>
+        </viewPopup>
+        <scroll-view class="list" id='drag_area' style="overscroll-behavior: none;" @scroll="hideHeadView" scroll-y
+          @scrolltolower="loadMoreGood">
+          <view class="shop-item" v-for="(item, index) in goodList" :key="item.id" @click="openGoodPopup(item)">
+            <view class="shop-img">
+              <up-image width="120rpx" height="120rpx" :src="item.imgs"></up-image>
+            </view>
+            <view class="shop-content">
+              <view class="title">
+                <view class="name u-line-2">{{item.name}}</view>
+                <view class="tip u-line-1">
+                  <text>{{item.brand_name}}|</text>
+                  <text>{{item.class_name}}|</text>
+                  <text>{{item.unit_name}}</text>
+                </view>
+              </view>
+              <view class="price-btn">
+                <view class="price">￥{{item.sell}}</view>
+                <view class="btn">
+                  <u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view style="width: 100%;height: 350rpx;"></view>
+        </scroll-view>
+      </view>
+    </view>
+    <view class="fiexd-btn-box">
+      <view class="price-info">
+        <view class="row">
+          <view>合计</view>
+          <view class="price">¥<text style="font-size: 36rpx;">{{cartInfo.total_price}}</text></view>
+        </view>
+        <!-- <view class="row">
           <view style="color: #777;">原价 ¥50.00</view>
           <view class="price">优惠 ¥0.00</view>
         </view> -->
-			</view>
-			<view class="btn">
-				<up-button color="#20b128" :disabled="cartInfo.count==0" @click="settleAccounts">结算</up-button>
-			</view>
-			<view class="cart" @click="navTo('/pages/cart/cart')">
-				<image src="@/static/icon/cart.png"></image>
-				<view class="badge">{{cartInfo.count}}</view>
-			</view>
-		</view>
+      </view>
+      <view class="btn">
+        <up-button color="#20b128" :disabled="cartInfo.count==0" @click="settleAccounts">结算</up-button>
+      </view>
+      <view class="cart" @click="navTo('/pages/cart/cart')">
+        <image src="@/static/icon/cart.png"></image>
+        <view class="badge">{{cartInfo.count}}</view>
+      </view>
+    </view>
 
-		<goodPopup ref="goodRef" :show="showGoodPopup" @close="showGoodPopup=false" @change="changeGood" />
-	</view>
+    <goodPopup ref="goodRef" :show="showGoodPopup" @close="showGoodPopup=false" @change="changeGood" />
+  </view>
 </template>
 
 <script setup>
-	import {
-		onLoad,
-		onShow
-	} from "@dcloudio/uni-app"
-	import {
-		reactive,
-		ref,
-		onMounted
-	} from "vue"
-	import {
-		goodListApi,
-		goodClassListApi
-	} from "@/api/good.js"
-	import {
-		cartCreateApi,
-		cartChangeApi,
-		cartListApi
-	} from "@/api/cart.js"
-	import viewPopup from "@/components/viewPopup.vue"
-	import goodPopup from "@/components/goodPopup.vue"
-	import useCartStore from "@/store/cart.js"
-	import {
-		getCurrentInstance
-	} from 'vue';
+  import {
+    onLoad,
+    onShow
+  } from "@dcloudio/uni-app"
+  import {
+    reactive,
+    ref,
+    onMounted
+  } from "vue"
+  import {
+    goodListApi,
+    goodClassListApi
+  } from "@/api/good.js"
+  import {
+    cartCreateApi,
+    cartChangeApi,
+    cartListApi
+  } from "@/api/cart.js"
+  import viewPopup from "@/components/viewPopup.vue"
+  import goodPopup from "@/components/goodPopup.vue"
+  import useCartStore from "@/store/cart.js"
+  import {
+    getCurrentInstance
+  } from 'vue';
 
 
 
-	const test = () => {
-		uni.navigateTo({
-			url: '/pageQuota/quotation/index'
-		})
-	}
+  const test = () => {
+    uni.navigateTo({
+      url: '/pageQuota/quotation/index'
+    })
+  }
 
 
 
 
 
-	/*商品列表滚动隐藏头部导航 */
-	const instance = getCurrentInstance(); // 获取组件实例
-	const targetHeight = ref(0)
-	const isScroll = ref(false)
-	let lastScollTop = 0
-	const hideHeadView = (e) => {
-		if (e.detail.scrollTop <= 0 || e.detail.scrollTop >= targetHeight.value) return
-		isScroll.value = e.detail.scrollTop > lastScollTop
-		lastScollTop = e.detail.scrollTop
+  /*商品列表滚动隐藏头部导航 */
+  const instance = getCurrentInstance(); // 获取组件实例
+  const targetHeight = ref(0)
+  const isScroll = ref(false)
+  let lastScollTop = 0
+  const hideHeadView = (e) => {
+    if (e.detail.scrollTop <= 0 || e.detail.scrollTop >= targetHeight.value) return
+    isScroll.value = e.detail.scrollTop > lastScollTop
+    lastScollTop = e.detail.scrollTop
 
-	}
-	/*商品列表滚动隐藏头部导航结束 */
+  }
+  /*商品列表滚动隐藏头部导航结束 */
 
-	const cartStore = useCartStore();
-	const show = ref(0);
-	const topActive = ref(0);
-	const changeOne = (item, index) => {
-		console.log('选择', item, index);
-		topActive.value = item.id;
-		show.value = 0;
-		goodClassTow.value = item?.children || [];
-		goodClassThree.value = goodClassTow.value[0]?.children || [];
-		leftActive.value = goodClassTow.value[0]?.id || '';
-		rightActive.value = goodClassThree.value[0]?.id || '';
-		getGoodList();
-	}
+  const cartStore = useCartStore();
+  const show = ref(0);
+  const topActive = ref(0);
+  const changeOne = async (item, index) => {
+    console.log('选择', item, index);
+    topActive.value = item.id;
+    show.value = 0;
+    goodClassTow.value = item?.children || [];
+    goodClassThree.value = goodClassTow.value[0]?.children || [];
+    leftActive.value = goodClassTow.value[0]?.id || '';
+    rightActive.value = goodClassThree.value[0]?.id || '';
+    getGoodList();
+    if(!item.isLoading) getgoodClassList(topActive.value); // 判断是否加载过数据, 加载过则不进行加载,节约资源
+  }
 
-	const leftActive = ref(0);
-	const changeTwo = (item, index) => {
-		console.log('选择', item, index);
-		leftActive.value = item.id;
-		show.value = 0;
-		goodClassThree.value = item?.children || [];
-		rightActive.value = goodClassThree.value[0]?.id || '';
-		getGoodList();
-	}
+  const leftActive = ref(0);
+  const changeTwo = (item, index) => {
+    console.log('选择', item, index);
+    leftActive.value = item.id;
+    show.value = 0;
+    goodClassThree.value = item?.children || [];
+    rightActive.value = goodClassThree.value[0]?.id || '';
+    getGoodList();
+    if(!item.isLoading) getgoodClassList(leftActive.value); // 判断是否加载过数据, 加载过则不进行加载,节约资源
+  }
 
-	const rightActive = ref(0);
-	const changeThree = (item, index) => {
-		console.log('选择', item, index);
-		rightActive.value = item.id;
-		show.value = 0;
-		getGoodList();
-	}
+  const rightActive = ref(0);
+  const changeThree = (item, index) => {
+    console.log('选择', item, index);
+    rightActive.value = item.id;
+    show.value = 0;
+    getGoodList();
+  }
 
-	const addCart = (id, cart_num) => { //加入购物车
-		cartCreateApi({
-			cart_num: cart_num,
-			is_new: 0, // 是否直接购买0否1是
-			goods_id: id
-		}).then(res => {
-			getCartList();
-		}).catch(err => {
-			console.log(err);
-			uni.$u.toast('添加失败')
-		})
-	}
+  const addCart = (id, cart_num) => { //加入购物车
+    cartCreateApi({
+      cart_num: cart_num,
+      is_new: 0, // 是否直接购买0否1是
+      goods_id: id
+    }).then(res => {
+      getCartList();
+    }).catch(err => {
+      console.log(err);
+      uni.$u.toast('添加失败')
+    })
+  }
 
-	const keyword = ref('');
+  const keyword = ref('');
 
-	const searchKeyword = () => {
-		where.value.name = keyword.value;
-		getGoodList();
-	}
+  const searchKeyword = () => {
+    where.value.name = keyword.value;
+    getGoodList();
+  }
 
-	const changeOrder = (order) => {
-		console.log('排序', order);
-		where.value.order = order;
-		getGoodList();
-	}
+  const changeOrder = (order) => {
+    console.log('排序', order);
+    where.value.order = order;
+    getGoodList();
+  }
 
-	const where = ref({
-		page_no: 1,
-		page_size: 25,
-		name: '',
-		order: ''
-	})
-	const loading = ref(true);
-	const goodList = ref([]);
-	const getGoodList = (loadmore = false) => {
-		loading.value = true;
-		let class_id = rightActive.value || leftActive.value || topActive.value || '';
-		let class_all = '';
-		// 若分类没有选中时,则直接查询上一级分类
-		if (rightActive.value == '') class_all = leftActive.value;
-		if (leftActive.value == '') class_all = topActive.value;
-		if (topActive.value == '') class_all = '';
-		if (class_all) class_id = ""; //只能带其中一个
-		if (loadmore) where.value.page_no++;
-		else where.value.page_no = 1;
-		goodListApi({
-			...where.value,
-			class_all: class_all,
-			class: class_id
-		}).then(res => {
-			if (loadmore) goodList.value.push(...res.data.lists);
-			else goodList.value = res.data.lists;
-		})
-	}
+  const where = ref({
+    page_no: 1,
+    page_size: 25,
+    name: '',
+    order: ''
+  })
+  const loading = ref(true);
+  const goodList = ref([]);
+  const getGoodList = (loadmore = false) => {
+    loading.value = true;
+    let class_id = rightActive.value || leftActive.value || topActive.value || '';
+    let class_all = '';
+    // 若分类没有选中时,则直接查询上一级分类
+    if (rightActive.value == '') class_all = leftActive.value;
+    if (leftActive.value == '') class_all = topActive.value;
+    if (topActive.value == '') class_all = '';
+    if (class_all) class_id = ""; //只能带其中一个
+    if (loadmore) where.value.page_no++;
+    else where.value.page_no = 1;
+    goodListApi({
+      ...where.value,
+      class_all: class_all,
+      class: class_id
+    }).then(res => {
+      if (loadmore) goodList.value.push(...res.data.lists);
+      else goodList.value = res.data.lists;
+    })
+  }
 
-	// 商品列表触底
-	const loadMoreGood = () => {
-		console.log('触底了');
-		getGoodList(true);
-	}
+  // 商品列表触底
+  const loadMoreGood = () => {
+    console.log('触底了');
+    getGoodList(true);
+  }
 
-	const goodClassList = ref([]); // 一级分类
-	const goodClassTow = ref([]); // 二级分类
-	const goodClassThree = ref([]); // 三级分类
-	const getgoodClassList = () => {
-		goodClassListApi({
-			page_size: 1000
-		}).then(res => {
-			res.data?.lists?.unshift({
-				id: "",
-				name: "全部",
-				pic: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png",
-				children: []
-			})
-			res.data.lists = res.data.lists.map(item => {
-				if (!item.children) item.children = [];
-				item.children?.unshift({
-					id: "",
-					pid: item.id,
-					name: "全部",
-				})
-				item.children = item.children.map(t => {
-					if (!t.children) t.children = [];
-					t.children?.unshift({
-						id: "",
-						pid: t.id,
-						name: "全部",
-					})
-					return t;
-				})
-				return item;
-			})
-			goodClassList.value = res.data?.lists || [];
-			goodClassTow.value = goodClassList.value[0]?.children || [];
-			goodClassThree.value = goodClassTow.value[0]?.children || [];
-			topActive.value = goodClassList.value[0]?.id;
-			leftActive.value = goodClassTow.value[0]?.id;
-			rightActive.value = goodClassThree.value[0]?.id;
-		})
-	}
+  const goodClassList = ref([]); // 一级分类
+  const goodClassTow = ref([]); // 二级分类
+  const goodClassThree = ref([]); // 三级分类
+  const getgoodClassList = (pid = 0) => {
+    goodClassListApi({
+      pid: pid,
+      page_size: 10000
+    }).then(res => {
+      if (pid == 0) { // 加载一级分类时设置全部分类
+        res.data?.lists?.unshift({
+          id: "",
+          name: "全部",
+          pic: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png",
+          children: []
+        })
+        res.data.lists = res.data.lists.map(item => {
+          if (!item.children) item.children = [];
+          item.children?.unshift({
+            id: "",
+            pid: item.id, //子分类的全部选项其实就是它本身
+            name: "全部",
+          })
+          item.children = item.children.map(t => {
+            if (!t.children) t.children = [];
+            t.children?.unshift({
+              id: "",
+              pid: t.id,
+              name: "全部",
+            })
+            return t;
+          })
+          return item;
+        })
+        // 给所有子级分配
+        goodClassList.value = res.data?.lists || [];
+        goodClassTow.value = goodClassList.value[0]?.children || [];
+        goodClassThree.value = goodClassTow.value[0]?.children || [];
+        topActive.value = goodClassList.value[0]?.id;
+        leftActive.value = goodClassTow.value[0]?.id;
+        rightActive.value = goodClassThree.value[0]?.id;
+      } else {
+        let flag = 1;
+        goodClassList.value.forEach(item => { // 给相应的一级分类添加子菜单
+          if (item.id == pid) {
+            if (!item.children) {
+              item.children = [];
+              item.children.unshift({
+                id: "",
+                pid: item.id,
+                name: "全部",
+              })
+            }
+            item.children = [...item.children, ...res.data.lists];
+            item.isLoading = true;
+            goodClassTow.value = item.children;
+            flag = 0;
+          }
+        })
+        if (flag) goodClassTow.value.forEach(item => { //给响应的二级子分类添加菜单
+          if (item.id == pid) {
+            if (!item.children) {
+              item.children = [];
+              item.children.unshift({
+                id: "",
+                pid: item.id, 
+                name: "全部",
+              })
+            }
+            item.children = [...item.children, ...res.data.lists];
+            item.isLoading = true;
+            goodClassThree.value = item.children;
+          }
+        })
+      }
+    })
+  }
 
-	const navTo = (url) => {
-		uni.navigateTo({
-			url: url
-		})
-	}
+  const navTo = (url) => {
+    uni.navigateTo({
+      url: url
+    })
+  }
 
-	// 选择商品相关
-	const showGoodPopup = ref(false);
-	const goodRef = ref(null);
-	const goodData = ref({});
-	const openGoodPopup = (item) => { // 打开数量/重量弹窗
-		goodData.value = item;
-		goodRef.value.setData(item);
-		showGoodPopup.value = true;
-	};
-	const changeGood = (data) => { // 确定选择商品重量
-		showGoodPopup.value = false;
-		addCart(data.id, data.cart_num);
-	}
-	// 结算
-	const settleAccounts = () => {
-		uni.navigateTo({
-			url: '/pagesOrder/settle/settle'
-		})
-	}
+  // 选择商品相关
+  const showGoodPopup = ref(false);
+  const goodRef = ref(null);
+  const goodData = ref({});
+  const openGoodPopup = (item) => { // 打开数量/重量弹窗
+    goodData.value = item;
+    goodRef.value.setData(item);
+    showGoodPopup.value = true;
+  };
+  const changeGood = (data) => { // 确定选择商品重量
+    showGoodPopup.value = false;
+    addCart(data.id, data.cart_num);
+  }
+  // 结算
+  const settleAccounts = () => {
+    uni.navigateTo({
+      url: '/pagesOrder/settle/settle'
+    })
+  }
 
-	// 购物车相关
-	const cartInfo = ref({
-		total_price: '0.00',
-		count: 0
-	})
-	const getCartList = (res) => {
-		cartListApi({
-			page_no: 1,
-			page_size: 100,
-		}).then(res => {
-			cartInfo.value = {
-				total_price: res.data?.extend?.total_price || '0.00',
-				count: res.data?.count || 0
-			}
-			cartStore.setCartList(res.data?.lists.map(item => item.cart_id))
-		})
-	}
+  // 购物车相关
+  const cartInfo = ref({
+    total_price: '0.00',
+    count: 0
+  })
+  const getCartList = (res) => {
+    cartListApi({
+      page_no: 1,
+      page_size: 100,
+    }).then(res => {
+      cartInfo.value = {
+        total_price: res.data?.extend?.total_price || '0.00',
+        count: res.data?.count || 0
+      }
+      cartStore.setCartList(res.data?.lists.map(item => item.cart_id))
+    })
+  }
 
-	onLoad(() => {
-		getgoodClassList();
-		getGoodList();
+  onLoad(() => {
+    getgoodClassList();
+    getGoodList();
 
-	})
-	onShow(() => {
-		getCartList();
-	})
-	onMounted(() => {
-		const instance = getCurrentInstance(); // 获取组件实例
-		const getWXDom = () => {
-			let query = uni.createSelectorQuery().in(instance).select("#drag_area");
-			query
-				.fields({
-						size: true,
-						scrollOffset: true,
-					},
-					(data) => {
-						targetHeight.value = data.scrollHeight - data.height
-					}
-				)
-				.exec();
-		}
-		setTimeout(() => {
-			getWXDom()
-		}, 500)
+  })
+  onShow(() => {
+    getCartList();
+  })
+  onMounted(() => {
+    const instance = getCurrentInstance(); // 获取组件实例
+    const getWXDom = () => {
+      let query = uni.createSelectorQuery().in(instance).select("#drag_area");
+      query
+        .fields({
+            size: true,
+            scrollOffset: true,
+          },
+          (data) => {
+            targetHeight.value = data.scrollHeight - data.height
+          }
+        )
+        .exec();
+    }
+    setTimeout(() => {
+      getWXDom()
+    }, 500)
 
-	})
+  })
 </script>
 
 <style lang="scss">
-	.content {
-		background-color: #fff;
-	}
+  .content {
+    background-color: #fff;
+  }
 
-	.navbar {
-		padding: 0 20rpx;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		font-size: 22rpx;
-		color: #777;
+  .navbar {
+    padding: 0 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 22rpx;
+    color: #777;
 
-		.nav-item {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
+    .nav-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
 
-			image {
-				height: 40rpx;
-				width: 40rpx;
-			}
-		}
-	}
+      image {
+        height: 40rpx;
+        width: 40rpx;
+      }
+    }
+  }
 
-	.head-view {
-		background-color: #fff;
-		height: 180rpx;
-		width: 750rpx;
+  .head-view {
+    background-color: #fff;
+    height: 180rpx;
+    width: 750rpx;
 
-		.list {
-			height: 100%;
-			display: flex;
-			align-items: center;
-			padding: 0 20rpx;
-			font-size: 22rpx;
+    .list {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 20rpx;
+      font-size: 22rpx;
 
-			.item {
-				width: 120rpx;
-				flex-shrink: 0;
-				margin-right: 20rpx;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
+      .item {
+        width: 120rpx;
+        flex-shrink: 0;
+        margin-right: 20rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
-				.c-img {
-					height: 100rpx;
-					width: 100rpx;
-					flex-shrink: 0;
-					border-radius: 50%;
-					border: 2px solid transparent;
-					overflow: hidden;
-				}
+        .c-img {
+          height: 100rpx;
+          width: 100rpx;
+          flex-shrink: 0;
+          border-radius: 50%;
+          border: 2px solid transparent;
+          overflow: hidden;
+        }
 
-				.c-text {
-					width: 100%;
-					text-align: center;
-					box-sizing: border-box;
-					padding: 2rpx 4rpx 3rpx 4rpx;
-					border-radius: 50rpx;
-					margin-top: 5rpx;
-				}
-			}
+        .c-text {
+          width: 100%;
+          text-align: center;
+          box-sizing: border-box;
+          padding: 2rpx 4rpx 3rpx 4rpx;
+          border-radius: 50rpx;
+          margin-top: 5rpx;
+        }
+      }
 
-			.item-active {
-				.c-img {
-					border: 2px solid #20b128;
-				}
+      .item-active {
+        .c-img {
+          border: 2px solid #20b128;
+        }
 
-				.c-text {
-					background-color: #20b128;
-					color: #fff;
-				}
-			}
-		}
-	}
+        .c-text {
+          background-color: #20b128;
+          color: #fff;
+        }
+      }
+    }
+  }
 
-	.r-btn {
-		position: absolute;
-		right: 0;
-		top: 0;
-		height: 100%;
-		width: 60rpx;
-		font-size: 24rpx;
-		background-color: #fff;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		box-shadow: -10rpx 0 60rpx 1rpx rgba(0, 0, 0, 0.3);
-	}
+  .r-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 60rpx;
+    font-size: 24rpx;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-shadow: -10rpx 0 60rpx 1rpx rgba(0, 0, 0, 0.3);
+  }
 
-	.cateOne {
-		background-color: #fff;
+  .cateOne {
+    background-color: #fff;
 
-		.head-title {
-			color: #666666;
-			font-size: 30rpx;
-			height: 80rpx;
-			line-height: 80rpx;
-			padding-left: 30rpx;
-		}
+    .head-title {
+      color: #666666;
+      font-size: 30rpx;
+      height: 80rpx;
+      line-height: 80rpx;
+      padding-left: 30rpx;
+    }
 
-		.list {
-			padding: 20rpx 20rpx;
-			font-size: 22rpx;
-			display: grid;
-			grid-template-columns: repeat(5, 1fr);
-			justify-content: center;
-			grid-gap: 20rpx;
+    .list {
+      padding: 20rpx 20rpx;
+      font-size: 22rpx;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      justify-content: center;
+      grid-gap: 20rpx;
 
 
-			.item {
-				width: 120rpx;
-				margin: 0 auto;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
+      .item {
+        width: 120rpx;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
-				.c-img {
-					height: 100rpx;
-					width: 100rpx;
-					flex-shrink: 0;
-					border-radius: 50%;
-					border: 2px solid transparent;
-					overflow: hidden;
-				}
+        .c-img {
+          height: 100rpx;
+          width: 100rpx;
+          flex-shrink: 0;
+          border-radius: 50%;
+          border: 2px solid transparent;
+          overflow: hidden;
+        }
 
-				.c-text {
-					width: 100%;
-					text-align: center;
-					box-sizing: border-box;
-					padding: 2rpx 4rpx 3rpx 4rpx;
-					border-radius: 50rpx;
-					margin-top: 5rpx;
-				}
-			}
+        .c-text {
+          width: 100%;
+          text-align: center;
+          box-sizing: border-box;
+          padding: 2rpx 4rpx 3rpx 4rpx;
+          border-radius: 50rpx;
+          margin-top: 5rpx;
+        }
+      }
 
-			.item-active {
-				.c-img {
-					border: 2px solid #20b128;
-				}
+      .item-active {
+        .c-img {
+          border: 2px solid #20b128;
+        }
 
-				.c-text {
-					background-color: #20b128;
-					color: #fff;
-				}
-			}
-		}
+        .c-text {
+          background-color: #20b128;
+          color: #fff;
+        }
+      }
+    }
 
-		.classify-list {
-			padding: 20rpx 30rpx;
-			font-size: 22rpx;
-			display: grid;
-			grid-template-columns: repeat(3, 1fr);
-			justify-content: center;
-			grid-gap: 20rpx;
+    .classify-list {
+      padding: 20rpx 30rpx;
+      font-size: 22rpx;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      justify-content: center;
+      grid-gap: 20rpx;
 
-			.classify-list-item {
-				flex-shrink: 0;
-				text-align: center;
-				width: 150rpx;
-				height: 42rpx;
-				line-height: 42rpx;
-				background: #F6F6F6;
-				border-radius: 22rpx 22rpx 22rpx 22rpx;
-				border: 1rpx solid transparent;
-			}
+      .classify-list-item {
+        flex-shrink: 0;
+        text-align: center;
+        width: 150rpx;
+        height: 42rpx;
+        line-height: 42rpx;
+        background: #F6F6F6;
+        border-radius: 22rpx 22rpx 22rpx 22rpx;
+        border: 1rpx solid transparent;
+      }
 
-			.item-active {
-				border: 1rpx solid #20b128;
-				color: #20b128;
-				background-color: rgba(#20b128, 0.1);
-			}
-		}
-	}
+      .item-active {
+        border: 1rpx solid #20b128;
+        color: #20b128;
+        background-color: rgba(#20b128, 0.1);
+      }
+    }
+  }
 
-	.scroll-box {
-		// background-color: red;
-		display: flex;
+  .scroll-box {
+    // background-color: red;
+    display: flex;
 
-		.left {
-			height: calc(100vh - var(--window-top) - var(--window-bottom) - 300rpx);
-			/* #ifdef H5 */
-			height: calc(100vh - 44px - 100rpx);
-			/* #endif */
-			width: 170rpx;
-			box-sizing: border-box;
-			background-color: #f6f6f6;
-			font-size: 24rpx;
+    .left {
+      height: calc(100vh - var(--window-top) - var(--window-bottom) - 300rpx);
+      /* #ifdef H5 */
+      height: calc(100vh - 44px - 100rpx);
+      /* #endif */
+      width: 170rpx;
+      box-sizing: border-box;
+      background-color: #f6f6f6;
+      font-size: 24rpx;
 
-			.item {
-				height: 96rpx;
-				line-height: 96rpx;
-				text-align: center;
-			}
+      .item {
+        height: 96rpx;
+        line-height: 96rpx;
+        text-align: center;
+      }
 
-			.item-active {
-				background-color: #fff;
-				position: relative;
-				color: #20b128;
+      .item-active {
+        background-color: #fff;
+        position: relative;
+        color: #20b128;
 
-				&::before {
-					content: '';
-					background-color: #20b128;
-					width: 6rpx;
-					height: 48rpx;
-					border-radius: 10rpx;
-					position: absolute;
-					left: 0;
-					top: 50%;
-					transform: translate(0, -50%);
-				}
-			}
-		}
+        &::before {
+          content: '';
+          background-color: #20b128;
+          width: 6rpx;
+          height: 48rpx;
+          border-radius: 10rpx;
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translate(0, -50%);
+        }
+      }
+    }
 
-		.right {
-			height: calc(100vh - var(--window-top) - 300rpx);
-			/* #ifdef H5 */
-			height: calc(100vh - 96px + 20rpx);
-			/* #endif */
-			width: 580rpx;
-			box-sizing: border-box;
-			position: relative;
-			overflow: hidden;
+    .right {
+      height: calc(100vh - var(--window-top) - 300rpx);
+      /* #ifdef H5 */
+      height: calc(100vh - 96px + 20rpx);
+      /* #endif */
+      width: 580rpx;
+      box-sizing: border-box;
+      position: relative;
+      overflow: hidden;
 
-			.classify {
-				height: 150rpx;
-				background-color: #fff;
-				border-bottom: 1rpx solid #f6f6f6;
-				position: relative;
-				font-size: 24rpx;
+      .classify {
+        height: 150rpx;
+        background-color: #fff;
+        border-bottom: 1rpx solid #f6f6f6;
+        position: relative;
+        font-size: 24rpx;
 
-				.classify-list {
-					display: flex;
-					padding: 20rpx;
+        .classify-list {
+          display: flex;
+          padding: 20rpx;
 
-					.classify-list-item {
-						flex-shrink: 0;
-						text-align: center;
-						width: 108rpx;
-						height: 42rpx;
-						line-height: 42rpx;
-						background: #F6F6F6;
-						border-radius: 22rpx 22rpx 22rpx 22rpx;
-						margin-right: 20rpx;
-						border: 1rpx solid transparent;
-					}
+          .classify-list-item {
+            flex-shrink: 0;
+            text-align: center;
+            width: 108rpx;
+            height: 42rpx;
+            line-height: 42rpx;
+            background: #F6F6F6;
+            border-radius: 22rpx 22rpx 22rpx 22rpx;
+            margin-right: 20rpx;
+            border: 1rpx solid transparent;
+          }
 
-					.item-active {
-						border: 1rpx solid #20b128;
-						color: #20b128;
-						background-color: rgba(#20b128, 0.1);
-					}
-				}
+          .item-active {
+            border: 1rpx solid #20b128;
+            color: #20b128;
+            background-color: rgba(#20b128, 0.1);
+          }
+        }
 
-				.done {
-					height: 90rpx;
-					width: 60rpx;
-					position: absolute;
-					top: 0;
-					right: 0;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					background-color: #fff;
-				}
+        .done {
+          height: 90rpx;
+          width: 60rpx;
+          position: absolute;
+          top: 0;
+          right: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: #fff;
+        }
 
-				.order-by {
-					display: flex;
-					justify-content: flex-end;
-					align-items: center;
+        .order-by {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
 
-					.item {
-						padding-right: 20rpx;
-					}
+          .item {
+            padding-right: 20rpx;
+          }
 
-					.order-active {
-						color: #20b128;
-					}
-				}
-			}
+          .order-active {
+            color: #20b128;
+          }
+        }
+      }
 
-			.list {
-				height: calc(100vh - var(--window-top) - 400rpx);
-				/* #ifdef H5 */
-				height: calc(100vh - 44px - 200rpx);
+      .list {
+        height: calc(100vh - var(--window-top) - 400rpx);
+        /* #ifdef H5 */
+        height: calc(100vh - 44px - 200rpx);
 
-				/* #endif */
-				.shop-item {
-					padding: 20rpx;
-					border-bottom: 1rpx solid #f6f6f6;
-					background-color: #fff;
-					display: flex;
+        /* #endif */
+        .shop-item {
+          padding: 20rpx;
+          border-bottom: 1rpx solid #f6f6f6;
+          background-color: #fff;
+          display: flex;
 
-					.shop-img {
-						height: 120rpx;
-						width: 120rpx;
-						margin-right: 20rpx;
-						border-radius: 14rpx;
-						overflow: hidden;
-					}
+          .shop-img {
+            height: 120rpx;
+            width: 120rpx;
+            margin-right: 20rpx;
+            border-radius: 14rpx;
+            overflow: hidden;
+          }
 
-					.shop-content {
-						width: 380rpx;
-						display: flex;
-						flex-direction: column;
-						justify-content: space-between;
+          .shop-content {
+            width: 380rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
 
-						.title {
-							.name {
-								font-size: 28rpx;
-							}
+            .title {
+              .name {
+                font-size: 28rpx;
+              }
 
-							.tip {
-								color: #999;
-								font-size: 24rpx;
-								margin: 2rpx 0;
-							}
-						}
+              .tip {
+                color: #999;
+                font-size: 24rpx;
+                margin: 2rpx 0;
+              }
+            }
 
-						.price {
-							font-size: 30rpx;
-							font-weight: bold;
-							color: #F55726;
-						}
+            .price {
+              font-size: 30rpx;
+              font-weight: bold;
+              color: #F55726;
+            }
 
-						.price-btn {
-							display: flex;
-							justify-content: space-between;
+            .price-btn {
+              display: flex;
+              justify-content: space-between;
 
-							.btn {
-								display: flex;
-								align-items: center;
+              .btn {
+                display: flex;
+                align-items: center;
 
-								.num {
-									width: 60rpx;
-									text-align: center;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	}
+                .num {
+                  width: 60rpx;
+                  text-align: center;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 
-	.fiexd-btn-box {
-		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-		height: 140rpx;
-		height: calc(constant(safe-area-inset-bottom) + 140rpx);
-		/* 适用于iOS设备 */
-		height: calc(env(safe-area-inset-bottom) + 140rpx);
-		/* 适用于Android设备 */
-		padding-top: 40rpx;
+  .fiexd-btn-box {
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    height: 140rpx;
+    height: calc(constant(safe-area-inset-bottom) + 140rpx);
+    /* 适用于iOS设备 */
+    height: calc(env(safe-area-inset-bottom) + 140rpx);
+    /* 适用于Android设备 */
+    padding-top: 40rpx;
 
-		.price-info {
-			.row {
-				display: flex;
-				font-size: 26rpx;
-				align-items: center;
+    .price-info {
+      .row {
+        display: flex;
+        font-size: 26rpx;
+        align-items: center;
 
-				&>view {
-					margin-right: 15rpx;
-				}
+        &>view {
+          margin-right: 15rpx;
+        }
 
-				.price {
-					color: #F55726;
-				}
-			}
-		}
+        .price {
+          color: #F55726;
+        }
+      }
+    }
 
-		.btn {
-			width: 200rpx;
-		}
+    .btn {
+      width: 200rpx;
+    }
 
-		.cart {
-			position: absolute;
-			top: -40rpx;
-			left: 40rpx;
+    .cart {
+      position: absolute;
+      top: -40rpx;
+      left: 40rpx;
 
-			image {
-				width: 80rpx;
-				height: 80rpx;
-			}
+      image {
+        width: 80rpx;
+        height: 80rpx;
+      }
 
-			.badge {
-				position: absolute;
-				top: 0;
-				right: 0;
-				background-color: #F55726;
-				color: #fff;
-				border-radius: 50%;
-				width: 26rpx;
-				height: 26rpx;
-				text-align: center;
-				line-height: 26rpx;
-				font-size: 18rpx;
-			}
-		}
-	}
+      .badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        background-color: #F55726;
+        color: #fff;
+        border-radius: 50%;
+        width: 26rpx;
+        height: 26rpx;
+        text-align: center;
+        line-height: 26rpx;
+        font-size: 18rpx;
+      }
+    }
+  }
 
-	.headScoll {
-		position: relative;
-		overflow: hidden;
-		transition: 400ms;
-	}
+  .headScoll {
+    position: relative;
+    overflow: hidden;
+    transition: 400ms;
+  }
 </style>
\ No newline at end of file