手机端店铺分享

components/mobile/share/store/CommodityList.vue

@@ -3,38 +3,49 @@
     <div class="title">
       <img src="/images/mobile/@2x/shareStore/commodity-title@2x.png" alt="">
       <div class="date">
-        <span>02</span>月<span>01</span>日
+        <span>{{date.month}}</span>月<span>{{date.day}}</span>日
       </div>
       <div class="fr">真实库存、真实价格</div>
     </div>
     <ul>
-      <li>
+      <li v-for="commodity in commodities.content">
         <div class="fl">
-          <p>ASDHAKHFKSAJFHKA</p>
-          <span>panasonic</span>
+          <p>{{commodity.code || '-'}}</p>
+          <span v-if="commodity.brandNameEn || commodity.brandEn">{{commodity.brandNameEn || commodity.brandEn || '-'}}</span>
         </div>
         <div class="fr">
-          <span>$</span>
-          <span>1111.111111</span>
+          <span>{{commodity.currencyName === 'USD' ? '$' : '¥'}}</span>
+          <span>{{commodity.prices[0].rMBPrice}}</span>
         </div>
       </li>
-      <li>
-        <div class="fl">
-          <p>ASDHAKHFKSAJFHKA</p>
-          <span>panasonic</span>
-        </div>
-        <div class="fr">$1111.111111</div>
-      </li>
-      <li>
-        <div class="fl">
-          <p>ASDHAKHFKSAJFHKA</p>
-          <span>panasonic</span>
-        </div>
-        <div class="fr">$1111.111111</div>
-      </li>
     </ul>
   </div>
 </template>
+<script>
+  export default {
+    filters: {
+      price: function (val) {
+        return val.toFixed(2)
+      }
+    },
+    computed: {
+      commodities () {
+        return this.$store.state.shop.storeInfo.storeCommodity.data
+      },
+      date () {
+        let now = new Date()
+        const monthTemp = now.getMonth() + 1
+        const dayTemp = now.getDate()
+        const month = monthTemp < 10 ? '0' + monthTemp : monthTemp
+        const day = dayTemp < 10 ? '0' + dayTemp : dayTemp
+        return {
+          month: month,
+          day: day
+        }
+      }
+    }
+  }
+</script>
 <style lang="scss" scoped>
   .share-store-commodity {
     padding: .24rem .3rem;
@@ -61,6 +72,7 @@
           text-align: center;
           border-radius: 2px;
           background: #fa3f46;
+          margin: .04rem;
         }
       }
       .fr {
@@ -73,23 +85,32 @@
     > ul {
       li {
         height: .82rem;
-        .fl {
-          p {
-            font-size: .24rem;
-            color: #f1a850;
-          }
-          span {
-            font-size: .21rem;
-            color: #999;
+        border-bottom: .02rem solid rgba(217, 217, 217, .35);
+        > div {
+          height: .82rem;
+          &.fl {
+            line-height: .4rem;
+            p {
+              font-size: .24rem;
+              color: #f1a850;
+            }
+            span {
+              font-size: .21rem;
+              color: #999;
+            }
           }
-        }
-        .fr {
-          font-size: .24rem;
-          color: #e21616;
-          line-height: .82rem;
-          span {
-            &:nth-child(2) {
-              font-size: .26rem;
+          &.fr {
+            font-size: .24rem;
+            color: #e21616;
+            line-height: .82rem;
+            width: 1.2rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            span {
+              &:nth-child(2) {
+                font-size: .26rem;
+              }
             }
           }
         }

components/mobile/share/store/StoreFooter.vue

@@ -1,3 +1,147 @@
 <template>
-  <div>333</div>
+  <div class="share-store-footer">
+    <div class="more">
+      <div class="hr"></div>
+      <p>如需查看更多器件请登录<nuxt-link to="/">优软商城</nuxt-link></p>
+      <div class="hr"></div>
+    </div>
+    <div class="info">
+      <img src="/images/mobile/@2x/shareStore/store-info.png" alt="">
+      <div class="info-line">
+        <div class="fl">
+          <img src="/images/mobile/@2x/shareStore/phone.png" alt="">
+          <span>联系电话</span>
+        </div>
+        <div class="fr">{{storeInfo.enterprise.enTel || '无'}}</div>
+      </div>
+      <div class="info-line">
+        <div class="fl">
+          <img src="/images/mobile/@2x/shareStore/qq.png" alt="">
+          <span>传真</span>
+        </div>
+        <div class="fr">{{storeInfo.enterprise.enFax || '无'}}</div>
+      </div>
+      <div class="info-line">
+        <div class="fl">
+          <img src="/images/mobile/@2x/shareStore/address.png" alt="">
+          <span>公司地址</span>
+        </div>
+        <div class="fr">{{storeInfo.enterprise.address || storeInfo.enterprise.enAddress}}</div>
+      </div>
+    </div>
+    <div class="company">
+      <div class="hr"></div>
+      <img src="/images/mobile/@2x/shareStore/logo.png" alt="">
+      <div class="hr right"></div>
+      <p>此页面由深圳市优软商城科技有限公司提供</p>
+      <a href="https://www.usoftmall.com">www.usoftmall.com</a>
+    </div>
+  </div>
 </template>
+<script>
+  export default {
+    computed: {
+      storeInfo () {
+        return this.$store.state.shop.storeInfo.store.data
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+    .share-store-footer {
+      .more {
+        height: .62rem;
+        line-height: .62rem;
+        font-size: .21rem;
+        background: #f4f4f4;
+        text-align: center;
+        position: relative;
+        p {
+          color: #a9a9aa;
+          a {
+            color: #2f50f7;
+          }
+        }
+        .hr {
+          width: 1.09rem;
+          height: .02rem;
+          background: #d9d9d9;
+          position: absolute;
+          left: .99rem;
+          top: .3rem;
+          &:last-child {
+            right: .99rem;
+            left: auto;
+          }
+        }
+      }
+      .info {
+        height: 2.82rem;
+        background: #fff;
+        padding: .19rem .38rem 0 .35rem ;
+        > img {
+          width: 1.38rem;
+          height: .45rem;
+          margin-bottom: .25rem;
+        }
+        .info-line {
+          margin-top: .2rem;
+          height: .28rem;
+          .fl {
+            > img {
+              width: .28rem;
+              height: .28rem;
+            }
+            span {
+              font-size: .24rem;
+              color: #3c3c3c;
+              line-height: .28rem;
+              margin-left: .18rem;
+            }
+          }
+          .fr {
+            font-size: .21rem;
+            color: #ef873a;
+            line-height: .28rem;
+            max-width: 4.2rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      .company {
+        position: relative;
+        height: 1.36rem;
+        background: #f4f4f4;
+        text-align: center;
+        img {
+          width: 1.15rem;
+          height: .23rem;
+          margin-top: .24rem;
+        }
+        p {
+          font-size: .21rem;
+          color: #aaa;
+          margin: .13rem 0 0 0;
+        }
+        a {
+          margin-top: .12rem;
+          font-size: .18rem;
+          color: #bbb;
+        }
+        .hr {
+          width: 1.09rem;
+          height: .02rem;
+          background: #d9d9d9;
+          position: absolute;
+          left: 1.94rem;
+          top: .35rem;
+          &.right {
+            right: 1.94rem;
+            left: auto;
+          }
+        }
+      }
+    }
+</style>

components/mobile/share/store/StoreHeader.vue

@@ -2,15 +2,24 @@
   <div class="store-share-header">
     <div class="wrap">
       <div class="img">
-        <img src="/images/all/default.png" alt="">
+        <img :src="storeInfo.logoUrl" alt="">
       </div>
       <div class="title">
-        <h1>深圳市芯原休息休息休息</h1>
-        <p>主营电容TDK、FSDFAS、ASFAFA、AFASDA、AFAFASFASFA</p>
+        <h1>{{storeInfo.storeName}}</h1>
+        <p>{{storeInfo.description}}</p>
       </div>
     </div>
   </div>
 </template>
+<script>
+  export default {
+    computed: {
+      storeInfo () {
+        return this.$store.state.shop.storeInfo.store.data
+      }
+    }
+  }
+</script>
 <style lang="scss" scoped>
   .store-share-header {
     height: 1.9rem;
@@ -47,12 +56,15 @@
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            width: 4.5rem;
           }
           p {
             font-size: .21rem;
             color: #9c4500;
             margin-top: .2rem;
             line-height: .32rem;
+            overflow: hidden;
+            max-height: .64rem;
           }
         }
       }

pages/mobile/share/storeShare/_uuid.vue

@@ -15,7 +15,7 @@
       }
       return Promise.all([
         store.dispatch('shop/findStoreInfoFromUuid', params),
-        store.dispatch('shop/findRecommendProducts', params)
+        store.dispatch('shop/mobilePageCommoditiesOfStore', { storeid: params.uuid, origin: 'store', page: 1, count: 10 })
       ])
     },
     components: {

store/shop.js

@@ -80,6 +80,15 @@ export const actions = {
         commit('storeInfo/GET_STORE_COMMODITY_FAILURE', err)
       })
   },
+  mobilePageCommoditiesOfStore ({ commit }, params = {}) {
+    commit('storeInfo/REQUEST_STORE_COMMODITY')
+    return axios.get('/api/commodity/commodities', { params })
+      .then(response => {
+        commit('storeInfo/GET_STORE_COMMODITY_SUCCESS', response.data)
+      }, err => {
+        commit('storeInfo/GET_STORE_COMMODITY_FAILURE', err)
+      })
+  },
   // 获取保存浏览记录
   saveHistory ({ commit }, params = {}) {
     commit('storeInfo/REQUEST_SAVEHISOTRY')