information.vue 33 KB

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