inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 /* eslint-disable no-unused-vars */
I 2 <template>
3   <div
4     style="position: relative"
5   >
6     <div class="verify-img-out">
7       <div
8         :style="{'width': setSize.imgWidth,
9                  'height': setSize.imgHeight,
10                  'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight,
11                  'margin-bottom': vSpace + 'px'}"
12         class="verify-img-panel"
13       >
14         <div @click="refresh" class="verify-refresh" style="z-index:3" v-show="showRefresh">
15           <i class="iconfont icon-refresh"></i>
16         </div>
17         <img
18           :src="'data:image/png;base64,'+pointBackImgBase"
19           @click="bindingClick?canvasClick($event):undefined"
20           alt=""
21           ref="canvas"
22           style="width:100%;height:100%;display:block">
23
24         <div
25           :key="index"
26           :style="{
27             'background-color':'#1abd6c',
28             color:'#fff',
29             'z-index':9999,
30             width:'20px',
31             height:'20px',
32             'text-align':'center',
33             'line-height':'20px',
34             'border-radius': '50%',
35             position:'absolute',
36             top:parseInt(tempPoint.y-10) + 'px',
37             left:parseInt(tempPoint.x-10) + 'px'
38           }"
39           class="point-area"
40           v-for="(tempPoint, index) in tempPoints">
41           {{ index + 1 }}
42         </div>
43       </div>
44     </div>
45     <!-- 'height': this.barSize.height, -->
46     <div
47       :style="{'width': setSize.imgWidth,
48                'color': this.barAreaColor,
49                'border-color': this.barAreaBorderColor,
50                'line-height':this.barSize.height}"
51       class="verify-bar-area">
52       <span class="verify-msg">{{ text }}</span>
53     </div>
54   </div>
55 </template>
56 <script type="text/babel">
57     /**
58      * VerifyPoints
59      * @description 点选
60      * */
61     import { resetSize } from './../utils/util'
62     import { aesEncrypt } from './../utils/ase'
63     import { reqGet, reqCheck } from '@/api/modular/system/loginManage'
64
65     export default {
66         name: 'VerifyPoints',
67         props: {
68             // 弹出式pop,固定fixed
69             mode: {
70                 type: String,
71                 default: 'fixed'
72             },
73             // eslint-disable-next-line vue/require-default-prop
74             captchaType: {
75                 type: String
76             },
77             // 间隔
78             vSpace: {
79                 type: Number,
80                 default: 5
81             },
82             imgSize: {
83                 type: Object,
84                 default() {
85                     return {
86                         width: '310px',
87                         height: '155px'
88                     }
89                 }
90             },
91             barSize: {
92                 type: Object,
93                 default() {
94                     return {
95                         width: '310px',
96                         height: '40px'
97                     }
98                 }
99             }
100         },
101         data() {
102             return {
103                 secretKey: '', // 后端返回的ase加密秘钥
104                 checkNum: 3, // 默认需要点击的字数
105                 fontPos: [], // 选中的坐标信息
106                 checkPosArr: [], // 用户点击的坐标
107                 num: 1, // 点击的记数
108                 pointBackImgBase: '', // 后端获取到的背景图片
109                 poinTextList: [], // 后端返回的点击字体顺序
110                 backToken: '', // 后端返回的token值
111                 setSize: {
112                     imgHeight: 0,
113                     imgWidth: 0,
114                     barHeight: 0,
115                     barWidth: 0
116                 },
117                 tempPoints: [],
118                 text: '',
119                 barAreaColor: undefined,
120                 barAreaBorderColor: undefined,
121                 showRefresh: true,
122                 bindingClick: true
123             }
124         },
125         computed: {
126             resetSize() {
127                 return resetSize
128             }
129         },
130         methods: {
131             init() {
132                 // 加载页面
133                 this.fontPos.splice(0, this.fontPos.length)
134                 this.checkPosArr.splice(0, this.checkPosArr.length)
135                 this.num = 1
136                 this.getPictrue()
137                 this.$nextTick(() => {
138                     this.setSize = this.resetSize(this)    // 重新设置宽度高度
139                     this.$parent.$emit('ready', this)
140                 })
141             },
142             canvasClick(e) {
143                 this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e))
144                 // eslint-disable-next-line eqeqeq
145                 if (this.num == this.checkNum) {
146                     this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e))
147                     // 按比例转换坐标值
148                     this.checkPosArr = this.pointTransfrom(this.checkPosArr, this.setSize)
149                     // 等创建坐标执行完
150                     setTimeout(() => {
151                         // var flag = this.comparePos(this.fontPos, this.checkPosArr);
152                         // 发送后端请求
153                         var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify(this.checkPosArr), this.secretKey) : this.backToken + '---' + JSON.stringify(this.checkPosArr)
154                         const data = {
155                             captchaType: this.captchaType,
156                             'pointJson': this.secretKey ? aesEncrypt(JSON.stringify(this.checkPosArr), this.secretKey) : JSON.stringify(this.checkPosArr),
157                             'token': this.backToken
158                         }
159                         reqCheck(data).then(res => {
160                             // eslint-disable-next-line eqeqeq
161                             if (res.repCode == '0000') {
162                                 this.barAreaColor = '#4cae4c'
163                                 this.barAreaBorderColor = '#5cb85c'
164                                 this.text = '验证成功'
165                                 this.bindingClick = false
166                                 // eslint-disable-next-line eqeqeq
167                                 if (this.mode == 'pop') {
168                                     setTimeout(() => {
169                                         this.$parent.clickShow = false
170                                         this.refresh()
171                                     }, 1500)
172                                 }
173                                 this.$parent.$emit('success', { captchaVerification })
174                             } else {
175                                 this.$parent.$emit('error', this)
176                                 this.barAreaColor = '#d9534f'
177                                 this.barAreaBorderColor = '#d9534f'
178                                 this.text = '验证失败'
179                                 setTimeout(() => {
180                                     this.refresh()
181                                 }, 700)
182                             }
183                         })
184                     }, 400)
185                 }
186                 if (this.num < this.checkNum) {
187                     this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e))
188                 }
189             },
190
191             // 获取坐标
192             getMousePos: function (obj, e) {
193                 var x = e.offsetX
194                 var y = e.offsetY
195                 return { x, y }
196             },
197             // 创建坐标点
198             createPoint: function (pos) {
199                 this.tempPoints.push(Object.assign({}, pos))
200                 return ++this.num
201             },
202             refresh: function () {
203                 this.tempPoints.splice(0, this.tempPoints.length)
204                 this.barAreaColor = '#000'
205                 this.barAreaBorderColor = '#ddd'
206                 this.bindingClick = true
207                 this.fontPos.splice(0, this.fontPos.length)
208                 this.checkPosArr.splice(0, this.checkPosArr.length)
209                 this.num = 1
210                 this.getPictrue()
211                 this.text = '验证失败'
212                 this.showRefresh = true
213             },
214
215             // 请求背景图片和验证图片
216             getPictrue() {
217                 const data = {
218                     captchaType: this.captchaType
219                 }
220                 reqGet(data).then(res => {
221                     // eslint-disable-next-line eqeqeq
222                     if (res.repCode == '0000') {
223                         this.pointBackImgBase = res.repData.originalImageBase64
224                         this.backToken = res.repData.token
225                         this.secretKey = res.repData.secretKey
226                         this.poinTextList = res.repData.wordList
227                         this.text = '请依次点击【' + this.poinTextList.join(',') + '】'
228                     } else {
229                         this.text = res.repMsg
230                     }
231                 })
232             },
233             // 坐标转换函数
234             pointTransfrom(pointArr, imgSize) {
235                 var newPointArr = pointArr.map(p => {
236                     const x = Math.round(310 * p.x / parseInt(imgSize.imgWidth))
237                     const y = Math.round(155 * p.y / parseInt(imgSize.imgHeight))
238                     return { x, y }
239                 })
240                 // console.log(newPointArr,"newPointArr");
241                 return newPointArr
242             }
243         },
244         watch: {
245             // type变化则全面刷新
246             type: {
247                 immediate: true,
248                 handler() {
249                     this.init()
250                 }
251             }
252         },
253         mounted() {
254             // 禁止拖拽
255             this.$el.onselectstart = function () {
256                 return false
257             }
258         }
259     }
260 </script>