[FIX]【商品商城】商品详情页样式调整

src/views/ebiz/product-store/StoreDetail.vue

@@ -5,10 +5,13 @@
       <van-notice-bar wrapable :scrollable="false" text="温馨提示：您即将离开本站，访问的链接来源于第三方网站，可能存在风险，请谨慎操作！" />
     </div>
     <div class="img-store clearfix">
-      <div><img :src="$assetsUrl + detail.topImgUrl" alt="" width="100%" /></div>
-      <div class="mindle-img" :style="{ 'background-color': detail.color }"><img :src="$assetsUrl + detail.middleImgUrl" alt="" width="100%" /></div>
+      <div><img v-if="loaded" :src="$assetsUrl + detail.topImgUrl" alt="" width="100%" /></div>
+      <div>
+        <img v-if="loaded" @load="imageLoaded($event)" :src="$assetsUrl + detail.middleImgUrl" alt="" width="100%" />
+        <div class="mindle-img" :style="{ 'background-color': detail.color }" ref="fillContent"></div>
+      </div>
       <div class="bottom-img">
-        <img :src="$assetsUrl + detail.footerImgUrl" alt="" width="100%" />
+        <img v-if="loaded" :src="$assetsUrl + detail.footerImgUrl" alt="" width="100%" />
         <div v-if="isWeixin">
           <van-field
             v-model="loginInfo.aname"
@@ -52,7 +55,6 @@ export default {
   data() {
     let isWeixin = this.$utils.device().isWeixin //判断环境
     return {
-      // bgc: '', //
       isWeixin, //是否在微信
       mallId: '', //商城id
       shareId: '', //分享id
@@ -68,7 +70,8 @@ export default {
         linkUrl: '', //商城外链地址
         name: '', //商城名称
         color: '' //背景色
-      }
+      },
+      loaded: false
     }
   },
   created() {
@@ -86,45 +89,33 @@ export default {
       }, 100)
     }
     this.mallId = this.$route.query.mallId
+  },
+  async mounted() {
     if (this.isWeixin) {
       window.localStorage.setItem('token', this.$route.query.token)
       this.loginInfo.aname = decodeURI(this.$route.query.aname)
       this.loginInfo.password = decodeURI(this.$route.query.password)
       this.shareId = this.$route.query.shareId
       this.name = decodeURI(this.$route.query.name)
-      this.saveShareTrack({ id: this.shareId, mallId: this.mallId })
+      await this.saveShareTrack({ id: this.shareId, mallId: this.mallId })
     }
-  },
-  async mounted() {
     await this.getShopList({ id: this.mallId })
     window['appCallBack'] = this.appCallBack
-    document.getElementsByTagName('body')[0].style.backgroundColor = this.detail.color
-    // this.bgc = document.getElementsByTagName('body')[0].style.backgroundColor
-  },
-  destroyed() {
-    // document.getElementsByTagName('body')[0].classList.remove('bg-white')
-    // document.getElementsByTagName('body')[0].style.backgroundColor = this.bgc
   },
   methods: {
     //获取商城详情
-    getShopList(data) {
-      return new Promise((resolve, reject) => {
-        getShopList(data).then(
-          res => {
-            this.$toast.clear()
-            if (res.result == '0') {
-              this.detail = res.content[0]
-              this.isCanCheck = false
-              resolve()
-            } else {
-              reject(this.$toast(res.resultMessage))
-            }
-          },
-          error => {
-            reject(this.$toast(error))
-          }
-        )
+    async getShopList(data) {
+      const res = await getShopList(data).catch(err => {
+        this.loaded = false
       })
+      if (!res) return
+      if (res.result == '0') {
+        this.detail = res.content[0]
+        this.loaded = true
+        this.isCanCheck = false
+      } else {
+        this.$toast(res.resultMessage)
+      }
     },
     //查看
     check() {
@@ -144,11 +135,14 @@ export default {
     },
     //分享轨迹保存
     saveShareTrack(data) {
-      saveShareTrack(data).then(res => {
-        if (res.result == '0') {
-        } else {
-          this.$toast(res.resultMessage)
-        }
+      return new Promise((resolve, reject) => {
+        saveShareTrack(data).then(res => {
+          if (res.result == '0') {
+            resolve()
+          } else {
+            reject(this.$toast(res.resultMessage))
+          }
+        })
       })
     },
     //app回调
@@ -166,6 +160,13 @@ export default {
           }
         })
       }
+    },
+    imageLoaded(e) {
+      const screeVH = window.innerHeight,
+        detailVH = e.path[3].offsetHeight
+      this.$nextTick(() => {
+        screeVH - detailVH > 0 ? (this.$refs.fillContent.style.height = screeVH - detailVH + 'px') : '0px'
+      })
     }
   }
 }
@@ -176,10 +177,6 @@ export default {
   /deep/.van-field__label {
     width: 40%;
   }
-  .img-store > div {
-    float: left;
-    width: 100%;
-  }
   .img-store {
     img {
       display: block;
@@ -187,9 +184,6 @@ export default {
     /deep/.van-button {
       width: 100%;
     }
-    .mindle-img {
-      height: 75vh;
-    }
   }
 }
 </style>