123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119 |
- <template>
- <view class="container register" :style="{paddingTop:CustomBar+'px'}">
- <cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
- <view class="register-main clearfix" v-if="tabCurrentIndex === 1">
- <view class="register-logo">
- <image class="logo" src="../../static/login-logo@3x.png" mode=""></image>
- <text class="logo-text">生美/医美采购服务平台</text>
- </view>
- <view class="register-row clearfix">
- <view class="register-from">
- <view class="label">联系人:</view>
- <input class="row-input" type="text" name="input" v-model="userName" placeholder="请输入联系姓名" maxlength="6"/>
- </view>
- </view>
- <view class="register-row clearfix">
- <view class="register-from">
- <view class="label">手机号:</view>
- <input class="row-input" type="number" name="input" v-model="bindMobile" placeholder="请输入手机号" maxlength="11"/>
- </view>
- <!-- <view class="register-tip"><text>提示:手机号可用作登陆账号</text></view> -->
- </view>
- <view class="register-row clearfix">
- <view class="register-from imgcode">
- <view class="label">图形验证码:</view>
- <input class="row-input" type="text" name="input" v-model="imageCode" placeholder="请输入图形验证码" maxlength="4"/>
- </view>
- <view class="register-from img-btn">
- <view class="vscodeimg">
- <image :src="imageCodeUrl" mode=""></image>
- </view>
- <view class="vscod-refresh" @click.stop="getVerificationCode">
- <text class="iconfont icon-shuaxin"></text>
- <text class="ref-text">刷新</text>
- </view>
- </view>
- </view>
- <view class="register-row clearfix">
- <view class="register-from code">
- <view class="label">短信验证码:</view>
- <input class="row-input" type="text" v-model="mobileCode" placeholder="请输入短信验证码" maxlength="6"/>
- </view>
- <view class="register-from btn" :class="[isMobileDisabled ? 'disabled' : '']" >
- <button class="row-input"
- type="button"
- @click.stop="getMobileCodeFn"
- :disabled="isMobileDisabled">
- {{ mobileCodeText }}
- </button>
- </view>
- </view>
- <view class="register-row clearfix">
- <view class="register-from">
- <view class="label">登录密码:</view>
- <input class="row-input" type="password" name="input" v-model="password" placeholder="密码必须为8-16位字母数字组合" maxlength="16"/>
- </view>
- </view>
- <view class="register-row clearfix">
- <view class="register-from">
- <view class="label">确认密码:</view>
- <input class="row-input" type="password" name="input" v-model="passwordCheck" placeholder="请确认密码" maxlength="16"/>
- </view>
- </view>
- <view class="register-main clearfix">
- <view class="register-agree">
- <view class="agree-text" @tap.stop="agreeCheck()">
- <button class="checkbox iconfont" :class="[isCheck?'icon-gouxuan':'icon-weigouxuan']"></button>
- 我已阅读并同意
- <text @click.stop="this.$api.navigateTo('/pages/service/organagree')">《机构协议》</text>
- <text @click.stop="this.$api.navigateTo('/pages/service/useragree')">《用户协议》</text>及
- <text @click.stop="this.$api.navigateTo('/pages/service/privacyagree')">《隐私权政策》</text>
- </view>
- </view>
- <view class="register-row ">
- <view class="register-btn sub" @click.stop="registerStepsfirst">注册</view>
- </view>
- </view>
- </view>
- <view class="register-main detailed clearfix" v-if="tabCurrentIndex === 2">
- <view class="register-row clearfix">
- <view class="register-title first"><text>补充以下详细信息即可升级为会员机构,</text></view>
- <view class="register-title"><text>享受更多更好的服务。</text></view>
- </view>
- <view class="register-row none clearfix">
- <view class="register-from">
- <view class="label">邮箱:</view>
- <input class="row-input" type="text" name="input" v-model="registerEmail" placeholder="请输入您的常用邮箱" maxlength="30"/>
- </view>
- <view class="register-tip"><text>提示:邮箱可用作登录账号,请使用公司邮箱或法人邮箱</text></view>
- </view>
- <view class="register-row clearfix">
- <view class="register-from">
- <view class="label">机构名称:</view>
- <input class="row-input" type="text" name="input" v-model="clubName" placeholder="请输入您的机构名称" maxlength="30"/>
- </view>
- </view>
- <view class="register-row clearfix">
- <view class="register-from">
- <view class="label">机构简称:</view>
- <input class="row-input" type="text" v-model="abbreviation" placeholder="请输入您的机构简称" maxlength="10"/>
- </view>
- </view>
- <view class="register-row clearfix">
- <view class="register-from" @click="showMulLinkageThreePicker">
- <view class="label">机构地址:</view>
- <text class="row-input" :class="addressData.address === '请选择机构所在地区' ? 'none' : ''">
- {{addressData.address}}
- </text>
- <text class="iconfont icon-xiayibu"></text>
- </view>
- </view>
- <view class="register-row text-textarea clearfix">
- <view class="textarea show" v-if="isShowInput">{{addressData.addressDetail ? addressData.addressDetail :'详细地址:如道路、门牌号、小区等'}}</view>
- <textarea v-else
- class="textarea"
- type="text"
- v-model="addressData.addressDetail"
- placeholder="详细地址:如道路、门牌号、小区等"
- placeholder-class="placeholder"
- maxlength="25"
- @input="onTextareaInput"
- :class="isShowInput ? '':''"
- />
- </view>
- <view class="register-row clearfix" >
- <view class="register-from">
- <view class="label">营业执照编号:</view>
- <input class="row-input" type="text" v-model="socialCreditCode" placeholder="请填写社会统一信用代码" maxlength="16"/>
- </view>
- </view>
- <view class="register-row clearfix">
- <view class="register-picture">
- <view class="label">营业执照:</view>
- <view class="upload-picture">
- <view class="upload-none" v-if="uploadBusinessImage === ''" @click="chooseBusinessImage"><text class="iconfont icon-jiahao"></text></view>
- <view class="upload-image" v-else>
- <image :src="uploadBusinessImage" mode="" @click="viewBusinessImage"></image>
- <view class="upload-del" @click="delBusinessImage">
- <text class='iconfont icon-shanchu1'></text>
- </view>
- </view>
- </view>
- </view>
- <view class="register-picture">
- <view class="label">门头照:</view>
- <view class="upload-picture">
- <view class="upload-none" v-if="uploadMentuzImage === ''" @click="chooseMentuzImage"><text class="iconfont icon-jiahao"></text></view>
- <view class="upload-image" v-else>
- <image :src="uploadMentuzImage" mode="" @click="viewMentuzImage"></image>
- <view class="upload-del" @click="delMentuzImage">
- <text class='iconfont icon-shanchu1'></text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="register-row clearfix">
- <view class="register-from picker">
- <view class="label">机构类型:</view>
- <view class="row-input picker" @click="bindPickerChange">{{ organizationTypeText }}</view>
- <text class="iconfont icon-xiayibu"></text>
- </view>
- </view>
- <view class="register-row clearfix" v-if="isOrganizationType == 1" >
- <view class="register-from radio">
- <radio-group @change="radioChange">
- <label class="row-input" v-for="(item, index) in beautyList" :key="item.value">
- <radio class="row-radio" :value="item.value" :checked="index === current" color="#E15616"/>
- <view class="row-text">{{item.name}}</view>
- </label>
- </radio-group>
- </view>
- </view>
- <view class="register-row clearfix" v-show="isDepartment" >
- <view class="register-from">
- <view class="label">科室:</view>
- <input class="row-input keshi" type="text" v-model="department" placeholder="请填写经营的科室,至少三个,用逗号隔开" maxlength="16"/>
- </view>
- </view>
- <view class="register-row clearfix" v-if="isOrganizationType == 1">
- <view class="register-picture zz">
- <view class="label zz">医疗执业许可证:</view>
- <view class="upload-picture">
- <view class="upload-none" v-if="uploadMedicalImage === ''" @click="chooseMedicalImage"><text class="iconfont icon-jiahao"></text></view>
- <view class="upload-image" v-else>
- <image :src="uploadMedicalImage" mode="" @click="viewMedicalImage"></image>
- <view class="upload-del" @click="delMedicalImage">
- <text class='iconfont icon-shanchu1'></text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="register-row clearfix" v-if="isOrganizationType == 1">
- <view class="register-from group">
- <view class="label">主营内容:</view>
- <checkbox-group class="content-class" @change="chooseMaleLike" >
- <label class="item" v-for="(item, index) in mentuzCampList" :key="index" :class="{on: item.checked}">
- <checkbox :value="item.value"></checkbox>
- <text class="item-text">{{item.name}}</text>
- </label>
- </checkbox-group>
- </view>
- <view class="register-from group btn">
- <view class="content-class btn">
- <view class="item" @click="showAustomItem">
- <text class="item-text">其他</text>
- </view>
- </view>
- </view>
- <view class="register-from group btn" v-show="isShowAustomItem">
- <view class="content-class btn">
- <input class="row-input other" type="text" v-model="customItemValue" placeholder="请输入自定义项目" @blur="onBlurInput" maxlength="5"/>
- <button type="default"
- class="confirm-btn other"
- :class="[isDisabled === true ? 'disabled' : 'none']"
- :disabled="isDisabled"
- @click.stop="addCustomItem"
- >确认添加</button>
- </view>
- </view>
- </view>
- <view class="register-row clearfix" v-if="isOrganizationType == 2">
- <view class="register-from group">
- <view class="label">主营内容:</view>
- <checkbox-group class="content-class" @change="chooseMaleLikes">
- <label class="item" v-for="(item, index) in medicaCampList" :key="index" :class="{on: item.checked}">
- <checkbox :value="item.value"></checkbox>
- <text class="item-text">{{item.name}}</text>
- </label>
- </checkbox-group>
- </view>
- <view class="register-from group btn">
- <view class="content-class btn">
- <view class="item" @click="showAustomItem">
- <text class="item-text">其他</text>
- </view>
- </view>
- </view>
- <view class="register-from group btn" v-show="isShowAustomItem">
- <view class="content-class btn">
- <input class="row-input other" type="text" v-model="customItemValue" placeholder="请输入自定义项目" @blur="onBlurInput" maxlength="5"/>
- <button type="default"
- class="confirm-btn"
- :class="[isDisabled === true ? 'disabled' : 'none']"
- :disabled="isDisabled"
- @click.stop="addCustomItem"
- >确认添加</button>
- </view>
- </view>
- </view>
- <view class="register-fiexd clearfix">
- <view class="register-row clearfix">
- <view class="register-btn none" @click="registerGoLogin">先跳过,以后再升级</view>
- </view>
- <view class="register-row ">
- <view class="register-btn sub" @click.stop="registerStepsSub">确认升级并提交审核</view>
- </view>
- </view>
- <mpvue-city-picker :themeColor="themeColor"
- ref="mpvueCityPicker"
- :pickerValueDefault="cityPickerValueDefault"
- @onCancel="onCancel"
- @onConfirm="onConfirm">
- </mpvue-city-picker>
- </view>
- </view>
- </template>
- <script>
- import { mapMutations } from 'vuex';
- import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
- import { beautyList,mentuzCampNullList,medicaCampNullList } from '@/common/json/data.json.js' //本地数据
- import authorize from '@/common/config/authorize.js'
- import { organizationVerifyRegisterFirst,organizationRegister ,organizationLogin } from "@/api/use.js"
- import { getImageCode, getMobileCode, uploadFileImage } from "@/api/utils.js"
- export default{
- components:{
- mpvueCityPicker
- },
- data() {
- return{
- nvabarData: { //顶部自定义导航
- showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
- showSearch: 0,
- title: '注册', // 导航栏 中间的标题
- },
- CustomBar:this.CustomBar,// 顶部导航栏高度
- tabCurrentIndex:1, //显示step
- isPreviewImage:false, //预览图片开关
- isMobileDisabled: false, //手机验证码按钮控制
- mobilCount: '', //倒计时
- mobileCodeText: '获取验证码',
- mobilTime: null,
- registerEmail:'', //注册邮箱
- password:'', //密码
- passwordCheck:'', //校验密码
- clubName:'', //机构名称
- abbreviation:'', //机构简称
- userName:'', //联系人
- bindMobile:'', //联系人手机号
- mobileCode:'', //手机验证码
- imageCode:'', //图形验证码
- imageCodeUrl:'', //图形验证码图片
- imageCodetoken:'', //图形验证校验
- socialCreditCode:'', //统一社会信用代码
- isAgreed:0, //是否勾选协议
- isDisabled:true,
- isShowInput:false,
- isCheck:false, //是否勾选协议
- uploadBusinessImage:'', //营业执照图片
- uploadMentuzImage:'', //门头照图片
- uploadMedicalImage:'', //资质照图片
- department:'', //科室
- isDepartment:false, //是否显示科室
- secondClubType:'', //机构类型二级分类
- mainpro:'', //主营内容
- isOrganizationType:0,
- organizationTypeText:'请选择机构类型',
- beautyList:beautyList,
- mentuzCampList:mentuzCampNullList,
- medicaCampList:medicaCampNullList,
- typtIndex:0,
- organizationType:3,
- current:0,
- isShowAustomItem:false, //是否显示其他添加
- customItemValue:'', //自定义项目
- addressData:{
- address:'请选择机构所在地区',
- townID:'', //区ID
- cityID:'', //区ID
- provinceID:'', //区ID
- addressDetail: '', //地址
- },
- userID:'', //机构userID
- clubID:'', //机构ID
- getOption:'' //页面传递参数
- }
- },
- onLoad(option) {
- this.getOption = JSON.stringify(option)
- },
- methods:{
- ...mapMutations(['login']),
- hanldNavigateBack(){
- this.$util.modal('','注册尚未完成,确定放弃注册吗?','确定','取消',true,() =>{
- uni.navigateBack({
- delta: 1
- });
- })
- },
- registerStepsfirst(){
- let params ={
- userName:this.userName,
- bindMobile:this.bindMobile,
- activationCode:this.mobileCode,
- password:this.password,
- passWordConfirm:this.passwordCheck,
- isAgreed:this.isAgreed, //是否勾选协议
- }
- organizationVerifyRegisterFirst(params).then(response =>{
- this.$util.msg('注册成功',2000);
- this.userID = response.data.userID
- this.clubID = response.data.clubID
- setTimeout(()=>{
- this.tabCurrentIndex = 2
- this.nvabarData.title = '升级会所机构'
- },2000)
- }).catch(error =>{
- this.$util.msg(error.msg,2000);
- })
- },
- registerGoLogin(){
- organizationLogin({mobileOrEmail:this.bindMobile,password:this.password,source:'www'}).then(response =>{
- this.storeUpdataeStatus(response.data)
- this.$api.navigateTo('/pages/login/bindwechat')
- }).catch(error =>{
- this.$util.msg(error.msg,2000);
- })
- },
- storeUpdataeStatus(data){
- uni.setStorageSync('token',data.token)
- this.$store.commit('updateStatus',data)
- this.login(data);
- },
- registerStepsSub(){
- if( this.registerEmail == ''){
- this.$util.msg('请输入邮箱地址',2000);
- return
- }
- if( !this.$reg.isEmail(this.registerEmail)){
- this.$util.msg('请输入正确的邮箱地址',2000);
- return
- }
- if( this.clubName == ''){
- this.$util.msg('请输入机构名称',2000);
- return
- }
- if( this.addressData.townID == ''){
- this.$util.msg('请选择机构地址',2000);
- return
- }
- if( this.addressData.addressDetail == ''){
- this.$util.msg('请填写机构详细地址',2000);
- return
- }
- if( this.socialCreditCode == ''){
- this.$util.msg('请填写社会统一社会信用代码',2000);
- return
- }
- if( this.uploadBusinessImage == ''){
- this.$util.msg('请上传您的营业执照',2000);
- return
- }
- if(this.isOrganizationType!=0){
- if(this.mainpro == ''){
- this.$util.msg('请选择住机构主营内容',2000);
- return
- }
- }
- let params ={
- userID:this.userID,
- clubID:this.clubID,
- contractEmail1:this.registerEmail,
- name:this.clubName,
- sname:this.abbreviation,
- provinceID:this.addressData.provinceID,
- cityID:this.addressData.cityID,
- townID:this.addressData.townID,
- address:this.addressData.addressDetail,
- socialCreditCode:this.socialCreditCode,
- businessLicenseImage:this.uploadBusinessImage,
- headpic:this.uploadMentuzImage,
- firstClubType:this.isOrganizationType, //机构类型分类 医美:0和生美:1
- secondClubType:this.secondClubType, //机构类型二级分类 诊所:1,门诊:2,医院:3
- department:this.department, //科室
- medicalPracticeLicenseImg:this.uploadMedicalImage,//资质图片
- mainpro:this.mainpro
- }
- organizationRegister(params).then(res =>{
- this.$util.msg('您的升级申请已提交审核',2000);
- setTimeout(()=>{
- this.registerGoLogin()
- },2000)
- }).catch(error =>{
- this.$util.msg(error.msg,2000);
- })
- },
- getMobileCodeFn(){
- if( this.bindMobile == ''){
- this.$util.msg('请输入手机号',2000);
- return
- }
- if(!this.$reg.isMobile(this.bindMobile)){
- this.$util.msg('请输入正确的手机号',2000);
- return
- }
- if( this.imageCode == ''){
- this.$util.msg('请输入图形验证码',2000);
- return
- }
- let params = {
- mobile:this.bindMobile,
- activateCodeType:2,
- platformType:2,
- imgCode:this.imageCode,
- token:this.imageCodetoken,
- }
- this.isMobileDisabled = true;
- getMobileCode(params).then(response =>{
- this.$util.msg('验证短信已发送',2000);
- const TIME_COUNT = 60;
- if (!this.mobilTime) {
- this.mobilCount = TIME_COUNT;
- this.isMobileDisabled = true;
- this.mobilTime = setInterval(() => {
- if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
- this.mobilCount--
- this.mobileCodeText = this.mobilCount +'s重新发送'
- } else {
- this.isMobileDisabled = false;
- clearInterval(this.mobilTime)
- this.mobilTime = null
- this.mobileCodeText = '获取验证码'
- }
- },1000)
- }
- }).catch( error =>{
- this.$util.msg(error.msg,2000);
- this.isMobileDisabled = false;
- })
- },
- getVerificationCode(){//获取图形验证
- getImageCode().then(res => {
- this.imageCodeUrl = res.data.baseImage
- this.imageCodetoken = res.data.token
- })
- },
- showMulLinkageThreePicker() {//三级地址联动
- this.isShowInput = true
- this.$refs.mpvueCityPicker.show()
- },
- onConfirm(e) {//获取选择的地址信息
- this.addressData.address = e.name;
- this.addressData.townID = e.townCode;
- this.addressData.cityID = e.cityCode;
- this.addressData.provinceID = e.provinceCode;
- },
- onTextareaInput(e){//地址详细信息
- this.addressData.addressDetail = e.detail.value;
- },
- chooseBusinessImage() {//营业执照图片上传
- uploadFileImage().then(res =>{
- this.uploadBusinessImage = JSON.parse(res.data).data
- })
- },
- chooseMentuzImage() {//门头照图片上传
- uploadFileImage().then(res =>{
- this.uploadMentuzImage = JSON.parse(res.data).data
- })
- },
- chooseMedicalImage() {//资质照图片上传
- uploadFileImage().then(res =>{
- this.uploadMedicalImage = JSON.parse(res.data).data
- })
- },
- viewBusinessImage(e) {//预览营业执照图片
- this.myPreviewImageFn(this.uploadBusinessImage)
- },
- viewMentuzImage(e) {//预览门头照图片
- this.myPreviewImageFn(this.uploadMentuzImage)
- },
- viewMedicalImage(e) {//预览资质照图片
- this.myPreviewImageFn(this.uploadMedicalImage)
- },
- myPreviewImageFn(url){//预览图片公共方法
- this.isPreviewImage = true
- let mentuzArray = []
- mentuzArray.push(url)
- uni.previewImage({
- urls: mentuzArray,
- current: 0
- });
- },
- delBusinessImage(){//删除营业执照图片
- this.$util.modal('','确定删除营业执照图片吗?','确定','取消',true,() =>{
- this.uploadBusinessImage = ''
- })
- },
- delMentuzImage(){//删除门头照图片
- this.$util.modal('','确定删除门头照图片吗?','确定','取消',true,() =>{
- this.uploadMentuzImage = ''
- })
- },
- delMedicalImage(){//删除资质图片
- this.$util.modal('','确定删除资质图片吗?','确定','取消',true,() =>{
- this.uploadMedicalImage = ''
- })
- },
- bindPickerChange() {//机构类型选择
- let self = this
- uni.showActionSheet({
- title:'标题',
- itemList: ['医美', '生美'],
- success: (e) => {
- self.isOrganizationType = e.tapIndex+1
- switch(e.tapIndex){
- case 0:
- this.organizationTypeText = '医美'
- break;
- case 1:
- this.organizationTypeText = '生美'
- break;
- }
- }
- })
-
- },
- bindPickerChange2(e) {
- this.typtIndex = e.target.value
- this.isOrganizationType = e.target.value
- },
- radioChange(e) {
- this.secondClubType = e.target.value;
- if( this.secondClubType == '2' || this.secondClubType == '3'){
- this.isDepartment = true
- }else{
- this.isDepartment = false
- }
- for (let i = 0; i < this.beautyList.length; i++) {
- if (this.beautyList[i].value === this.secondClubType) {
- this.current = i;
- break;
- }
- }
- },
- chooseMaleLike(e){
- this.mainpro = this.checkLikes(e,this.mentuzCampList)
- },
- chooseMaleLikes(e){
- this.mainpro = this.checkLikes(e,this.medicaCampList)
- },
- checkLikes(e,list){
- let values = e.detail.value
- let arr = []
- list.forEach(item => {
- if(values.indexOf(item.value) >= 0){
- this.$set(item,'checked',true)
- arr.push(item.name)
- }else{
- this.$set(item,'checked',false)
- }
- })
- return arr.join('/')
- },
- agreeCheck() {
- this.isCheck = !this.isCheck
- if(this.isCheck){
- this.isAgreed = 1
- }else{
- this.isAgreed = 0
- }
- },
- onBlurInput(e){//
- if(e.detail.value ===''){
- this.isDisabled = true
- }else{
- this.isDisabled = false
- }
- },
- showAustomItem() {
- this.isShowAustomItem = !this.isShowAustomItem
- },
- addCustomItem(){
- if(this.isOrganizationType == 1){
- let item = {value:`${this.mentuzCampList.length+1}`,name:this.customItemValue}
- this.mentuzCampList.push(item)
- }else{
- let item = {value:`${this.medicaCampList.length+1}`,name:this.customItemValue}
- this.medicaCampList.push(item)
- }
- }
- },
- onShow() {
- this.getVerificationCode()
- if(this.isPreviewImage){
- this.isPreviewImage = false
- return
- }
- }
- }
- </script>
- <style lang="scss">
- .register{
- width: 100%;
- height: auto;
- .register-main{
- width: 100%;
- height: auto;
- .register-agree{
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 60rpx 0 40rpx 0;
- .agree-text{
- .checkbox{
- float: left;
- margin: 4rpx 6rpx 0 0;
- color: #999999;
- font-size: $font-size-32;
- &.icon-gouxuan{
- color: $color-system;
- }
- }
- font-size: 20rpx;
- line-height: 44rpx;
- color: #999999;
- text{
- color:#0091FF;
- }
- }
- }
- .register-logo{
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 198rpx;
- padding:60rpx 0 40rpx 0;
- .logo{
- width: 138rpx;
- height: 118rpx;
- display: block;
- }
- .logo-text{
- font-size: 30rpx;
- line-height: 44rpx;
- color: $color-system;
- font-weight: 600;
- margin-top: 20rpx;
- }
- }
- &.detailed{
- padding-bottom: 330rpx;
- }
- .register-row{
- width: 702rpx;
- height: auto;
- padding: 0 24rpx;
- margin-bottom: 20rpx;
- &.none{
- margin-bottom: 0;
- }
- .register-text{
- line-height: 44rpx;
- margin-top: 100rpx;
- font-size: $font-size-24;
- color: #999999;
- text-align: justify;
- .txt{
- margin-right: 15rpx;
- }
- }
- .register-title{
- line-height: 44rpx;
- font-size: $font-size-24;
- color: $text-color;
- text-align: left;
- &.first{
- margin-top: 20rpx;
- }
- }
- .register-tip{
- line-height: 64rpx;
- font-size: $font-size-24;
- color: #CECECE;
- text-align: left;
- }
- .register-from{
- width: 654rpx;
- height: 40rpx;
- padding: 24rpx;
- background: $sub-bg-color;
- border-radius: 14rpx;
- position: relative;
- .label{
- text-align: left;
- font-size: $font-size-28;
- color: $text-color;
- line-height: 40rpx;
- float: left;
- }
- .row-input{
- width: 440rpx;
- padding-left:10rpx;
- font-size: $font-size-28;
- color: $text-color;
- line-height: 40rpx;
- float: left;
- height: 40rpx;
- &.none{
- color: #999999;
- }
- &.picker{
- text-align: left;
- color: #999999;
- }
- &.keshi{
- width: 550rpx;
- }
- }
- &.img-btn{
- width: 220rpx;
- height: 88rpx;
- padding: 0;
- float: left;
- background: #FFFFFF;
- display: block;
- .vscodeimg{
- width: 150rpx;
- height: 88rpx;
- float: left;
- display: flex;
- flex-direction: column;
- align-items: center;
- border-radius: 14rpx;
- image{
- width: 150rpx;
- height: 88rpx;
- border-radius: 14rpx;
- }
- }
- .vscod-refresh{
- width: 70rpx;
- float: right;
- text-align: right;
- display: flex;
- flex-direction: column;
- align-items: center;
- line-height: 44rpx;
- .icon-shuaxin{
- font-size: 48rpx;
- color: #333333;
- }
- .ref-text{
- font-size: 24rpx;
- color: #333333;
- }
- }
- }
- &.imgcode{
- width: 410rpx;
- float: left;
- margin-right: 20rpx;
- .row-input{
- width: 230rpx;
- }
- }
- &.code{
- width: 410rpx;
- float: left;
- margin-right: 20rpx;
- .row-input{
- width: 230rpx;
- }
- }
- &.btn{
- width: 224rpx;
- height: 88rpx;
- float: left;
- background: $btn-confirm;
- padding: 0;
- .row-input{
- width: 224rpx;
- height: 88rpx;
- line-height: 88rpx;
- padding: 0;
- color: #FFFFFF;
- background: $btn-confirm;
- text-align: center;
- border-radius: 14rpx;
- &.other{
- width: 224rpx;
- background: #F7F7F7;
- margin-right: 20rpx;
- }
- &.none{
- background: #F7F7F7;
- }
- }
- &.disabled{
- background: #F7F7F7;
- .row-input{
- background: #F7F7F7;
- color: #999999;
- }
- }
- }
- &.picker{
- padding: 0 24rpx;
- width: 654rpx;
- height: 88rpx;
- line-height: 88rpx;
- .label{
- line-height: 88rpx;
- }
- .row-input{
- width: 470rpx;
- height: 88rpx;
- line-height: 88rpx;
- padding-left: 30rpx;
- }
- }
- &.radio{
- padding: 0 24rpx;
- width: 654rpx;
- height: 288rpx;
- .row-input{
- width: 100%;
- height: 88rpx;
- line-height: 88rpx;
- padding-left: 0;
- }
- .row-radio{
- float: left;
- transform: scale(0.8);
- }
- .row-text{
- width: 100rpx;
- text-align: center;
- float: left;
- }
- }
- &.group{
- padding: 0 24rpx;
- width: 654rpx;
- height: auto;
- background: #FFFFFF;
- margin-top: 30rpx;
- .label{
- line-height: 76rpx;
- }
- .row-input{
- width: 100%;
- height: 88rpx;
- line-height: 88rpx;
- padding-left: 0;
- }
- .row-radio{
- float: left;
- }
- .row-text{
- width: 100rpx;
- text-align: center;
- float: left;
- }
- }
- &.btn{
- margin-top: 0;
- }
- .content-class {
- margin: 20rpx auto;
- display: flex;
- flex-flow: row wrap;
- justify-content: space-between;
- align-items: center;
- &.btn{
- margin: 0 auto;
- margin-left: 116rpx;
- }
- .row-input{
- display: flex;
- width: 220rpx;
- height: 40rpx;
- padding: 24rpx;
- text-align: left;
- border-radius: 10rpx;
- font-size: $font-size-28;
- color: $text-color;
- }
- .confirm-btn{
- width: 200rpx;
- height: 88rpx;
- border-radius: 10rpx;
- line-height: 88rpx;
- text-align: center;
- &.other{
- width: 213rpx;
- }
- &.none{
- color: #FFFFFF;
- background: $btn-confirm;
- }
- &.disabled{
- color: #999999;
- }
- }
- .item {
- width: 155rpx;
- height: 60rpx;
- font-size:$font-size-28;
- line-height: 60rpx;
- border-radius:10rpx;
- margin: 10rpx;
- text-align: center;
- box-sizing: border-box;
- border: 1rpx solid #EFEFEF;
- checkbox {
- display: none;
- }
- }
- .on {
- border-color: $color-system;
- color:$color-system;
- }
- }
- }
- .icon-xiayibu{
- width: 88rpx;
- height: 88rpx;
- position: absolute;
- right: 0;
- top: 0;
- line-height: 88rpx;
- text-align: center;
- }
- &.text-textarea{
- background: #FFFFFF;
- .textarea{
- width: 654rpx;
- height: 180rpx;
- background: #F7F7F7;
- padding: 24rpx;
- font-size: $font-size-28;
- color: $text-color;
- z-index: 1;
- border-radius: 14rpx;
- }
- .textarea.hide{
- opacity: 0;
- }
- .textarea.show{
- color: #999999;
- }
- }
- }
- .register-picture{
- height: 102rpx;
- margin: 30rpx 0;
- width: 42%;
- float: left;
- &.zz{
- width: 100%;
- }
- .label{
- float: left;
- font-size: $font-size-28;
- color: $text-color;
- line-height: 102rpx;
- width: 150rpx;
- text-align: right;
- &.zz{
- width: 230rpx;
- }
- }
- .upload-picture{
- float: left;
- height: 100rpx;
- .upload-none{
- width: 100rpx;
- height: 100rpx;
- text-align: center;
- line-height: 100rpx;
- color: #999999;
- border: 1px solid #999999;
- border-radius: 10rpx;
- margin: 0 20rpx;
- .iconfont{
- font-size: $font-size-28;
- }
- }
- .upload-image{
- width: 100rpx;
- height: 100rpx;
- border-radius: 10rpx;
- margin: 0 20rpx;
- position: relative;
- image{
- width: 100rpx;
- height: 100rpx;
- border-radius: 10rpx;
- }
- .upload-del{
- width: 40rpx;
- height: 40rpx;
- position: absolute;
- top: -20rpx;
- right: -20rpx;
- line-height: 40rpx;
- text-align: center;
- .iconfont{
- font-size: $font-size-32;
- color: #999999;
- }
- }
- }
- }
- }
- .register-input{
- width: 654rpx;
- height: 40rpx;
- padding: 24rpx;
- margin: 0 auto;
- margin-bottom: 60rpx;
- background: #F7F7F7;
- border-radius: 14rpx;
- .input{
- width: 100%;
- height: 100%;
- background: #F7F7F7;
- font-size: $font-size-28;
- line-height: 40rpx;
- color: #333333;
- border-radius: 14rpx;
- }
- }
- .register-fiexd{
- width: 100%;
- height: auto;
- position: fixed;
- bottom: 0;
- left: 0;
- z-index: 999;
- background: #FFFFFF;
- }
- .register-btn{
- width: 702rpx;
- height: 88rpx;
- border-radius: 14rpx;
- font-size: $font-size-28;
- line-height: 88rpx;
- color: #FFFFFF;
- margin: 0 auto;
- text-align: center;
- background: $btn-confirm;
- margin-top: 96rpx;
- &.none{
- border: 1px solid $color-system;
- background: #FFFFFF;
- color:$color-system;
- margin-top: 0;
- }
- &.sub{
- margin-top: 0;
- }
- }
- }
- }
- </style>
|