更新UI

src/components/Tags/goods-list.vue

@@ -4,7 +4,7 @@
       <div class="head-pages">
         <div>
           <span>{{ current + 1 }}</span
-          ><span>/{{tagclick.data.products?tagclick.data.products.length:'-'}}</span>
+          ><span>/{{ tagclick.data.products ? tagclick.data.products.length : "-" }}</span>
         </div>
         <ui-icon @click.stop="emit('close')" type="state_f"></ui-icon>
       </div>
@@ -21,19 +21,35 @@
                 <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">
+                    <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}}
+                        {{ item.properties[0].value }}
                       </span>
                     </li>
                   </ul>
                 </li>
-                  <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>
+                    <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>
@@ -50,11 +66,11 @@
 </template>
 
 <script setup>
-import { onMounted, watch,toRaw, 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";
-import { Loading } from '@/global_components/'
+import { Loading } from "@/global_components/";
 
 // get_product_info
 const store = useStore();
@@ -65,72 +81,69 @@ const emit = defineEmits(["close"]);
 
 const current = ref(0);
 
-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 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)
+const onClickSku = (item) => {
+  let tempData = toRaw(tagclick.value.data);
 
   tempData.products[current.value] = {
     ...tempData.products[current.value],
-    currentSku:{...item}
-  }
-
+    currentSku: { ...item },
+  };
 
   store.commit("tag/setTagClickType", {
     type: tagclick.value.type,
     data: tempData,
   });
-}
+};
 
-const addCart = async (item)=>{
-  Loading.show()
+const addCart = async (item) => {
+  Loading.show();
 
   await apis.inCat({
-    accessToken:'',
-    skuId:item.currentSku.id,
-    num: item.cartnum
-  })
-  Loading.hide()
-}
-
+    accessToken: "",
+    skuId: item.currentSku.id,
+    num: item.cartnum,
+  });
+  Loading.hide();
+};
 
 const updateProductsById = async (idx) => {
-  Loading.show()
+  Loading.show();
   let res = await apis.get_product_info({
-    // productId: 'p15677829'
-    productId: tagclick.value.data.products[idx].id
-
-    //  tagclick.value.data.products[idx].id
+    productId: 'p15677829'
+    // productId: tagclick.value.data.products[idx].id,
   });
 
-  let tempData = toRaw(tagclick.value.data)
+  let tempData = toRaw(tagclick.value.data);
 
   tempData.products[idx] = {
     ...tempData.products[idx],
     ...res.data,
-    currentSku:res.data.skus[0] || {
-      price:'',
-      id:''
+    currentSku: res.data.skus[0] || {
+      price: "",
+      id: "",
     },
-    cartnum: 1
-  }
-  
+    cartnum: 1,
+  };
+
   store.commit("tag/setTagClickType", {
     type: tagclick.value.type,
     data: tempData,
   });
-  Loading.hide()
-
+  Loading.hide();
 };
 
-watch(()=>tagclick.value.type,
-(val,old)=>{
-  if (val === 'goodlist') {
-    updateProductsById(current.value);
+watch(
+  () => tagclick.value.type,
+  (val, old) => {
+    if (val === "goodlist") {
+      updateProductsById(current.value);
+    }
   }
-})
+);
 
 const brandScroll = () => {
   nextTick(() => {
@@ -250,47 +263,55 @@ onMounted(() => {
 
             > li {
               margin: 10px 0;
-              display: flex;
-              justify-content: space-between;
               color: #909090;
+              &:last-of-type{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              }
               > span {
-                  font-size: 12px;
+                font-size: 12px;
               }
-              >ul{
-                >li{
-                    display: inline-block;
-                 
-                  >span{
+              > ul {
+                display: block;
+                > li {
+                  display: inline-block;
+                  > span {
                     display: inline-block;
-                    border: solid 1px #909090;
-                    margin-left: 6px;
+                    border: 1px solid #EBEBEB;
                     padding: 2px 4px;
+                    min-width: 73px;
+                    height: 30px;
+                    line-height: 30px;
+                    margin: 8px 8px 0 0;
+                    text-align: center;
                     border-radius: 4px;
                     font-size: 12px;
                   }
-                   &.active{
-                      >span{
-                    border: solid 1px #000;
-                    color:#000;
+                  &.active {
+                    > span {
+                      border: solid 1px var(--editor-main-color);
+                      color: var(--editor-main-color);
+                    }
                   }
-                  }
-                
                 }
               }
-              .number{
+              .number {
                 display: flex;
-                i{
+                i {
                   font-size: 12px;
-                  border: solid 1px #909090;
-                  padding: 2px;
-                  border-radius: 4px;
+                  border: 1px solid #EBEBEB;
+                  padding: 2px 8px;
+                  border-radius: 15px;
                 }
-                input{
+                input {
                   max-width: 40px;
                   text-align: center;
+                  color: #131D34;
                 }
               }
             }
+
           }
         }
         .goods-button {