feat : 对接商城首页接口

api/shop.js

@@ -6,5 +6,5 @@ export const apiArr = {
   getCarCount:"/api/v2/wechat/commodity/cart/all_count",//购物车数量
   addCar:"/api/v2/wechat/commodity/cart/add",//添加购物车
   deleteCar:"/api/v2/wechat/commodity/cart/delete",//删除购物车
-  updateCar:"/api/v2/wechat/commodity/cart/update",
+  updateCar:"/api/v2/wechat/commodity/cart/update",//更新购物车
 }

packages/shop/index/index.vue

@@ -3,22 +3,34 @@
     <!-- 顶部展开后的阴影 -->
     <div class="boxshadow" v-if="topShow"></div>
     <div class="header" :class="topShow ? 'op0' : ''">
-			<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
+      <div
+        class="searchBox"
+        :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
+      >
         <div class="searchBox_left">
           <!-- <u-icon name="arrow-left" size="20px" color="#000"></u-icon> -->
         </div>
         <div class="searchBox_ipt" @click="searchPage">
           <image
             src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
-						mode="aspectFill"></image>
+            mode="aspectFill"
-					<input disabled type="text" placeholder="输入商品名称">
+          ></image>
+          <input disabled type="text" placeholder="输入商品名称" />
         </div>
       </div>
       <div class="slide">
         <div class="slide_con">
-					<div v-for="(item, index) in CateList" :key="index" class="slide_conBox">
+          <div
+            v-for="(item, index) in CateList"
+            :key="index"
+            class="slide_conBox"
+            @click="changeCate(item.id)"
+          >
             <view class="slide_item">
-							<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
+              <image
+                :src="picUrl + item.category_pic"
+                mode="aspectFill"
+              ></image>
               <text>{{ item.category_name }}</text>
             </view>
           </div>
@@ -26,32 +38,44 @@
 
         <div class="open" @click="topOpen" v-if="!topShow">
           展 开
-					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
+          <image
-						mode="aspectFill"></image>
+            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
+            mode="aspectFill"
+          ></image>
         </div>
       </div>
-
     </div>
 
     <!-- 整体展开的顶部 -->
     <div class="header header2" v-if="topShow">
-			<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
+      <div
+        class="searchBox"
+        :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
+      >
         <div class="searchBox_left">
           <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
         </div>
         <div class="searchBox_ipt">
           <image
             src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
-						mode="aspectFill"></image>
+            mode="aspectFill"
-					<input type="text" placeholder="输入商品名称">
+          ></image>
+          <input type="text" placeholder="输入商品名称" />
         </div>
       </div>
 
       <div class="slide">
         <div class="slide_con">
-					<div v-for="(item, index) in CateList" :key="index" class="slide_conBox">
+          <div
+            v-for="(item, index) in CateList"
+            :key="index"
+            class="slide_conBox"
+          >
             <view class="slide_item">
-							<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
+              <image
+                :src="picUrl + item.category_pic"
+                mode="aspectFill"
+              ></image>
               <text>{{ item.category_name }}</text>
             </view>
           </div>
@@ -63,10 +87,14 @@
       </div>
     </div>
 
-
     <div class="Con">
       <div class="Con_left">
-				<div class="CateItem" v-for="item in leftCateList" :key="item.id" @click="changeLeftCate(item.id)">
+        <div
+          class="CateItem"
+          v-for="item in leftCateList"
+          :key="item.id"
+          @click="changeLeftCate(item.id)"
+        >
           <!-- <image v-if="false" class="hot"
 						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_hot.png"
 						mode="aspectFill">
@@ -80,10 +108,15 @@
       <div class="Con_right">
         <div class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
           <div class="CateList" ref="cateListRef">
-						<div class="CateList_Item" v-for="(item, index) in tagList" :key="item.id"
+            <div
-							:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">{{ item.tag_name }}
+              class="CateList_Item"
+              v-for="(item, index) in tagList"
+              :key="item.id"
+              :class="index == rightTopActive ? 'CateList_Item_active' : ''"
+              @click="checkItem(index)"
+            >
+              {{ item.tag_name }}
             </div>
-
           </div>
           <div class="more" @click="changeCateListShow">
             <u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
@@ -92,8 +125,14 @@
         </div>
         <!-- 右下展开的内容 -->
         <div class="activeCateList" v-if="cateListShow">
-					<div class="CateList_Item" v-for="(item, index) in tagList" :key="index"
+          <div
-						:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">{{ item.tag_name }}
+            class="CateList_Item"
+            v-for="(item, index) in tagList"
+            :key="index"
+            :class="index == rightTopActive ? 'CateList_Item_active' : ''"
+            @click="checkItem(index)"
+          >
+            {{ item.tag_name }}
           </div>
         </div>
         <!-- 右下阴影 -->
@@ -103,27 +142,51 @@
           <div class="CateInfo_tit">
             {{ item.tag_name }}
           </div>
-					<div class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id">
+          <div
+            class="CateInfo_Item"
+            v-for="items in item.commodity_info_list"
+            :key="items.id"
+          >
             <div class="CateInfo_Item_Box">
               <div class="CateInfo_Item_left" @click="goods(items.id)">
                 <image
                   :src="picUrl + items.commodity_pic"
-									mode="aspectFill"></image>
+                  mode="aspectFill"
+                ></image>
               </div>
               <div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
-								<div class="CateInfo_Item_right_Tit" @click="goods(items.id)">{{items.commodity_name}}</div>
+                <div class="CateInfo_Item_right_Tit" @click="goods(items.id)">
-								<div class="CateInfo_Item_right_subtit" @click="goods(items.id)">{{items.commodity_intro}}</div>
+                  {{ items.commodity_name }}
+                </div>
+                <div
+                  class="CateInfo_Item_right_subtit"
+                  @click="goods(items.id)"
+                >
+                  {{ items.commodity_intro }}
+                </div>
                 <div class="CateInfo_Item_Money">
                   <div class="CateInfo_Item_Money_left">
-										<span>￥</span>{{ items.commodity_goods_info_list[0].sales_price }}
+                    <span>￥</span
+                    >{{ items.commodity_goods_info_list[0].sales_price }}
                   </div>
-									<div class="CateInfo_Item_Money_right">
+                  <div
-										<u-number-box v-model="value">
+                    class="CateInfo_Item_Money_right"
+                    v-if="!(items.commodity_goods_info_list.length > 1)"
+                  >
+                    <u-number-box
+                      :min="0"
+                      v-model="items.quantity"
+                      @change="handleQuantityChange(items)"
+                    >
                       <view slot="minus" class="minus">
                         <u-icon name="minus" size="20"></u-icon>
                       </view>
-											<text slot="input" style="width: 50px;text-align: center;" class="input">{{
+                      <text
-												value }}</text>
+                        slot="input"
+                        style="width: 50px; text-align: center"
+                        class="input"
+                        >{{ items.quantity ? items.quantity : 0 }}</text
+                      >
                       <view slot="plus" class="plus">
                         <u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
                       </view>
@@ -131,40 +194,73 @@
                   </div>
                 </div>
 
-								<div class="gg" @click="chooseGG(items)" v-if="items.commodity_goods_info_list.length > 1 && !items.isShow">
+                <div
-									选择规格 <u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
+                  class="gg"
+                  @click="chooseGG(items)"
+                  v-if="
+                    items.commodity_goods_info_list.length > 1 && !items.isShow
+                  "
+                >
+                  选择规格
+                  <u-icon
+                    name="arrow-down"
+                    size="26rpx"
+                    color="#FF370B"
+                  ></u-icon>
                 </div>
 
-								<div class="gg" @click="chooseGG(items)" v-if="items.commodity_goods_info_list.length > 1 && items.isShow">
+                <div
-									收起 <u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
+                  class="gg"
+                  @click="chooseGG(items)"
+                  v-if="
+                    items.commodity_goods_info_list.length > 1 && items.isShow
+                  "
+                >
+                  收起
+                  <u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
                 </div>
-
               </div>
             </div>
 
             <div class="GGList" v-if="items.isShow">
-							<div class="GGItem" v-for="ite in items.commodity_goods_info_list" @click="goods(items.id)">
+              <div
+                class="GGItem"
+                v-for="ite in items.commodity_goods_info_list"
+                @click="goods(items.id)"
+              >
                 <div class="GGItem_Image">
                   <image
                     :src="picUrl + ite.commodity_pic"
-										mode="aspectFill"></image>
+                    mode="aspectFill"
+                  ></image>
                 </div>
                 <div class="GGItem_Con">
-									<div class="GGItem_Con_Tit">{{ite.goods_name}}</div>
+                  <div class="GGItem_Con_Tit">{{ ite.goods_name }}</div>
                   <div class="GGItem_Con_Msg">
                     <div class="GGItem_Con_Msg_left">
                       <span>￥</span>{{ ite.sales_price }}
                     </div>
                     <div class="GGItem_Con_Msg_right">
-											<u-number-box v-model="value">
+                      <u-number-box
+                        v-model="ite.quantity"
+                        :min="0"
+                        @change="handleQuantityChange(ite)"
+                      >
                         <view slot="minus" class="minus">
                           <u-icon name="minus" size="20"></u-icon>
                         </view>
-												<text slot="input" style="width: 50px;text-align: center;"
+                        <text
-													class="input">{{
+                          slot="input"
-														value }}</text>
+                          style="width: 50px; text-align: center"
+                          class="input"
+                          >{{ ite.quantity ? ite.quantity : 0 }}</text
+                        >
                         <view slot="plus" class="plus">
-													<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
+                          <u-icon
+                            name="plus"
+                            color="#FFFFFF"
+                            size="20"
+                          ></u-icon>
                         </view>
                       </u-number-box>
                     </div>
@@ -174,7 +270,6 @@
             </div>
           </div>
 
-
           <!-- 按钮 -->
           <!-- <div class="btn">
 						查看全部商品
@@ -183,36 +278,31 @@
 						</div>
 					</div> -->
         </div>
-
-
       </div>
     </div>
 
     <nav-footer :current="2" />
 
     <div class="shop_car" @click="shopCar">
-			<u-badge numberType="limit" type="error" max="99" :value="carNum"></u-badge>
+      <u-badge
-			<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"></image>
+        numberType="limit"
+        type="error"
+        max="99"
+        :value="carNum"
+      ></u-badge>
+      <image
+        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"
+      ></image>
       <!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_empty.png"></image> -->
     </div>
-
   </div>
 </template>
 
 <script>
-import {
+import { apiArr } from "../../../api/shop";
-	apiArr
+import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
-} from '../../../api/shop';
-import {
-	picUrl,
-	menuButtonInfo,
-	request,
-	NavgateTo
-} from '../../../utils';
 export default {
-
   data() {
-
     return {
       picUrl,
       flag: false,
@@ -222,47 +312,46 @@ export default {
       value: "1",
       cateListShow: false,
       iconList: [
-
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
-					name: "休闲零食"
+          name: "休闲零食",
         },
 
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
-					name: "肉蛋果蔬"
+          name: "肉蛋果蔬",
         },
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
-					name: "酒水饮料"
+          name: "酒水饮料",
         },
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
-					name: "家具电器"
+          name: "家具电器",
         },
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
-					name: "电脑手机"
+          name: "电脑手机",
         },
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
-					name: "休闲零食"
+          name: "休闲零食",
         },
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
-					name: "肉蛋果蔬"
+          name: "肉蛋果蔬",
         },
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
-					name: "酒水饮料"
+          name: "酒水饮料",
         },
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
-					name: "家具电器"
+          name: "家具电器",
         },
         {
           icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
-					name: "电脑手机"
+          name: "电脑手机",
         },
       ],
 
@@ -270,99 +359,142 @@ export default {
       topShow: false,
 
       GGshow: false,
-			CateList:[],//分类列表
+      CateList: [], //分类列表
-			currentFirstId:"",
+      currentFirstId: "",
-			leftCateList:[], //底部左侧分类
+      leftCateList: [], //底部左侧分类
-			currentSecondId:"",
+      currentSecondId: "",
-			rightCateList:[], //底部右侧分类
+      rightCateList: [], //底部右侧分类
-			currentThirdId:"",
+      currentThirdId: "",
 
-			tagList:[],
+      tagList: [],
-			carNum:"",
+      carNum: "",
-		}
+    };
   },
   methods: {
+    changeCate(id) {
+      // 根据id查找对应的分类
+      const category = this.CateList.find((item) => item.id === id);
+      if (category) {
+        // 将leftCateList设置为该分类的二级分类，若为null则设为空数组
+        this.leftCateList = category.level_two_category || [];
+        this.secondId = this.leftCateList[0]?.id;
+        this.getGoodsList();
+      }
+    },
     //顶部分类点击
     changeCateListShow() {
-			this.cateListShow = !this.cateListShow
+      this.cateListShow = !this.cateListShow;
     },
     //选择右下角分类
     checkItem(index) {
-			this.rightTopActive = index
+      this.rightTopActive = index;
     },
     //右下角点击更多
     topOpen() {
-			this.topShow = !this.topShow
+      this.topShow = !this.topShow;
     },
     // 选择商品规格
     chooseGG(e) {
-			e.isShow = !e.isShow
+      e.isShow = !e.isShow;
     },
     //搜索页
     searchPage() {
-			NavgateTo('../search/index')
+      NavgateTo("../search/index");
     },
     //商品详情页
     goods(e) {
-			NavgateTo(`../goods/index?id=${e}`)
+      NavgateTo(`../goods/index?id=${e}`);
     },
 
     // 购物车
-		shopCar(){
+    shopCar() {
-			NavgateTo("../shopCar/index")
+      NavgateTo("../shopCar/index");
     },
     //分类列表
-		getCateList(){
+    getCateList() {
-			request(apiArr.goodsCateList,"POST",{}).then(res=>{
+      request(apiArr.goodsCateList, "POST", {}).then((res) => {
         console.log(res);
-				this.CateList = res.commodity_category_list
+        this.CateList = res.commodity_category_list;
-				this.firstId = res.commodity_category_list[0].id
+        this.firstId = res.commodity_category_list[0].id;
-				this.leftCateList = res.commodity_category_list[0].level_two_category
+        this.leftCateList = res.commodity_category_list[0].level_two_category;
-				this.secondId = res.commodity_category_list[0].level_two_category[0].id
+        this.secondId = res.commodity_category_list[0].level_two_category[0].id;
-				this.getGoodsList()
+        this.getGoodsList();
-			})
-		},
-
-		getGoodsList(){
-			request(apiArr.getGoodsList,'POST',{
-				user_id:"",
-				id:this.secondId
-			}).then(res=>{
-				res.commodity_list.forEach(item => {
-					item.commodity_info_list.forEach(item=>{
-						item.isShow = false
-					})
       });
-				this.tagList = res.commodity_list
-			})
     },
 
-		getShopCarList(){
+    getGoodsList() {
-			request(apiArr.getCar,"POST",).then(res=>{
+      if (!this.secondId) {
+        this.tagList = [];
+        return;
+      }
+      request(apiArr.getGoodsList, "POST", {
+        user_id: uni.getStorageSync("userId"),
+        id: this.secondId,
+      }).then((res) => {
+        res.commodity_list.forEach((item) => {
+          item.commodity_info_list.forEach((item) => {
+            item.isShow = false;
+          });
+        });
+        this.tagList = res.commodity_list;
+      });
+    },
+
+    getShopCarList() {
+      request(apiArr.getCar, "POST").then((res) => {
         console.log(res);
-				this.carNum = res.total
+        this.carNum = res.total;
-			})
+      });
     },
 
-		changeLeftCate(e){
+    changeLeftCate(e) {
-			this.secondId = e
+      this.secondId = e;
-			this.getGoodsList()
+      this.getGoodsList();
+    },
+    //商品数量变化
+    handleQuantityChange(item) {
+      console.log("🚀 ~ handleQuantityChange ~ value:", item);
+      const goodsId = "";
+      if (item.commodity_goods_info_list.length) {
+        this.goodsId = item.commodity_goods_info_list[0].id;
+      } else {
+        this.goodsId = item.id;
+      }
+      const params = {
+        user_id: uni.getStorageSync("userId"),
+        goods_id_and_count: [
+          {
+            goods_id: this.goodsId,
+            count: item.quantity ? item.quantity + 1 : 1,
+          },
+        ],
+      };
+      console.log("🚀 ~ handleQuantityChange ~ params:", params);
+      request(apiArr.updateCar, "POST", params).then((res) => {
+        console.log(res);
+        uni.showToast({
+          title: "操作成功！",
+          success() {
+            // setTimeout(() => {
+            // 	that.getBanlance()
+            // }, 1500)
+          },
+        });
+      });
     },
-
   },
   onLoad(options) {
     const meun = menuButtonInfo();
     this.top = meun.top;
     this.localHeight = meun.height;
-		this.getCateList()
+    this.getCateList();
-		this.getShopCarList()
+    this.getShopCarList();
   },
   onReachBottom() {
     if (this.flag) {
-
     }
   },
-}
+};
 </script>
 
 <style>