qiubinghui
/
zhywpt-sp
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

'2023年8月2日09:15:18'

yxb
wq 1 年之前
父節點
aa55d582aa
當前提交
7ed52d996c
共有 3 個文件被更改，包括 324 次插入 和 342 次删除
分割檢視 顯示文件統計
  1. 298
    339
      login/login.vue
  2. 3
    3
      stores/user.js
  3. 23
    0
      utils/network/request.js

+ 298
- 339
login/login.vue 查看文件

@@ -1,353 +1,312 @@
<!-- 密码登录 -->
<template>
<view class="login-main as-gravity-center as-layout-vertical">
<image :src="`${$imgUrl}login/logo.png`" class="logo" mode="aspectFill"></image>
<view class="title">九州ETC</view>
<view class="form">
<view class="form-input">
<view> +86</view>
<image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" mode="aspectFill"/>
<input
class="input"
v-model="state.username"
focus
placeholder="请输入手机号"
placeholder-class="form-placeholder"
type="number"
maxlength="11"
/>
</view>
<view class="form-input" v-if="state.loginType === 'pwd'">
<input
class="input"
v-model="state.password"
type="text"
placeholder="请输入密码"
placeholder-class="form-placeholder"
:password="state.isPwdType ? true : false"
/>
<image
:src="`${$imgUrl}login/${
<view class="login-main as-gravity-center as-layout-vertical">
<image :src="`${$imgUrl}login/logo.png`" class="logo" mode="aspectFill"></image>
<view class="title">九州ETC</view>
<view class="form">
<view class="form-input">
<view> +86</view>
<image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" mode="aspectFill" />
<input class="input" v-model="state.username" focus placeholder="请输入手机号"
placeholder-class="form-placeholder" type="number" maxlength="11" />
</view>
<view class="form-input" v-if="state.loginType === 'pwd'">
<input class="input" v-model="state.password" type="text" placeholder="请输入密码"
placeholder-class="form-placeholder" :password="state.isPwdType ? true : false" />
<image :src="`${$imgUrl}login/${
state.isPwdType ? 'icon_eye_close' : 'icon_eye_open'
}.png`"
class="eye"
@click="state.isPwdType = !state.isPwdType"
mode="aspectFill"
></image>
</view>
<view class="form-input" v-if="state.loginType === 'code'">
<input
class="input"
v-model="state.code"
placeholder="请输入验证码"
placeholder-class="form-placeholder"
maxlength="6"
type="number"
/>
<verification-code
:bg="false"
:mobile="state.username"
></verification-code>
</view>
</view>

<view class="btn">
<submit-button title="登录" @submit="doLogin"></submit-button>
</view>

<view class="agreement">
<checkbox-group @change="checkboxChange" class="group">
<checkbox
:checked="state.checked"
color="#00B38B"
size="30"
icon-size="30"
label-size="24"
style="transform:scale(0.85)"
>
</checkbox>
<label>我已阅读并同意</label>
</checkbox-group>
<!-- <view class="txt-grey">我已阅读并同意</view> -->
<view class="txt-green" @click="toRead"
>《平台用户服务隐私协议》</view
>
</view>

<view class="btns as-layout-horizontal">
<view
class="as-layout-vertical as-gravity-center"
@click="navTo('/login/register-step1')"
>
<view class="bg blue as-gravity-center">
<image :src="`${$imgUrl}login/icon_register.png`" class="img" mode="aspectFill"/>
</view>
<view class="label">注册账号</view>
</view>

<view
class="as-layout-vertical as-gravity-center"
@click="
}.png`" class="eye" @click="state.isPwdType = !state.isPwdType" mode="aspectFill"></image>
</view>
<view class="form-input" v-if="state.loginType === 'code'">
<input class="input" v-model="state.code" placeholder="请输入验证码" placeholder-class="form-placeholder"
maxlength="6" type="number" />
<verification-code :bg="false" :mobile="state.username"></verification-code>
</view>
</view>

<view class="btn">
<submit-button title="登录" @submit="doLogin"></submit-button>
</view>

<view class="agreement">
<checkbox-group @change="checkboxChange" class="group">
<checkbox :checked="state.checked" color="#00B38B" size="30" icon-size="30" label-size="24"
style="transform:scale(0.85)">
</checkbox>
<label>我已阅读并同意</label>
</checkbox-group>
<!-- <view class="txt-grey">我已阅读并同意</view> -->
<view class="txt-green" @click="toRead">《平台用户服务隐私协议》</view>
</view>

<view class="btns as-layout-horizontal">
<view class="as-layout-vertical as-gravity-center" @click="navTo('/login/register-step1')">
<view class="bg blue as-gravity-center">
<image :src="`${$imgUrl}login/icon_register.png`" class="img" mode="aspectFill" />
</view>
<view class="label">注册账号</view>
</view>

<view class="as-layout-vertical as-gravity-center" @click="
state.loginType === 'pwd'
? (state.loginType = 'code')
: (state.loginType = 'pwd')
"
>
<view class="bg orange as-gravity-center">
<image :src="`${$imgUrl}login/icon_code.png`" class="img" mode="aspectFill"/>
</view>
<view class="label">{{
">
<view class="bg orange as-gravity-center">
<image :src="`${$imgUrl}login/icon_code.png`" class="img" mode="aspectFill" />
</view>
<view class="label">{{
state.loginType === "pwd" ? "验证码登录" : "密码登录"
}}</view>
</view>

<view
class="as-layout-vertical as-gravity-center"
@click="navTo('/login/forget-pwd-step1')"
>
<view class="bg purple as-gravity-center">
<image :src="`${$imgUrl}login/icon_pwd.png`" class="img" mode="aspectFill"/>
</view>
<view class="label">忘记密码</view>
</view>
</view>
</view>
</view>

<view class="as-layout-vertical as-gravity-center" @click="navTo('/login/forget-pwd-step1')">
<view class="bg purple as-gravity-center">
<image :src="`${$imgUrl}login/icon_pwd.png`" class="img" mode="aspectFill" />
</view>
<view class="label">忘记密码</view>
</view>
</view>
</view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { checkStr, msg, navTo } from "@/utils/utils";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { login, loginCode, loginTime } from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { stringToJson } from "@/utils/network/encryption";
import { useUserStore } from "@/stores/user";
import { setItem } from "@/utils/storage";

const userStore = useUserStore();
const { fetchToken } = userStore;

const state = reactive({
checked: false, //是否勾选协议
isPwdType: true, //是不是密码类型
loginType: "pwd", //pwd-密码登录 code-验证码登录
username: "", //用户名
password: "", //密码
code: "", //验证码
});

onLoad(() => {
uni.$on("login", (data) => {
state.username = data.phone;
});
});

onUnload(() => {
uni.$off("login");
});
const checkboxChange = (e) => {
console.log(e);
state.checked = !state.checked;
};

// 去协议页面
const toRead=()=>{
navTo("/login/agreement")
}


/* 登录 */
const doLogin = () => {
if (!state.username) {
msg("请输入手机号！");
return;
}
if (state.loginType === "pwd" && !state.password) {
msg("请输入密码！");
return;
}
if (state.loginType === "code" && !state.code) {
msg("请输入验证码！");
return;
}
if (!checkStr(state.username, "mobile")) {
msg("请输入正确的手机号！");
return;
}
if (!state.checked) {
msg("请勾选我已阅读并同意《平台用户服务隐私协议》");
return;
}

//判断是验证码登录，还是账号密码登录
if (state.loginType === "code") {
reqLogin(loginCode, {
mobile: state.username,
code: state.code,
loginTime: loginTime,
});
} else {
reqLogin(login, {
mobile: state.username,
password: state.password,
loginTime: loginTime,
});
}
};

/* 执行登录 */
const reqLogin = (code:string, data:object) => {
console.log(code,data);
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(code, options).then((res) => {
const result = stringToJson(res.bizContent);
console.log(result);
console.log(typeof(result));
fetchToken(result.code).then((data:any) => {
console.log("登录",data);
subscribeMessages();
msg("登录成功！");
uni.$emit("refreshOrder");
uni.navigateBack();
});
});
};
// 订阅消息
const subscribeMessages=()=>{
uni.requestSubscribeMessage({
tmplIds: ['aNr4T2JEtaLtR9dihM2w3NAznz4bFMkutVZCbaSTjxg'],
success (res) {
console.log("订阅消息",res)
}
})
}
import { reactive } from "vue";
import { checkStr, msg, navTo } from "@/utils/utils";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { login, loginCode, loginTime } from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { stringToJson } from "@/utils/network/encryption";
import { useUserStore } from "@/stores/user";
import { setItem } from "@/utils/storage";

const userStore = useUserStore();
const { fetchToken } = userStore;

const state = reactive({
checked: false, //是否勾选协议
isPwdType: true, //是不是密码类型
loginType: "pwd", //pwd-密码登录 code-验证码登录
username: "", //用户名
password: "", //密码
code: "", //验证码
});

onLoad(() => {
uni.$on("login", (data) => {
state.username = data.phone;
});
});

onUnload(() => {
uni.$off("login");
});
const checkboxChange = (e) => {
console.log(e);
state.checked = !state.checked;
};

// 去协议页面
const toRead = () => {
navTo("/login/agreement")
}


/* 登录 */
const doLogin = () => {
if (!state.username) {
msg("请输入手机号！");
return;
}
if (state.loginType === "pwd" && !state.password) {
msg("请输入密码！");
return;
}
if (state.loginType === "code" && !state.code) {
msg("请输入验证码！");
return;
}
if (!checkStr(state.username, "mobile")) {
msg("请输入正确的手机号！");
return;
}
if (!state.checked) {
msg("请勾选我已阅读并同意《平台用户服务隐私协议》");
return;
}

//判断是验证码登录，还是账号密码登录
if (state.loginType === "code") {
reqLogin(loginCode, {
mobile: state.username,
code: state.code,
loginTime: loginTime,
});
} else {
reqLogin(login, {
mobile: state.username,
password: state.password,
loginTime: loginTime,
});
}
};

/* 执行登录 */
const reqLogin = (code : string, data : object) => {
console.log(code, data);
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(code, options).then((res) => {
const result = stringToJson(res.bizContent);
console.log(result);
console.log(typeof (result));
fetchToken(result.code).then((data : any) => {
console.log("登录", data);
setItem('mobile', state.username)
subscribeMessages();
msg("登录成功！");
uni.$emit("refreshOrder");
uni.navigateBack();
});
});
};
// 订阅消息
const subscribeMessages = () => {
uni.requestSubscribeMessage({
tmplIds: ['aNr4T2JEtaLtR9dihM2w3NAznz4bFMkutVZCbaSTjxg'],
success(res) {
console.log("订阅消息", res)
}
})
}
</script>

<style lang="scss" scoped>
.login-main {
border-top: 1rpx solid #dcdcdc;
padding: 22rpx 30rpx 140rpx;

.logo {
width: 260rpx;
height: 160rpx;
}
.group{
display: flex;
align-items: center;
}
.title {
font-size: 46rpx;
color: #333333;
margin-top: 30rpx;
font-weight: 600;
}

.form {
width: 100%;
margin-top: 100rpx;

.form-input {
display: flex;
flex-direction: row;
align-items: center;
height: 90rpx;
border-bottom: 1rpx solid #dcdcdc;
padding: 0rpx 12rpx;
color: #333333;

&:last-child {
margin-top: 50rpx;
}

.input {
flex: 1;
padding-right: 48rpx;
font-size: 28rpx;
font-family: Microsoft YaHei;
background-color: transparent;
}

.arror {
width: 28rpx;
height: 25rpx;
margin-left: 16rpx;
margin-right: 40rpx;
}

.eye {
width: 48rpx;
height: 48rpx;
}
}

.form-placeholder {
color: #999999;
}
}

.btn {
width: 100%;
margin: 120rpx 40rpx 50rpx;
}

.agreement {
font-size: 24rpx;
display: flex;
align-items: center;

.txt-grey {
color: #666666;
}

.txt-green {
color: #00b38b;
}

:deep(.u-checkbox) {
margin-right: -20rpx;
}
}

.btns {
width: 100%;
margin-top: 125rpx;
justify-content: space-around;
padding: 0px 8rpx;

.bg {
width: 80rpx;
height: 80rpx;
border-radius: 50%;

.img {
width: 48rpx;
height: 48rpx;
}
}

.blue {
background-color: #1d9cff;
}

.orange {
background-color: #feb654;
}

.purple {
background-color: #8060ff;
}

.label {
font-size: 26rpx;
color: #333333;
margin-top: 30rpx;
}
}
}
</style>
.login-main {
border-top: 1rpx solid #dcdcdc;
padding: 22rpx 30rpx 140rpx;

.logo {
width: 260rpx;
height: 160rpx;
}

.group {
display: flex;
align-items: center;
}

.title {
font-size: 46rpx;
color: #333333;
margin-top: 30rpx;
font-weight: 600;
}

.form {
width: 100%;
margin-top: 100rpx;

.form-input {
display: flex;
flex-direction: row;
align-items: center;
height: 90rpx;
border-bottom: 1rpx solid #dcdcdc;
padding: 0rpx 12rpx;
color: #333333;

&:last-child {
margin-top: 50rpx;
}

.input {
flex: 1;
padding-right: 48rpx;
font-size: 28rpx;
font-family: Microsoft YaHei;
background-color: transparent;
}

.arror {
width: 28rpx;
height: 25rpx;
margin-left: 16rpx;
margin-right: 40rpx;
}

.eye {
width: 48rpx;
height: 48rpx;
}
}

.form-placeholder {
color: #999999;
}
}

.btn {
width: 100%;
margin: 120rpx 40rpx 50rpx;
}

.agreement {
font-size: 24rpx;
display: flex;
align-items: center;

.txt-grey {
color: #666666;
}

.txt-green {
color: #00b38b;
}

:deep(.u-checkbox) {
margin-right: -20rpx;
}
}

.btns {
width: 100%;
margin-top: 125rpx;
justify-content: space-around;
padding: 0px 8rpx;

.bg {
width: 80rpx;
height: 80rpx;
border-radius: 50%;

.img {
width: 48rpx;
height: 48rpx;
}
}

.blue {
background-color: #1d9cff;
}

.orange {
background-color: #feb654;
}

.purple {
background-color: #8060ff;
}

.label {
font-size: 26rpx;
color: #333333;
margin-top: 30rpx;
}
}
}
</style>

+ 3
- 3
stores/user.js 查看文件

@@ -56,7 +56,7 @@ export const useUserStore = defineStore("userStore", {
deviceId: "",
code: code,
loginSource: getItem("loginSource"),
'wxOpenid':getItem("QYorder"),
wxOpenid: JSON.stringify(getItem("QYorder"))
},
method: "POST",
showLoading: false,
@@ -65,7 +65,7 @@ export const useUserStore = defineStore("userStore", {
return new Promise(async (resolve, reject) => {
const res = await request(getToken, options);
const data = stringToJson(res.bizContent);
console.log("data",data)
console.log("data", data)
this.saveToken(data.accessToken);
this.saveOpenId(data.openId);
console.log('输出内容', data.openId)
@@ -101,4 +101,4 @@ export const useUserStore = defineStore("userStore", {
);
},
},
});
});

+ 23
- 0
utils/network/request.js 查看文件

@@ -17,6 +17,29 @@ import {
} from '../util/sm4.js'
const s4 = new SM4Util()

function updateToken(){
const options = {
type: 2,
data: {
mobilePhone: getItem("mobile")
},
method: "POST",
showLoading: false,
};
//刷新token
return new Promise(async (resolve, reject) => {
const res = await request('225aa780a91b40f0b44e7e5fe204fc9a', options);
const data = stringToJson(res.bizContent);
console.log("data", data)
this.saveToken(data.accessToken);
this.saveOpenId(data.openId);
console.log('输出内容', data.openId)
resolve(data);
}).catch((error) => {
reject(error);
});
}

//请求
export function request(code, options = {}) {
//公参

Write Preview
Loading…
取消
儲存