Bläddra i källkod

快手应用创建弹窗修改

刘政和 5 år sedan
förälder
incheckning
5bd0bb6ca9
1 ändrade filer med 311 tillägg och 63 borttagningar
  1. 311 63
      src/views/modules/kuaishouapp/modules/KuaiShouCreateAppTemplateModal.vue

+ 311 - 63
src/views/modules/kuaishouapp/modules/KuaiShouCreateAppTemplateModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal
+  <a-modal class="create_app_container"
     :title="title"
     :width="800"
     :visible="visible"
@@ -8,66 +8,158 @@
     @cancel="handleCancel"
     cancelText="关闭">
     
-    <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
-      
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="app类型 安卓 ios">
-          <a-input placeholder="请输入app类型 安卓 ios" v-decorator="['appType', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="应用类型   : 1 Android 应用下载,2: Android 网页游戏,3: iOS 应用下载, 4:iOS 网页游戏">
-          <a-input placeholder="请输入应用类型   : 1 Android 应用下载,2: Android 网页游戏,3: iOS 应用下载, 4:iOS 网页游戏" v-decorator="['platform', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="应用标记">
-          <a-input placeholder="请输入应用标记" v-decorator="['appVersion', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="应用名称">
-          <a-input placeholder="请输入应用名称" v-decorator="['appName', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="应用包名">
-          <a-input placeholder="请输入应用包名" v-decorator="['packageName', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="上传文件到服务器返回地址">
-          <a-input placeholder="请输入上传文件到服务器返回地址" v-decorator="['file', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="上传图片到服务器返回地址">
-          <a-input placeholder="请输入上传图片到服务器返回地址" v-decorator="['imageUrl', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="输入应用下载地址">
-          <a-input placeholder="请输入输入应用下载地址" v-decorator="['url', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="登录人id">
-          <a-input placeholder="请输入登录人id" v-decorator="['loginId', {}]" />
-        </a-form-item>
-		
-      </a-form>
-    </a-spin>
+    <a-form>
+
+      <a-form-item
+        label="设备类型"
+        :labelCol="{xs: {span: 24},sm: {span: 5}}"
+        :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+        <a-radio-group v-model="appType" @change="changePlatform">
+          <a-radio-button value="android">安卓</a-radio-button>
+          <a-radio-button value="ios">IOS</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        v-if="showAndroid"
+      >
+        <a-form @submit="handleSubmit" :form="form">
+          <a-form-item
+            label="推广类型"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-radio-group v-model="platform" @change="changeShowUploadType">
+              <a-radio value="1">应用下载</a-radio>
+              <a-radio value="2">网页游戏</a-radio>
+            </a-radio-group>
+          </a-form-item>
+
+          <a-form-item
+            label="上传应用"
+            v-if="showUpload"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-radio-group v-model="uploadType" @change="changeShowUpload">
+              <a-radio-button value="1">本地上传</a-radio-button>
+              <a-radio-button value="2">填写链接</a-radio-button>
+            </a-radio-group>
+          </a-form-item>
+
+          <a-form-item
+            label="上传文件"
+            v-if="showUploadFile"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <upload-to-ali v-model="file"
+                           :customDomain="customDomain"
+                           preview
+                           :region="region"
+                           :bucket="bucket"
+                           :accept="acceptVideo"
+                           :max="10"
+                           :size="1024000"
+                           :accessKeyId="accessKeyId"
+                           :accessKeySecret="accessKeySecret"></upload-to-ali>
+          </a-form-item>
+
+          <a-form-item
+            v-if="showDownLoad"
+            label="下载链接"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="downloadUrl" placeholder="请填写视频链接"/>
+          </a-form-item>
+
+
+          <a-form-item
+            label="应用包名"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="packageName" placeholder="请填写包名称,如com.smile.gifmaker"/>
+          </a-form-item>
+
+          <a-form-item
+            label="应用名称"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="appName" placeholder="请填写应用名称"/>
+          </a-form-item>
+
+          <a-form-item
+            label="上传图标"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+
+            <upload-to-ali v-model="imageUrl"
+                           :customDomain="customDomain"
+                           preview
+                           :region="region"
+                           :bucket="bucket"
+                           :accept="acceptVideo"
+                           :max="10"
+                           :size="1024000"
+                           :accessKeyId="accessKeyId"
+                           :accessKeySecret="accessKeySecret"></upload-to-ali>
+          </a-form-item>
+
+          <a-form-item
+            label="应用标记"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="appVersion" placeholder="请填写应用标记,必填且不可重复,如快手-5.6.1.66"/>
+          </a-form-item>
+
+          <a-form-item :wrapperCol="{ span: 24 }"
+                       style="text-align: center">
+            <a-button htmlType="submit" type="primary">提交</a-button>
+            <a-button style="margin-left: 8px">保存</a-button>
+          </a-form-item>
+        </a-form>
+      </a-form-item>
+
+
+      <a-form-item
+        v-if="showIOS"
+      >
+        <a-form @submit="submitIOS" :form="form">
+          <a-form-item
+            label="推广类型"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-radio-group v-model="platform">
+              <a-radio value="3">应用下载</a-radio>
+              <a-radio value="4">网页游戏</a-radio>
+            </a-radio-group>
+          </a-form-item>
+
+          <a-form-item
+            v-if="showDownLoad"
+            label="填写链接"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="downloadUrl" placeholder="请填写应用下载地址"/>
+          </a-form-item>
+
+          <a-form-item
+            label="应用名称"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="appName" placeholder="请填写应用名称"/>
+          </a-form-item>
+          <a-form-item
+            label="应用标记"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="appVersion" placeholder="请填写应用标记,必填且不可重复,如快手-5.6.1.66"/>
+          </a-form-item>
+          <a-form-item :wrapperCol="{ span: 24 }"
+                       style="text-align: center">
+            <a-button htmlType="submit" type="primary">提交</a-button>
+            <a-button style="margin-left: 8px">保存</a-button>
+          </a-form-item>
+        </a-form>
+      </a-form-item>
+
+    </a-form>
   </a-modal>
 </template>
 
@@ -75,9 +167,17 @@
   import { httpAction } from '@/api/manage'
   import pick from 'lodash.pick'
   import moment from "moment"
+  
+  // 迁移
+  import {deleteAction, postAction, getAction} from '@/api/manage'
+  import UploadToAli from '@femessage/upload-to-ali';
+  import {mapActions, mapGetters} from 'vuex'
 
   export default {
     name: "KuaiShouCreateAppTemplateModal",
+    components: {
+      UploadToAli
+    },
     data () {
       return {
         title:"操作",
@@ -100,6 +200,33 @@
           add: "/kuaishou/kuaiShouCreateAppTemplate/add",
           edit: "/kuaishou/kuaiShouCreateAppTemplate/edit",
         },
+
+        // 迁移
+        appType: 'android',//设备类型
+        platform: '1',//应用类型   : 1 Android 应用下载,2: Android 网页游戏,3: iOS 应用下载, 4:iOS 网页游戏
+        uploadType: '1',//上传类型 1 本地上传 2 填写链接
+        appVersion: '',//应用标记
+        appName: '',// 应用名称
+        packageName: '',//应用包名
+        file: '',// 上传文件
+        imageUrl: '',// 上传图标链接链接
+        downloadUrl: '', //下载链接
+        showUploadFile: true,
+        showDownLoad: false,
+        showUpload: true,
+        showAndroid: true,
+        showIOS: false,
+        customDomain: '',
+        acceptVideo: '/*.apk,/*.png,/*.jpg,/*.jpeg,/*.mp4',
+        accessKeyId: 'LTAIbNbqWzSOklQV',
+        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+        region: 'oss-cn-beijing',
+        bucket: 'ctop-media',
+        form: this.$form.createForm(this),
+        url: {
+
+          insertTemplateUrl: '/kuaishou/kuaiShouCreateAppTemplate/insert'
+        }
       }
     },
     created () {
@@ -162,11 +289,132 @@
         this.close()
       },
 
+    // 迁移
+    ...mapGetters(["nickname", "avatar", "userInfo"]),
+      changePlatform() {
+        if (this.appType == 'android') {
+          this.showAndroid = true;
+          this.showIOS = false;
+          this.platform = '1';
+        } else {
+          this.showAndroid = false;
+          this.showIOS = true;
+          this.showDownLoad = true;
+          this.platform = '3';
+        }
+
+      },
+      changeShowUpload() {
+        if (this.uploadType == '1') {
+          this.showUploadFile = true;
+          this.showDownLoad = false;
+        } else {
+          this.showUploadFile = false;
+          this.showDownLoad = true;
+        }
+      },
+      changeShowUploadType() {
+        if (this.platform == '2') {
+          this.showUpload = false;
+          this.showUploadFile = false;
+          this.showDownLoad = true;
+          this.uploadType = '1';
+        } else {
+          this.showUpload = true;
+          this.showUploadFile = true;
+          this.showDownLoad = false;
+        }
+
+      },
+
+      handleSubmit(e) {
+        console.log("设备类型:" + this.appType);
+        console.log("应用类型:" + this.platform);
+        console.log("上传类型:" + this.uploadType);
+        console.log("应用标记:" + this.appVersion);
+        console.log("应用名称:" + this.appName);
+        console.log("包名称:" + this.packageName);
+        console.log("文件地址:" + this.file);
+        console.log("图片地址:" + this.imageUrl);
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            console.log('Received values of form: ', values);
+            let params = {};
+            if (this.uploadType == '1') {
+              params.file = this.file;
+            } else if (this.uploadType == '2') {
+              params.url = this.downloadUrl;
+            }
+            params.imageUrl = this.imageUrl;
+            params.platform = this.platform;
+            params.appType = this.appType;
+            params.packageName = this.packageName;
+            params.appName = this.appName;
+            params.appVersion = this.appVersion;
+            params.loginId = this.userInfo().id;
+            console.log(params)
+             postAction(this.url.insertTemplateUrl, params).then((res) => {
+               console.log(res)
+               if (res.success) {
+                 alert("创建应用成功");
+                 this.close();
+               }
+             });
+          }
+        })
+      },
+
+
+      submitIOS(e) {
+        console.log("设备类型:" + this.appType);
+        console.log("应用类型:" + this.platform);
+        console.log("上传类型:" + this.uploadType);
+        console.log("应用标记:" + this.appVersion);
+        console.log("应用名称:" + this.appName);
+        console.log("包名称:" + this.packageName);
+        console.log("文件地址:" + this.file);
+        console.log("图片地址:" + this.imageUrl);
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            console.log('Received values of form: ', values);
+            let params = {};
+            params.appType = this.appType;
+            params.platform = this.platform;
+            params.url = this.downloadUrl;
+            params.appName = this.appName;
+            params.appVersion = this.appVersion;
+            params.loginId = this.userInfo().id;
+            console.log(params)
+             postAction(this.url.insertTemplateUrl, params).then((res) => {
+               console.log(res)
+               if (res.success) {
+                 alert("广告组模板创建成功");
+                 this.visible = false;
+               }
+             });
+          }
+        })
+      },
+
+
+      onChange(value) {
+        console.log(value);
+      },
 
     }
   }
 </script>
 
-<style lang="less" scoped>
-
+<style lang="scssgit ">
+    .create_app_container{
+        // .ant-modal-body {
+        //     height: 650px;
+        //     overflow-y: scroll;
+        // }
+        .ant-modal-footer{
+            display: none;
+        }
+    }
 </style>