赞
踩
主要是在el-form中添加 :validate-on-rule-change=“false”
在 自定义的验证规则里边的
trigger里添加 trigger:[‘blur’,‘change’]
userrules是验证规则
userrules: {
phone: [{ required: true, message: ‘请输入用户名’, trigger:[‘blur’,‘change’] },],
password: [{ required: true, message: ‘请输入密码’, trigger:[‘blur’,‘change’] },],
},
<template> <div class="login"> <div class="loginbox" v-if="login == 1"> <div class="logintitle">登陆</div> <div class="loginbody"> <div class="left"> <el-form :model="userForm" :rules="userrules" ref="userForm" label-width="0px" :validate-on-rule-change="false"> <div class="inpboix"> <el-form-item prop="phone"> <el-input v-model="userForm.phone" placeholder="请输入手机号/邮箱"></el-input> </el-form-item> </div> <div class="inpboix"> <el-form-item prop="password"> <el-input type="password" v-model="userForm.password" placeholder="请输入密码"></el-input> </el-form-item> </div> <div class="checks"> <el-checkbox v-model="checkedpwd">记住密码</el-checkbox> <span>忘记密码</span> </div> <el-form-item> <el-button class="loginbut" @click="sublogin('userForm')">登陆</el-button> </el-form-item> <!-- <button class="loginbut" @click="sublogin">登陆</button> --> </el-form> </div> <div class="right"> <div class="rightbox"> <div class="nozh">没有账号?</div> <div class="nowzc" style="font-size:16px;font-weight:600" @click.stop="tozhuce()">立即注册 →</div> <div class="nozh">使用一下账号直接登录</div> <div class="imgbox"> <img src="../../static/img/weixin.png" style="margin-right:15px" /> <img src="../../static/img/qq.png" /> </div> </div> </div> </div> </div> <div class="zhucebox" v-if="login == 2"> <div class="toubu"></div> <div class="zhucebody"> <div class="zhuceleft"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" :validate-on-rule-change="false"> <div class="inpboix"> <el-form-item prop="nickname"> <el-input type="text" v-model="ruleForm.nickname" placeholder="请输入昵称,至少2个字符,至多20个字符" ></el-input> </el-form-item> </div> <!-- <div class="inpboix"><el-input v-model="input" placeholder="请输入昵称,至少2个字符,至多20个字符"></el-input></div> --> <div class="inpboix"> <el-form-item prop="phone"> <el-input type="text" v-model="ruleForm.phone" placeholder="请输入手机号"></el-input> </el-form-item> <!-- <el-input v-model="input" maxlength="11" placeholder="请输入手机号"></el-input> --> </div> <div class="inpboix"> <el-form-item prop="password"> <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码,字母或特殊符号+数字" ></el-input> </el-form-item> <!-- <el-input v-model="input" placeholder="请输入密码,字母或特殊符号+数字"></el-input> --> </div> <div class="inpboix1"> <el-form-item prop="captcha"> <el-input type="text" :disabled="codedisabled" v-model="ruleForm.captcha" placeholder="请输入短信验证码" ></el-input> </el-form-item> <!-- <el-input v-model="input" placeholder="请输入短信验证码"></el-input> --> <button @click.prevent="getCode" :disabled="disabled" class="code">{{message}}</button> </div> <div class="inpboix" style="margin-top:10px"> <!-- <el-radio-group v-model="radio" text-color="#43BC55" fill="#43BC55" size="small"> <el-radio label="1" >男</el-radio> <el-radio label="2" >女</el-radio> </el-radio-group>--> </div> <div class="checks"> <el-checkbox v-model="checked">已阅读并同意</el-checkbox> <span style="color:#43BC55;font-size:14px">服务条款</span> </div> <el-form-item> <el-button class="zhucebut" @click="submitForm('ruleForm')">注册</el-button> </el-form-item> </el-form> </div> <div class="zhuceright"> <div class="rightbox"> <div class="nozh">已经注册过?</div> <div class="nowzc" style="font-size:16px;font-weight:600" @click.stop="tologin()">直接登陆 →</div> <div class="nozh" style="margin-top:30px">使用一下账号直接登录</div> <div class="imgbox"> <img src="../../static/img/weixin.png" style="margin-right:15px" /> <img src="../../static/img/qq.png" /> </div> </div> </div> </div> </div> <div class="zhucebox" v-if="login == 3"> <div class="toxuiang"> <div class="topbox"> <div class="shezhitx"> <span>设置您的头像</span> <el-upload class="avatar-uploader" :action="uploadurl" :show-file-list="false" :on-success="handleAvatarSuccess" :headers="header" :data="uploadinfo" > <!-- :before-upload="beforeAvatarUpload" --> <img v-if="imageUrl" :src="imageUrl" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> <div class="shezhitx"> <span>设置您的头像</span> <div> <el-radio-group v-model="radio" @change="getsex"> <el-radio label="1">男</el-radio> <el-radio label="2">女</el-radio> </el-radio-group> </div> </div> <div class="shezhitx"> <span>选择您的坐标</span> <div> <el-select size="small" style="width: 100px;margin-right:10px" v-model="selectProv" placeholder="请选择省份" v-on:change="getProv($event)"> <el-option v-for="item in provs" :label="item.label" :key="item.value" :value="item.value"> </el-option> </el-select> <el-select size="small" style="width: 100px" v-if="selectProv!=''" v-model="selectCity" placeholder="请选择城市" v-on:change="getCity($event)"> <el-option v-for="item in citys" :label="item.label" :key="item.value" :value="item.value"> </el-option> </el-select> </div> </div> <div class="shezhitx"> <span>添加您的签名</span> <div style="width:380px"> <el-input type="textarea" placeholder="选填" v-model="sign" show-word-limit > </el-input> </div> </div> </div> <div class="bottbox"> <img src="../../static/img/changjiantou.png" /> <button class="jinrugw" @click="enter">进入官网</button> </div> </div> </div> <div class="bottom"> <div> ©FastSNS(OSChina.NET) | <span>关于我们</span> | <span>联系我们</span> | <span>@新浪微博</span> | FastimageUrlSNS 手机版 粤ICP备 </div> </div> </div> </template> <script> export default { data() { var nickname = (rule, value, callback) => { if (!value) { return callback(new Error("昵称不能为空")); } else { callback(); } }; var checkPhone = (rule, value, callback) => { const reg = /^0?(13[0-9]|15[012356789]|18[0-9]|14[578]|16[6]|17[035768]|19[19])[0-9]{8}$/; if (reg.test(value)) { return callback(); } else { callback("请输入合法的手机号"); } }; var password = (rule, value, callback) => { if (!value) { return callback(new Error("密码不能为空")); } else if (value === "123456") { callback(new Error("密码太简单")); } else { callback(); } }; var captcha = (rule, value, callback) => { if (value === "") { callback(new Error("验证码不能为空")); } else { callback(); } }; return { dqxz:[], sex:0, sign:"", uploadinfo:{type:1}, header:{}, imageUrl:"", checked: false, checkedpwd:false, disabled: false, codedisabled: true, input: "", login: 1, radio: "1", codes: "", message: "获取验证码", userForm:{ phone: "", password: "", }, userrules: { phone: [{ required: true, message: '请输入用户名', trigger:['blur','change'] },], password: [{ required: true, message: '请输入密码', trigger:['blur','change'] },], }, ruleForm: { nickname: "", phone: "", password: "", captcha: "", }, rules: { nickname: [{ validator: nickname, trigger:['blur','change'] }], phone: [{ validator: checkPhone, trigger:['blur','change'] }], password: [{ validator: password, trigger:['blur','change'] }], captcha: [{ validator: captcha, trigger:['blur','change'] }], }, provs:[{label:"北京市",value:"北京市"}, {label:"天津市",value:"天津市"}, {label:"河北省",value:"河北省"}, {label:"山西省",value:"山西省"}, {label:"内蒙古自治区",value:"内蒙古自治区"}, {label:"辽宁省",value:"辽宁省"}, {label:"吉林省",value:"吉林省"}, {label:"黑龙江省",value:"黑龙江省"}, {label:"上海市",value:"上海市"}, {label:"江苏省",value:"江苏省"}, {label:"浙江省",value:"浙江省"}, {label:"安徽省",value:"安徽省"}, {label:"福建省",value:"福建省"}, {label:"江西省",value:"江西省"}, {label:"山东省",value:"山东省"}, {label:"河南省",value:"河南省"}, {label:"湖北省",value:"湖北省"}, {label:"湖南省",value:"湖南省"}, {label:"广东省",value:"广东省"}, {label:"广西壮族自治区",value:"广西壮族自治区"}, {label:"海南省",value:"海南省"}, {label:"重庆市",value:"重庆市"}, {label:"四川省",value:"四川省"}, {label:"贵州省",value:"贵州省"}, {label:"云南省",value:"云南省"}, {label:"西藏自治区",value:"西藏自治区"}, {label:"陕西省",value:"陕西省"}, {label:"甘肃省",value:"甘肃省"}, {label:"青海省",value:"青海省"}, {label:"宁夏回族自治区",value:"宁夏回族自治区"}, {label:"新疆维吾尔自治区",value:"新疆维吾尔自治区"}, {label:"台湾省",value:"台湾省"}, {label:"香港特别行政区",value:"香港特别行政区"}, {label:"澳门特别行政区",value:"澳门特别行政区"}] , citys: [], selectProv: '', selectCity: '' }; }, mounted(){ let headers={} if(sessionStorage.getItem('token')){ headers['Authorization']='Bearer '+sessionStorage.getItem('token') } this.header=headers let phone = localStorage.getItem("phone") let password = localStorage.getItem("password") let checkedpwd = localStorage.getItem("checkedpwd") if(phone&&password){ this.userForm.phone = phone this.userForm.password = password }else{ this.userForm.phone = "" this.userForm.password = "" } if(checkedpwd){ this.checkedpwd = true }else{ this.checkedpwd = false } }, methods: { handleAvatarSuccess(res){ this.imageUrl=res.data.name }, getsex(e){ console.log(e) this.sex=e }, getProv: function (prov) { let tempCity=[]; this.citys=[]; this.selectCity=''; let allCity=[{ prov: "北京市", label: "北京市" }, { prov: "天津市", label: "天津市" }, { prov: "河北省", label: "石家庄市" }, { prov: "河北省", label: "唐山市" }, { prov: "河北省", label: "秦皇岛市" }, { prov: "河北省", label: "邯郸市" }, { prov: "河北省", label: "邢台市" }, { prov: "河北省", label: "保定市" }, { prov: "河北省", label: "张家口市" }, { prov: "河北省", label: "承德市" }, { prov: "河北省", label: "沧州市" }, { prov: "河北省", label: "廊坊市" }, { prov: "河北省", label: "衡水市" }, { prov: "山西省", label: "太原市" }, { prov: "山西省", label: "大同市" }, { prov: "山西省", label: "阳泉市" }, { prov: "山西省", label: "长治市" }, { prov: "山西省", label: "晋城市" }, { prov: "山西省", label: "朔州市" }, { prov: "山西省", label: "晋中市" }, { prov: "山西省", label: "运城市" }, { prov: "山西省", label: "忻州市" }, { prov: "山西省", label: "临汾市" }, { prov: "山西省", label: "吕梁市" }, { prov: "内蒙古自治区", label: "呼和浩特市" }, { prov: "内蒙古自治区", label: "包头市" }, { prov: "内蒙古自治区", label: "乌海市" }, { prov: "内蒙古自治区", label: "赤峰市" }, { prov: "内蒙古自治区", label: "通辽市" }, { prov: "内蒙古自治区", label: "鄂尔多斯市" }, { prov: "内蒙古自治区", label: "呼伦贝尔市" }, { prov: "内蒙古自治区", label: "巴彦淖尔市" }, { prov: "内蒙古自治区", label: "乌兰察布市" }, { prov: "内蒙古自治区", label: "兴安盟" }, { prov: "内蒙古自治区", label: "锡林郭勒盟" }, { prov: "内蒙古自治区", label: "阿拉善盟" }, { prov: "辽宁省", label: "沈阳市" }, { prov: "辽宁省", label: "大连市" }, { prov: "辽宁省", label: "鞍山市" }, { prov: "辽宁省", label: "抚顺市" }, { prov: "辽宁省", label: "本溪市" }, { prov: "辽宁省", label: "丹东市" }, { prov: "辽宁省", label: "锦州市" }, { prov: "辽宁省", label: "营口市" }, { prov: "辽宁省", label: "阜新市" }, { prov: "辽宁省", label: "辽阳市" }, { prov: "辽宁省", label: "盘锦市" }, { prov: "辽宁省", label: "铁岭市" }, { prov: "辽宁省", label: "朝阳市" }, { prov: "辽宁省", label: "葫芦岛市" }, { prov: "吉林省", label: "长春市" }, { prov: "吉林省", label: "吉林市" }, { prov: "吉林省", label: "四平市" }, { prov: "吉林省", label: "辽源市" }, { prov: "吉林省", label: "通化市" }, { prov: "吉林省", label: "白山市" }, { prov: "吉林省", label: "松原市" }, { prov: "吉林省", label: "白城市" }, { prov: "吉林省", label: "延边朝鲜族自治州" }, { prov: "黑龙江省", label: "哈尔滨市" }, { prov: "黑龙江省", label: "齐齐哈尔市" }, { prov: "黑龙江省", label: "鸡西市" }, { prov: "黑龙江省", label: "鹤岗市" }, { prov: "黑龙江省", label: "双鸭山市" }, { prov: "黑龙江省", label: "大庆市" }, { prov: "黑龙江省", label: "伊春市" }, { prov: "黑龙江省", label: "佳木斯市" }, { prov: "黑龙江省", label: "七台河市" }, { prov: "黑龙江省", label: "牡丹江市" }, { prov: "黑龙江省", label: "黑河市" }, { prov: "黑龙江省", label: "绥化市" }, { prov: "黑龙江省", label: "大兴安岭地区" }, { prov: "上海市", label: "上海市" }, { prov: "江苏省", label: "南京市" }, { prov: "江苏省", label: "无锡市" }, { prov: "江苏省", label: "徐州市" }, { prov: "江苏省", label: "常州市" }, { prov: "江苏省", label: "苏州市" }, { prov: "江苏省", label: "南通市" }, { prov: "江苏省", label: "连云港市" }, { prov: "江苏省", label: "淮安市" }, { prov: "江苏省", label: "盐城市" }, { prov: "江苏省", label: "扬州市" }, { prov: "江苏省", label: "镇江市" }, { prov: "江苏省", label: "泰州市" }, { prov: "江苏省", label: "宿迁市" }, { prov: "浙江省", label: "杭州市" }, { prov: "浙江省", label: "宁波市" }, { prov: "浙江省", label: "温州市" }, { prov: "浙江省", label: "嘉兴市" }, { prov: "浙江省", label: "湖州市" }, { prov: "浙江省", label: "绍兴市" }, { prov: "浙江省", label: "金华市" }, { prov: "浙江省", label: "衢州市" }, { prov: "浙江省", label: "舟山市" }, { prov: "浙江省", label: "台州市" }, { prov: "浙江省", label: "丽水市" }, { prov: "安徽省", label: "合肥市" }, { prov: "安徽省", label: "芜湖市" }, { prov: "安徽省", label: "蚌埠市" }, { prov: "安徽省", label: "淮南市" }, { prov: "安徽省", label: "马鞍山市" }, { prov: "安徽省", label: "淮北市" }, { prov: "安徽省", label: "铜陵市" }, { prov: "安徽省", label: "安庆市" }, { prov: "安徽省", label: "黄山市" }, { prov: "安徽省", label: "滁州市" }, { prov: "安徽省", label: "阜阳市" }, { prov: "安徽省", label: "宿州市" }, { prov: "安徽省", label: "六安市" }, { prov: "安徽省", label: "亳州市" }, { prov: "安徽省", label: "池州市" }, { prov: "安徽省", label: "宣城市" }, { prov: "福建省", label: "福州市" }, { prov: "福建省", label: "厦门市" }, { prov: "福建省", label: "莆田市" }, { prov: "福建省", label: "三明市" }, { prov: "福建省", label: "泉州市" }, { prov: "福建省", label: "漳州市" }, { prov: "福建省", label: "南平市" }, { prov: "福建省", label: "龙岩市" }, { prov: "福建省", label: "宁德市" }, { prov: "江西省", label: "南昌市" }, { prov: "江西省", label: "景德镇市" }, { prov: "江西省", label: "萍乡市" }, { prov: "江西省", label: "九江市" }, { prov: "江西省", label: "新余市" }, { prov: "江西省", label: "鹰潭市" }, { prov: "江西省", label: "赣州市" }, { prov: "江西省", label: "吉安市" }, { prov: "江西省", label: "宜春市" }, { prov: "江西省", label: "抚州市" }, { prov: "江西省", label: "上饶市" }, { prov: "山东省", label: "济南市" }, { prov: "山东省", label: "青岛市" }, { prov: "山东省", label: "淄博市" }, { prov: "山东省", label: "枣庄市" }, { prov: "山东省", label: "东营市" }, { prov: "山东省", label: "烟台市" }, { prov: "山东省", label: "潍坊市" }, { prov: "山东省", label: "济宁市" }, { prov: "山东省", label: "泰安市" }, { prov: "山东省", label: "威海市" }, { prov: "山东省", label: "日照市" }, { prov: "山东省", label: "莱芜市" }, { prov: "山东省", label: "临沂市" }, { prov: "山东省", label: "德州市" }, { prov: "山东省", label: "聊城市" }, { prov: "山东省", label: "滨州市" }, { prov: "山东省", label: "菏泽市" }, { prov: "河南省", label: "郑州市" }, { prov: "河南省", label: "开封市" }, { prov: "河南省", label: "洛阳市" }, { prov: "河南省", label: "平顶山市" }, { prov: "河南省", label: "安阳市" }, { prov: "河南省", label: "鹤壁市" }, { prov: "河南省", label: "新乡市" }, { prov: "河南省", label: "焦作市" }, { prov: "河南省", label: "濮阳市" }, { prov: "河南省", label: "许昌市" }, { prov: "河南省", label: "漯河市" }, { prov: "河南省", label: "三门峡市" }, { prov: "河南省", label: "南阳市" }, { prov: "河南省", label: "商丘市" }, { prov: "河南省", label: "信阳市" }, { prov: "河南省", label: "周口市" }, { prov: "河南省", label: "驻马店市" }, { prov: "河南省", label: "省直辖县级行政区划" }, { prov: "湖北省", label: "武汉市" }, { prov: "湖北省", label: "黄石市" }, { prov: "湖北省", label: "十堰市" }, { prov: "湖北省", label: "宜昌市" }, { prov: "湖北省", label: "襄阳市" }, { prov: "湖北省", label: "鄂州市" }, { prov: "湖北省", label: "荆门市" }, { prov: "湖北省", label: "孝感市" }, { prov: "湖北省", label: "荆州市" }, { prov: "湖北省", label: "黄冈市" }, { prov: "湖北省", label: "咸宁市" }, { prov: "湖北省", label: "随州市" }, { prov: "湖北省", label: "恩施土家族苗族自治州" }, { prov: "湖北省", label: "省直辖县级行政区划" }, { prov: "湖北省", label: "仙桃市" }, { prov: "湖北省", label: "潜江市" }, { prov: "湖北省", label: "天门市" }, { prov: "湖北省", label: "神农架林区" }, { prov: "湖南省", label: "长沙市" }, { prov: "湖南省", label: "株洲市" }, { prov: "湖南省", label: "湘潭市" }, { prov: "湖南省", label: "衡阳市" }, { prov: "湖南省", label: "邵阳市" }, { prov: "湖南省", label: "岳阳市" }, { prov: "湖南省", label: "常德市" }, { prov: "湖南省", label: "张家界市" }, { prov: "湖南省", label: "益阳市" }, { prov: "湖南省", label: "郴州市" }, { prov: "湖南省", label: "永州市" }, { prov: "湖南省", label: "怀化市" }, { prov: "湖南省", label: "娄底市" }, { prov: "湖南省", label: "湘西土家族苗族自治州" }, { prov: "广东省", label: "广州市" }, { prov: "广东省", label: "韶关市" }, { prov: "广东省", label: "深圳市" }, { prov: "广东省", label: "珠海市" }, { prov: "广东省", label: "汕头市" }, { prov: "广东省", label: "佛山市" }, { prov: "广东省", label: "江门市" }, { prov: "广东省", label: "湛江市" }, { prov: "广东省", label: "茂名市" }, { prov: "广东省", label: "肇庆市" }, { prov: "广东省", label: "惠州市" }, { prov: "广东省", label: "梅州市" }, { prov: "广东省", label: "汕尾市" }, { prov: "广东省", label: "河源市" }, { prov: "广东省", label: "阳江市" }, { prov: "广东省", label: "清远市" }, { prov: "广东省", label: "东莞市" }, { prov: "广东省", label: "中山市" }, { prov: "广东省", label: "潮州市" }, { prov: "广东省", label: "揭阳市" }, { prov: "广东省", label: "云浮市" }, { prov: "广西壮族自治区", label: "南宁市" }, { prov: "广西壮族自治区", label: "柳州市" }, { prov: "广西壮族自治区", label: "桂林市" }, { prov: "广西壮族自治区", label: "梧州市" }, { prov: "广西壮族自治区", label: "北海市" }, { prov: "广西壮族自治区", label: "防城港市" }, { prov: "广西壮族自治区", label: "钦州市" }, { prov: "广西壮族自治区", label: "贵港市" }, { prov: "广西壮族自治区", label: "玉林市" }, { prov: "广西壮族自治区", label: "百色市" }, { prov: "广西壮族自治区", label: "贺州市" }, { prov: "广西壮族自治区", label: "河池市" }, { prov: "广西壮族自治区", label: "来宾市" }, { prov: "广西壮族自治区", label: "崇左市" }, { prov: "海南省", label: "海口市" }, { prov: "海南省", label: "三亚市" }, { prov: "海南省", label: "三沙市" }, { prov: "海南省", label: "省直辖县级行政区划" }, { prov: "海南省", label: "五指山市" }, { prov: "海南省", label: "琼海市" }, { prov: "海南省", label: "儋州市" }, { prov: "海南省", label: "文昌市" }, { prov: "海南省", label: "万宁市" }, { prov: "海南省", label: "东方市" }, { prov: "海南省", label: "定安县" }, { prov: "海南省", label: "屯昌县" }, { prov: "海南省", label: "澄迈县" }, { prov: "海南省", label: "临高县" }, { prov: "海南省", label: "白沙黎族自治县" }, { prov: "海南省", label: "昌江黎族自治县" }, { prov: "海南省", label: "乐东黎族自治县" }, { prov: "海南省", label: "陵水黎族自治县" }, { prov: "海南省", label: "保亭黎族苗族自治县" }, { prov: "海南省", label: "琼中黎族苗族自治县" }, { prov: "重庆市", label: "重庆市" }, { prov: "四川省", label: "成都市" }, { prov: "四川省", label: "自贡市" }, { prov: "四川省", label: "攀枝花市" }, { prov: "四川省", label: "泸州市" }, { prov: "四川省", label: "德阳市" }, { prov: "四川省", label: "绵阳市" }, { prov: "四川省", label: "广元市" }, { prov: "四川省", label: "遂宁市" }, { prov: "四川省", label: "内江市" }, { prov: "四川省", label: "乐山市" }, { prov: "四川省", label: "南充市" }, { prov: "四川省", label: "眉山市" }, { prov: "四川省", label: "宜宾市" }, { prov: "四川省", label: "广安市" }, { prov: "四川省", label: "达州市" }, { prov: "四川省", label: "雅安市" }, { prov: "四川省", label: "巴中市" }, { prov: "四川省", label: "资阳市" }, { prov: "四川省", label: "阿坝藏族羌族自治州" }, { prov: "四川省", label: "甘孜藏族自治州" }, { prov: "四川省", label: "凉山彝族自治州" }, { prov: "贵州省", label: "贵阳市" }, { prov: "贵州省", label: "六盘水市" }, { prov: "贵州省", label: "遵义市" }, { prov: "贵州省", label: "安顺市" }, { prov: "贵州省", label: "毕节市" }, { prov: "贵州省", label: "铜仁市" }, { prov: "贵州省", label: "黔西南布依族苗族自治州" }, { prov: "贵州省", label: "黔东南苗族侗族自治州" }, { prov: "贵州省", label: "黔南布依族苗族自治州" }, { prov: "云南省", label: "昆明市" }, { prov: "云南省", label: "曲靖市" }, { prov: "云南省", label: "玉溪市" }, { prov: "云南省", label: "保山市" }, { prov: "云南省", label: "昭通市" }, { prov: "云南省", label: "丽江市" }, { prov: "云南省", label: "普洱市" }, { prov: "云南省", label: "临沧市" }, { prov: "云南省", label: "楚雄彝族自治州" }, { prov: "云南省", label: "红河哈尼族彝族自治州" }, { prov: "云南省", label: "文山壮族苗族自治州" }, { prov: "云南省", label: "西双版纳傣族自治州" }, { prov: "云南省", label: "大理白族自治州" }, { prov: "云南省", label: "德宏傣族景颇族自治州" }, { prov: "云南省", label: "怒江傈僳族自治州" }, { prov: "云南省", label: "迪庆藏族自治州" }, { prov: "西藏自治区", label: "拉萨市" }, { prov: "西藏自治区", label: "昌都地区" }, { prov: "西藏自治区", label: "山南地区" }, { prov: "西藏自治区", label: "日喀则地区" }, { prov: "西藏自治区", label: "那曲地区" }, { prov: "西藏自治区", label: "阿里地区" }, { prov: "西藏自治区", label: "林芝地区" }, { prov: "陕西省", label: "西安市" }, { prov: "陕西省", label: "铜川市" }, { prov: "陕西省", label: "宝鸡市" }, { prov: "陕西省", label: "咸阳市" }, { prov: "陕西省", label: "渭南市" }, { prov: "陕西省", label: "延安市" }, { prov: "陕西省", label: "汉中市" }, { prov: "陕西省", label: "榆林市" }, { prov: "陕西省", label: "安康市" }, { prov: "陕西省", label: "商洛市" }, { prov: "甘肃省", label: "兰州市" }, { prov: "甘肃省", label: "嘉峪关市" }, { prov: "甘肃省", label: "金昌市" }, { prov: "甘肃省", label: "白银市" }, { prov: "甘肃省", label: "天水市" }, { prov: "甘肃省", label: "武威市" }, { prov: "甘肃省", label: "张掖市" }, { prov: "甘肃省", label: "平凉市" }, { prov: "甘肃省", label: "酒泉市" }, { prov: "甘肃省", label: "庆阳市" }, { prov: "甘肃省", label: "定西市" }, { prov: "甘肃省", label: "陇南市" }, { prov: "甘肃省", label: "临夏回族自治州" }, { prov: "甘肃省", label: "甘南藏族自治州" }, { prov: "青海省", label: "西宁市" }, { prov: "青海省", label: "海东市" }, { prov: "青海省", label: "海北藏族自治州" }, { prov: "青海省", label: "黄南藏族自治州" }, { prov: "青海省", label: "海南藏族自治州" }, { prov: "青海省", label: "果洛藏族自治州" }, { prov: "青海省", label: "玉树藏族自治州" }, { prov: "青海省", label: "海西蒙古族藏族自治州" }, { prov: "宁夏回族自治区", label: "银川市" }, { prov: "宁夏回族自治区", label: "石嘴山市" }, { prov: "宁夏回族自治区", label: "吴忠市" }, { prov: "宁夏回族自治区", label: "固原市" }, { prov: "宁夏回族自治区", label: "中卫市" }, { prov: "新疆维吾尔自治区", label: "乌鲁木齐市" }, { prov: "新疆维吾尔自治区", label: "克拉玛依市" }, { prov: "新疆维吾尔自治区", label: "吐鲁番地区" }, { prov: "新疆维吾尔自治区", label: "哈密地区" }, { prov: "新疆维吾尔自治区", label: "昌吉回族自治州" }, { prov: "新疆维吾尔自治区", label: "博尔塔拉蒙古自治州" }, { prov: "新疆维吾尔自治区", label: "巴音郭楞蒙古自治州" }, { prov: "新疆维吾尔自治区", label: "阿克苏地区" }, { prov: "新疆维吾尔自治区", label: "克孜勒苏柯尔克孜自治州" }, { prov: "新疆维吾尔自治区", label: "喀什地区" }, { prov: "新疆维吾尔自治区", label: "和田地区" }, { prov: "新疆维吾尔自治区", label: "伊犁哈萨克自治州" }, { prov: "新疆维吾尔自治区", label: "塔城地区" }, { prov: "新疆维吾尔自治区", label: "阿勒泰地区" }, { prov: "新疆维吾尔自治区", label: "自治区直辖县级行政区划" }, { prov: "新疆维吾尔自治区", label: "石河子市" }, { prov: "新疆维吾尔自治区", label: "阿拉尔市" }, { prov: "新疆维吾尔自治区", label: "图木舒克市" }, { prov: "新疆维吾尔自治区", label: "五家渠市" }, { prov: "台湾省", label: "台北市" }, { prov: "台湾省", label: "高雄市" }, { prov: "台湾省", label: "基隆市" }, { prov: "台湾省", label: "台中市" }, { prov: "台湾省", label: "台南市" }, { prov: "台湾省", label: "新竹市" }, { prov: "台湾省", label: "嘉义市" }, { prov: "台湾省", label: "省直辖" }, { prov: "香港特别行政区", label: "香港岛" }, { prov: "香港特别行政区", label: "九龙" }, { prov: "香港特别行政区", label: "新界" }, { prov: "澳门特别行政区", label: "澳门半岛" }, { prov: "澳门特别行政区", label: "澳门离岛" }, { prov: "澳门特别行政区", label: "无堂区划分区域" }]; console.log(prov,9996) this.dqxz[0]=prov for (var val of allCity){ if (prov == val.prov){ // console.log(val); tempCity.push({label: val.label, value: val.label}) } } this.citys = tempCity; }, getCity: function (city) { // console.log(city); // console.log(this.citys[0].label,11) // this.dqxz.push(this.citys[0].label) this.dqxz[1]=city console.log(this.dqxz) // console.log(this.selectCity) }, tozhuce() { this.login = 2; }, tologin() { this.login = 1; }, enter(){ this.http.post("/api/users/info",{avatar:this.imageUrl,sex:this.sex,addres:this.dqxz[0]+' '+this.dqxz[1],signature:this.sign}).then((res)=>{ if(res.status == 200){ this.$router.push({ path:'/zixunlist' }) } }) // this.$router.push({ path:'/zixunlist' }) }, //登录按钮 sublogin(formName) { if (this.checkedpwd == false) { this.$refs[formName].validate((valid) => { if (valid) { this.http.post("/pc/mobile", this.userForm).then((res) => { if(res.status == 200){ sessionStorage.setItem("token",res.data.token) localStorage.removeItem('phone'); localStorage.removeItem('password'); localStorage.removeItem('checkedpwd'); this.$router.push({ path:'/zixunlist' }) } console.log(res); }); } else { console.log("error submit!!"); return false; } }); } else { this.$refs[formName].validate((valid) => { if (valid) { this.http.post("/pc/mobile", this.userForm).then((res) => { if(res.status == 200){ sessionStorage.setItem("token",res.data.token); localStorage.setItem("phone",this.userForm.phone) localStorage.setItem("password",this.userForm.password) localStorage.setItem("checkedpwd",true) this.$router.push({ path:'/zixunlist' }) } console.log(res); }); // this.$message.error("验证码输入有误,请重新输入"); } else { console.log("error submit!!"); return false; } }); } }, //注册按钮 submitForm(formName) { if (this.checked == false) { this.$refs[formName].validate((valid) => { if (valid) { console.log("error submit!!"); } else { console.log("error submit!!"); return false; } }); this.$message.error("请确认服务条款"); } else { this.$refs[formName].validate((valid) => { if (valid) { this.http.post("/api/register", this.ruleForm).then((res) => { if(res.status == 200){ sessionStorage.setItem("token",res.data.token); this.login = 3; } console.log(res); }); // this.$message.error("验证码输入有误,请重新输入"); } else { console.log("error submit!!"); return false; } }); } }, getCode() { this.$refs["ruleForm"].validateField("phone", (err) => { if (err) { console.log("未通过"); return; } else { // console.log('已通过') console.log(this.http); this.tocode(); //验证码倒数60秒 let data = {}; data.phone = this.ruleForm.phone; // data.type = 1 this.http.post("/wap/verification", data).then((res) => { console.log(res); // if(res.status == 200){ // this.codes =res.data.data.code // console.log(this.codes) // }else{ // this.$message.error('请确认服务条款'); // } }); } }); }, //获取验证码 tocode() { let time = 60; let timer = setInterval(() => { if (time == 0) { clearInterval(timer); this.message = "获取验证码"; this.disabled = false; this.codedisabled = true; } else { this.disabled = true; this.codedisabled = false; this.message = time + "秒后重试"; time--; } }, 1000); }, }, }; </script> <style> .toxuiang .avatar-uploader .el-upload { /* border: 1px dashed #d9d9d9; */ background: #E5E5E5; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; cursor: pointer; position: relative; overflow: hidden; } .toxuiang .avatar-uploader .el-upload:hover { border-color: #409EFF; } .toxuiang .imgs { color: #8c939d; width: 20px; height: 20px; line-height: 50px; text-align: center; } .toxuiang .avatar { width: 50px; height: 50px; display: block; } .loginbody .el-input__inner { padding-left: 10px !important; background-color: #eeeeee !important; border: none !important; } .zhucebody .el-input__inner { padding-left: 10px !important; background-color: #eeeeee !important; border: none !important; } .login .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { background-color: #43bc55; border-color: #43bc55; } .login .el-checkbox__input.is-checked + .el-checkbox__label { color: #333; } </style> <style lang="scss" scoped> .login { width: 100%; height: 100vh; background: url(../../static/img/loginbg.png) no-repeat; background-size: 100% 100%; .zhucebox { width: 700px; height: 450px; background-color: #fff; border-radius: 5px; margin: 0 auto; z-index: 100; position: relative; top: 50%; /*偏移*/ transform: translateY(-50%); .toxuiang{ width: 600px; // border: 1px solid #000; margin: 0 auto; height: 400px; padding-top: 15px; .topbox{ width: 500px; // border: 1px solid #ccc; height: 300px; margin-top: 25px; .shezhitx{ display: flex; height: 50px; line-height: 50px; margin-top: 20px; span{ width: 115px; color: #333333; font-size: 16px; } } } .bottbox{ width: 300px; height: 55px; float: right; margin-top: 30px; img{ width: 100px; height: 10px; margin-top: 22.5px; } .jinrugw{ width: 170px; height: 45px; background: #43BC55; color: #fff; font-size: 16px; border: none; outline: none; margin-top: 5px; float: right; } } } .toubu { width: 100%; height: 40px; } .zhucebody { display: flex; justify-content: space-between; div.zhuceleft { width: 400px; } div.zhuceright { width: 299px; } .el-input { width: 100%; // margin-top: 20px; } .zhuceleft { border-right: 1px solid #eeeeee; .zhucebut { width: 300px; margin: 0 auto; margin-left: 50px; height: 40px; background: #43bc55; color: #fff; border: none; outline: none; border-radius: 5px; margin-top: 15px; cursor: pointer; } .inpboix { width: 300px; margin: 0 auto; } .inpboix1 { width: 300px; margin: 0 auto; display: flex; justify-content: space-between; .el-input { float: left; } .code { width: 160px; height: 40px; // margin-top: 20px; margin-left: 20px; background-color: #43bc55; color: #fff; border: none; border-radius: 5px; outline: none; cursor: pointer; } } .checks { width: 200px; line-height: 50px; margin-left: 50px; span { color: #2fa440; } } } .zhuceright { .rightbox { border: 0px solid #000; width: 200px; margin: 0 auto; margin-top: 30px; div { line-height: 30px; } .nozh { color: #333333; font-size: 14px; } .nowzc { color: #3cae4d; font-size: 14px; cursor: pointer; } .imgbox { margin-top: 5px; } } } } } .logintitle { width: 100%; height: 80px; line-height: 80px; font-size: 20px; text-align: center; } .loginbox { width: 600px; height: 350px; background-color: #fff; border-radius: 5px; margin: 0 auto; z-index: 100; position: relative; top: 50%; /*偏移*/ transform: translateY(-50%); } .logintitle { width: 100%; height: 80px; line-height: 80px; font-size: 20px; text-align: center; } .loginbody { display: flex; justify-content: space-between; div { // width: 299px; } .el-input { width: 200px; margin: 0 auto; // margin-left: 10%; // margin-top: 20px; } .left { width: 299px; border-right: 1px solid #eeeeee; .loginbut { width: 200px; margin: 0 auto; margin-left: 50px; height: 40px; background: #43bc55; color: #fff; border: none; outline: none; border-radius: 5px; margin-top: 15px; cursor: pointer; } } .inpboix { width: 200px; margin: 0 auto; } .checks { width: 200px; line-height: 50px; margin-left: 50px; display: flex; justify-content: space-between; span { color: #43bc55; font-size: 14px; } } .right { .rightbox { border: 0px solid #000; width: 200px; margin: 0 auto; margin-top: 50px; div { line-height: 30px; } .nozh { color: #333333; font-size: 14px; } .nowzc { color: #3cae4d; font-size: 14px; cursor: pointer; } .imgbox { margin-top: 5px; } } } } .bottom { position: fixed; width: 50%; left: 25%; right: 25%; bottom: 5%; text-align: center; color: #fff; font-size: 14px; span { color: #43bc55; } } } </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。