静态页面

src/pages/WoDe/ZhiFuBaoRenZheng/index.vue

 <template>
   <div class="Page">
-    <MainPageContainer :ShowMainHeader="true" :MainHeaderTitle="`支付宝认证`" :ShowMainHeaderBack="true" :ShowMainHeaderMore="true" :MainHeaderMoreText="`保存`">
+    <MainPageContainer @UserInfoChange="UserInfoChange" :ShowMainHeader="true" :MainHeaderTitle="`支付宝认证`" :ShowMainHeaderBack="true" :ShowMainHeaderMore="true" :MainHeaderMoreText="`保存`">
       <div class="Container">
-        <div class="Content">
+        <div class="Content" v-if="UserInfo !== null && UserInfo.isValidAli">
 
           <div>
             <div class="Line flex-h">
           </div>
 
         </div>
+        <div class="Content" v-if="UserInfo !== null && !UserInfo.isValidAli">
+          <a class="AliShouQuan centerLabel">支付宝授权</a>
+        </div>
       </div>
     </MainPageContainer>
   </div>
 
 <script>
 import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
   name: 'index',
   data () {
     return {
+      Timer: null
     }
   },
   computed: {
+    ...mapUserState({
+      CurrentShopInfo: x => x.CurrentShopInfo,
+      UserInfo: x => x.UserInfo
+    })
   },
   components: {
     MainPageContainer
   },
   created () {
+    if (this.UserInfo !== null) {
+      this.UserInfoChange()
+    }
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
+    ...mapUserActions([
+      'GetAliAppId'
+    ]),
+    UserInfoChange () {
+      if (this.UserInfo !== null && !this.UserInfo.isValidAli) {
+        let HtmlHead = document.getElementsByTagName('head')[0]
+        let Script = document.createElement('script')
+        Script.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js'
+        HtmlHead.appendChild(Script)
+        window.clearInterval(this.Timer)
+        this.Timer = window.setInterval(() => {
+          if (window.ap) {
+            window.clearInterval(this.Timer)
+            this.GetAliAppId().then((res) => {
+              document.getElementsByClassName('AliShouQuan')[0].addEventListener('click', () => {
+                window.ap.getAuthCode({
+                  appId: res.data.data,
+                  scopes: ['auth_base']
+                }, (subRes) => {
+                  console.log(subRes)
+                })
+              })
+            })
+          }
+        }, 100)
+      }
+    },
     Refresh (done) { // 页面下拉刷新
       window.setTimeout(() => {
         done()

src/pages/WoDe/ZhiFuBaoRenZheng/page.scss

       position: relative;
       overflow: hidden;
       padding-bottom: 0.2rem;
+      min-height: 100%;
+      > .AliShouQuan {
+        font-size: 0.14rem;
+        line-height: 0.4rem;
+        width: 80%;
+        text-align: center;
+        background: #d91e36;
+        color: #fff;
+        border-radius: 0.06rem;
+      }
       > div {
         padding: 0 0.15rem;
         background: #fff;

src/store/user/index.js

     }
   },
   actions: {
+    GetAliAppId (context, payload) { // 获取阿里pay id
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.GetAliAppId, context, payload, 1000)
+      })
+    },
     ShopValid (context, payload) { // 店铺认证
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.ShopValid, context, payload, 1000)

src/util/Api.js

 const prefix = process.env.NODE_ENV === 'production' ? '/api' : '/api'
 
 const $api = {
+  GetAliAppId: { // 获取阿里pay id
+    method: 'get',
+    url: `${prefix}/shop/alipay/appid`
+  },
   ShopValid: { // 店铺认证
     method: 'put',
     url: `${prefix}/app/shop/valid`