fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/uploadFile/vanUpload.js

@@ -0,0 +1,5 @@
+import VanUploadFile from './VanUploadFile'
+VanUploadFile.install = (Vue) => {
+    Vue.component(VanUploadFile.name, VanUploadFile)
+};
+export default VanUploadFile;

package/packages/verify/Verify/VerifyPoints.vue

@@ -0,0 +1,247 @@
+<template>
+    <div id="verifyPoints" style="position: relative">
+        <div class="verify-img-out">
+            <div
+                class="verify-img-panel"
+                :style="{'width': setSize.imgWidth, 'height': setSize.imgHeight, 'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight, 'margin-bottom': vSpace + 'px'}"
+            >
+                <img ref="canvas" :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg" alt="" style="width:100%;height:100%;display:block" @click="bindingClick?canvasClick($event):undefined">
+                <div
+                    v-for="(tempPoint, index) in tempPoints"
+                    :key="index"
+                    class="point-area"
+                    :style="{
+                        'background-color':'#1abd6c',
+                        color:'#fff',
+                        'z-index':9999,
+                        width:'14px',
+                        height:'14px',
+                        'text-align':'center',
+                        'line-height':'14px',
+                        'border-radius': '50%',
+                        position:'absolute',
+                        top:parseInt(tempPoint.y-5) + 'px',
+                        left:parseInt(tempPoint.x-5) + 'px'
+                    }"
+                >
+                    {{ index + 1 }}
+                </div>
+            </div>
+        </div>
+
+        <div class="verify-bar-area" :style="{'width': setSize.imgWidth, 'color': this.barAreaColor, }">
+            <span class="verify-msg">{{ text }}</span>
+        </div>
+        <div v-show="showRefresh" class="verify-refresh c-7f808a ta-c ft14" @click="refresh">{{$t('verify.verifypoints.llx1vr')}}<i class="iconfont icon-refresh icon-shuaxin ml6" />
+        </div>
+    </div>
+</template>
+<script type="text/babel">
+import { resetSize,aesEncrypt } from '../utils/verify';
+
+export default {
+    name: 'VerifyPoints',
+    props: {
+    // 弹出式pop，固定fixed
+        mode: {
+            type: String,
+            default: 'fixed'
+        },
+        captchaType: {
+            type: String,
+            default: ''
+        },
+        // 间隔
+        vSpace: {
+            type: Number,
+            default: 5
+        },
+        imgSize: {
+            type: Object,
+            default() {
+                return {
+                    width: '310px',
+                    height: '155px'
+                };
+            }
+        },
+        barSize: {
+            type: Object,
+            default() {
+                return {
+                    width: '310px',
+                    height: '40px'
+                };
+            }
+        },
+        defaultImg: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            secretKey: '', // 后端返回的ase加密秘钥
+            checkNum: 3, // 默认需要点击的字数
+            fontPos: [], // 选中的坐标信息
+            checkPosArr: [], // 用户点击的坐标
+            num: 1, // 点击的记数
+            pointBackImgBase: '', // 后端获取到的背景图片
+            poinTextList: [], // 后端返回的点击字体顺序
+            backToken: '', // 后端返回的token值
+            setSize: {
+                imgHeight: 0,
+                imgWidth: 0,
+                barHeight: 0,
+                barWidth: 0
+            },
+            tempPoints: [],
+            text: '',
+            barAreaColor: undefined,
+            barAreaBorderColor: undefined,
+            showRefresh: true,
+            bindingClick: true
+        };
+    },
+    computed: {
+        resetSize() {
+            return resetSize;
+        }
+    },
+    watch: {
+    // type变化则全面刷新
+        type: {
+            immediate: true,
+            deep: true,
+            handler() {
+                this.initPointsData();
+            }
+        }
+    },
+    mounted() {
+    // 禁止拖拽
+        this.$el.onselectstart = function() {
+            return false;
+        };
+    },
+    methods: {
+        initPointsData() {
+            // 加载页面
+            this.fontPos.splice(0, this.fontPos.length);
+            this.checkPosArr.splice(0, this.checkPosArr.length);
+            this.num = 1;
+            this.getPictrue();
+            this.$nextTick(() => {
+                this.setSize = this.resetSize(this);	// 重新设置宽度高度
+            });
+        },
+        canvasClick(e) {
+            this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e));
+            if (this.num === this.checkNum) {
+                this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
+                // 按比例转换坐标值
+                this.checkPosArr = this.pointTransfrom(this.checkPosArr, this.setSize);
+                // 等创建坐标执行完
+                setTimeout(() => {
+                    // 发送后端请求
+                    const data = {
+                        captchaType: this.captchaType,
+                        'pointJson': this.secretKey ? aesEncrypt(JSON.stringify(this.checkPosArr), this.secretKey) : JSON.stringify(this.checkPosArr),
+                        'token': this.backToken
+                    };
+                    axios.post(`/funapi/cbsmh/mhMessage/captcha/check`,data).then(res => {
+                        if (res && res.repCode === '0000') {
+                            this.barAreaColor = '#4cae4c';
+                            this.barAreaBorderColor = '#5cb85c';
+                            this.text = this.$t('verify.verifypoints.hv3ko8');
+                            this.bindingClick = false;
+                            if (this.mode === 'pop') {
+                                const timer = setTimeout((timer) => {
+                                    this.$parent.clickShow = false;
+                                    this.refresh();
+                                    clearInterval(timer);
+                                    timer = null;
+                                }, 1500);
+                            }
+                            var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify(this.checkPosArr), this.secretKey) : this.backToken + '---' + JSON.stringify(this.checkPosArr);
+                            this.$emit('success', { captchaVerification });
+                        } else {
+                            this.endError(res)
+                        }
+                    }).catch(err=>{
+                    this.endError(err)
+                });
+                }, 400);
+            }
+            if (this.num < this.checkNum) {
+                this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
+            }
+        },
+        endError(res){
+            this.barAreaColor = '#d9534f';
+            this.barAreaBorderColor = '#d9534f';
+            this.text = res?.message||this.$t('verify.verifypoints.5c6mcj');
+            setTimeout(() => {
+                this.refresh();
+            }, 700);
+        },
+        // 获取坐标
+        getMousePos: function(obj, e) {
+            var x = e.offsetX;
+            var y = e.offsetY;
+            return { x, y };
+        },
+        // 创建坐标点
+        createPoint: function(pos) {
+            this.tempPoints.push(Object.assign({}, pos));
+            return ++this.num;
+        },
+        refresh: function() {
+            this.tempPoints.splice(0, this.tempPoints.length);
+            this.barAreaColor = '#000';
+            this.barAreaBorderColor = '#ddd';
+            this.bindingClick = true;
+            this.fontPos.splice(0, this.fontPos.length);
+            this.checkPosArr.splice(0, this.checkPosArr.length);
+            this.num = 1;
+            this.getPictrue();
+            this.text = '';
+            this.showRefresh = true;
+        },
+
+        // 请求背景图片和验证图片
+        getPictrue() {
+            const data = {
+                captchaType: this.captchaType,
+                clientUid: localStorage.getItem('point'),
+                ts: Date.now() // 现在的时间戳
+            };
+            axios.post(`/funapi/cbsmh/mhMessage/captcha/get`,data).then(res => {
+                if (res && res.repCode === '0000') {
+                    this.pointBackImgBase = res.repData.originalImageBase64;
+                    this.backToken = res.repData.token;
+                    this.secretKey = res.repData.secretKey;
+                    this.poinTextList = res.repData.wordList;
+                    this.text =this.$t('verify.verifypoints.1g16ku')+this.poinTextList.join(',')+'】';
+                } else {
+                    this.text = res.repMsg;
+                }
+
+                // 判断接口请求次数是否失效
+                if (res.repCode === '6201') {
+                    this.pointBackImgBase = null;
+                }
+            });
+        },
+        // 坐标转换函数
+        pointTransfrom(pointArr, imgSize) {
+            var newPointArr = pointArr.map(p => {
+                const x = Math.round(parseInt(this.imgSize.width) * p.x / parseInt(imgSize.imgWidth));
+                const y = Math.round(parseInt(this.imgSize.height) * p.y / parseInt(imgSize.imgHeight));
+                return { x, y };
+            });
+            return newPointArr;
+        }
+    }
+};
+</script>

package/packages/verify/Verify/VerifySlide.vue

@@ -0,0 +1,364 @@
+<template>
+	<div style="position: relative">
+        <div v-if="type === '2'" class="verify-img-out" :style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}">
+			<div class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }">
+                <img :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt="" style="width:100%;height:100%;display:block">
+				<transition name="tips">
+					<span v-if="tipWords" class="verify-tips" :class="passFlag ? 'suc-bg' : 'err-bg'">{{ tipWords }}</span>
+				</transition>
+			</div>
+		</div>
+		<!-- 公共部分 -->
+		<div class="verify-bar-area" :style="{ width: setSize.imgWidth }">
+			<span class="verify-msg" v-text="text" />
+            <div class="verify-left-bar" :style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, transaction: transitionWidth,'background-color':subColor}">
+				<span class="verify-msg" v-text="finishText" />
+				<div class="verify-move-block" :style="{ 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft, width: blockSize.width, height: blockSize.height }" @touchstart="start" @mousedown="start">
+					<i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }" />
+                    <div v-if="type === '2'" class="verify-sub-block" :style="{'width':Math.floor(parseInt(setSize.imgWidth)*40/imgSize.width)+ 'px', 'height': setSize.imgHeight, 'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px', 'background-size': setSize.imgWidth + ' ' + setSize.imgHeight, }">
+                        <img v-if="blockBackImgBase" :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-show="showRefresh" class="verify-refresh c-7f808a ta-c ft14" @click="refresh">{{ $t('signsale.productposter.42oq7s') }}<i class="iconfont icon-refresh icon-shuaxin ml6" />
+        </div>
+    </div>
+</template>
+<script type="text/babel">
+import { resetSize, aesEncrypt } from "../utils/verify";
+import { getStorage } from "../../../assets/js/storage";
+export default {
+	name: "VerifySlide",
+	props: {
+		captchaType: {
+			type: String,
+			default: "",
+		},
+		type: {
+			type: String,
+			default: "1",
+		},
+		// 弹出式pop，固定fixed
+		mode: {
+			type: String,
+			default: "fixed",
+		},
+		vSpace: {
+			type: Number,
+			default: 5,
+		},
+		explain: {
+			type: String,
+			default: "",
+		},
+		imgSize: {
+			type: Object,
+			default() {
+				return {
+					width: "310px",
+					height: "155px",
+				};
+			},
+		},
+		blockSize: {
+			type: Object,
+			default() {
+				return {
+					width: "40px",
+					height: "25px",
+				};
+			},
+		},
+		barSize: {
+			type: Object,
+			default() {
+				return {
+					width: "310px",
+					height: "40px",
+				};
+			},
+		},
+		defaultImg: {
+			type: String,
+			default: "",
+		},
+		showBox: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			secretKey: "", // 后端返回的加密秘钥 字段
+			passFlag: "", // 是否通过的标识
+			backImgBase: "", // 验证码背景图片
+			blockBackImgBase: "", // 验证滑块的背景图片
+			backToken: "", // 后端返回的唯一token值
+			startMoveTime: "", // 移动开始的时间
+			endMovetime: "", // 移动结束的时间
+			tipsBackColor: "", // 提示词的背景颜色
+			tipWords: "",
+			text: "",
+			finishText: "",
+			setSize: {
+				imgHeight: 0,
+				imgWidth: 0,
+				barHeight: 0,
+				barWidth: 0,
+			},
+			top: 0,
+			left: 0,
+			moveBlockLeft: undefined,
+			leftBarWidth: undefined,
+			// 移动中样式
+			moveBlockBackgroundColor: getStorage({ name: "themeColor" }) || "#666",
+			leftBarBorderColor: "#ddd",
+			iconColor: undefined,
+			iconClass: "icon-right",
+			status: false, // 鼠标状态
+			isEnd: false, // 是够验证完成
+			showRefresh: true,
+			transitionLeft: "",
+			transitionWidth: "",
+            mainColor: getStorage({ name: 'themeColor' }) || '',
+			subColor: getStorage({ name: "themeColorObj" })?.subColor || "#888888",
+            timer: null
+		};
+	},
+	computed: {
+		barArea() {
+			return this.$el.querySelector(".verify-bar-area");
+		},
+		resetSize() {
+			return resetSize;
+		},
+	},
+	watch: {
+		// type变化则全面刷新
+		type: {
+			immediate: true,
+			deep: true,
+			handler() {
+				this.initSlideData();
+			},
+		},
+		showBox: {
+			immediate: true,
+			deep: true,
+			handler(val) {
+				if (this.subColor === "#888888") {
+					this.mainColor = getStorage({ name: "themeColor" }) || "#666";
+					this.subColor = getStorage({ name: "themeColorObj" })?.subColor || "#888888";
+				}
+			},
+		},
+	},
+	created() {},
+	mounted() {
+		// 禁止拖拽
+		this.$el.onselectstart = function () {
+			return false;
+		};
+	},
+	methods: {
+		initSlideData() {
+			this.text = this.explain;
+			this.getPictrue();
+			this.$nextTick(() => {
+				const setSize = this.resetSize(this); // 重新设置宽度高度
+				for (const key in setSize) {
+					this.$set(this.setSize, key, setSize[key]);
+				}
+			});
+
+			var _this = this;
+
+			window.removeEventListener("touchmove", function (e) {
+				_this.move(e);
+			});
+			window.removeEventListener("mousemove", function (e) {
+				_this.move(e);
+			});
+
+			// 鼠标松开
+			window.removeEventListener("touchend", function () {
+				_this.end();
+			});
+			window.removeEventListener("mouseup", function () {
+				_this.end();
+			});
+
+			window.addEventListener("touchmove", function (e) {
+				_this.move(e);
+			});
+			window.addEventListener("mousemove", function (e) {
+				_this.move(e);
+			});
+
+			// 鼠标松开
+			window.addEventListener("touchend", function () {
+				_this.end();
+			});
+			window.addEventListener("mouseup", function () {
+				_this.end();
+			});
+		},
+
+		// 鼠标按下
+		start: function (e) {
+			e = e || window.event;
+			let x = 0;
+			if (!e.touches) {
+				// 兼容PC端
+				x = e.clientX;
+			} else {
+				// 兼容移动端
+				x = e.touches[0].pageX;
+			}
+			this.startLeft = Math.floor(x - this.barArea.getBoundingClientRect().left);
+			this.startMoveTime = +new Date(); // 开始滑动的时间
+			if (this.isEnd === false) {
+				this.text = "";
+				this.moveBlockBackgroundColor = this.mainColor;
+				this.leftBarBorderColor = this.mainColor;
+				this.iconColor = "#fff";
+				e.stopPropagation();
+				this.status = true;
+			}
+		},
+		// 鼠标移动
+		move: function (e) {
+			e = e || window.event;
+			if (this.status && this.isEnd === false) {
+				let x = 0;
+				if (!e.touches) {
+					// 兼容PC端
+					x = e.clientX;
+				} else {
+					// 兼容移动端
+					x = e.touches[0].pageX;
+				}
+				var bar_area_left = this.barArea.getBoundingClientRect().left;
+				var move_block_left = x - bar_area_left; // 小方块相对于父元素的left值
+				if (move_block_left >= this.barArea.offsetWidth - parseInt(this.blockSize.width) + this.startLeft) {
+					move_block_left = this.barArea.offsetWidth - parseInt(this.blockSize.width) + this.startLeft;
+				}
+				if (move_block_left <= this.startLeft) {
+					move_block_left = this.startLeft;
+				}
+				// 拖动后小方块的left值
+                this.moveBlockLeft = (move_block_left - this.startLeft) + 'px';
+                this.leftBarWidth = (move_block_left - this.startLeft) + 'px';
+			}
+		},
+
+        // 鼠标松开
+        end: function() {
+            this.endMovetime = +new Date();
+            var _this = this;
+            // 判断是否重合
+            if (this.status && this.isEnd === false) {
+                var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
+                moveLeftDistance = moveLeftDistance * 310 / parseInt(this.setSize.imgWidth);
+                const data = {
+                    captchaType: this.captchaType,
+                    'pointJson': this.secretKey ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+                    'token': this.backToken
+                };
+                axios.post(`/funapi/cbsmh/mhMessage/captcha/check`,data).then(res => {
+                    if (res && res.repCode === '0000') {
+                        this.moveBlockBackgroundColor = '#5cb85c';
+                        this.leftBarBorderColor = '#5cb85c';
+                        this.iconColor = '#fff';
+                        this.iconClass = 'icon-zhengque';
+                        this.isEnd = true;
+                        if (this.mode === 'pop') {
+                            const timer = setTimeout((timer) => {
+                                this.$parent.clickShow = false;
+                                this.refresh();
+                                clearInterval(timer);
+                                timer = null;
+                            }, 1500);
+                        }
+                        this.passFlag = true;
+                        this.tipWords = this.$t('verify.verifyslide.6dsw8j', [((this.endMovetime - this.startMoveTime) / 1000).toFixed(2)]);
+                        var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 });
+                        this.timer = setTimeout(() => {
+                            this.tipWords = '';
+                            this.$emit('success', { captchaVerification });
+                            this.$parent.closeBox();
+                            clearInterval(this.timer);
+                            this.timer = null;
+                        }, 1000);
+                    } else {
+                        this.endError(res)
+                    }
+                }).catch(err=>{
+                    this.endError(err)
+                });
+                this.status = false;
+            }
+        },
+        endError(res){
+            this.moveBlockBackgroundColor = '#d9534f';
+            this.leftBarBorderColor = '#d9534f';
+            this.iconColor = '#fff';
+            this.iconClass = 'icon-guanbixian c-ffffff line-height32';
+            this.passFlag = false;
+            this.tipWords = res?.message||this.$t('verify.verifypoints.5c6mcj');
+            setTimeout(() => {
+                this.tipWords = '';
+                this.refresh();
+            }, 1000);
+        },
+		refresh: function () {
+			this.showRefresh = true;
+			this.finishText = "";
+
+			this.transitionLeft = "left .3s";
+			this.moveBlockLeft = 0;
+
+			this.leftBarWidth = undefined;
+			this.transitionWidth = "width .3s";
+
+			this.leftBarBorderColor = "#ddd";
+			this.moveBlockBackgroundColor = this.mainColor;
+			this.iconColor = "#000";
+			this.iconClass = "icon-right";
+			this.isEnd = false;
+
+			this.getPictrue();
+			setTimeout(() => {
+				this.transitionWidth = "";
+				this.transitionLeft = "";
+				this.text = this.explain;
+			}, 300);
+		},
+
+        // 请求背景图片和验证图片
+        getPictrue() {
+            const data = {
+                captchaType: this.captchaType,
+                clientUid: localStorage.getItem('slider'),
+                ts: Date.now() // 现在的时间戳
+            };
+            axios.post(`/funapi/cbsmh/mhMessage/captcha/get`,data).then(res => {
+                if (res && res.repCode === '0000') {
+                    this.backImgBase = res.repData.originalImageBase64;
+                    this.blockBackImgBase = res.repData.jigsawImageBase64;
+                    this.backToken = res.repData.token;
+                    this.secretKey = res.repData.secretKey;
+                } else {
+                    this.tipWords = res ? res.repMsg : '';
+                }
+				// 判断接口请求次数是否失效
+				if (res && res.repCode === "6201") {
+					this.backImgBase = null;
+					this.blockBackImgBase = null;
+				}
+			});
+		},
+	},
+};
+</script>

package/packages/verify/index.js

@@ -0,0 +1,5 @@
+import Verify from './index.vue';
+Verify.install = (Vue) => {
+    Vue.component(Verify.name, Verify);
+};
+export default Verify;