Waiting/suke-mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录页面调整

Browse Source
This commit is contained in:
Waiting
2024-03-15 14:02:39 +08:00
parent 43b5ea640e
commit 3ce85e2396
8 changed files with 103 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/user/index.ts
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 type { UserState } from '@/store/modules/user/types';
@@ -9,6 +9,7 @@ enum URL {
// login = '/member/login',
login = '/wc/wechat/LoginByMa',
loginByCode = '/wc/wechat/LoginByMaCode',
register = '/wc/wechat/register',
logout = '/user/logout',
profile = '/user/profile',
addressList = '/ext/addr/list',
@@ -22,6 +23,9 @@ enum URL {
export const getUserProfile = () => get<UserState>({ url: URL.profile });
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 register = (data: RegisterParams) => post<LoginResult>({ url: URL.register, data });
export const logout = () => post<any>({ url: URL.logout });
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 getDynamicCode = () => post<any>({ url: URL.dynamicCode });
export const getCouponList = (params: {
obj: { memberId: string, status: number },
pageNum: number,
pageSize: number
}) => get<any>({ url: '/couponseUse/pageList' });

13
src/api/user/types.ts
View File

@@ -7,6 +7,19 @@ export interface LoginParams {
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 {
code: string;
}

4
src/pages.json
View File

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

176
src/pages/common/login/index.vue
View File

@@ -1,45 +1,14 @@
<template>
<view>
<view class='login-form-wrap'>
<view class='title'>
欢迎登录
</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='content'>
<view class='title'>
欢迎登录VIP顾客中心
</view>
<view class='alternative'>
<view class='password'>
密码登录
</view>
<view class='issue'>
遇到问题
</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>
<image class='logo' :src='assetsUrl("ic_logo.jpeg")' />
<button class='login-btn' @tap='wechatLogin'>
微信登录
</button>
<view class='hint'>
登录代表同意
<text class='link'>
@@ -51,45 +20,10 @@
</template>
<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 { assetsUrl } from '@/utils/assets';
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() {
uni.showLoading();
@@ -98,77 +32,49 @@ function wechatLogin() {
uni.reLaunch({ url: '/pages/home/index' });
});
}
function submit() {
if(uni.$u.test.mobile(tel.value)) {
setToken('1234567890');
uni.reLaunch({ url: '/pages/home/index' });
}
}
</script>
<style lang='scss' scoped>
.login-form-wrap {
margin: 80rpx auto 0;
width: 600rpx;
.title {
margin-bottom: 100rpx;
font-size: 60rpx;
text-align: left;
font-weight: 500;
}
input {
padding-bottom: 6rpx;
margin-bottom: 10rpx;
text-align: left;
}
.tips {
margin-top: 8rpx;
margin-bottom: 60rpx;
color: $u-info;
}
.login-btn {
padding: 12rpx 0;
font-size: 30rpx;
color: $u-tips-color;
background-color: rgb(253 243 208);
border: none;
&::after {
border: none;
}
}
.alternative {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
color: $u-tips-color;
}
.content {
background: #FFFFFF;
height: 100vh;
}
.login-type-wrap {
display: flex;
justify-content: space-between;
padding: 350rpx 150rpx 150rpx;
.title {
font-size: 60rpx;
text-align: left;
font-weight: 500;
margin: 50rpx;
}
.item {
display: flex;
align-items: center;
font-size: 28rpx;
color: $u-content-color;
flex-direction: column;
.logo {
width: 300rpx;
height: 300rpx;
align-self: center;
margin: 30rpx;
border-radius: 50%;
}
.login-btn {
padding: 12rpx 0;
font-size: 30rpx;
color: #FFFFFF;
background-color: #1cbf1e;
border: none;
border-radius: 45rpx;
margin: 100rpx 45rpx 0 45rpx;
&::after {
border: none;
}
}
.hint {
padding: 20rpx 40rpx;
padding: 20rpx 50rpx;
font-size: 20rpx;
color: $u-tips-color;
position: absolute;
bottom: 0;
.link {
color: $u-warning;

13
src/pages/mine/subs/coupon/coupon-list.vue → src/pages/mine/subs/coupon/index.vue
View File

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

0
src/pages/mine/subs/trade/trade-list.vue → src/pages/mine/subs/trade/index.vue
View File

BIN
src/static/images/ic_logo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

35
src/store/modules/user/index.ts
View File

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