bindwechat.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  1. <template>
  2. <view class="container login">
  3. <view class="login-main">
  4. <text class="logo-text">您的微信尚未绑定机构账号,填写以下资料进行绑定后,您能通过微信快速登录。</text>
  5. </view>
  6. <view class="login-form clearfix">
  7. <view class="login-input">
  8. <input type="text"
  9. v-model="bindLinkName"
  10. maxlength="30"
  11. class="input"
  12. placeholder="请输入姓名"
  13. />
  14. </view>
  15. </view>
  16. <view class="login-form clearfix">
  17. <view class="login-input">
  18. <input type="number"
  19. v-model="bindLinkPhone"
  20. maxlength="11"
  21. class="input"
  22. placeholder="请输入手机号"
  23. />
  24. </view>
  25. </view>
  26. <view class="login-form clearfix">
  27. <view class="login-input code">
  28. <input type="text"
  29. v-model="imageCode"
  30. maxlength="4"
  31. class="input"
  32. placeholder="请输入右侧图形验证码"
  33. />
  34. </view>
  35. <view class="login-input img-btn">
  36. <view class="vscodeimg">
  37. <image :src="imageCodeUrl" mode=""></image>
  38. </view>
  39. <view class="vscod-refresh" @click.stop="getVerificationCode">
  40. <text class="iconfont icon-shuaxin"></text>
  41. <text class="ref-text">刷新</text>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="login-form clearfix">
  46. <view class="login-input code">
  47. <input type="number"
  48. v-model="mobildeCode"
  49. maxlength="6"
  50. class="input"
  51. placeholder="请输入短信验证码"
  52. />
  53. </view>
  54. <view class="login-input btn" :class="[isMobileDisabled ? 'disabled' : '']" >
  55. <button type="button"
  56. @click.stop="getMobileCodeFn"
  57. :disabled="isMobileDisabled"
  58. class="input">
  59. {{ mobileCodeText }}
  60. </button>
  61. </view>
  62. </view>
  63. <view class="login-form clearfix">
  64. <view class="login-btn" @click="bindWechatInfo">绑定并登录</view>
  65. </view>
  66. </view>
  67. </template>
  68. <script>
  69. import { mapState,mapMutations } from 'vuex'
  70. import authorize from '@/common/config/authorize.js'
  71. import wxLogin from "@/common/config/wxLogin.js"
  72. import { bindingWechat } from "@/api/use.js"
  73. import { getImageCode, getbindWechatCode } from "@/api/utils.js"
  74. export default{
  75. data() {
  76. return{
  77. userID:'',
  78. bindMobile:'',
  79. bindLinkName:'', //用户姓名
  80. bindLinkPhone:'', //用户手机号
  81. mobildeCode:'', //手机验证码
  82. imageCode:'', //图形验证码
  83. imageCodeUrl:'', //图形验证码地址
  84. imageCodetoken:'', //图形校验token
  85. isMobileDisabled:false, //获取手机短信按钮
  86. count: '', //倒计时
  87. mobileCodeText: '获取验证码',
  88. codeTime: null,
  89. }
  90. },
  91. onLoad(option) {
  92. this.getVerificationCode()
  93. },
  94. methods:{
  95. ...mapMutations(['login']),
  96. bindWechatInfo(){
  97. if( this.bindLinkName == ''){
  98. this.$util.msg('请输入姓名',2000)
  99. return
  100. }
  101. if( this.bindLinkPhone == ''){
  102. this.$util.msg('请输入手机号',2000)
  103. return
  104. }
  105. if(!this.$reg.isMobile(this.bindLinkPhone)){
  106. this.$util.msg('请输入正确的手机号',2000)
  107. return
  108. }
  109. if( this.mobildeCode == ''){
  110. this.$util.msg('请输入手机验证码',2000)
  111. return
  112. }
  113. if(!this.$reg.isMobileCode(this.mobildeCode)){
  114. this.$util.msg('验证码格式不正确',2000)
  115. return
  116. }
  117. this.bindingWechatLogin()
  118. },
  119. getVerificationCode(){//图形验证
  120. getImageCode().then(res => {
  121. this.imageCodeUrl = res.data.baseImage
  122. this.imageCodetoken = res.data.token
  123. })
  124. },
  125. getMobileCodeFn(){//获取手机验证码
  126. if( this.bindLinkPhone == ''){
  127. this.$util.msg('请输入手机号',2000);
  128. return
  129. }
  130. if(!this.$reg.isMobile(this.bindLinkPhone)){
  131. this.$util.msg('请输入正确的手机号',2000);
  132. return
  133. }
  134. if( this.imageCode == ''){
  135. this.$util.msg('请输入图形验证码',2000);
  136. return
  137. }
  138. let params = {
  139. mobile:this.bindLinkPhone,
  140. mobileOrEmail:this.bindMobile,
  141. platformType:2,
  142. imgCode:this.imageCode,
  143. token:this.imageCodetoken,
  144. }
  145. this.isMobileDisabled = true;
  146. getbindWechatCode(params).then(res =>{
  147. const TIME_COUNT = 60;
  148. this.$util.msg('验证短信已发送',2000)
  149.       if (!this.codeTime) {
  150.         this.count = TIME_COUNT;
  151. this.isMobileDisabled = true;
  152.         this.codeTime = setInterval(() => {
  153.         if (this.count > 1 && this.count <= TIME_COUNT) {
  154.           this.count--
  155.           this.mobileCodeText = this.count +'s重新发送'
  156.          } else {
  157.           this.isMobileDisabled = false;
  158.           clearInterval(this.codeTime)
  159.           this.codeTime = null
  160. this.mobileCodeText = '获取验证码'
  161.          }
  162.         },1000)
  163.        }
  164. }).catch( error =>{
  165. this.$util.msg(error.msg,2000)
  166. this.isMobileDisabled = false;
  167. })
  168. },
  169. bindingWechatLogin(){//获取用户基本信息登录
  170. wx.getUserInfo({
  171. success: res => {
  172. this.isUserInfo = false;
  173. this.userInfo = res.userInfo;
  174. let params ={
  175. userID:this.userID,
  176. mobile:this.bindLinkPhone,
  177. linkName:this.bindLinkName,
  178. verificationCode:this.mobildeCode,
  179. nickName:res.userInfo.nickName,
  180. headimgurl:res.userInfo.avatarUrl,
  181. }
  182. // console.log(params)
  183. bindingWechat(params).then(response =>{
  184. this.$api.switchTabTo('/pages/tabBar/user/user')
  185. }).catch(error =>{
  186. this.$util.msg(error.msg,2000)
  187. })
  188. }
  189. })
  190. },
  191. //关闭未授权用户授权提示弹窗
  192. hideModel(){
  193. this.isUserInfo = false;
  194. }
  195. },
  196. onShow() {
  197. this.$api.getStorage().then((resolve) => {
  198. this.userID = resolve.userID
  199. this.bindMobile = resolve.bindMobile
  200. })
  201. }
  202. }
  203. </script>
  204. <style lang="scss">
  205. .login{
  206. width: 100%;
  207. height: auto;
  208. border-top: 1px solid #F7F7F7;
  209. .model-warp.none{
  210. display: none;
  211. }
  212. .model-warp.show{
  213. display: block;
  214. }
  215. .login-main{
  216. width: 702rpx;
  217. background: rgba(225, 86, 22, 0.1);
  218. display: flex;
  219. flex-direction: column;
  220. align-items: center;
  221. height: 68rpx;
  222. padding: 20rpx 24rpx;
  223. margin: 24rpx 0 118rpx 0;
  224. .logo-text{
  225. font-size: 24rpx;
  226. line-height: 34rpx;
  227. color: $color-system;
  228. }
  229. }
  230. .login-form{
  231. width: 702rpx;
  232. height: auto;
  233. padding: 0 24rpx;
  234. .login-input{
  235. width: 654rpx;
  236. height: 40rpx;
  237. padding: 24rpx;
  238. margin-bottom: 20rpx;
  239. background: #F7F7F7;
  240. border-radius: 14rpx;
  241. display: flex;
  242. flex-direction: column;
  243. align-items: center;
  244. &.code{
  245. width: 370rpx;
  246. float: left;
  247. margin-right: 20rpx;
  248. }
  249. &.btn{
  250. width: 258rpx;
  251. height: 88rpx;
  252. padding: 0;
  253. float: left;
  254. background: $btn-confirm;
  255. .input{
  256. width: 258rpx;
  257. height: 88rpx;
  258. line-height: 88rpx;
  259. padding: 0;
  260. border-radius: 14rpx;
  261. color: #FFFFFF;
  262. background: $btn-confirm;
  263. }
  264. &.disabled{
  265. background: #F7F7F7;
  266. .input{
  267. background: #F7F7F7;
  268. color: #999999;
  269. }
  270. }
  271. }
  272. &.img-btn{
  273. width: 250rpx;
  274. height: 88rpx;
  275. padding: 0;
  276. float: left;
  277. background: #FFFFFF;
  278. display: block;
  279. .vscodeimg{
  280. width: 180rpx;
  281. height: 88rpx;
  282. float: left;
  283. display: flex;
  284. flex-direction: column;
  285. align-items: center;
  286. border-radius: 14rpx;
  287. image{
  288. width: 180rpx;
  289. height: 88rpx;
  290. border-radius: 14rpx;
  291. }
  292. }
  293. .vscod-refresh{
  294. width: 70rpx;
  295. float: right;
  296. display: flex;
  297. flex-direction: column;
  298. align-items: center;
  299. .icon-shuaxin{
  300. font-size: 48rpx;
  301. color: #333333;
  302. }
  303. .ref-text{
  304. font-size: 24rpx;
  305. color: #333333;
  306. }
  307. }
  308. }
  309. .input{
  310. width: 100%;
  311. height: 100%;
  312. background: #F7F7F7;
  313. font-size: $font-size-28;
  314. line-height: 40rpx;
  315. color: #333333;
  316. border-radius: 14rpx;
  317. }
  318. }
  319. }
  320. .login-btn{
  321. width: 702rpx;
  322. height: 88rpx;
  323. border-radius: 14rpx;
  324. font-size: $font-size-28;
  325. line-height: 88rpx;
  326. color: #FFFFFF;
  327. margin: 0 auto;
  328. text-align: center;
  329. background: $btn-confirm;
  330. margin-top: 100rpx;
  331. }
  332. .model-authorization{
  333. width: 100%;
  334. height: 100%;
  335. position: fixed;
  336. top: 0;
  337. left: 0;
  338. z-index: 999;
  339. .authorization{
  340. width: 518rpx;
  341. height: 320rpx;
  342. position: absolute;
  343. background: rgba(255,255,255,.7);
  344. left: 0;
  345. right: 0;
  346. bottom: 0;
  347. top: 0;
  348. margin: auto;
  349. .to-btn{
  350. position: absolute;
  351. top: 0;
  352. left: 0;
  353. right: 0;
  354. bottom: 0;
  355. margin: auto;
  356. width: 70%;
  357. height: 88rpx;
  358. font-size: $font-size-28;
  359. line-height: 88rpx;
  360. color: #FFFFFF;
  361. text-align: center;
  362. border-radius: 44rpx;
  363. }
  364. }
  365. }
  366. }
  367. </style>