forget.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <view class="container">
  3. <view class="container_text" >
  4. <image src="../../static/icon/logo.png" mode="" class="logo"></image>
  5. <view class="logo-tit"><text>博·赢</text></view>
  6. <!-- <image class="banner-img" src="/static/img/img01.png" mode="scaleToFill"></image> -->
  7. </view>
  8. <!-- <view class="loginTitle"><text>手机号登录</text></view> -->
  9. <view class="login_text">
  10. <view class="login_input flex">
  11. <view class="login_img"><image src="../../static/icon/icon-phone.png"></image></view>
  12. <view class="login_name"><input class="uni-input" v-model="phone" focus placeholder="请输入手机号" /></view>
  13. </view>
  14. <view class="login_input flex">
  15. <view class="login_img"><image src="../../static/icon/icon-code.png"></image></view>
  16. <view class="login_name"><input class="uni-input" type="password" v-model="password" focus placeholder="请输入新密码" /></view>
  17. </view>
  18. <view class="login_input flex">
  19. <view class="login_img"><image src="../../static/icon/icon-code.png"></image></view>
  20. <view class="login_name"><input class="uni-input" type="password" v-model="repassword" focus placeholder="请重复输入新密码" /></view>
  21. </view>
  22. <view class="login_input flex">
  23. <view class="login_img"><image src="../../static/icon/icon-yzm.png"></image></view>
  24. <view class="login_name flex">
  25. <input class="uni-input width" v-model="code" focus placeholder="请输入验证码" />
  26. <view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
  27. </view>
  28. </view>
  29. <view>
  30. <button type="green" @click="register" class="uni-button uni-button-green">确定修改</button>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. import { mapMutations } from 'vuex';
  37. import { verify, loginMobile, getUserInfo } from '@/api/login.js';
  38. export default {
  39. data() {
  40. return {
  41. phone: '', //用户
  42. code: '', //验证码
  43. time: '', //保存倒计时对象
  44. countDown: 0, //倒计时
  45. password: '',
  46. repassword: '',
  47. };
  48. },
  49. onLoad() {},
  50. watch: {
  51. // 监听倒计时
  52. countDown(i) {
  53. if (i == 0) {
  54. clearInterval(this.time);
  55. }
  56. }
  57. },
  58. methods: {
  59. ...mapMutations('user', ['setUserInfo', 'login']),
  60. // 手机登录
  61. register() {
  62. let obj = this;
  63. if (obj.phone == '') {
  64. obj.$api.msg('请输入电话号码');
  65. return;
  66. }
  67. if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.phone)) {
  68. obj.$api.msg('请输入正确的手机号');
  69. return;
  70. }
  71. if (obj.code == '') {
  72. obj.$api.msg('请输入验证码');
  73. return;
  74. }
  75. loginMobile({
  76. phone: obj.phone, //账号
  77. captcha: obj.code
  78. }).then(function(e) {
  79. uni.setStorageSync('token', e.data.token);
  80. getUserInfo({}).then(e => {
  81. obj.login();
  82. // 保存返回用户数据
  83. obj.setUserInfo(e.data);
  84. //成功跳转首页
  85. uni.switchTab({
  86. url: '/pages/index/index'
  87. });
  88. });
  89. }).catch((e) => {
  90. console.log(e);
  91. });
  92. },
  93. //发送验证码
  94. verification() {
  95. let obj = this;
  96. if (this.phone == '') {
  97. this.$api.msg('请输入电话号码');
  98. return;
  99. }
  100. if (this.phone.length < 11) {
  101. this.$api.msg('请输入正确的手机号');
  102. return;
  103. }
  104. // 判断是否在倒计时
  105. if (obj.countDown > 0) {
  106. return false;
  107. } else {
  108. obj.countDown = 60;
  109. obj.time = setInterval(() => {
  110. obj.countDown--;
  111. }, 1000);
  112. //调用验证码接口
  113. verify({
  114. phone: obj.phone,
  115. type: 'login'
  116. })
  117. .then(({ data }) => {})
  118. .catch(err => {
  119. console.log(err);
  120. });
  121. }
  122. },
  123. login() {
  124. //返回登录
  125. uni.navigateTo({
  126. url: '/pages/public/login'
  127. });
  128. }
  129. }
  130. };
  131. </script>
  132. <style lang="scss">
  133. page {
  134. height: 100%;
  135. }
  136. .container {
  137. width: 100%;
  138. height: 100%;
  139. background-size: 100%;
  140. }
  141. .container_text {
  142. width: 100%;
  143. height: 500rpx;
  144. top: 0rpx;
  145. display: flex;
  146. flex-direction: column;
  147. justify-content: center;
  148. align-items: center;
  149. .banner-img {
  150. width: 100%;
  151. height: 100%;
  152. }
  153. .logo {
  154. width: 186rpx;
  155. height: 196rpx;
  156. }
  157. .logo-tit {
  158. text-align: center;
  159. font-size: 36rpx;
  160. font-family: PingFang SC;
  161. font-weight: 400;
  162. color: #FAD6B0;
  163. }
  164. }
  165. .login_text {
  166. margin: auto 30rpx;
  167. position: relative;
  168. padding: 50rpx 102rpx 0;
  169. background-color: #000;
  170. // margin-top: -180rpx;
  171. border-radius: 20rpx;
  172. .login_input {
  173. padding-bottom: 20rpx;
  174. border-bottom: 1px solid #f0f0f0;
  175. margin-bottom: 65rpx;
  176. .login_img image {
  177. height: 35rpx;
  178. width: 29rpx;
  179. margin-right: 20rpx;
  180. }
  181. .uni-input {
  182. text-align: left;
  183. width: 470rpx;
  184. font-size: 28rpx !important;
  185. }
  186. .login_name {
  187. color: #fff;
  188. .width {
  189. width: 325rpx !important;
  190. }
  191. .code {
  192. color: #dbb189;
  193. font-size: 23rpx;
  194. border-left: 1px solid #eeeeee;
  195. width: 150rpx;
  196. flex-shrink: 0;
  197. text-align: center;
  198. }
  199. }
  200. }
  201. .uni-button-green {
  202. background: linear-gradient(-74deg, #CE9C6D, #FFECD6);
  203. // border: 1px solid;
  204. border-image: linear-gradient(115deg, #FEEBD5, #FFFFFF, #E1AD7D) 1 1;
  205. box-shadow: 3rpx 4rpx 5rpx 0px rgba(151, 118, 74, 0.5);
  206. border-radius: 10rpx;
  207. font-size: 34rpx;
  208. font-family: PingFang SC;
  209. font-weight: 500;
  210. color: #874B19;
  211. }
  212. .uni-button {
  213. height: 85rpx;
  214. line-height: 85rpx;
  215. }
  216. }
  217. .loginTitle {
  218. position: absolute;
  219. top: 250rpx;
  220. width: 100%;
  221. text-align: center;
  222. color: white;
  223. font-size: 40rpx;
  224. }
  225. uni-button {
  226. height: 80rpx !important;
  227. line-height: 80rpx !important;
  228. }
  229. </style>