登录页面调整

This commit is contained in:
2024-03-15 14:02:39 +08:00
parent 43b5ea640e
commit 3ce85e2396
8 changed files with 103 additions and 150 deletions

View File

@@ -1,7 +1,7 @@
/** /**
* 用户信息相关接口 * 用户信息相关接口
*/ */
import type { LoginParams, LoginResult } from './types'; import type { LoginParams, LoginResult, RegisterParams } from './types';
import { get, post } from '@/utils/request'; import { get, post } from '@/utils/request';
import type { UserState } from '@/store/modules/user/types'; import type { UserState } from '@/store/modules/user/types';
@@ -9,6 +9,7 @@ enum URL {
// login = '/member/login', // login = '/member/login',
login = '/wc/wechat/LoginByMa', login = '/wc/wechat/LoginByMa',
loginByCode = '/wc/wechat/LoginByMaCode', loginByCode = '/wc/wechat/LoginByMaCode',
register = '/wc/wechat/register',
logout = '/user/logout', logout = '/user/logout',
profile = '/user/profile', profile = '/user/profile',
addressList = '/ext/addr/list', addressList = '/ext/addr/list',
@@ -22,6 +23,9 @@ enum URL {
export const getUserProfile = () => get<UserState>({ url: URL.profile }); export const getUserProfile = () => get<UserState>({ url: URL.profile });
export const login = (data: LoginParams) => post<LoginResult>({ url: URL.login, data }); export const login = (data: LoginParams) => post<LoginResult>({ url: URL.login, data });
export const loginByCode = (code: string, companyId: string) => post<any>({ url: URL.loginByCode + `?code=${code}` }); export const loginByCode = (code: string, companyId: string) => post<any>({ url: URL.loginByCode + `?code=${code}` });
export const register = (data: RegisterParams) => post<LoginResult>({ url: URL.register, data });
export const logout = () => post<any>({ url: URL.logout }); export const logout = () => post<any>({ url: URL.logout });
export const getAddressList = () => get<any>({ url: URL.addressList }); export const getAddressList = () => get<any>({ url: URL.addressList });
@@ -31,3 +35,9 @@ export const addressUpdate = (data: any) => post<any>({ url: URL.addressUpdate,
export const addressDelete = (id: string) => post<any>({ url: URL.addressDelete + `?id=${id}` }); export const addressDelete = (id: string) => post<any>({ url: URL.addressDelete + `?id=${id}` });
export const getDynamicCode = () => post<any>({ url: URL.dynamicCode }); export const getDynamicCode = () => post<any>({ url: URL.dynamicCode });
export const getCouponList = (params: {
obj: { memberId: string, status: number },
pageNum: number,
pageSize: number
}) => get<any>({ url: '/couponseUse/pageList' });

View File

@@ -7,6 +7,19 @@ export interface LoginParams {
referrerUserId: string; referrerUserId: string;
} }
export interface RegisterParams {
unionId: string,
openId: string,
maOpenId: string,
image: string,
nickName: string,
telephone: string,
birthday: string,
companyId: string,
creatorId: string,
gender: number
}
export interface LoginByCodeParams { export interface LoginByCodeParams {
code: string; code: string;
} }

View File

@@ -120,7 +120,7 @@
} }
}, },
{ {
"path": "coupon/coupon-list", "path": "coupon/index",
"style": { "style": {
"navigationBarTitleText": "优惠券" "navigationBarTitleText": "优惠券"
} }
@@ -138,7 +138,7 @@
} }
}, },
{ {
"path": "trade/trade-list", "path": "trade/index",
"style": { "style": {
"navigationBarTitleText": "消费记录" "navigationBarTitleText": "消费记录"
} }

View File

@@ -1,45 +1,14 @@
<template> <template>
<view> <view class='content'>
<view class='login-form-wrap'>
<view class='title'> <view class='title'>
欢迎登录 欢迎登录VIP顾客中心
</view> </view>
<input v-model='tel' class='u-border-bottom' type='number' placeholder='请输入手机号'>
<view class='u-border-bottom my-40rpx flex'>
<input v-model='code' class='flex-1' type='number' placeholder='请输入验证码'>
<view>
<u-code ref='uCodeRef' @change='codeChange' />
<u-button :text='tips' type='success' size='mini' @click='getCode' />
</view>
</view>
<button :style='[inputStyle]' class='login-btn' @tap='submit'>
登录
</button>
<view class='alternative'> <image class='logo' :src='assetsUrl("ic_logo.jpeg")' />
<view class='password'>
密码登录 <button class='login-btn' @tap='wechatLogin'>
</view> 微信登录
<view class='issue'> </button>
遇到问题
</view>
</view>
</view>
<view class='login-type-wrap'>
<view class='item wechat' @click.stop='wechatLogin'>
<view class='icon'>
<u-icon size='35' name='weixin-fill' color='rgb(83,194,64)' />
</view>
微信
<!-- <button open-type='getUserInfo' @getuserinfo='bindGetUserInfo'>确认授权</button>-->
</view>
<view class='item QQ'>
<view class='icon'>
<u-icon size='35' name='qq-fill' color='rgb(17,183,233)' />
</view>
QQ
</view>
</view>
<view class='hint'> <view class='hint'>
登录代表同意 登录代表同意
<text class='link'> <text class='link'>
@@ -51,45 +20,10 @@
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
import uCode from 'uview-plus/components/u-code/u-code.vue';
import { setToken } from '@/utils/auth';
import { useUserStore } from '@/store'; import { useUserStore } from '@/store';
import { assetsUrl } from '@/utils/assets';
const userStore = useUserStore(); const userStore = useUserStore();
const tel = ref<string>('18502811111');
const code = ref<string>('1234');
const tips = ref<string>();
const uCodeRef = ref<InstanceType<typeof uCode> | null>(null);
const inputStyle = computed<CSSStyleDeclaration>(() => {
const style = {} as CSSStyleDeclaration;
if(tel.value && code.value) {
style.color = '#fff';
style.backgroundColor = uni.$u.color.warning;
}
return style;
});
function codeChange(text: string) {
tips.value = text;
}
function getCode() {
if(uCodeRef.value?.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
});
setTimeout(() => {
uni.hideLoading();
uni.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
uCodeRef.value?.start();
}, 1000);
} else {
uni.$u.toast('倒计时结束后再发送');
}
}
function wechatLogin() { function wechatLogin() {
uni.showLoading(); uni.showLoading();
@@ -98,77 +32,49 @@ function wechatLogin() {
uni.reLaunch({ url: '/pages/home/index' }); uni.reLaunch({ url: '/pages/home/index' });
}); });
} }
function submit() {
if(uni.$u.test.mobile(tel.value)) {
setToken('1234567890');
uni.reLaunch({ url: '/pages/home/index' });
}
}
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.login-form-wrap { .content {
margin: 80rpx auto 0; background: #FFFFFF;
width: 600rpx; height: 100vh;
}
.title { .title {
margin-bottom: 100rpx;
font-size: 60rpx; font-size: 60rpx;
text-align: left; text-align: left;
font-weight: 500; font-weight: 500;
} margin: 50rpx;
}
input { .logo {
padding-bottom: 6rpx; width: 300rpx;
margin-bottom: 10rpx; height: 300rpx;
text-align: left; align-self: center;
} margin: 30rpx;
border-radius: 50%;
}
.tips { .login-btn {
margin-top: 8rpx;
margin-bottom: 60rpx;
color: $u-info;
}
.login-btn {
padding: 12rpx 0; padding: 12rpx 0;
font-size: 30rpx; font-size: 30rpx;
color: $u-tips-color; color: #FFFFFF;
background-color: rgb(253 243 208); background-color: #1cbf1e;
border: none; border: none;
border-radius: 45rpx;
margin: 100rpx 45rpx 0 45rpx;
&::after { &::after {
border: none; border: none;
} }
}
.alternative {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
color: $u-tips-color;
}
}
.login-type-wrap {
display: flex;
justify-content: space-between;
padding: 350rpx 150rpx 150rpx;
.item {
display: flex;
align-items: center;
font-size: 28rpx;
color: $u-content-color;
flex-direction: column;
}
} }
.hint { .hint {
padding: 20rpx 40rpx; padding: 20rpx 50rpx;
font-size: 20rpx; font-size: 20rpx;
color: $u-tips-color; color: $u-tips-color;
position: absolute;
bottom: 0;
.link { .link {
color: $u-warning; color: $u-warning;

View File

@@ -8,8 +8,9 @@
<script lang='ts' setup> <script lang='ts' setup>
import CouponItem from './components/coupon-item.vue'; import CouponItem from './components/coupon-item.vue';
import { getCouponList } from '@/api/user';
const coupons = [{ const coupons = ref([{
id: 1, id: 1,
title: '优惠券', title: '优惠券',
desc: '满100减10', desc: '满100减10',
@@ -59,8 +60,16 @@ const coupons = [{
useTime: '2024-12-31', useTime: '2024-12-31',
status: 0, status: 0,
useStatus: '未使用' useStatus: '未使用'
}]; }]);
onLoad(async () => {
const { data } = await getCouponList({
obj: {
memberId: item?.id, status: 0
}, pageNum: 1, pageSize: 1000
});
coupons.value = data.list;
});
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@@ -1,8 +1,8 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import type { providerType, UserState } from './types'; import type { providerType, UserState } from './types';
import { getUserProfile, login as userLogin, login, logout as userLogout } from '@/api/user/index'; import { getUserProfile, login, logout as userLogout, register } from '@/api/user/index';
import { clearToken, setCompanyId, setToken } from '@/utils/auth'; import { clearToken, setCompanyId, setToken } from '@/utils/auth';
import type { LoginParams } from '@/api/user/types'; import type { RegisterParams } from '@/api/user/types';
const useUserStore = defineStore('user', { const useUserStore = defineStore('user', {
state: (): UserState => <UserState>({ state: (): UserState => <UserState>({
@@ -37,6 +37,7 @@ const useUserStore = defineStore('user', {
return { ...state }; return { ...state };
} }
}, },
actions: { actions: {
// 设置用户的信息 // 设置用户的信息
setUserInfo(partial: Partial<UserState>) { setUserInfo(partial: Partial<UserState>) {
@@ -51,27 +52,25 @@ const useUserStore = defineStore('user', {
const result = await getUserProfile(); const result = await getUserProfile();
this.setUserInfo(result); this.setUserInfo(result);
}, },
// 异步登录并存储token
login(loginForm: LoginParams) { userRegister(registerForm: RegisterParams) {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
const result = await userLogin(loginForm); const result = await register(registerForm);
const token = result?.token;
if(token) {
setToken(token);
}
resolve(result); resolve(result);
} catch (error) { } catch (error) {
reject(error); reject(error);
} }
}); });
}, },
// Logout // Logout
async logout() { async logout() {
await userLogout(); await userLogout();
this.resetInfo(); this.resetInfo();
clearToken(); clearToken();
}, },
// 小程序授权登录 // 小程序授权登录
authLogin(provider: providerType = 'weixin') { authLogin(provider: providerType = 'weixin') {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@@ -91,9 +90,25 @@ const useUserStore = defineStore('user', {
const res = await login({ const res = await login({
code: result.code, code: result.code,
userInfo: userInfo, userInfo: userInfo,
referrerUserId: '1727303781559697409' referrerUserId: '1731886841265598466'
}); });
if(res.user == undefined || res.user.id === null) {
const registerForm = {
unionId: res.user.unionId,
openId: res.user.openId,
maOpenId: res.user.maOpenId,
image: res.user.image,
nickName: res.user.nickName,
telephone: res.user.telephone,
birthday: res.user.birthday,
companyId: res.user.companyId,
creatorId: res.user.creatorId,
gender: res.user.gender
};
await this.userRegister(registerForm);
}
this.setUserInfo(res.user); this.setUserInfo(res.user);
setToken(res.token); setToken(res.token);
setCompanyId(res.user.companyId); setCompanyId(res.user.companyId);