information.vue 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019
  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">369321048@qq.com</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" 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="text" v-model="mobileCode" placeholder="请输入上述手机号的验证码" maxlength="6"/>
  38. </view>
  39. <view class="register-from btn" :class="[isMobileDisabled ? 'disabled' : '']" @click.stop="getMobileCodeFn">
  40. <button class="row-input" type="button" :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="text" v-model="newMobileCode" placeholder="请输入新手机号的验证码" maxlength="6"/>
  51. </view>
  52. <view class="register-from btn" :class="[isMobileDisabled ? 'disabled' : '']" @click.stop="getNewMobileCodeFn">
  53. <button class="row-input" type="button" :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="clubContact" placeholder="请输入您的机构简称" maxlength="16"/>
  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="50"
  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="clubContact" 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 == 0">
  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="clubContact" placeholder="请填写经营的科室,至少三个,用逗号隔开" maxlength="16"/>
  150. </view>
  151. </view>
  152. <view class="register-row clearfix" v-if="isOrganizationType == 0">
  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 == 0">
  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 == 1">
  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">提交审核</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 { organizationRegister , organizationVerifyRegisterFirst ,organizationVerifyRegisterTwo } from "@/api/use.js"
  276. import { getImageCode, getMobileCode, 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. count: '', //倒计时
  290. codeTime: null,
  291. clubName:'', //机构名称
  292. abbreviation:'', //机构简称
  293. clubContact:'', //联系人
  294. mobile:'', //联系人手机号
  295. newMobile:'', //新联系人手机号
  296. mobileCode:'', //手机号验证码
  297. newMobileCode:'', //新手机号手机验证码
  298. mobileCodeText: '获取验证码',
  299. newMobileCodeText: '获取验证码',
  300. socialCreditCode:'', //统一社会信用代码
  301. isAgreed:0, //是否勾选协议
  302. isDisabled:true,
  303. isShowInput:false,
  304. isCheck:true, //是否勾选协议
  305. uploadBusinessImage:'', //营业执照图片
  306. uploadMentuzImage:'', //门头照图片
  307. uploadMedicalImage:'', //资质照图片
  308. department:'', //科室
  309. isDepartment:false, //是否显示科室
  310. secondClubType:'', //机构类型二级分类
  311. mainpro:'', //主营内容
  312. clubTelePhone:'', //固定电话
  313. clubFax:'', //传真
  314. companyPprofile:'', //公司简介
  315. isOrganizationType:3,
  316. organizationTypeText:'请选择机构类型',
  317. beautyList:[{value:'1',name:'诊所'},{value:'2',name:'门诊'},{value:'3',name:'医院'}],
  318. mentuzCampList:[{value:'1',name:'整形'},{value:'2',name:'轻医美'},{value:'3',name:'皮肤科'}],
  319. medicaCampList:[
  320. {value:'1',name:'美容'},
  321. {value:'2',name:'美体'},
  322. {value:'3',name:'美发'},
  323. {value:'4',name:'皮肤管理'},
  324. {value:'5',name:'光电'},
  325. {value:'6',name:'综合类'},
  326. {value:'7',name:'中医养生'},
  327. {value:'8',name:'spa'}
  328. ],
  329. typtIndex:0,
  330. organizationType:0,
  331. current:0,
  332. isShowAustomItem:false, //是否显示其他添加
  333. customItemValue:'', //自定义项目
  334. addressData:{
  335. address:'请选择机构所在地区',
  336. townID:'', //区ID
  337. cityID:'', //区ID
  338. provinceID:'', //区ID
  339. addressDetail: '', //地址
  340. },
  341. }
  342. },
  343. onLoad(option) {
  344. console.log(option)
  345. },
  346. methods:{
  347. registerStepsTwo(){
  348. let params ={
  349. name:this.clubName,
  350. linkMan:this.clubContact,
  351. bindMobile:this.registerMobile,
  352. activationCode:this.mobileCode,
  353. whichStep:2,
  354. }
  355. organizationVerifyRegisterTwo(params).then(res =>{
  356. console.log(res)
  357. this.tabCurrentIndex = 3
  358. }).catch(res =>{
  359. this.$util.msg(res.msg,2000);
  360. })
  361. },
  362. registerStepsSub(){
  363. let params ={
  364. name:this.clubName,
  365. linkMan:this.clubContact,
  366. bindMobile:this.registerMobile,
  367. activationCode:this.mobileCode,
  368. sname:this.abbreviation,
  369. provinceID:this.addressData.provinceID,
  370. cityID:this.addressData.cityID,
  371. townID:this.addressData.townID,
  372. address:this.addressData.addressDetail,
  373. socialCreditCode:this.socialCreditCode,
  374. businessLicenseImage:this.uploadBusinessImage,
  375. headpic:this.uploadMentuzImage,
  376. firstClubType:this.isOrganizationType, //机构类型分类 医美:0和生美:1
  377. secondClubType:this.secondClubType, //机构类型二级分类 诊所:1,门诊:2,医院:3
  378. department:this.department, //科室
  379. medicalPracticeLicenseImg:this.uploadMedicalImage,//资质图片
  380. isAgreed:this.isAgreed, //是否勾选协议
  381. mainpro:this.mainpro,
  382. whichStep:3
  383. }
  384. organizationRegister(params).then(res =>{
  385. this.$util.msg('您的机构账号已提交审核',2000);
  386. this.$api.switchTabTo('/pages/tabBar/home/home')
  387. }).catch(res =>{
  388. this.$util.msg(res.msg,2000);
  389. })
  390. },
  391. getMobileCodeFn(){
  392. let params = {
  393. mobile:this.registerMobile,
  394. activateCodeType:2,
  395. platformType:2,
  396. imgCode:this.imageCode,
  397. token:this.imageCodetoken,
  398. }
  399. getMobileCode(params).then(res =>{
  400. this.$util.msg('验证短信已发送',2000);
  401. const TIME_COUNT = 60;
  402.       if (!this.codeTime) {
  403.         this.count = TIME_COUNT;
  404.         this.isMobileDisabled = true;
  405.         this.codeTime = setInterval(() => {
  406.         if (this.count > 1 && this.count <= TIME_COUNT) {
  407.           this.count--
  408.           this.mobileCodeText = this.count +'s重新发送'
  409.          } else {
  410.           this.isMobileDisabled = false;
  411.           clearInterval(this.codeTime)
  412.           this.codeTime = null
  413. this.mobileCodeText = '获取验证码'
  414.          }
  415.         },1000)
  416.        }
  417. }).catch( res =>{
  418. this.$util.msg(res.msg,2000);
  419. })
  420. },
  421. getNewMobileCodeFn(){
  422. let params = {
  423. mobile:this.registerMobile,
  424. activateCodeType:2,
  425. platformType:2,
  426. imgCode:this.imageCode,
  427. token:this.imageCodetoken,
  428. }
  429. getMobileCode(params).then(res =>{
  430. this.$util.msg('验证短信已发送',2000);
  431. const TIME_COUNT = 60;
  432.       if (!this.codeTime) {
  433.         this.count = TIME_COUNT;
  434.         this.isNewMobileDisabled = true;
  435.         this.codeTime = setInterval(() => {
  436.         if (this.count > 1 && this.count <= TIME_COUNT) {
  437.           this.count--
  438.           this.newMobileCodeText = this.count +'s重新发送'
  439.          } else {
  440.           this.isNewMobileDisabled = false;
  441.           clearInterval(this.codeTime)
  442.           this.codeTime = null
  443. this.newMobileCodeText = '获取验证码'
  444.          }
  445.         },1000)
  446.        }
  447. }).catch( res =>{
  448. this.$util.msg(res.msg,2000);
  449. })
  450. },
  451. getVerificationCode(){//图形验证
  452. getImageCode().then(res => {
  453. this.imageCodeUrl = res.data.baseImage
  454. this.imageCodetoken = res.data.token
  455. })
  456. },
  457. // 三级联动选择
  458. showMulLinkageThreePicker() {
  459. this.isShowInput = true
  460. this.$refs.mpvueCityPicker.show()
  461. },
  462. onConfirm(e) {
  463. console.log('地址',e);
  464. this.addressData.address = e.name;
  465. this.addressData.townID = e.townCode;
  466. this.addressData.cityID = e.cityCode;
  467. this.addressData.provinceID = e.provinceCode;
  468. },
  469. onTextareaInput(e){
  470. this.addressData.addressDetail = e.detail.value;
  471. },
  472. chooseBusinessImage() {//营业执照图片上传
  473. uploadFileImage().then(res =>{
  474. this.uploadBusinessImage = JSON.parse(res.data).data
  475. })
  476. },
  477. chooseMentuzImage() {//门头照图片上传
  478. uploadFileImage().then(res =>{
  479. this.uploadMentuzImage = JSON.parse(res.data).data
  480. })
  481. },
  482. chooseMedicalImage() {//资质照图片上传
  483. uploadFileImage().then(res =>{
  484. this.uploadMedicalImage = JSON.parse(res.data).data
  485. })
  486. },
  487. viewBusinessImage(e) {
  488. this.myPreviewImageFn(this.uploadBusinessImage)
  489. },
  490. viewMentuzImage(e) {
  491. this.myPreviewImageFn(this.uploadMentuzImage)
  492. },
  493. viewMedicalImage(e) {
  494. this.myPreviewImageFn(this.uploadMedicalImage)
  495. },
  496. myPreviewImageFn(url){
  497. this.isPreviewImage = true
  498. let mentuzArray = []
  499. mentuzArray.push(url)
  500. uni.previewImage({
  501. urls: mentuzArray,
  502. current: 0
  503. });
  504. },
  505. delBusinessImage(){
  506. this.$util.modal('','确定删除营业执照图片吗?','确定','取消',true,() =>{
  507. this.uploadBusinessImage = ''
  508. })
  509. },
  510. delMentuzImage(){
  511. this.$util.modal('','确定删除门头照图片吗?','确定','取消',true,() =>{
  512. this.uploadMentuzImage = ''
  513. })
  514. },
  515. delMedicalImage(){
  516. this.$util.modal('','确定删除资质图片吗?','确定','取消',true,() =>{
  517. this.uploadMedicalImage = ''
  518. })
  519. },
  520. bindPickerChange() {
  521. let self = this
  522. uni.showActionSheet({
  523. title:'标题',
  524. itemList: ['医美', '生美'],
  525. success: (e) => {
  526. self.isOrganizationType = e.tapIndex
  527. switch(e.tapIndex){
  528. case 0:
  529. this.organizationTypeText = '医美'
  530. break;
  531. case 1:
  532. this.organizationTypeText = '生美'
  533. break;
  534. }
  535. }
  536. })
  537. },
  538. bindPickerChange2(e) {
  539. console.log('picker携带值为:' + e.target.value)
  540. this.typtIndex = e.target.value
  541. this.isOrganizationType = e.target.value
  542. },
  543. radioChange(e) {
  544. this.secondClubType = e.target.value;
  545. if( this.secondClubType == '2' || this.secondClubType == '3'){
  546. this.isDepartment = true
  547. }else{
  548. this.isDepartment = false
  549. }
  550. for (let i = 0; i < this.beautyList.length; i++) {
  551. if (this.beautyList[i].value === this.secondClubType) {
  552. this.current = i;
  553. break;
  554. }
  555. }
  556. },
  557. chooseMaleLike(e){
  558. this.mainpro = this.checkLikes(e,this.mentuzCampList)
  559. console.log(this.mainpro)
  560. },
  561. chooseMaleLikes(e){
  562. this.mainpro = this.checkLikes(e,this.medicaCampList)
  563. console.log(this.mainpro)
  564. },
  565. checkLikes(e,list){
  566. let items = list
  567. let values = e.detail.value
  568. let arr = []
  569. for (let i = 0, lenI = items.length; i < lenI; ++i) {
  570. const item = items[i]
  571. if(values.indexOf(item.value) >= 0){
  572. this.$set(item,'checked',true)
  573. arr.push(item.name)
  574. }else{
  575. this.$set(item,'checked',false)
  576. }
  577. }
  578. return arr.toString()
  579. },
  580. agreeCheck() {
  581. this.isCheck = !this.isCheck
  582. if(this.isCheck){
  583. this.isAgreed = 1
  584. }
  585. },
  586. onBlurInput(e){//
  587. if(e.detail.value ===''){
  588. this.isDisabled = true
  589. }else{
  590. this.isDisabled = false
  591. }
  592. },
  593. showAustomItem() {
  594. this.isShowAustomItem = !this.isShowAustomItem
  595. },
  596. addCustomItem(){
  597. if(this.isOrganizationType == 0){
  598. let item = {value:`${this.mentuzCampList.length+1}`,name:this.customItemValue}
  599. this.mentuzCampList.push(item)
  600. }else{
  601. let item = {value:`${this.medicaCampList.length+1}`,name:this.customItemValue}
  602. this.medicaCampList.push(item)
  603. }
  604. },
  605. showCheckPhone(){//控制修改手机显隐
  606. this.isShowCheckPhone = !this.isShowCheckPhone
  607. },
  608. steps(index) {//$attrstab切换
  609. console.log(index)
  610. this.tabCurrentIndex = index;
  611. }
  612. },
  613. onShow() {
  614. if(this.isPreviewImage){
  615. this.isPreviewImage = false
  616. return
  617. }
  618. }
  619. }
  620. </script>
  621. <style lang="scss">
  622. .register{
  623. width: 100%;
  624. height: auto;
  625. border-top: 1px solid #F7F7F7;
  626. .model-warp.none{
  627. display: none;
  628. }
  629. .model-warp.show{
  630. display: block;
  631. }
  632. .register-main{
  633. width: 100%;
  634. height: auto;
  635. &.detailed{
  636. padding-bottom: 300rpx;
  637. }
  638. &.first{
  639. padding-top: 40rpx;
  640. }
  641. .register-tips{
  642. display: flex;
  643. flex-direction: column;
  644. align-items: center;
  645. line-height: 44rpx;
  646. font-size: $font-size-24;
  647. color: #FF0000;
  648. margin-bottom: 40rpx;
  649. .iconfont{
  650. font-size: $font-size-24;
  651. }
  652. }
  653. .register-row{
  654. width: 702rpx;
  655. height: auto;
  656. padding: 0 24rpx;
  657. margin-bottom: 20rpx;
  658. .register-title{
  659. line-height: 60rpx;
  660. font-size: $font-size-32;
  661. color: $text-color;
  662. text-align: left;
  663. padding-left: 20rpx;
  664. .txt{
  665. font-size: $font-size-26;
  666. font-weight: normal;
  667. }
  668. }
  669. .row-btn{
  670. position: absolute;
  671. right: 24rpx;
  672. top: 0;
  673. line-height: 88rpx;
  674. text-align: center;
  675. font-size: $font-size-28;
  676. color: $color-system;
  677. }
  678. .register-from{
  679. width: 654rpx;
  680. height: 40rpx;
  681. padding: 24rpx;
  682. background: $sub-bg-color;
  683. border-radius: 14rpx;
  684. position: relative;
  685. .label{
  686. text-align: left;
  687. font-size: $font-size-28;
  688. color: #666666;
  689. line-height: 40rpx;
  690. float: left;
  691. }
  692. .row-input{
  693. width: 440rpx;
  694. padding-left:10rpx;
  695. font-size: $font-size-28;
  696. color: $text-color;
  697. line-height: 40rpx;
  698. float: left;
  699. height: 40rpx;
  700. &.none{
  701. color: #999999;
  702. }
  703. &.picker{
  704. text-align: left;
  705. color: #999999;
  706. }
  707. &.keshi{
  708. width: 550rpx;
  709. }
  710. }
  711. &.code{
  712. width: 410rpx;
  713. float: left;
  714. margin-right: 20rpx;
  715. .row-input{
  716. width: 390rpx;
  717. }
  718. }
  719. &.btn{
  720. width: 176rpx;
  721. float: left;
  722. background: $btn-confirm;
  723. .row-input{
  724. width: 176rpx;
  725. padding: 0;
  726. color: #FFFFFF;
  727. background: $btn-confirm;
  728. text-align: center;
  729. &.other{
  730. width: 240rpx;
  731. background: #F7F7F7;
  732. margin-right: 20rpx;
  733. }
  734. &.none{
  735. background: #F7F7F7;
  736. }
  737. }
  738. &.disabled{
  739. .row-input{
  740. color: #999999;
  741. }
  742. }
  743. }
  744. &.picker{
  745. padding: 0 24rpx;
  746. width: 654rpx;
  747. height: 88rpx;
  748. line-height: 88rpx;
  749. .label{
  750. line-height: 88rpx;
  751. }
  752. .row-input{
  753. width: 470rpx;
  754. height: 88rpx;
  755. line-height: 88rpx;
  756. padding-left: 30rpx;
  757. }
  758. }
  759. &.radio{
  760. padding: 0 24rpx;
  761. width: 654rpx;
  762. height: 288rpx;
  763. .row-input{
  764. width: 100%;
  765. height: 88rpx;
  766. line-height: 88rpx;
  767. padding-left: 0;
  768. }
  769. .row-radio{
  770. float: left;
  771. transform: scale(0.8);
  772. }
  773. .row-text{
  774. width: 100rpx;
  775. text-align: center;
  776. float: left;
  777. }
  778. }
  779. &.group{
  780. padding: 0 24rpx;
  781. width: 654rpx;
  782. height: auto;
  783. background: #FFFFFF;
  784. margin-top: 30rpx;
  785. .row-input{
  786. width: 100%;
  787. height: 88rpx;
  788. line-height: 88rpx;
  789. padding-left: 0;
  790. }
  791. .row-radio{
  792. float: left;
  793. }
  794. .row-text{
  795. width: 100rpx;
  796. text-align: center;
  797. float: left;
  798. }
  799. }
  800. &.btn{
  801. margin-top: 0;
  802. }
  803. .content-class {
  804. width: 520rpx;
  805. margin: 20rpx auto;
  806. display: flex;
  807. flex-flow: row wrap;
  808. justify-content: space-between;
  809. &.btn{
  810. margin: 0 auto;
  811. margin-left: 126rpx;
  812. }
  813. .row-input{
  814. display: flex;
  815. width: 220rpx;
  816. height: 40rpx;
  817. padding: 24rpx;
  818. text-align: left;
  819. border-radius: 10rpx;
  820. font-size: $font-size-28;
  821. color: $text-color;
  822. }
  823. .confirm-btn{
  824. width: 200rpx;
  825. height: 88rpx;
  826. border-radius: 10rpx;
  827. line-height: 88rpx;
  828. text-align: center;
  829. &.none{
  830. color: #FFFFFF;
  831. background: $btn-confirm;
  832. }
  833. &.disabled{
  834. color: #999999;
  835. }
  836. }
  837. .item {
  838. width: 156rpx;
  839. height: 60rpx;
  840. font-size:$font-size-28;
  841. line-height: 60rpx;
  842. border-radius:10rpx;
  843. margin-bottom: 20rpx;
  844. text-align: center;
  845. box-sizing: border-box;
  846. border: 1rpx solid #EFEFEF;
  847. checkbox {
  848. display: none;
  849. }
  850. }
  851. .on {
  852. border-color: $color-system;
  853. color:$color-system;
  854. }
  855. }
  856. }
  857. .icon-xiayibu{
  858. width: 88rpx;
  859. height: 88rpx;
  860. position: absolute;
  861. right: 0;
  862. top: 0;
  863. line-height: 88rpx;
  864. text-align: center;
  865. }
  866. &.text-textarea{
  867. background: #FFFFFF;
  868. .textarea{
  869. width: 654rpx;
  870. height: 180rpx;
  871. background: #F7F7F7;
  872. padding: 24rpx;
  873. font-size: $font-size-28;
  874. color: $text-color;
  875. z-index: 1;
  876. border-radius: 14rpx;
  877. }
  878. .textarea.hide{
  879. opacity: 0;
  880. }
  881. .textarea.show{
  882. color: #999999;
  883. }
  884. }
  885. }
  886. .register-picture{
  887. height: 102rpx;
  888. margin: 40rpx 0 0 0;
  889. .label{
  890. float: left;
  891. font-size: $font-size-28;
  892. color: $text-color;
  893. line-height: 102rpx;
  894. width: 150rpx;
  895. text-align: right;
  896. &.zz{
  897. width: 230rpx;
  898. }
  899. }
  900. .upload-picture{
  901. float: left;
  902. height: 100rpx;
  903. .upload-none{
  904. width: 100rpx;
  905. height: 100rpx;
  906. text-align: center;
  907. line-height: 100rpx;
  908. color: #999999;
  909. border: 1px solid #999999;
  910. border-radius: 10rpx;
  911. margin: 0 20rpx;
  912. .iconfont{
  913. font-size: $font-size-28;
  914. }
  915. }
  916. .upload-image{
  917. width: 100rpx;
  918. height: 100rpx;
  919. border-radius: 10rpx;
  920. margin: 0 20rpx;
  921. position: relative;
  922. image{
  923. width: 100rpx;
  924. height: 100rpx;
  925. border-radius: 10rpx;
  926. }
  927. .upload-del{
  928. width: 40rpx;
  929. height: 40rpx;
  930. position: absolute;
  931. top: -20rpx;
  932. right: -20rpx;
  933. line-height: 40rpx;
  934. text-align: center;
  935. .iconfont{
  936. font-size: $font-size-32;
  937. color: #999999;
  938. }
  939. }
  940. }
  941. }
  942. }
  943. .register-input{
  944. width: 654rpx;
  945. height: 40rpx;
  946. padding: 24rpx;
  947. margin: 0 auto;
  948. margin-bottom: 60rpx;
  949. background: #F7F7F7;
  950. border-radius: 14rpx;
  951. .input{
  952. width: 100%;
  953. height: 100%;
  954. background: #F7F7F7;
  955. font-size: $font-size-28;
  956. line-height: 40rpx;
  957. color: #333333;
  958. border-radius: 14rpx;
  959. }
  960. }
  961. .register-fiexd{
  962. width: 100%;
  963. height: auto;
  964. padding: 20rpx 0;
  965. position: fixed;
  966. bottom: 0;
  967. left: 0;
  968. z-index: 99;
  969. background: #FFFFFF;
  970. .register-agree{
  971. display: flex;
  972. flex-direction: column;
  973. align-items: center;
  974. margin: 32rpx 0;
  975. .agree-text{
  976. .checkbox{
  977. float: left;
  978. margin: 4rpx 6rpx 0 0;
  979. color: #999999;
  980. font-size: $font-size-32;
  981. &.icon-gouxuan{
  982. color: $color-system;
  983. }
  984. }
  985. font-size: 20rpx;
  986. line-height: 44rpx;
  987. color: #999999;
  988. text{
  989. color:#0091FF;
  990. }
  991. }
  992. }
  993. }
  994. .register-btn{
  995. width: 702rpx;
  996. height: 88rpx;
  997. border-radius: 14rpx;
  998. font-size: $font-size-28;
  999. line-height: 88rpx;
  1000. color: #FFFFFF;
  1001. margin: 0 auto;
  1002. text-align: center;
  1003. background: $btn-confirm;
  1004. margin-top: 96rpx;
  1005. &.none{
  1006. background: #FFFFFF;
  1007. color: $text-color;
  1008. margin-top: 0;
  1009. }
  1010. &.sub{
  1011. margin-top: 0;
  1012. }
  1013. }
  1014. }
  1015. }
  1016. </style>