|
@@ -3,42 +3,54 @@
|
|
|
<view class="title">
|
|
|
<view>欢迎使用WORKARK</view>
|
|
|
</view>
|
|
|
- <view class="form">
|
|
|
- <view class="tab">
|
|
|
- <view :class="loginType == 1 ? 'tab-item select type1' : 'tab-item type1'" @click="loginType=1">验证码登录
|
|
|
+ <view class="form-box">
|
|
|
+ <view class="form-tab">
|
|
|
+ <view :class="loginType == 1 ? 'tab-item select type1' : 'tab-item type1'" @click="loginType=1">
|
|
|
+ 验证码登录
|
|
|
</view>
|
|
|
- <view :class="loginType == 2 ? 'tab-item select type2' : 'tab-item type2'" @click="loginType=2">账号密码登陆
|
|
|
+ <view :class="loginType == 2 ? 'tab-item select type2' : 'tab-item type2'" @click="loginType=2">
|
|
|
+ 账号密码登陆
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="inputs_button">
|
|
|
- <view class="inputs">
|
|
|
+ <view class="form-input">
|
|
|
+ <view class="input-box">
|
|
|
<view class="account">
|
|
|
- <input type="number" v-model="account" :adjust-position="false" placeholder="手机号" />
|
|
|
+ <input class="input-inner" type="number" v-model="account" :adjust-position="false"
|
|
|
+ placeholder="手机号" />
|
|
|
</view>
|
|
|
<view class="password" v-if="loginType==2">
|
|
|
- <input :type="pwdShow? 'text' : 'password'" v-model="password" :adjust-position="false"
|
|
|
- placeholder="密码" />
|
|
|
- <uni-icons :type="pwdShow? 'eye-filled' : 'eye-slash-filled'" size="24" color="#cccccc"
|
|
|
+ <input class="input-inner" :type="pwdShow? 'text' : 'password'" v-model="password"
|
|
|
+ :adjust-position="false" placeholder="密码" />
|
|
|
+ <uv-icon :name="pwdShow? 'eye-fill' : 'eye-off'" size="50rpx" color="#cccccc"
|
|
|
@click="pwdShow=!pwdShow">
|
|
|
- </uni-icons>
|
|
|
+ </uv-icon>
|
|
|
</view>
|
|
|
<view class="vcode" v-if="loginType==1">
|
|
|
- <input type="number" v-model="vcode" :adjust-position="false" placeholder="验证码" />
|
|
|
- <text v-if="vcodeTime==0" style="color:#3264ed" @click="getVcode">获取验证码</text>
|
|
|
- <text v-else style="color:#ccc">重新获取({{vcodeTime}}s)</text>
|
|
|
+ <input class="input-inner" type="number" v-model="vcode" :adjust-position="false"
|
|
|
+ placeholder="验证码" />
|
|
|
+ <uv-button type="primary" :text="codeTips" @click="getCode" size="small"
|
|
|
+ :disabled="codeDisabled">
|
|
|
+ </uv-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="button">
|
|
|
- <view @click="login">
|
|
|
+ <view class="button-item" @click="login">
|
|
|
登录
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <uv-code ref="code" :seconds="seconds" @end="codeDisabled = false" @start="codeDisabled = true"
|
|
|
+ @change="text => codeTips = text">
|
|
|
+ </uv-code>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pact">
|
|
|
- <radio :checked="pactChecked" activeBackgroundColor="#3264ed" activeBorderColor="#3264ed"
|
|
|
- borderColor="#3264ed" color="#fff" @click="pactChange" />
|
|
|
- <view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
|
|
|
+ <uv-checkbox-group v-model="pactChecked" shape="circle" placement="column" customStyle="maxWidth:208rpx;"
|
|
|
+ labelSize="24rpx">
|
|
|
+ <uv-checkbox name="apple" label="我已阅读并同意"></uv-checkbox>
|
|
|
+ </uv-checkbox-group>
|
|
|
+ <uv-text text="《用户协议》" size="24rpx" type="primary" @click="toPact"></uv-text>
|
|
|
+ <uv-text text="和" size="24rpx"></uv-text>
|
|
|
+ <uv-text text="《隐私协议》" size="24rpx" type="primary" @click="toPact"></uv-text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -54,34 +66,38 @@
|
|
|
pwdShow: false,
|
|
|
pactChecked: false,
|
|
|
vcodeTime: 0,
|
|
|
- vcodeTimer: null
|
|
|
+ vcodeTimer: null,
|
|
|
+ codeTips: '',
|
|
|
+ seconds: 60,
|
|
|
+ codeDisabled: false
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ getCode() {
|
|
|
+ if (this.$refs.code.canGetCode) {
|
|
|
+ // 模拟向后端请求验证码
|
|
|
+ uni.showLoading({
|
|
|
+ title: '正在获取验证码'
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // 这里此提示会被this.start()方法中的提示覆盖
|
|
|
+ this.$toast('验证码已发送');
|
|
|
+ // 通知验证码组件内部开始倒计时
|
|
|
+ this.$refs.code.start();
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ },
|
|
|
login() {
|
|
|
uni.showToast({
|
|
|
title: "登录方式" + this.loginType,
|
|
|
icon: 'none'
|
|
|
})
|
|
|
},
|
|
|
- getVcode() {
|
|
|
- this.vcodeTime = 60
|
|
|
- this.vcodeTimer = setInterval(() => {
|
|
|
- if (this.vcodeTime > 0) {
|
|
|
- this.vcodeTime--
|
|
|
- } else {
|
|
|
- clearInterval(this.vcodeTimer)
|
|
|
- this.vcodeTimer = null
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
- uni.showToast({
|
|
|
- title: "获取验证码",
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- },
|
|
|
+ getVcode() {},
|
|
|
pactChange() {
|
|
|
this.pactChecked = !this.pactChecked
|
|
|
},
|
|
@@ -103,98 +119,90 @@
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- padding-top: 180rpx;
|
|
|
- padding-bottom: 40rpx;
|
|
|
- padding-left: 64rpx;
|
|
|
- font-size: 48rpx;
|
|
|
- font-weight: 700;
|
|
|
- color: #383838;
|
|
|
- }
|
|
|
-
|
|
|
- .form {
|
|
|
- flex: 1;
|
|
|
- margin: 0 32rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- background-color: #fff;
|
|
|
- overflow: hidden;
|
|
|
+ .form-box {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
- .inputs_button {
|
|
|
- background-color: #fff;
|
|
|
+ .form-input {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .inputs {
|
|
|
- padding: 150rpx 32rpx 0;
|
|
|
- margin-bottom: 80rpx;
|
|
|
-
|
|
|
- .account,
|
|
|
- .password,
|
|
|
- .vcode {
|
|
|
- height: 96rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 0 48rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background-color: #f7fafc;
|
|
|
-
|
|
|
- input {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .account {
|
|
|
- margin-bottom: 48rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .vcode {
|
|
|
- text {
|
|
|
- text-wrap: nowrap;
|
|
|
- font-size: 26rpx;
|
|
|
- background-color: #fff;
|
|
|
- padding: 14rpx 30rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .input-box {
|
|
|
+ padding: 150rpx 32rpx 0;
|
|
|
+ margin-bottom: 80rpx;
|
|
|
+ }
|
|
|
|
|
|
- .button {
|
|
|
- padding: 0 32rpx;
|
|
|
-
|
|
|
- view {
|
|
|
- line-height: 96rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 32rpx;
|
|
|
- background-color: #3264ed;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .account,
|
|
|
+ .password,
|
|
|
+ .vcode {
|
|
|
+ height: 96rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 0 48rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #f7fafc;
|
|
|
|
|
|
+ .input-inner {
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .pact {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding-bottom: 120rpx;
|
|
|
- font-size: 24rpx;
|
|
|
+ .account {
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ }
|
|
|
|
|
|
- text {
|
|
|
- color: #3264ed;
|
|
|
- }
|
|
|
+ .vcode-text {
|
|
|
+ text-wrap: nowrap;
|
|
|
+ font-size: 26rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 14rpx 30rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ }
|
|
|
|
|
|
- radio {
|
|
|
- :deep(.uni-radio-input) {
|
|
|
- border: 1rpx solid #3264ed;
|
|
|
- }
|
|
|
+ .button {
|
|
|
+ padding: 0 32rpx;
|
|
|
|
|
|
- transform:scale(0.6)
|
|
|
- }
|
|
|
+ .button-item {
|
|
|
+ line-height: 96rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ background-color: $uv-primary;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pact {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-bottom: 120rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ height: 40rpx;
|
|
|
+
|
|
|
+ ::v-deep .uv-text {
|
|
|
+ width: auto;
|
|
|
+ flex: inherit;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .tab {
|
|
|
+ .title {
|
|
|
+ padding-top: 180rpx;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ padding-left: 64rpx;
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #383838;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-tab {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|