uploadApp.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. <template>
  2. <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
  3. <a-form>
  4. <a-form-item
  5. label="设备类型"
  6. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  7. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  8. <a-radio-group v-model="appType" @change="changePlatform">
  9. <a-radio-button value="android">安卓</a-radio-button>
  10. <a-radio-button value="ios">IOS</a-radio-button>
  11. </a-radio-group>
  12. </a-form-item>
  13. <a-form-item
  14. v-if="showAndroid"
  15. >
  16. <a-form @submit="handleSubmit" :form="form">
  17. <a-form-item
  18. label="推广类型"
  19. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  20. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  21. <a-radio-group v-model="platform" @change="changeShowUploadType">
  22. <a-radio value="1">应用下载</a-radio>
  23. <a-radio value="2">网页游戏</a-radio>
  24. </a-radio-group>
  25. </a-form-item>
  26. <a-form-item
  27. label="上传应用"
  28. v-if="showUpload"
  29. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  30. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  31. <a-radio-group v-model="uploadType" @change="changeShowUpload">
  32. <a-radio-button value="1">本地上传</a-radio-button>
  33. <a-radio-button value="2">填写链接</a-radio-button>
  34. </a-radio-group>
  35. </a-form-item>
  36. <a-form-item
  37. label="上传文件"
  38. v-if="showUploadFile"
  39. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  40. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  41. <upload-to-ali v-model="file"
  42. :customDomain="customDomain"
  43. preview
  44. :region="region"
  45. :bucket="bucket"
  46. :accept="acceptVideo"
  47. :max="10"
  48. :size="1024000"
  49. :accessKeyId="accessKeyId"
  50. :accessKeySecret="accessKeySecret"></upload-to-ali>
  51. </a-form-item>
  52. <a-form-item
  53. v-if="showDownLoad"
  54. label="下载链接"
  55. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  56. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  57. <a-input v-model="downloadUrl" placeholder="请填写应用链接"/>
  58. </a-form-item>
  59. <a-form-item
  60. label="应用包名"
  61. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  62. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  63. <a-input v-model="packageName" placeholder="请填写包名称,如com.smile.gifmaker"/>
  64. </a-form-item>
  65. <a-form-item
  66. label="应用名称"
  67. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  68. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  69. <a-input v-model="appName" placeholder="请填写应用名称"/>
  70. </a-form-item>
  71. <a-form-item
  72. label="上传图标"
  73. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  74. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  75. <upload-to-ali v-model="imageUrl"
  76. :customDomain="customDomain"
  77. preview
  78. :region="region"
  79. :bucket="bucket"
  80. :accept="acceptVideo"
  81. :max="10"
  82. :size="1024000"
  83. :accessKeyId="accessKeyId"
  84. :accessKeySecret="accessKeySecret"></upload-to-ali>
  85. </a-form-item>
  86. <a-form-item
  87. label="应用标记"
  88. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  89. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  90. <a-input v-model="appVersion" placeholder="请填写应用标记,必填且不可重复,如快手-5.6.1.66"/>
  91. </a-form-item>
  92. <a-form-item :wrapperCol="{ span: 24 }"
  93. style="text-align: center">
  94. <a-button htmlType="submit" type="primary">提交</a-button>
  95. <a-button style="margin-left: 8px">保存</a-button>
  96. </a-form-item>
  97. </a-form>
  98. </a-form-item>
  99. <a-form-item
  100. v-if="showIOS"
  101. >
  102. <a-form @submit="submitIOS" :form="form">
  103. <a-form-item
  104. label="推广类型"
  105. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  106. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  107. <a-radio-group v-model="platform">
  108. <a-radio value="3">应用下载</a-radio>
  109. <a-radio value="4">网页游戏</a-radio>
  110. </a-radio-group>
  111. </a-form-item>
  112. <a-form-item
  113. v-if="showDownLoad"
  114. label="填写链接"
  115. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  116. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  117. <a-input v-model="downloadUrl" placeholder="请填写应用下载地址"/>
  118. </a-form-item>
  119. <a-form-item
  120. label="应用名称"
  121. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  122. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  123. <a-input v-model="appName" placeholder="请填写应用名称"/>
  124. </a-form-item>
  125. <a-form-item
  126. label="应用标记"
  127. :labelCol="{xs: {span: 24},sm: {span: 5}}"
  128. :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
  129. <a-input v-model="appVersion" placeholder="请填写应用标记,必填且不可重复,如快手-5.6.1.66"/>
  130. </a-form-item>
  131. <a-form-item :wrapperCol="{ span: 24 }"
  132. style="text-align: center">
  133. <a-button htmlType="submit" type="primary">提交</a-button>
  134. <a-button style="margin-left: 8px">保存</a-button>
  135. </a-form-item>
  136. </a-form>
  137. </a-form-item>
  138. </a-form>
  139. </a-card>
  140. </template>
  141. <script>
  142. import {deleteAction, postAction, getAction} from '@/api/manage'
  143. import UploadToAli from '@femessage/upload-to-ali';
  144. import {mapActions, mapGetters} from 'vuex'
  145. export default {
  146. name: 'BaseForm',
  147. components: {
  148. UploadToAli
  149. },
  150. data() {
  151. return {
  152. appType: 'android',//设备类型
  153. platform: '1',//应用类型 : 1 Android 应用下载,2: Android 网页游戏,3: iOS 应用下载, 4:iOS 网页游戏
  154. uploadType: '1',//上传类型 1 本地上传 2 填写链接
  155. appVersion: '',//应用标记
  156. appName: '',// 应用名称
  157. packageName: '',//应用包名
  158. file: '',// 上传文件
  159. imageUrl: '',// 上传图标链接链接
  160. downloadUrl: '', //下载链接
  161. showUploadFile: true,
  162. showDownLoad: false,
  163. showUpload: true,
  164. showAndroid: true,
  165. showIOS: false,
  166. customDomain: '',
  167. acceptVideo: '/*.apk,/*.png,/*.jpg,/*.jpeg,/*.mp4',
  168. accessKeyId: 'LTAIbNbqWzSOklQV',
  169. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  170. region: 'oss-cn-beijing',
  171. bucket: 'ctop-media',
  172. form: this.$form.createForm(this),
  173. url: {
  174. insertTemplateUrl: '/kuaishou/kuaiShouCreateAppTemplate/insert'
  175. }
  176. }
  177. },
  178. methods: {
  179. ...mapGetters(["nickname", "avatar", "userInfo"]),
  180. changePlatform() {
  181. if (this.appType == 'android') {
  182. this.showAndroid = true;
  183. this.showIOS = false;
  184. this.platform = '1';
  185. } else {
  186. this.showAndroid = false;
  187. this.showIOS = true;
  188. this.showDownLoad = true;
  189. this.platform = '3';
  190. }
  191. },
  192. changeShowUpload() {
  193. if (this.uploadType == '1') {
  194. this.showUploadFile = true;
  195. this.showDownLoad = false;
  196. } else {
  197. this.showUploadFile = false;
  198. this.showDownLoad = true;
  199. }
  200. },
  201. changeShowUploadType() {
  202. if (this.platform == '2') {
  203. this.showUpload = false;
  204. this.showUploadFile = false;
  205. this.showDownLoad = true;
  206. this.uploadType = '1';
  207. } else {
  208. this.showUpload = true;
  209. this.showUploadFile = true;
  210. this.showDownLoad = false;
  211. }
  212. },
  213. handleSubmit(e) {
  214. console.log("设备类型:" + this.appType);
  215. console.log("应用类型:" + this.platform);
  216. console.log("上传类型:" + this.uploadType);
  217. console.log("应用标记:" + this.appVersion);
  218. console.log("应用名称:" + this.appName);
  219. console.log("包名称:" + this.packageName);
  220. console.log("文件地址:" + this.file);
  221. console.log("图片地址:" + this.imageUrl);
  222. e.preventDefault()
  223. this.form.validateFields((err, values) => {
  224. if (!err) {
  225. console.log('Received values of form: ', values);
  226. let params = {};
  227. if (this.uploadType == '1') {
  228. if (this.file != '') {
  229. params.file = this.file;
  230. }
  231. } else if (this.uploadType == '2') {
  232. params.url = this.downloadUrl;
  233. }
  234. if (this.imageUrl != '') {
  235. params.imageUrl = this.imageUrl;
  236. }
  237. params.platform = this.platform;
  238. params.appType = this.appType;
  239. params.packageName = this.packageName;
  240. params.appName = this.appName;
  241. params.appVersion = this.appVersion;
  242. params.loginId = this.userInfo().id;
  243. console.log(params)
  244. postAction(this.url.insertTemplateUrl, params).then((res) => {
  245. console.log(res)
  246. if (res.success) {
  247. alert("创建应用成功");
  248. } else {
  249. alert(res.message)
  250. }
  251. });
  252. }
  253. })
  254. },
  255. submitIOS(e) {
  256. console.log("设备类型:" + this.appType);
  257. console.log("应用类型:" + this.platform);
  258. console.log("上传类型:" + this.uploadType);
  259. console.log("应用标记:" + this.appVersion);
  260. console.log("应用名称:" + this.appName);
  261. console.log("包名称:" + this.packageName);
  262. console.log("文件地址:" + this.file);
  263. console.log("图片地址:" + this.imageUrl);
  264. e.preventDefault()
  265. this.form.validateFields((err, values) => {
  266. if (!err) {
  267. console.log('Received values of form: ', values);
  268. let params = {};
  269. params.appType = this.appType;
  270. params.platform = this.platform;
  271. params.url = this.downloadUrl;
  272. params.appName = this.appName;
  273. params.appVersion = this.appVersion;
  274. params.loginId = this.userInfo().id;
  275. console.log(params)
  276. postAction(this.url.insertTemplateUrl, params).then((res) => {
  277. console.log(res)
  278. if (res.success) {
  279. alert("广告组模板创建成功");
  280. } else {
  281. alert(res.message)
  282. }
  283. });
  284. }
  285. })
  286. },
  287. onChange(value) {
  288. console.log(value);
  289. },
  290. }
  291. }
  292. </script>