bindphone.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <template>
  2. <view class="container">
  3. <view class="page-title">绑定手机号</view>
  4. <form @submit="login">
  5. <view class="cell flex-row-between">
  6. <input type="number" name="tel" @input="getphone" :value="phone" maxlength="11" placeholder="请输入手机号码"></input>
  7. <i class="iconfont iconquchu" @click="onClearPhone" v-show="phone"></i>
  8. </view>
  9. <view class="cell flex-row-between">
  10. <input type="number" name="register_code" maxlength="6" placeholder="请输入验证码"></input>
  11. <view class="code-btn" @click="getCode">{{codeConfig.type == 1?'获取验证码':'重试('+codeConfig.time+'s)'}}</view>
  12. </view>
  13. <view class="cell flex-row-between">
  14. <input type="text" name="pass"
  15. maxlength="16" placeholder="请输入6到16位的数字和字母组合"></input>
  16. </view>
  17. <view class="cell flex-row-between">
  18. <input type="text" name="repass" maxlength="16" placeholder="请再次输入登录密码"></input>
  19. </view>
  20. <view class="xieyi flex-row" >
  21. <image src="../../static/images/select_on.png" mode="aspectFit" class="icon" v-if="xieyiActive"></image>
  22. <image src="../../static/images/select.png" mode="aspectFit" class="icon" v-else></image>
  23. <view class="xieyi-text">你已阅读并同意</view>
  24. <view @click.stop="agreement" style="color: #007AFF;">《注册服务协议》</view>
  25. </view>
  26. <button form-type="submit" class="login-btn">确定</button>
  27. </form>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. phone: null,
  35. code: null,
  36. xieyiActive: true,
  37. codeConfig: {
  38. type: 1,
  39. time: 60
  40. },
  41. }
  42. },
  43. onLoad(e) {
  44. this.code = e.code;
  45. this.type=e.type;
  46. },
  47. methods: {
  48. getphone(e) {
  49. this.phone = e.detail.value;
  50. },
  51. onClearPhone() {
  52. this.tel = "";
  53. this.phone = "";
  54. },
  55. agreement(e) {
  56. uni.navigateTo({
  57. url: "../text/text?title=注册服务协议"
  58. })
  59. },
  60. getCode() {
  61. if (this.codeConfig.type == 2) {
  62. return false
  63. }
  64. if (!/^1[0-9]{10}/.test(this.phone)) {
  65. uni.showToast({
  66. title: "请输入手机号",
  67. icon: 'none'
  68. })
  69. return false
  70. }
  71. //请求验证码
  72. this.request({
  73. url: "user/sendcode",
  74. data: {
  75. tel: this.phone,
  76. },
  77. }).then(res => {
  78. console.log(res, "res")
  79. if (res.code === '200') {
  80. this.codeConfig.type = 2
  81. this._timer = setInterval(() => {
  82. if (this.codeConfig.time == 1) {
  83. this.codeConfig = {
  84. type: 1,
  85. time: 30
  86. }
  87. clearInterval(this._timer)
  88. }
  89. this.codeConfig.time--
  90. }, 1000)
  91. }
  92. }).catch((res) => {
  93. console.log("message", res)
  94. uni.showToast({
  95. title: res.message,
  96. icon: 'none'
  97. })
  98. });
  99. },
  100. login(e) {
  101. let data, url;
  102. if (!/^1[0-9]{10}/.test(e.detail.value.tel)) {
  103. uni.showToast({
  104. title: "请正确输入手机号",
  105. icon: 'none'
  106. })
  107. return false
  108. }
  109. if (!e.detail.value.register_code) {
  110. uni.showToast({
  111. title: "请输入验证码",
  112. icon: 'none'
  113. })
  114. return false
  115. }
  116. if (!e.detail.value.pass) {
  117. uni.showToast({
  118. title: "请输入密码",
  119. icon: 'none'
  120. })
  121. return false
  122. }
  123. if (e.detail.value.pass!=e.detail.value.repass) {
  124. uni.showToast({
  125. title: "确认密码不一致",
  126. icon: 'none'
  127. })
  128. return false
  129. }
  130. data=e.detail.value;
  131. data.code=this.code;
  132. data.type=this.type;
  133. this.request({
  134. url:"user/register",
  135. data,
  136. }).then(res => {
  137. console.log(res, "res")
  138. if (res.code === '200') {
  139. uni.setStorageSync("token", res.data.token);
  140. uni.setStorage({
  141. key: 'login',
  142. data: {
  143. tel: e.detail.value.tel,
  144. },
  145. success: () => {
  146. console.log('success');
  147. uni.reLaunch({
  148. url: "../index/index"
  149. })
  150. // if (!this.is_pwd) {
  151. // uni.reLaunch({
  152. // url: "./password?tel=" + e.detail.value.tel
  153. // })
  154. // } else {
  155. // uni.reLaunch({
  156. // url: "../index/index"
  157. // })
  158. // }
  159. }
  160. });
  161. }
  162. }).catch((res) => {
  163. uni.showToast({
  164. title: res.message,
  165. icon: 'none'
  166. })
  167. });
  168. }
  169. }
  170. }
  171. </script>
  172. <style>
  173. .container {
  174. padding: 0 60rpx;
  175. }
  176. .page-title {
  177. padding: 40rpx 0 50rpx 0;
  178. font-size: 54rpx;
  179. line-height: 1;
  180. font-weight: 700;
  181. color: #242424;
  182. }
  183. .cell {
  184. height: 90rpx;
  185. border-bottom: 2rpx solid #ededed;
  186. margin-bottom: 30rpx;
  187. }
  188. .cell .iconquchu {
  189. flex: none;
  190. font-size: 23rpx;
  191. color: #cbcbcb;
  192. }
  193. .cell .code-btn {
  194. flex: none;
  195. width: 170rpx;
  196. height: 60rpx;
  197. border-radius: 30rpx;
  198. background-color: #3387FF;
  199. text-align: center;
  200. line-height: 60rpx;
  201. color: #fff;
  202. font-size: 24rpx;
  203. }
  204. .cell input {
  205. flex: auto;
  206. margin-right: 40rpx;
  207. }
  208. .login-btn {
  209. width: 630rpx;
  210. height: 98rpx;
  211. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  212. border-radius: 8rpx;
  213. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  214. font-size: 32rpx;
  215. font-weight: 500;
  216. text-align: center;
  217. color: #fff;
  218. line-height: 98rpx;
  219. margin: 100rpx auto 0;
  220. }
  221. .xieyi {
  222. font-size: 26rpx;
  223. }
  224. .xieyi .icon {
  225. flex: none;
  226. margin-right: 12rpx;
  227. display: block;
  228. width: 28rpx;
  229. height: 28rpx;
  230. }
  231. .xieyi .xieyi-text {
  232. color: #a8a8a8;
  233. }
  234. .xieyi navigator {
  235. color: #3387FF;
  236. }
  237. </style>