123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321 |
- <template>
- <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
- <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-card>
- </template>
- <script>
- import {deleteAction, postAction, getAction} from '@/api/manage'
- import UploadToAli from '@femessage/upload-to-ali';
- import {mapActions, mapGetters} from 'vuex'
- export default {
- name: 'BaseForm',
- components: {
- UploadToAli
- },
- data() {
- return {
- 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'
- }
- }
- },
- methods: {
- ...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') {
- if (this.file != '') {
- params.file = this.file;
- }
- } else if (this.uploadType == '2') {
- params.url = this.downloadUrl;
- }
- if (this.imageUrl != '') {
- 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("创建应用成功");
- } else {
- alert(res.message)
- }
- });
- }
- })
- },
- 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("广告组模板创建成功");
- } else {
- alert(res.message)
- }
- });
- }
- })
- },
- onChange(value) {
- console.log(value);
- },
- }
- }
- </script>
|