You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
229 lines
7.5 KiB
229 lines
7.5 KiB
<template> |
|
<view class="page_css"> |
|
<view class="container"> |
|
<betone-header-top :title="title" /> |
|
<u-form labelPosition="left" :model="registerInfo" :rules="rules" ref="registerForm"> |
|
<u-form-item label="" prop="businessName" ref="item1" :border-bottom="false"> |
|
<betone-new-input label="企业名称" v-model="registerInfo.businessName" placeholder="请输入" :isRequire="true" /> |
|
</u-form-item> |
|
<!-- <u-form-item label="" prop="area" ref="item1" :border-bottom="false"> |
|
<betone-input-picker :label="'地区'" :isRequire="true" :pickerData="countryData" :mode="'multiSelector'" :keyName="'label'" @changeSelect="changeSelect" v-model="registerInfo.area"></betone-input-picker> |
|
</u-form-item> --> |
|
<u-form-item label="" prop="area" ref="item1" :border-bottom="false" @click="addMap()"> |
|
<betone-new-input label="实验室地址" v-model="registerInfo.businessName" placeholder="请选择" :isRequire="true" |
|
:disabled="true" /> |
|
</u-form-item> |
|
<u-form-item label="" prop="personName" ref="item1" :border-bottom="false"> |
|
<betone-new-input label="负责人姓名" v-model="registerInfo.personName" placeholder="请输入" :isRequire="true" /> |
|
</u-form-item> |
|
<u-form-item label="" prop="phoneNumber" ref="item1" :border-bottom="false"> |
|
<betone-new-input label="手机号" v-model="registerInfo.phoneNumber" placeholder="请输入" :isRequire="true" /> |
|
</u-form-item> |
|
<u-form-item label="" prop="password" ref="item1" :border-bottom="false"> |
|
<betone-new-input label="设置密码" v-model="registerInfo.password" placeholder="请输入8-16位数字与字母的组合" |
|
:isRequire="true" type="password" /> |
|
</u-form-item> |
|
<u-form-item label="" prop="confirmPassword" ref="item1" :border-bottom="false"> |
|
<betone-new-input label="确认密码" v-model="registerInfo.confirmPassword" placeholder="请再次输入密码" :isRequire="true" |
|
type="password" /> |
|
</u-form-item> |
|
<u-form-item label="" prop="verificationCode" ref="item1" :border-bottom="false"> |
|
<betone-new-input label="手机验证码" v-model="registerInfo.verificationCode" placeholder="请输入手机6位数验证码" |
|
:isSms="true" @ch="sendCode" :isRequire="true" /> |
|
</u-form-item> |
|
<u-form-item label="" prop="checked" ref="item1" :border-bottom="false"> |
|
<u-checkbox-group style="margin-bottom: 16rpx" shape="square"> |
|
<u-checkbox v-model="registerInfo.checked" key="index" labelSize="12" |
|
name="我已阅读并接受《注册服务协议》及《隐私权政策》">我已阅读并接受《注册服务协议》及《隐私权政策》</u-checkbox> |
|
</u-checkbox-group> |
|
</u-form-item> |
|
</u-form> |
|
<u-button class="item-bottom" type="primary" @click="formSubmit"> |
|
注册 |
|
</u-button> |
|
</view> |
|
<!-- <betone-dialog v-model="showSelect" :maskClose="true"> |
|
|
|
</betone-dialog> --> |
|
<view v-if="showMap"> |
|
<selectLoc :showMap="showMap" @close="closeLoc" @confirm="confirmLoc"></selectLoc> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
import addrList from "@/utils/addr.js"; |
|
import selectLoc from './selectLoc/selectLoc.vue' |
|
export default { |
|
components: { |
|
selectLoc |
|
}, |
|
data() { |
|
return { |
|
title: "注册", |
|
showSelect: true, |
|
registerInfo: { |
|
businessName: "", //企业名称 |
|
area: "", //地区 |
|
personName: "", //负责人姓名 |
|
phoneNumber: "", //手机号 |
|
password: "", //密码 |
|
confirmPassword: "", //确认密码 |
|
verificationCode: "", //验证码 |
|
checked: false, //同意隐私政策 |
|
|
|
}, |
|
rules: { |
|
businessName: { |
|
type: "string", |
|
required: true, |
|
message: "请输入企业名称", |
|
trigger: ["blur", "change"], |
|
}, |
|
area: { |
|
type: "string", |
|
required: true, |
|
message: "请选择地区", |
|
trigger: ["blur", "change"], |
|
}, |
|
personName: { |
|
type: "string", |
|
required: true, |
|
message: "请输入负责人姓名", |
|
trigger: ["blur", "change"], |
|
}, |
|
phoneNumber: { |
|
type: "string", |
|
required: true, |
|
message: "请输入手机号", |
|
trigger: ["blur", "change"], |
|
}, |
|
password: { |
|
type: "string", |
|
required: true, |
|
message: "请输入密码", |
|
trigger: ["blur", "change"], |
|
}, |
|
confirmPassword: { |
|
type: "string", |
|
required: true, |
|
message: "请确认密码", |
|
trigger: ["blur", "change"], |
|
}, |
|
verificationCode: { |
|
type: "string", |
|
required: true, |
|
message: "请输入验证码", |
|
trigger: ["blur", "change"], |
|
}, |
|
}, |
|
showAreaModal: false, |
|
|
|
countryData: [], |
|
childArr: [], // 二级分类数据源 |
|
|
|
title: '点击选择位置', |
|
showMap: true, |
|
lat: '', |
|
lng: '', |
|
prov: '', |
|
city: '', |
|
area: '', |
|
address: '' |
|
}; |
|
}, |
|
mounted() { |
|
this.getAllClassify() |
|
}, |
|
methods: { |
|
// 初始化数据 |
|
getAllClassify() { |
|
let dataLen = addrList.length; |
|
for (let i = 0; i < dataLen; i++) { |
|
// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源 |
|
this.childArr.push(addrList[i].children); |
|
} |
|
// 一级分类的数据源 |
|
this.countryData = [addrList, this.childArr[0]]; |
|
}, |
|
changeSelect(country) { |
|
|
|
var province = {} |
|
var area = {} |
|
// 不操作列行 |
|
if (!!country) { |
|
province = this.countryData[0][0] |
|
area = province.children[0] |
|
} |
|
// 操作第一列 |
|
if (country.length == 1) { |
|
province = this.countryData[0][country[0]] |
|
area = province.children[0] |
|
} |
|
if (country.length == 2) { |
|
province = this.countryData[0][country[0]] |
|
area = province.children[country[0]] |
|
|
|
} |
|
this.registerInfo.area = province.label + "," + area.label; |
|
console.log(this.registerInfo.area, province, area, country) |
|
}, |
|
formSubmit() { |
|
console.log("form表单的提交", this.registerInfo); |
|
uni.navigateTo({ |
|
url: "/pages/register/registerSuccess", |
|
}); |
|
this.$refs.registerForm |
|
.validate() |
|
.then((res) => { |
|
if (this.registerInfo.checked.length <= 0) { |
|
uni.$u.toast("请勾选《注册服务协议》及《隐私权政策》"); |
|
return false; |
|
} |
|
uni.$u.toast("校验通过"); |
|
}) |
|
.catch((errors) => { |
|
uni.$u.toast("校验失败"); |
|
}); |
|
}, |
|
// 发送验证码 |
|
sendCode() { |
|
setTimeout(() => { |
|
// this.isCanSms = true; |
|
uni.$u.toast("发送成功"); |
|
}, 1500); |
|
}, |
|
|
|
confirmLoc(res) { |
|
this.showMap = false; |
|
this.lat = res.lat; |
|
this.lng = res.lng; |
|
this.prov = res.province; |
|
this.city = res.city; |
|
this.area = res.area; |
|
this.address = res.district; |
|
console.log('选择的信息', res); |
|
}, |
|
closeLoc() { |
|
this.showMap = false; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.page_css { |
|
width: 100%; |
|
min-height: 100%; |
|
|
|
.container { |
|
padding: 32rpx 64rpx 32rpx 64rpx; |
|
} |
|
|
|
/deep/.u-form-item__body { |
|
padding-bottom: 0 !important; |
|
} |
|
|
|
/deep/.u-form-item__body__right__message { |
|
margin-left: 0 !important; |
|
} |
|
} |
|
</style> |