商品商城优化

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <!--实现路由切换动画-->
     <transition :name="transitionName">
-      <keep-alive include="StoreDetail">
+      <keep-alive include="StoreList">
         <RouterView v-if="isRouterAlive" />
       </keep-alive>
 

src/router/ebiz/product-store.js

@@ -25,13 +25,14 @@ export default [
     }
   },
   {
-    path: '/productStore/storeDetail',
+    path: '/productStore/storeDetail/:mallId/:sectionName',
     name: 'StoreDetail',
     component: StoreDetail,
     meta: {
       title: '商城简介',
       index: 2
-    }
+    },
+    props: true
   },
   {
     path: '/productStore/storeList',

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

@@ -1,10 +1,10 @@
 <!--商城详情页-->
 <template>
-  <div class="store-detail-container">
+  <div class="store-detail-container" v-show="loaded">
     <div v-if="isWeixin">
       <van-notice-bar wrapable :scrollable="false" text="温馨提示：您即将离开本站，访问的链接来源于第三方网站，可能存在风险，请谨慎操作！" />
     </div>
-    <div class="img-store clearfix" ref="imgContainer">
+    <!-- <div class="img-store clearfix" ref="imgContainer">
       <div v-if="!isWeixin"><img v-if="loaded" :src="$assetsUrl + detail.topImgUrl" alt="" width="100%" /></div>
       <div v-if="!isWeixin">
         <img v-if="loaded" @load="imageLoaded($event)" :src="$assetsUrl + detail.middleImgUrl" alt="" width="100%" />
@@ -45,10 +45,11 @@
             >查看</van-button
           >
         </div>
-
-        <van-button v-if="!isWeixin" type="danger" @click="forward" v-no-more-click="1000">一键转发</van-button>
-      </div>
       </div>
+    </div> -->
+    <img id="detailImg" v-if="detailImg" :src="$assetsUrl + detailImg" alt="" />
+    <van-button class="bottom-btn" v-if="isWeixin && bottomBtnShow" type="danger" @click="forward" v-no-more-click="1000">查看</van-button>
+    <van-button class="bottom-btn" v-if="!isWeixin && bottomBtnShow" type="danger" @click="forward" v-no-more-click="1000">一键转发</van-button>
     <!-- <van-popup v-model="pdfPop" closeable position="bottom">
       <div style="height:80%">
         <iframe :src="src + pdfUrl" class="iframe"></iframe>
@@ -71,11 +72,18 @@ export default {
     [Popup.name]: Popup,
     [Field.name]: Field
   },
+  props: {
+    mallId: {
+      type: String
+    },
+    sectionName: {
+      type: String
+    }
+  },
   data() {
     let isWeixin = this.$utils.device().isWeixin //判断环境
     return {
       isWeixin, //是否在微信
-      mallId: '', //商城id
       shareId: '', //分享id
       radio: '',
       pdfPop: false, //pdf预览框是否展示 false-不展示  true-隐藏
@@ -88,33 +96,29 @@ export default {
         aname: '',
         password: ''
       },
-      pdfUrl: '', //pdf地址
+      // pdf地址
+      pdfUrl: '',
       detail: {
-        topImgUrl: '', //商城简介图片地址
+        // 商城简介图片地址
-        middleImgUrl: '', //商城简介图片地址
+        topImgUrl: '',
-        footerImgUrl: '', //商城简介图片地址
+        //商城简介图片地址
-        linkUrl: '', //商城外链地址
+        middleImgUrl: '',
-        name: '', //商城名称
+        //商城简介图片地址
-        color: '' //背景色
+        footerImgUrl: '',
+        //商城外链地址
+        linkUrl: '',
+        //商城名称
+        name: '',
+        //背景色
+        color: ''
       },
-      loaded: false
+      loaded: false,
+      detailImg: '',
+      bottomBtnShow: false
     }
   },
   created() {
-    if (!this.isWeixin) {
+    document.title = `${this.sectionName}简介`
-      setTimeout(() => {
-        // eslint-disable-next-line no-undef
-        window.EWebBridge.webCallAppInJs('webview_right_button', {
-          btns: [
-            {
-              img: icon,
-              route: { flag: '', extra: {} }
-            }
-          ]
-        })
-      }, 100)
-    }
-    this.mallId = this.$route.query.mallId
   },
   async mounted() {
     if (this.isWeixin) {
@@ -125,7 +129,7 @@ export default {
       this.name = decodeURI(this.$route.query.name)
       await this.saveShareTrack({ id: this.shareId, mallId: this.mallId })
     }
-    await this.getShopList({ id: this.mallId })
+    this.getShopList({ id: this.mallId })
     window['appCallBack'] = this.appCallBack
   },
   methods: {
@@ -142,18 +146,34 @@ export default {
       })
     },
     async getShopList(data) {
-      const res = await getShopList(data).catch(err => {
+      try {
-        this.loaded = false
+        const res = await getShopList(data)
-      })
+        console.dir(res)
         if (!res) return
         if (res.result == '0') {
-        this.detail = res.content[0]
+          if (res.content.rightBtnShow && !this.isWeixin) {
-        this.pdfUrl = this.$assetsUrl + res.content[0].pdfUrl
+            // eslint-disable-next-line no-undef
+            window.EWebBridge.webCallAppInJs('webview_right_button', {
+              btns: [
+                {
+                  img: icon,
+                  route: { flag: '', extra: {} }
+                }
+              ]
+            })
+          }
+          this.detailImg = res.content.detailImgUrl
+          this.bottomBtnShow = res.content.bottomBtnShow
+          // this.detail = res.content[0]
+          // this.pdfUrl = this.$assetsUrl + res.content[0].pdfUrl
           this.loaded = true
-        this.isCanCheck2 = true
+          // this.isCanCheck2 = true
         } else {
           this.$toast(res.resultMessage)
         }
+      } catch (error) {
+        this.loaded = false
+      }
     },
     //查看
     check() {
@@ -219,8 +239,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#detailImg {
+  max-width: 100vw;
+  margin-bottom: 40px;
+}
+
 .store-detail-container {
-  height: 100vh;
   /deep/.van-field__label {
     width: 40%;
   }

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

@@ -1,11 +1,12 @@
 <!--商品商城列表页-->
 <template>
   <div class="store-list-container">
-    <div v-for="(item, index) in list" :key="index" @click="goDetail(item)">
+    <div class="mb10 bg-white pt10 ph10" v-for="(item, index) in list" :key="index">
-      <van-grid :border="false" :gutter="10" :column-num="3">
+      <h3>{{ item.sectionName }}</h3>
-        <van-grid-item>
+      <van-grid class="fs12" :column-num="4">
-          <van-image :src="$assetsUrl + item.iconUrl" />
+        <van-grid-item icon="photo-o" text="文字" v-for="(menu, index) in item.menus" :key="index" @click="goDetail(menu, item)">
-          <van-grid-item :text="item.name" />
+          <van-image :src="$assetsUrl + menu.iconUrl" />
+          <span class="mt5">{{ menu.name }}</span>
         </van-grid-item>
       </van-grid>
     </div>
@@ -25,7 +26,8 @@ export default {
   },
   data() {
     return {
-      list: [] //商品商城列表
+      // 商品商城列表
+      list: []
     }
   },
   mounted() {
@@ -33,25 +35,26 @@ export default {
   },
   methods: {
     //获取商品商城列表
-    getShopList() {
+    async getShopList() {
-      getShopList({}).then(res => {
+      let result = await getShopList({})
-        this.$toast.clear()
+      if (result.result === '0') {
-        if (res.result == '0') {
+        if (result.content) {
-          this.list = res.content
+          this.list = result.content
-        } else {
+        }
-          this.$toast(res.resultMessage)
       }
-      })
     },
-    //查看详情
+    // 查看详情
-    goDetail(v) {
+    goDetail(v, item) {
+      if (!v.available) {
+        return this.$toast('功能暂未开发')
+      }
       this.$jump({
         flag: 'h5',
         extra: {
-          url: location.origin + `/#/productStore/storeDetail?mallId=${v.id}`
+          url: location.origin + `/#/productStore/storeDetail/${v.id}/${item.sectionName}`
         },
         routerInfo: {
-          path: `/productStore/storeDetail?mallId=${v.id}`
+          path: `/productStore/storeDetail/${v.id}/${item.sectionName}`
         }
       })
     }
@@ -60,4 +63,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/deep/ [class*='van-hairline']::after {
+  border: none;
+}
+
+/deep/ .van-grid {
+  align-items: flex-start;
+}
+
+/deep/ .van-image {
+  width: 60%;
+}
 </style>