【优化】(个人中心):优化个人中心头部背景样式问题

This commit is contained in:
15093570141
2024-10-15 16:19:54 +08:00
parent 2363302cdf
commit 5c4200097c
9 changed files with 104 additions and 97 deletions

View File

@@ -81,7 +81,7 @@
}
});
const emits = defineEmits(['handleChangePopup']);
const emits = defineEmits(['handleChangePopup', 'getUserInfo']);
onMounted(() => {
if (Object.keys(userInfoStore.userInfo).length == 0 || !uni.getStorageSync(UserToken)) {
@@ -162,7 +162,8 @@
uni.setStorageSync(UserToken, phoneNumber.data.token);
if (phoneNumber.otherData) {
userInfoStore.setUserInfo(phoneNumber.otherData);
handleShowToast('登录成功', 'success');
handleShowToast('登录成功', 'success');
emits('getUserInfo')
}
} else {
handleShowToast('登录失败,请重试');

View File

@@ -8,7 +8,7 @@
</view>
<template v-if="props.showLoginModalDom">
<coreshop-login-modal :show="_useLoginStore.showLoginModalTogglePop"
@handleChangePopup="handleChangeLoginPopup"></coreshop-login-modal>
@handleChangePopup="handleChangeLoginPopup" @getUserInfo="_useLoginStore.getUserInfo()"></coreshop-login-modal>
</template>
</view>
</template>

View File

@@ -1,6 +1,9 @@
import { defineStore } from 'pinia';
import { UserToken } from '@/core/consts';
import type { UserLoginStoreType } from '@/core/models';
import { handleShowToast } from '@/core/utils';
import { queryUserInfo } from '@/core/api';
import type { UserLoginStoreType, Response, UserInfoType } from '@/core/models';
import { useUserInfoStore } from './userInfo';
export const useLoginStore = defineStore('useLoginStore', {
state: () : UserLoginStoreType => {
@@ -17,6 +20,16 @@ export const useLoginStore = defineStore('useLoginStore', {
callBack();
}
},
/** 获取用户数据 */
async getUserInfo() {
const userInfoStore = useUserInfoStore();
const userInfo : Response<UserInfoType> = await queryUserInfo();
if (userInfo.status) {
userInfoStore.setUserInfo(userInfo?.data);
} else {
handleShowToast(userInfo.msg)
}
},
/** 设置登录弹框打开或者关闭 */
setShowLoginModalTogglePop(showLoginModalTogglePop : boolean) {
this.showLoginModalTogglePop = showLoginModalTogglePop;

View File

@@ -234,8 +234,10 @@
limit: 10,
where: `{"catId":${state.catId}}`
});
state.totalPages = goodsPageList.data.totalPages;
state.goodsList = state.goodsList.concat(goodsPageList.data.list);
if(goodsPageList.status){
state.totalPages = goodsPageList.data?.totalPages;
state.goodsList = state.goodsList.concat(goodsPageList.data?.list);
}
uni.hideLoading();
}

View File

@@ -156,8 +156,10 @@
limit: 10,
where: `{"catId":${state.catId}}`
});
state.totalPages = goodsPageList.data.totalPages;
state.goodsList = state.goodsList.concat(goodsPageList.data.list);
if(goodsPageList.status){
state.totalPages = goodsPageList.data?.totalPages;
state.goodsList = state.goodsList.concat(goodsPageList.data?.list);
}
uni.hideLoading();
}

View File

@@ -1,20 +1,17 @@
:deep(.layout-page-content) {
&::before {
position: absolute;
left: 0;
top: -50px;
.member-head{
position: relative;
.memeber-bg{
display: block;
content: '';
width: 100%;
height: 685rpx;
background: #d33123 url(/static/images/member/bg.png);
background-size: cover;
width: 750rpx;
height: 600rpx;
}
}
.head-box {
position: relative;
margin-top: -20rpx;
.head-box {
position: absolute;
bottom: 13rpx;
left: 0;
width: 100%;
.user-info {
display: flex;
align-items: center;
@@ -85,25 +82,13 @@
}
}
}
.member-box {
position: relative;
.bg {
display: block;
width: 100%;
height: 100rpx;
}
.member-content {
position: absolute;
left: 50%;
top: 44%;
transform: translate(-50%, -50%);
width: 88%;
.member-box {
.member-content {
width: 88%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
.content {
display: flex;
align-items: center;

View File

@@ -1,66 +1,70 @@
<template>
<coreshop-page :title="state.isScrollToTop ? '' : userInfoStore.userInfo?.nickName || ''" titleColor="#fff" mode="left"
:bgColor=" state.isScrollToTop ? 'rgba(0,0,0,0)':'#d33123'" :isBack="false" showLoginModalDom>
<view class="layout-member-page">
<view class="head-box m-b-10">
<view class="user-info">
<view class="img-box">
<image class="img"
:src="handleStaticResources(userInfoStore.userInfo?.avatarImage || '/static/images/common/empty.png')">
</image>
</view>
<template v-if="Object.keys(userInfoStore.userInfo).length > 0">
<view class="info-box">
<view class="name">{{ userInfoStore.userInfo?.nickName }}</view>
<view class="price">我的余额{{ userInfoStore.userInfo?.balance || 0 }}</view>
</view>
<view class="icon-box"
@click="handleRouteNavigateTo(`/pages/subpackage/member/set/userInfo/userInfo`)">
<image class="icon" :src="handleStaticResources('/static/images/member/icon-right.png')">
<coreshop-page :title="state.isScrollToTop ? '' : userInfoStore.userInfo?.nickName || ''" titleColor="#fff"
mode="left" :bgColor=" state.isScrollToTop ? 'rgba(0,0,0,0)':'#d33123'" :isShowStatusBarHeight="false"
:isBack="false" showLoginModalDom>
<view class="layout-member-page">
<view class="member-head">
<image class="memeber-bg" src="/static/images/member/bg.png"></image>
<view class="head-box m-b-10">
<view class="user-info">
<view class="img-box">
<image class="img"
:src="handleStaticResources(userInfoStore.userInfo?.avatarImage || '/static/images/common/empty.png')">
</image>
</view>
</template>
<template v-else>
<view class="info-box">
<view class="login" @click="handleLogin">立即登录</view>
<template v-if="Object.keys(userInfoStore.userInfo).length > 0">
<view class="info-box">
<view class="name">{{ userInfoStore.userInfo?.nickName }}</view>
<view class="price">我的余额{{ userInfoStore.userInfo?.balance || 0 }}</view>
</view>
<view class="icon-box"
@click="handleRouteNavigateTo(`/pages/subpackage/member/set/userInfo/userInfo`)">
<image class="icon"
:src="handleStaticResources('/static/images/member/icon-right.png')">
</image>
</view>
</template>
<template v-else>
<view class="info-box">
<view class="login" @click="handleLogin">立即登录</view>
</view>
</template>
</view>
<view class="user-info-num-box">
<view class="item" @click="handleJumpPage('/pages/subpackage/member/footprint/footprint')">
<view class="num">{{ userInfoStore.userInfo?.footPrintCount || 0 }}</view>
<view class="tit">足迹</view>
</view>
<view class="item" @click="handleJumpPage('/pages/subpackage/member/coupon/coupon')">
<view class="num">{{ userInfoStore.userInfo?.userCouponCount || 0 }}</view>
<view class="tit">优惠券</view>
</view>
<view class="item" @click="handleJumpPage('/pages/subpackage/member/collection/collection')">
<view class="num">{{ userInfoStore.userInfo?.collectionCount || 0 }}</view>
<view class="tit">收藏</view>
</view>
<view class="item" @click="handleJumpPage('/pages/subpackage/member/afterSales/list/list')">
<view class="num">{{ state?.afterSaleNums || 0 }}</view>
<view class="tit">售后</view>
</view>
</template>
</view>
<view class="user-info-num-box">
<view class="item" @click="handleJumpPage('/pages/subpackage/member/footprint/footprint')">
<view class="num">{{ userInfoStore.userInfo?.footPrintCount || 0 }}</view>
<view class="tit">足迹</view>
</view>
<view class="item" @click="handleJumpPage('/pages/subpackage/member/coupon/coupon')">
<view class="num">{{ userInfoStore.userInfo?.userCouponCount || 0 }}</view>
<view class="tit">优惠券</view>
</view>
<view class="item" @click="handleJumpPage('/pages/subpackage/member/collection/collection')">
<view class="num">{{ userInfoStore.userInfo?.collectionCount || 0 }}</view>
<view class="tit">收藏</view>
</view>
<view class="item" @click="handleJumpPage('/pages/subpackage/member/afterSales/list/list')">
<view class="num">{{ state?.afterSaleNums || 0 }}</view>
<view class="tit">售后</view>
</view>
</view>
<view class="member-box">
<image class="bg" :src="handleStaticResources('/static/images/member/member-bg.png')"></image>
<view class="member-content">
<view class="content">
<view class="grade">{{ userInfoStore.userInfo?.gradeName || '普通会员' }}</view>
<view class="integral">
我的{{ shopConfigStore?.config?.pointShowName || '积分' }}{{ userInfoStore.userInfo?.point || 0 }}
<view class="member-box">
<view class="member-content">
<view class="content">
<view class="grade">{{ userInfoStore.userInfo?.gradeName || '普通会员' }}</view>
<view class="integral">
我的{{ shopConfigStore?.config?.pointShowName || '积分' }}{{ userInfoStore.userInfo?.point || 0 }}
</view>
</view>
<view class="view-detail"
@click="handleJumpPage('/pages/subpackage/member/integral/integral')">
<text class="tit">查看详情</text>
<uv-icon name="arrow-right" size="13" color="#292B2E"></uv-icon>
</view>
</view>
<view class="view-detail" @click="handleJumpPage('/pages/subpackage/member/integral/integral')">
<text class="tit">查看详情</text>
<uv-icon name="arrow-right" size="13" color="#292B2E"></uv-icon>
</view>
</view>
</view>
</view>
</view>
<view class="p-20">
<!-- 我的订单 -->
<view class="view-box">
@@ -157,10 +161,10 @@
/** 获取项目配置 */
const shopConfigStore = useShopConfigStore();
/** 用户数据store */
const userInfoStore = useUserInfoStore();
/** 登录store */
const _useLoginStore = useLoginStore();
@@ -170,12 +174,12 @@
const state = reactive<{
orderList : Array<MemberOrderType>;
afterSaleNums : number;
afterSaleNums : number;
userIsClerk : UserIsClerkType,
isScrollToTop : boolean,
}>({
orderList: navState.orderList,
afterSaleNums: 0,
afterSaleNums: 0,
userIsClerk: {},
isScrollToTop: true,
})
@@ -196,10 +200,10 @@
});
/** 获取用户信息 */
const getUserInfo = async () => {
const getUserInfo = async () => {
const userInfo : Response<UserInfoType> = await queryUserInfo();
if (userInfo.status) {
userInfoStore.setUserInfo(userInfo?.data);
userInfoStore.setUserInfo(userInfo?.data);
getUserIsClerk();
} else {
handleShowToast(userInfo.msg)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB