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="LabelOptions">
			<uv-tabs :list="category" 
			:activeStyle="{color : '#000', fontWeight : 900}"
			lineColor="#5baaff"
			lineHeight="8rpx"
			lineWidth="50rpx"
			:scrollable="false"
			@click="tabsClick"></uv-tabs>
		</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> -->
		
		
		<tabber select="1" />
	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	import tabber from '@/components/base/tabbar.vue'
	import productList from '@/components/user/productList.vue'
	import { mapState } from 'vuex'
	export default {
		mixins: [mixinsList],
		components : {
			tabber,
			productList,
		},
		computed: {
			...mapState(['city', 'userInfo', 'headInfo']),
			// 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',
				// list1: [], // 瀑布流第一列数据
				// list2: [], // 瀑布流第二列数据
				// leftGap: 10,
				// rightGap: 10,
				// columnGap: 10,
				bannerList : [],
				category : [
					{
						name : '美食商城',
						value : 0,
					},
					{
						name : '家乡特产',
						value : 1,
					},
					{
						name : '积分商城',
						value : 2,
					},
				],
			}
		},
		onShow() {
			this.getBannerList()
		},
		onLoad() {
			this.queryParams.className = 0
		},
		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.queryParams.className = item.value
				this.getData()
			},
			
		}
	}
</script>

<style scoped lang="scss">
	
	.page{
		.swipe{
			overflow: hidden;
			border-radius: 20rpx;
			margin: 20rpx;
		}
		.notice{
			padding: 20rpx;
		}
		.productList{
			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>