yzy/sweekar-app
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
yzy committed 2026-01-16 19:14:26 +08:00
1 parent 76ba02d29b
commit 2c6d011736
4 files changed
+112 -333
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

pages/login/index.vue
+67 -288
View File
@@ -102,7 +102,7 @@ const onLogin = async() => {
});
uni.switchTab({
url:'/pages/index/index'
url:'/pages/mine/index'
})
// 延迟一点时间再关闭弹窗，让用户看到成功提示
setTimeout(() => {
@@ -400,27 +400,28 @@ const emit = defineEmits(['close', 'success']);
</script>
<template>
<view class="login-container">
<view class="h-[120vh] p-4 min-h-screen bg-white flex flex-col justify-center">
<!-- 标题 -->
<view class="login-header">
<text class="title">欢迎登录</text>
<text class="subtitle">请使用您的账号信息登录</text>
<view class="mb-12 mt-20 text-center">
<image src="/static/tabbar/find.png" class="w-20 h-20 mb-8" mode="aspectFit"></image>
<text class="block text-3xl font-bold text-gray-800 mb-4">WELCOME BACK</text>
<text class="text-sm text-gray-500">Sign in to connect with Sweekar</text>
</view>
<!-- 邮箱输入 -->
<view class="input-group">
<view class="label">邮箱</view>
<view class="input-wrapper">
<view class="mb-8">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="email" class="h-10" color="black" bold="true"></u-icon>
<input
class="input-field"
type="text"
placeholder="请输入邮箱"
class="w-full text-base text-gray-800 bg-transparent"
type="email"
placeholder="Email Address"
v-model="email"
@input="onInputChange('email')"
/>
<view
v-if="email"
class="clear-btn"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-black font-bold"
@tap="clearInput('email')"
>
×
@@ -429,19 +430,20 @@ const emit = defineEmits(['close', 'success']);
</view>
<!-- 密码输入 -->
<view class="input-group">
<view class="label">密码</view>
<view class="input-wrapper">
<view class="mb-8">
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
<u-icon name="lock" class="h-10" color="black" bold="true"></u-icon>
<input
class="input-field"
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="请输入密码"
placeholder="Password"
v-model="password"
@input="onInputChange('password')"
/>
<view
v-if="password"
class="clear-btn"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('password')"
>
×
@@ -450,39 +452,38 @@ const emit = defineEmits(['close', 'success']);
</view>
<!-- 忘记密码链接 -->
<view class="links-section">
<text class="link" @tap="forgetPassword">忘记密码？</text>
<view class="flex justify-end mb-8">
<text class="text-blue-500 text-sm" @tap="forgetPassword">Forget Password?</text>
</view>
<!-- 登录按钮 -->
<button
class="login-btn"
:class="{ 'btn-loading': isLoading }"
@tap="onLogin"
<view
class="w-full h-12 bg-theme rounded-lg text-white text-xl flex items-center justify-center "
:disabled="isLoading"
@click="onLogin"
>
<text v-if="!isLoading">登录</text>
<view v-else class="loading-spinner"></view>
</button>
<text v-if="!isLoading">SIGN IN</text>
<view v-else class="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin"></view>
</view>
<!-- 注册链接 -->
<view class="register-section">
<text>还没有账号？</text>
<text class="register-link" @tap="showRegisterPopup">立即注册</text>
<view class="flex justify-center items-center my-8 text-gray-500 text-sm">
<text>Don't have an account?</text>
<text class="text-green-500 ml-2" @tap="showRegisterPopup">立即注册</text>
</view>
<!-- 同意条款 -->
<view class="agreement-section">
<label class="agreement-label">
<view class="mt-auto text-center">
<label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
<checkbox
class="checkbox"
class="scale-75 mr-2"
:checked="checked"
@change="onChange"
/>
我已阅读并同意
<text class="agreement-link" @tap="showAgreement">《用户协议》</text>
<text class="text-green-500 underline" @tap="showAgreement">《用户协议》</text>
和
<text class="agreement-link" @tap="showAgreement">《隐私政策》</text>
<text class="text-green-500 underline" @tap="showAgreement">《隐私政策》</text>
</label>
</view>
</view>
@@ -497,25 +498,25 @@ const emit = defineEmits(['close', 'success']);
:closeable="true"
@close="hideRegisterPopup"
>
<view class="register-popup">
<view class="register-header">
<text class="register-title">用户注册</text>
<text class="register-subtitle">请填写注册信息</text>
<view class="p-4 min-h-screen bg-white">
<view class="mb-12 text-center">
<text class="block text-2xl font-bold text-gray-800 mb-4">用户注册</text>
<text class="text-lg text-gray-500">请填写注册信息</text>
</view>
<!-- 注册邮箱输入 -->
<view class="input-group">
<view class="label">邮箱</view>
<view class="input-wrapper">
<view class="mb-8">
<view class="text-sm text-gray-700 mb-4 ml-2">邮箱</view>
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
<input
class="input-field"
class="w-full text-base text-gray-800 bg-transparent"
type="text"
placeholder="请输入邮箱"
v-model="registerEmail"
/>
<view
v-if="registerEmail"
class="clear-btn"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('registerEmail')"
>
×
@@ -524,25 +525,25 @@ const emit = defineEmits(['close', 'success']);
</view>
<!-- 验证码输入 -->
<view class="input-group">
<view class="label">验证码</view>
<view class="input-wrapper">
<view class="mb-8">
<view class="text-sm text-gray-700 mb-4 ml-2">验证码</view>
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
<input
class="input-field"
class="w-full text-base text-gray-800 bg-transparent pr-32"
type="text"
placeholder="请输入验证码"
v-model="verificationCode"
/>
<view
v-if="verificationCode"
class="clear-btn"
class="absolute right-36 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('verificationCode')"
>
×
</view>
</view>
<button
class="code-btn"
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-10 px-4 bg-gradient-to-r from-green-500 to-green-400 text-white text-xs rounded-full disabled:bg-gray-400 disabled:text-gray-300"
:disabled="codeBtnDisabled"
@tap="getVerificationCode"
>
@@ -551,18 +552,18 @@ const emit = defineEmits(['close', 'success']);
</view>
<!-- 注册密码输入 -->
<view class="input-group">
<view class="label">密码</view>
<view class="input-wrapper">
<view class="mb-8">
<view class="text-sm text-gray-700 mb-4 ml-2">密码</view>
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
<input
class="input-field"
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="请输入密码"
v-model="registerPassword"
/>
<view
v-if="registerPassword"
class="clear-btn"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('registerPassword')"
>
×
@@ -571,18 +572,18 @@ const emit = defineEmits(['close', 'success']);
</view>
<!-- 确认密码输入 -->
<view class="input-group">
<view class="label">确认密码</view>
<view class="input-wrapper">
<view class="mb-8">
<view class="text-sm text-gray-700 mb-4 ml-2">确认密码</view>
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
<input
class="input-field"
class="w-full text-base text-gray-800 bg-transparent"
type="password"
placeholder="请再次输入密码"
v-model="confirmPassword"
/>
<view
v-if="confirmPassword"
class="clear-btn"
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
@tap="clearInput('confirmPassword')"
>
×
@@ -592,248 +593,26 @@ const emit = defineEmits(['close', 'success']);
<!-- 注册按钮 -->
<button
class="register-submit-btn"
class="w-full h-12 bg-gradient-to-r from-green-500 to-green-400 rounded-full text-white text-xl font-bold flex items-center justify-center mt-5"
@tap="onRegister"
>
注册
</button>
<!-- 同意条款 -->
<view class="agreement-section">
<label class="agreement-label">
<view class="mt-auto text-center">
<label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
<checkbox
class="checkbox"
class="scale-75 mr-2"
:checked="checked"
@change="onChange"
/>
我已阅读并同意
<text class="agreement-link" @tap="showAgreement">《用户协议》</text>
<text class="text-green-500 underline" @tap="showAgreement">《用户协议》</text>
和
<text class="agreement-link" @tap="showAgreement">《隐私政策》</text>
<text class="text-green-500 underline" @tap="showAgreement">《隐私政策》</text>
</label>
</view>
</view>
</u-popup>
</template>
<style lang="scss" scoped>
.login-container {
padding: 40rpx;
min-height: 600rpx;
display: flex;
flex-direction: column;
}
.login-header {
margin-bottom: 50rpx;
text-align: center;
}
.title {
display: block;
font-size: 40rpx;
font-weight: bold;
color: #333;
margin-bottom: 16rpx;
}
.subtitle {
font-size: 28rpx;
color: #999;
}
.input-group {
margin-bottom: 30rpx;
position: relative;
}
.label {
font-size: 28rpx;
color: #333;
margin-bottom: 16rpx;
padding-left: 20rpx;
}
.input-wrapper {
display: flex;
align-items: center;
height: 88rpx;
background-color: #f8f8f8;
border-radius: 44rpx;
padding: 0 30rpx;
position: relative;
}
.input-field {
flex: 1;
font-size: 28rpx;
color: #333;
}
.clear-btn {
position: absolute;
right: 30rpx;
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #ccc;
border-radius: 50%;
color: white;
font-size: 24rpx;
font-weight: bold;
}
.links-section {
display: flex;
justify-content: flex-end;
margin-bottom: 30rpx;
}
.link {
font-size: 26rpx;
color: #00a88e;
}
.login-btn {
width: 100%;
height: 88rpx;
background: linear-gradient(90deg, #00a88e, #00c4a2);
border-radius: 44rpx;
color: white;
font-size: 32rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
border: none;
transition: opacity 0.3s;
&.btn-loading {
opacity: 0.7;
}
&:active {
opacity: 0.8;
}
}
.loading-spinner {
width: 30rpx;
height: 30rpx;
border: 3rpx solid rgba(255, 255, 255, 0.3);
border-top: 3rpx solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.register-section {
display: flex;
justify-content: center;
align-items: center;
margin: 30rpx 0;
font-size: 26rpx;
color: #666;
}
.register-link {
color: #00a88e;
margin-left: 10rpx;
}
.agreement-section {
margin-top: auto;
text-align: center;
}
.agreement-label {
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #666;
line-height: 1.5;
}
.checkbox {
transform: scale(0.7);
margin-right: 8rpx;
}
.agreement-link {
color: #00a88e;
text-decoration: underline;
}
.register-popup {
padding: 40rpx;
min-height: 600rpx;
display: flex;
flex-direction: column;
}
.register-header {
margin-bottom: 50rpx;
text-align: center;
}
.register-title {
display: block;
font-size: 40rpx;
font-weight: bold;
color: #333;
margin-bottom: 16rpx;
}
.register-subtitle {
font-size: 28rpx;
color: #999;
}
.code-btn {
position: absolute;
right: 10rpx;
top: 70%;
transform: translateY(-50%);
height: 60rpx;
padding: 0 20rpx;
background: linear-gradient(90deg, #00a88e, #00c4a2);
color: white;
font-size: 24rpx;
border-radius: 30rpx;
border: none;
z-index: 10;
&:disabled {
background: #ccc;
color: #999;
}
}
.register-submit-btn {
width: 100%;
height: 88rpx;
background: linear-gradient(90deg, #00a88e, #00c4a2);
border-radius: 44rpx;
color: white;
font-size: 32rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
border: none;
transition: opacity 0.3s;
&:active {
opacity: 0.8;
}
}
</style>
pages/mine/api.js
+22 -3
View File
@@ -1,7 +1,26 @@
import { get, post, put, dele } from '@/utils/request';
/**
* @desc 获取产品列表
* @desc 上传头像
*/
export const getProducts = (params) => {
return get('/api/products/', params)
export const uploadAvatar = (params) => {
return post('/app-api/member/user/upload-avatar', params)
}
/**
* @desc 昵称修改
*/
export const updateNickname = (params) => {
return put('/app-api/member/user/update-nickname', params)
}
/**
* @desc 用户登出
*/
export const userLogout = (params) => {
return post('/app-api/member/auth/logout', params)
}
/**
* @desc 用户个人信息
*/
export const getUserInfo = (params) => {
return get('/app-api/member/user/get', params)
}
pages/mine/index.vue
+22 -42
View File
@@ -4,7 +4,7 @@ import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/un
import CustomTabBar from '@/components/CustomTabBar.vue'
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
import LoginPopup from '@/components/login.vue';
import { getProducts } from './api.js';
import { getUserInfo } from './api.js';
import { useUserStore } from '@/store/user.js';
import { useI18n } from 'vue-i18n';
@@ -35,20 +35,7 @@ const toggleLoginPopup = () => {
showLogin.value = !showLogin.value;
};
// 关闭登录弹窗
const closeLoginPopup = () => {
showLogin.value = false;
};
// 登录成功回调
const onLoginSuccess = () => {
closeLoginPopup();
// 可以在这里执行登录成功后的操作
uni.showToast({
title: '登录成功',
icon: 'success'
});
};
/**
* @desc 获取可视内容高度
@@ -66,16 +53,20 @@ const toDetailPage = (productId) => {
});
};
const userData = ref();
//获取首页数据
const getProductList = async()=>{
const res = await getProducts();
const getUserInformation = async()=>{
const res = await getUserInfo();
userData.value = res.data;
console.log('data',userData.value);
productData.value=res.data;
console.log("商品数据",productData.value);
}
onLoad(()=>{
// getProductList();
getUserInformation();
});
@@ -95,6 +86,7 @@ const handleBook = (productId) => {
* @desc 跳转至登录页面
*/
const toLoginPage = (productId) => {
userStore.logout()
uni.navigateTo({
url: '/pages/login/index',
});
@@ -106,10 +98,17 @@ onMounted(() => {
// showLogin.value = true;
// }, 1000);
});
// 测试缓存中的数据
const test = () =>{
console.log('登录数据',userStore.token);
}
</script>
<template>
<view class="h-[100vh] bg-[#fff]">
<view class="bg-[#fff]">
<!-- 页面内容区域 -->
<view class="flex flex-col">
<!-- 个人页头部区域 -->
@@ -119,6 +118,7 @@ onMounted(() => {
src="/static/images/avatar.png"
class="w-16 h-16 rounded-full border-2 border-white mr-4"
style="background-color: #ddd;"
@click="test()"
/>
<view class="flex-1">
<view class="font-bold text-lg">用户昵称</view>
@@ -194,23 +194,7 @@ onMounted(() => {
</view>
</view>
<!-- 登录弹窗 - 优化版 -->
<u-popup
v-model:show="showLogin"
mode="center"
:border-radius="20"
:safe-area-inset-bottom="false"
width="80%"
:closeable="true"
@close="closeLoginPopup"
>
<view class="popup-content">
<LoginPopup
@close="closeLoginPopup"
@success="onLoginSuccess"
/>
</view>
</u-popup>
<CustomTabBar />
</view>
@@ -247,9 +231,5 @@ onMounted(() => {
align-items: center;
}
.popup-content {
padding: 20rpx;
max-height: 80vh;
overflow-y: auto;
}
</style>
utils/request.js
+1
View File
@@ -48,6 +48,7 @@ export const request = (options = {}) => {
data: requestData, // 对象 or 字符串
header: {
'Content-Type': contentType,
'Authorization': 'Bearer ' + userStore.token,
// version: appVersion, // 如需可加
...options.header,
},