baiyuApp/pages_mall/home.vue

<template>
	<view class="home-container">
		<!-- 头部搜索与标题 -->
		<view class="custom-header" :style="{paddingTop: statusBarHeight + 'px'}">
			<view class="title-bar">
				<view class="back-btn" @click="goBack">
					<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
				</view>
				<text class="title">商城</text>
				<view class="right-info">
					<text class="coin-badge">福币:{{integral}}</text>
				</view>
			</view>
			<view class="search-section">
				<u-search placeholder="搜索您想要的内容" :show-action="false" v-model="keyword" bg-color="#fff" color="#333"
					placeholder-color="#999" @search="refreshList" @clear="refreshList"></u-search>
			</view>
		</view>

		<!-- 滚动内容区 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="scrolltolower">
			<!-- Banner -->
			<view class="banner-section" v-if="false">
				<view class="banner-wrapper">
					<view class="banner-icon">
						<u-icon name="volume-fill" color="#fff" size="24"></u-icon>
					</view>
					<view class="banner-content">
						<text class="banner-title">快递停运通知</text>
						<text class="banner-sub">春节期间快递服务调整，请提前安排下单</text>
					</view>
					<view class="banner-action">
						<text>查看</text>
						<u-icon name="arrow-right" color="#fff" size="12"></u-icon>
					</view>
				</view>
			</view>

			<!-- 金刚区导航 -->
			<view class="nav-grid">
				<view class="nav-item" @click="navTo('/pages_mall/newArrival')">
					<view class="icon-box icon-new">
						<u-icon name="star-fill" color="#fff" size="24"></u-icon>
					</view>
					<text>新品推荐</text>
				</view>
				<view class="nav-item" @click="switchTab(1)">
					<view class="icon-box icon-cate">
						<u-icon name="grid-fill" color="#fff" size="24"></u-icon>
					</view>
					<text>商品分类</text>
				</view>
				<view class="nav-item" @click="navTo('/pages_mall/exchange')">
					<view class="icon-box icon-mall">
						<u-icon name="bag-fill" color="#fff" size="24"></u-icon>
					</view>
					<text>福币商城</text>
				</view>
				<view class="nav-item" @click="switchTab(3)">
					<view class="icon-box icon-user">
						<u-icon name="account-fill" color="#fff" size="24"></u-icon>
					</view>
					<text>个人中心</text>
				</view>
			</view>

			<!-- 商品列表 -->
			<view class="goods-section">
				<!-- <view class="goods-item"
					@click="navTo('/pages/user/integral/integralGoodsDetails?goodsId=' + item.goodsId)" -->
				<view class="goods-item" @click="navTo('/pages_mall/productDetails?productId='+item.productId)"
					v-for="(item,index) in dataList" :key="index">
					<image :src="item.image || item.imgUrl" mode="aspectFill" class="goods-img"></image>
					<view class="goods-info">
						<text class="goods-title ellipsis2">{{item.productName || item.goodsName}}</text>
						<view class="goods-price">
							<text class="price es-mr-10">¥{{item.otPrice ? item.otPrice.toFixed(2) : item.price}}</text>
							<text class="es-fs-24">已售{{item.sales || 0}}件</text>
							<!-- <text class="org-price" v-if="item.price">¥{{item.price}}</text> -->
						</view>
					</view>
				</view>
			</view>

			<view class="loading-more" v-if="dataList.length > 0">
				<u-loadmore :status="isMore ? 'loading' : 'nomore'" />
			</view>

			<view class="empty-box" v-if="dataList.length == 0">
				<u-empty mode="data" text="暂无商品数据"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getDictByKey
	} from '@/api/common.js'
	import {
		getProducts
	} from '@/api/product.js'
	import {
		getUserInfo
	} from '@/api/user'
	import {
		getAdvList
	} from '@/api/adv.js'
	import {
		getIntegralGoodsList
	} from '@/api/integral.js'

	export default {
		data() {
			return {
				statusBarHeight: 20,
				integral: 0,
				keyword: "",
				dataList: [],
				pageNum: 1,
				pageSize: 10,
				isMore: true,
				total: 0,
				bannerList: [], // 轮播图图片列表
				bannerAdvs: [] // 轮播图完整数据
			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.initData();
		},
		methods: {
			initData() {
				this.getUserInfo();
				this.getBannerData();
				this.refreshList();
			},
			getBannerData() {
				// 尝试获取轮播图，假设商城首页advType为1或使用通用配置
				// 如果没有特定ID，先尝试用1，或者使用模拟数据
				let data = {
					advType: 1
				};
				getAdvList(data).then(res => {
					if (res.code == 200 && res.data && res.data.length > 0) {
						this.bannerAdvs = res.data;
						this.bannerList = res.data.map(item => item.imageUrl);
					} else {
						// 如果接口没有数据，使用默认好看的占位图
						this.bannerList = [
							'https://zkzh-2025.oss-cn-beijing.aliyuncs.com/shop/images/banner1.jpg',
							'https://zkzh-2025.oss-cn-beijing.aliyuncs.com/shop/images/banner2.jpg'
						];
						// 这里的图片地址如果是404，我会换成更稳定的图，或者使用项目中已有的图
						// 为了稳妥，使用picsum或者mock
						// 但考虑到是医疗商城，最好用相关图。先用假数据占位，或者复用项目中看到的图
					}

					// 如果列表为空（包括接口没数据且上面没设置默认），则设置默认
					if (this.bannerList.length === 0) {
						this.bannerList = [
							'https://cdn.uviewui.com/uview/swiper/swiper1.png',
							'https://cdn.uviewui.com/uview/swiper/swiper2.png',
							'https://cdn.uviewui.com/uview/swiper/swiper3.png'
						];
					}
				});
			},
			getUserInfo() {
				getUserInfo().then(res => {
					if (res.code == 200 && res.user != null) {
						this.integral = res.user.integral;
					}
				});
			},
			refreshList() {
				this.pageNum = 1;
				this.isMore = true;
				this.dataList = [];
				this.getList();
			},
			scrolltolower() {
				if (this.isMore) {
					this.getList();
				}
			},
			getList() {
				var data = {
					page: this.pageNum,
					pageNum: this.pageNum,
					limit: this.pageSize,
					pageSize: this.pageSize,
					keyword: this.keyword,
				};
				// 保持原逻辑
				getProducts(data).then(res => {
				// getIntegralGoodsList(data).then(res => {
					if (res.code == 200) {
						let list = res.data.list && res.data.list.length > 0 ? res.data.list : []
						this.dataList = this.dataList.concat(list)
						this.total = res.data.total
						this.pageNum++
						if (this.dataList.length >= this.total) {
							this.isMore = false
						}
					} else {
						// this.dataList = [] // Keep existing if error? Or clear. Original cleared.
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			goBack() {
				uni.showTabBar()
				uni.switchTab({
					url: '/pages_im/pages/conversation/conversationList/index'
				})
			},
			switchTab(index) {
				this.$emit('switchTab', index);
			}
		}
	}
</script>

<style scoped lang="scss">
	.home-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F5F7FA;
	}

	.custom-header {
		background: linear-gradient(to bottom, #2583EB, #4FACFE);
		padding: 20rpx 30rpx;
		color: #fff;

		.title-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.coin-badge {
				background: rgba(255, 255, 255, 0.25);
				padding: 6rpx 20rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				backdrop-filter: blur(10px);
			}
		}

		.search-section {
			margin-top: 10rpx;
			padding-bottom: 20rpx;
		}
	}

	.scroll-content {
		flex: 1;
		height: 0;
	}

	.banner-section {
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.banner-wrapper {
			background: linear-gradient(90deg, #FF6B6B, #FF8E53);
			border-radius: 16rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);

			.banner-icon {
				width: 60rpx;
				height: 60rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
			}

			.banner-content {
				flex: 1;
				display: flex;
				flex-direction: column;

				.banner-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #fff;
					margin-bottom: 6rpx;
				}

				.banner-sub {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.9);
				}
			}

			.banner-action {
				display: flex;
				align-items: center;
				background: rgba(255, 255, 255, 0.2);
				padding: 6rpx 16rpx;
				border-radius: 24rpx;

				text {
					font-size: 22rpx;
					color: #fff;
					margin-right: 4rpx;
				}
			}
		}
	}

	.scroll-content {
		flex: 1;
		height: 0; // Important for flex scroll
	}



	.nav-grid {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background: #fff;
		margin: 0 30rpx 20rpx;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

		.nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon-box {
				width: 100rpx;
				height: 100rpx;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16rpx;
				transition: transform 0.2s;

				&:active {
					transform: scale(0.95);
				}

				&.icon-new {
					background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
				}

				&.icon-cate {
					background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
				}

				&.icon-mall {
					background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
				}

				&.icon-user {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				}
			}

			text {
				font-size: 26rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}

	.goods-section {
		padding: 0 30rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.goods-item {
			width: 48%;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			transition: transform 0.2s;

			&:active {
				transform: scale(0.98);
			}

			.goods-img {
				width: 100%;
				height: 320rpx;
				background: #eee;
			}

			.goods-info {
				padding: 20rpx;

				.goods-title {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 16rpx;
					height: 80rpx;
					line-height: 40rpx;
					font-weight: 500;
				}

				.goods-price {
					display: flex;
					align-items: baseline;

					.price {
						color: #FF5000;
						font-size: 34rpx;
						font-weight: bold;

						&::before {
							content: '¥';
							font-size: 24rpx;
							margin-right: 4rpx;
						}
					}

					.org-price {
						color: #999;
						font-size: 22rpx;
						text-decoration: line-through;
						margin-left: 12rpx;
					}
				}
			}
		}
	}
</style>