theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v

Browse Source
This commit is contained in:
zmr900709
2020-06-15 15:31:31 +08:00
parent 2eb42caeaa
commit c2916b57b1
4 changed files with 268 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
pageA/login/login.vue
View File

@@ -13,8 +13,14 @@
<view class="labales">
<!-- <text></text> -->
<input type="tel" placeholder="请输入验证码" />
<text class="identifying" @click="getCode">{{text}}</text>
<!-- <text class="identifying" @click="getCode">{{text}}</text> -->
<view class="wrap">
<u-toast ref="uToast"></u-toast>
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
<view class="view_getcode" @tap="getCode">{{tips}}</view>
</view>
</view>
<!-- 服务协议 -->
<view class="pact">
<view></view>
@@ -34,7 +40,9 @@
<text class="other" @click="mask_u">其他方式登录</text>
</view>
<!-- denglu QQ weixin -->
<u-button>{{login}}</u-button>
<view class="buttones">
<u-button>{{login}}</u-button>
</view>
<u-mask :show="show" @click="show = false">
<view class="warp">
<view class="rect" @tap.stop>
@@ -43,7 +51,7 @@
<view>QQ登录</view>
</view>
<view class="rect_view">
<image src="../../static/pageA/weixin.png" class="image" ></image>
<image src="../../static/pageA/weixin.png" class="image"></image>
<view>微信登录</view>
</view>
<view class="rect_butoon" @click="show = false">取消</view>
@@ -62,9 +70,12 @@
disabled: false
}],
value: '',
text : '获取验证码',
text: '获取验证码',
login: '登录',
show: false
show: false,
tips: '',
// refCode: null,
seconds: 60,
};
},
methods: {
@@ -76,22 +87,69 @@
checkboxGroupChange(e) {
// console.log(e);
},
mask_u(){
mask_u() {
this.show = !this.show
},
// 获取验证码倒计时
getCode(){
getCode() {
console.log("11")
this.loading()
},
loading(){
loading() {
},
codeChange(text) {
this.tips = text;
},
getCode() {
if (this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
})
setTimeout(() => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
this.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
}, 2000);
} else {
this.$u.toast('倒计时结束后再发送');
}
},
end() {
this.$u.toast('倒计时结束');
},
start() {
this.$u.toast('倒计时开始');
}
}
};
</script>
<style lang="scss" scoped>
.wrap {
background: none;
width: 200rpx;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 30rpx;
.view_getcode{
height: 50rpx;
line-height: 50rpx;
font-size: 30rpx;
color: #FF780F!important;
}
}
.warp .view_getcode{
width: 200rpx;
color: #FF780F!important;
}
.login {
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
@@ -163,28 +221,22 @@
height: 70rpx;
line-height: 70rpx;
}
.labales:nth-child(3) {
position: relative;
margin-bottom: 10px;
}
.identifying {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 30rpx;
font-weight: 500;
color: rgba(255, 120, 15, 1);
line-height: 20px;
.identifying {
}
}
.uni-input-input, .uni-input-placeholder{
color:#fff!important;
letter-spacing: 2rpx;
}
.uni-input-input,
.uni-input-placeholder {
color: #fff !important;
letter-spacing: 2rpx;
}
.pact text {
font-size: 22rpx;
@@ -204,9 +256,9 @@
.pact {
position: relative;
padding-left: 40rpx;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.u-checkbox-group {
@@ -223,7 +275,7 @@
height: 22rpx;
}
.u-btn {
.buttones .u-btn {
width: 628rpx;
height: 98rpx;
background: rgba(255, 120, 15, 1) !important;
@@ -253,26 +305,31 @@
zoom: 1;
position: relative;
display: flex;
flex-wrap:wrap;
display: -webkit-flex; /* Safari */
.rect_view{
flex-wrap: wrap;
display: -webkit-flex;
/* Safari */
.rect_view {
width: 100rpx;
height: 100rpx;
.image{
width: 45rpx;
height: 53rpx;
display: inline-block;
.image {
width: 45rpx;
height: 53rpx;
display: inline-block;
}
flex:1;
margin-top: 77rpx;
}
.rect_view:nth-child(2) image{
.rect_view:nth-child(2) image {
width: 57rpx;
height: 45rpx;
}
.rect_butoon{
.rect_butoon {
width: 100%;
position: absolute;
bottom: 0;
@@ -281,38 +338,49 @@
line-height: 85rpx;
border-top: 1px #999999 solid;
}
view{
view {
color: #666;
font-size:24rpx;
font-size: 24rpx;
margin-top: 30rpx;
}
}
.rect_view:nth-child(1) image,.rect_view:nth-child(1) view{
.rect_view:nth-child(1) image,
.rect_view:nth-child(1) view {
float: right;
}
.rect_view:nth-child(1) image{
.rect_view:nth-child(1) image {
margin-right: 20rpx;
}
.rect_view:nth-child(1){
.rect_view:nth-child(1) {
position: relative;
margin-right: 79rpx;
}
.rect_view:nth-child(1) view{
.rect_view:nth-child(1) view {
position: absolute;
bottom: 0;
right: 0;
}
.rect_view:nth-child(2) image,.rect_view:nth-child(2) view{
.rect_view:nth-child(2) image,
.rect_view:nth-child(2) view {
float: left;
}
.rect_view:nth-child(2) image{
.rect_view:nth-child(2) image {
margin-left: 20rpx;
}
.rect_view:nth-child(2){
.rect_view:nth-child(2) {
position: relative;
}
.rect_view:nth-child(2) view{
.rect_view:nth-child(2) view {
position: absolute;
bottom: 0;
left: 0;