From 775c5f663c90587447a34fe5b087a248acda7f36 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 16:12:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E7=A6=85=E9=81=93bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BsAddress.vue        | 110 +++++++++++++++++++++---
 components/BsLogin.vue          |   2 +-
 pages/account/index/address.vue |  28 +++---
 pages/account/index/message.vue | 148 ++++++++++++++++++++++++++++++--
 pages/goods/detail/_id.vue      |  82 +++++++++++++++++-
 5 files changed, 336 insertions(+), 34 deletions(-)

diff --git a/components/BsAddress.vue b/components/BsAddress.vue
index 94d3db5..a34308c 100644
--- a/components/BsAddress.vue
+++ b/components/BsAddress.vue
@@ -5,7 +5,7 @@
         <div class="address__msg-line flex flex-middle">
           <img src="@/assets/img/goods/point.png" alt="收货地址" />
           <span class="address__msg-line--txt">默认地址</span>
-          <UiButton type="yellow_panel">修改</UiButton>
+          <UiButton type="yellow_panel" @click="onEdit()">修改</UiButton>
         </div>
         <div class="address__msg-line flex flex-middle">
           <span class="address__msg-line--type">收货地址:</span>
@@ -73,6 +73,7 @@
             type="textarea"
             :rows="3"
             class="max-ipt"
+            maxlength="60"
           ></el-input>
         </div>
         <div class="address__msg-line flex flex-middle">
@@ -88,11 +89,11 @@
       </article>
       <div class="hr" v-if="!isAccount"></div>
       <div
-        class="address__operation flex flex-middle"
+        class="address__edit flex flex-middle"
         :class="!isAccount ? 'flex-column' : ''"
       >
         <el-checkbox v-model="defaultAddress">设为默认地址</el-checkbox>
-        <div>
+        <div class="address__edit--btns flex flex-middle">
           <UiButton
             v-if="addressList && addressList.length && !isAccount"
             type="grey"
@@ -100,7 +101,7 @@
             >取消</UiButton
           >
           <UiButton type="yellow_panel" @click="onAddAddress"
-            >保存地址</UiButton
+            >{{ getEditState ? "保存" : "新增" }}地址</UiButton
           >
         </div>
       </div>
@@ -115,13 +116,25 @@
       <div class="address__list">
         <section
           @click="onAddressItem(item)"
-          class="address__list--item"
+          class="address__list-item"
+          :class="
+            item.id == curAddressListItem.id ? 'address__list-active' : ''
+          "
           v-for="item in addressList"
           :key="item.id"
         >
-          <div>收货人：{{ item.name }}</div>
-          <div>手机号码：{{ item.phone }}</div>
-          <div>收货地址：{{ item.detailAddress }}</div>
+          <div class="address__list-item--name">
+            <span class="address__list-item--label">收 货 人 ：</span
+            >{{ item.name }}
+          </div>
+          <div class="address__list-item--phone">
+            <span class="address__list-item--label">手机号码：</span
+            >{{ item.phone }}
+          </div>
+          <div class="address__list-item--detail">
+            <span class="address__list-item--label">收货地址：</span>
+            {{ item.province + item.city + item.area + item.detailAddress }}
+          </div>
         </section>
       </div>
       <span slot="footer" class="dialog-footer flex flex-between">
@@ -150,7 +163,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    isEdit: {
+    isParentEdit: {
       type: Boolean,
       default: false,
     },
@@ -159,14 +172,20 @@ export default {
     prop: "addressData",
     event: "emitAddress",
   },
+  computed: {
+    getEditState() {
+      return this.isEdit || this.isParentEdit;
+    },
+  },
   data() {
     return {
+      isEdit: false,
       isOperation: false,
       dialogVisible: false,
       detailAddress: "",
       addressUser: "",
       addressPhone: "",
-      defaultAddress: true,
+      defaultAddress: false,
       selectData: {
         area: {
           value: "",
@@ -187,12 +206,24 @@ export default {
     this.getAddressData();
   },
   methods: {
+    onEdit() {
+      let vm = this;
+      let curIndex = vm.addressList.findIndex(
+        (item) => item.id == vm.curAddressListItem.id
+      );
+      vm.isOperation = true;
+      vm.isEdit = true;
+      vm.setAddressData(curIndex);
+    },
     async getAddressData() {
       let vm = this;
       let res = await ApiGetAddress();
       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];
@@ -257,7 +288,7 @@ export default {
         provinceCode: vm.selectData.province.code,
       };
       let res;
-      if (vm.isEdit) {
+      if (vm.getEditState) {
         let editParams = Object.assign(vm.addressList[vm.editIndex], params);
         res = await ApiPutAddress(editParams);
       } else {
@@ -265,6 +296,15 @@ export default {
       }
       if (!res.error) {
         vm.$message.success("添加成功!");
+        vm.$set(vm.selectData.area, "value", "");
+        vm.$set(vm.selectData.city, "value", "");
+        vm.$set(vm.selectData.province, "value", "");
+        vm.$set(vm, "detailAddress", "");
+        vm.$set(vm, "defaultAddress", "");
+        vm.$set(vm, "addressUser", "");
+        vm.$set(vm, "addressPhone", "");
+        vm.$emit("onSaveSuccess");
+        vm.isEdit = false;
         vm.getAddressData();
       }
       console.log(res);
@@ -355,6 +395,22 @@ export default {
       margin-right: 10px;
     }
   }
+
+  &__edit {
+    flex: 1;
+    &--btns {
+      margin-top: 30px;
+      /deep/.ui-button__grey {
+        width: 90px;
+        height: 30px;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+        margin-right: 38px;
+      }
+    }
+  }
 }
 
 .address__list {
@@ -376,11 +432,41 @@ export default {
     border-radius: 10px;
     background-color: #eeeeee;
   }
-  &--item {
+  &-item {
     width: 320px;
     height: 120px;
     border: 1px solid #dddddd;
     margin-bottom: 24px;
+    cursor: pointer;
+    padding: 16px 20px;
+    > div {
+      margin-bottom: 10px;
+    }
+
+    &--detail {
+      @include ellipses(2);
+    }
+
+    &--label {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+
+  &-active {
+    border: 1px solid #ff875b;
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 24px;
+      height: 24px;
+      background: url(@/assets/img/goods/active.png);
+    }
   }
 }
 
diff --git a/components/BsLogin.vue b/components/BsLogin.vue
index df04795..8500170 100644
--- a/components/BsLogin.vue
+++ b/components/BsLogin.vue
@@ -150,7 +150,7 @@ export default {
           const { result, error } = await ApiPostLogin({
             ...this.form,
             clientId: 1,
-            systemId: 3,
+            systemId: 1,
           });
           if (error !== null) {
             Message.error(
diff --git a/pages/account/index/address.vue b/pages/account/index/address.vue
index 97b0987..b0153cd 100644
--- a/pages/account/index/address.vue
+++ b/pages/account/index/address.vue
@@ -12,8 +12,9 @@
     <BsAddress
       ref="bsAddress"
       @getList="getList"
+      @onSaveSuccess="onSaveSuccess"
       :isAccount="true"
-      :isEdit="isEdit"
+      :isParentEdit="isEdit"
     ></BsAddress>
     <el-table :data="addressList" style="width: 100%">
       <el-table-column prop="name" label="收货人" width="130px">
@@ -57,6 +58,9 @@ export default {
     };
   },
   methods: {
+    onSaveSuccess() {
+      this.isEdit = false;
+    },
     getList(list) {
       this.addressList = list || [];
     },
@@ -76,17 +80,21 @@ export default {
     },
     deleteItem(item) {
       let vm = this;
-      vm.$alert("确认删除此收货地址吗?", "提示", {
+      vm.$confirm("确认删除此收货地址吗?", "提示", {
         confirmButtonText: "确定",
-        callback: async () => {
-          let res = await ApiDeleteAddress({
-            idList: [item.id],
-          });
-          if (!res.error) {
-            vm.$message.success("删除成功~");
-            vm.$refs.bsAddress.getAddressData();
+        cancelButtonText: "取消",
+        callback: async (e) => {
+          console.log(e);
+          if (e == `confirm`) {
+            let res = await ApiDeleteAddress({
+              idList: [item.id],
+            });
+            if (!res.error) {
+              vm.$message.success("删除成功~");
+              vm.$refs.bsAddress.getAddressData();
+            }
+            console.log(res);
           }
-          console.log(res);
         },
       });
     },
diff --git a/pages/account/index/message.vue b/pages/account/index/message.vue
index 4dc0aea..cf66be9 100644
--- a/pages/account/index/message.vue
+++ b/pages/account/index/message.vue
@@ -7,17 +7,149 @@
 -->
 
 <template>
-	<div>我是消息页面</div>
+  <div>
+    <main class="main">
+      <h3 class="title">消息通知</h3>
+      <section class="section">
+        <div class="section__item flex" v-for="item in msgList" :key="item.id">
+          <img
+            class="section__item-img"
+            src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
+            alt="消息通知"
+          />
+          <div class="section__item-content flex flex-column">
+            <div class="section__item-content--title flex">
+              <span>{{ item.payload.title || `马士兵严选上新啦` }}</span>
+              <span class="section__item-content--time">{{
+                item.createTimeStamp
+              }}</span>
+            </div>
+            <div class="section__item-content--txt">
+              {{
+                item.payload.content ||
+                `马士兵严选上新啦!！走过路过不要错过，大家快来看看...`
+              }}
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
 </template>
 <script>
+import { mapState } from "vuex";
 export default {
-	data(){
-		return {
-			
-		}
-	}
-}
+  data() {
+    return {
+      Socket: null,
+      msgList: [],
+    };
+  },
+  computed: {
+    ...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`;
+    this.socket(url);
+  },
+  methods: {
+    socket(url) {
+      let vm = this;
+      vm.Socket = new WebSocket(url);
+      vm.Socket.onopen = () => {
+        let traceId = Math.random();
+        vm.Socket.send(
+          `{"traceId":${traceId},traceType:1,"content":{"size": 100}}`
+        );
+      };
+      vm.Socket.onclose = () => {
+        vm.Socket = null;
+      };
+      vm.Socket.onerror = () => {
+        if (vm.Socket.readyState !== 3) {
+          if (vm.reconnection > 3) {
+            // vm.$message.error("链接失败!");
+            return;
+          }
+        }
+      };
+      vm.Socket.onmessage = (e) => {
+        if (e.data == `pong`) {
+          return;
+        }
+        let msg = JSON.parse(e.data);
+        console.log("websocket收到消息", msg);
+        if (msg.traceType == 1) {
+          let traceId = Math.random();
+          let sys = msg.content.sessionVOS.find((item) => item.type != 3);
+          let str = `{"traceId":${traceId},traceType:2,"content":{"sessionId":${sys.id}}}`;
+          vm.Socket.send(str);
+        }
+        if (msg.traceType == 2) {
+          vm.msgList = msg.content;
+        }
+      };
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
+.main {
+  width: 1000px;
+  .title {
+    width: 100%;
+    height: 42px;
+    background: #f8f8f8;
+    border: 1px solid #dddddd;
+    padding: 0 24px;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #333333;
+    line-height: 42px;
+  }
+
+  .section {
+    padding: 22px 20px 0;
+    border: 1px solid #ddd;
+    margin-top: -1px;
+
+    &__item {
+      margin-bottom: 20px;
 
-</style>
\ No newline at end of file
+      &-img {
+        width: 110px;
+        height: 110px;
+        margin-right: 20px;
+      }
+
+      &-content {
+        width: 840px;
+        &--title {
+          margin-top: 8px;
+          font-size: 16px;
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: #333333;
+        }
+        &--time {
+          font-size: 12px;
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: #999999;
+          margin-left: auto;
+        }
+        &--txt {
+          margin-top: auto;
+          margin-bottom: 8px;
+          font-size: 14px;
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: #999999;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/goods/detail/_id.vue b/pages/goods/detail/_id.vue
index 96b7302..e7f9996 100644
--- a/pages/goods/detail/_id.vue
+++ b/pages/goods/detail/_id.vue
@@ -97,6 +97,7 @@
               >假一赔四 · 全国包邮 · 不支持7天无理由退换</span
             >
             <img
+              @click="onShowService()"
               class="msg-icon"
               src="~/assets/img/goods/more.png"
               alt="服务"
@@ -135,7 +136,7 @@
           <img src="@/assets/img/goods/tips.png" alt="" />
           <span>此商品暂无库存啦~看看其他的吧</span>
         </div>
-        <div class="main__details-pay">
+        <div class="main__details-pay" v-if="isStock()">
           <UiButton type="yellow_line" @click="addCart">加入购物车</UiButton>
           <UiButton type="yellow_panel" @click="buyNow">立即购买</UiButton>
         </div>
@@ -169,6 +170,31 @@
       </div>
     </section>
     <BsChosen v-else></BsChosen>
+
+    <el-dialog
+      title="服务详情"
+      :visible.sync="showService"
+      width="380px"
+      center
+    >
+      <section class="service__section flex flex-column">
+        <div class="service-item">
+          <h3>假一赔四</h3>
+          <p>正品保障，假一赔四</p>
+        </div>
+        <div class="service-item">
+          <h3>全国包邮</h3>
+          <p>偏远地区（青海、西藏、新疆）除外</p>
+        </div>
+        <div class="service-item">
+          <h3>不支持7天退换</h3>
+          <p>此商品不支持七天无理由退换</p>
+        </div>
+      </section>
+      <div class="flex flex-center">
+        <UiButton type="yellow_panel service-btn" @click="showService=false;">确定</UiButton>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -199,6 +225,7 @@ export default {
       timer: null,
       startTime: "",
       endTime: "",
+      showService: false,
     };
   },
   async created() {
@@ -264,6 +291,9 @@ export default {
     },
   },
   methods: {
+    onShowService() {
+      this.showService = true;
+    },
     addCart() {
       let ids = [this.detailData.id];
       this.$router.push({
@@ -418,6 +448,9 @@ export default {
       });
     },
     buyNow() {
+      if (!this.$isLoginValidate()) {
+        return;
+      }
       if (!this.curSku.skuId) {
         this.$message.error("请选择规格~");
         return false;
@@ -440,6 +473,9 @@ export default {
      * 加入购物车
      */
     async addCart() {
+      if (!this.$isLoginValidate()) {
+        return;
+      }
       if (!this.curSku.skuId) {
         this.$message.error("请选择规格~");
         return false;
@@ -601,6 +637,7 @@ export default {
         margin-left: 6px;
         width: 12px;
         height: 12px;
+        cursor: pointer;
       }
       &--price {
         padding-bottom: 30px;
@@ -733,7 +770,7 @@ export default {
   width: 1200px;
   margin: 64px auto 0;
   &-recommend {
-    width: 210px;
+    width: 232px;
     margin-right: 30px;
 
     /deep/.goods-item {
@@ -741,7 +778,7 @@ export default {
     }
   }
   &-details {
-    width: 960px;
+    width: 938px;
 
     &--none {
       img {
@@ -774,4 +811,43 @@ export default {
     color: #666666;
   }
 }
+
+.service-item {
+  margin-bottom: 25px;
+  padding-left: 30px;
+
+  h3 {
+    font-size: 18px;
+    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+    font-weight: 400;
+    color: #333333;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: -10px;
+      top: 50%;
+      margin-top: -3px;
+      height: 6px;
+      width: 6px;
+      background: #ff875b;
+      border-radius: 50%;
+    }
+  }
+  p {
+    font-size: 14px;
+    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+    font-weight: 400;
+    color: #666666;
+    padding-top: 10px;
+  }
+}
+
+.service-btn {
+  width: 272px;
+  height: 36px;
+  background: linear-gradient(90deg, #ff7f39 0%, #ffa35b 100%);
+  border-radius: 4px;
+}
 </style>