select_product

src/components/goods-item/goods-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="rounded-xs box-show" @tap.stop="$u.route('/pages/product_details/index', { skuId: goods.id,showShrough:showShrough })">
+  <view class="rounded-xs box-show" @tap.stop="handleDetail(goods)">
    <!-- <u-image  width="100%" height="345rpx" :src="goods.cover" :lazy-load="true"></u-image> -->
     <cu-image :borderTopLeftRadius="24" :borderTopRightRadius="24" width="100%" height="345rpx" :src="`${goods.cover}?x-oss-process=image/resize,h_375,m_lfit`" :lazy-load="true"></cu-image>
     <view class="px-base">
@@ -50,6 +50,10 @@ export default {
     cart:{
       type:Boolean,
       default:false
+    },
+    detail: {
+      type: Boolean | String,
+      default: true
     }
   },
   data() {
@@ -58,6 +62,18 @@ export default {
   methods: {
     onCart(){
       this.$emit('cartClick',this.goods)
+    },
+    handleDetail(goods) {
+      if (this.detail === false) {
+        this.onCart()
+        return;
+      }
+      let url = '/pages/product_details/index'
+      let params = { skuId: goods.id, showShrough: this.showShrough }
+      if (this.detail !== true) {
+        url = this.detail
+      }
+      this.$u.route(url, params)
     }
   },
 };

src/pageB/select_product/index.vue

@@ -21,41 +21,54 @@
       </scroll-view>
       <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
         <view class="page-view">
-          <view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
+					<block v-for="(item, index) in tabbar" :key="index">
-            <view class="item-title">
+						<view class="classSel" :id="'item' + index">
-              <text>{{ item.name }}</text>
+							<view class="class-item"  v-for="(item1, index1) in item.children" :key="index1">
-            </view>
+							<view class="item-title">
-            <view class="item-container">
+								<text>{{ item1.name }}</text>
-              <view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @tap="$u.route('/pageB/select_product/search?category=20')">
+							</view>
-                <image class="item-menu-image" :src="item1.icon" mode=""></image>
+							<!-- 广告位 -->
-                <view class="item-menu-name">{{ item1.name }}</view>
+							<view class="my-20rpx shdow2 h-200rpx" v-if="item1.icon">
-              </view>
+								<image class="w-full h-full rounded-15rpx " :src="item1.icon" mode="aspectFill"></image>
-            </view>
+							</view>
-          </view>
+							<view class="item-container">
-        </view>
+								<view @click="navigateToList(item2.id)" class="thumb-box" v-for="(item2, index2) in item1.children" :key="index2">
+									<image v-if="item2.icon" class="item-menu-image" :src="item2.icon" mode=""></image>
+									<view class="item-menu-name">{{ item2.name }}</view>
+								</view>
+							</view>
+						</view>
+						</view>
+					</block>
+				</view>
       </scroll-view>
     </view>
   </view>
 </template>
 <script>
-import classifyData from './classify.data.js';
 export default {
   data() {
     return {
+      mid: '',
       scrollTop: 0, //tab标题的滚动条位置
       oldScrollTop: 0,
       current: 0, // 预设当前项的值
       menuHeight: 0, // 左边菜单的高度
       menuItemHeight: 0, // 左边菜单item的高度
       itemId: '', // 栏目右边scroll-view用于滚动的id
-      tabbar: classifyData,
+      tabbar: [],
       menuItemPos: [],
       arr: [],
       scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
       timer: null, // 定时器
     };
   },
-  onLoad() {},
+  onLoad(e) {
+    this.mid = e.mid
+    this.$api.get('/v1/product/categories').then(res => {
+      this.tabbar = res
+    })
+  },
   onReady() {
     this.getMenuItemTop();
   },
@@ -176,6 +189,9 @@ export default {
         }
       }, 10);
     },
+    navigateToList(cid) {
+      this.$u.route('/pageB/select_product/search', { mid: this.mid, cid: cid })
+    }
   },
 };
 </script>

src/pageB/select_product/search.vue

@@ -41,12 +41,12 @@
         <u-waterfall v-model="dataList" ref="uWaterfall">
           <template v-slot:left="{ leftList }">
             <view v-for="(item, index) in leftList" :key="index" class="px-rowSm mb-base">
-              <goods-item :goods="item" cart @cartClick="cartClick"></goods-item>
+              <goods-item :goods="item" :detail="false" cart @cartClick="cartClick"></goods-item>
             </view>
           </template>
           <template v-slot:right="{ rightList }">
             <view v-for="(item, index) in rightList" :key="index" class="px-rowSm mb-base">
-              <goods-item :goods="item" cart @cartClick="cartClick"></goods-item>
+              <goods-item :goods="item" :detail="false" cart @cartClick="cartClick"></goods-item>
             </view>
           </template>
         </u-waterfall>
@@ -58,7 +58,7 @@
       :key="productId"
       :loading="loading"
       :specs="specs"
-      :sku="detail"
+      :sku="sku"
       v-model="show"
       :quota-used="number"
       :show-cart="popupType == 1 || popupType == 0"
@@ -66,6 +66,7 @@
       :show-confirm="popupType == 3"
       @add-cart="onAddCart"
       @stepper-change="onChangeNumber"
+      @sku-selected="handleSkuSelect"
     >
     </spec-popup>
 
@@ -84,10 +85,12 @@ export default {
   mixins: [MescrollMixin],
   data() {
     return {
+      mid: '',// 店铺 id
+      category: '',// 分类 id
+      searchText: '',// 搜索关键字
+      sku: {},// 当前选择的sku
       key: 0,
       sort: '', //price 价格，sales 销量，release_at 上架时间。示例：price 按价格升序，-price 按价格降序
-      searchText: '',
-      category: '',
       loading: false,
       popupType: 1,
       number: 1,
@@ -111,17 +114,15 @@ export default {
     specs() {
       return this.products?.spu_specs ?? [];
     },
-    detail() {
-      return this.products?.sku ?? {};
-    },
     height() {
       const { windowHeight, statusBarHeight } = this.$u.sys();
       return windowHeight - statusBarHeight - 44 + 'px';
     },
   },
-  onLoad({ searchText, category }) {
+  onLoad(e) {
-    this.searchText = searchText;
+    this.searchText = e.keywords;
-    this.category = category;
+    this.category = e.cid;
+    this.mid = e.mid;
   },
   methods: {
     Change(e) {
@@ -154,6 +155,7 @@ export default {
         const resData = await this.$api.get(`/v1/product/products/${this.productId}`);
         this.products = resData;
         this.skuId = this.products?.sku.id;
+        this.sku = this.products?.sku
       } catch (error) {
         console.log(error);
       } finally {
@@ -169,17 +171,15 @@ export default {
       this.loadData(page);
     },
     loadData(page) {
-      let obj = {
+      let params = {
         page: page.num,
         per_page: page.size,
         category: this.category,
         keyword: this.searchText,
         sort: this.sort,
       };
-      this.$api
+      let url = this.mid ? `/v1/store/${this.mid}/product-spus` : `/v1/product/products`
-        .get(`/v1/product/products`, {
+      this.$api.get(url, { params })
-          params: obj,
-        })
         .then((res) => {
           this.mescroll.endSuccess(res.data.length);
           if (page.num == 1) this.dataList = [];
@@ -215,6 +215,12 @@ export default {
         this.key++;
       });
     },
+    // 选择sku, 更新价格
+    handleSkuSelect(e) {
+      this.$api.get(`/v1/store/${this.mid}/product-sku/${e.sku_id}`).then(res => {
+        this.sku = res
+      })
+    }
   },
 };
 </script>

src/pageB/select_store/index.vue

@@ -5,7 +5,7 @@
       线上预约店
     </view>
     <view class="my-20rpx px-20rpx">
-      <image @click="$u.route('/pageB/select_product/index', { id: 0 })" mode="widtFix" class="w-full h-250rpx rounded-15rpx" src="/static/images/user/u=2313295534,3451005153&fm=253&fmt=auto&app=138&f=JPEG.webp"></image>
+      <image mode="widtFix" class="w-full h-250rpx rounded-15rpx" src="/static/images/user/u=2313295534,3451005153&fm=253&fmt=auto&app=138&f=JPEG.webp"></image>
     </view>
     <view class="my-20rpx px-20rpx">
       <u-line></u-line>
@@ -16,7 +16,7 @@
     <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
       <view class="grid grid-cols-2 gap-x-80rpx pt-20rpx px-80rpx">
         <view
-          @click="$u.route('/pageB/select_product/index', { id: item.id })"
+          @click="$u.route('/pageB/select_product/index', { mid: item.id })"
           class="flex items-center justify-center flex-col mt-40rpx text-30rpx font-extrabold"
           v-for="(item, index) in dataList"
           :key="index"