店铺分享头部

components/mobile/share/store/CommodityList.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="share-store-commodity">
+    <div class="title">
+      <img src="/images/mobile/@2x/shareStore/commodity-title@2x.png" alt="">
+      <div class="date">
+        <span>02</span>月<span>01</span>日
+      </div>
+      <div class="fr">真实库存、真实价格</div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .share-store-commodity {
+    padding: .24rem .3rem;
+    .title {
+      img {
+        width: 1.59rem;
+        height: .45rem;
+      }
+      .date {
+        display: inline-block;
+        font-size: .21rem;
+        color: #fa3f46;
+        position: relative;
+        top: .06rem;
+        left: .32rem;
+        span {
+          color: #fff;
+          font-size: .24rem;
+          display: inline-block;
+          width: .32rem;
+          height: .28rem;
+          line-height: .28rem;
+          text-align: center;
+          border-radius: 2px;
+          background: #fa3f46;
+        }
+      }
+      .fr {
+        font-size: .24rem;
+        color: #666;
+        position: relative;
+        top: .16rem;
+      }
+    }
+  }
+</style>

components/mobile/share/store/StoreFooter.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>333</div>
+</template>

components/mobile/share/store/StoreHeader.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="store-share-header">
+    <div class="wrap">
+      <div class="img">
+        <img src="/images/all/default.png" alt="">
+      </div>
+      <div class="title">
+        <h1>深圳市芯原休息休息休息</h1>
+        <p>主营电容TDK、FSDFAS、ASFAFA、AFASDA、AFAFASFASFA</p>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .store-share-header {
+    height: 1.9rem;
+    background: #272a32;
+    padding-top: .18rem;
+    .wrap {
+      height: 1.72rem;
+      width: 7.16rem;
+      margin: 0 auto;
+      background: url('/images/mobile/@2x/shareStore/background@2x.png') no-repeat;
+      background-size: cover;
+      padding: .2rem 0 0 .4rem;
+      > div {
+        display: inline-block;
+        vertical-align: middle;
+        &.img {
+          width: 1.24rem;
+          height: 1.24rem;
+          text-align: center;
+          line-height: 1.24rem;
+          border-radius: 2px;
+          background: #fff;
+          img {
+            max-width: 1.24rem;
+            max-height: 1.24rem;
+          }
+        }
+        &.title {
+          margin-left: .44rem;
+          width: 5rem;
+          h1 {
+            font-size: .36rem;
+            color: #662d00;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          p {
+            font-size: .21rem;
+            color: #9c4500;
+            margin-top: .2rem;
+            line-height: .32rem;
+          }
+        }
+      }
+    }
+  }
+</style>

pages/mobile/share/storeShare/_uuid.vue

@@ -1,9 +1,12 @@
 <template>
   <div>
-    111
+    <store-header></store-header>
+    <commodity-list></commodity-list>
+    <store-footer></store-footer>
   </div>
 </template>
 <script>
+  import {CommodityList, StoreHeader, StoreFooter} from '~components/mobile/share'
   export default {
     layout: 'mobileStore',
     fetch ({ store, params, redirect }) {
@@ -14,6 +17,11 @@
         store.dispatch('shop/findStoreInfoFromUuid', params),
         store.dispatch('shop/findRecommendProducts', params)
       ])
+    },
+    components: {
+      CommodityList,
+      StoreHeader,
+      StoreFooter
     }
   }
 </script>