更新skus

src/app.vue

@@ -165,7 +165,6 @@ const toggleMap = () => {
 const onClickTagInfo = (el) => {
   el.stopPropagation();
   let item = tags.value.find((item) => item.sid == el.target.dataset.id);
-  console.log(item);
   if (item.type == "commodity") {
     store.commit("tag/setTagClickType", {
       type: "goodlist",
@@ -193,7 +192,6 @@ onMounted(async () => {
   app
     .use("TagView", {
       render(data) {
-        console.log(data, data.type);
         if (data.type == "waterfall") {
           let arr = data.products.map(item=>item.price)
           let range = `${data.products[0].symbol} ${Math.min.apply(null,arr)} - ${Math.max.apply(null,arr)}`
@@ -232,7 +230,6 @@ onMounted(async () => {
       },
     })
     .then((view) => {
-      console.log(view, "viewviewviewviewviewviewviewview");
       view.on("click", (e) => {
         var tag = e.data;
         // 聚焦当前点击的热点
@@ -415,13 +412,12 @@ onMounted(async () => {
     position: absolute;
     left: 50%;
     bottom: 50px;
-
     transform: translateX(-50%) scale(0);
     transform-origin: bottom;
     transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
     // pointer-events: none;
     .tag-commodity {
-      width: 230px;
+      min-width: 230px;
       height: 76px;
       background: rgba(255, 255, 255, 0.8);
       box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
@@ -458,15 +454,17 @@ onMounted(async () => {
         pointer-events: none;
       }
       .tag-title {
-        padding: 10px 0 10px 76px;
-        width: 200px;
+        padding: 10px 10px 10px 76px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       .tag-info {
-        padding: 0 0 0 76px;
+        padding: 0 20px 0 76px;
         font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
     &.show {

src/components/Controls/Panel/Main.vue

@@ -223,7 +223,6 @@ const onClickCategory = (item) => {
 };
 
 const onClickShop = (item) => {
-  console.log('item',item);
   window.location.href = "".concat(window.location.pathname, "?").concat(`m=${item.sceneUrl}&novideo=1`);
 };
 

src/components/Tags/goods-list.vue

@@ -14,13 +14,27 @@
             <div :style="{ backgroundImage: `url(${i.pic})` }" class="img"></div>
             <div class="info">
               <p>{{ i.name }}</p>
-              <div>
-                <span>¥</span><span>{{ i.price }}</span>
+              <div v-if="i.skus">
+                <span>¥</span><span>{{ i.currentSku.price }}</span>
               </div>
               <ul>
-                <li v-for="(item, index) in 3" :key="index">
-                  <span>型號：</span>
-                  <span>340271</span>
+                <li>
+                  <span>规格：</span>
+                  <ul>
+                    <li @click.stop="onClickSku(item)" :class="{active:item.id == i.currentSku.id}" v-for="(item,idx) in i.skus" :key="idx">
+                      <span v-if="item.properties[0]">
+                        {{item.properties[0].value}}
+                      </span>
+                    </li>
+                  </ul>
+                </li>
+                  <li>
+                  <span>数量：</span>
+                  <div class="number">
+                    <ui-icon @click="()=>{i.cartnum--;i.cartnum = Math.max(i.cartnum,0)}" type="cad-neiqiang"></ui-icon>
+                    <input maxlength="5" v-model="i.cartnum" type="number">
+                    <ui-icon @click="()=>{i.cartnum++;i.cartnum = Math.min(i.cartnum, 9999)}" type="add"></ui-icon>
+                  </div>
                 </li>
               </ul>
             </div>
@@ -36,7 +50,7 @@
 </template>
 
 <script setup>
-import { onMounted, watch, computed, defineEmits, ref, defineProps, nextTick } from "vue";
+import { onMounted, watch,toRaw, computed, defineEmits, ref, defineProps, nextTick } from "vue";
 import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 import * as apis from "@/apis/index.js";
@@ -55,14 +69,28 @@ const viewDetail = (item)=>{
     // wx.miniProgram.navigateTo({url: `/pages/shared/shared?img_url=${encodeURIComponent(uploadRes.data.url)}&companyId=${this.serve.info.companyId}&shareImg=${encodeURIComponent(this.serve.info.shareWxQrCode)}&vrLink=${encodeURIComponent(`${window.location.origin}${location.pathname}?m=${this.$config.projectNum}`)}`})
 }
 
+const onClickSku = (item)=>{
+  let tempData = toRaw(tagclick.value.data)
+
+  tempData.products[current.value] = {
+    ...tempData.products[current.value],
+    currentSku:{...item}
+  }
+
+
+  store.commit("tag/setTagClickType", {
+    type: tagclick.value.type,
+    data: tempData,
+  });
+}
 
 const addCart = async (item)=>{
   Loading.show()
 
   await apis.inCat({
     accessToken:'',
-    skuId:'',
-    num: 1
+    skuId:item.currentSku.id,
+    num: item.cartnum
   })
   Loading.hide()
 }
@@ -71,15 +99,39 @@ const addCart = async (item)=>{
 const updateProductsById = async (idx) => {
   Loading.show()
   let res = await apis.get_product_info({
-    productId: tagclick.value.data.products[idx].id,
+    // productId: 'p15677829'
+    productId: tagclick.value.data.products[idx].id
+
+    //  tagclick.value.data.products[idx].id
   });
 
-  // let tempData = JSON.parse(JSON.stringify(tagclick.value))
+  let tempData = toRaw(tagclick.value.data)
+
+  tempData.products[idx] = {
+    ...tempData.products[idx],
+    ...res.data,
+    currentSku:res.data.skus[0] || {
+      price:'',
+      id:''
+    },
+    cartnum: 1
+  }
   
+  store.commit("tag/setTagClickType", {
+    type: tagclick.value.type,
+    data: tempData,
+  });
   Loading.hide()
 
 };
 
+watch(()=>tagclick.value.type,
+(val,old)=>{
+  if (val === 'goodlist') {
+    updateProductsById(current.value);
+  }
+})
+
 const brandScroll = () => {
   nextTick(() => {
     let t = setTimeout(() => {
@@ -178,9 +230,7 @@ onMounted(() => {
           > p {
             font-size: 16px;
             width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            line-height: 1.5;
           }
           > div {
             color: var(--editor-main-color);
@@ -199,13 +249,45 @@ onMounted(() => {
             border-bottom: 1px solid #ebebeb;
 
             > li {
-              margin: 6px 0;
+              margin: 10px 0;
+              display: flex;
+              justify-content: space-between;
+              color: #909090;
               > span {
-                font-size: 14px;
-
-                &:first-of-type {
-                  color: #909090;
                   font-size: 12px;
+              }
+              >ul{
+                >li{
+                    display: inline-block;
+                 
+                  >span{
+                    display: inline-block;
+                    border: solid 1px #909090;
+                    margin-left: 6px;
+                    padding: 2px 4px;
+                    border-radius: 4px;
+                    font-size: 12px;
+                  }
+                   &.active{
+                      >span{
+                    border: solid 1px #000;
+                    color:#000;
+                  }
+                  }
+                
+                }
+              }
+              .number{
+                display: flex;
+                i{
+                  font-size: 12px;
+                  border: solid 1px #909090;
+                  padding: 2px;
+                  border-radius: 4px;
+                }
+                input{
+                  max-width: 40px;
+                  text-align: center;
                 }
               }
             }