index.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <template>
  2. <view class="login" :style="{background:'url('+ bannerImage +')'}">
  3. <view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
  4. <view class="logo"><re-image imgSrc="/retail/login/img_logo_login.png" width="442" height="130"></re-image></view>
  5. <view class="content">
  6. <view class="form">
  7. <view class="input-wrapper">
  8. <view class="label">手机号码</view>
  9. <view class="input-box flex aic"><u-input maxlength="11" v-model="phone" fontSize="32rpx"
  10. border="none" type="text" placeholder="请输入手机号" ></u-input></view>
  11. </view>
  12. <view class="input-wrapper">
  13. <view class="label">验证码</view>
  14. <view class="input-box flex aic">
  15. <u-input maxlength="6" v-model="code" fontSize="30rpx" border="none" type="text" placeholder="请输入验证码"></u-input>
  16. <u-code change-text="重新获取(Xs)" startText="获取验证码" endText="重新获取" @end="end" @start="start" ref="uCode"
  17. @change="codeChange"></u-code>
  18. <view :class="{'getting': getCoding}" class="get-code-btn" @tap="getCode">{{tips}}</view>
  19. </view>
  20. </view>
  21. <view class="btn">
  22. <u-button @click="toLogin()">登录</u-button>
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. import { toRpx } from '@/utils/calculate.js'
  30. import defaultConfig from '@/config/default.js'
  31. import { navigateTo,phoneValidate,filterPhone,openFilterPhone } from '@/utils/utils.js'
  32. import { login,sendCode,getUserInfo } from '@/apis/user'
  33. export default {
  34. components: {},
  35. computed: {
  36. statusBarHeight() {
  37. return this.$store.state.info.systemInfo?.statusBarHeight
  38. },
  39. },
  40. data() {
  41. return {
  42. bannerImage: defaultConfig.ossImgUrl + '/retail/login/login-bg.png',
  43. navBarHeight: uni.getStorageSync('navBarHeight'),
  44. phone:'',
  45. code:'',
  46. tips:'',
  47. getCoding: false,
  48. wxOpenid:uni.getStorageSync('wxOpenid')
  49. }
  50. },
  51. onLoad() {
  52. },
  53. computed:{
  54. canClick() {
  55. return this.phone.length && this.code.length
  56. },
  57. ftPhone() {
  58. return (v) => {
  59. return filterPhone(v)
  60. }
  61. }
  62. },
  63. methods: {
  64. // 登录
  65. async toLogin(){
  66. const res = await login({
  67. channel:1,
  68. username:this.phone,
  69. code:this.code,
  70. wxOpenId:this.wxOpenid
  71. })
  72. const { accessToken,username } = res
  73. uni.setStorageSync('accessToken', accessToken)
  74. uni.setStorageSync('username', username)
  75. const userInfo = await getUserInfo()
  76. uni.setStorageSync('userInfo',userInfo)
  77. uni.setStorageSync('avatar',userInfo.avatar)
  78. uni.showToast({
  79. title: '登录成功'
  80. });
  81. uni.reLaunch({
  82. url:'/pages/gallery/index'
  83. })
  84. },
  85. bindPhone() {
  86. console.log('绑定成功')
  87. },
  88. codeChange(text) {
  89. this.tips = text;
  90. },
  91. async getCode() {
  92. if (!this.phone) {
  93. uni.showToast({
  94. title: '请先输入手机号',
  95. icon: 'none'
  96. })
  97. return
  98. }
  99. if (!phoneValidate(openFilterPhone(this.phone))) {
  100. uni.showToast({
  101. title: '手机号格式不正确',
  102. icon: 'none'
  103. })
  104. return
  105. }
  106. if (this.$refs.uCode.canGetCode) {
  107. // 模拟向后端请求验证码
  108. uni.showLoading({
  109. title: '正在获取验证码',
  110. icon: 'none'
  111. })
  112. await sendCode({
  113. phone:this.phone
  114. })
  115. uni.hideLoading();
  116. // 这里此提示会被this.start()方法中的提示覆盖
  117. uni.showToast({
  118. title: '验证码已发送'
  119. });
  120. // 通知验证码组件内部开始倒计时
  121. this.$refs.uCode.start();
  122. } else {
  123. console.log('倒计时结束后再发送')
  124. }
  125. },
  126. end() {
  127. this.getCoding = false
  128. },
  129. start() {
  130. this.getCoding = true
  131. }
  132. },
  133. mounted() {
  134. },
  135. }
  136. </script>
  137. <style lang="scss" scoped>
  138. .login {
  139. background-repeat: no-repeat !important;
  140. background-size: 100% auto !important;
  141. width: 100%;
  142. position: absolute;
  143. top: 0;
  144. bottom: 0;
  145. display: flex;
  146. flex-direction: column;
  147. .logo{
  148. padding: 48rpx 0 0 48rpx;
  149. }
  150. .content{
  151. flex-grow: 1;
  152. padding: 58rpx 32rpx 92rpx;
  153. .form{
  154. height: 100%;
  155. background: #fff;
  156. padding: 40rpx 32rpx;
  157. border-radius: 24rpx;
  158. .input-wrapper {
  159. background:#fff;
  160. padding-bottom: 22rpx;
  161. font-size: 36rpx;
  162. margin-bottom: 50rpx;
  163. .label{
  164. font-weight: 500;
  165. font-size: 32rpx;
  166. color: #171717;
  167. margin-bottom: 20rpx;
  168. }
  169. .input-box{
  170. color: #171717;
  171. height: 84rpx;
  172. background: #F3F7FF;
  173. border-radius: 42rpx;
  174. padding: 0 32rpx;
  175. font-size: 28rpx
  176. }
  177. .icon-pad {
  178. padding: 10rpx;
  179. }
  180. }
  181. .btn{
  182. margin-top: 127rpx;
  183. button{
  184. color: #fff;
  185. background: linear-gradient( 140deg, #FF8500 0%, #FFA600 100%);
  186. border-radius: 48rpx;
  187. }
  188. }
  189. }
  190. }
  191. }
  192. </style>