对接规格查询库存价格

src/api/product.js

@@ -25,3 +25,16 @@ export function productqueryCommodityInfo(params) {
         params
     });
 }
+
+/**
+ * 通过选中的商品规格查询价格
+ * @param {*} params 
+ * @returns 
+ */
+export function queryProductSku(params) {
+    return request({
+        method: "get",
+        url: "product/queryProductSku",
+        params
+    });
+}

src/components/skuModal.vue

@@ -4,13 +4,16 @@
         <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
             <div class="title">{{ item.name }}</div>
             <div class="sku_wrap">
-                <div class="item" :class="{ active: val.selected }" v-for="(val, i) in  item.value" :key="i"
-                    @click="selectedSku(index, i)">{{ val }}</div>
+                <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
+                    @click="selectedSku(index, i)">{{ val.name }}</div>
             </div>
         </div>
+        <div class="info">
+            <span>库存：{{  }}</span>
+        </div>
         <div class="footer">
             <div class="btn">
-                <el-button plain style="width: 100%;" @click="show = false">取消</el-button>
+                <el-button plain style="width: 100%;" @click="dialogVisible = false">取消</el-button>
             </div>
             <div class="btn">
                 <el-button type="primary" style="width: 100%;">确认</el-button>
@@ -21,26 +24,80 @@
 
 <script setup>
 import { ref, defineExpose } from 'vue'
+import { useUser } from "@/store/user.js"
+const store = useUser();
+
+import { queryProductSku } from '@/api/product'
+
 const dialogVisible = ref(false)
 const goods = ref({})
 
+const selectedSkuNum = ref(0)
+const selectedSkuTag = ref('')
+
+
+
 // 选择规格
 function selectedSku(index, i) {
-    goods.value.tbProductSpec.specList[index].value[i].selected = true
+    goods.value.tbProductSpec.specList[index].value.map(item => {
+        item.active = false
+    })
+    if (goods.value.tbProductSpec.specList[index].value[i].active) {
+        goods.value.tbProductSpec.specList[index].value[i].active = false
+        selectedSkuNum.value--
+    } else {
+        goods.value.tbProductSpec.specList[index].value[i].active = true
+        selectedSkuNum.value++
+    }
 
-    console.log(goods.value.tbProductSpec.specList[index].val[i])
+    let num = 0
+    let tag = []
+    goods.value.tbProductSpec.specList.map(item => {
+        item.value.map(val => {
+            if (val.active) {
+                num++
+                tag.push(val.name)
+            }
+        })
+        selectedSkuNum.value = num
+        selectedSkuTag.value = tag.join(',')
+    })
+
+    if (selectedSkuNum.value >= goods.value.tbProductSpec.specList.length) {
+        console.log('规格选完了');
+        queryProductSkuAjax()
+    }
+}
+
+// 通过选中的商品规格查询价格
+async function queryProductSkuAjax() {
+    try {
+        const res = await queryProductSku({
+            shopId: store.userInfo.shopId,
+            productId: goods.value.id,
+            spec_tag: selectedSkuTag.value
+        })
+    } catch (error) {
+        console.log(error)
+    }
 }
 
 // 显示规格
 function show(item) {
+    selectedSkuNum.value = 0
     dialogVisible.value = true
     goods.value = item
     goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
     goods.value.tbProductSpec.specList.map(item => {
-        item.selected = false
+        let arr = []
+        item.value.map(val => {
+            arr.push({
+                active: false,
+                name: val
+            })
+        })
+        item.value = arr
     })
-
-    console.log(goods.value)
 }
 
 defineExpose({
@@ -78,12 +135,6 @@ defineExpose({
                 background-color: var(--primary-color);
                 color: #fff;
             }
-
-            &:hover {
-                cursor: pointer;
-                background-color: var(--primary-color);
-                color: #fff;
-            }
         }
     }
 }

src/views/home/components/goods.vue

@@ -61,7 +61,7 @@ const goodsList = ref([])
 // 显示sku
 function showSkuHandle(item) {
     if (item.typeEnum == 'sku') {
-        skuModalRef.value.show(item)
+        skuModalRef.value.show({ ...item })
     } else {
 
     }