黎海 2 years ago
parent
commit
881cafbc00
3 changed files with 127 additions and 1 deletions
  1. 116 0
      src/pages/orderAY/orderAY.vue
  2. 10 0
      src/router/index.js
  3. 1 1
      vue.config.js

+ 116 - 0
src/pages/orderAY/orderAY.vue

@@ -0,0 +1,116 @@
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?qtype=other';
57
+      Http.open("GET", url);
58
+      // let params = { qtype : 'other' }
59
+      Http.send();
60
+      Http.onreadystatechange = (e) => {
61
+        if (Http.readyState == 4 && Http.status == 200) {
62
+          let data = JSON.parse(Http.responseText)
63
+          console.log(data.order_id, 'data')
64
+          that.ruleForm.pass = data.order_id
65
+        }
66
+      }
67
+    },
68
+    submitForm () {
69
+      console.log(this.ruleForm,'ruleForm');
70
+      let that = this
71
+      const Http = new XMLHttpRequest();
72
+      const url = 'https://test-api-ads.tiantianqutao.com/led_create_order';
73
+      Http.open("POST", url, true);
74
+      Http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
75
+      let params = { order_id: that.ruleForm.pass, name: that.ruleForm.name }
76
+      Http.send(JSON.stringify(params));
77
+      Http.onreadystatechange = (e) => {
78
+        this.$message.success('认领成功')
79
+      }
80
+    },
81
+    // 复制链接
82
+    copyUrl () {
83
+      let _this = this;
84
+      let clipboard = new Clipboard(".copy-btn"); // 这里括号里填写上面点击事件绑定的class名
85
+      clipboard.on("success", e => {
86
+        // 复制成功,提示根据自己项目实际使用的UI来写
87
+        _this.$message.success("复制成功")
88
+        // 释放内存
89
+        clipboard.destroy();
90
+      });
91
+      clipboard.on("error", e => {
92
+        // 不支持复制,提示根据自己项目实际使用的UI来写
93
+        _this.$message.error("该浏览器不支持自动复制")
94
+        // 释放内存
95
+        clipboard.destroy();
96
+      });
97
+    },
98
+
99
+  }
100
+}
101
+</script>
102
+<style lang='less' scoped >
103
+/* @import url(); 引入css类 */
104
+.mine {
105
+  width: 100%;
106
+  min-height: 100vh;
107
+  display: flex;
108
+  justify-content: center;
109
+  .demo-ruleForm {
110
+    margin-top: 15%;
111
+    .submit {
112
+      width: 100%;
113
+    }
114
+  }
115
+}
116
+</style>

+ 10 - 0
src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
2 2
 import Router from 'vue-router'
3 3
 import Home from '@/pages/home/index.vue'
4 4
 import Order from '@/pages/order/order.vue'
5
+import OrderAY from '@/pages/orderAY/orderAY.vue'
5 6
 
6 7
 Vue.use(Router)
7 8
 
@@ -27,6 +28,15 @@ export default new Router({
27 28
         },
28 29
         component:Order,
29 30
       },
31
+      {
32
+        path: '/orderAY',
33
+        name: 'AY订单号生成',
34
+        meta: {
35
+          title: 'AY订单号生成',
36
+          auth: false,
37
+        },
38
+        component:OrderAY,
39
+      },
30 40
     ]
31 41
 },
32 42
 

+ 1 - 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://video-h5.fyshark.com/upload/dist' :
6
+  publicPath: process.env.env_config === 'prod' ? 'https://video-h5.fyshark.com/dist' :
7 7
     process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
8 8
   // 设置跨域
9 9
   crossorigin: 'anonymous',