<!-- 登录页 -->
<view class="login-wrap">
<view class="flex-column colcenter user-info">
<open-data class="avatar" type="userAvatarUrl" />
<open-data class="nickname" type="userNickName" />
</view>
<view class="flex colcenter input-wrap user">
<z-input
class="col-1"
:value="userId"
dataId="userId"
placeholder="用户名"
@input="onKeyInput"
></z-input>
</view>
<!-- <view class="flex colcenter input-wrap pwd">
<z-input class="col-1" :value="userPwd" dataId="userPwd" password placeholder="密码" @input="onKeyInput"></z-input>
</view> -->
<view class="flex colcenter input-wrap captcha">
<z-input
class="col-1"
:value="checkNum"
dataId="checkNum"
placeholder="验证码"
@input="onKeyInput"
></z-input>
<text v-show="!showCountDown" class="get-captcha" @click="getCaptcha"
>获取验证码</text
>
<text v-show="showCountDown" class="get-captcha"
>{{ countDown }}s后重试</text
>
</view>
<view class="login-btn">
<z-button size="max" @click="goLogin">
<text>登录</text>
</z-button>
</view>
<view class="register-btn">
<z-button size="max" @click="register" >
<text>注册</text>
</z-button>
</view>
</view>
</template>
<script>
import { getCaptcha, loginBind } from "../../api";
import { SMG, MSG_SWITCH_TAB } from "../../util";
// 在组件中使用mapActions 辅助函数
import { mapState, mapActions } from "vuex";
import zButton from "@/components/z-button/z-button.vue";
import zInput from "@/components/z-input/z-input.vue";
export default {
data() {
return {
code: "",
userId: "",
userPwd: "",
checkNum: "",
showCountDown: false,
countDown: 60,
};
},
// 页面加载事件
onLoad() {
let self = this;
uni.login({
provider: "weixin",
success: function (res) {
self.code = res.code;
},
});
// 从本地缓存中同步获取指定 token 对应的内容
const tokenKey = uni.getStorageSync("token");
if (tokenKey) {
this.setToken(tokenKey);
}
// 检查登录状态是否过期
uni.checkSession({
success: (res) => {
if (!tokenKey) {
this.wxLogin();
} else {
uni.switchTab({
url: "/pages/home/home",
});
}
},
fail: () => {
this.wxLogin();
},
});
},
methods: {
...mapActions(["setToken", "wxLogin"]),
isArray(o) {
return Object.prototype.toString.call(o) == "[object Array]";
},
isEmpty(obj) {
if (typeof obj == "undefined" || obj == null || obj == "") {
return true;
} else {
return false;
}
},
nonEmptycheck(arr) {
const rule = {
userId: "用户名不能为空",
// userPwd: "密码不能为空",
checkNum: "验证码不能为空",
};
if (this.isArray(arr)) {
return _.every(arr, (key) => {
if (this.isEmpty(this[key])) {
SMG(rule[key]);
}
return !this.isEmpty(this[key]);
});
}
},
register() {
uni.navigateTo({
url: '/pages/register/register'
});
},
// 注册账号
onKeyInput(key, value) {
this[key] = value;
},
getCaptcha() {
if (this.nonEmptycheck(["userId"])) {
getCaptcha({
userId: this.userId,
})
.then((res) => {
this.showCountDown = true;
var time = setInterval(() => {
this.countDown -= 1;
if (!this.countDown) {
clearInterval(time);
this.countDown = 60;
this.showCountDown = false;
}
}, 1000);
if (res.msg == null) {
SMG("验证码发送成功");
} else {
SMG("验证码发送成功" + res.msg);
}
})
.catch((err) => {
console.info(err);
});
}
},
goLogin() {
if (this.nonEmptycheck(["userId", "checkNum"])) {
loginBind({
userId: this.userId,
// userPwd: this.userPwd,
checkNum: this.checkNum,
code: this.code,
})
.then((res) => {
const sessionId = res.data;
if (sessionId) {
uni.setStorageSync("token", sessionId);
this.setToken(sessionId);
}
MSG_SWITCH_TAB({
title: "登录成功",
url: "/pages/home/home",
});
})
.catch((err) => {
console.info(err);
});
}
},
},
components: {
zButton,
zInput,
},
};
</script>
<style lang="less">
.login-wrap {
height: 100%;
padding: 0 60upx;
background-color: #fff;
// background:#aaa ;
.user-info {
padding: 100upx 0 40upx;
.avatar {
width: 160upx;
height: 160upx;
border-radius: 50%;
overflow: hidden;
}
.nickname {
line-height: 60upx;
color: #aaa;
font-size: 28upx;
}
}
.input-wrap {
position: relative;
height: 70upx;
margin-bottom: 30upx;
padding-left: 40upx;
border: 1upx solid #e1e1e1;
border-radius: 10upx;
overflow: hidden;
&.user {
&::before {
position: absolute;
left: 20upx;
content: "\e600";
color: #797878;
font-family: "iconfont";
font-size: 32upx;
}
}
&.pwd {
&::before {
position: absolute;
left: 20upx;
content: "\e61d";
color: #797878;
font-family: "iconfont";
font-size: 32upx;
}
}
&.captcha {
&::before {
position: absolute;
left: 20upx;
content: "\e671";
color: #797878;
font-family: "iconfont";
font-size: 32upx;
}
}
.iconfont {
width: 80upx;
font-size: 32upx;
text-align: center;
}
.get-captcha {
width: 150upx;
padding: 0 20upx;
border-left: 1upx solid #ed2929;
color: #ff8813;
font-size: 28upx;
text-align: center;
}
}
.login-btn {
margin-top: 80upx;
button {
background-color: #5293ec;
color: #fff;
}
}
.register-btn {
margin-top: 20upx;
button {
background-color: #d80c20;
color: #fff;
}
}
}
</style>
2 个回复
情疏 (作者) - 情疏
k***@163.com - 1
is not defined
是不是因为 .every()
情疏 (作者)
看样子是的了.... 不好意思,眼瞎了,也不知道为啥页面搜索 _ 竟然没搜到这个
2021-07-31 14:57