register.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119
  1. <template>
  2. <view class="container register" :style="{paddingTop:CustomBar+'px'}">
  3. <cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
  4. <view class="register-main clearfix" v-if="tabCurrentIndex === 1">
  5. <view class="register-logo">
  6. <image class="logo" src="../../static/login-logo@3x.png" mode=""></image>
  7. <text class="logo-text">生美/医美采购服务平台</text>
  8. </view>
  9. <view class="register-row clearfix">
  10. <view class="register-from">
  11. <view class="label">联系人:</view>
  12. <input class="row-input" type="text" name="input" v-model="userName" placeholder="请输入联系姓名" maxlength="6"/>
  13. </view>
  14. </view>
  15. <view class="register-row clearfix">
  16. <view class="register-from">
  17. <view class="label">手机号:</view>
  18. <input class="row-input" type="number" name="input" v-model="bindMobile" placeholder="请输入手机号" maxlength="11"/>
  19. </view>
  20. <!-- <view class="register-tip"><text>提示:手机号可用作登陆账号</text></view> -->
  21. </view>
  22. <view class="register-row clearfix">
  23. <view class="register-from imgcode">
  24. <view class="label">图形验证码:</view>
  25. <input class="row-input" type="text" name="input" v-model="imageCode" placeholder="请输入图形验证码" maxlength="4"/>
  26. </view>
  27. <view class="register-from img-btn">
  28. <view class="vscodeimg">
  29. <image :src="imageCodeUrl" mode=""></image>
  30. </view>
  31. <view class="vscod-refresh" @click.stop="getVerificationCode">
  32. <text class="iconfont icon-shuaxin"></text>
  33. <text class="ref-text">刷新</text>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="register-row clearfix">
  38. <view class="register-from code">
  39. <view class="label">短信验证码:</view>
  40. <input class="row-input" type="text" v-model="mobileCode" placeholder="请输入短信验证码" maxlength="6"/>
  41. </view>
  42. <view class="register-from btn" :class="[isMobileDisabled ? 'disabled' : '']" >
  43. <button class="row-input"
  44. type="button"
  45. @click.stop="getMobileCodeFn"
  46. :disabled="isMobileDisabled">
  47. {{ mobileCodeText }}
  48. </button>
  49. </view>
  50. </view>
  51. <view class="register-row clearfix">
  52. <view class="register-from">
  53. <view class="label">登录密码:</view>
  54. <input class="row-input" type="password" name="input" v-model="password" placeholder="密码必须为8-16位字母数字组合" maxlength="16"/>
  55. </view>
  56. </view>
  57. <view class="register-row clearfix">
  58. <view class="register-from">
  59. <view class="label">确认密码:</view>
  60. <input class="row-input" type="password" name="input" v-model="passwordCheck" placeholder="请确认密码" maxlength="16"/>
  61. </view>
  62. </view>
  63. <view class="register-main clearfix">
  64. <view class="register-agree">
  65. <view class="agree-text" @tap.stop="agreeCheck()">
  66. <button class="checkbox iconfont" :class="[isCheck?'icon-gouxuan':'icon-weigouxuan']"></button>
  67. 我已阅读并同意
  68. <text @click.stop="this.$api.navigateTo('/pages/service/organagree')">《机构协议》</text>
  69. <text @click.stop="this.$api.navigateTo('/pages/service/useragree')">《用户协议》</text>及
  70. <text @click.stop="this.$api.navigateTo('/pages/service/privacyagree')">《隐私权政策》</text>
  71. </view>
  72. </view>
  73. <view class="register-row ">
  74. <view class="register-btn sub" @click.stop="registerStepsfirst">注册</view>
  75. </view>
  76. </view>
  77. </view>
  78. <view class="register-main detailed clearfix" v-if="tabCurrentIndex === 2">
  79. <view class="register-row clearfix">
  80. <view class="register-title first"><text>补充以下详细信息即可升级为会员机构,</text></view>
  81. <view class="register-title"><text>享受更多更好的服务。</text></view>
  82. </view>
  83. <view class="register-row none clearfix">
  84. <view class="register-from">
  85. <view class="label">邮箱:</view>
  86. <input class="row-input" type="text" name="input" v-model="registerEmail" placeholder="请输入您的常用邮箱" maxlength="30"/>
  87. </view>
  88. <view class="register-tip"><text>提示:邮箱可用作登录账号,请使用公司邮箱或法人邮箱</text></view>
  89. </view>
  90. <view class="register-row clearfix">
  91. <view class="register-from">
  92. <view class="label">机构名称:</view>
  93. <input class="row-input" type="text" name="input" v-model="clubName" placeholder="请输入您的机构名称" maxlength="30"/>
  94. </view>
  95. </view>
  96. <view class="register-row clearfix">
  97. <view class="register-from">
  98. <view class="label">机构简称:</view>
  99. <input class="row-input" type="text" v-model="abbreviation" placeholder="请输入您的机构简称" maxlength="10"/>
  100. </view>
  101. </view>
  102. <view class="register-row clearfix">
  103. <view class="register-from" @click="showMulLinkageThreePicker">
  104. <view class="label">机构地址:</view>
  105. <text class="row-input" :class="addressData.address === '请选择机构所在地区' ? 'none' : ''">
  106. {{addressData.address}}
  107. </text>
  108. <text class="iconfont icon-xiayibu"></text>
  109. </view>
  110. </view>
  111. <view class="register-row text-textarea clearfix">
  112. <view class="textarea show" v-if="isShowInput">{{addressData.addressDetail ? addressData.addressDetail :'详细地址:如道路、门牌号、小区等'}}</view>
  113. <textarea v-else
  114. class="textarea"
  115. type="text"
  116. v-model="addressData.addressDetail"
  117. placeholder="详细地址:如道路、门牌号、小区等"
  118. placeholder-class="placeholder"
  119. maxlength="25"
  120. @input="onTextareaInput"
  121. :class="isShowInput ? '':''"
  122. />
  123. </view>
  124. <view class="register-row clearfix" >
  125. <view class="register-from">
  126. <view class="label">营业执照编号:</view>
  127. <input class="row-input" type="text" v-model="socialCreditCode" placeholder="请填写社会统一信用代码" maxlength="16"/>
  128. </view>
  129. </view>
  130. <view class="register-row clearfix">
  131. <view class="register-picture">
  132. <view class="label">营业执照:</view>
  133. <view class="upload-picture">
  134. <view class="upload-none" v-if="uploadBusinessImage === ''" @click="chooseBusinessImage"><text class="iconfont icon-jiahao"></text></view>
  135. <view class="upload-image" v-else>
  136. <image :src="uploadBusinessImage" mode="" @click="viewBusinessImage"></image>
  137. <view class="upload-del" @click="delBusinessImage">
  138. <text class='iconfont icon-shanchu1'></text>
  139. </view>
  140. </view>
  141. </view>
  142. </view>
  143. <view class="register-picture">
  144. <view class="label">门头照:</view>
  145. <view class="upload-picture">
  146. <view class="upload-none" v-if="uploadMentuzImage === ''" @click="chooseMentuzImage"><text class="iconfont icon-jiahao"></text></view>
  147. <view class="upload-image" v-else>
  148. <image :src="uploadMentuzImage" mode="" @click="viewMentuzImage"></image>
  149. <view class="upload-del" @click="delMentuzImage">
  150. <text class='iconfont icon-shanchu1'></text>
  151. </view>
  152. </view>
  153. </view>
  154. </view>
  155. </view>
  156. <view class="register-row clearfix">
  157. <view class="register-from picker">
  158. <view class="label">机构类型:</view>
  159. <view class="row-input picker" @click="bindPickerChange">{{ organizationTypeText }}</view>
  160. <text class="iconfont icon-xiayibu"></text>
  161. </view>
  162. </view>
  163. <view class="register-row clearfix" v-if="isOrganizationType == 1" >
  164. <view class="register-from radio">
  165. <radio-group @change="radioChange">
  166. <label class="row-input" v-for="(item, index) in beautyList" :key="item.value">
  167. <radio class="row-radio" :value="item.value" :checked="index === current" color="#E15616"/>
  168. <view class="row-text">{{item.name}}</view>
  169. </label>
  170. </radio-group>
  171. </view>
  172. </view>
  173. <view class="register-row clearfix" v-show="isDepartment" >
  174. <view class="register-from">
  175. <view class="label">科室:</view>
  176. <input class="row-input keshi" type="text" v-model="department" placeholder="请填写经营的科室,至少三个,用逗号隔开" maxlength="16"/>
  177. </view>
  178. </view>
  179. <view class="register-row clearfix" v-if="isOrganizationType == 1">
  180. <view class="register-picture zz">
  181. <view class="label zz">医疗执业许可证:</view>
  182. <view class="upload-picture">
  183. <view class="upload-none" v-if="uploadMedicalImage === ''" @click="chooseMedicalImage"><text class="iconfont icon-jiahao"></text></view>
  184. <view class="upload-image" v-else>
  185. <image :src="uploadMedicalImage" mode="" @click="viewMedicalImage"></image>
  186. <view class="upload-del" @click="delMedicalImage">
  187. <text class='iconfont icon-shanchu1'></text>
  188. </view>
  189. </view>
  190. </view>
  191. </view>
  192. </view>
  193. <view class="register-row clearfix" v-if="isOrganizationType == 1">
  194. <view class="register-from group">
  195. <view class="label">主营内容:</view>
  196. <checkbox-group class="content-class" @change="chooseMaleLike" >
  197. <label class="item" v-for="(item, index) in mentuzCampList" :key="index" :class="{on: item.checked}">
  198. <checkbox :value="item.value"></checkbox>
  199. <text class="item-text">{{item.name}}</text>
  200. </label>
  201. </checkbox-group>
  202. </view>
  203. <view class="register-from group btn">
  204. <view class="content-class btn">
  205. <view class="item" @click="showAustomItem">
  206. <text class="item-text">其他</text>
  207. </view>
  208. </view>
  209. </view>
  210. <view class="register-from group btn" v-show="isShowAustomItem">
  211. <view class="content-class btn">
  212. <input class="row-input other" type="text" v-model="customItemValue" placeholder="请输入自定义项目" @blur="onBlurInput" maxlength="5"/>
  213. <button type="default"
  214. class="confirm-btn other"
  215. :class="[isDisabled === true ? 'disabled' : 'none']"
  216. :disabled="isDisabled"
  217. @click.stop="addCustomItem"
  218. >确认添加</button>
  219. </view>
  220. </view>
  221. </view>
  222. <view class="register-row clearfix" v-if="isOrganizationType == 2">
  223. <view class="register-from group">
  224. <view class="label">主营内容:</view>
  225. <checkbox-group class="content-class" @change="chooseMaleLikes">
  226. <label class="item" v-for="(item, index) in medicaCampList" :key="index" :class="{on: item.checked}">
  227. <checkbox :value="item.value"></checkbox>
  228. <text class="item-text">{{item.name}}</text>
  229. </label>
  230. </checkbox-group>
  231. </view>
  232. <view class="register-from group btn">
  233. <view class="content-class btn">
  234. <view class="item" @click="showAustomItem">
  235. <text class="item-text">其他</text>
  236. </view>
  237. </view>
  238. </view>
  239. <view class="register-from group btn" v-show="isShowAustomItem">
  240. <view class="content-class btn">
  241. <input class="row-input other" type="text" v-model="customItemValue" placeholder="请输入自定义项目" @blur="onBlurInput" maxlength="5"/>
  242. <button type="default"
  243. class="confirm-btn"
  244. :class="[isDisabled === true ? 'disabled' : 'none']"
  245. :disabled="isDisabled"
  246. @click.stop="addCustomItem"
  247. >确认添加</button>
  248. </view>
  249. </view>
  250. </view>
  251. <view class="register-fiexd clearfix">
  252. <view class="register-row clearfix">
  253. <view class="register-btn none" @click="registerGoLogin">先跳过,以后再升级</view>
  254. </view>
  255. <view class="register-row ">
  256. <view class="register-btn sub" @click.stop="registerStepsSub">确认升级并提交审核</view>
  257. </view>
  258. </view>
  259. <mpvue-city-picker :themeColor="themeColor"
  260. ref="mpvueCityPicker"
  261. :pickerValueDefault="cityPickerValueDefault"
  262. @onCancel="onCancel"
  263. @onConfirm="onConfirm">
  264. </mpvue-city-picker>
  265. </view>
  266. </view>
  267. </template>
  268. <script>
  269. import { mapMutations } from 'vuex';
  270. import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
  271. import { beautyList,mentuzCampNullList,medicaCampNullList } from '@/common/json/data.json.js' //本地数据
  272. import authorize from '@/common/config/authorize.js'
  273. import { organizationVerifyRegisterFirst,organizationRegister ,organizationLogin } from "@/api/use.js"
  274. import { getImageCode, getMobileCode, uploadFileImage } from "@/api/utils.js"
  275. export default{
  276. components:{
  277. mpvueCityPicker
  278. },
  279. data() {
  280. return{
  281. nvabarData: { //顶部自定义导航
  282. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  283. showSearch: 0,
  284. title: '注册', // 导航栏 中间的标题
  285. },
  286. CustomBar:this.CustomBar,// 顶部导航栏高度
  287. tabCurrentIndex:1, //显示step
  288. isPreviewImage:false, //预览图片开关
  289. isMobileDisabled: false, //手机验证码按钮控制
  290. mobilCount: '', //倒计时
  291. mobileCodeText: '获取验证码',
  292. mobilTime: null,
  293. registerEmail:'', //注册邮箱
  294. password:'', //密码
  295. passwordCheck:'', //校验密码
  296. clubName:'', //机构名称
  297. abbreviation:'', //机构简称
  298. userName:'', //联系人
  299. bindMobile:'', //联系人手机号
  300. mobileCode:'', //手机验证码
  301. imageCode:'', //图形验证码
  302. imageCodeUrl:'', //图形验证码图片
  303. imageCodetoken:'', //图形验证校验
  304. socialCreditCode:'', //统一社会信用代码
  305. isAgreed:0, //是否勾选协议
  306. isDisabled:true,
  307. isShowInput:false,
  308. isCheck:false, //是否勾选协议
  309. uploadBusinessImage:'', //营业执照图片
  310. uploadMentuzImage:'', //门头照图片
  311. uploadMedicalImage:'', //资质照图片
  312. department:'', //科室
  313. isDepartment:false, //是否显示科室
  314. secondClubType:'', //机构类型二级分类
  315. mainpro:'', //主营内容
  316. isOrganizationType:0,
  317. organizationTypeText:'请选择机构类型',
  318. beautyList:beautyList,
  319. mentuzCampList:mentuzCampNullList,
  320. medicaCampList:medicaCampNullList,
  321. typtIndex:0,
  322. organizationType:3,
  323. current:0,
  324. isShowAustomItem:false, //是否显示其他添加
  325. customItemValue:'', //自定义项目
  326. addressData:{
  327. address:'请选择机构所在地区',
  328. townID:'', //区ID
  329. cityID:'', //区ID
  330. provinceID:'', //区ID
  331. addressDetail: '', //地址
  332. },
  333. userID:'', //机构userID
  334. clubID:'', //机构ID
  335. getOption:'' //页面传递参数
  336. }
  337. },
  338. onLoad(option) {
  339. this.getOption = JSON.stringify(option)
  340. },
  341. methods:{
  342. ...mapMutations(['login']),
  343. hanldNavigateBack(){
  344. this.$util.modal('','注册尚未完成,确定放弃注册吗?','确定','取消',true,() =>{
  345. uni.navigateBack({
  346. delta: 1
  347. });
  348. })
  349. },
  350. registerStepsfirst(){
  351. let params ={
  352. userName:this.userName,
  353. bindMobile:this.bindMobile,
  354. activationCode:this.mobileCode,
  355. password:this.password,
  356. passWordConfirm:this.passwordCheck,
  357. isAgreed:this.isAgreed, //是否勾选协议
  358. }
  359. organizationVerifyRegisterFirst(params).then(response =>{
  360. this.$util.msg('注册成功',2000);
  361. this.userID = response.data.userID
  362. this.clubID = response.data.clubID
  363. setTimeout(()=>{
  364. this.tabCurrentIndex = 2
  365. this.nvabarData.title = '升级会所机构'
  366. },2000)
  367. }).catch(error =>{
  368. this.$util.msg(error.msg,2000);
  369. })
  370. },
  371. registerGoLogin(){
  372. organizationLogin({mobileOrEmail:this.bindMobile,password:this.password,source:'www'}).then(response =>{
  373. this.storeUpdataeStatus(response.data)
  374. this.$api.navigateTo('/pages/login/bindwechat')
  375. }).catch(error =>{
  376. this.$util.msg(error.msg,2000);
  377. })
  378. },
  379. storeUpdataeStatus(data){
  380. uni.setStorageSync('token',data.token)
  381. this.$store.commit('updateStatus',data)
  382. this.login(data);
  383. },
  384. registerStepsSub(){
  385. if( this.registerEmail == ''){
  386. this.$util.msg('请输入邮箱地址',2000);
  387. return
  388. }
  389. if( !this.$reg.isEmail(this.registerEmail)){
  390. this.$util.msg('请输入正确的邮箱地址',2000);
  391. return
  392. }
  393. if( this.clubName == ''){
  394. this.$util.msg('请输入机构名称',2000);
  395. return
  396. }
  397. if( this.addressData.townID == ''){
  398. this.$util.msg('请选择机构地址',2000);
  399. return
  400. }
  401. if( this.addressData.addressDetail == ''){
  402. this.$util.msg('请填写机构详细地址',2000);
  403. return
  404. }
  405. if( this.socialCreditCode == ''){
  406. this.$util.msg('请填写社会统一社会信用代码',2000);
  407. return
  408. }
  409. if( this.uploadBusinessImage == ''){
  410. this.$util.msg('请上传您的营业执照',2000);
  411. return
  412. }
  413. if(this.isOrganizationType!=0){
  414. if(this.mainpro == ''){
  415. this.$util.msg('请选择住机构主营内容',2000);
  416. return
  417. }
  418. }
  419. let params ={
  420. userID:this.userID,
  421. clubID:this.clubID,
  422. contractEmail1:this.registerEmail,
  423. name:this.clubName,
  424. sname:this.abbreviation,
  425. provinceID:this.addressData.provinceID,
  426. cityID:this.addressData.cityID,
  427. townID:this.addressData.townID,
  428. address:this.addressData.addressDetail,
  429. socialCreditCode:this.socialCreditCode,
  430. businessLicenseImage:this.uploadBusinessImage,
  431. headpic:this.uploadMentuzImage,
  432. firstClubType:this.isOrganizationType, //机构类型分类 医美:0和生美:1
  433. secondClubType:this.secondClubType, //机构类型二级分类 诊所:1,门诊:2,医院:3
  434. department:this.department, //科室
  435. medicalPracticeLicenseImg:this.uploadMedicalImage,//资质图片
  436. mainpro:this.mainpro
  437. }
  438. organizationRegister(params).then(res =>{
  439. this.$util.msg('您的升级申请已提交审核',2000);
  440. setTimeout(()=>{
  441. this.registerGoLogin()
  442. },2000)
  443. }).catch(error =>{
  444. this.$util.msg(error.msg,2000);
  445. })
  446. },
  447. getMobileCodeFn(){
  448. if( this.bindMobile == ''){
  449. this.$util.msg('请输入手机号',2000);
  450. return
  451. }
  452. if(!this.$reg.isMobile(this.bindMobile)){
  453. this.$util.msg('请输入正确的手机号',2000);
  454. return
  455. }
  456. if( this.imageCode == ''){
  457. this.$util.msg('请输入图形验证码',2000);
  458. return
  459. }
  460. let params = {
  461. mobile:this.bindMobile,
  462. activateCodeType:2,
  463. platformType:2,
  464. imgCode:this.imageCode,
  465. token:this.imageCodetoken,
  466. }
  467. this.isMobileDisabled = true;
  468. getMobileCode(params).then(response =>{
  469. this.$util.msg('验证短信已发送',2000);
  470. const TIME_COUNT = 60;
  471. if (!this.mobilTime) {
  472. this.mobilCount = TIME_COUNT;
  473. this.isMobileDisabled = true;
  474. this.mobilTime = setInterval(() => {
  475. if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
  476. this.mobilCount--
  477. this.mobileCodeText = this.mobilCount +'s重新发送'
  478. } else {
  479. this.isMobileDisabled = false;
  480. clearInterval(this.mobilTime)
  481. this.mobilTime = null
  482. this.mobileCodeText = '获取验证码'
  483. }
  484. },1000)
  485. }
  486. }).catch( error =>{
  487. this.$util.msg(error.msg,2000);
  488. this.isMobileDisabled = false;
  489. })
  490. },
  491. getVerificationCode(){//获取图形验证
  492. getImageCode().then(res => {
  493. this.imageCodeUrl = res.data.baseImage
  494. this.imageCodetoken = res.data.token
  495. })
  496. },
  497. showMulLinkageThreePicker() {//三级地址联动
  498. this.isShowInput = true
  499. this.$refs.mpvueCityPicker.show()
  500. },
  501. onConfirm(e) {//获取选择的地址信息
  502. this.addressData.address = e.name;
  503. this.addressData.townID = e.townCode;
  504. this.addressData.cityID = e.cityCode;
  505. this.addressData.provinceID = e.provinceCode;
  506. },
  507. onTextareaInput(e){//地址详细信息
  508. this.addressData.addressDetail = e.detail.value;
  509. },
  510. chooseBusinessImage() {//营业执照图片上传
  511. uploadFileImage().then(res =>{
  512. this.uploadBusinessImage = JSON.parse(res.data).data
  513. })
  514. },
  515. chooseMentuzImage() {//门头照图片上传
  516. uploadFileImage().then(res =>{
  517. this.uploadMentuzImage = JSON.parse(res.data).data
  518. })
  519. },
  520. chooseMedicalImage() {//资质照图片上传
  521. uploadFileImage().then(res =>{
  522. this.uploadMedicalImage = JSON.parse(res.data).data
  523. })
  524. },
  525. viewBusinessImage(e) {//预览营业执照图片
  526. this.myPreviewImageFn(this.uploadBusinessImage)
  527. },
  528. viewMentuzImage(e) {//预览门头照图片
  529. this.myPreviewImageFn(this.uploadMentuzImage)
  530. },
  531. viewMedicalImage(e) {//预览资质照图片
  532. this.myPreviewImageFn(this.uploadMedicalImage)
  533. },
  534. myPreviewImageFn(url){//预览图片公共方法
  535. this.isPreviewImage = true
  536. let mentuzArray = []
  537. mentuzArray.push(url)
  538. uni.previewImage({
  539. urls: mentuzArray,
  540. current: 0
  541. });
  542. },
  543. delBusinessImage(){//删除营业执照图片
  544. this.$util.modal('','确定删除营业执照图片吗?','确定','取消',true,() =>{
  545. this.uploadBusinessImage = ''
  546. })
  547. },
  548. delMentuzImage(){//删除门头照图片
  549. this.$util.modal('','确定删除门头照图片吗?','确定','取消',true,() =>{
  550. this.uploadMentuzImage = ''
  551. })
  552. },
  553. delMedicalImage(){//删除资质图片
  554. this.$util.modal('','确定删除资质图片吗?','确定','取消',true,() =>{
  555. this.uploadMedicalImage = ''
  556. })
  557. },
  558. bindPickerChange() {//机构类型选择
  559. let self = this
  560. uni.showActionSheet({
  561. title:'标题',
  562. itemList: ['医美', '生美'],
  563. success: (e) => {
  564. self.isOrganizationType = e.tapIndex+1
  565. switch(e.tapIndex){
  566. case 0:
  567. this.organizationTypeText = '医美'
  568. break;
  569. case 1:
  570. this.organizationTypeText = '生美'
  571. break;
  572. }
  573. }
  574. })
  575. },
  576. bindPickerChange2(e) {
  577. this.typtIndex = e.target.value
  578. this.isOrganizationType = e.target.value
  579. },
  580. radioChange(e) {
  581. this.secondClubType = e.target.value;
  582. if( this.secondClubType == '2' || this.secondClubType == '3'){
  583. this.isDepartment = true
  584. }else{
  585. this.isDepartment = false
  586. }
  587. for (let i = 0; i < this.beautyList.length; i++) {
  588. if (this.beautyList[i].value === this.secondClubType) {
  589. this.current = i;
  590. break;
  591. }
  592. }
  593. },
  594. chooseMaleLike(e){
  595. this.mainpro = this.checkLikes(e,this.mentuzCampList)
  596. },
  597. chooseMaleLikes(e){
  598. this.mainpro = this.checkLikes(e,this.medicaCampList)
  599. },
  600. checkLikes(e,list){
  601. let values = e.detail.value
  602. let arr = []
  603. list.forEach(item => {
  604. if(values.indexOf(item.value) >= 0){
  605. this.$set(item,'checked',true)
  606. arr.push(item.name)
  607. }else{
  608. this.$set(item,'checked',false)
  609. }
  610. })
  611. return arr.join('/')
  612. },
  613. agreeCheck() {
  614. this.isCheck = !this.isCheck
  615. if(this.isCheck){
  616. this.isAgreed = 1
  617. }else{
  618. this.isAgreed = 0
  619. }
  620. },
  621. onBlurInput(e){//
  622. if(e.detail.value ===''){
  623. this.isDisabled = true
  624. }else{
  625. this.isDisabled = false
  626. }
  627. },
  628. showAustomItem() {
  629. this.isShowAustomItem = !this.isShowAustomItem
  630. },
  631. addCustomItem(){
  632. if(this.isOrganizationType == 1){
  633. let item = {value:`${this.mentuzCampList.length+1}`,name:this.customItemValue}
  634. this.mentuzCampList.push(item)
  635. }else{
  636. let item = {value:`${this.medicaCampList.length+1}`,name:this.customItemValue}
  637. this.medicaCampList.push(item)
  638. }
  639. }
  640. },
  641. onShow() {
  642. this.getVerificationCode()
  643. if(this.isPreviewImage){
  644. this.isPreviewImage = false
  645. return
  646. }
  647. }
  648. }
  649. </script>
  650. <style lang="scss">
  651. .register{
  652. width: 100%;
  653. height: auto;
  654. .register-main{
  655. width: 100%;
  656. height: auto;
  657. .register-agree{
  658. display: flex;
  659. flex-direction: column;
  660. align-items: center;
  661. margin: 60rpx 0 40rpx 0;
  662. .agree-text{
  663. .checkbox{
  664. float: left;
  665. margin: 4rpx 6rpx 0 0;
  666. color: #999999;
  667. font-size: $font-size-32;
  668. &.icon-gouxuan{
  669. color: $color-system;
  670. }
  671. }
  672. font-size: 20rpx;
  673. line-height: 44rpx;
  674. color: #999999;
  675. text{
  676. color:#0091FF;
  677. }
  678. }
  679. }
  680. .register-logo{
  681. width: 100%;
  682. display: flex;
  683. flex-direction: column;
  684. align-items: center;
  685. height: 198rpx;
  686. padding:60rpx 0 40rpx 0;
  687. .logo{
  688. width: 138rpx;
  689. height: 118rpx;
  690. display: block;
  691. }
  692. .logo-text{
  693. font-size: 30rpx;
  694. line-height: 44rpx;
  695. color: $color-system;
  696. font-weight: 600;
  697. margin-top: 20rpx;
  698. }
  699. }
  700. &.detailed{
  701. padding-bottom: 330rpx;
  702. }
  703. .register-row{
  704. width: 702rpx;
  705. height: auto;
  706. padding: 0 24rpx;
  707. margin-bottom: 20rpx;
  708. &.none{
  709. margin-bottom: 0;
  710. }
  711. .register-text{
  712. line-height: 44rpx;
  713. margin-top: 100rpx;
  714. font-size: $font-size-24;
  715. color: #999999;
  716. text-align: justify;
  717. .txt{
  718. margin-right: 15rpx;
  719. }
  720. }
  721. .register-title{
  722. line-height: 44rpx;
  723. font-size: $font-size-24;
  724. color: $text-color;
  725. text-align: left;
  726. &.first{
  727. margin-top: 20rpx;
  728. }
  729. }
  730. .register-tip{
  731. line-height: 64rpx;
  732. font-size: $font-size-24;
  733. color: #CECECE;
  734. text-align: left;
  735. }
  736. .register-from{
  737. width: 654rpx;
  738. height: 40rpx;
  739. padding: 24rpx;
  740. background: $sub-bg-color;
  741. border-radius: 14rpx;
  742. position: relative;
  743. .label{
  744. text-align: left;
  745. font-size: $font-size-28;
  746. color: $text-color;
  747. line-height: 40rpx;
  748. float: left;
  749. }
  750. .row-input{
  751. width: 440rpx;
  752. padding-left:10rpx;
  753. font-size: $font-size-28;
  754. color: $text-color;
  755. line-height: 40rpx;
  756. float: left;
  757. height: 40rpx;
  758. &.none{
  759. color: #999999;
  760. }
  761. &.picker{
  762. text-align: left;
  763. color: #999999;
  764. }
  765. &.keshi{
  766. width: 550rpx;
  767. }
  768. }
  769. &.img-btn{
  770. width: 220rpx;
  771. height: 88rpx;
  772. padding: 0;
  773. float: left;
  774. background: #FFFFFF;
  775. display: block;
  776. .vscodeimg{
  777. width: 150rpx;
  778. height: 88rpx;
  779. float: left;
  780. display: flex;
  781. flex-direction: column;
  782. align-items: center;
  783. border-radius: 14rpx;
  784. image{
  785. width: 150rpx;
  786. height: 88rpx;
  787. border-radius: 14rpx;
  788. }
  789. }
  790. .vscod-refresh{
  791. width: 70rpx;
  792. float: right;
  793. text-align: right;
  794. display: flex;
  795. flex-direction: column;
  796. align-items: center;
  797. line-height: 44rpx;
  798. .icon-shuaxin{
  799. font-size: 48rpx;
  800. color: #333333;
  801. }
  802. .ref-text{
  803. font-size: 24rpx;
  804. color: #333333;
  805. }
  806. }
  807. }
  808. &.imgcode{
  809. width: 410rpx;
  810. float: left;
  811. margin-right: 20rpx;
  812. .row-input{
  813. width: 230rpx;
  814. }
  815. }
  816. &.code{
  817. width: 410rpx;
  818. float: left;
  819. margin-right: 20rpx;
  820. .row-input{
  821. width: 230rpx;
  822. }
  823. }
  824. &.btn{
  825. width: 224rpx;
  826. height: 88rpx;
  827. float: left;
  828. background: $btn-confirm;
  829. padding: 0;
  830. .row-input{
  831. width: 224rpx;
  832. height: 88rpx;
  833. line-height: 88rpx;
  834. padding: 0;
  835. color: #FFFFFF;
  836. background: $btn-confirm;
  837. text-align: center;
  838. border-radius: 14rpx;
  839. &.other{
  840. width: 224rpx;
  841. background: #F7F7F7;
  842. margin-right: 20rpx;
  843. }
  844. &.none{
  845. background: #F7F7F7;
  846. }
  847. }
  848. &.disabled{
  849. background: #F7F7F7;
  850. .row-input{
  851. background: #F7F7F7;
  852. color: #999999;
  853. }
  854. }
  855. }
  856. &.picker{
  857. padding: 0 24rpx;
  858. width: 654rpx;
  859. height: 88rpx;
  860. line-height: 88rpx;
  861. .label{
  862. line-height: 88rpx;
  863. }
  864. .row-input{
  865. width: 470rpx;
  866. height: 88rpx;
  867. line-height: 88rpx;
  868. padding-left: 30rpx;
  869. }
  870. }
  871. &.radio{
  872. padding: 0 24rpx;
  873. width: 654rpx;
  874. height: 288rpx;
  875. .row-input{
  876. width: 100%;
  877. height: 88rpx;
  878. line-height: 88rpx;
  879. padding-left: 0;
  880. }
  881. .row-radio{
  882. float: left;
  883. transform: scale(0.8);
  884. }
  885. .row-text{
  886. width: 100rpx;
  887. text-align: center;
  888. float: left;
  889. }
  890. }
  891. &.group{
  892. padding: 0 24rpx;
  893. width: 654rpx;
  894. height: auto;
  895. background: #FFFFFF;
  896. margin-top: 30rpx;
  897. .label{
  898. line-height: 76rpx;
  899. }
  900. .row-input{
  901. width: 100%;
  902. height: 88rpx;
  903. line-height: 88rpx;
  904. padding-left: 0;
  905. }
  906. .row-radio{
  907. float: left;
  908. }
  909. .row-text{
  910. width: 100rpx;
  911. text-align: center;
  912. float: left;
  913. }
  914. }
  915. &.btn{
  916. margin-top: 0;
  917. }
  918. .content-class {
  919. margin: 20rpx auto;
  920. display: flex;
  921. flex-flow: row wrap;
  922. justify-content: space-between;
  923. align-items: center;
  924. &.btn{
  925. margin: 0 auto;
  926. margin-left: 116rpx;
  927. }
  928. .row-input{
  929. display: flex;
  930. width: 220rpx;
  931. height: 40rpx;
  932. padding: 24rpx;
  933. text-align: left;
  934. border-radius: 10rpx;
  935. font-size: $font-size-28;
  936. color: $text-color;
  937. }
  938. .confirm-btn{
  939. width: 200rpx;
  940. height: 88rpx;
  941. border-radius: 10rpx;
  942. line-height: 88rpx;
  943. text-align: center;
  944. &.other{
  945. width: 213rpx;
  946. }
  947. &.none{
  948. color: #FFFFFF;
  949. background: $btn-confirm;
  950. }
  951. &.disabled{
  952. color: #999999;
  953. }
  954. }
  955. .item {
  956. width: 155rpx;
  957. height: 60rpx;
  958. font-size:$font-size-28;
  959. line-height: 60rpx;
  960. border-radius:10rpx;
  961. margin: 10rpx;
  962. text-align: center;
  963. box-sizing: border-box;
  964. border: 1rpx solid #EFEFEF;
  965. checkbox {
  966. display: none;
  967. }
  968. }
  969. .on {
  970. border-color: $color-system;
  971. color:$color-system;
  972. }
  973. }
  974. }
  975. .icon-xiayibu{
  976. width: 88rpx;
  977. height: 88rpx;
  978. position: absolute;
  979. right: 0;
  980. top: 0;
  981. line-height: 88rpx;
  982. text-align: center;
  983. }
  984. &.text-textarea{
  985. background: #FFFFFF;
  986. .textarea{
  987. width: 654rpx;
  988. height: 180rpx;
  989. background: #F7F7F7;
  990. padding: 24rpx;
  991. font-size: $font-size-28;
  992. color: $text-color;
  993. z-index: 1;
  994. border-radius: 14rpx;
  995. }
  996. .textarea.hide{
  997. opacity: 0;
  998. }
  999. .textarea.show{
  1000. color: #999999;
  1001. }
  1002. }
  1003. }
  1004. .register-picture{
  1005. height: 102rpx;
  1006. margin: 30rpx 0;
  1007. width: 42%;
  1008. float: left;
  1009. &.zz{
  1010. width: 100%;
  1011. }
  1012. .label{
  1013. float: left;
  1014. font-size: $font-size-28;
  1015. color: $text-color;
  1016. line-height: 102rpx;
  1017. width: 150rpx;
  1018. text-align: right;
  1019. &.zz{
  1020. width: 230rpx;
  1021. }
  1022. }
  1023. .upload-picture{
  1024. float: left;
  1025. height: 100rpx;
  1026. .upload-none{
  1027. width: 100rpx;
  1028. height: 100rpx;
  1029. text-align: center;
  1030. line-height: 100rpx;
  1031. color: #999999;
  1032. border: 1px solid #999999;
  1033. border-radius: 10rpx;
  1034. margin: 0 20rpx;
  1035. .iconfont{
  1036. font-size: $font-size-28;
  1037. }
  1038. }
  1039. .upload-image{
  1040. width: 100rpx;
  1041. height: 100rpx;
  1042. border-radius: 10rpx;
  1043. margin: 0 20rpx;
  1044. position: relative;
  1045. image{
  1046. width: 100rpx;
  1047. height: 100rpx;
  1048. border-radius: 10rpx;
  1049. }
  1050. .upload-del{
  1051. width: 40rpx;
  1052. height: 40rpx;
  1053. position: absolute;
  1054. top: -20rpx;
  1055. right: -20rpx;
  1056. line-height: 40rpx;
  1057. text-align: center;
  1058. .iconfont{
  1059. font-size: $font-size-32;
  1060. color: #999999;
  1061. }
  1062. }
  1063. }
  1064. }
  1065. }
  1066. .register-input{
  1067. width: 654rpx;
  1068. height: 40rpx;
  1069. padding: 24rpx;
  1070. margin: 0 auto;
  1071. margin-bottom: 60rpx;
  1072. background: #F7F7F7;
  1073. border-radius: 14rpx;
  1074. .input{
  1075. width: 100%;
  1076. height: 100%;
  1077. background: #F7F7F7;
  1078. font-size: $font-size-28;
  1079. line-height: 40rpx;
  1080. color: #333333;
  1081. border-radius: 14rpx;
  1082. }
  1083. }
  1084. .register-fiexd{
  1085. width: 100%;
  1086. height: auto;
  1087. position: fixed;
  1088. bottom: 0;
  1089. left: 0;
  1090. z-index: 999;
  1091. background: #FFFFFF;
  1092. }
  1093. .register-btn{
  1094. width: 702rpx;
  1095. height: 88rpx;
  1096. border-radius: 14rpx;
  1097. font-size: $font-size-28;
  1098. line-height: 88rpx;
  1099. color: #FFFFFF;
  1100. margin: 0 auto;
  1101. text-align: center;
  1102. background: $btn-confirm;
  1103. margin-top: 96rpx;
  1104. &.none{
  1105. border: 1px solid $color-system;
  1106. background: #FFFFFF;
  1107. color:$color-system;
  1108. margin-top: 0;
  1109. }
  1110. &.sub{
  1111. margin-top: 0;
  1112. }
  1113. }
  1114. }
  1115. }
  1116. </style>