Browse Source

账号绑定

yumeng 5 years ago
parent
commit
e0e9f5ac7e
1 changed files with 198 additions and 23 deletions
  1. 198 23
      src/views/modules/advertiser/AdvertiserList.vue

+ 198 - 23
src/views/modules/advertiser/AdvertiserList.vue

@@ -3,7 +3,8 @@
 
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline">
+      <a-form
+        layout="inline">
         <a-row :gutter="24">
 
           <a-col :md="6" :sm="8">
@@ -37,11 +38,11 @@
     <!-- 操作按钮区域 -->
     <div class="table-operator">
       <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-<!--      <a-button type="primary" icon="download" @click="handleExportXls('广告主信息表')">导出</a-button>-->
-<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"-->
-<!--                @change="handleImportExcel">-->
-<!--        <a-button type="primary" icon="import">导入</a-button>-->
-<!--      </a-upload>-->
+      <!--      <a-button type="primary" icon="download" @click="handleExportXls('广告主信息表')">导出</a-button>-->
+      <!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"-->
+      <!--                @change="handleImportExcel">-->
+      <!--        <a-button type="primary" icon="import">导入</a-button>-->
+      <!--      </a-upload>-->
       <a-dropdown v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay">
           <a-menu-item key="1" @click="batchDel">
@@ -74,7 +75,6 @@
         :loading="loading"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
         @change="handleTableChange">
-
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">编辑</a>
 
@@ -87,9 +87,84 @@
                   <a>删除</a>
                 </a-popconfirm>
               </a-menu-item>
-              <a-menu-item>
+              <!--<a-menu-item>
                   <a>账号绑定</a>
-              </a-menu-item>
+              </a-menu-item>-->
+
+
+     <a-menu-item>
+       <a @click="showModal(record)">账号绑定</a>
+       <a-modal
+         title="账号绑定"
+         v-model="visible"
+         @ok="handleOk"
+         :okButtonProps="{ props: {disabled: false} }"
+         :cancelButtonProps="{ props: {disabled: false} }"
+         :mask="false"
+       >
+          <div :style="{ marginTop: '16px' }">
+            <a-form-item
+              label="选择方式"
+              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+              :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+           <a-radio-group buttonStyle="solid" @change="onChageLogin" v-model="mode">
+           <a-radio-button value="login">登录</a-radio-button>
+           <a-radio-button value="authorization">授权</a-radio-button>
+           </a-radio-group>
+           </a-form-item>
+
+            <a-form-item
+              v-if="showLogin"
+              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+              :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+                <a-form
+                  :form="form"
+                  @submit="loginForm">
+               <a-form-item
+                 label="账号:"
+                 :label-col="{ span: 5 }"
+                 :wrapper-col="{ span: 12 }">
+                <a-input v-model="accountName"/>
+             </a-form-item>
+             <a-form-item
+               label="密码:"
+               :label-col="{ span: 5 }"
+               :wrapper-col="{ span: 12 }">
+             <a-input type="password" v-model="password"/>
+           </a-form-item>
+           <a-form-item
+             label="媒体:"
+             :label-col="{ span: 5 }"
+             :wrapper-col="{ span: 12 }">
+         <a-radio-group buttonStyle="outline" v-model="loginType">
+           <a-radio-button value="kuaishou">快手</a-radio-button>
+           <a-radio-button value="toutiao">头条</a-radio-button>
+         </a-radio-group>
+      </a-form-item>
+      <a-button htmlType="submit" type="primary">提交</a-button>
+    </a-form>
+       </a-form-item>
+          <a-form-item
+            v-if="showAuthorization"
+            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+            :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+            <a-form
+              :form="form"
+              @submit="authorizationForm"
+            >
+            <a-radio-group buttonStyle="outline" v-model="authorizationType">
+            <br/>
+           <a-radio-button value="kuaishou">快手</a-radio-button>
+           <a-radio-button value="toutiao">头条</a-radio-button>
+           </a-radio-group>
+              <br/>
+              <br/>
+           <a-button htmlType="submit" type="primary">提交</a-button>
+           </a-form>
+           </a-form-item>
+    </div>
+    </a-modal>
+  </a-menu-item>
             </a-menu>
           </a-dropdown>
         </span>
@@ -107,9 +182,11 @@
   import AdvertiserModal from './modules/AdvertiserModal'
   import {JeecgListMixin} from '@/mixins/JeecgListMixin'
   import JTreeSelect from '@/components/jeecg/JTreeSelect'
+  import {deleteAction, postAction, getAction} from '@/api/manage'
+
 
   export default {
-    name: "AdvertiserList",
+    name: 'AdvertiserList',
     mixins: [JeecgListMixin],
     components: {
       AdvertiserModal,
@@ -118,6 +195,15 @@
     data() {
       return {
         description: '广告主信息表管理页面',
+        visible: false,
+        accountName: '',
+        password: '',
+        mode: 'login',
+        showLogin: true,
+        showAuthorization: false,
+        authorizationType: 'kuaishou',
+        loginType: 'kuaishou',
+        form: this.$form.createForm(this),
         // 表头
         columns: [
           {
@@ -125,49 +211,51 @@
             dataIndex: '',
             key: 'rowIndex',
             width: 60,
-            align: "center",
+            align: 'center',
             customRender: function (t, r, index) {
               return parseInt(index) + 1;
             }
           },
           {
             title: '广告主名称',
-            align: "center",
+            align: 'center',
             dataIndex: 'name'
           },
           {
             title: '行业',
-            align: "center",
+            align: 'center',
             dataIndex: 'industryId'
           },
           {
             title: '联系人姓名',
-            align: "center",
+            align: 'center',
             dataIndex: 'contact'
           },
           {
             title: '联系人手机',
-            align: "center",
+            align: 'center',
             dataIndex: 'mobile'
           },
           {
             title: '联系人邮箱',
-            align: "center",
+            align: 'center',
             dataIndex: 'email'
           },
           {
             title: '操作',
             dataIndex: 'action',
-            align: "center",
+            align: 'center',
             scopedSlots: {customRender: 'action'},
           }
         ],
         url: {
-          list: "/ctop/advertiser/list",
-          delete: "/ctop/advertiser/delete",
-          deleteBatch: "/ctop/advertiser/deleteBatch",
-          exportXlsUrl: "ctop/advertiser/exportXls",
-          importExcelUrl: "ctop/advertiser/importExcel",
+          list: '/ctop/advertiser/list',
+          delete: '/ctop/advertiser/delete',
+          deleteBatch: '/ctop/advertiser/deleteBatch',
+          exportXlsUrl: 'ctop/advertiser/exportXls',
+          importExcelUrl: 'ctop/advertiser/importExcel',
+          bindAccountLoginUrl: '/ctop/bindAccount/login',
+          bindAuthorizationUrl: '/ctop/bindAccount/authorization',
         },
       }
     },
@@ -176,7 +264,94 @@
         return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
       }
     },
-    methods: {}
+    methods: {
+      loginForm(e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+            if (!err) {
+              if (this.mode == 'login') {
+                console.log("这是登录");
+
+                console.log(this.record.id);
+                let params = {};
+                params.advertiserId = this.record.id;
+                params.accountName = this.accountName;
+                params.password = this.password;
+                params.loginType = this.loginType;
+                console.log(this.loginType)
+                getAction(this.url.bindAccountLoginUrl, params).then((res) => {
+                  if (res.success) {
+                    alert("绑定成功");
+                    this.accountName = '';
+                    this.password = '';
+                    this.loginType = '';
+
+                  } else {
+                    alert("绑定失败");
+                  }
+                });
+              }
+
+              if (this.mode == 'authorization') {
+                let params = {};
+                params.advertiserId = this.record.id;
+                params.authorizationType = this.radioType;
+              }
+            }
+          }
+        )
+      },
+
+      authorizationForm(e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+            if (!err) {
+              if (this.mode == 'authorization') {
+                let params = {};
+                params.advertiserId = this.record.id;
+                params.authorizationType = this.authorizationType;
+                getAction(this.url.bindAuthorizationUrl, params).then((res) => {
+                  if (res.success) {
+                    alert("绑定成功");
+                    window.open(res.message, '_blank');
+                  } else {
+                    alert("绑定失败");
+                  }
+                });
+              }
+
+
+            }
+          }
+        )
+      },
+
+      showModal(record) {
+        this.record = record
+        this.visible = true
+      },
+      handleOk(e) {
+        console.log(e);
+        this.visible = false
+      },
+      handleCancel(e) {
+        console.log(e);
+        this.visible = false
+      },
+      onChageLogin() {
+        console.log(this.mode)
+        if (this.mode == 'login') {
+          this.showLogin = true;
+          this.showAuthorization = false;
+        } else {
+          this.showLogin = false;
+          this.showAuthorization = true;
+
+
+        }
+      }
+
+    }
   }
 </script>
 <style scoped>