前端代码规范

1
修改前

<text v-if="index==current_index" style="border-bottom-color: #47a7ff;border-bottom-width: 2px; border-style: solid;padding-bottom: 10rpx; color: #000000; font-size: 28rpx;">{{ title.name }}</text>

修改后

 :class="index==current_index &&'title-color'"

2,数组和对象接收值时需要加上([])
修改前

titleList: {
        type: Array,
        default: () => []
    },

修改后

titleList: {
        type: Array,
        default: () => ([])
    },

3判断语句
修改前

switch (this.current_index) {
                    case 2:
                        this.$emit('selectChange', 'strategyShow')
                        break;
                    case 3:
                        this.$emit('selectChange', 'dynamicShow')
                        break;
                    case 4:
                        this.$emit('selectChange', 'driveFriendShow')
                        break;
                }

修改后

const selectShow={
                    2:'strategyShow',
                    3:'dynamicShow',
                    4:'driveFriendShow'
                }
                this.$emit('selectChange',selectShow[this.current_index])
                

修改前
路由携参

        if (this.attractions == 'friendsdestination') {
                    _router.push({
                        path: "/foundfriend/FoundFriend",
                        query: {
                            attractions_id: item.id,
                            address: item.address

                        }

                    });
                } else {
                    _router.push({
                        path: "/strategy/Perfect",
                        query: {
                            attractions_id: item.id,
                            address: item.address

                        }

                    });
                }

修改后

const query = {
                    attractions_id: item.id,
                    address: item.address
                }
                _router.push({
                    path: this.attractions === 'friendsdestination' ? '/foundfriend/FoundFriend' : '/strategy/Perfect',
                    query
                })

修改后

    handleSubmit(key) {
                console.log("key",key)
                apiList[key === 1 ? 'apiUserPortalEnterpriseCreate' : 'apiUserPortalEnterpriseResubmit']({ ...this.business_information})
                    .then(res => {
                        if (res.code == 200) {
                            this.getApiUserPortalEnterpriseGetByToken()
                            this.authentication = false
                            this.authenticating = true
                        }
                         else {
                            showToast(res.msg)
                        }
                    })
            },
//上传图片,传入对应的key
    handleChooseImage(key) {
                chooseImage().then(res => {
                    this.business_information[key] = res;
                });
            },

校验
方法一:
Object.entries()方法返回键值对数组
every() 方法数组内的所有元素是否都能通过返回boolean
如何满足进行Axios请求,不满足弹出错误message

err_state(state) {
                console.log("state",state)
                switch (state) {
                    case "company_name":
                        return "请输入企业名称";
                    case "social_credit_code":
                        
                        return "请输入统一社会信用代码";
                    default:
                
                }
            },
    let check_array = Object.entries({ ...this.business_information
                    });
                    let check_all = check_array.every((elem) => {
                        return elem[1];
                    });
                    console.log("check_all", check_all)
                    if (check_all) {
                        console.log("**********")
                        this.handleSubmit(this.examine == 1 ? 1 : 2)
                    } else {
                        for (let i = 0; i < check_array.length; i++) {
                            if (!check_array[i][1]) {
                                console.log("错误")
                            
                                this.$message.error(this.err_state(check_array[i][0]));
                                break;
                            }
                        }
                    }

方法二:
valid.js
接收两个参数,vm第一个表单值 rules第二个检验规则

const validateToast = (vm, rules) => {
    return new Promise((resolve, reject) => {
        Object.keys(rules).forEach((key) => {
            const segments = key.split('.')
            const item = rules[key]
            item.forEach((ruleItem) => {
                const value = segments.reduce((total, item) => total && total[item], vm)
                // 必填
                if (ruleItem.required && !value) {
                    reject(ruleItem.message)
                }
                // 正则
                if (ruleItem.pattern && !ruleItem.pattern.test(value)) {
                    reject(ruleItem.message)
                }
            })
        })
        resolve(true)
    })
}
export {
    validateToast
}

rules.js
Object.freeze() 冻结对象

const business_rules = Object.freeze({
    'business_information.company_name': [{
        required: true,
        message: '请输入企业名称'
    }],
    'business_information.social_credit_code': [{
            required: true,
            message: '请输入统一社会信用代码'
        },
        {
            pattern: /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g,
            message: '社会信用代码不正确'
        }
    ]
})
export {
    business_rules
}
        validateToast(this, business_rules).then((valid) => {
                        console.log("valid", valid)
                    }).catch((err) => {
                        console.log("未通过校验",err)
                        showToast(err)
                    })

同一个方法传入不同字符串

@click="handleChooseImage('account_bank_permit')"
data(){
  return {
      business_information:{
            account_bank_permit:''
        }  
    }
}
handleChooseImage(key) {
                chooseImage().then(res => {
                    this.business_information[key] = res;
                });
            },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350