ホーム エクスプローラ ヘルプ
登録 サインイン
lihai
/
upload
Watch 1
Star 0
Fork 0
Files 課題 0 プルリクエスト 0 Wiki
ソースを参照

111

黎海 1 年間 前
親
3cdfebf0e0
コミット
99798c29a3
共有16 個のファイルを変更した、222 個の追加 と 29 個の削除を含む
分割表示 差分情報を表示
  1. 38 0
      package-lock.json
  2. 2 0
      package.json
  3. BIN
      public/favicon.ico
  4. 1 1
      public/index.html
  5. BIN
      src/assets/image/favicon.ico
  6. BIN
      src/assets/image/icon_logo.png
  7. 1 0
      src/common/auth.js
  8. 14 14
      src/common/http.js
  9. 1 1
      src/config/env.js
  10. 3 1
      src/main.js
  11. 8 8
      src/pages/home/index.vue
  12. 115 0
      src/pages/order/order.vue
  13. 18 3
      src/router/index.js
  14. 9 0
      src/server/home.js
  15. 2 0
      src/server/urls.js
  16. 10 1
      vue.config.js

+ 38 - 0
package-lock.json
ファイルの表示 

@@ -4561,6 +4561,16 @@
4561 4561 
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
4562 4562 
       "dev": true
4563 4563 
     },
4564 
+    "clipboard": {
4565 
+      "version": "2.0.11",
4566 
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
4567 
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
4568 
+      "requires": {
4569 
+        "good-listener": "^1.2.2",
4570 
+        "select": "^1.1.2",
4571 
+        "tiny-emitter": "^2.0.0"
4572 
+      }
4573 
+    },
4564 4574 
     "clipboardy": {
4565 4575 
       "version": "2.0.0",
4566 4576 
       "resolved": "https://registry.npm.taobao.org/clipboardy/download/clipboardy-2.0.0.tgz",
 
@@ -5858,6 +5868,11 @@
5858 5868 
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
5859 5869 
       "dev": true
5860 5870 
     },
5871 
+    "delegate": {
5872 
+      "version": "3.2.0",
5873 
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
5874 
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
5875 
+    },
5861 5876 
     "depd": {
5862 5877 
       "version": "1.1.2",
5863 5878 
       "resolved": "https://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
 
@@ -8271,6 +8286,14 @@
8271 8286 
         }
8272 8287 
       }
8273 8288 
     },
8289 
+    "good-listener": {
8290 
+      "version": "1.2.2",
8291 
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
8292 
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
8293 
+      "requires": {
8294 
+        "delegate": "^3.1.2"
8295 
+      }
8296 
+    },
8274 8297 
     "graceful-fs": {
8275 8298 
       "version": "4.1.15",
8276 8299 
       "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.1.15.tgz",
 
@@ -14475,6 +14498,11 @@
14475 14498 
         "get-ready": "~1.0.0"
14476 14499 
       }
14477 14500 
     },
14501 
+    "select": {
14502 
+      "version": "1.1.2",
14503 
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
14504 
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
14505 
+    },
14478 14506 
     "select-hose": {
14479 14507 
       "version": "2.0.0",
14480 14508 
       "resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
 
@@ -15809,6 +15837,11 @@
15809 15837 
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
15810 15838 
       "dev": true
15811 15839 
     },
15840 
+    "tiny-emitter": {
15841 
+      "version": "2.1.0",
15842 
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
15843 
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
15844 
+    },
15812 15845 
     "tmp": {
15813 15846 
       "version": "0.0.33",
15814 15847 
       "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
 
@@ -16359,6 +16392,11 @@
16359 16392 
       "integrity": "sha1-G0r0lV6zB3xQHCOHL8ZROBFYcTE=",
16360 16393 
       "dev": true
16361 16394 
     },
16395 
+    "v-clipboard": {
16396 
+      "version": "2.2.3",
16397 
+      "resolved": "https://registry.npmjs.org/v-clipboard/-/v-clipboard-2.2.3.tgz",
16398 
+      "integrity": "sha512-Wg+ObZoYK6McHb5OOCFWvm0R7xHp0/p0G1ocx/8bO22jvA/yVY05rADbfiztwCokXBNfQuGv/XSd1ozcTFgekw=="
16399 
+    },
16362 16400 
     "validate-npm-package-license": {
16363 16401 
       "version": "3.0.4",
16364 16402 
       "resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz",

+ 2 - 0
package.json
ファイルの表示 

@@ -13,8 +13,10 @@
13 13 
   "dependencies": {
14 14 
     "ali-oss": "^6.17.1",
15 15 
     "axios": "^0.18.0",
16 
+    "clipboard": "^2.0.11",
16 17 
     "crypto-js": "^3.1.9-1",
17 18 
     "element-ui": "^2.8.2",
19 
+    "v-clipboard": "^2.2.3",
18 20 
     "vue": "^2.6.6",
19 21 
     "vue-router": "^3.0.1",
20 22 
     "vuex": "^3.0.1"

BIN
public/favicon.ico
ファイルの表示


+ 1 - 1
public/index.html
ファイルの表示 

@@ -5,7 +5,7 @@
5 5 
   <meta charset="utf-8">
6 6 
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 7 
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
8 
-  <title>上传图片</title>
8 
+  <title></title>
9 9 
 </head>
10 10
11 11 
 <body>

BIN
src/assets/image/favicon.ico
ファイルの表示


BIN
src/assets/image/icon_logo.png
ファイルの表示


+ 1 - 0
src/common/auth.js
ファイルの表示 

@@ -2,6 +2,7 @@ import { logFlag, logPath } from '@/config/env'
2 2 
 let isFirst = false;
3 3 
 export default (router, hasLogin) => {
4 4 
   router.beforeEach((to, from, next) => {
5 
+    console.log(to, from, next);
5 6 
     if (to.meta.title) {
6 7 
       document.title = to.meta.title;
7 8 
     }

+ 14 - 14
src/common/http.js
ファイルの表示 

@@ -34,7 +34,7 @@ axios.interceptors.request.use(
34 34
35 35 
     const token = localStorage.getItem('token');
36 36 
     if (!token) {
37 
-      router.push('/login')
37 
+      // router.push('/login')
38 38 
     }
39 39 
     token && (config.headers.Authorization = token);
40 40 
     return config;
 
@@ -60,11 +60,11 @@ axios.interceptors.response.use(
60 60 
         // 未登录则跳转登录页面，并携带当前页面的路径
61 61 
         // 在登录成功后返回当前页面，这一步需要在登录页操作。
62 62 
         case 401:
63 
-          router.replace({
64 
-            path: '/login',
65 
-            query: { redirect: router.currentRoute.fullPath }
66 
-          });
67 
-          break;
63 
+          // router.replace({
64 
+          //   path: '/login',
65 
+          //   query: { redirect: router.currentRoute.fullPath }
66 
+          // });
67 
+          // break;
68 68 
         // 403 token过期
69 69 
         // 登录过期对用户进行提示
70 70 
         // 清除本地token和清空vuex中token对象
 
@@ -75,14 +75,14 @@ axios.interceptors.response.use(
75 75 
           localStorage.removeItem('token');
76 76 
           store.commit('loginSuccess', null);
77 77 
           // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
78 
-          setTimeout(() => {
79 
-            router.replace({
80 
-              path: '/login',
81 
-              query: {
82 
-                redirect: router.currentRoute.fullPath
83 
-              }
84 
-            });
85 
-          }, 1000);
78 
+          // setTimeout(() => {
79 
+          //   router.replace({
80 
+          //     path: '/login',
81 
+          //     query: {
82 
+          //       redirect: router.currentRoute.fullPath
83 
+          //     }
84 
+          //   });
85 
+          // }, 1000);
86 86 
           break;
87 87 
         // 404请求不存在
88 88 
         case 404:

+ 1 - 1
src/config/env.js
ファイルの表示 

@@ -1,5 +1,5 @@
1 1 
 // 环境配置
2 
-let basePath = 'https://***'; 	// api请求地址
2 
+let basePath = 'https://video-h5.fyshark.com/'; 	// api请求地址
3 3
4 4 
 export {
5 5 
   basePath,

+ 3 - 1
src/main.js
ファイルの表示 

@@ -2,7 +2,6 @@ import Vue from 'vue'
2 2 
 import App from './App.vue'
3 3 
 import router from './router/index'
4 4 
 import store from './store/index'
5 
-import login from './common/login'
6 5 
 import ElementUI from 'element-ui'
7 6 
 import 'element-ui/lib/theme-chalk/index.css'
8 7 
 import auth from './common/auth'
 
@@ -12,8 +11,11 @@ import './style/common.less'
12 11 
 import './assets/font/iconfont.css'
13 12 
 import './style/index.less'
14 13 
 import './filters/filter'
14 
+import Clipboard from 'v-clipboard'
15 
+
15 16 
 //全局注入
16 17 
 Vue.use(ElementUI)
18 
+Vue.use(Clipboard)
17 19
18 20 
 injectGlobal()
19 21

+ 8 - 8
src/pages/home/index.vue
ファイルの表示 

@@ -14,7 +14,7 @@
14 14 
     </div>
15 15 
     <el-upload class="upload"
16 16 
                action=""
17 
-               accept=".png,.jpg,.jpeg"
17 
+               accept=".png,.jpg,.jpeg,.mp4.gif"
18 18 
                :on-success="handleSuccess"
19 19 
                :http-request="uploadFile"
20 20 
                :show-file-list="false"
 
@@ -36,17 +36,17 @@ const OSS = require('ali-oss');
36 36
37 37 
 const client = new OSS({
38 38
39 
-  accessKeyId: 'LTAI5tAmkA2tR9t5hXWm7ru1',  // 查看你自己的阿里云KEY
39 
+  cname: true, // 开启自定义域名上传
40 40
41 
-  accessKeySecret: 'Gy5zuTqh7x6OpKWdKfxZLuQjPEF2vG', // 查看自己的阿里云KEYSECRET
41 
+  endpoint: "video-h5.fyshark.com", // 自己的域名
42 42
43 
-  bucket: 'we-spa', // 你的 OSS bucket 名称
43 
+  accessKeyId: 'LTAI5t83NZcD83TKPYemrUSw',  // 查看你自己的阿里云KEY
44 44
45 
-  region: 'oss-cn-shenzhen', // bucket 所在地址
45 
+  accessKeySecret: 'fbVUzFVibyaQp5zJb8EayEKFOxgT7Q', // 查看自己的阿里云KEYSECRET
46 46
47 
-  // cname: true // 开启自定义域名上传
47 
+  bucket: 'web-video-h5', // 你的 OSS bucket 名称
48 48
49 
-  // endpoint:"file.xxxx.live" // 自己的域名
49 
+  region: 'oss-cn-hangzhou', // bucket 所在地址
50 50
51 51 
 });
52 52 
 
@@ -84,7 +84,7 @@ export default {
84 84 
         if (size > 2000) {
85 85 
           this.$notify.warning({
86 86 
             title: '警告',
87 
-            message: '大小必须小于M'
87 
+            message: '大小必须小于2M'
88 88 
           })
89 89 
           return
90 90 
         }

+ 115 - 0
src/pages/order/order.vue
ファイルの表示 

@@ -0,0 +1,115 @@
1 
+<!--  -->
2 
+<template>
3 
+  <div class="mine">
4 
+    <el-form :model="ruleForm"
5 
+             ref="ruleForm"
6 
+             label-width="100px"
7 
+             class="demo-ruleForm">
8 
+      <el-form-item label="订单号："
9 
+                    prop="pass">
10 
+        <el-input v-model="ruleForm.pass"
11 
+                  disabled
12 
+                  autocomplete="off"></el-input>
13 
+      </el-form-item>
14 
+      <el-form-item label="订单归属："
15 
+                    prop="name">
16 
+        <el-input v-model.number="ruleForm.name"
17 
+                  placeholder="请输入归属人姓名"></el-input>
18 
+      </el-form-item>
19 
+      <el-form-item>
20 
+        <el-button type="primary"
21 
+                   class="submit"
22 
+                   @click="submitForm()">认领</el-button>
23 
+
24 
+      </el-form-item>
25 
+      <el-form-item>
26 
+        <el-button type="primary"
27 
+                   class="submit copy-btn"
28 
+                   :data-clipboard-text="ruleForm.pass"
29 
+                   @click="copyUrl">复制该订单号</el-button>
30 
+      </el-form-item>
31 
+    </el-form>
32 
+  </div>
33 
+</template>
34 
+
35 
+<script>
36 
+import Clipboard from 'clipboard';
37 
+
38 
+export default {
39 
+  data () {
40 
+    return {
41 
+      ruleForm: {
42 
+        pass: '',
43 
+        name: ''
44 
+      },
45 
+    }
46 
+  },
47 
+  computed: {},
48 
+  watch: {},
49 
+  created () {
50 
+    this.getOrder()
51 
+  },
52 
+  methods: {
53 
+    getOrder () {
54 
+      let that = this
55 
+      const Http = new XMLHttpRequest();
56 
+      const url = 'https://test-api-ads.tiantianqutao.com/led_create_order';
57 
+      Http.open("GET", url);
58 
+      Http.send();
59 
+      Http.onreadystatechange = (e) => {
60 
+        if (Http.readyState == 4 && Http.status == 200) {
61 
+          let data = JSON.parse(Http.responseText)
62 
+          console.log(data.order_id, 'data')
63 
+          that.ruleForm.pass = data.order_id
64 
+        }
65 
+      }
66 
+    },
67 
+    submitForm () {
68 
+      console.log(this.ruleForm,'ruleForm');
69 
+      let that = this
70 
+      const Http = new XMLHttpRequest();
71 
+      const url = 'https://test-api-ads.tiantianqutao.com/led_create_order';
72 
+      Http.open("POST", url, true);
73 
+      Http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
74 
+      let params = { order_id: that.ruleForm.pass, name: that.ruleForm.name }
75 
+      Http.send(JSON.stringify(params));
76 
+      Http.onreadystatechange = (e) => {
77 
+        this.$message.success('认领成功')
78 
+      }
79 
+    },
80 
+    // 复制链接
81 
+    copyUrl () {
82 
+      let _this = this;
83 
+      let clipboard = new Clipboard(".copy-btn"); // 这里括号里填写上面点击事件绑定的class名
84 
+      clipboard.on("success", e => {
85 
+        // 复制成功，提示根据自己项目实际使用的UI来写
86 
+        _this.$message.success("复制成功")
87 
+        // 释放内存
88 
+        clipboard.destroy();
89 
+      });
90 
+      clipboard.on("error", e => {
91 
+        // 不支持复制，提示根据自己项目实际使用的UI来写
92 
+        _this.$message.error("该浏览器不支持自动复制")
93 
+        // 释放内存
94 
+        clipboard.destroy();
95 
+      });
96 
+    },
97 
+
98 
+  }
99 
+}
100 
+</script>
101 
+<style lang='less' scoped >
102 
+/* @import url(); 引入css类 */
103 
+.mine {
104 
+  width: 100%;
105 
+  min-height: 100vh;
106 
+  display: flex;
107 
+  justify-content: center;
108 
+  .demo-ruleForm {
109 
+    margin-top: 15%;
110 
+    .submit {
111 
+      width: 100%;
112 
+    }
113 
+  }
114 
+}
115 
+</style>

+ 18 - 3
src/router/index.js
ファイルの表示 

@@ -1,7 +1,7 @@
1 1 
 import Vue from 'vue'
2 2 
 import Router from 'vue-router'
3 
-
4 3 
 import Home from '@/pages/home/index.vue'
4 
+import Order from '@/pages/order/order.vue'
5 5
6 6 
 Vue.use(Router)
7 7 
 
@@ -11,8 +11,23 @@ export default new Router({
11 11 
     routes: [
12 12 
       {
13 13 
         path: '/',
14 
-        name: '首页',
14 
+        name: '上传图片',
15 
+        meta: {
16 
+          title: 'video上传',
17 
+          auth: false,
18 
+        },
15 19 
         component:Home,
16 20 
       },
21 
+      {
22 
+        path: '/order',
23 
+        name: '订单号生成',
24 
+        meta: {
25 
+          title: '订单号生成',
26 
+          auth: false,
27 
+        },
28 
+        component:Order,
29 
+      },
17 30 
     ]
18 
-})
31 
+},
32 
+
33 
+)

+ 9 - 0
src/server/home.js
ファイルの表示 

@@ -9,6 +9,15 @@ export default class Home {
9 9 
   static getToken (parms) {
10 10 
     return $http.post(url.getToken, parms);
11 11 
   }
12 
+  //获取订单号
13 
+  static getOrder (parms) {
14 
+    return $http.get(url.getOrder, parms);
15 
+  }
16 
+  //认领订单号
17 
+  static setOrder (parms) {
18 
+    return $http.post(url.getOrder, parms);
19 
+  }
20 
+
12 21
13 22
14 23 
 }

+ 2 - 0
src/server/urls.js
ファイルの表示 

@@ -1,5 +1,7 @@
1 1 
 export default {
2 2 
   //登录
3 3 
   getToken: '/v2/pad/login',
4 
+  //获取订单
5 
+  getOrder:'/led_create_order'
4 6
5 7 
 }

+ 10 - 1
vue.config.js
ファイルの表示 

@@ -3,7 +3,7 @@
3 3 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4 4
5 5 
 module.exports = {
6 
-  publicPath: process.env.env_config === 'prod' ? 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/upload/dist' :
6 
+  publicPath: process.env.env_config === 'prod' ? 'https://video-h5.fyshark.com/upload/dist' :
7 7 
     process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
8 8 
   // 设置跨域
9 9 
   crossorigin: 'anonymous',
 
@@ -39,4 +39,13 @@ module.exports = {
39 39 
     //     })
40 40 
     // ]
41 41 
   },
42 
+  pwa: {
43 
+    iconPaths: {
44 
+        favicon32: 'favicon.ico',
45 
+        favicon16: 'favicon.ico',
46 
+        appleTouchIcon: 'favicon.ico',
47 
+        maskIcon: 'favicon.ico',
48 
+        msTileImage: 'favicon.ico'
49 
+    }
50 
+}
42 51 
 }