register.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756
  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. isCheckCaptcha:1,
  196. activateCodeType:2,
  197. platformType:2
  198. }
  199. this.isMobileDisabled = true;
  200. this.PublicService.GetRegisterMobileCode(params).then(response =>{
  201. this.$util.msg('验证短信已发送',2000);
  202. const TIME_COUNT = 60;
  203. if (!this.mobilTime) {
  204. this.mobilCount = TIME_COUNT;
  205. this.isMobileDisabled = true;
  206. this.mobilTime = setInterval(() => {
  207. if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
  208. this.mobilCount--
  209. this.mobileCodeText = this.mobilCount +'s重新发送'
  210. } else {
  211. this.isMobileDisabled = false;
  212. clearInterval(this.mobilTime)
  213. this.mobilTime = null
  214. this.mobileCodeText = '获取验证码'
  215. }
  216. },1000)
  217. }
  218. }).catch( error =>{
  219. this.$util.msg(error.msg,2000);
  220. this.isMobileDisabled = false;
  221. })
  222. },
  223. agreeCheck() {
  224. this.isCheck = !this.isCheck
  225. if(this.isCheck){
  226. this.params.isAgreed = 1
  227. }else{
  228. this.params.isAgreed = 0
  229. }
  230. },
  231. async InitAuthorize(){ //是否已授权 0:为取消授权 1:为已授权 2:为未操作
  232. authorize.getSetting().then(res =>{
  233. console.log('用户是否授权过',res)
  234. if(res == 1){
  235. wxLogin.wxLoginQuick()
  236. }else{
  237. console.log(new Date +'用户未授权微信信息')
  238. this.$api.navigateTo('/pages/authorization/authorization?type=0')
  239. }
  240. })
  241. }
  242. },
  243. onShow() {
  244. this.$api.getStorage().then((resolve) =>{
  245. this.params.unionId = resolve.unionId
  246. })
  247. this.InitAuthorize()
  248. }
  249. }
  250. </script>
  251. <style lang="scss">
  252. .register{
  253. width: 100%;
  254. height: 100%;
  255. background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/%E8%83%8C%E6%99%AF.png) no-repeat left bottom;
  256. box-sizing: border-box;
  257. background-size: contain;
  258. .register-main{
  259. width: 100%;
  260. height: auto;
  261. position: relative;
  262. .register-consult{
  263. width: 110rpx;
  264. height: 68rpx;
  265. background:linear-gradient(223deg,rgba(225,86,21,0.6) 0%,rgba(225,86,10,0.3) 100%);
  266. border-radius: 34rpx 0 0 34rpx;
  267. position: absolute;
  268. right: 0;
  269. bottom: 120rpx;
  270. text-align: left;
  271. line-height: 68rpx;
  272. padding-left: 20rpx;
  273. .icon-kefunv{
  274. font-size: 48rpx;
  275. color: #31313B;
  276. float: left;
  277. }
  278. .text{
  279. font-size: $font-size-24;
  280. display: block;
  281. float: left;
  282. width: 60rpx;
  283. line-height: 30rpx;
  284. color: #FFFFFF;
  285. margin-top: 6rpx;
  286. }
  287. }
  288. .register-agree{
  289. display: flex;
  290. flex-direction: column;
  291. align-items: center;
  292. margin: 100rpx 0 20rpx 0;
  293. .agree-text{
  294. .checkbox{
  295. float: left;
  296. margin: 4rpx 6rpx 0 0;
  297. color: #999999;
  298. font-size: $font-size-34;
  299. &.icon-gouxuan{
  300. color: $color-system;
  301. }
  302. }
  303. font-size: $font-size-22;
  304. line-height: 44rpx;
  305. color: #999999;
  306. text{
  307. color:#1890f9;
  308. }
  309. }
  310. }
  311. .register-logo{
  312. width: 100%;
  313. display: flex;
  314. flex-direction: column;
  315. align-items: center;
  316. height: 189rpx;
  317. padding:60rpx 0 40rpx 0;
  318. .logo{
  319. width:467rpx;
  320. height: 189rpx;
  321. display: block;
  322. }
  323. }
  324. &.detailed{
  325. padding-bottom: 330rpx;
  326. }
  327. .register-row{
  328. width: 100%;
  329. height: auto;
  330. padding: 0 75rpx;
  331. margin-bottom: 30rpx;
  332. box-sizing: border-box;
  333. &.none{
  334. margin-bottom: 0;
  335. }
  336. &.login{
  337. display: flex;
  338. }
  339. .register-text{
  340. line-height: 44rpx;
  341. margin-top: 100rpx;
  342. font-size: $font-size-24;
  343. color: #999999;
  344. text-align: justify;
  345. .txt{
  346. margin-right: 15rpx;
  347. }
  348. }
  349. .register-title{
  350. line-height: 44rpx;
  351. font-size: $font-size-24;
  352. color: $text-color;
  353. text-align: left;
  354. &.first{
  355. margin-top: 20rpx;
  356. }
  357. }
  358. .register-tip{
  359. line-height: 64rpx;
  360. font-size: $font-size-24;
  361. color: #CECECE;
  362. text-align: left;
  363. }
  364. .register-from{
  365. width: 100%;
  366. height: 80rpx;
  367. background: #FFFFFF;
  368. position: relative;
  369. border-bottom: 1px solid #e1e1e1;
  370. .label{
  371. text-align: left;
  372. font-size: $font-size-28;
  373. color:#666666;
  374. line-height: 88rpx;
  375. float: left;
  376. }
  377. .row-input{
  378. width: 440rpx;
  379. padding-left:10rpx;
  380. font-size: $font-size-28;
  381. color: $text-color;
  382. line-height: 80rpx;
  383. float: left;
  384. height: 80rpx;
  385. &.none{
  386. color: #999999;
  387. }
  388. &.picker{
  389. text-align: left;
  390. color: #333333;
  391. }
  392. &.keshi{
  393. width: 550rpx;
  394. }
  395. &.code{
  396. width: 264rpx;
  397. }
  398. }
  399. &.img-btn{
  400. width: 220rpx;
  401. height: 80rpx;
  402. padding: 0;
  403. float: left;
  404. background: #FFFFFF;
  405. display: block;
  406. .vscodeimg{
  407. width: 150rpx;
  408. height: 80rpx;
  409. float: left;
  410. display: flex;
  411. flex-direction: column;
  412. align-items: center;
  413. border-radius: 14rpx;
  414. image{
  415. width: 150rpx;
  416. height: 80rpx;
  417. border-radius: 14rpx;
  418. }
  419. }
  420. .vscod-refresh{
  421. width: 70rpx;
  422. float: right;
  423. text-align: right;
  424. display: flex;
  425. flex-direction: column;
  426. align-items: center;
  427. line-height: 44rpx;
  428. .icon-shuaxin{
  429. font-size: 48rpx;
  430. color: #333333;
  431. }
  432. .ref-text{
  433. font-size: 24rpx;
  434. color: #333333;
  435. }
  436. }
  437. }
  438. &.imgcode{
  439. width: 410rpx;
  440. float: left;
  441. margin-right: 20rpx;
  442. .row-input{
  443. width: 230rpx;
  444. }
  445. }
  446. .row-btn{
  447. width: 180rpx;
  448. height:64rpx;
  449. float: left;
  450. background: $btn-confirm;
  451. padding: 0;
  452. border-radius: 32rpx;
  453. .row-input{
  454. width: 180rpx;
  455. height: 64rpx;
  456. line-height: 64rpx;
  457. padding: 0;
  458. color: #FFFFFF;
  459. background: $btn-confirm;
  460. text-align: center;
  461. border-radius: 32rpx;
  462. &.other{
  463. width: 180rpx;
  464. background: #F7F7F7;
  465. margin-right: 20rpx;
  466. }
  467. &.none{
  468. background: #F7F7F7;
  469. }
  470. }
  471. &.disabled{
  472. background: #F7F7F7;
  473. .row-input{
  474. background: #F7F7F7;
  475. color: #999999;
  476. font-size: 24rpx;
  477. }
  478. }
  479. }
  480. &.picker{
  481. padding: 0 24rpx;
  482. width: 654rpx;
  483. height: 88rpx;
  484. line-height: 88rpx;
  485. .label{
  486. line-height: 88rpx;
  487. }
  488. .row-input{
  489. width: 470rpx;
  490. height: 88rpx;
  491. line-height: 88rpx;
  492. padding-left: 30rpx;
  493. }
  494. }
  495. &.radio{
  496. padding: 0 24rpx;
  497. width: 654rpx;
  498. height: 288rpx;
  499. .row-input{
  500. width: 100%;
  501. height: 88rpx;
  502. line-height: 88rpx;
  503. padding-left: 0;
  504. }
  505. .row-radio{
  506. float: left;
  507. transform: scale(0.8);
  508. }
  509. .row-text{
  510. width: 100rpx;
  511. text-align: center;
  512. float: left;
  513. }
  514. }
  515. &.group{
  516. padding: 0 24rpx;
  517. width: 654rpx;
  518. height: auto;
  519. background: #FFFFFF;
  520. margin-top: 30rpx;
  521. .label{
  522. line-height: 76rpx;
  523. }
  524. .row-input{
  525. width: 100%;
  526. height: 88rpx;
  527. line-height: 88rpx;
  528. padding-left: 0;
  529. }
  530. .row-radio{
  531. float: left;
  532. }
  533. .row-text{
  534. width: 100rpx;
  535. text-align: center;
  536. float: left;
  537. }
  538. }
  539. &.btn{
  540. margin-top: 0;
  541. }
  542. .content-class {
  543. margin: 20rpx auto;
  544. display: flex;
  545. flex-flow: row wrap;
  546. justify-content: space-between;
  547. align-items: center;
  548. &.btn{
  549. margin: 0 auto;
  550. margin-left: 116rpx;
  551. }
  552. .row-input{
  553. display: flex;
  554. width: 220rpx;
  555. height: 40rpx;
  556. padding: 24rpx;
  557. text-align: left;
  558. border-radius: 10rpx;
  559. font-size: $font-size-28;
  560. color: $text-color;
  561. }
  562. .confirm-btn{
  563. width: 200rpx;
  564. height: 88rpx;
  565. border-radius: 10rpx;
  566. line-height: 88rpx;
  567. text-align: center;
  568. &.other{
  569. width: 213rpx;
  570. }
  571. &.none{
  572. color: #FFFFFF;
  573. background: $btn-confirm;
  574. }
  575. &.disabled{
  576. color: #999999;
  577. }
  578. }
  579. .item {
  580. width: 155rpx;
  581. height: 60rpx;
  582. font-size:$font-size-28;
  583. line-height: 60rpx;
  584. border-radius:10rpx;
  585. margin: 10rpx;
  586. text-align: center;
  587. box-sizing: border-box;
  588. border: 1rpx solid #EFEFEF;
  589. float: left;
  590. checkbox {
  591. display: none;
  592. }
  593. }
  594. .on {
  595. border-color: $color-system;
  596. color:$color-system;
  597. }
  598. }
  599. }
  600. .row-login{
  601. flex: 1;
  602. font-size: $font-size-28;
  603. color: $text-color;
  604. text-align: left;
  605. }
  606. .row-logincode{
  607. flex: 1;
  608. font-size: $font-size-28;
  609. color: $text-color;
  610. text-align: right;
  611. }
  612. .icon-xiayibu{
  613. width: 88rpx;
  614. height: 88rpx;
  615. position: absolute;
  616. right: 0;
  617. top: 0;
  618. line-height: 88rpx;
  619. text-align: center;
  620. }
  621. &.text-textarea{
  622. background: #FFFFFF;
  623. .textarea{
  624. width: 654rpx;
  625. height: 180rpx;
  626. background: #F7F7F7;
  627. padding: 24rpx;
  628. font-size: $font-size-28;
  629. color: $text-color;
  630. z-index: 1;
  631. border-radius: 14rpx;
  632. }
  633. .textarea.hide{
  634. opacity: 0;
  635. }
  636. .textarea.show{
  637. color: #999999;
  638. }
  639. }
  640. }
  641. .register-picture{
  642. height: 102rpx;
  643. margin: 30rpx 0;
  644. width: 42%;
  645. float: left;
  646. &.zz{
  647. width: 100%;
  648. }
  649. .label{
  650. float: left;
  651. font-size: $font-size-28;
  652. color: $text-color;
  653. line-height: 102rpx;
  654. width: 150rpx;
  655. text-align: right;
  656. &.zz{
  657. width: 230rpx;
  658. }
  659. }
  660. .upload-picture{
  661. float: left;
  662. height: 100rpx;
  663. .upload-none{
  664. width: 100rpx;
  665. height: 100rpx;
  666. text-align: center;
  667. line-height: 100rpx;
  668. color: #999999;
  669. border: 1px solid #999999;
  670. border-radius: 10rpx;
  671. margin: 0 20rpx;
  672. .iconfont{
  673. font-size: $font-size-28;
  674. }
  675. }
  676. .upload-image{
  677. width: 100rpx;
  678. height: 100rpx;
  679. border-radius: 10rpx;
  680. margin: 0 20rpx;
  681. position: relative;
  682. image{
  683. width: 100rpx;
  684. height: 100rpx;
  685. border-radius: 10rpx;
  686. }
  687. .upload-del{
  688. width: 40rpx;
  689. height: 40rpx;
  690. position: absolute;
  691. top: -20rpx;
  692. right: -20rpx;
  693. line-height: 40rpx;
  694. text-align: center;
  695. .iconfont{
  696. font-size: $font-size-32;
  697. color: #999999;
  698. }
  699. }
  700. }
  701. }
  702. }
  703. .register-input{
  704. width: 654rpx;
  705. height: 40rpx;
  706. padding: 24rpx;
  707. margin: 0 auto;
  708. margin-bottom: 60rpx;
  709. background: #F7F7F7;
  710. border-radius: 14rpx;
  711. .input{
  712. width: 100%;
  713. height: 100%;
  714. background: #F7F7F7;
  715. font-size: $font-size-28;
  716. line-height: 40rpx;
  717. color: #333333;
  718. border-radius: 14rpx;
  719. }
  720. }
  721. .register-fiexd{
  722. width: 100%;
  723. height: auto;
  724. position: fixed;
  725. bottom: 0;
  726. left: 0;
  727. z-index: 999;
  728. background: #FFFFFF;
  729. }
  730. .register-btn{
  731. width: 100%;
  732. height: 88rpx;
  733. border-radius: 44rpx;
  734. font-size: $font-size-28;
  735. line-height: 88rpx;
  736. color: #FFFFFF;
  737. margin: 0 auto;
  738. text-align: center;
  739. background: $btn-confirm;
  740. margin-top: 96rpx;
  741. &.none{
  742. border: 1px solid $color-system;
  743. background: #FFFFFF;
  744. color:$color-system;
  745. margin-top: 0;
  746. }
  747. &.sub{
  748. margin-top: 0;
  749. }
  750. }
  751. }
  752. }
  753. </style>