register.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752
  1. <template>
  2. <view class="container register" :style="{paddingTop:CustomBar+'px'}">
  3. <cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
  4. <view class="register-main clearfix">
  5. <view class="register-logo">
  6. <image class="logo" src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/logo.png" mode=""></image>
  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" name="input" v-model="params.userName" placeholder="请输入机构联系人姓名" maxlength="6"/>
  12. </view>
  13. </view>
  14. <view class="register-row clearfix">
  15. <view class="register-from">
  16. <view class="label">手机号:</view>
  17. <input class="row-input" type="number" name="input" v-model="params.bindMobile" placeholder="请输入联系人常用手机号" maxlength="11"/>
  18. </view>
  19. </view>
  20. <view class="register-row clearfix">
  21. <view class="register-from">
  22. <view class="label">短信验证码:</view>
  23. <input class="row-input code" type="text" v-model="params.smsCode" placeholder="请输入短信验证码" maxlength="6"/>
  24. <view class="row-btn" :class="[isMobileDisabled ? 'disabled' : '']">
  25. <button class="row-input"
  26. type="button"
  27. @click.stop="getMobileCodeFn"
  28. :disabled="isMobileDisabled">
  29. {{ mobileCodeText }}
  30. </button>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="register-row clearfix">
  35. <view class="register-from">
  36. <view class="label">登录密码:</view>
  37. <input class="row-input" type="password" name="input" v-model="params.password" placeholder="密码必须为8-16位字母数字组合" maxlength="16"/>
  38. </view>
  39. </view>
  40. <view class="register-row clearfix">
  41. <view class="register-from">
  42. <view class="label">确认密码:</view>
  43. <input class="row-input" type="password" name="input" v-model="params.passWordConfirm" placeholder="请确认密码" maxlength="16"/>
  44. </view>
  45. </view>
  46. <view class="register-main clearfix">
  47. <view class="register-agree">
  48. <view class="agree-text" @tap.stop="agreeCheck()">
  49. <button class="checkbox iconfont" :class="[isCheck?'icon-gouxuan':'icon-weigouxuan']"></button>
  50. 我已阅读并同意
  51. <text @click.stop="this.$api.navigateTo('/pages/service/organagree')">《机构协议》</text>
  52. <text @click.stop="this.$api.navigateTo('/pages/service/useragree')">《用户协议》</text>及
  53. <text @click.stop="this.$api.navigateTo('/pages/service/privacyagree')">《隐私权政策》</text>
  54. </view>
  55. </view>
  56. <view class="register-row ">
  57. <view class="register-btn sub" @click.stop="registerStepsfirst">注册</view>
  58. </view>
  59. <view class="register-row login">
  60. <view class="row-login" @click.stop="this.$api.navigateTo('/pages/login/login')">账号登录</view>
  61. <view class="row-logincode" @click.stop="this.$api.navigateTo('/pages/login/logincode')">邀请码登录</view>
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. </template>
  67. <script>
  68. import { mapState,mapMutations } from 'vuex';
  69. import authorize from '@/common/config/authorize.js'
  70. import wxLogin from "@/common/config/wxLogin.js"
  71. import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
  72. import { beautyList,mentuzCampNullList,medicaCampNullList } from '@/common/json/data.json.js' //本地数据
  73. import { uploadFileImage } from "@/services/public.js"
  74. export default{
  75. components:{
  76. mpvueCityPicker
  77. },
  78. data() {
  79. return{
  80. nvabarData: {//顶部自定义导航
  81. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  82. showSearch: 0,
  83. title: '机构注册', // 导航栏 中间的标题
  84. haveBack:true,
  85. textLeft:this.$store.state.isIphone
  86. },
  87. CustomBar:this.CustomBar,// 顶部导航栏高度
  88. isMobileDisabled: false, //手机验证码按钮控制
  89. mobilCount: '', //倒计时
  90. mobileCodeText: '获取验证码',
  91. mobilTime: null,
  92. params:{
  93. userName:'',
  94. bindMobile:'',
  95. isAgreed:0,
  96. password:'',
  97. passWordConfirm:'',
  98. smsCode:'',
  99. avatarUrl:'',
  100. nickName:'',
  101. source:1,
  102. unionId:''
  103. },
  104. imageCode:'', //图形验证码
  105. imageCodeUrl:'', //图形验证码图片
  106. imageCodetoken:'', //图形验证校验
  107. isCheck:false, //是否勾选协议
  108. userID:'', //机构userID
  109. clubID:'', //机构ID
  110. }
  111. },
  112. onLoad(option) {
  113. },
  114. computed:{
  115. ...mapState(['isWxAuthorize'])
  116. },
  117. methods:{
  118. ...mapMutations(['login']),
  119. hanldNavigateBack(){
  120. this.$util.modal('','注册尚未完成,确定放弃注册吗?','确定','取消',true,() =>{
  121. uni.navigateBack({
  122. delta: 1
  123. });
  124. })
  125. },
  126. registerStepsfirst(){
  127. const userInfo = uni.getStorageSync('wechatUserInfo')
  128. this.params.nickName = userInfo.nickName
  129. this.params.avatarUrl = userInfo.avatarUrl
  130. if( this.params.userName == ''){
  131. this.$util.msg('请输入联系人名称',2000);
  132. return
  133. }
  134. if( this.params.bindMobile == ''){
  135. this.$util.msg('请输入手机号',2000);
  136. return
  137. }
  138. if(!this.$reg.isMobile(this.params.bindMobile)){
  139. this.$util.msg('手机格式不正确',2000);
  140. return
  141. }
  142. if( this.params.smsCode == ''){
  143. this.$util.msg('请输入手机验证码',2000);
  144. return
  145. }
  146. if(!this.$reg.isMobileCode(this.params.smsCode)){
  147. this.$util.msg('验证码格式不正确',2000);
  148. return
  149. }
  150. if( this.params.password == ''){
  151. this.$util.msg('请输入密码',2000);
  152. return
  153. }
  154. if(!this.$reg.checkPwd(this.params.password)){
  155. this.$util.msg('密码必须为8-16位字母数字的组合',2000);
  156. return
  157. }
  158. if( this.params.passWordConfirm == ''){
  159. this.$util.msg('请再次确认密码',2000);
  160. return
  161. }
  162. if( this.params.passWordConfirm !== this.params.password){
  163. this.$util.msg('两次输入的密码不一致',2000);
  164. return
  165. }
  166. if(this.params.isAgreed == 0){
  167. this.$util.msg('请勾选同意协议',2000);
  168. return
  169. }
  170. this.UserService.UserRegisterClub(this.params).then(response =>{
  171. wxLogin.wxLoginAuthorize()
  172. setTimeout(() =>{
  173. this.$api.switchTabTo('/pages/tabBar/user/user')
  174. },2000)
  175. }).catch(error =>{
  176. this.$util.msg(error.msg,2000);
  177. })
  178. },
  179. storeUpdataeStatus(data){
  180. uni.setStorageSync('token',data.token)
  181. this.$store.commit('updateStatus',data)
  182. this.login(data);
  183. },
  184. getMobileCodeFn(){
  185. if( this.params.bindMobile == ''){
  186. this.$util.msg('请输入手机号',2000);
  187. return
  188. }
  189. if(!this.$reg.isMobile(this.params.bindMobile)){
  190. this.$util.msg('请输入正确的手机号',2000);
  191. return
  192. }
  193. let params = {
  194. mobile:this.params.bindMobile,
  195. activateCodeType:2,
  196. platformType:2
  197. }
  198. this.isMobileDisabled = true;
  199. this.PublicService.GetRegisterMobileCode(params).then(response =>{
  200. this.$util.msg('验证短信已发送',2000);
  201. const TIME_COUNT = 60;
  202. if (!this.mobilTime) {
  203. this.mobilCount = TIME_COUNT;
  204. this.isMobileDisabled = true;
  205. this.mobilTime = setInterval(() => {
  206. if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
  207. this.mobilCount--
  208. this.mobileCodeText = this.mobilCount +'s重新发送'
  209. } else {
  210. this.isMobileDisabled = false;
  211. clearInterval(this.mobilTime)
  212. this.mobilTime = null
  213. this.mobileCodeText = '获取验证码'
  214. }
  215. },1000)
  216. }
  217. }).catch( error =>{
  218. this.$util.msg(error.msg,2000);
  219. this.isMobileDisabled = false;
  220. })
  221. },
  222. agreeCheck() {
  223. this.isCheck = !this.isCheck
  224. if(this.isCheck){
  225. this.params.isAgreed = 1
  226. }else{
  227. this.params.isAgreed = 0
  228. }
  229. },
  230. async InitAuthorize(){ //是否已授权 0:为取消授权 1:为已授权 2:为未操作
  231. if(this.isWxAuthorize){
  232. wxLogin.wxLoginQuick()
  233. }else{
  234. console.log(new Date +'用户未授权微信信息')
  235. this.$api.navigateTo('/pages/authorization/authorization?type=0')
  236. }
  237. }
  238. },
  239. onShow() {
  240. this.$api.getStorage().then((resolve) =>{
  241. this.params.unionId = resolve.unionId
  242. })
  243. this.InitAuthorize()
  244. }
  245. }
  246. </script>
  247. <style lang="scss">
  248. .register{
  249. width: 100%;
  250. height: 100%;
  251. background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/%E8%83%8C%E6%99%AF.png) no-repeat left bottom;
  252. box-sizing: border-box;
  253. background-size: contain;
  254. .register-main{
  255. width: 100%;
  256. height: auto;
  257. position: relative;
  258. .register-consult{
  259. width: 110rpx;
  260. height: 68rpx;
  261. background:linear-gradient(223deg,rgba(225,86,21,0.6) 0%,rgba(225,86,10,0.3) 100%);
  262. border-radius: 34rpx 0 0 34rpx;
  263. position: absolute;
  264. right: 0;
  265. bottom: 120rpx;
  266. text-align: left;
  267. line-height: 68rpx;
  268. padding-left: 20rpx;
  269. .icon-kefunv{
  270. font-size: 48rpx;
  271. color: #31313B;
  272. float: left;
  273. }
  274. .text{
  275. font-size: $font-size-24;
  276. display: block;
  277. float: left;
  278. width: 60rpx;
  279. line-height: 30rpx;
  280. color: #FFFFFF;
  281. margin-top: 6rpx;
  282. }
  283. }
  284. .register-agree{
  285. display: flex;
  286. flex-direction: column;
  287. align-items: center;
  288. margin: 100rpx 0 20rpx 0;
  289. .agree-text{
  290. .checkbox{
  291. float: left;
  292. margin: 4rpx 6rpx 0 0;
  293. color: #999999;
  294. font-size: $font-size-34;
  295. &.icon-gouxuan{
  296. color: $color-system;
  297. }
  298. }
  299. font-size: $font-size-22;
  300. line-height: 44rpx;
  301. color: #999999;
  302. text{
  303. color:#1890f9;
  304. }
  305. }
  306. }
  307. .register-logo{
  308. width: 100%;
  309. display: flex;
  310. flex-direction: column;
  311. align-items: center;
  312. height: 189rpx;
  313. padding:60rpx 0 40rpx 0;
  314. .logo{
  315. width:467rpx;
  316. height: 189rpx;
  317. display: block;
  318. }
  319. }
  320. &.detailed{
  321. padding-bottom: 330rpx;
  322. }
  323. .register-row{
  324. width: 100%;
  325. height: auto;
  326. padding: 0 75rpx;
  327. margin-bottom: 30rpx;
  328. box-sizing: border-box;
  329. &.none{
  330. margin-bottom: 0;
  331. }
  332. &.login{
  333. display: flex;
  334. }
  335. .register-text{
  336. line-height: 44rpx;
  337. margin-top: 100rpx;
  338. font-size: $font-size-24;
  339. color: #999999;
  340. text-align: justify;
  341. .txt{
  342. margin-right: 15rpx;
  343. }
  344. }
  345. .register-title{
  346. line-height: 44rpx;
  347. font-size: $font-size-24;
  348. color: $text-color;
  349. text-align: left;
  350. &.first{
  351. margin-top: 20rpx;
  352. }
  353. }
  354. .register-tip{
  355. line-height: 64rpx;
  356. font-size: $font-size-24;
  357. color: #CECECE;
  358. text-align: left;
  359. }
  360. .register-from{
  361. width: 100%;
  362. height: 80rpx;
  363. background: #FFFFFF;
  364. position: relative;
  365. border-bottom: 1px solid #e1e1e1;
  366. .label{
  367. text-align: left;
  368. font-size: $font-size-28;
  369. color:#666666;
  370. line-height: 88rpx;
  371. float: left;
  372. }
  373. .row-input{
  374. width: 440rpx;
  375. padding-left:10rpx;
  376. font-size: $font-size-28;
  377. color: $text-color;
  378. line-height: 80rpx;
  379. float: left;
  380. height: 80rpx;
  381. &.none{
  382. color: #999999;
  383. }
  384. &.picker{
  385. text-align: left;
  386. color: #333333;
  387. }
  388. &.keshi{
  389. width: 550rpx;
  390. }
  391. &.code{
  392. width: 264rpx;
  393. }
  394. }
  395. &.img-btn{
  396. width: 220rpx;
  397. height: 80rpx;
  398. padding: 0;
  399. float: left;
  400. background: #FFFFFF;
  401. display: block;
  402. .vscodeimg{
  403. width: 150rpx;
  404. height: 80rpx;
  405. float: left;
  406. display: flex;
  407. flex-direction: column;
  408. align-items: center;
  409. border-radius: 14rpx;
  410. image{
  411. width: 150rpx;
  412. height: 80rpx;
  413. border-radius: 14rpx;
  414. }
  415. }
  416. .vscod-refresh{
  417. width: 70rpx;
  418. float: right;
  419. text-align: right;
  420. display: flex;
  421. flex-direction: column;
  422. align-items: center;
  423. line-height: 44rpx;
  424. .icon-shuaxin{
  425. font-size: 48rpx;
  426. color: #333333;
  427. }
  428. .ref-text{
  429. font-size: 24rpx;
  430. color: #333333;
  431. }
  432. }
  433. }
  434. &.imgcode{
  435. width: 410rpx;
  436. float: left;
  437. margin-right: 20rpx;
  438. .row-input{
  439. width: 230rpx;
  440. }
  441. }
  442. .row-btn{
  443. width: 180rpx;
  444. height:64rpx;
  445. float: left;
  446. background: $btn-confirm;
  447. padding: 0;
  448. border-radius: 32rpx;
  449. .row-input{
  450. width: 180rpx;
  451. height: 64rpx;
  452. line-height: 64rpx;
  453. padding: 0;
  454. color: #FFFFFF;
  455. background: $btn-confirm;
  456. text-align: center;
  457. border-radius: 32rpx;
  458. &.other{
  459. width: 180rpx;
  460. background: #F7F7F7;
  461. margin-right: 20rpx;
  462. }
  463. &.none{
  464. background: #F7F7F7;
  465. }
  466. }
  467. &.disabled{
  468. background: #F7F7F7;
  469. .row-input{
  470. background: #F7F7F7;
  471. color: #999999;
  472. font-size: 24rpx;
  473. }
  474. }
  475. }
  476. &.picker{
  477. padding: 0 24rpx;
  478. width: 654rpx;
  479. height: 88rpx;
  480. line-height: 88rpx;
  481. .label{
  482. line-height: 88rpx;
  483. }
  484. .row-input{
  485. width: 470rpx;
  486. height: 88rpx;
  487. line-height: 88rpx;
  488. padding-left: 30rpx;
  489. }
  490. }
  491. &.radio{
  492. padding: 0 24rpx;
  493. width: 654rpx;
  494. height: 288rpx;
  495. .row-input{
  496. width: 100%;
  497. height: 88rpx;
  498. line-height: 88rpx;
  499. padding-left: 0;
  500. }
  501. .row-radio{
  502. float: left;
  503. transform: scale(0.8);
  504. }
  505. .row-text{
  506. width: 100rpx;
  507. text-align: center;
  508. float: left;
  509. }
  510. }
  511. &.group{
  512. padding: 0 24rpx;
  513. width: 654rpx;
  514. height: auto;
  515. background: #FFFFFF;
  516. margin-top: 30rpx;
  517. .label{
  518. line-height: 76rpx;
  519. }
  520. .row-input{
  521. width: 100%;
  522. height: 88rpx;
  523. line-height: 88rpx;
  524. padding-left: 0;
  525. }
  526. .row-radio{
  527. float: left;
  528. }
  529. .row-text{
  530. width: 100rpx;
  531. text-align: center;
  532. float: left;
  533. }
  534. }
  535. &.btn{
  536. margin-top: 0;
  537. }
  538. .content-class {
  539. margin: 20rpx auto;
  540. display: flex;
  541. flex-flow: row wrap;
  542. justify-content: space-between;
  543. align-items: center;
  544. &.btn{
  545. margin: 0 auto;
  546. margin-left: 116rpx;
  547. }
  548. .row-input{
  549. display: flex;
  550. width: 220rpx;
  551. height: 40rpx;
  552. padding: 24rpx;
  553. text-align: left;
  554. border-radius: 10rpx;
  555. font-size: $font-size-28;
  556. color: $text-color;
  557. }
  558. .confirm-btn{
  559. width: 200rpx;
  560. height: 88rpx;
  561. border-radius: 10rpx;
  562. line-height: 88rpx;
  563. text-align: center;
  564. &.other{
  565. width: 213rpx;
  566. }
  567. &.none{
  568. color: #FFFFFF;
  569. background: $btn-confirm;
  570. }
  571. &.disabled{
  572. color: #999999;
  573. }
  574. }
  575. .item {
  576. width: 155rpx;
  577. height: 60rpx;
  578. font-size:$font-size-28;
  579. line-height: 60rpx;
  580. border-radius:10rpx;
  581. margin: 10rpx;
  582. text-align: center;
  583. box-sizing: border-box;
  584. border: 1rpx solid #EFEFEF;
  585. float: left;
  586. checkbox {
  587. display: none;
  588. }
  589. }
  590. .on {
  591. border-color: $color-system;
  592. color:$color-system;
  593. }
  594. }
  595. }
  596. .row-login{
  597. flex: 1;
  598. font-size: $font-size-28;
  599. color: $text-color;
  600. text-align: left;
  601. }
  602. .row-logincode{
  603. flex: 1;
  604. font-size: $font-size-28;
  605. color: $text-color;
  606. text-align: right;
  607. }
  608. .icon-xiayibu{
  609. width: 88rpx;
  610. height: 88rpx;
  611. position: absolute;
  612. right: 0;
  613. top: 0;
  614. line-height: 88rpx;
  615. text-align: center;
  616. }
  617. &.text-textarea{
  618. background: #FFFFFF;
  619. .textarea{
  620. width: 654rpx;
  621. height: 180rpx;
  622. background: #F7F7F7;
  623. padding: 24rpx;
  624. font-size: $font-size-28;
  625. color: $text-color;
  626. z-index: 1;
  627. border-radius: 14rpx;
  628. }
  629. .textarea.hide{
  630. opacity: 0;
  631. }
  632. .textarea.show{
  633. color: #999999;
  634. }
  635. }
  636. }
  637. .register-picture{
  638. height: 102rpx;
  639. margin: 30rpx 0;
  640. width: 42%;
  641. float: left;
  642. &.zz{
  643. width: 100%;
  644. }
  645. .label{
  646. float: left;
  647. font-size: $font-size-28;
  648. color: $text-color;
  649. line-height: 102rpx;
  650. width: 150rpx;
  651. text-align: right;
  652. &.zz{
  653. width: 230rpx;
  654. }
  655. }
  656. .upload-picture{
  657. float: left;
  658. height: 100rpx;
  659. .upload-none{
  660. width: 100rpx;
  661. height: 100rpx;
  662. text-align: center;
  663. line-height: 100rpx;
  664. color: #999999;
  665. border: 1px solid #999999;
  666. border-radius: 10rpx;
  667. margin: 0 20rpx;
  668. .iconfont{
  669. font-size: $font-size-28;
  670. }
  671. }
  672. .upload-image{
  673. width: 100rpx;
  674. height: 100rpx;
  675. border-radius: 10rpx;
  676. margin: 0 20rpx;
  677. position: relative;
  678. image{
  679. width: 100rpx;
  680. height: 100rpx;
  681. border-radius: 10rpx;
  682. }
  683. .upload-del{
  684. width: 40rpx;
  685. height: 40rpx;
  686. position: absolute;
  687. top: -20rpx;
  688. right: -20rpx;
  689. line-height: 40rpx;
  690. text-align: center;
  691. .iconfont{
  692. font-size: $font-size-32;
  693. color: #999999;
  694. }
  695. }
  696. }
  697. }
  698. }
  699. .register-input{
  700. width: 654rpx;
  701. height: 40rpx;
  702. padding: 24rpx;
  703. margin: 0 auto;
  704. margin-bottom: 60rpx;
  705. background: #F7F7F7;
  706. border-radius: 14rpx;
  707. .input{
  708. width: 100%;
  709. height: 100%;
  710. background: #F7F7F7;
  711. font-size: $font-size-28;
  712. line-height: 40rpx;
  713. color: #333333;
  714. border-radius: 14rpx;
  715. }
  716. }
  717. .register-fiexd{
  718. width: 100%;
  719. height: auto;
  720. position: fixed;
  721. bottom: 0;
  722. left: 0;
  723. z-index: 999;
  724. background: #FFFFFF;
  725. }
  726. .register-btn{
  727. width: 100%;
  728. height: 88rpx;
  729. border-radius: 44rpx;
  730. font-size: $font-size-28;
  731. line-height: 88rpx;
  732. color: #FFFFFF;
  733. margin: 0 auto;
  734. text-align: center;
  735. background: $btn-confirm;
  736. margin-top: 96rpx;
  737. &.none{
  738. border: 1px solid $color-system;
  739. background: #FFFFFF;
  740. color:$color-system;
  741. margin-top: 0;
  742. }
  743. &.sub{
  744. margin-top: 0;
  745. }
  746. }
  747. }
  748. }
  749. </style>