udxcms 1.0.1

package/dist/components/basicComponents/GtForm.vue

@@ -0,0 +1,161 @@
+<!--
+ * @Author: 
+ * @Date: 2020-11-30 15:44:49
+ * @LastEditTime: 2021-08-31 20:46:52
+ * @LastEditors: Lewis
+ * @Description: 
+-->
+<template>
+    <div class='GT-BOX' id='GT-BOX' v-show="type != 'bind'">
+        <div class='text' v-show='status == 0'>{{text}}</div>
+        <div id="wait" v-show='status == 1'>
+            <div class="loading">
+                <div class="loading-dot"></div>
+                <div class="loading-dot"></div>
+                <div class="loading-dot"></div>
+                <div class="loading-dot"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { geeTest } from "../../api/common"
+    export default {
+        name: 'GT',
+        props: {
+            type: {
+                type: String,
+                default: 'bind'
+            },
+            value: {
+                type: Object,
+                default: function() {
+                    return {}
+                }
+            },
+            text: {
+                type: String,
+                default: 'Conduct verification™ Security component is loading'
+            },
+            gtId: {
+                type: String,
+                default: 'GT-BOX'
+            }
+        },
+        data() {
+            return {
+                status: 0,
+                userId: ''
+            }
+        },
+        created() {
+            this.status = 0
+        },
+        mounted() {
+            this.status = 0
+            // this.initGtCaptcha()
+        },
+        methods: {
+            initGtCaptcha() {
+                var that = this
+                this.status = 1
+                geeTest().then(function(res) {
+                    console.log(res)
+                    let resBody = res.data.data
+                    that.userId = resBody.geetest_user
+                    window.initGeetest({
+                        gt: resBody.geetest_id ,
+                        challenge: resBody.challenge,
+                        offline: !resBody.success,
+                        new_captcha: resBody.new_captcha,
+                        lang: 'en',
+                        product: that.type,
+                        width: "100%"
+                    }, that.handler)
+                }).catch(e => e)
+            },
+            handler(callback) {
+                console.log(callback)
+                let that = this
+                if (this.type != 'bind') {
+                    let dom = document.getElementById('GT-BOX')
+                    callback.appendTo(dom)
+                }
+                callback.onReady(ready => {
+                    that.status = 2
+                }).onError(err => {
+                    console.log(err)
+                }).onSuccess(success => {
+                    if (that.type == 'bind') {
+                        that.$emit('success')
+                    }
+                })
+                window.gt = callback
+                window.gt.geetest_user = that.userId
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .GT-BOX {
+        .text {
+            height: 48px;
+            line-height: 48px;
+            width: 100%;
+            text-align: center;
+            border-radius: 6px;
+            background-color: #F3F3F3;
+            color: #666;
+            font-size: 16px;
+            font-family:Font;
+        }
+        .wait {
+            /* display: none; */
+            height: 48px;
+            width: 100%;
+            text-align: center;
+            border-radius: 6px;
+            background-color: #F3F3F3;
+        }
+        .loading {
+            margin: auto;
+            width: 70px;
+            height: 20px;
+        }
+        .loading-dot {
+            float: left;
+            width: 8px;
+            height: 8px;
+            margin: 18px 4px;
+            background: #ccc;
+            border-radius: 50%;
+            opacity: 0;
+            box-shadow: 0 0 2px black;
+            animation: loadingFade 1s infinite;
+        }
+
+        .loading-dot:nth-child(1) {
+            animation-delay: 0s;
+        }
+
+        .loading-dot:nth-child(2) {
+            animation-delay: 0.1s;
+        }
+
+        .loading-dot:nth-child(3) {
+            animation-delay: 0.2s;
+        }
+
+        .loading-dot:nth-child(4) {
+            animation-delay: 0.3s;
+        }
+
+        @keyframes loadingFade {
+            0% { opacity: 0; }
+            50% { opacity: 0.8; }
+            100% { opacity: 0; }
+        }
+    }
+</style>

package/dist/components/basicComponents/Img.vue

@@ -0,0 +1,34 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-20 15:57:31
+ * @LastEditTime: 2021-08-02 11:52:23
+ * @LastEditors: Lewis
+ * @Description: 
+-->
+<template>
+    <img :src="newSrc" alt="">
+</template>
+
+<script>
+export default {
+    props: {
+        src: {
+            type: String,
+            default: "",
+        }
+    },
+    computed:{
+        newSrc: function() {
+            let path = this.$t('site_common_logo_base_url') + window.location.hostname
+            return path + this.src
+        }
+    },
+    mounted() {
+        console.log('---')
+    }
+}
+</script>
+
+<style>
+
+</style>

package/dist/components/basicComponents/Input.vue

@@ -0,0 +1,296 @@
+<template>
+    <div class="container-input">
+        <div class="input">
+            <input ref="input" :class="{'disSelecr': hasEyeAnimation}" v-bind="$attrs" :type="newType" v-model="newValue" @blur="checkRule" @input='transNewVal' @keyup.enter="keyup" @focus="focus"/>
+            <div class="tool">
+                <div class="clear" @click="clear" v-show="clearable && newValue">
+                    <svg-icon class="svgIcon" icon-class="clear"></svg-icon>
+                </div>
+                <div class="eye" v-if="hasEye" @click="changePassWordStatus">
+                    <svg-icon class="svgIcon" :icon-class="!showPassWord ? 'close-eye' : 'open-eye'"></svg-icon>
+                </div>
+            </div>
+        </div>
+
+        <p class="err" v-show="errShow && showInnerErrShow">{{errInfo}}</p>
+    </div>
+</template>
+
+<script>
+import * as regulars from '../../config/const'
+import { calcDotDeal } from '../../utils/index'
+export default {
+    name: 'Input',
+    props: {
+        value: {
+            type: String,
+            default: ""
+        },
+        hasEye: {
+            type:Boolean,
+            default: false,
+        },
+        hasEyeAnimation: {
+            type: Boolean,
+            default: false
+        },
+        type: {
+            type: String,
+            default: "text"
+        },
+        rule: {
+            type: Object,
+        },
+        regularFn: {
+            type: Function,
+        },
+        clearable: {
+            type: Boolean,
+            default: true,
+        },
+        showInnerErrShow: {
+            type: Boolean,
+            default: true,
+        },
+        formType: {
+            type: Number,
+            default: 0,
+        },
+        isModel: {
+            type: String,
+            default: ''
+        },
+        isPaste: {
+            type: Boolean,
+            default: false
+        },
+        verifyMediate: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        newType: function() {
+            if(this.hasEye && !this.showPassWord && !this.hasEyeAnimation) {
+                return "password"
+            } else if (this.hasEye && this.showPassWord || this.hasEyeAnimation){
+                return "text"
+            }
+            return this.type;
+        }
+    },
+    data() {
+        return {
+            newValue: "",
+            showPassWord: false,
+            errShow: false,
+            errInfo: "",
+            tempValue: "",
+            timer: null
+        }
+    },
+    watch: {
+        value(val, oldval) {
+            if(val !=oldval && !oldval || this.isModel) {
+                this.newValue = val
+            }
+        },
+        formType(val, oldval) {
+            if(val != oldval) {
+                this.newValue = ''
+                this.tempValue = ''
+            }
+        },
+        newValue: function(val, oldval) {
+            if(oldval!=val) {
+                let checkRefVal = this.tempValue.length ? this.tempValue : val
+                this.changeValue(checkRefVal)
+            }
+        },
+    },
+    methods: {
+        transNewVal(e) {
+            let val = e.target.value
+            this.newValue = val
+            if(e.inputType == 'insertFromPaste') {
+                this.dealReferralCode(val)
+                this.verifyMediate && this.checkRule()
+            }
+            if (this.hasEyeAnimation && !this.showPassWord) {
+                let current = e.data, tempValue = this.tempValue, inputType = e.inputType
+                if (inputType == 'insertFromPaste') {
+                    // deal with pase Code
+                    if (!~val.indexOf('●')) {
+                        this.tempValue = val
+                    } else {
+                        this.tempValue = calcDotDeal(val, tempValue)
+                    }
+                } else {
+                    if (current && current.length > 1) {
+                        // use for 360 chrome
+                        if (inputType != 'insertCompositionText') {
+                            this.tempValue += current
+                        }
+                    } else {
+                        if (tempValue.length && !current && (current != 0 || current !='0') && typeof current === 'object') {
+                            this.tempValue = tempValue.slice(0, val.length - tempValue.length)
+                        } else if (typeof current === 'undefined' && val.length){
+                            this.tempValue = calcDotDeal(val, tempValue)
+                        } else {
+                            // 处理全选之后输入导致值重复问题。
+                            // 比如输入123之后进行全选操作，然后在输入123，就会出现123123
+                            const inputValHasDot = val.indexOf('●');
+                            if (inputValHasDot >= 0) {
+                                if (typeof current !== 'undefined') this.tempValue += current
+                            } else {
+                                this.tempValue = val;
+                                // this.tempValue = '';
+                                // if (typeof current !== 'undefined') this.tempValue += current
+                            }
+                            // if (typeof current !== 'undefined') this.tempValue += current
+                        }
+                    }
+                }
+                clearTimeout(this.timer)
+                this.timer = setTimeout(() => {
+                    this.newValue = new Array(this.tempValue.length).fill('●').join('')
+                    this.checkRule()
+                }, 500)
+            } else {
+               this.verifyMediate && this.checkRule()
+            }
+        },
+        changeValue(val) {
+            this.$emit('input',val)
+        },
+        changePassWordStatus() {
+            this.showPassWord = !this.showPassWord;
+            if (this.showPassWord) {
+                this.newValue = this.hasEyeAnimation ? this.tempValue : this.newValue
+                this.tempValue = ''
+            } else {
+                this.tempValue = this.newValue
+                this.newValue = this.hasEyeAnimation ? new Array(this.tempValue.length).fill('●').join('') : this.newValue
+            }
+        },
+        clear() {
+            this.newValue = "";
+            this.tempValue = "";
+            this.$emit('input', "");
+            this.checkRule()
+        },
+        checkRule(e) {
+            if(!this.rule) {
+                return;
+            }
+            let reg,result;
+            let resVal = !this.showPassWord && this.hasEyeAnimation ? this.tempValue : this.newValue
+            if(this.rule.regular) {
+                result = this.regularFn(resVal)
+            }else {
+                reg = regulars[this.rule.name];
+                result  = reg.test(resVal);
+            }
+
+            if(!result) {
+                this.errInfo = this.rule.errInfo
+                this.errShow = true;
+            }else {
+                this.errShow = false;
+                this.errInfo = ''
+            }
+            this.$emit("getCheckResult", result, this.errInfo)
+        },
+        blur(e) {
+            this.$emit("blur",e)
+        },
+        keyup(e) {
+            this.$emit("keyup",e)
+        },
+        focus(e) {
+            this.$emit("focus",e)
+        },
+        dealReferralCode(val) {
+            if (this.isPaste) {
+                this.$emit('pasteFunc', val)
+            }
+        }
+    },
+
+}
+</script>
+
+<style lang="less" scoped>
+    .container-input {
+        position: relative;
+
+        .err {
+            // position: absolute;
+            // bottom: 0;
+            font-size: 14px;
+            color: #EA5455;
+            line-height: 22px;
+            letter-spacing: 0px;
+            text-align: left;
+            // white-space: nowrap;
+        }
+        .input {
+            position: relative;
+            .tool {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 18px;
+                display: flex;
+                align-items: center;
+                z-index:2;
+                & > div {
+                    margin-left: 12px;
+                }
+                .clear {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: -6px;
+                }
+                .eye {
+                    width: 16px;
+                    height: 16px;
+                }
+            }
+        }
+        input {
+            width: 100%;
+            height: 48px;
+            box-sizing: border-box;
+            padding: 12px 16px;
+            background: #ffffff;
+            border: 1px solid var(--border-color-base);
+            border-radius: 6px;
+            outline: none;
+            font-size: 16px;
+            font-family: Font;
+            text-align: left;
+            color: #303133;
+            letter-spacing: 0px;
+        }
+        input:active {
+            background: #ffffff;
+            border: 1px solid var(--primary-color);
+        }
+        input:focus {
+            background: #ffffff;
+            border: 1px solid var(--primary-color);
+            color: var(--primary-color);
+        }
+        input::-webkit-input-placeholder {
+            font-size: 12px;
+            font-family: Font;
+            text-align: left;
+            color: #909399;
+            line-height: 24px;
+        }
+    }
+    .svgIcon {
+        color: #C0C3CC;
+    }
+</style>

package/dist/components/basicComponents/LineProcess.vue

@@ -0,0 +1,186 @@
+<!--
+ * @Author: 
+ * @Date: 2020-12-11 18:43:35
+ * @LastEditTime: 2021-08-02 11:55:32
+ * @LastEditors: Lewis
+ * @Description: 
+-->
+
+<template>
+    <div class='line-process'>
+       <div class='line-box' :style="{width: width + 'px', height: height + 'px', }">
+            <div class='line-box-active' :style="{width: lineval + 'px', height: height + 'px'}">
+                <div class='line-box-active-dot'></div>
+            </div>
+            <div v-for="(item, index) in dataArr" :key="index" :class="['line-dot', {'active': dotActive >= index && item}, {'line-dot-act': item}]" :style="{'margin-left': distance + 'px'}"
+                v-show='index && index < dataArr.length - 1'>
+                <div class='mark-num' v-if='item && index == dataArr.length - 2'>{{index - 1}}{{dataArr.length === 4 ? '00%':'x'}}</div>
+            </div>
+       </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'LineProcess',
+        props: {
+            width: {
+                type: Number,
+                default: 700
+            },
+            height: {
+                type: Number,
+                default: 6
+            },
+            colors: {
+                type: Array,
+                default: function() {
+                    return []
+                }
+            },
+            currentRate: {
+                type: Number | String,
+                default: 1
+            },
+            val: {
+                type: Number | String,
+                default: 200
+            },
+            activitySpeed: {
+                type: Array,
+                default: function() {
+                    return []
+                }
+            }
+        },
+        data() {
+            return {
+                dotActive: 0,
+                distance: 100,
+                lineval: 0,
+                model: 1,
+                dataArr: [],
+                max: 1000
+            }
+        },
+        watch: {
+            val: {
+                handler() {
+                    this.init()
+                },
+                immediate: true
+            },
+            activitySpeed: {
+                handler() {
+                    this.init()
+                },
+                immediate: true               
+            }
+        },
+        mounted() {
+            this.init()
+        },
+        methods: {
+            init() {
+                let activitySpeed = this.activitySpeed || []
+                this.model = activitySpeed.length - 1
+                if (this.model >= 1) {
+                    this.formatLine(this.model)
+                }
+            },
+            formatLine(model) {
+                let activitySpeed = this.activitySpeed || []
+                this.max = activitySpeed[activitySpeed.length - 1]
+                switch(model * 1) {
+                    case 1:
+                        this.lineval = this.width * 2/3 * (this.val / this.max)
+                        this.dataArr = [0, ...activitySpeed, 0]
+                        this.distance = this.width / (this.dataArr.length - 1) - 10
+                        this.dotActive = 0
+                        break;
+                    case 2:
+                        this.dataArr = [...activitySpeed, 0]
+                        this.lineval = this.width * 2/3 * (this.val / this.max)
+                        this.distance = this.width / (this.dataArr.length - 1) - 10
+                        this.dotActive = Math.floor(this.lineval / this.distance)
+                         
+                        break;
+                    case 3:
+                        this.dataArr = [...activitySpeed, 0]
+                        this.lineval = this.width * 3/4 * this.val / this.max
+                        this.distance = this.width / (this.dataArr.length - 1) - 10
+                        this.dotActive = Math.floor(this.lineval / this.distance)
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .line-process {
+        margin: 30px 0;
+    }
+    .line-box {
+        position: relative;
+        z-index: 3;
+        margin: 0 auto;
+        background: linear-gradient(63deg,rgba(255,255,255,0), rgba(255, 255, 255, .2) 42%, rgba(255,255,255,0) 100%);
+        display: flex;
+        // justify-content: space-around;
+    }
+    .line-dot {
+        display: inline-block;
+        position: relative;
+        border-radius: 50%;
+        margin-top: -4px;
+        background: black;
+    }
+    .line-dot-act {
+        width: 14px;
+        height: 14px;
+        border: 2px solid rgba(255, 255, 255, .6);
+    }
+    .line-dot.active {
+        background: white;
+        border: 1px solid white;
+    }
+    .mark-num {
+        position: absolute;
+        width: 50px;
+        left: -20px;
+        top: -20px;
+        text-align: center;
+        font-size: 14px;
+        font-family: FontItalic;
+        color: #ffffff;
+        font-style:italic;
+    }
+    .line-box-active {
+        position:absolute;
+        z-index:-1;
+        top: 0;
+        left: 0;
+        width: 100px;
+        background: linear-gradient(80deg,rgba(78,16,0,0) 7%, #4e1000 37%, #ba7f00 71%, #fefefe 95%);
+    }
+    .line-box-active-dot {
+        position: absolute;
+        right: -2px;
+        top: -4px;
+        height: 12px;
+        width: 12px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0 0 10px 6px rgba(255, 255, 255, .1);
+        animation: dotKey 3s infinite alternate;
+    }
+    @keyframes dotKey {
+        0% {
+            box-shadow: 0 0 10px 6px rgba(255, 255, 255, .1);
+        }
+        100% {
+            box-shadow: 0 0 10px 10px rgba(255, 255, 255, .4);
+        }
+    }
+</style>