luojigou_xcx_agent/src/pages/index/index.vue

<template>
    <view class="Home">
        <div class="Home-overlay"> </div> 
        <div class="home-content">
            <view class="empty" :style="{height: statusBarHeight + 2 +'px'}"/>
            <view class="title">
                中德智慧教育 <br/> 
                全球儿童思维教育专家
            </view>
            <view class="line"/>
            <view class="clause">
                <view class="clause-first">
                    内部系统，我们需要您授权以下信息
                </view>
                <view class="clause-seconed">
                    <view class="dot" />
                    获取您的公开信息（昵称、头像等）
                </view>
            </view>
            <view class="phone-form">
                <view class="phone-form-phone">
                    <input
                        v-model="phone"
                        :maxlength="11"
                        type="tel"
                        class="phone-form-phone-input"
                        placeholder-style="color: #C7C7C7; font-size: 16px;"
                        placeholder="手机号"
                    />
                    <view
                        :class="['phone-form-phone-getCode', phoneIsTrue && 'phone-is-true']"
                        @click.stop="getCode"
                    >{{ state.codeMsg }}</view>
                </view>

                <input
                    v-model="code"
                    class="phone-form-code"
                    placeholder-style="color: #C7C7C7; font-size: 16px;"
                    placeholder="验证码"
                />

                <view :class="['phone-form-login', codeIsTrue && 'code-is-true']" @click="loginByCode">登录</view>
                </view>

            <view class="rule">
                仅限中德智慧内部代理商使用
            </view>
 
        </div>
        <view class="logo">
            <image :src="staticPicture.logo" mode="aspectFit"/>
        </view>
           
    </view>
</template>

<script>
import { loginByCode, getCode } from '@/api/user.js'
import { setLocalStorage } from '@/utils/wxTool.js'
import { staticPicture }  from '@/utils/global.js'
import Tip from '@/utils/tip'
export default {
    name: 'Home',
    computed: {
        statusBarHeight () {
            return this.$store.state.systemInfo.statusBarHeight
		},
        phoneIsTrue() {
            const reg =/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            return reg.test(this.phone) && !this.state.codeDisabled
        },
        // 验证码格式是否正确
        codeIsTrue() {
            const reg =/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            return reg.test(this.phone) && this.code && this.code.length === 4
        }
    },
    onReady () {
    },
    data () {
        return {
            code: '',
            staticPicture,
            loading: false,
            phone: undefined,
            state: {
                smsTime: 60, // 短信倒计时时间
                codeDisabled: false, // 短信是否禁用
                codeMsg: "获取验证码", // 短信按钮上的文字
                timer: null, // 短信上的定时器
            }
        }
    },
    
    methods: {
         // 获取验证码
        async getCode() {
            if(!this.phoneIsTrue) return

            this.getCodeStr();

            const {status, message} = await getCode(this.phone)
            if(status === 200) {
                await Tip.success('验证码发送成功')
            }else {
                Tip.error(message)
            }
        },
        // 获取短信按钮上的文字
        getCodeStr() {
         this.state.codeDisabled = true;
         // 验证码60秒倒计时
         if (!this.state.timer) {
             this.state.timer = setInterval(() => {
             if (this.state.smsTime > 0 && this.state.smsTime <= 60) {
                 this.state.smsTime--;
                 if (this.state.smsTime !== 0) {
                 this.state.codeMsg = "重新发送(" + this.state.smsTime + ")";
                 } else {
                 clearInterval(this.state.timer);
                 this.state.codeMsg = "获取验证码";
                 this.state.smsTime = 60;
                 this.state.timer = null;
                 this.state.codeDisabled = false;
                 }
             }
             }, 1000);
         }
        },
        async loginByCode() {
            if(!this.codeIsTrue) return
            const {status, message, data} = await loginByCode(this.phone, this.code)
            if(status === 200) {
               this.loading = false
                    Tip.success('登录成功')
                    setLocalStorage('token', data.token)
                    this.$store.commit('set_userInfo', data)
                    uni.reLaunch({
                        url: '/pages/user/index'
                    })
            } else {
                this.code = ''
            }
            },
        // 用户登录
        async Login (encryptedData, iv) {
          this.loading = true
          const {data, status} =  await Login({encryptedData, iv, code: this.code})
          this.loading = false
          if (status === 200) {
                Tip.success('登录成功')
                setLocalStorage('token', data.token)
                this.$store.commit('set_userInfo', data)
                uni.reLaunch({
                    url: '/pages/user/index'
                })
          } else {
            this.code = ''
            this.wxLogin()
          }
        }
    }
}
</script>
<style scoped lang="less">
.Home {
    width: 100vw;
    height: 100vh;
    background-color: #CFD0DE;
    padding: 12% 6% 34%;
    box-sizing: border-box;
    position: relative;
    .Home-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(38, 38, 58, 0.8);
        z-index: 3;
    }

    .home-content {
        position: absolute;
        z-index: 4;
    }
    .title {
        width: 600rpx;
        height: 160rpx;
        font-size: 60rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 80rpx;
        margin-bottom: 48rpx;
    }
    .line {
        width: 100rpx;
        height: 8rpx;
        background-color: #44CEB6;
        margin-bottom: 186rpx;
    }
    .clause {
        margin-bottom: 84rpx;
        .clause-first {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
        }
        .clause-seconed {
            margin-top: 16rpx;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            .dot {
                width: 8rpx;
                height: 8rpx;
                border-radius: 50%;
                background-color: #fff;
                margin-right: 20rpx;
            }
        }
    }

    .auth-btn {
        width: 656rpx;
        height: 96rpx;
        background: #1677FF;
        border-radius: 200rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        margin-left: -0%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .rule {
        width: 100%;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        margin-top: 20rpx;
        margin-bottom: 98rpx;
    }

    .logo {
        width: 100%;
        height: 266rpx;
        margin-left: -53rpx;
        position: fixed;
        bottom: 12%;
        z-index: 1;
        image {
            width: 42.96%;
            height: 100%;
            object-fit: cover;
            display: block;
            margin: 0 auto;
        }
    }
}

.phone-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 76rpx;

    .phone-form-phone {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8rpx;
      width: 622rpx;
      height: 96rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      background: #F7F7F7;
      border-radius: 48rpx;
      box-sizing: border-box;
      overflow: hidden;

      .phone-form-phone-input {
        padding-left: 32rpx;
        width: 386rpx;
        height: 96rpx;
        line-height: 96rpx;
      }

      .phone-form-phone-getCode {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220rpx;
        height: 80rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        background: #D8D8D8;
        border-radius: 40rpx;
      }

      .phone-is-true {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        background: #193D9D;
      }
    }

    .phone-form-code {
      margin-top: 24rpx;
      padding-left: 40rpx;
      width: 622rpx;
      height: 96rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      background: #F7F7F7;
      border-radius: 48rpx;
      box-sizing: border-box;
    }

    .phone-form-login {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 60rpx;
      width: 588rpx;
      height: 96rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      background: #D9D9D9;
      border-radius: 48rpx;
    }

    .code-is-true {
      background: #193D9D;
    }
  }
</style>