|
|
@@ -2,7 +2,8 @@
|
|
|
<view class="app-login-page">
|
|
|
<view class="app-login">
|
|
|
<view class="app-icon mb-30">
|
|
|
- <image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/login-icon.png" mode="aspectFit" style="height: 40px;"></image>
|
|
|
+ <image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/login-icon.png"
|
|
|
+ mode="aspectFit" style="height: 40px;"></image>
|
|
|
</view>
|
|
|
<view class="app-title mb-30">
|
|
|
欢迎使用会员中心系统小程序
|
|
|
@@ -11,16 +12,16 @@
|
|
|
<view class="loginType">
|
|
|
<text :class="[loginType=='phone'? 'loginType-text-active': 'loginType-text']"
|
|
|
@click="loginType = 'phone'">手机登录</text>
|
|
|
- <text :class="[loginType=='userName'? 'loginType-text-active': 'loginType-text']"
|
|
|
- @click="loginType = 'userName'">账号登录</text>
|
|
|
+ <text :class="[loginType=='username'? 'loginType-text-active': 'loginType-text']"
|
|
|
+ @click="loginType = 'username'">账号登录</text>
|
|
|
</view>
|
|
|
<view class="phone-form" v-if="loginType=='phone'">、
|
|
|
<view class="form-item">
|
|
|
- <u-input height="80" placeholder="请输入手机号" border-color="#d0d0d0" v-model="phoneForm.shouJiHao"
|
|
|
+ <u-input height="80" placeholder="请输入手机号" border-color="#d0d0d0" v-model="phoneForm.phone"
|
|
|
:border="true" class="form-item-input" type="number" @confirm="phoneLoginHandle" />
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
- <u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0" v-model="phoneForm.yanZhengMa"
|
|
|
+ <u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0" v-model="phoneForm.captcha"
|
|
|
:border="true" class="form-item-input" @confirm="phoneLoginHandle" />
|
|
|
<text class="form-item-text" @click="getCode">{{tips}}</text>
|
|
|
<!-- <text class="form-item-text" v-if="!isCounting" @click="requestVerificationCode">
|
|
|
@@ -32,13 +33,13 @@
|
|
|
立即登录
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="phone-form" v-if="loginType=='userName'">、
|
|
|
+ <view class="phone-form" v-if="loginType=='username'">、
|
|
|
<view class="form-item">
|
|
|
- <u-input height="80" placeholder="请输入账号" border-color="#d0d0d0" v-model="userNameForm.zhangHao"
|
|
|
+ <u-input height="80" placeholder="请输入账号" border-color="#d0d0d0" v-model="userNameForm.username"
|
|
|
:border="true" class="form-item-input" @confirm="userNameLoginHandle" />
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
- <u-input height="80" placeholder="请输入密码" border-color="#d0d0d0" v-model="userNameForm.miMa"
|
|
|
+ <u-input height="80" placeholder="请输入密码" border-color="#d0d0d0" v-model="userNameForm.password"
|
|
|
:border="true" class="form-item-input" @confirm="userNameLoginHandle" />
|
|
|
</view>
|
|
|
<view class="form-button" @click="userNameLoginHandle">
|
|
|
@@ -60,11 +61,13 @@
|
|
|
<view class="app-icon mb-30">
|
|
|
<u-button v-if="canIUseGetUserProfile" @click="getUserProfile" class="custom-button"
|
|
|
style="width: 40px;" plain :hair-line="false">
|
|
|
- <image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png" mode="aspectFit" style="width: 40px;height: 40px;" />
|
|
|
+ <image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png"
|
|
|
+ mode="aspectFit" style="width: 40px;height: 40px;" />
|
|
|
</u-button>
|
|
|
<u-button v-else open-type="getPhoneNumber" @getuserinfo="decryptPhoneNumber" class="custom-button"
|
|
|
style="width: 40px;" plain :hair-line="false">
|
|
|
- <image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png" mode="aspectFit" style="width: 40px;height: 40px;" />
|
|
|
+ <image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png"
|
|
|
+ mode="aspectFit" style="width: 40px;height: 40px;" />
|
|
|
</u-button>
|
|
|
<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> -->
|
|
|
<!-- <image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png" mode="aspectFit" style="height: 40px;"></image> -->
|
|
|
@@ -76,9 +79,9 @@
|
|
|
<text class="popup-title">请输入验证码</text>
|
|
|
<view class="popup-content">
|
|
|
<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0"
|
|
|
- v-model="shuzijiaoduimaForm.shuzijiaoduima" :border="true" class="form-item-input"
|
|
|
+ v-model="numberCaptchaForm.numberCaptcha" :border="true" class="form-item-input"
|
|
|
style="flex-grow: 1;" @confirm="submitCode" />
|
|
|
- <image :src="shuzijiaoduimaSrc" mode="aspectFit"
|
|
|
+ <image :src="numberCaptchaSrc" mode="aspectFit"
|
|
|
style="height:40px;margin-left:20rpx;width: 180rpx;flex: 0 0 auto;"></image>
|
|
|
</view>
|
|
|
<view class="popup-btn">
|
|
|
@@ -102,11 +105,15 @@
|
|
|
usernameLogin
|
|
|
} from "@/api/user.js"
|
|
|
import {
|
|
|
- msg
|
|
|
+ msg,
|
|
|
+ msgSuccess
|
|
|
} from "@/utils/common.js"
|
|
|
import {
|
|
|
useAuthStore
|
|
|
} from '@/store/authStore'
|
|
|
+ import {
|
|
|
+ encryptAESCBC
|
|
|
+ } from "@/utils/crypto.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -114,26 +121,26 @@
|
|
|
loginCode: '',
|
|
|
userBookModal: false,
|
|
|
// ----验证码 start -----
|
|
|
- shuzijiaoduimaForm: {
|
|
|
- shuzijiaoduima: '',
|
|
|
- shuzijiaoduimaUuid: ''
|
|
|
+ numberCaptchaForm: {
|
|
|
+ numberCaptcha: '',
|
|
|
+ numberCaptchaUuid: ''
|
|
|
},
|
|
|
- shuzijiaoduimaSrc: 'https://imgconvert.csdnimg.cn/aHR0cDovL3RjLnhpYW55dWNvZGVyLmNuL2Jsb2cyMDIwMDEwNDIwMzUwNy5wbmc?x-oss-process=image/format,png',
|
|
|
+ numberCaptchaSrc: 'https://imgconvert.csdnimg.cn/aHR0cDovL3RjLnhpYW55dWNvZGVyLmNuL2Jsb2cyMDIwMDEwNDIwMzUwNy5wbmc?x-oss-process=image/format,png',
|
|
|
show: false,
|
|
|
tips: '',
|
|
|
seconds: 60,
|
|
|
// ----验证码 end -----
|
|
|
loginType: "phone",
|
|
|
phoneForm: {
|
|
|
- shouJiHao: '15312341234',
|
|
|
- yanZhengMa: '123456',
|
|
|
- yanZhengMaUuid: ''
|
|
|
+ phone: '15312341234',
|
|
|
+ captcha: '123456',
|
|
|
+ captchaUuid: ''
|
|
|
},
|
|
|
userNameForm: {
|
|
|
- zhangHao: 'zhangsan',
|
|
|
- miMa: "12345678"
|
|
|
+ username: "",
|
|
|
+ password: ""
|
|
|
},
|
|
|
- userBook: false,
|
|
|
+ userBook: false, //协议
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -150,7 +157,7 @@
|
|
|
this.userBook = true;
|
|
|
const loginTypeHandler = {
|
|
|
phone: this.phoneLoginHandle,
|
|
|
- userName: this.userNameLoginHandle
|
|
|
+ username: this.userNameLoginHandle
|
|
|
};
|
|
|
// 调用相应的登录处理函数
|
|
|
(loginTypeHandler[this.loginType] || (() => {})).call(this);
|
|
|
@@ -158,17 +165,17 @@
|
|
|
// 手机登录
|
|
|
async phoneLoginHandle() {
|
|
|
const {
|
|
|
- shouJiHao,
|
|
|
- yanZhengMa
|
|
|
+ phone,
|
|
|
+ captcha
|
|
|
} = this.phoneForm;
|
|
|
|
|
|
// 手机号正则验证
|
|
|
- if (!/^1[3-9]\d{9}$/.test(shouJiHao)) {
|
|
|
+ if (!/^1[3-9]\d{9}$/.test(phone)) {
|
|
|
msg("请输入正确的手机号");
|
|
|
return;
|
|
|
}
|
|
|
// 验证码存在性检查
|
|
|
- if (!yanZhengMa) {
|
|
|
+ if (!captcha) {
|
|
|
msg("请输入验证码");
|
|
|
return;
|
|
|
}
|
|
|
@@ -194,35 +201,33 @@
|
|
|
},
|
|
|
// 账号登录
|
|
|
async userNameLoginHandle() {
|
|
|
- if (!this.userNameForm.zhangHao) {
|
|
|
+ if (!this.userNameForm.username) {
|
|
|
msg("请输入账号")
|
|
|
return;
|
|
|
}
|
|
|
- if (!this.userNameForm.miMa) {
|
|
|
+ if (!this.userNameForm.password) {
|
|
|
msg("请输入密码")
|
|
|
return;
|
|
|
}
|
|
|
- // usernameLogin(this.userNameForm).then(res=>{
|
|
|
- // console.log(res,45699)
|
|
|
- // })
|
|
|
let checkUserBook = await this.checkUserBook()
|
|
|
- if (!this.checkUserBook()) return;
|
|
|
- console.log(this.userNameForm)
|
|
|
- // 联调
|
|
|
- // 1.登录 发送请求
|
|
|
- // 2.保存 token
|
|
|
- // 3.获取个人信息，保存个人新
|
|
|
- msg("登录成功");
|
|
|
- setTimeout(() => {
|
|
|
- this.useAuthStore.setAuthToken("test")
|
|
|
- uni.setStorageSync("userinfo", {
|
|
|
- userId: "2121",
|
|
|
- isMember: true
|
|
|
- })
|
|
|
- uni.switchTab({
|
|
|
- url: "/pages/index/index"
|
|
|
- })
|
|
|
- }, 1000)
|
|
|
+ if (!this.checkUserBook()) {
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ const form = {
|
|
|
+ ...this.userNameForm
|
|
|
+ }
|
|
|
+ form.password = encryptAESCBC(form.password);
|
|
|
+ usernameLogin(form).then(res => {
|
|
|
+ if (res?.token) {
|
|
|
+ msgSuccess("登录成功！")
|
|
|
+ this.useAuthStore.setAuthToken(res.token)
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.switchTab({
|
|
|
+ url: "/pages/index/index"
|
|
|
+ })
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
toPage(url) {
|
|
|
uni.navigateTo({
|
|
|
@@ -235,9 +240,9 @@
|
|
|
},
|
|
|
getCode() {
|
|
|
let {
|
|
|
- shouJiHao
|
|
|
+ phone
|
|
|
} = this.phoneForm
|
|
|
- if (!/^1[3-9]\d{9}$/.test(shouJiHao)) {
|
|
|
+ if (!/^1[3-9]\d{9}$/.test(phone)) {
|
|
|
msg("请输入正确的手机号");
|
|
|
return;
|
|
|
}
|
|
|
@@ -264,7 +269,7 @@
|
|
|
setTimeout(() => {
|
|
|
uni.hideLoading();
|
|
|
msg('获取成功');
|
|
|
- // 显示模拟态，把获取过来的数字校对码的uuid赋给 shuzijiaoduimaForm.shuzijiaoduimaUuid
|
|
|
+ // 显示模拟态，把获取过来的数字校对码的uuid赋给 numberCaptchaForm.numberCaptchaUuid
|
|
|
this.show = true;
|
|
|
}, 1500);
|
|
|
// 联调
|
|
|
@@ -273,10 +278,10 @@
|
|
|
},
|
|
|
closePopup() {
|
|
|
this.show = false;
|
|
|
- this.shuzijiaoduimaForm.shuzijiaoduima = ''; // 清空输入框
|
|
|
+ this.numberCaptchaForm.numberCaptcha = ''; // 清空输入框
|
|
|
},
|
|
|
async submitCode() {
|
|
|
- if (this.shuzijiaoduimaForm.shuzijiaoduima.length !== 4) {
|
|
|
+ if (this.numberCaptchaForm.numberCaptcha.length !== 4) {
|
|
|
uni.showToast({
|
|
|
title: '请输入4位验证码',
|
|
|
icon: 'none'
|
|
|
@@ -286,7 +291,7 @@
|
|
|
console.log("联调：验证数字验证码是否正确")
|
|
|
console.log("联调：发送手机验证码")
|
|
|
// 联调 检验是否正确
|
|
|
- // const checkRes = await checkShuzijiaoduima();
|
|
|
+ // const checkRes = await checknumberCaptcha();
|
|
|
// if(!checkRes){
|
|
|
// uni.showToast({
|
|
|
// title: '验证码输入错误',
|
|
|
@@ -296,8 +301,8 @@
|
|
|
// }
|
|
|
// // 发送手机验证码
|
|
|
// const codeRes = await getCodeApi();
|
|
|
- // if(codeRes && codeRes.yanZhengMaUuid){
|
|
|
- // this.phoneForm.yanZhengMaUuid = codeRes.yanZhengMaUuid
|
|
|
+ // if(codeRes && codeRes.captchaUuid){
|
|
|
+ // this.phoneForm.captchaUuid = codeRes.captchaUuid
|
|
|
// this.closePopup();
|
|
|
// this.$refs.uCode1.start()
|
|
|
// }
|
|
|
@@ -315,9 +320,9 @@
|
|
|
// 加载验证码图片
|
|
|
async loadImage() {
|
|
|
// 联调
|
|
|
- // const img = await loadShuzijiaoduima();
|
|
|
- // this.shuzijiaoduimaForm.shuzijiaoduimaUuid = img.shuzijiaoduimaUuid
|
|
|
- // this.shuzijiaoduimaSrc = img.shuzijiaoduimaSrc
|
|
|
+ // const img = await loadnumberCaptcha();
|
|
|
+ // this.numberCaptchaForm.numberCaptchaUuid = img.numberCaptchaUuid
|
|
|
+ // this.numberCaptchaSrc = img.numberCaptchaSrc
|
|
|
console.log("加载图片")
|
|
|
},
|
|
|
// --------验证码 end---------
|
|
|
@@ -394,9 +399,10 @@
|
|
|
padding: 0 !important;
|
|
|
border-radius: 50rpx;
|
|
|
}
|
|
|
- .u-btn--default{
|
|
|
+
|
|
|
+ .u-btn--default {
|
|
|
border: none !important;
|
|
|
- background-color: transparent !important;
|
|
|
+ background-color: transparent !important;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
@@ -526,4 +532,4 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
littleblue55