|
|
@@ -1,53 +1,204 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <image class="logo" src="/static/logo.png"></image>
|
|
|
- <view class="text-area">
|
|
|
- <text class="title">{{title}}</text>
|
|
|
- <!-- <u-button text="月落" type="primary"></u-button> -->
|
|
|
+ <view class="top_bg">
|
|
|
+ <image class="top_close" src="/static/image/login/close_icon.png" mode="scaleToFill" />
|
|
|
+ <view class="top_text">
|
|
|
+ <view>注册众酬帮</view>
|
|
|
+ <view class="top_icon"></view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="w pdx-40 main">
|
|
|
+ <u--input class="h-112" v-model="loginParam.inviteCode" placeholder="请输入邀请码" border="bottom"
|
|
|
+ clearable></u--input>
|
|
|
+ <u--input class="h-112" v-model="loginParam.phone" placeholder="请输入手机号码" border="bottom"
|
|
|
+ clearable></u--input>
|
|
|
+ <u--input class="h-112 mgt-16" v-model="loginParam.code" placeholder="请输入验证码" border="bottom" clearable>
|
|
|
+ <template slot="suffix">
|
|
|
+ <u-code :seconds="seconds" @end="end" @start="start" change-text="xs" ref="uCode"
|
|
|
+ @change="codeChange"></u-code>
|
|
|
+ <u-button :disabled="!isShowCode" @tap="getCode" class="code_btn">{{ tips }}</u-button>
|
|
|
+ </template>
|
|
|
+ </u--input>
|
|
|
+ <u--input class="h-112 mgt-16" v-model="loginParam.password" :password="!isViewPassword" placeholder="请输入密码"
|
|
|
+ border="bottom" clearable>
|
|
|
+ <template slot="suffix">
|
|
|
+ <u-icon @click="isViewPassword = !isViewPassword" :name="!isViewPassword ? 'eye-fill' : 'eye-off'"
|
|
|
+ color="#303030" size="24"></u-icon>
|
|
|
+ </template>
|
|
|
+ </u--input>
|
|
|
+ <u--input class="h-112 mgt-16" v-model="loginParam.confirmPwd" :password="!isViewConfirmPwd"
|
|
|
+ placeholder="请确认密码" border="bottom" clearable>
|
|
|
+ <template slot="suffix">
|
|
|
+ <u-icon @click="isViewConfirmPwd = !isViewConfirmPwd"
|
|
|
+ :name="!isViewConfirmPwd ? 'eye-fill' : 'eye-off'" color="#303030" size="24"></u-icon>
|
|
|
+ </template>
|
|
|
+ </u--input>
|
|
|
+
|
|
|
+ <u-button :disabled="!isSubmit" class="login" @tap="submit">提交</u-button>
|
|
|
+
|
|
|
+ <view class="mgt-48 text-24 text-7E7E7E text-500">
|
|
|
+ 登录即代表同意
|
|
|
+ <text class="text-303030">《用户协议》</text>和
|
|
|
+ <text class="text-303030">《隐私政策》</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- title: '我的'
|
|
|
- }
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isViewPassword: false,
|
|
|
+ isViewConfirmPwd: false,
|
|
|
+ isCode: false,//验证码按钮状态
|
|
|
+ tips: '',// 验证码提示文字
|
|
|
+ seconds: 60,//验证码秒数
|
|
|
+ loginParam: {
|
|
|
+ inviteCode: undefined,
|
|
|
+ phone: undefined,
|
|
|
+ code: undefined,
|
|
|
+ password: undefined,
|
|
|
+ confirmPwd: undefined,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isShowCode() {
|
|
|
+ return this.loginParam.phone && !this.isCode
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ isSubmit() {
|
|
|
+ return this.loginParam.phone && this.loginParam.code &&
|
|
|
+ this.loginParam.password && this.loginParam.confirmPwd
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- methods: {
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ codeChange(text) {
|
|
|
+ this.tips = text;
|
|
|
+ },
|
|
|
+ getCode() {
|
|
|
+ if (this.$refs.uCode.canGetCode) {
|
|
|
+ // 模拟向后端请求验证码
|
|
|
+ uni.showLoading({
|
|
|
+ title: '正在获取验证码'
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // 这里此提示会被this.start()方法中的提示覆盖
|
|
|
+ uni.$u.toast('验证码已发送');
|
|
|
+ // 通知验证码组件内部开始倒计时
|
|
|
+ this.$refs.uCode.start();
|
|
|
+ }, 2000);
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('倒计时结束后再发送');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ end() {
|
|
|
+ // uni.$u.toast('倒计时结束');
|
|
|
+ this.isCode = false
|
|
|
+ },
|
|
|
+ start() {
|
|
|
+ // uni.$u.toast('倒计时开始');
|
|
|
+ this.isCode = true
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ console.log('提交参数 :===>>', this.loginParam);
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+<style scoped lang="scss">
|
|
|
+.content {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.top_bg {
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 568rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: linear-gradient(to bottom, #ffd8bf, #ffffff);
|
|
|
|
|
|
- .logo {
|
|
|
- height: 200rpx;
|
|
|
- width: 200rpx;
|
|
|
- margin-top: 200rpx;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- margin-bottom: 50rpx;
|
|
|
+ .top_close {
|
|
|
+ position: absolute;
|
|
|
+ top: 128rpx;
|
|
|
+ left: 40rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
}
|
|
|
|
|
|
- .text-area {
|
|
|
+ .top_text {
|
|
|
+ position: absolute;
|
|
|
+ top: 224rpx;
|
|
|
+ left: 64rpx;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ color: #070602;
|
|
|
+ font-family: "MiSans VF";
|
|
|
+ font-size: 52rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: normal;
|
|
|
+ letter-spacing: 0.66rpx;
|
|
|
+ text-transform: uppercase;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_icon {
|
|
|
+ margin-top: -10rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 6rpx solid #4caf50;
|
|
|
+ background-color: transparent;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.main {
|
|
|
+ margin-top: -72rpx;
|
|
|
|
|
|
- .title {
|
|
|
+ .login {
|
|
|
+ margin-top: 112rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ width: 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 64rpx;
|
|
|
+ background: #FE6505;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "MiSans VF";
|
|
|
font-size: 36rpx;
|
|
|
- color: #8f8f94;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code_btn {
|
|
|
+ padding: 0rpx 24rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ background: linear-gradient(0deg, #FE6505 0%, #FE6505 100%), #141111;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code_btn_off {
|
|
|
+ background: #fe65054d;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
