universal-wechat-uniapp-241007/pages/index/product.vue

<template>
	<view class="page">
		<navbar title="商城"/>
		
		<!-- <view>
			<uv-swiper
			:list="bannerList" 
			indicator
			height="320rpx"
			keyName="image"></uv-swiper>
		</view> -->
		
		<view class="swipe">
			<uv-swiper 
			:list="bannerList" 
			indicator
			height="320rpx"
			keyName="image"></uv-swiper>
		</view>
		
		<!-- 公告 -->
		<view class="notice">
			<uv-notice-bar
			fontSize="28rpx"
			@click="$utils.navigateTo('/pages_order/notice/noticeDetail')"
			:text="headInfo.notice.keyName"></uv-notice-bar>
		</view>
		
		<!-- 分类 -->
		<view class="city-tabs-container">
			<uv-tabs 
				:list="productCategory" 
				:current="currentCityTabIndex"
				:activeStyle="{color: '#5baaff', fontWeight: 600}"
				lineColor="#5baaff" 
				lineHeight="6rpx" 
				lineWidth="40rpx"
				keyName="title"
				@click="tabsClick"
			/>
		</view>
		
		<view class="productList">
			<productList :productList="list"/>
		</view>
		
		<!-- <view class="waterfall">
			<uv-waterfall ref="waterfall" v-model="list"
			 :add-time="10" 
			 :left-gap="leftGap"
			 :right-gap="rightGap"
			 :column-gap="columnGap"
			 @changeList="changeList">
				<template v-slot:list1>
					<view>
						<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item"
						@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)">
							<view class="waterfall-item__image" :style="[imageStyle(item)]">
								<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
							</view>
							<view class="waterfall-item__ft">
								<view class="waterfall-item__ft__title">
									<text class="title">{{item.name}}</text>
								</view>
								<view class="waterfall-item__ft__desc uv-line-2">
									<text class="price">现价{{item.price}}￥</text>
									<text class="oldPrice">原价{{item.oldPrice}}￥</text>
								</view>
							</view>
						</view>
						
					</view>
				</template>
				<template v-slot:list2>
					<view>
						<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item"
						@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)">
							<view class="waterfall-item__image" :style="[imageStyle(item)]">
								<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
							</view>
							<view class="waterfall-item__ft">
								<view class="waterfall-item__ft__title">
									<text class="title">{{item.name}}</text>
								</view>
								<view class="waterfall-item__ft__desc uv-line-2">
									<text class="price">现价{{item.price}}￥</text>
									<text class="oldPrice">原价{{item.oldPrice}}￥</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</uv-waterfall>
		</view> -->
		
		
	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	import mixinsProduct from '@/mixins/product.js'
	import tabber from '@/components/base/tabbar.vue'
	import productList from '@/components/user/productList.vue'
	import { mapState } from 'vuex'
	export default {
		mixins: [mixinsList, mixinsProduct],
		components : {
			tabber,
			productList,
		},
		computed: {
			...mapState(['city', 'userInfo', 'headInfo', 'cityList']),
			
			// 城市分类列表（包含"全部"选项）
			productCategory() {
				const allTab = { id: null, title: '全部', value: null }
				const cityTabs = this.cityList.map(city => ({
					id: city.id || city.cityId,
					title: city.name || city.cityName || city.title,
					value: city.id || city.cityId
				}))
				return [allTab, ...cityTabs]
			}
			// imageStyle(item) {
			// 	return item => {
			// 		const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
			// 		const w = v / 2;
			// 		const rate = w / item.w;
			// 		const h = rate * item.h;
			// 		return {
			// 			width: w + 'px',
			// 			height: h + 'px'
			// 		}
			// 	}
			// }
		},
		data() {
			return {
				mixinsListApi: 'getShopPingPage',
				currentCityTabIndex: 0, // uv-tabs当前选中的城市索引
				// list1: [], // 瀑布流第一列数据
				// list2: [], // 瀑布流第二列数据
				// leftGap: 10,
				// rightGap: 10,
				// columnGap: 10,
				bannerList : [],
				// category : [
				// 	{
				// 		name : '户外',
				// 		value : 0,
				// 	},
				// 	{
				// 		name : '美食',
				// 		value : 1,
				// 	},
				// 	{
				// 		name : '兑换',
				// 		value : 2,
				// 	},
				// 	{
				// 		name : '特产',
				// 		value : 3,
				// 	},
				// 	{
				// 		name : '校园',
				// 		value : 4,
				// 	},
				// ],
			}
		},
		onShow() {
			this.getBannerList()
		},
		onLoad() {
			// 获取城市列表
			this.$store.commit('getCityList')
			
			// 初始化查询参数
			this.queryParams.cityId = null
		},
		methods: {
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			// changeList(e) {
			// 	this[e.name].push(e.value);
			// },
			// 获取banner
			getBannerList(){
				this.$api('getBannerList', res => {
					if(res.code == 200){
						this.bannerList = res.result
					}
				})
			},
			tabsClick(item) {
				this.currentCityTabIndex = item.index
				
				if (item.value) {
					// 使用城市ID作为筛选条件
					this.queryParams.cityId = item.value
					delete this.queryParams.className // 清除原有的分类参数
				} else {
					// 选择"全部"时清除城市筛选
					delete this.queryParams.cityId
					delete this.queryParams.className
				}
				this.refreshList()
			},
			
		}
	}
</script>

<style scoped lang="scss">
	
	.page{
		.swipe{
			overflow: hidden;
			border-radius: 20rpx;
			margin: 20rpx;
		}
		.notice{
			padding: 20rpx;
		}
		.productList{
			padding: 0 20rpx;
		}
		
		// 城市分类容器样式
		.city-tabs-container {
			background-color: #fff;
			border-bottom: 1rpx solid #eee;
			padding: 0 20rpx;
		}
	}
	
	
// $show-lines: 1;
	// @import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	// .waterfall-item {
	// 	overflow: hidden;
	// 	margin-top: 10px;
	// 	border-radius: 6px;
	// }

	// .waterfall-item__ft {
	// 	padding: 20rpx;
	// 	background: #fff;

	// 	&__title {
	// 		margin-bottom: 10rpx;
	// 		line-height: 48rpx;
	// 		font-weight: 700;

	// 		.value {
	// 			font-size: 32rpx;
	// 			color: #303133;
	// 		}
	// 	}

	// 	&__desc .value {
	// 		font-size: 28rpx;
	// 		color: #606266;
	// 	}

	// 	&__btn {
	// 		padding: 10px 0;
	// 	}
	// }
	
	// .waterfall-item__ft__title{
	// 	font-size: 28rpx;
	// }
	
	// .price{
	// 	color: #f40;
	// }
	// .oldPrice{
	// 	color: #777;
	// 	font-size: 22rpx;
	// 	text-decoration: underline;
	// }
</style>