ross机构授权牌，认证信息修改

.env.development

@@ -6,13 +6,9 @@ EVN = 'development'
 LOCALHOSE = 'http://192.168.2.92:8888'
 
 # 接口api地址
-# BASE_URL = 'https://zplma-b.caimei365.com'
+BASE_URL = 'https://zplma.caimei365.com'
 # BASE_URL = 'http://192.168.2.68:8012'
-<<<<<<< HEAD
-BASE_URL = 'http://192.168.2.67:8012'
-=======
 # BASE_URL = 'http://192.168.2.67:8012'
->>>>>>> developer
 
 # 静态资源文件地址
 STATIC_URL = 'https://static.caimei365.com/www/authentic'

mixins/clubDetail.js

@@ -15,12 +15,13 @@ export default {
   },
   data() {
     return {
+      showAuthCard: false,
       authId: '',
       clubInfo: {},
     }
   },
   computed: {
-    ...mapGetters(['routePrefix']),
+    ...mapGetters(['routePrefix', 'supplierInfo']),
     address() {
       let resultAddress = this.clubInfo.area
         ? this.clubInfo.area + this.clubInfo.address
@@ -32,6 +33,11 @@ export default {
         ? this.clubInfo.productList.length === 0
         : true
     },
+    // 授权牌
+    authCardImage() {
+      if (!this.clubInfo) return ''
+      return this.clubInfo.authImage
+    },
   },
   mounted() {
     this.initData()
@@ -42,6 +48,16 @@ export default {
   methods: {
     callMobile,
 
+    // 显示授权牌
+    onShowAuthCard() {
+      this.showAuthCard = true
+    },
+
+    // 隐藏授权牌
+    onHideAuthCard() {
+      this.showAuthCard = false
+    },
+
     // 设备详情
     toDetail(item) {
       const url = `${this.routePrefix}/approve/device/detail?id=${item.productId}`

pages/_template/app/docs/_fileId.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="page">
     <div class="page-top flex flex-col justify-center items-center">
-      <span class="name mt-2" v-text="supplierInfo.shopName + '资料库'"></span>
+      <span
+        class="name mt-2"
+        v-text="supplierInfo.shopName + '产品资料'"
+      ></span>
     </div>
     <div class="page-content">
       <!-- 面包屑 -->
@@ -245,6 +248,8 @@ export default {
     .name {
       font-size: 4vw;
       color: #fff;
+      text-align: center;
+      margin: 0 3.2vw;
     }
   }
 

pages/_template/ross/approve/club/detail.vue

@@ -4,38 +4,49 @@
     <div class="page-top">
       <div class="swiper">
         <SimpleSwiper :imageList="clubInfo.bannerList"></SimpleSwiper>
+        <img
+          class="auth-card"
+          :src="authCardImage"
+          @click="onShowAuthCard"
+          v-if="!showAuthCard"
+        />
       </div>
     </div>
     <div class="page-content">
-      <div class="auth">
-        <div class="auth-icon"></div>
-        <div class="auth-info">
-          <span class="font-bold">ROS'S</span>
-          <span>授予</span>
-          <span>{{ clubInfo.authParty }}</span>
-          <span>正品拥有</span>
-        </div>
-      </div>
-      <div class="club-info">
-        <div class="section flex justify-between items-center">
-          <div class="info">
-            <div class="name" v-text="clubInfo.authParty"></div>
-            <div class="mobile" @click="callMobile(clubInfo.mobile)">
-              {{ clubInfo.mobile | formatEmpty }}
+      <div class="bg-container">
+        <!-- 机构信息 -->
+        <div class="club-info">
+          <div class="section flex justify-between items-center">
+            <div class="info">
+              <div class="name" v-text="clubInfo.authParty"></div>
+              <div class="mobile" @click="callMobile(clubInfo.mobile)">
+                {{ clubInfo.mobile | formatEmpty }}
+              </div>
+              <div class="address" v-text="address"></div>
             </div>
-            <div class="address" v-text="address"></div>
+            <div class="logo"><img :src="clubInfo.logo" /></div>
+          </div>
+          <div class="section flex justify-between items-center mt-6">
+            <div class="navigation" @click="onMapNav">导航</div>
+            <div
+              class="distance"
+              v-if="clubInfo.distance && clubInfo.distance < 99999"
+              v-text="'距你' + clubInfo.distance + 'km'"
+            ></div>
           </div>
-          <div class="logo"><img :src="clubInfo.logo" /></div>
         </div>
-        <div class="section flex justify-between items-center mt-6">
-          <div class="navigation" @click="onMapNav">导航</div>
-          <div
-            class="distance"
-            v-if="clubInfo.distance && clubInfo.distance < 99999"
-            v-text="'距你' + clubInfo.distance + 'km'"
-          ></div>
+        <!-- 机构授权信息 -->
+        <div class="auth">
+          <div class="auth-icon"></div>
+          <div class="auth-info">
+            <span class="font-bold">{{ supplierInfo.shopName }}</span>
+            <span class="font-bold">授予</span>
+            <span class="font-bold">{{ clubInfo.authParty }}</span>
+            <span class="flag">正品拥有</span>
+          </div>
         </div>
       </div>
+      <!-- 分割 -->
       <div class="divider"></div>
       <div class="device-list">
         <div class="title">已认证设备</div>
@@ -65,6 +76,20 @@
       @click="navigation"
       color="#f3920d"
     ></SimpleMapNav>
+
+    <!-- 授权牌弹窗 -->
+    <div class="mask" v-if="showAuthCard" @click="onHideAuthCard"></div>
+    <transition
+      enter-active-class="animate__zoomIn"
+      leave-active-class="animate__zoomOut"
+    >
+      <div class="auth-card-content animate__animated" v-if="showAuthCard">
+        <div class="auth-card-popup">
+          <span class="el-icon-circle-close" @click="onHideAuthCard"></span>
+          <img :src="authCardImage" />
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -77,6 +102,16 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.mask {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 8;
+  background: rgba(0, 0, 0, 0.5);
+}
+
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
@@ -92,6 +127,37 @@ export default {
     padding-right: 0;
   }
 
+  .auth-card-content {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9;
+    .auth-card-popup {
+      position: relative;
+      width: 622px;
+
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .el-icon-circle-close {
+        position: absolute;
+        top: -50px;
+        right: 0;
+        font-size: 32px;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
+  }
+
   .page-title {
     position: absolute;
     font-size: 24px;
@@ -103,6 +169,7 @@ export default {
   .page-top {
     margin-right: 24px;
     .swiper {
+      position: relative;
       width: 580px;
       height: 580px;
       background: #f7f7f7;
@@ -112,6 +179,17 @@ export default {
           height: 580px;
         }
       }
+
+      .auth-card {
+        position: absolute;
+        width: auto;
+        height: 110px;
+        display: block;
+        bottom: 24px;
+        left: 24px;
+        z-index: 2;
+        cursor: pointer;
+      }
     }
   }
 
@@ -129,18 +207,28 @@ export default {
       background-color: #eeeeee;
     }
 
+    .bg-container {
+      background: url(~assets/theme-images/ross/h5-club-info-bg.png) center
+        no-repeat;
+      background-size: 100%;
+      box-sizing: border-box;
+      background-position-y: 20px;
+      background-color: #f3920d;
+      padding-bottom: 24px;
+    }
+
     .auth {
-      width: 564px;
-      min-height: 114px;
-      background: #f3920d;
+      width: 524px;
       box-sizing: border-box;
-      padding: 24px;
-      margin-bottom: 4px;
-      border-radius: 4px;
+      background: #fef5e8;
+      margin: 0 auto;
+      margin-top: 8px;
+      padding: 12px 16px;
+      border-radius: 2px;
 
       .auth-icon {
         height: 28px;
-        background: url(~assets/theme-images/ross/pc-icon-auth.png) no-repeat
+        background: url(~assets/theme-images/ross/h5-icon-auth.png) no-repeat
           left center;
         background-size: auto 28px;
       }
@@ -150,7 +238,12 @@ export default {
         margin-top: 10px;
         span {
           font-size: 20px;
-          color: #fff;
+          line-height: 1.6;
+          color: #f3920d;
+
+          &.font-bold {
+            font-weight: bold;
+          }
         }
       }
     }
@@ -159,10 +252,6 @@ export default {
       padding: 32px 24px;
       width: 564px;
       min-height: 264px;
-      background: url(~assets/theme-images/ross/pc-club-info-bg.png) center
-        no-repeat;
-      background-size: cover;
-      box-sizing: border-box;
 
       .info {
         width: 360px;
@@ -218,6 +307,7 @@ export default {
         border-radius: 50% 50% 0 50%;
         overflow: hidden;
         background: #fff;
+        display: flex;
 
         &::after {
           position: absolute;
@@ -339,8 +429,40 @@ export default {
     display: none;
   }
 
+  .auth-card-content {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9;
+    .auth-card-popup {
+      position: relative;
+      width: 86vw;
+
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .el-icon-circle-close {
+        position: absolute;
+        top: -8vw;
+        right: 0;
+        font-size: 7vw;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
+  }
+
   .page-top {
     .swiper {
+      position: relative;
       height: 100vw;
 
       background: #f7f7f7;
@@ -349,32 +471,57 @@ export default {
           height: 100vw;
         }
       }
+
+      .auth-card {
+        position: absolute;
+        width: auto;
+        height: 20.6vw;
+        display: block;
+        bottom: 4vw;
+        left: 4vw;
+        z-index: 2;
+      }
     }
   }
 
   .page-content {
+    .bg-container {
+      background: url(~assets/theme-images/ross/h5-club-info-bg.png) center
+        no-repeat;
+      background-size: 100vw;
+      box-sizing: border-box;
+      background-position-y: 4vw;
+      background-color: #f3920d;
+      padding-bottom: 5vw;
+    }
+
     .auth {
-      // width: 100%;
-      min-height: 20vw;
-      background: #f3920d;
+      width: 92vw;
       box-sizing: border-box;
-      padding: 5.2vw 4vw;
+      background: #fef5e8;
+      margin: 0 auto;
+      margin-top: 3.2vw;
+      padding: 4vw 3.5vw;
+      border-radius: 0.8vw;
 
       .auth-icon {
-        height: 4.9vw;
+        height: 6.2vw;
         background: url(~assets/theme-images/ross/h5-icon-auth.png) no-repeat
           left center;
-        background-size: auto 4.9vw;
+        background-size: auto 6.2vw;
       }
 
       .auth-info {
         font-size: 0;
-        margin-top: 1vw;
+        margin-top: 2.2vw;
         span {
           font-size: 3.6vw;
-          line-height: 6.4vw;
-          color: #fff;
-          font-weight: bold;
+          line-height: 5.8vw;
+          color: #f3920d;
+
+          &.font-bold {
+            font-weight: bold;
+          }
         }
       }
     }
@@ -382,10 +529,6 @@ export default {
       padding: 4vw;
       width: 100vw;
       min-height: 43.4vw;
-      background: url(~assets/theme-images/ross/h5-club-info-bg.png) center
-        no-repeat;
-      background-size: cover;
-      box-sizing: border-box;
 
       .info {
         width: 67vw;
@@ -440,6 +583,7 @@ export default {
         border-radius: 9vw 9vw 0 9vw;
         overflow: hidden;
         background: #fff;
+        display: flex;
 
         &::after {
           position: absolute;

pages/_template/ross/docs/_fileId.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="page-top flex flex-col justify-center items-center">
-      <span class="name mt-2" v-text="supplierInfo.shopName + '资料库'"></span>
+      <span class="name mt-2" v-text="supplierInfo.shopName + '产品资料'"></span>
     </div>
     <div class="page-content">
       <!-- 面包屑 -->
@@ -244,6 +244,8 @@ export default {
     .name {
       font-size: 4vw;
       color: #fff;
+      text-align: center;
+      margin: 0 3.2vw;
     }
   }