静态页面

src/components/common/MainPageContainer/index.vue

@@ -11,7 +11,7 @@
       </span>
       <a class="MainHeaderMore" v-if="ShowMainHeaderMore" @click="MainHeaderMoreClick">
         <span>{{MainHeaderMoreText}}</span>
-        <i class="iconfont" v-if="MainHeaderMoreIcon !== ''" :class="MainHeaderMoreIcon"></i>
+        <i class="iconfont" v-if="MainHeaderMoreIcon !== '' && MainHeaderMoreIcon !== null" :class="MainHeaderMoreIcon"></i>
       </a>
     </div>
 

src/pages/HuiYuan/CaiMinLieBiao/index.vue

@@ -7,7 +7,8 @@
             <ul>
               <li v-for="(item, index) in CurrentShopAllCustomer" :key="index" class="flex-h">
                 <div class="Icon">
-                  <img src="" class="centerLabel cover" alt="">
+                  <img v-if="item.avatar !== null && item.avatar !== ''" :src="item.avatar" class="centerLabel cover" alt="">
+                  <span v-else class="centerLabel">{{item.name.substring(0, 1)}}</span>
                 </div>
                 <div class="flex-item">
                   <div>

src/pages/HuiYuan/CaiMinLieBiao/page.scss

@@ -23,6 +23,12 @@
             position: relative;
             overflow: hidden;
             margin-right: 0.1rem;
+            background: #f8f8f8;
+            > span {
+              font-size: 0.2rem;
+              font-weight: bold;
+              color: #333;
+            }
           }
           > .flex-item {
             position: relative;

src/pages/HuiYuan/ShouYe/index.vue

@@ -19,7 +19,7 @@
                   <ul>
                     <li v-for="(item, index) in CurrentShopCustomer" :key="index" class="flex-h">
                       <div class="Icon">
-                        <img v-if="item.avatar !== null" :src="item.avatar" class="centerLabel cover" alt="">
+                        <img v-if="item.avatar !== null && item.avatar !== ''" :src="item.avatar" class="centerLabel cover" alt="">
                         <span v-else class="centerLabel">{{item.name.substring(0, 1)}}</span>
                       </div>
                       <div class="flex-item">

src/pages/WoDe/ShiMingRenZheng/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="Page">
-    <MainPageContainer @ShopInfoChange="Init" :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="支付宝实名认证">
+    <MainPageContainer @ShopInfoChange="Init" :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="支付宝实名认证" :ShowMainHeaderMore="true" :MainHeaderMoreText="`认证`" :MainHeaderMoreClick="() => { ShowQrCode = true }">
       <div class="PageContainer">
         <div class="Form">
           <div class="flex-h">
@@ -20,12 +20,26 @@
         <div class="Btn">
           <a @click="ToAliShiMingRenZheng">确定</a>
         </div>
+
+        <div class="QrCodeLayer" v-if="CurrentShopInfo !== null && !CurrentShopInfo.isAliAuthed && ShowQrCode">
+          <div class="centerLabel">
+            <div class="Top">
+              <span>授权二维码</span>
+              <a class="iconfont iconguanbi" @click="ShowQrCode = false"></a>
+            </div>
+            <div class="QrCode">
+              <img :src="QrCodeUrl" class="centerLabel contain" alt="">
+            </div>
+            <span class="Tips">请保存此二维码截图至手机，并用手机支付宝识别图中二维码，进行授权。</span>
+          </div>
+        </div>
       </div>
     </MainPageContainer>
   </div>
 </template>
 
 <script>
+import QRCode from 'qrcode'
 import MainPageContainer from '../../../components/common/MainPageContainer'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
@@ -33,9 +47,11 @@ export default {
   name: '',
   data () {
     return {
+      QrCodeUrl: null,
       RealName: '',
       AliAccount: '',
-      DataLock: false
+      DataLock: false,
+      ShowQrCode: false
     }
   },
   computed: {
@@ -63,6 +79,13 @@ export default {
       if (this.CurrentShopInfo !== null) {
         this.AliAccount = this.CurrentShopInfo.aliLoginId
         this.RealName = this.CurrentShopInfo.alipayName
+        if (!this.CurrentShopInfo.isAliAuthed) {
+          QRCode.toDataURL(this.CurrentShopInfo.aliAuthURL).then((res) => {
+            this.QrCodeUrl = res
+          }).catch((res) => {
+            console.log(res)
+          })
+        }
       }
     },
     ToAliShiMingRenZheng () {

src/pages/WoDe/ShiMingRenZheng/page.scss

@@ -53,5 +53,57 @@
         color: #fff;
       }
     }
+    > .QrCodeLayer {
+      width: 100%;
+      position: fixed;
+      z-index: 10;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.8);
+      > div {
+        width: 80%;
+        border-radius: 0.06rem;
+        background: #fff;
+        padding: 0.1rem 0;
+        > .Top {
+          position: relative;
+          overflow: hidden;
+          > span {
+            display: block;
+            font-size: 0.14rem;
+            text-align: center;
+            position: relative;
+            z-index: 1;
+            line-height: 0.4rem;
+          }
+          > a {
+            display: inline-block;
+            font-size: 0.18rem;
+            position: absolute;
+            z-index: 2;
+            right: 0.15rem;
+            top: 0;
+            line-height: 0.4rem;
+          }
+        }
+        > .QrCode {
+          width: 1.5rem;
+          height: 1.5rem;
+          border: 0.01rem solid #eee;
+          position: relative;
+          overflow: hidden;
+          margin: 0 auto;
+        }
+        > span {
+          display: block;
+          padding: 0 0.15rem;
+          font-size: 0.12rem;
+          line-height: 0.2rem;
+          margin-top: 0.15rem;
+          text-align: center;
+        }
+      }
+    }
   }
 }