|
|
@@ -2,18 +2,43 @@
|
|
|
<view>
|
|
|
<u-image src="../../static/sailun/login_bg.png" mode="widthFix"></u-image>
|
|
|
<view class="content">
|
|
|
- <u-card padding="50" :head-border-bottom="false" :show-head="false" :show-foot="false">
|
|
|
+ <u-card padding="70" :head-border-bottom="false" :show-head="false" :show-foot="false" :border="false" box-shadow="0px 1px 10px rgba(0,0,0,0.2)"
|
|
|
+ border-radius="20" margin="20rpx 50rpx">
|
|
|
<view slot="body">
|
|
|
- <u-field v-model="tel" icon="phone-fill" placeholder="请填写手机号">
|
|
|
- </u-field>
|
|
|
- <u-field v-model="code" icon="lock-fill" placeholder="请填写验证码">
|
|
|
- </u-field>
|
|
|
+ <view style="margin-top: 20rpx;">
|
|
|
+ <u-field v-model="tel" placeholder="请填写手机号" label-width="50">
|
|
|
+ <u-icon slot="icon" name="account" size="36" color="#666666"></u-icon>
|
|
|
+ </u-field>
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 30rpx;">
|
|
|
+ <u-field v-model="code" placeholder="请填写验证码" label-width="50">
|
|
|
+ <u-icon slot="icon" name="lock" size="36" color="#666666"></u-icon>
|
|
|
+ <u-button size="mini" slot="right" type="primary" @click="getCode" shape="circle">{{codeText}}</u-button>
|
|
|
+ </u-field>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
|
|
|
+ <view style="margin-top: 80rpx;">
|
|
|
+ <u-button type="primary" :ripple="true" ripple-bg-color="#99d4ff" shape="circle">登录</u-button>
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 100rpx;display: flex;justify-content: center;">
|
|
|
+ <view style="color: rgba(0,160,234,0.5)">
|
|
|
+ 还没有账号？
|
|
|
+ </view>
|
|
|
+ <view style="color: #00A0EA">
|
|
|
+ 立即注册
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</u-card>
|
|
|
- <button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
|
|
|
- <view class="alternative">
|
|
|
- <view class="password">密码登录</view>
|
|
|
- <view class="issue">遇到问题</view>
|
|
|
+ </view>
|
|
|
+ <view class="foot">
|
|
|
+ <view class="u-flex u-row-center u-col-center">
|
|
|
+ <u-line color="#0095FF" length="15%"/>
|
|
|
+ <view style="margin: 0 20rpx;color:#0095FF;font-family: Source Han Sans CN;">
|
|
|
+ 赛轮店管家
|
|
|
+ </view>
|
|
|
+ <u-line color="#0095FF" length="15%" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -24,19 +49,12 @@
|
|
|
data() {
|
|
|
return {
|
|
|
tel: '',
|
|
|
- code:''
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- inputStyle() {
|
|
|
- let style = {};
|
|
|
- if (this.tel) {
|
|
|
- style.color = "#fff";
|
|
|
- style.backgroundColor = this.$u.color['warning'];
|
|
|
- }
|
|
|
- return style;
|
|
|
+ code: '',
|
|
|
+ codeText: '',
|
|
|
+ pact: false
|
|
|
}
|
|
|
},
|
|
|
+ computed: {},
|
|
|
methods: {
|
|
|
submit() {
|
|
|
if (this.$u.test.mobile(this.tel)) {
|
|
|
@@ -44,6 +62,25 @@
|
|
|
url: 'pages/template/login/code'
|
|
|
})
|
|
|
}
|
|
|
+ },
|
|
|
+ codeChange(text) {
|
|
|
+ this.codeText = text;
|
|
|
+ },
|
|
|
+ getCode() {
|
|
|
+ if (this.$refs.uCode.canGetCode) {
|
|
|
+ // 模拟向后端请求验证码
|
|
|
+ uni.showLoading({
|
|
|
+ title: '正在获取验证码',
|
|
|
+ mask:"true"
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // 通知验证码组件内部开始倒计时
|
|
|
+ this.$refs.uCode.start();
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ this.$u.toast('倒计时结束后再发送');
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -52,6 +89,12 @@
|
|
|
<style lang="scss" scoped>
|
|
|
.content {
|
|
|
position: relative;
|
|
|
- top: -300rpx;
|
|
|
+ top: -400rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10rpx;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
</style>
|
qukaidi