information.vue 34 KB

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