apply.vue 35 KB

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