xionggeshop/xgsc.gynhc.com_wx/pages/index/user.vue

<!-- 个人中心 -->
<template>
	<view class="user-page brand-page">
		<view class="user-header-bg"></view>
		<view class="user-content-layer">
			<!-- 个人信息卡片 -->
			<userinfo-card
				v-if="userHeadData && userHeadData.style"
				:scrollTop="scrollTop"
				:detail="userHeadData"
				@onShare="onShare"
			></userinfo-card>

			<!-- 固定模块：订单 → 促销 → 服务 -->
			<view class="user-modules">
				<view class="user-module-item">
					<sh-order-card></sh-order-card>
				</view>

				<view class="user-module-item">
					<user-promo-banner></user-promo-banner>
				</view>

				<view class="user-module-item">
					<sh-grid :list="gridToolList"></sh-grid>
				</view>

				<view
					class="user-module-item"
					v-for="item in otherUserModules"
					:key="item.id"
				>
					<sh-banner
						v-if="item.type === 'banner'"
						:Px="item.content.x"
						:Py="item.content.y"
						:borderRadius="item.content.radius"
						:height="item.content.height"
						:list="item.content.list"
					></sh-banner>
					<sh-grid-swiper
						v-if="item.type === 'menu'"
						:list="filterNavList(item.content.list)"
						:oneRowNum="item.content.style"
					></sh-grid-swiper>
					<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
					<sh-hot-goods
						v-if="item.type === 'goods-list' || item.type === 'goods-group'"
						:detail="item.content"
					></sh-hot-goods>
					<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
					<sh-cell v-if="item.type === 'nav-list'" :list="filterNavList(item.content.list)"></sh-cell>
				</view>
			</view>

			<!-- copyright -->
			<view
				class="copyright-box u-flex-col u-row-center u-col-center"
				v-if="initShop.copyright"
			>
				<view class="copyright-text">{{ initShop.copyright[0] }}</view>
				<view class="copyright-text">{{ initShop.copyright[1] }}</view>
			</view>

			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
		</view>

		<shopro-float-btn></shopro-float-btn>
		<shopro-auth-modal></shopro-auth-modal>
		<shopro-share v-model="showShare" posterType="user"></shopro-share>
		<shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shAdv from './components/sh-adv.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import userinfoCard from './user/userinfo-card.vue';
import userPromoBanner from './user/user-promo-banner.vue';
import { hideNativeTabBar } from '@/shopro/utils/theme';
import { filterHiddenTools } from '@/shopro/utils/hidden-tools';
import { mapActions, mapGetters } from 'vuex';

export default {
	components: {
		shBanner,
		shGridSwiper,
		shAdv,
		shRichtext,
		shCell,
		shGrid,
		shWallet,
		shOrderCard,
		shHotGoods,
		userinfoCard,
		userPromoBanner
	},
	data() {
		return {
			scrollTop: 0,
			showShare: false,
			enable: false,
			userData: {}
		};
	},
	computed: {
		...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
		userHeadData() {
			if (this.userTemplate?.length) {
				return this.userTemplate[0].content;
			}
		},
		gridToolList() {
			const gridModule = (this.userTemplate || []).find(item => item.type === 'grid-list');
			return filterHiddenTools(gridModule?.content?.list || []);
		},
		otherUserModules() {
			let skippedPromoBanner = false;
			return (this.userTemplate || []).filter((item, index) => {
				if (index === 0) return false;
				if (item.type === 'order-card') return false;
				if (item.type === 'grid-list') return false;
				if (item.type === 'wallet-card') return false;
				if (item.type === 'banner' && !skippedPromoBanner) {
					skippedPromoBanner = true;
					return false;
				}
				return true;
			});
		}
	},
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onShow() {
		hideNativeTabBar();
		if (this.isLogin) {
			this.init();
			this.getUserData();
			this.getAgent();
		}
		this.enable = true;
	},
	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData', 'getAgent']),
		filterNavList(list) {
			return filterHiddenTools(list);
		},
		onShare() {
			this.showShare = true;
			hideNativeTabBar();
		},
		init() {
			this.getUserInfo()
				.then(res => {
					this.userData = res;
					uni.stopPullDownRefresh();
				})
				.catch(() => {
					uni.stopPullDownRefresh();
				});
		}
	}
};
</script>

<style lang="scss">
.user-page {
	min-height: 100vh;
	background: $brand-page-bg;
}

.user-header-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 520rpx;
	background: linear-gradient(180deg, #0A2463 0%, #1E3A8A 45%, #F5F7FA 100%);
	z-index: 0;
}

.user-content-layer {
	position: relative;
	z-index: 1;
}

.user-modules {
	padding: 0 $brand-page-gutter;
	box-sizing: border-box;
}

.user-module-item {
	margin-bottom: $brand-section-gap;
}

.copyright-box {
	padding: 48rpx 0 32rpx;

	.copyright-text {
		font-size: 22rpx;
		font-weight: 400;
		color: $brand-text-muted;
		line-height: 1.6;
	}
}
</style>