159 lines
3.0 KiB
Vue
159 lines
3.0 KiB
Vue
<template>
|
|
<view class="wrap">
|
|
<view class="top">
|
|
<view class="title">欢迎登录余乐兑</view>
|
|
</view>
|
|
<view class="content">
|
|
|
|
<u-input class="u-border-bottom" v-model="tel" type="tel" placeholder="请输入手机号" />
|
|
<view class="tips"></view>
|
|
<view :style="{display: showcode === '' ? '' : 'none'}">
|
|
<u-input class="u-border-bottom" v-model="password" type="password" placeholder="请输入密码" />
|
|
</view>
|
|
<view class="tips"></view>
|
|
<view class="tips"></view>
|
|
<button @tap="submit" :style="[inputStyle]" class="getCaptcha">登录</button>
|
|
</view>
|
|
<view class="buttom">
|
|
<view class="hint">
|
|
<checkbox :checked="checkbutton" @click="checkChange" style="transform:scale(0.7)" />
|
|
我已阅读并同意
|
|
<text class="link">余乐兑《服务协议》、《隐私政策》</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tel: '',
|
|
password: '',
|
|
tips: '',
|
|
showcode: '',
|
|
checkbutton: false
|
|
}
|
|
},
|
|
computed: {
|
|
inputStyle() {
|
|
let style = {};
|
|
if (this.tel) {
|
|
style.color = "#fff";
|
|
style.backgroundColor = this.$u.color['warning'];
|
|
}
|
|
return style;
|
|
}
|
|
},
|
|
methods: {
|
|
//提交
|
|
submit() {
|
|
if (this.checkbutton == false) {
|
|
this.$u.toast("请同意服务协议和隐私协议！")
|
|
return
|
|
}
|
|
if (this.$u.test.mobile(this.tel)) {
|
|
uni.setStorageSync('phone', this.tel);
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
}
|
|
},
|
|
//复选协议
|
|
checkChange(e) {
|
|
if (this.checkbutton == true) {
|
|
this.checkbutton = false
|
|
} else {
|
|
this.checkbutton = true
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrap {
|
|
font-size: 28rpx;
|
|
|
|
.top {
|
|
width: 600rpx;
|
|
margin: 100rpx auto;
|
|
|
|
.title {
|
|
text-align: left;
|
|
font-size: 60rpx;
|
|
font-weight: 500;
|
|
margin-bottom: 100rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 600rpx;
|
|
margin: 80rpx auto 0;
|
|
|
|
.u-border-bottom {
|
|
// color: $u-type-info;
|
|
margin-bottom: 30rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.u-size-default {
|
|
width: 120rpx;
|
|
height: 50rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.tips {
|
|
// color: $u-type-info;
|
|
margin-bottom: 20rpx;
|
|
margin-top: 8rpx;
|
|
font-size: 12rpx;
|
|
}
|
|
|
|
.getCaptcha {
|
|
background-color: rgb(253, 243, 208);
|
|
// color: $u-tips-color;
|
|
border: none;
|
|
font-size: 30rpx;
|
|
padding: 12rpx 0;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.alternative {
|
|
// color: $u-tips-color;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
|
|
.buttom {
|
|
.loginType {
|
|
display: flex;
|
|
padding: 200rpx 150rpx 150rpx 150rpx;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// color: $u-content-color;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
padding: 20rpx 40rpx;
|
|
font-size: 20rpx;
|
|
color: $u-tips-color;
|
|
|
|
.link {
|
|
// color: $u-type-warning;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |