123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196 |
- <template>
- <view class="login" :style="{background:'url('+ bannerImage +')'}">
- <view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
- <view class="logo"><re-image imgSrc="/retail/login/img_logo_login.png" width="442" height="130"></re-image></view>
- <view class="content">
- <view class="form">
- <view class="input-wrapper">
- <view class="label">手机号码</view>
- <view class="input-box flex aic"><u-input maxlength="11" v-model="phone" fontSize="32rpx"
- border="none" type="text" placeholder="请输入手机号" ></u-input></view>
- </view>
- <view class="input-wrapper">
- <view class="label">验证码</view>
- <view class="input-box flex aic">
- <u-input maxlength="6" v-model="code" fontSize="30rpx" border="none" type="text" placeholder="请输入验证码"></u-input>
- <u-code change-text="重新获取(Xs)" startText="获取验证码" endText="重新获取" @end="end" @start="start" ref="uCode"
- @change="codeChange"></u-code>
- <view :class="{'getting': getCoding}" class="get-code-btn" @tap="getCode">{{tips}}</view>
- </view>
- </view>
- <view class="btn">
- <u-button @click="toLogin()">登录</u-button>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { toRpx } from '@/utils/calculate.js'
- import defaultConfig from '@/config/default.js'
- import { navigateTo,phoneValidate,filterPhone,openFilterPhone } from '@/utils/utils.js'
- import { login,sendCode,getUserInfo } from '@/apis/user'
- export default {
- components: {},
- computed: {
- statusBarHeight() {
- return this.$store.state.info.systemInfo?.statusBarHeight
- },
- },
- data() {
- return {
- bannerImage: defaultConfig.ossImgUrl + '/retail/login/login-bg.png',
- navBarHeight: uni.getStorageSync('navBarHeight'),
- phone:'',
- code:'',
- tips:'',
- getCoding: false,
- wxopenId:uni.getStorageSync('wxOpenId')
- }
- },
- onLoad() {
- },
- computed:{
- canClick() {
- return this.phone.length && this.code.length
- },
- ftPhone() {
- return (v) => {
- return filterPhone(v)
- }
- }
- },
- methods: {
- // 登录
- async toLogin(){
- const res = await login({
- channel:1,
- username:this.phone,
- code:this.code,
- })
- const { accessToken,username } = res
- uni.setStorageSync('accessToken', accessToken)
- uni.setStorageSync('username', username)
- const userInfo = await getUserInfo()
- uni.setStorageSync('userInfo',userInfo)
- uni.setStorageSync('avatar',userInfo.avatar)
- uni.showToast({
- title: '登录成功'
- });
- uni.reLaunch({
- url:'/pages/gallery/index'
- })
- },
- bindPhone() {
- console.log('绑定成功')
- },
- codeChange(text) {
- this.tips = text;
- },
- async getCode() {
- if (!this.phone) {
- uni.showToast({
- title: '请先输入手机号',
- icon: 'none'
- })
- return
- }
- if (!phoneValidate(openFilterPhone(this.phone))) {
- uni.showToast({
- title: '手机号格式不正确',
- icon: 'none'
- })
- return
- }
- if (this.$refs.uCode.canGetCode) {
- // 模拟向后端请求验证码
- uni.showLoading({
- title: '正在获取验证码',
- icon: 'none'
- })
- await sendCode({
- phone:this.phone
- })
- uni.hideLoading();
- // 这里此提示会被this.start()方法中的提示覆盖
- uni.showToast({
- title: '验证码已发送'
- });
- // 通知验证码组件内部开始倒计时
- this.$refs.uCode.start();
- } else {
- console.log('倒计时结束后再发送')
- }
- },
- end() {
- this.getCoding = false
- },
- start() {
- this.getCoding = true
- }
- },
- mounted() {
- },
- }
- </script>
- <style lang="scss" scoped>
- .login {
- background-repeat: no-repeat !important;
- background-size: 100% auto !important;
- width: 100%;
- position: absolute;
- top: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- .logo{
- padding: 48rpx 0 0 48rpx;
- }
- .content{
- flex-grow: 1;
- padding: 58rpx 32rpx 92rpx;
- .form{
- height: 100%;
- background: #fff;
- padding: 40rpx 32rpx;
- border-radius: 24rpx;
- .input-wrapper {
- background:#fff;
- padding-bottom: 22rpx;
- font-size: 36rpx;
- margin-bottom: 50rpx;
- .label{
- font-weight: 500;
- font-size: 32rpx;
- color: #171717;
- margin-bottom: 20rpx;
- }
- .input-box{
- color: #171717;
- height: 84rpx;
- background: #F3F7FF;
- border-radius: 42rpx;
- padding: 0 32rpx;
- font-size: 28rpx
- }
- .icon-pad {
- padding: 10rpx;
- }
-
- }
- .btn{
- margin-top: 127rpx;
- button{
- color: #fff;
- background: linear-gradient( 140deg, #FF8500 0%, #FFA600 100%);
- border-radius: 48rpx;
- }
- }
- }
-
- }
- }
- </style>
|