|
@@ -1,14 +1,54 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div id="root">
|
3
|
|
- <div>活动标题 <span style="padding-left:4%">{{ ruleForm.activityTitle }}</span></div>
|
4
|
|
- <div >
|
5
|
|
- <div class="activityTile" style="transform:translateY(250%);">活动轮播图</div>
|
6
|
|
- <div style="width: 500px;padding-left:14.3%;">
|
7
|
|
- <img :src="ruleForm.activityCarouselImg" width="150" height="150">
|
8
|
|
- </div>
|
9
|
|
- </div>
|
10
|
|
- <span style="transform:translateY(200%)">活动详情描述 </span>
|
11
|
|
- <div style="padding-left:14.3%" v-html="ruleForm.activityContent"></div>
|
|
3
|
+ <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left" label-width="180px" class="ruleForm">
|
|
4
|
+ <el-form-item label="活动标题">
|
|
5
|
+ <span>{{ ruleForm.activityTitle }}</span>
|
|
6
|
+ </el-form-item>
|
|
7
|
+ <el-form-item label="活动轮播图">
|
|
8
|
+ <span style="color: darkgray;">轮播图为横幅位展示图片,不会显示在活动详情页</span>
|
|
9
|
+ <div>
|
|
10
|
+ <div style="width: 500px;">
|
|
11
|
+ <img :src="ruleForm.activityCarouselImg" width="150" height="150">
|
|
12
|
+ </div>
|
|
13
|
+ </div>
|
|
14
|
+ </el-form-item>
|
|
15
|
+ <el-form-item label="活动详情描述">
|
|
16
|
+ <div v-html="ruleForm.activityContent"/>
|
|
17
|
+ </el-form-item>
|
|
18
|
+ <el-form-item label="是否需要报名人扫码签到">
|
|
19
|
+ <el-radio v-model="ruleForm.signInCode" disabled label="1" style="font-weight:bold;font-size:12px;">需要</el-radio>
|
|
20
|
+ <el-radio v-model="ruleForm.signInCode" disabled label="2" style="font-weight:bold;font-size:12px;">不需要</el-radio>
|
|
21
|
+ <span style="padding-left:20%"><el-button type="primary" @click="singn">查看签到名单</el-button></span>
|
|
22
|
+ </el-form-item>
|
|
23
|
+ <span>
|
|
24
|
+ <div style="width: 500px; margin-top: 20px;">
|
|
25
|
+ <span style="color: darkgray;">选择扫码签到,活动发布后点击活动详情可以下载二维码图片,打印图片放置到活动现场,参加活动的用户即可扫码签到,方便统计活动实际参与人数。</span>
|
|
26
|
+ </div>
|
|
27
|
+ <div v-if="ruleForm.activityCode !=null" style="padding-left:30%;">
|
|
28
|
+ <div><img :src="qrcode" width="200" height="200" ></div>
|
|
29
|
+ <a :href="qrcode" download="qrcode.jpg" style="color:#00BFFF;padding-left:15%">点击下载</a>
|
|
30
|
+ </div>
|
|
31
|
+ </span>
|
|
32
|
+ <el-form-item label="报名截止时间">
|
|
33
|
+ <span class="activityTile">{{ formatDate(ruleForm.registrationEndTime) }}</span>
|
|
34
|
+ </el-form-item>
|
|
35
|
+ <div class="progress">
|
|
36
|
+ <div class="text-progress">
|
|
37
|
+ <span class="people-number">已报名人数 {{ ruleForm.signUpCount }}</span>
|
|
38
|
+ <div class="outer-layer"/>
|
|
39
|
+ <div ref="innerDiv" :style="{ backgroundColor: 'aquamarine', height: '6px', width: innerW + 'px', position: 'relative', marginTop: '-4px' }"/> <!-- class="inner-layer" -->
|
|
40
|
+ </div>
|
|
41
|
+ <div class="circular"/>
|
|
42
|
+ <div class="people-limit">限制{{ ruleForm.signUpMax }}人</div>
|
|
43
|
+ <el-button type="primary" style="float: left;" @click="lockSignUp">查看报名名单</el-button>
|
|
44
|
+ </div>
|
|
45
|
+ <el-form-item label="权重值">
|
|
46
|
+ <span>{{ ruleForm.sort }}</span>
|
|
47
|
+ </el-form-item>
|
|
48
|
+ <div style="width: 500px;">
|
|
49
|
+ <span style="color: darkgray;">权重值越大,在活动列表中排序越靠前,权重相同时按发布时间排序</span>
|
|
50
|
+ </div>
|
|
51
|
+ </el-form>
|
12
|
52
|
<!-- <div>
|
13
|
53
|
<div>
|
14
|
54
|
<div style="transform:translateY(20%);">活动配图</div>
|
|
@@ -17,30 +57,7 @@
|
17
|
57
|
</div>
|
18
|
58
|
</div>
|
19
|
59
|
</div> -->
|
20
|
|
- <span>
|
21
|
|
- <div style="display: flex;">
|
22
|
|
- <span class="activityTile" style="width: 200px;transform:translateY(70%);">是否需要报名人扫码签到</span>
|
23
|
|
- <el-radio v-model="ruleForm.signInCode" disabled label="1" style="padding-left:4%;font-weight:bold;font-size:12px;transform:translateY(70%);">需要</el-radio>
|
24
|
|
- <el-radio v-model="ruleForm.signInCode" disabled label="2" style="padding-left:8%;font-weight:bold;font-size:12px;transform:translateY(70%);">不需要</el-radio>
|
25
|
|
- <span style="padding-left:20%"><el-button type="primary" style="float:left;transform:translateY(30%)" @click="singn">查看签到名单</el-button></span>
|
26
|
|
- </div>
|
27
|
|
- <div style="padding-left:30%;" v-if="ruleForm.activityCode !=null">
|
28
|
|
- <div><img :src="qrcode" width="200" height="200" ></div>
|
29
|
|
- <a :href="qrcode" download="qrcode.jpg" style="color:#00BFFF;padding-left:15%">点击下载</a>
|
30
|
|
- </div>
|
31
|
|
- </span>
|
32
|
|
- <div class="progress">
|
33
|
|
- <div class="text-progress">
|
34
|
|
- <span class="people-number">已报名人数 {{ ruleForm.signUpCount }}</span>
|
35
|
|
- <div class="outer-layer"/>
|
36
|
|
- <div ref="innerDiv" :style="{ backgroundColor: 'aquamarine', height: '6px', width: innerW + 'px', position: 'relative', marginTop: '-4px' }"/> <!-- class="inner-layer" -->
|
37
|
|
- </div>
|
38
|
|
- <div class="circular"/>
|
39
|
|
- <div class="people-limit">限制{{ ruleForm.signUpMax }}人</div>
|
40
|
|
- <el-button type="primary" style="float: left;" @click="lockSignUp">查看报名名单</el-button>
|
41
|
|
- </div>
|
42
|
|
- <span class="activityTile">报名截止时间:{{ formatDate(ruleForm.registrationEndTime) }}</span>
|
43
|
|
- <span class="activityTile" style="transform:translateY(150%);">权重值    {{ ruleForm.sort }}</span>
|
|
60
|
+
|
44
|
61
|
<div class="bom-button">
|
45
|
62
|
<el-button v-if="isEdi" type="primary" style="width: 100px;" @click="ediActivity">修改</el-button>
|
46
|
63
|
</div>
|
|
@@ -48,9 +65,9 @@
|
48
|
65
|
</template>
|
49
|
66
|
|
50
|
67
|
<script>
|
51
|
|
-import html2canvas from 'html2canvas';
|
52
|
|
-import QRCode from 'qrcode';
|
53
|
|
-import Wangeditor from '@/components/Wangeditor';
|
|
68
|
+import html2canvas from 'html2canvas'
|
|
69
|
+import QRCode from 'qrcode'
|
|
70
|
+import Wangeditor from '@/components/Wangeditor'
|
54
|
71
|
export default {
|
55
|
72
|
name: 'Index',
|
56
|
73
|
components: { Wangeditor },
|
|
@@ -75,7 +92,7 @@ export default {
|
75
|
92
|
ownerDocument: '',
|
76
|
93
|
isEdi: true, // 显示修改按钮
|
77
|
94
|
innerW: 0, // 进度条
|
78
|
|
- qrcode: '',
|
|
95
|
+ qrcode: ''
|
79
|
96
|
}
|
80
|
97
|
},
|
81
|
98
|
mounted() {
|
|
@@ -87,10 +104,10 @@ export default {
|
87
|
104
|
this.$store.dispatch('ActivityById', this.ruleForm.id).then((res) => {
|
88
|
105
|
const resData = res.data
|
89
|
106
|
this.ruleForm = resData.info
|
90
|
|
- this.codeIMG =resData.info.activityCode
|
|
107
|
+ this.codeIMG = resData.info.activityCode
|
91
|
108
|
this.ruleForm.contentImg = resData.contentImg
|
92
|
109
|
|
93
|
|
- QRCode.toDataURL(this.codeIMG, (err, url)=> {
|
|
110
|
+ QRCode.toDataURL(this.codeIMG, (err, url) => {
|
94
|
111
|
this.qrcode = url
|
95
|
112
|
})
|
96
|
113
|
if (this.ruleForm.status === '0') {
|
|
@@ -115,59 +132,58 @@ export default {
|
115
|
132
|
lockSignUp() { // 查看活动报名
|
116
|
133
|
this.$router.push({ name: 'signUp-info', query: { id: this.ruleForm.id }})
|
117
|
134
|
},
|
118
|
|
- //跳转签到页面
|
119
|
|
- singn(){
|
|
135
|
+ // 跳转签到页面
|
|
136
|
+ singn() {
|
120
|
137
|
this.$router.push({ name: 'activity-signIn-index', query: { id: this.ruleForm.id }})
|
121
|
138
|
},
|
122
|
139
|
// 下载图片
|
123
|
|
-// downloadCodeImg(){
|
124
|
|
-// var a = document.createElement('a')
|
125
|
|
-// a.download = this.ruleForm.activityCode
|
126
|
|
-// // 设置图片地址
|
127
|
|
-// a.href = this.ruleForm.activityCode
|
128
|
|
-// a.click();
|
129
|
|
-// }
|
130
|
|
- downloadCodeImg(){
|
131
|
|
- var alink = document.createElement("a");
|
132
|
|
- alink.href = this.ruleForm.activityCode;
|
133
|
|
- alink.download = "pic"; //图片名
|
134
|
|
- alink.click();
|
135
|
|
- },
|
|
140
|
+ // downloadCodeImg(){
|
|
141
|
+ // var a = document.createElement('a')
|
|
142
|
+ // a.download = this.ruleForm.activityCode
|
|
143
|
+ // // 设置图片地址
|
|
144
|
+ // a.href = this.ruleForm.activityCode
|
|
145
|
+ // a.click();
|
|
146
|
+ // }
|
|
147
|
+ downloadCodeImg() {
|
|
148
|
+ var alink = document.createElement('a')
|
|
149
|
+ alink.href = this.ruleForm.activityCode
|
|
150
|
+ alink.download = 'pic' // 图片名
|
|
151
|
+ alink.click()
|
|
152
|
+ },
|
136
|
153
|
|
137
|
|
- dataURLToBlob(dataurl) {//ie 图片转格式
|
138
|
|
- var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
139
|
|
- bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
154
|
+ dataURLToBlob(dataurl) { // ie 图片转格式
|
|
155
|
+ var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
156
|
+ bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
|
|
157
|
+ while (n--) {
|
|
158
|
+ u8arr[n] = bstr.charCodeAt(n)
|
|
159
|
+ }
|
|
160
|
+ return new Blob([u8arr], { type: mime })
|
|
161
|
+ },
|
|
162
|
+
|
|
163
|
+ downloadResult() {
|
|
164
|
+ html2canvas(document.getElementById('mymap')).then(canvas => {
|
|
165
|
+ this.imgmap = canvas.toDataURL()
|
|
166
|
+ console.log(999, this.imgmap)
|
|
167
|
+ if (window.navigator.msSaveOrOpenBlob) {
|
|
168
|
+ var bstr = atob(this.imgmap.split(',')[1])
|
|
169
|
+ var n = bstr.length
|
|
170
|
+ var u8arr = new Uint8Array(n)
|
140
|
171
|
while (n--) {
|
141
|
|
- u8arr[n] = bstr.charCodeAt(n);
|
|
172
|
+ u8arr[n] = bstr.charCodeAt(n)
|
142
|
173
|
}
|
143
|
|
- return new Blob([u8arr], {type: mime})
|
144
|
|
- },
|
145
|
|
-
|
146
|
|
- downloadResult() {
|
147
|
|
- html2canvas(document.getElementById('mymap')).then(canvas => {
|
148
|
|
- this.imgmap = canvas.toDataURL()
|
149
|
|
- console.log(999, this.imgmap)
|
150
|
|
- if (window.navigator.msSaveOrOpenBlob) {
|
151
|
|
- var bstr = atob(this.imgmap.split(',')[1])
|
152
|
|
- var n = bstr.length
|
153
|
|
- var u8arr = new Uint8Array(n)
|
154
|
|
- while (n--) {
|
155
|
|
- u8arr[n] = bstr.charCodeAt(n)
|
156
|
|
- }
|
157
|
|
- var blob = new Blob([u8arr])
|
158
|
|
- window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
|
159
|
|
- } else {
|
160
|
|
- // 这里就按照chrome等新版浏览器来处理
|
161
|
|
- const a = document.createElement('a')
|
162
|
|
- a.href = this.imgmap
|
163
|
|
- a.setAttribute('download', 'chart-download')
|
164
|
|
- a.click()
|
165
|
|
- }
|
166
|
|
-
|
167
|
|
- });
|
|
174
|
+ var blob = new Blob([u8arr])
|
|
175
|
+ window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
|
|
176
|
+ } else {
|
|
177
|
+ // 这里就按照chrome等新版浏览器来处理
|
|
178
|
+ const a = document.createElement('a')
|
|
179
|
+ a.href = this.imgmap
|
|
180
|
+ a.setAttribute('download', 'chart-download')
|
|
181
|
+ a.click()
|
168
|
182
|
}
|
169
|
|
-}
|
|
183
|
+ })
|
|
184
|
+ }
|
170
|
185
|
}
|
|
186
|
+}
|
171
|
187
|
</script>
|
172
|
188
|
|
173
|
189
|
<style scoped>
|