前端代码规范

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;
                });
            },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容