hxx/uni-shop-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ 个人页 设置页 更新个人信息页

Browse Source
This commit is contained in:
jqtmviyu 2025-04-27 17:13:35 +08:00
parent 78d1978943
commit dd8d793dd6
12 changed files with 740 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/JbcGuess.vue
View File

@ -70,7 +70,7 @@ onBeforeMount(() => {
// 暴露方法
defineExpose({
resetData,
getMore: getGuessList,
getMore: getGuessList, // 重命名
})
</script>
@ -111,7 +111,7 @@ defineExpose({
justify-content: space-between;
padding: 0 20rpx;
.guess-item {
width: calc(375rpx - 60rpx);
width: calc(375rpx - 20rpx - 10rpx);
padding: 24rpx 20rpx 20rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;

14
src/composables/index.ts Normal file
View File

@ -0,0 +1,14 @@
import type { JbcGuessInstance } from '@/types/components'
import { ref } from 'vue'
/**
* 猜你喜欢滚动到底加载更多
* @returns
*/
export const useGuessList = () => {
const guessRef = ref<JbcGuessInstance>()
const onScrollToLower = () => {
guessRef.value?.getMore()
}
return { guessRef, onScrollToLower }
}

32
src/pages.json
View File

@ -39,6 +39,7 @@
"path": "pages/my/my",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "我的"
}
},
@ -102,5 +103,36 @@
"selectedIconPath": "static/tabs/user_selected.png"
}
]
},
// 分包
"subPackages": [
{
"root": "pagesMember",
"pages": [
{
"path": "settings/settings",
"style": {
"navigationBarTitleText": "设置"
}
},
{
"path": "profile/profile",
"style": {
"navigationStyle": "custom", // 隐藏顶部默认导航
"navigationBarTextStyle": "white",
"navigationBarTitleText": "个人信息"
}
}
]
}
],
// 预下载
"preloadRule": {
"pages/my/my": {
"network": "all",
"packages": ["pagesMember"]
}
}
}

10
src/pages/index/index.vue
View File

@ -35,8 +35,8 @@ import { getCategoryAPI, getHomeBannerAPI, getHomeHotAPI } from '@/services/home
import { onLoad } from '@dcloudio/uni-app'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import type { JbcGuessInstance } from '@/types/components'
import PageSkeleton from './components/PageSkeleton.vue'
import { useGuessList } from '@/composables'
// 数据加载状态
const isLoading = ref(true)
@ -63,12 +63,8 @@ const getHotList = async () => {
}
// 猜你喜欢滚动到底加载更多
// 获取实例
const guessRef = ref<JbcGuessInstance>()
// 调用子组件的方法
const onScrollToLower = () => {
guessRef.value?.getMore()
}
// 滚动到底部
const { guessRef, onScrollToLower } = useGuessList()
// 下拉刷新
const isRefreshing = ref(false)

260
src/pages/my/my.vue
View File

@ -1,66 +1,232 @@
<template>
<!-- #ifdef APP-PLUS -->
<view class="status_bar">
<view class="top_view"></view>
<scroll-view class="viewport" scroll-y enable-back-to-top @scrolltolower="onScrollToLower">
<!-- 个人资料 -->
<view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
<!-- 情况1：已登录 -->
<view class="overview" v-if="profile">
<navigator url="/pagesMember/profile/profile" hover-class="none">
<image class="avatar" mode="aspectFill" :src="profile.avatar"></image>
</navigator>
<view class="meta">
<view class="nickname">
{{ profile.nickname?.replace('黑马', '') || profile.account }}
</view>
<!-- #endif -->
<view class="content">
<view class="info"> 会员信息: {{ memberStore.profile }} </view>
<button @tap="handleLogin">登录</button>
<button @tap="handleLogout">退出登录</button>
<button @tap="handleTestHttp">http测试</button>
<navigator class="extra" url="/pagesMember/profile/profile" hover-class="none">
<text class="update">更新头像昵称</text>
</navigator>
</view>
</view>
<!-- 情况2：未登录 -->
<view class="overview" v-else>
<navigator url="/pages/login/login" hover-class="none">
<image
class="avatar gray"
mode="aspectFill"
src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
></image>
</navigator>
<navigator class="meta" url="/pages/login/login" hover-class="none">
<view class="nickname"> 未登录 </view>
<view class="extra">
<text class="tips">点击登录账号</text>
</view>
</navigator>
</view>
<navigator class="settings" url="/pagesMember/settings/settings" hover-class="none">
设置
</navigator>
</view>
<!-- 我的订单 -->
<view class="orders">
<view class="title">
我的订单
<navigator class="navigator" url="/pagesOrder/list/list?type=0" hover-class="none">
查看全部订单<text class="icon-right"></text>
</navigator>
</view>
<view class="section">
<!-- 订单 -->
<navigator
v-for="item in orderTypes"
:key="item.type"
:class="item.icon"
:url="`/pagesOrder/list/list?type=${item.type}`"
class="navigator"
hover-class="none"
>
{{ item.text }}
</navigator>
<!-- 客服 -->
<button class="contact icon-handset" open-type="contact">售后</button>
</view>
</view>
<!-- 猜你喜欢 -->
<view class="guess">
<JbcGuess ref="guessRef" />
</view>
</scroll-view>
</template>
<script setup lang="ts">
import { useMemberStore } from '@/stores/modules/member'
import { http } from '@/utils/http'
import { computed } from 'vue'
import JbcGuess from '@/components/JbcGuess.vue'
import { useGuessList } from '@/composables'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const memberStore = useMemberStore()
const handleLogin = () => {
memberStore.setProfile({
id: 1,
avatar: 'https://www.baidu.com',
nickname: '张三',
account: '11111111111',
mobile: '11111111111',
token: '11111111111',
})
}
const profile = computed(() => memberStore.profile)
const handleLogout = () => {
memberStore.clearProfile()
}
// 订单选项
const orderTypes = [
{ type: 1, text: '待付款', icon: 'icon-currency' },
{ type: 2, text: '待发货', icon: 'icon-gift' },
{ type: 3, text: '待收货', icon: 'icon-check' },
{ type: 4, text: '待评价', icon: 'icon-comment' },
]
interface BannerItem {
id: string
imgUrl: string
title: string
hrefUrl: string
}
const handleTestHttp = async () => {
const res = await http<BannerItem[]>({
url: '/member/profile',
method: 'GET',
})
console.log(res)
}
// 滚动到底部
const { guessRef, onScrollToLower } = useGuessList()
</script>
<style lang="scss">
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #f8f8f8;
page {
height: 100%;
overflow: hidden;
background-color: #f7f7f8;
}
.top_view {
height: var(--status-bar-height);
.viewport {
height: 100%;
background-repeat: no-repeat;
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);
background-size: 100% auto;
}
/* 用户信息 */
.profile {
margin-top: 20rpx;
position: relative;
.overview {
display: flex;
height: 120rpx;
padding: 0 36rpx;
color: #fff;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background-color: #eee;
}
.gray {
filter: grayscale(100%);
}
.meta {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
line-height: 30rpx;
padding: 16rpx 0;
margin-left: 20rpx;
}
.nickname {
max-width: 350rpx;
margin-bottom: 16rpx;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.extra {
display: flex;
font-size: 20rpx;
}
.tips {
font-size: 22rpx;
}
.update {
padding: 3rpx 10rpx 1rpx;
color: rgba(255, 255, 255, 0.8);
border: 1rpx solid rgba(255, 255, 255, 0.8);
margin-right: 10rpx;
border-radius: 30rpx;
}
.settings {
position: absolute;
bottom: 0;
right: 40rpx;
font-size: 30rpx;
color: #fff;
}
}
/* 我的订单 */
.orders {
position: relative;
z-index: 99;
padding: 30rpx;
margin: 50rpx 20rpx 0;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
.title {
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
color: #1e1e1e;
.navigator {
font-size: 24rpx;
color: #939393;
float: right;
}
}
.section {
width: 100%;
position: fixed;
background-color: #f8f8f8;
top: 0;
z-index: 999;
display: flex;
justify-content: space-between;
padding: 40rpx 20rpx 10rpx;
.navigator,
.contact {
text-align: center;
font-size: 24rpx;
color: #333;
&::before {
display: block;
font-size: 60rpx;
color: #ff9545;
}
}
.contact {
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
line-height: inherit;
}
}
}
/* 猜你喜欢 */
.guess {
background-color: #f7f7f8;
margin-top: 20rpx;
}
</style>

7
src/pagesMember/address/address.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<view class="address">address</view>
</template>
<script setup lang="ts"></script>
<style lang="scss"></style>

318
src/pagesMember/profile/profile.vue Normal file
View File

@ -0,0 +1,318 @@
<template>
<view class="viewport">
<!-- 导航栏 -->
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator>
<view class="title">个人信息</view>
</view>
<!-- 头像 -->
<view class="avatar">
<view class="avatar-content" @tap="handleChangeAvatar">
<image class="image" :src="profile?.avatar" mode="aspectFill" />
<text class="text">点击修改头像</text>
</view>
</view>
<!-- 表单 -->
<view class="form">
<!-- 表单内容 -->
<view class="form-content">
<view class="form-item">
<text class="label">账号</text>
<text class="account">{{ profile?.account }}</text>
</view>
<view class="form-item">
<text class="label">昵称</text>
<input class="input" type="text" placeholder="请填写昵称" v-model="profile.nickname" />
</view>
<view class="form-item">
<text class="label">性别</text>
<radio-group @change="onRadioChange">
<label class="radio">
<radio value="男" color="#27ba9b" :checked="profile?.gender === '男'" />
男
</label>
<label class="radio">
<radio value="女" color="#27ba9b" :checked="profile?.gender === '女'" />
女
</label>
</radio-group>
</view>
<view class="form-item">
<text class="label">生日</text>
<picker
class="picker"
mode="date"
start="1900-01-01"
:end="new Date()"
:value="profile?.birthday"
@change="onDatePickerChange"
>
<view v-if="true">{{ profile?.birthday }}</view>
<view class="placeholder" v-else>请选择日期</view>
</picker>
</view>
<view class="form-item">
<text class="label">城市</text>
<picker
class="picker"
mode="region"
:value="profile?.fullLocation?.split(' ')"
@change="onRegionPickerChange"
>
<view v-if="true">{{ profile?.fullLocation }}</view>
<view class="placeholder" v-else>请选择城市</view>
</picker>
</view>
<view class="form-item">
<text class="label">职业</text>
<input class="input" type="text" placeholder="请填写职业" v-model="profile!.profession" />
</view>
</view>
<!-- 提交按钮 -->
<button class="form-button" @tap="handleSave">保 存</button>
</view>
</view>
</template>
<script setup lang="ts">
import { useMemberStore } from '@/stores/modules/member'
import { getProfileAPI, putProfileAPI } from '@/services/profile'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { Gender, ProfileDetail } from '@/types/member'
const memberStore = useMemberStore()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 个人信息
const profile = ref({} as ProfileDetail)
// 获取个人信息
const getProfile = async () => {
const res = await getProfileAPI()
console.log(res)
profile.value = res.result
}
onLoad(() => {
getProfile()
})
// 修改头像, 和其他更新是分开接口
const handleChangeAvatar = () => {
uni.chooseMedia({
count: 1,
mediaType: ['image'],
success: (res) => {
const tempFilePath = res.tempFiles[0].tempFilePath
console.log(tempFilePath)
uni.uploadFile({
url: '/member/profile/avatar',
filePath: tempFilePath,
name: 'file',
success: (res) => {
console.log(res)
if (res.statusCode === 200) {
const avatar = JSON.parse(res.data).result.avatar
profile.value!.avatar = avatar
memberStore.updateAvatar(avatar)
uni.showToast({
title: '修改头像成功',
icon: 'success',
})
} else {
const errorMsg = JSON.parse(res.data).message
uni.showToast({
title: errorMsg,
icon: 'error',
})
}
},
})
},
})
}
// 性别选择
const onRadioChange: UniHelper.RadioGroupOnChange = (e) => {
profile.value.gender = e.detail.value as Gender
}
// 日期选择
const onDatePickerChange: UniHelper.DatePickerOnChange = (e) => {
profile.value.birthday = e.detail.value
}
// 地区选择
const onRegionPickerChange: UniHelper.RegionPickerOnChange = (e) => {
profile.value.fullLocation = e.detail.value.join(' ')
}
// 保存
const handleSave = async () => {
const { nickname, gender, birthday, fullLocation, profession } = profile.value
const [provinceCode, cityCode, countyCode] = fullLocation!.split(' ')
const res = await putProfileAPI({
nickname,
gender,
birthday,
profession,
provinceCode,
cityCode,
countyCode,
})
if (res.code === '1') {
uni.showToast({
title: '修改个人信息成功',
icon: 'success',
})
memberStore.updateProfile({
nickname,
gender,
birthday,
profession,
})
console.log('更新store')
uni.navigateBack()
} else {
const errorMsg = res.msg
uni.showToast({
title: errorMsg,
icon: 'error',
})
}
}
</script>
<style lang="scss">
page {
background-color: #f4f4f4;
}
.viewport {
display: flex;
flex-direction: column;
height: 100%;
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
background-size: auto 420rpx;
background-repeat: no-repeat;
}
// 导航栏
.navbar {
position: relative;
.title {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 500;
color: #fff;
}
.back {
position: absolute;
height: 40px;
width: 40px;
left: 0;
font-size: 20px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
}
// 头像
.avatar {
text-align: center;
width: 100%;
height: 260rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.image {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background-color: #eee;
}
.text {
display: block;
padding-top: 20rpx;
line-height: 1;
font-size: 26rpx;
color: #fff;
}
}
// 表单
.form {
background-color: #f4f4f4;
&-content {
margin: 20rpx 20rpx 0;
padding: 0 20rpx;
border-radius: 10rpx;
background-color: #fff;
}
&-item {
display: flex;
height: 96rpx;
line-height: 46rpx;
padding: 25rpx 10rpx;
background-color: #fff;
font-size: 28rpx;
border-bottom: 1rpx solid #ddd;
&:last-child {
border: none;
}
.label {
width: 180rpx;
color: #333;
}
.account {
color: #666;
}
.input {
flex: 1;
display: block;
height: 46rpx;
}
.radio {
margin-right: 20rpx;
}
.picker {
flex: 1;
}
.placeholder {
color: #808080;
}
}
&-button {
height: 80rpx;
text-align: center;
line-height: 80rpx;
margin: 30rpx 20rpx;
color: #fff;
border-radius: 80rpx;
font-size: 30rpx;
background-color: #27ba9b;
}
}
</style>

107
src/pagesMember/settings/settings.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<view class="viewport">
<!-- 列表1 -->
<view class="list" v-if="memberStore.profile">
<navigator url="/pagesMember/address/address" hover-class="none" class="item arrow">
我的收货地址
</navigator>
</view>
<!-- 列表2 -->
<view class="list">
<button hover-class="none" class="item arrow" open-type="openSetting">授权管理</button>
<button hover-class="none" class="item arrow" open-type="feedback">问题反馈</button>
<button hover-class="none" class="item arrow" open-type="contact">联系我们</button>
</view>
<!-- 列表3 -->
<view class="list">
<navigator hover-class="none" class="item arrow" url="">关于金佰川</navigator>
</view>
<!-- 操作按钮 -->
<view class="action" v-if="memberStore.profile">
<view class="button" @tap="handleLogout">退出登录</view>
</view>
</view>
</template>
<script setup lang="ts">
import { useMemberStore } from '@/stores/modules/member'
const memberStore = useMemberStore()
// 退出登录
const handleLogout = () => {
uni.showModal({
content: '退出登录',
success: (res) => {
if (res.confirm) {
memberStore.clearProfile()
uni.navigateBack()
}
},
})
}
</script>
<style lang="scss">
page {
background-color: #f4f4f4;
}
.viewport {
padding: 20rpx;
}
/* 列表 */
.list {
padding: 0 20rpx;
background-color: #fff;
margin-bottom: 20rpx;
border-radius: 10rpx;
.item {
line-height: 90rpx;
padding-left: 10rpx;
font-size: 30rpx;
color: #333;
border-top: 1rpx solid #ddd;
position: relative;
text-align: left;
border-radius: 0;
background-color: #fff;
&::after {
width: auto;
height: auto;
left: auto;
border: none;
}
&:first-child {
border: none;
}
&::after {
right: 5rpx;
}
}
.arrow::after {
content: '\e6c2';
position: absolute;
top: 50%;
color: #ccc;
font-family: 'erabbit' !important;
font-size: 32rpx;
transform: translateY(-50%);
}
}
/* 操作按钮 */
.action {
text-align: center;
line-height: 90rpx;
margin-top: 40rpx;
font-size: 32rpx;
color: #333;
.button {
background-color: #fff;
margin-bottom: 20rpx;
border-radius: 10rpx;
}
}
</style>

19
src/services/profile.ts Normal file
View File

@ -0,0 +1,19 @@
import { http } from '@/utils/http'
import type { ProfileDetail, ProfileParams } from '@/types/member'
// 获取个人信息详情
export const getProfileAPI = () => {
return http<ProfileDetail>({
url: '/member/profile',
method: 'GET',
})
}
// 修改个人信息
export const putProfileAPI = (data: ProfileParams) => {
return http<ProfileParams>({
url: '/member/profile',
method: 'PUT',
data,
})
}

21
src/stores/modules/member.ts
View File

@ -1,4 +1,4 @@
import type { LoginResult } from '@/types/member'
import type { LoginResult, ProfileDetail, ProfileParams } from '@/types/member'
import { defineStore } from 'pinia'
import { ref } from 'vue'
@ -19,11 +19,30 @@ export const useMemberStore = defineStore(
profile.value = undefined
}
// 更新头像
const updateAvatar = (avatar: string) => {
if (profile.value) {
profile.value.avatar = avatar
}
}
// 更新个人信息
const updateProfile = (
val: Pick<ProfileDetail, 'nickname' | 'gender' | 'birthday' | 'profession'>,
) => {
console.log('调用action updateProfile', val)
if (profile.value) {
Object.assign(profile.value, val)
}
}
// 记得 return
return {
profile,
setProfile,
clearProfile,
updateAvatar,
updateProfile,
}
},
{

2
src/styles/base.scss
View File

@ -18,7 +18,7 @@ scroll-view {
image {
width: 100%;
height: 100%;
// height: 100%;
vertical-align: middle;
}

2
src/utils/http.ts
View File

@ -52,7 +52,7 @@ uni.addInterceptor('uploadFile', interceptorOptions)
* 3.3 网络错误 -> 提示用户换网络
*/
type Data<T> = {
code: number
code: string
msg: string
result: T
}