feat: 收款账户新增支付宝授权

src/common/components/element-ui.js

@@ -41,7 +41,8 @@ import {
   Upload,
   Descriptions,
   DescriptionsItem,
-  InputNumber
+  InputNumber,
+  Link
 } from 'element-ui'
 
 const components = [
@@ -82,7 +83,8 @@ const components = [
   Upload,
   Descriptions,
   DescriptionsItem,
-  InputNumber
+  InputNumber,
+  Link
 ]
 
 export default {

src/views/user/baseProceedsAccount.vue

@@ -52,6 +52,7 @@
           <el-select
             v-model="addFormData.accountType"
             placeholder="请选择账户类型"
+            @change="accountTypeChange"
             style="width: 100%">
             <el-option
               v-for="item in accountTypeList"
@@ -154,6 +155,7 @@
             v-model="addFormData.isEnable"
             active-color="#67C23A"
             inactive-color="#F56C6C"
+            @change="dialogEnableChange"
             active-text="启用"
             inactive-text="禁用"></el-switch>
         </el-form-item>
@@ -172,7 +174,7 @@
       <el-descriptions
         class="margin-top"
         :column="3"
-        :labelStyle="{ width: '120px' }"
+        :labelStyle="{ width: '130px' }"
         :contentStyle="{ width: '200px', textAlign: 'center' }"
         border>
         <el-descriptions-item
@@ -234,7 +236,17 @@
         <el-descriptions-item label="排序">
           {{ detailFormData.sort }}
         </el-descriptions-item>
-        <el-descriptions-item />
+        <el-descriptions-item label="支付宝授权状态">
+          <span v-if="detailFormData.accountType === 'alipay'">
+            <el-tag
+              type="success"
+              size="small"
+              v-if="detailFormData.appAuthToken">
+              已授权
+            </el-tag>
+            <el-tag type="danger" size="small" v-else>未授权</el-tag>
+          </span>
+        </el-descriptions-item>
         <el-descriptions-item label="创建时间">
           {{ detailFormData.createTime }}
         </el-descriptions-item>
@@ -607,6 +619,28 @@ export default {
           }
         },
         {
+          label: '支付宝授权状态',
+          key: 'appAuthToken',
+          width: '150',
+          render: (item) => {
+            if (item.accountType !== 'alipay') {
+              return null
+            }
+            if (item.appAuthToken) {
+              return <span>已授权</span>
+            } else {
+              return (
+                <el-link
+                  type="danger"
+                  href="https://openauth.alipay.com/oauth2/appToAppAuth.htm?app_id=2018022802291295&redirect_uri=https://qcze70557268.vicp.fun/api/manage/rest/ali/auth&state=14"
+                  target="_blank">
+                  未授权，点击授权
+                </el-link>
+              )
+            }
+          }
+        },
+        {
           label: '银行卡开户行',
           key: 'openBank',
           width: '200'
@@ -889,6 +923,15 @@ export default {
       this.type = 'changeStatus'
       this.currentRow = row
       if (this.setVerificationMethod()) {
+        // 未授权支付宝不可启用账户
+        if (
+          flag === false &&
+          row.accountType === 'alipay' &&
+          !row.appAuthToken
+        ) {
+          this.$message.warning('请先授权支付宝')
+          return
+        }
         this.securityVisible = true
       }
     },
@@ -923,6 +966,22 @@ export default {
         })
       }
     },
+    // 新增/编辑 账户类型变化
+    accountTypeChange() {
+      if (this.addFormData.accountType === 'alipay') {
+        this.addFormData.isEnable = false
+      }
+    },
+    // 新增/编辑 启用状态变化
+    dialogEnableChange() {
+      if (
+        this.addFormData.accountType === 'alipay' &&
+        (!this.currentRow || !this.currentRow.appAuthToken)
+      ) {
+        this.addFormData.isEnable = false
+        this.$message.warning(`请在${this.operateType}后授权支付宝，再启用账户`)
+      }
+    },
     // 新增 校验
     addVarify() {
       this.$refs.addForm.validate((valid) => {