From b19649a9a3c8caa423da6a19571089f059f30199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=BE=81?= <zhangz@163.com>
Date: Mon, 16 May 2022 21:31:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BsAddress.vue        | 11 ++++---
 pages/account/index/message.vue |  4 +--
 pages/goods/detail/_id.vue      | 55 ++++++++++++++++++++++++++++-----
 pages/goods/list/index.vue      | 41 ++++++++++++++++++++----
 4 files changed, 91 insertions(+), 20 deletions(-)

diff --git a/components/BsAddress.vue b/components/BsAddress.vue
index a34308c..b2112f3 100644
--- a/components/BsAddress.vue
+++ b/components/BsAddress.vue
@@ -93,9 +93,9 @@
         :class="!isAccount ? 'flex-column' : ''"
       >
         <el-checkbox v-model="defaultAddress">设为默认地址</el-checkbox>
-        <div class="address__edit--btns flex flex-middle">
+        <div class="address__edit--btns flex flex-middle" :class="isAccount?'clearmargin':''">
           <UiButton
-            v-if="addressList && addressList.length && !isAccount"
+            v-if="addressList[0].id && !isAccount"
             type="grey"
             @click="isOperation = false"
             >取消</UiButton
@@ -221,15 +221,13 @@ export default {
       if (res.result && res.result.length) {
         vm.isOperation = false;
         vm.addressList = res.result;
-        if (!vm.addressList.length) {
-          vm.defaultAddress = true;
-        }
         let curIndex = vm.addressList.findIndex((item) => item.isDefault);
         vm.curAddressListItem =
           curIndex > -1 ? vm.addressList[curIndex] : vm.addressList[0];
         vm.$emit("getList", vm.addressList);
         vm.$emit("emitAddress", vm.curAddressListItem);
       } else {
+        vm.defaultAddress = true;
         vm.isOperation = true;
       }
       console.log("获取收货地址", res);
@@ -410,6 +408,9 @@ export default {
         margin-right: 38px;
       }
     }
+    .clearmargin{
+      margin: 0 0 0 20px;
+    }
   }
 }
 
diff --git a/pages/account/index/message.vue b/pages/account/index/message.vue
index cf66be9..e29c595 100644
--- a/pages/account/index/message.vue
+++ b/pages/account/index/message.vue
@@ -49,8 +49,8 @@ export default {
     ...mapState(["token"]),
   },
   mounted() {
-    // let url = `ws://192.168.10.93:8090/ws?client=eyJhbGciOiJSUzI1NiJ9.eyJleHAiOjQwNzA4ODAwMDAsImlkIjoyLCJ0aW1lIjoxNjUyNDQyMDIyMjE4fQ.ybPvJ-pkywqzBgAK9Lv_7yme50cGhtTvzVcfp-kLyjlzKpsgcvQrhd_FhCHZo-eUEN-OuotoLblU94UMa_oKZ1TU78gjzPWeUpUO9LZVOs0HKIxeFmPbJTe0js5Ckw79p8uTNyO6p9DmZTb3TsX9OmoNoeTDkZLMiJsIXEi9eRU&type=1`;
-    let url = `wss://k8s-horse-gateway.mashibing.cn/ws?client=${this.token}&type=1`;
+    let url = `ws://192.168.10.93:8090/ws?client=${this.token}&type=1`;
+    // let url = `wss://k8s-horse-gateway.mashibing.cn/ws?client=${this.token}&type=1`;
     this.socket(url);
   },
   methods: {
diff --git a/pages/goods/detail/_id.vue b/pages/goods/detail/_id.vue
index e7f9996..55216d8 100644
--- a/pages/goods/detail/_id.vue
+++ b/pages/goods/detail/_id.vue
@@ -1,14 +1,51 @@
 <template>
-  <div>
+  <div v-if="pageLoading">
+    <main class="main">
+      <el-skeleton style="width: 100%; padding: 40px" :loading="true" animated>
+        <template slot="template">
+          <div class="flex">
+            <el-skeleton-item
+              variant="image"
+              style="width: 456px; height: 456px"
+            />
+            <div style="flex: 1; padding: 0 20px">
+              <el-skeleton-item variant="h1" style="width: 100%" />
+              <el-skeleton-item
+                variant="h2"
+                style="width: 100%; height: 130px; margin-top: 20px"
+              />
+              <el-skeleton-item
+                variant="h3"
+                style="margin-top: 34px; width: 90%"
+              />
+              <el-skeleton-item
+                variant="h3"
+                style="margin-top: 34px; width: 70%"
+              />
+              <el-skeleton-item
+                variant="h3"
+                style="margin-top: 34px; width: 50%"
+              />
+              <el-skeleton-item
+                variant="h3"
+                style="margin-top: 34px; width: 50%"
+              />
+              <el-skeleton-item
+                variant="h3"
+                style="margin-top: 34px; width: 100%"
+              />
+            </div>
+          </div>
+        </template>
+      </el-skeleton>
+    </main>
+  </div>
+  <div v-else>
     <nav class="nav flex flex-middle flex-center">
       <p class="nav__crumbs">
         全部商品
         <i class="el-icon-arrow-right"></i>
-        开发书籍
-        <i class="el-icon-arrow-right"></i>
-        后端书籍
-        <i class="el-icon-arrow-right"></i>
-        Java从入门到项目实战
+        {{ detailData.name }}
       </p>
     </nav>
     <main class="main flex" v-if="detailData.isEnable">
@@ -192,7 +229,9 @@
         </div>
       </section>
       <div class="flex flex-center">
-        <UiButton type="yellow_panel service-btn" @click="showService=false;">确定</UiButton>
+        <UiButton type="yellow_panel service-btn" @click="showService = false"
+          >确定</UiButton
+        >
       </div>
     </el-dialog>
   </div>
@@ -212,6 +251,7 @@ export default {
   componetns: { UiMoney, UiButton, UiGoodsItem, BsChosen },
   data() {
     return {
+      pageLoading: true,
       curBuyNum: 1,
       activeImg: 0,
       recommendedData: [],
@@ -237,6 +277,7 @@ export default {
     vm.detailData = res1.result;
     vm.skuData = res2.result;
     vm.recommendedData = res3.result;
+    vm.pageLoading = false;
     if (
       vm.detailData.productActivityVO.isActivity &&
       !vm.detailData.productActivityVO.isStartActivity &&
diff --git a/pages/goods/list/index.vue b/pages/goods/list/index.vue
index c7dba3f..b3505fe 100644
--- a/pages/goods/list/index.vue
+++ b/pages/goods/list/index.vue
@@ -7,7 +7,35 @@
 -->
 
 <template>
-  <div :class="listData && listData.length ? 'page' : ''">
+  <div v-if="pageloading" class="main flex">
+    <el-skeleton
+      v-for="item in 5"
+      :key="item"
+      style="width: 230px;margin-right:20px;"
+      :loading="true"
+      animated
+    >
+      <template slot="template">
+        <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
+        <div style="padding: 14px">
+          <el-skeleton-item variant="h3" style="width: 50%" />
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              justify-items: space-between;
+              margin-top: 16px;
+              height: 16px;
+            "
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px" />
+            <el-skeleton-item variant="text" style="width: 30%" />
+          </div>
+        </div>
+      </template>
+    </el-skeleton>
+  </div>
+  <div v-else :class="listData && listData.length ? 'page' : ''">
     <main class="main" v-if="listData && listData.length">
       <nav class="main__nav">
         <p class="main__nav-crumbs">
@@ -70,7 +98,7 @@
       <img class="main-none-img" src="@/assets/img/goods/none.png" alt="" />
       <p class="main-none-txt">没有搜到你想要的商品哦，换个关键词试试</p>
     </main>
-    <BsChosen></BsChosen>
+    <BsChosen v-if="!listData || !listData.length"></BsChosen>
   </div>
 </template>
 <script>
@@ -81,11 +109,12 @@ import {
 } from "@/plugins/api/goods";
 import Sort from "./module/SortItem.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
-import BsChosen from '@/components/BsChosen.vue';
+import BsChosen from "@/components/BsChosen.vue";
 export default {
-  components: { Sort, UiGoodsItem,BsChosen },
+  components: { Sort, UiGoodsItem, BsChosen },
   data() {
     return {
+      pageloading: true,
       navActive: 0,
       levelActive: 0,
       listData: [],
@@ -104,7 +133,7 @@ export default {
       },
     };
   },
-  async created() {
+  created() {
     this.init();
   },
   methods: {
@@ -168,6 +197,7 @@ export default {
         vm.params.categoryId = vm.categoryOneList[vm.levelActive].id;
       }
       let res = await ApiGetGoodsList(vm.params);
+      vm.pageloading = false;
       if (res.error) {
         vm.$message.error(res.error.message);
         return false;
@@ -286,5 +316,4 @@ export default {
     color: #999999;
   }
 }
-
 </style>