regist.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <template>
  2. <div id="index_login_container" class="animation-slide-right">
  3. <view class="text-xl padding text-center">
  4. <img class="back regist_back_btn" @click="goIndex" src="https://img.shuimuai.com/fanhui.png"/>
  5. <text class=" text-bold title_color">会员{{ title }}</text>
  6. </view>
  7. <view class="text-df text-center slogen">请输入手机号码,以便更好的享受我们的服务</view>
  8. <div class="register_form_container text-center">
  9. <form action="">
  10. <view class="cu-form-group">
  11. <view class="title">手机号码</view>
  12. <input placeholder="请输入手机号" v-model="phone" maxlength="11" @input="check_auth"/>
  13. <view class="cu-capsule radius">
  14. <view class='cu-tag bg-blue '>
  15. +86
  16. </view>
  17. <view class="cu-tag line-blue">
  18. 中国大陆
  19. </view>
  20. </view>
  21. </view>
  22. <view class="cu-form-group">
  23. <view class="title">验证码</view>
  24. <input placeholder="输入验证码" name="input" v-model="verfiy_code" maxlength="6" @input="check_auth" clearable/>
  25. <button class='cu-btn bg-primary text-white shadow' :disabled="time_show" @click="get_verify_code">
  26. <van-count-down v-if="time_show" :auto-start="time_start" class="control-count-down" @finish="time_finished"
  27. :time="time_count * 1000" format="ss"/>
  28. <text>获取验证码</text>
  29. </button>
  30. </view>
  31. </form>
  32. </div>
  33. <div class="text-center padding">
  34. <button class="cu-btn lg cu-btn-primary text-white text-center" open-type="getUserInfo"
  35. @getuserinfo="get_Userinfo"
  36. :disabled="btn_disabled">
  37. {{ title }}
  38. </button>
  39. </div>
  40. <view class="text-center text-xs">
  41. <text class="text-gray">如果您在我们实体店,请在店员的指导下连接水母智脑环</text>
  42. </view>
  43. <van-toast id="van-toast"/>
  44. </div>
  45. </template>
  46. <script>
  47. import {userGetCode, userRegister, userLogin, userDetail} from '@/requests/user'
  48. import Toast from '../../../static/vant/toast/toast';
  49. import user_store from '@/store/index'
  50. import {reload_userinfo} from "../../utils/user";
  51. var $this
  52. export default {
  53. name: "regist",
  54. props: ['title'],
  55. data() {
  56. return {
  57. phone: "",
  58. verfiy_code: "",
  59. time_out: 0,
  60. invite: 0,
  61. js_code: "",
  62. auth_login: false,
  63. _userinfo: {
  64. nickName: "",
  65. avatarUrl: "",
  66. gender: ""
  67. },
  68. btn_disabled: true,
  69. time_show: false,
  70. time_start: false,
  71. time_count: 60,
  72. }
  73. },
  74. watch: {
  75. verfiy_code($new, $old) {
  76. if ($new.length == 6) {
  77. wx.hideKeyboard()
  78. }
  79. }
  80. },
  81. methods: {
  82. check_auth() {
  83. let $reg = /(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}/
  84. let $verify_reg = /\d{6}/
  85. if ($reg.test($this.phone) && $verify_reg.test($this.verfiy_code)) {
  86. $this.btn_disabled = false
  87. } else {
  88. $this.btn_disabled = true
  89. }
  90. },
  91. //跳转到首页
  92. goIndex() {
  93. this.$emit('changeStatus', 'login')
  94. },
  95. //获取验证码
  96. get_verify_code() {
  97. let $reg = /(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}/
  98. if ($reg.test($this.phone) == false) {
  99. Toast.fail('请输入正确手机号')
  100. return false;
  101. }
  102. $this.open_time_down()
  103. let $params = {
  104. phone: $this.phone
  105. }
  106. userGetCode($params).then((res) => {
  107. let $data = res.data;
  108. Toast.success($data['errmsg']);
  109. });
  110. },
  111. //微信授权登录
  112. wechat_login($userinfo) {
  113. Toast.loading({
  114. duration: 0, // 持续展示 toast
  115. forbidClick: true,
  116. message: '操作中...',
  117. });
  118. let $params = {
  119. phone: $this.phone,
  120. code: $this.verfiy_code,
  121. js_code: $this.js_code,
  122. invite: $this.invite,
  123. }
  124. // if ($this._userinfo) {
  125. $params['user_name'] = $this._userinfo.nickName
  126. $params['portrait'] = $this._userinfo.avatarUrl
  127. $params['sex'] = $this._userinfo.gender
  128. // }
  129. if ($this.title == "注册") {
  130. userRegister($params).then((res) => {
  131. console.log(res)
  132. wx.setStorageSync("is_first", true)
  133. let $data = res.data
  134. if (!$data['code']) {
  135. Toast.clear()
  136. $this.login_success($data)
  137. } else {
  138. Toast.fail($data['errmsg'])
  139. }
  140. },
  141. (err) => {
  142. console.log(err)
  143. }
  144. )
  145. } else if ($this.title == "登录") {
  146. userLogin($params).then((res) => {
  147. wx.setStorageSync("is_first", false)
  148. console.log(res)
  149. let $data = res.data
  150. Toast.clear()
  151. if (!$data['code']) {
  152. $this.login_success($data)
  153. } else {
  154. Toast.fail($data['errmsg'])
  155. }
  156. },
  157. (err) => {
  158. console.log(err)
  159. })
  160. }
  161. },
  162. //登录成功
  163. login_success($data) {
  164. Toast.success($data['errmsg'])
  165. user_store.setters.set_token($data['data'])
  166. user_store.setters.set_login()
  167. $this.$emit('change_login_status', true)
  168. user_store.setters.set_invite_code($this.invite)
  169. //获取用户信息
  170. reload_userinfo($this)
  171. },
  172. //打开倒计时
  173. open_time_down() {
  174. $this.time_count = 60
  175. $this.time_start = $this.time_show = true
  176. },
  177. //倒计时结束
  178. time_finished() {
  179. $this.time_start = $this.time_show = false
  180. },
  181. // 获取用户信息
  182. get_Userinfo(e) {
  183. console.log(e)
  184. if (e.mp.detail.errMsg == "getUserInfo:fail auth deny") {
  185. Toast.fail('请进行授权登录')
  186. } else {
  187. $this._userinfo = e.mp.detail.userInfo
  188. $this.wechat_login()
  189. }
  190. }
  191. },
  192. mounted() {
  193. $this.invite = $this.$store.getters.get_invite_code ? $this.$store.getters.get_invite_code : wx.getStorageSync('code')
  194. // $this.invite = 1000000000
  195. console.log('regist-invite', $this.invite)
  196. mpvue.login({
  197. success($res) {
  198. $this.js_code = $res.code
  199. }
  200. })
  201. },
  202. created() {
  203. $this = this
  204. wx.getSetting({
  205. success(res) {
  206. let $authSetting = res.authSetting
  207. if ($authSetting['scope.userInfo']) {
  208. //改为普通登录
  209. $this.auth_login = false
  210. } else {
  211. $this.auth_login = true
  212. }
  213. console.log('auth', $this.auth_login)
  214. }
  215. })
  216. },
  217. }
  218. </script>
  219. <style scoped>
  220. .regist_back_btn {
  221. width: 22px;
  222. height: 20px;
  223. position: absolute;
  224. left: 20px;;
  225. }
  226. .cu-form-group {
  227. background-color: rgba(255, 255, 255, 0);
  228. }
  229. /*体验页面*/
  230. .slogen {
  231. color: #4b4b4b;
  232. font-size: 13px;
  233. }
  234. /*注册页面*/
  235. .register_form_container {
  236. margin: 70px auto 0px;
  237. width: 90%;
  238. height: 108px;
  239. background: rgba(242, 243, 255, 0.6);
  240. box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
  241. border-radius: 11px;
  242. }
  243. </style>