商家详情添加联系方式

2code/web/h5_pro/src/views/shopDetails/index.vue

 <template>
     <div class="page-wrapper">
         <c-header title="商家详情"></c-header>
+
         <div class="shop-main-infro">
-            <div class="shop-name">{{shopData.storeName}}</div>
-            <div class="infro"><i class="iconfont icon-shijian"></i> {{shopData.storeBusinessTimeStart}}-{{shopData.storeBusinessTimeEnd}}    <i class="iconfont icon-xiaofei"></i>{{shopData.consumeInterval}}</div>
-            <div class="address">{{shopData.province}} {{shopData.cityName}} {{shopData.county}} {{shopData.storePosition}}</div>
+            <div class="img" :style="{'background-image':`url(${shopData.storeHomePic})`}"></div>
+            <div class="infro-wrapper">
+                <div class="shop-name">{{shopData.storeName}}</div>
+                <div class="infro"><i class="iconfont icon-shijian"></i> {{shopData.storeBusinessTimeStart}}-{{shopData.storeBusinessTimeEnd}}    <i class="iconfont icon-xiaofei"></i>{{shopData.consumeInterval}}</div>
+                <div class="address">{{shopData.province}} {{shopData.cityName}} {{shopData.county}} {{shopData.storePosition}}</div>
+            </div>
         </div>
 
-        <s-infro-content title="商家详情" :data="shopData.storeDetails" type='1'></s-infro-content>
 
+        <s-infro-content title="商家二维码" type='2'>
+            <div class="contect-container">
+                <div class="ewm-img">
+                    <img :src="shopData.qrCode" alt="">
+                </div>
+                <!-- <div class="ewm-phone">{{shopData.contactNumber}}</div> -->
+            </div>
+        </s-infro-content>
+
+        <s-infro-content title="商家电话" type='2'>
+            <div class="contect-container">
+                <a :href="'tel:'+shopData.contactNumber">{{shopData.contactNumber}}</a>
+            </div>
+        </s-infro-content>
+
+        <s-infro-content title="商家详情" :data="shopData.storeDetails" type='1'></s-infro-content>
+        
         <s-infro-content title="在线员工" type='2'>
             <div class="employee-wrapper" v-if="workerData">
 
@@ -72,35 +92,50 @@ export default {
 <style lang="less" scoped>
 @r:100rem;
 .shop-main-infro{
-    padding:30/@r;
-    .shop-name{
-        font-size: 40/@r;
-        color: #333;
-        font-weight: 700
-    }
-    .brief{
-        font-size: 32/@r;
-        color: #666;
-        margin-top: 10/@r;
+    position: relative;
+    margin-bottom: 20/@r;
+    .img{
+        height: 500/@r;
+        background: #dedede;
+        background-size: cover;
+        background-position: center center;
     }
-    .address{
-        font-size: 24/@r;
-        color: #666;
-        margin-top: 10/@r;
-    }
-    .infro{
-        font-size: 24/@r;
-        color: #999;
-        margin: 10/@r;
-        i{
-            color: #de4b4b;
-            vertical-align: -4/@r;
-
-            &.icon-xiaofei{
-                margin-left: 20/@r;
+    .infro-wrapper{
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 0; 
+        padding: 10/@r 30/@r;
+        background: rgba(0, 0, 0, .5);
+
+        .shop-name{
+            font-size: 36/@r;
+            color: #fff;
+            font-weight: 700
+        }
+        .brief{
+            font-size: 32/@r;
+            color: #fff;
+        }
+        .address{
+            font-size: 24/@r;
+            color: #fff;
+        }
+        .infro{
+            margin: 4/@r 0;
+            font-size: 24/@r;
+            color: #fff;
+            i{
+                color: #fff;
+                vertical-align: -4/@r;
+
+                &.icon-xiaofei{
+                    margin-left: 20/@r;
+                }
             }
         }
     }
+    
 }
 
 .employee-wrapper{
@@ -156,5 +191,22 @@ export default {
     margin-top: 150/@r;
 }
 
+.contect-container{
+    font-size: 32/@r;
+    .ewm-img{
+        width: 300/@r;
+        height: 300/@r;
+        img{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    a{
+        color: #666;
+        font-weight: 700;
+    }
+    
+}
+
 </style>