|
|
@@ -1,25 +1,50 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="input-box">
|
|
|
- <view class="iconfont icon-shoujihao" />
|
|
|
- <input class="input" placeholder-class="placeholder" type="number" :value="phoneNumber" placeholder="请输入手机号码"
|
|
|
- data-name='phoneNumber' @input="onInput">
|
|
|
- </view>
|
|
|
- <view class="authcode" style="margin-top:15px;">
|
|
|
- <view class="input-box">
|
|
|
- <view class="iconfont icon-duanxinyanzheng" />
|
|
|
- <input class="input" placeholder-class="placeholder" type="number" :value="password" placeholder="请输入验证码"
|
|
|
- data-name='password' @input="onInput">
|
|
|
- </view>
|
|
|
- <button class="cu-btn bg-red" :loading='loading' @click="getAuthcode">{{ butText }}</button>
|
|
|
- </view>
|
|
|
- <u-button :customStyle="butSty" :disabled="phoneNumber == '' || password == ''" :loading="loading"
|
|
|
- loadingText='登陆中...' @click="startLogging">
|
|
|
- <text style="font-size: 4.267vw;">
|
|
|
- 确 定
|
|
|
- </text>
|
|
|
- </u-button>
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <view class="input-box">
|
|
|
+ <view class="iconfont icon-shoujihao" />
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ type="number"
|
|
|
+ :value="phoneNumber"
|
|
|
+ placeholder="请输入手机号码"
|
|
|
+ data-name="phoneNumber"
|
|
|
+ @input="onInput"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="authcode" style="margin-top: 15px">
|
|
|
+ <view class="input-box">
|
|
|
+ <view class="iconfont icon-duanxinyanzheng" />
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ :focus="focus"
|
|
|
+ type="number"
|
|
|
+ :value="password"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ data-name="password"
|
|
|
+ @input="onInput"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <button
|
|
|
+ :disabled="phoneNumber.length != 11"
|
|
|
+ class="cu-btn bg-red"
|
|
|
+ :loading="loading"
|
|
|
+ @click="getAuthcode"
|
|
|
+ >
|
|
|
+ {{ butText }}
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <u-button
|
|
|
+ :customStyle="butSty"
|
|
|
+ :disabled="phoneNumber == '' || password == ''"
|
|
|
+ :loading="loading"
|
|
|
+ loadingText="登陆中..."
|
|
|
+ @click="startLogging"
|
|
|
+ >
|
|
|
+ <text style="font-size: 4.267vw"> 确 定 </text>
|
|
|
+ </u-button>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -29,206 +54,212 @@ import { CheckPhoneNumber } from "../../../utils/basicInspection";
|
|
|
import { loginMsg } from "./dispose";
|
|
|
|
|
|
export default {
|
|
|
- name: "Phone",
|
|
|
- props: {
|
|
|
- isAgreement: Boolean
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loading: false,
|
|
|
- phoneNumber: "",
|
|
|
- password: "",
|
|
|
- butText: "获取验证码",
|
|
|
- butSty: {
|
|
|
- width: "73.333vw",
|
|
|
- height: "12.000vw",
|
|
|
- background: "#0A3971",
|
|
|
- borderRadius: "1.067vw",
|
|
|
- opacity: "0.65",
|
|
|
- borderWidth: 0,
|
|
|
- fontFamily: " PingFang SC - Regular, PingFang SC",
|
|
|
- color: " #FFFFFF",
|
|
|
- margin: "17.867vw auto 0"
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.phoneNumber = uni.getStorageSync("phoneNumber") || "";
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /* 获取验证码 */
|
|
|
- getAuthcode() {
|
|
|
- if (this.butText == '获取验证码' || this.butText == '重新获取') {
|
|
|
- if (!CheckPhoneNumber(this.phoneNumber, '请输入正确的手机号码')) return;
|
|
|
- this.$Http.getpassword({
|
|
|
- "phonenumber": this.phoneNumber,
|
|
|
- "systemclient": "wechat"
|
|
|
- }).then(res => {
|
|
|
- console.log("获取验证码", res)
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- duration: 3000,
|
|
|
- icon: "none",
|
|
|
- });
|
|
|
- if (res.code == 0) return;
|
|
|
- var count = 30;
|
|
|
- this.butText = count + 's';
|
|
|
- countDown = setInterval(() => {
|
|
|
- if (count == 0) {
|
|
|
- clearInterval(countDown);
|
|
|
- this.butText = '重新获取';
|
|
|
- } else {
|
|
|
- count = count - 1;
|
|
|
- this.butText = count + 's';
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
- });
|
|
|
- };
|
|
|
- },
|
|
|
- /* 输入框输入内容 */
|
|
|
- onInput(e) {
|
|
|
- this[e.currentTarget.dataset.name] = e.detail.value;
|
|
|
- },
|
|
|
- /* 开始登录 */
|
|
|
- startLogging() {
|
|
|
- if (this.loading) return;
|
|
|
- if (!this.isAgreement) return uni.showToast({
|
|
|
- title: '请阅读并勾选用户协议',
|
|
|
- icon: 'none',
|
|
|
- })
|
|
|
- if (!CheckPhoneNumber(this.phoneNumber, '请输入正确的手机号码')) return;
|
|
|
- if (this.password == "") return uni.showToast({
|
|
|
- title: '还未填写验证码',
|
|
|
- duration: 2000,
|
|
|
- icon: "none",
|
|
|
- });
|
|
|
- this.loading = true;
|
|
|
- this.$Http.plogin({
|
|
|
- "phonenumber": this.phoneNumber,
|
|
|
- "password": hexMD5(this.password),
|
|
|
- "systemclient": "wechat"
|
|
|
- }).then(res => {
|
|
|
- console.log("验证码登录", res)
|
|
|
- this.loading = false;
|
|
|
- if (res.code == 0) {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- duration: 2000,
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.setStorageSync("phoneNumber", this.phoneNumber);
|
|
|
- uni.setStorageSync("loginMethod", 'phone');
|
|
|
- loginMsg(res.account_list, this.$Http)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ name: "Phone",
|
|
|
+ props: {
|
|
|
+ isAgreement: Boolean,
|
|
|
+ getPermission: Function,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ phoneNumber: "",
|
|
|
+ password: "",
|
|
|
+ butText: "获取验证码",
|
|
|
+ focus: false,
|
|
|
+ butSty: {
|
|
|
+ width: "73.333vw",
|
|
|
+ height: "12.000vw",
|
|
|
+ background: "#0A3971",
|
|
|
+ borderRadius: "1.067vw",
|
|
|
+ opacity: "0.65",
|
|
|
+ borderWidth: 0,
|
|
|
+ fontFamily: " PingFang SC - Regular, PingFang SC",
|
|
|
+ color: " #FFFFFF",
|
|
|
+ margin: "17.867vw auto 0",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.phoneNumber = uni.getStorageSync("phoneNumber") || "";
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 获取验证码 */
|
|
|
+ getAuthcode() {
|
|
|
+ this.focus = false;
|
|
|
+ if (this.butText == "获取验证码" || this.butText == "重新获取") {
|
|
|
+ if (!CheckPhoneNumber(this.phoneNumber, "请输入正确的手机号码")) return;
|
|
|
+ this.$Http
|
|
|
+ .getpassword({
|
|
|
+ phonenumber: this.phoneNumber,
|
|
|
+ systemclient: "wechat",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("获取验证码", res);
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ duration: 3000,
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ if (res.code == 0) return;
|
|
|
+ this.focus = true;
|
|
|
+ var count = 30;
|
|
|
+ this.butText = count + "s";
|
|
|
+ countDown = setInterval(() => {
|
|
|
+ if (count == 0) {
|
|
|
+ clearInterval(countDown);
|
|
|
+ this.butText = "重新获取";
|
|
|
+ } else {
|
|
|
+ count = count - 1;
|
|
|
+ this.butText = count + "s";
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 输入框输入内容 */
|
|
|
+ onInput(e) {
|
|
|
+ this[e.currentTarget.dataset.name] = e.detail.value;
|
|
|
+ },
|
|
|
+ /* 开始登录 */
|
|
|
+ startLogging() {
|
|
|
+ if (this.loading) return;
|
|
|
+ if (!this.isAgreement) return this.$emit("getPermission", "phone");
|
|
|
+ if (!CheckPhoneNumber(this.phoneNumber, "请输入正确的手机号码")) return;
|
|
|
+ if (this.password == "")
|
|
|
+ return uni.showToast({
|
|
|
+ title: "还未填写验证码",
|
|
|
+ duration: 2000,
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ this.loading = true;
|
|
|
+ this.$Http
|
|
|
+ .plogin({
|
|
|
+ phonenumber: this.phoneNumber,
|
|
|
+ password: hexMD5(this.password),
|
|
|
+ systemclient: "wechat",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("验证码登录", res);
|
|
|
+ this.loading = false;
|
|
|
+ if (res.code == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ duration: 2000,
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.setStorageSync("phoneNumber", this.phoneNumber);
|
|
|
+ uni.setStorageSync("loginMethod", "phone");
|
|
|
+ loginMsg(res.account_list, this.$Http);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.input-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 275px;
|
|
|
- height: 45px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 4px;
|
|
|
- opacity: 0.65;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- .input {
|
|
|
- font-size: 14px;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .placeholder{
|
|
|
- font-size: 12px !important;
|
|
|
- }
|
|
|
-
|
|
|
- .iconfont {
|
|
|
- font-size: 11px;
|
|
|
- padding: 0 10px;
|
|
|
- color: #052E5D;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 275px;
|
|
|
+ height: 45px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ opacity: 0.65;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ font-size: 14px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .placeholder {
|
|
|
+ font-size: 12px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 11px;
|
|
|
+ padding: 0 10px;
|
|
|
+ color: #052e5d;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin: 0 10px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 0 10px;
|
|
|
}
|
|
|
|
|
|
input {
|
|
|
- width: 80%;
|
|
|
+ width: 80%;
|
|
|
}
|
|
|
|
|
|
/* 验证码 */
|
|
|
.authcode {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 45px;
|
|
|
- width: 275px;
|
|
|
- margin: 0 auto 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 45px;
|
|
|
+ width: 275px;
|
|
|
+ margin: 0 auto 0;
|
|
|
}
|
|
|
|
|
|
.authcode .input-box {
|
|
|
- width: 170px;
|
|
|
+ width: 170px;
|
|
|
}
|
|
|
|
|
|
.authcode .cu-btn {
|
|
|
- width: 97px;
|
|
|
- height: 45px;
|
|
|
- background: #0A3971;
|
|
|
- border-radius: 4px;
|
|
|
- opacity: 0.65;
|
|
|
- margin-left: 8px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- padding: 0;
|
|
|
+ width: 97px;
|
|
|
+ height: 45px;
|
|
|
+ background: #0a3971;
|
|
|
+ border-radius: 4px;
|
|
|
+ opacity: 0.65;
|
|
|
+ margin-left: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
|
- background-color: $my-color-main;
|
|
|
+ background-color: $my-color-main;
|
|
|
}
|
|
|
|
|
|
/deep/uni-checkbox.blue.checked .uni-checkbox-input {
|
|
|
- background-color: #0A3971 !important;
|
|
|
- opacity: 0.65;
|
|
|
+ background-color: #0a3971 !important;
|
|
|
+ opacity: 0.65;
|
|
|
}
|
|
|
|
|
|
.assist {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 274px;
|
|
|
- height: 17px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- color: #FFFFFF;
|
|
|
- margin: 13px auto 0;
|
|
|
-
|
|
|
- label {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- checkbox {
|
|
|
- transform: scale(0.6);
|
|
|
- background: #0A3971;
|
|
|
- color: #0A3971;
|
|
|
- border-radius: 4px;
|
|
|
- opacity: 0.65;
|
|
|
- border: 1px solid rgba(11, 63, 126, 0.1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- navigator {
|
|
|
- padding-right: 5px;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 274px;
|
|
|
+ height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ color: #ffffff;
|
|
|
+ margin: 13px auto 0;
|
|
|
+
|
|
|
+ label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ checkbox {
|
|
|
+ transform: scale(0.6);
|
|
|
+ background: #0a3971;
|
|
|
+ color: #0a3971;
|
|
|
+ border-radius: 4px;
|
|
|
+ opacity: 0.65;
|
|
|
+ border: 1px solid rgba(11, 63, 126, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ navigator {
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/deep/.u-button__loading-text {
|
|
|
- font-size: 14px !important;
|
|
|
+ font-size: 14px !important;
|
|
|
}
|
|
|
</style>
|
