fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/verify/index.vue

@@ -0,0 +1,416 @@
+<template>
+    <div v-show="showBox" id="DragValidNew" :class="mode=='pop'?'mask':''">
+        <div :class="mode=='pop'?'verifybox':''" :style="{'max-width':parseInt(imgSize.width)+30+'px'}">
+            <div v-if="mode=='pop'" class="verifybox-top c-23242e">{{$t('verify.index.76gx59')}}</div>
+            <van-icon name="close" class="ft22 verifybox-close close-icon c-c8c9cc" @click="closeBox" />
+            <div class="verifybox-bottom" :style="{padding:mode=='pop'?'15px':'0'}">
+                <!-- 验证码容器 -->
+                <components
+                    :is="componentType"
+                    v-if="componentType"
+                    ref="instance"
+                    :captcha-type="captchaType"
+                    :type="verifyType"
+                    :figure="figure"
+                    :show-box="showBox"
+                    :arith="arith"
+                    :mode="mode"
+                    :v-space="vSpace"
+                    :explain="explain"
+                    :img-size="imgSize"
+                    :block-size="blockSize"
+                    :bar-size="barSize"
+                    :default-img="defaultImg"
+                    @success="success"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+<script type="text/babel">
+import VerifySlide from './Verify/VerifySlide';
+import VerifyPoints from './Verify/VerifyPoints';
+
+export default {
+    name: 'Verify',
+    components: {
+        VerifySlide,
+        VerifyPoints
+    },
+    props: {
+        // 双语化
+        locale: {
+            require: false,
+            type: String,
+            default() {
+                // 默认语言不输入为浏览器语言
+                let language = '';
+                if (navigator.language) {
+                    language = navigator.language;
+                } else {
+                    language = navigator.browserLanguage;
+                }
+                return language;
+            }
+        },
+        captchaType: {
+            type: String,
+            required: true
+        },
+        figure: {
+            type: Number,
+            default: 0
+        },
+        arith: {
+            type: Number,
+            default: 0
+        },
+        mode: {
+            type: String,
+            default: 'pop'
+        },
+        vSpace: {
+            type: Number,
+            default: 0
+        },
+        explain: {
+            type: String,
+            default: ''
+        },
+        imgSize: {
+            type: Object,
+            default() {
+                return {
+                    width: '310px',
+                    height: '155px'
+                };
+            }
+        },
+        blockSize: {
+            type: Object,
+            default: () => { }
+        },
+        barSize: {
+            type: Object,
+            default: () => { }
+        }
+    },
+    data() {
+        return {
+            clickShow: false,
+            // 内部类型
+            verifyType: '2',
+            // 所用组件类型
+            componentType: 'VerifySlide',
+            // 默认图片
+            defaultImg: 'https://dop-pro-1251973116.file.myqcloud.com/upload/img/lzgweb/dragValid1.png'
+        };
+    },
+    computed: {
+        instance() {
+            return this.$refs.instance || {};
+        },
+        showBox() {
+            if (this.mode === 'pop') {
+                return this.clickShow;
+            }
+            return true;
+        }
+    },
+    watch: {
+        captchaType: {
+            immediate: true,
+            deep: true,
+            handler(captchaType) {
+                switch (captchaType.toString()) {
+                    case 'blockPuzzle':
+                        this.verifyType = '2';
+                        this.componentType = 'VerifySlide';
+                        break;
+                    case 'clickWord':
+                        this.verifyType = '';
+                        this.componentType = 'VerifyPoints';
+                        break;
+                }
+            }
+        }
+    },
+    mounted() {
+        this.uuid();
+    },
+    methods: {
+        // 生成 uuid
+        uuid() {
+            var s = [];
+            var hexDigits = '0123456789abcdef';
+            for (var i = 0; i < 36; i++) {
+                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+            }
+            s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
+            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+            s[8] = s[13] = s[18] = s[23] = '-';
+
+            var slider = 'slider' + '-' + s.join('');
+            var point = 'point' + '-' + s.join('');
+            // 判断下是否存在 slider
+            if (!localStorage.getItem('slider')) {
+                localStorage.setItem('slider', slider);
+            }
+            if (!localStorage.getItem('point')) {
+                localStorage.setItem('point', point);
+            }
+        },
+        i18n(text) {
+            if (this.$t) {
+                return this.$t(text);
+            }
+            // 兼容不存在的语言
+            const i18n = this.$options.i18n.messages[this.locale] || this.$options.i18n.messages['en-US'];
+            return i18n[text];
+        },
+        refresh() {
+            if (this.instance.refresh) {
+                this.instance.refresh();
+            }
+        },
+        closeBox() {
+            this.clickShow = false;
+        },
+        show() {
+            if (this.mode === 'pop') {
+                this.clickShow = true;
+            }
+        },
+        success(res) {
+            this.$emit('success', res);
+        }
+    }
+};
+</script>
+<style lang="less" scope>
+#DragValidNew {
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+	.verifybox {
+		position: relative;
+		box-sizing: border-box;
+		border-radius: 12px;
+		border: 1px solid #e4e7eb;
+		background-color: #fff;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+	.verifybox-top {
+		padding: 0 15px;
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		font-weight: 500;
+		font-size: 18px;
+		box-sizing: border-box;
+	}
+	.verifybox-bottom {
+		padding: 15px;
+		box-sizing: border-box;
+	}
+	.verifybox-close {
+		position: absolute;
+		bottom: -36px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 24px;
+		height: 24px;
+		text-align: center;
+		cursor: pointer;
+	}
+	.mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		width: 100%;
+		height: 100vh;
+		background: rgba(0, 0, 0, 0.3);
+		/* display: none; */
+		transition: all 0.5s;
+	}
+	.verify-tips {
+		position: absolute;
+		left: 0px;
+		bottom: 0px;
+		width: 100%;
+		height: 30px;
+		line-height: 30px;
+		color: #fff;
+	}
+	.suc-bg {
+		background-color: rgba(92, 184, 92, 0.5);
+		filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
+	}
+	.err-bg {
+		background-color: rgba(217, 83, 79, 0.5);
+		filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
+	}
+	.tips-enter,
+	.tips-leave-to {
+		bottom: -30px;
+	}
+	.tips-enter-active,
+	.tips-leave-active {
+		transition: bottom 0.5s;
+	}
+	/* ---------------------------- */
+	/*常规验证码*/
+	.verify-code {
+		font-size: 20px;
+		text-align: center;
+		cursor: pointer;
+		margin-bottom: 5px;
+		border: 1px solid #ddd;
+	}
+
+	.cerify-code-panel {
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.verify-code-area {
+		float: left;
+	}
+
+	.verify-input-area {
+		float: left;
+		width: 60%;
+		padding-right: 10px;
+	}
+
+	.verify-change-area {
+		line-height: 30px;
+		float: left;
+	}
+
+	.varify-input-code {
+		display: inline-block;
+		width: 100%;
+		height: 25px;
+	}
+
+	.verify-change-code {
+		color: #337ab7;
+		cursor: pointer;
+	}
+
+	.verify-btn {
+		width: 200px;
+		height: 30px;
+		background-color: #337ab7;
+		color: #ffffff;
+		border: none;
+		margin-top: 10px;
+	}
+
+	/*滑动验证码*/
+	.verify-bar-area {
+		position: relative;
+		background: #e8e8e8;
+		text-align: center;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		-webkit-border-radius: 6px;
+		width: 100%;
+		height: 12px;
+		margin-top: 8px;
+	}
+	#verifyPoints .verify-bar-area {
+		background: rgba(255, 255, 255, 0);
+	}
+	.verify-bar-area .verify-move-block {
+		position: absolute;
+		top: 0px;
+		left: 0;
+		cursor: pointer;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		-webkit-border-radius: 1px;
+		width: 40px;
+		height: 25px;
+		border-radius: 12px;
+		transform: translateY(-6px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+	}
+
+	.verify-bar-area .verify-left-bar {
+		position: absolute;
+		cursor: pointer;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		height: 12px;
+		-webkit-border-radius: 6px;
+	}
+
+	.verify-img-panel {
+		margin: 0;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		border-top: 1px solid #ddd;
+		border-bottom: 1px solid #ddd;
+		border-radius: 3px;
+		position: relative;
+	}
+
+	.verify-refresh {
+		padding-top: 18px;
+	}
+
+	.verify-img-panel .verify-gap {
+		background-color: #fff;
+		position: relative;
+		z-index: 2;
+		border: 1px solid #fff;
+	}
+
+	.verify-bar-area .verify-move-block .verify-sub-block {
+		position: absolute;
+		text-align: center;
+		z-index: 3;
+	}
+
+	.verify-bar-area .verify-move-block .verify-icon {
+		font-size: 18px;
+	}
+
+	.verify-bar-area .verify-msg {
+		z-index: 3;
+	}
+	.icon-zhengque {
+		color: #fff;
+		line-height: 32px;
+	}
+	.icon-right:before {
+		content: ' ';
+		display: block;
+		width: 16px;
+		height: 16px;
+		position: absolute;
+		margin: auto;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background-size: cover;
+		z-index: 9999;
+		background: url('https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/line.svg') no-repeat;
+		background-size: 100% 100%;
+	}
+}
+</style>

package/packages/verify/utils/verify.js

@@ -0,0 +1,53 @@
+// import CryptoJS from 'crypto-js';
+import { loadJavaScript } from '../../../assets/js/func'
+
+if (!window.CryptoJS) {
+    // 这个cdn链接的版本是4.0.0
+    loadJavaScript('https://dop-pro-1251973116.file.myqcloud.com/upload/jsfile/funzg/crypto-js.min.js').then(() => {
+        console.log('CryptoJS 加载成功', CryptoJS);
+    });
+}
+
+/**
+ * @word 要加密的内容
+ * @keyWord String  服务器随机返回的关键字
+ *  */
+export function aesEncrypt (word, keyWord = 'XwKsGlMcdPMEhR1B') {
+    var key = CryptoJS.enc.Utf8.parse(keyWord);
+    var srcs = CryptoJS.enc.Utf8.parse(word);
+    var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
+    return encrypted.toString();
+}
+
+export function resetSize (vm) {
+    var img_width, img_height, bar_width, bar_height;	// 图片的宽度、高度，移动条的宽度、高度
+
+    var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth;
+    var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight;
+
+    if (vm.imgSize.width.indexOf('%') !== -1) {
+        img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px';
+    } else {
+        img_width = this.imgSize.width;
+    }
+
+    if (vm.imgSize.height.indexOf('%') !== -1) {
+        img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px';
+    } else {
+        img_height = this.imgSize.height;
+    }
+
+    if (vm.barSize.width.indexOf('%') !== -1) {
+        bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px';
+    } else {
+        bar_width = this.barSize.width;
+    }
+
+    if (vm.barSize.height.indexOf('%') !== -1) {
+        bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px';
+    } else {
+        bar_height = this.barSize.height;
+    }
+
+    return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height };
+}

package/packages/videoPage/index.js

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