besiweb/pages/shop/index.vue

<template>
	<view class="uni-main">
		<view class="sticky-nav">
			<view class="nav-bar">
				<view class="left-nav">
					<ul>
						<li v-for="(item,index) in cateList" :class="{active:!(index-cateIndex)}" @click="switchCate(index)">
							{{item.name}}
						</li>
					</ul>
				</view>
				<view class="right-nav">
					<image src="../../static/index/search_white_blod_big_icon.png" class="index_search"></image>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-item" v-for="(item,index) in dataList" :key="index">
				<view class="uni-list-item_box">
					
					<view class="uni-list-media">
						<image :src="item.thumb" class="thumb"></image>
					</view>
					<view class="uni-list_text">
						<view class="text_title">{{item.title}}</view>
						<text class="text_price">¥{{item.price}}</text>
						<text class="text_sale">{{item.sale}}人购买</text>
						<text class="text_buy"><navigator :url="'./detail?id='+item.id">购买</navigator></text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateIndex: 0,
				cateList: [{
						id: 0,
						name: '推荐'
					},
					{
						id: 1,
						name: '香烛'
					},
					{
						id: 2,
						name: '道具'
					},
					{
						id: 3,
						name: '纸币'
					},
					{
						id: 4,
						name: '其他'
					},
				],
				dataList: [],
				tempList: [
					[{
							thumb: '../../static/shop/1.jpg',
							title: '三宝香',
							sale: 0,
							description: "",
							price: 10.50,
						},
						{
							thumb: '../../static/shop/3-1.jpg',
							title: '观音香',
							sale: 2,
							description: "",
							price: 15.50,
						},
						{
							thumb: '../../static/shop/2-3.jpg',
							title: '招财香',
							sale: 4,
							description: "",
							price: 12.00,
						},
						{
							thumb: '../../static/shop/4-1.jpg',
							title: '红烛',
							sale: 1,
							description: "",
							price: 7.50,
						},
						{
							thumb: '../../static/shop/3-5.jpg',
							title: '佛香缘红烛',
							sale: 3,
							description: "",
							price: 18.00,
						},
						{
							thumb: '../../static/shop/6.jpg',
							title: '水晶酥油蜡烛',
							sale: 1,
							description: "",
							price: 30.00,
						},
					],
					[{
							thumb: '../../static/shop/1.jpg',
							title: '三宝香',
							sale: 0,
							description: "",
							price: 10.50,
						},
						{
							thumb: '../../static/shop/2.jpg',
							title: '观音香',
							sale: 2,
							description: "",
							price: 15.50,
						},
						{
							thumb: '../../static/shop/3.jpg',
							title: '招财香',
							sale: 4,
							description: "",
							price: 12.00,
						},
						{
							thumb: '../../static/shop/4.jpg',
							title: '红烛',
							sale: 1,
							description: "",
							price: 7.50,
						},
						{
							thumb: '../../static/shop/5.jpg',
							title: '佛香缘红烛',
							sale: 3,
							description: "",
							price: 18.00,
						},
						{
							thumb: '../../static/shop/6.jpg',
							title: '水晶酥油蜡烛',
							sale: 1,
							description: "",
							price: 30.00,
						},
					],
					[{
							thumb: '../../static/shop/2-1.jpg',
							title: '黄纸钱',
							sale: 10,
							description: "",
							price: 6.00,
						},
						{
							thumb: '../../static/shop/2-2.jpg',
							title: '烛台',
							sale: 1,
							description: "",
							price: 14,
						},
						{
							thumb: '../../static/shop/2-3.jpg',
							title: '元宝盆',
							sale: 2,
							description: "",
							price: 35.00,
						},
					],
					[{
							thumb: '../../static/shop/3-1.jpg',
							title: '元宝烛',
							sale: 0,
							description: "",
							price: 20.00,
						},
						{
							thumb: '../../static/shop/3-2.jpg',
							title: '百元纸币',
							sale: 2,
							description: "",
							price: 10.00,
						},
						{
							thumb: '../../static/shop/3-3.jpg',
							title: '大额纸币',
							sale: 2,
							description: "",
							price: 20.00,
						},
						{
							thumb: '../../static/shop/3-4.jpg',
							title: '黄香纸',
							sale: 2,
							description: "",
							price: 8.00,
						},
						{
							thumb: '../../static/shop/3-5.jpg',
							title: '元宝黄纸',
							sale: 20,
							description: "",
							price: 12.00,
						},
						{
							thumb: '../../static/shop/3-6.jpg',
							title: '金元宝烧纸',
							sale: 5,
							description: "",
							price: 10.00,
						},
					],
					[{
							thumb: '../../static/shop/4-1.jpg',
							title: '黄金杯筷',
							sale: 0,
							description: "",
							price: 50.50,
						},
						{
							thumb: '../../static/shop/4-2.jpg',
							title: '招福香台',
							sale: 3,
							description: "",
							price: 18.00,
						},
						{
							thumb: '../../static/shop/4-3.jpg',
							title: '红香木灵牌',
							sale: 1,
							description: "",
							price: 78.00,
						},
						{
							thumb: '../../static/shop/4-4.jpg',
							title: '金元宝',
							sale: 2,
							description: "",
							price: 30.00,
						},
						{
							thumb: '../../static/shop/4-5.jpg',
							title: '黄金大福杯',
							sale: 7,
							description: "",
							price: 15.00,
						},
						{
							thumb: '../../static/shop/4-6.jpg',
							title: '观音杯',
							sale: 3,
							description: "",
							price: 16.00,
						},
					],

				],
			}
		},
		onLoad() {
			this.dataList = this.tempList[0]
		},
		methods: {
			switchCate(index) {
				this.cateIndex = index;
				this.dataList = this.tempList[index]
			},
			
		}
	}
</script>
<style>
	page {
		background-color: rgb(247, 246, 242);
	}
</style>
<style lang="less" scoped>
	.uni-main {
		width: 100%;
		height: 100%;
		background-color: #f6f7f5;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	.sticky-nav {
		position: sticky;
		width: 100%;
		top: 0;
		z-index: 1;
	}

	.nav-bar {
		padding-top: 50rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		height: 125rpx;
		
		.back {
			width: 85rpx;
			height: 85rpx;
			// padding-right: 35rpx;
		}
	}

	.left-nav {
		ul {
			padding: 0;
			margin-left: 20rpx;
		}

		ul li {
			list-style: none;
			display: inline-block;
			height: 60rpx;
			line-height: 60rpx;
			width: 100rpx;
			text-align: center;
			color: rgb(255, 214, 205);
			font-size: 36rpx;
			font-weight: bold;
			padding-bottom: 4rpx;
		}

		.active {
			color: #fff;
			font-size: 44rpx;
			border-bottom: 4rpx solid #fff;
		}
	}

	.nav-box {
		width: 100%;
		padding-top: 90rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		height: 135rpx;
		padding-bottom: 50rpx;
		
		
			

		.header-text {
			font-size: 45rpx;
			color: #333;
			font-weight: bold;
			width: 100%;
			text-align: center;
			margin-left: 20rpx;
		}

		.header_operate {
			width: 23px;
			height: 21px;
			float: right;
			margin-right: 20rpx;
		}
	}

	.right-nav {
		margin-right: 15rpx;

		.index_search {
			width: 45rpx;
			height: 45rpx;
			margin-right: 15rpx;
		}

		.index_info {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.uni-list-item {
		padding: 20rpx 30rpx;
		margin-bottom: 8rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		position: relative;
	}

    .uni-list-media {
		width: 300rpx;
		height: 320rpx;
		display: inline-block;
	}
	.uni-list-item_box .thumb {
		width: 100%;
		height: 100%;
		border-radius: 4rpx;
	}

	.uni-list-item_box .text_title {
		font-size: 40rpx;
		// font-weight: bold;
		padding: 8rpx 0rpx;
	}

	.uni-list_text {
		// padding-top: 10rpx;
		width: calc(100% - 320rpx);
		margin-left: 20rpx;
		display: inline-block;
		vertical-align: top;
	}
	.uni-list_text .text_price {
		font-size: 40rpx;
		color: #ff7a55;
		display: block;
	}
	.uni-list_text .text_sale {
		margin-top: 20rpx;
		font-size: 32rpx;
		color: #999;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.uni-list_text .text_buy  {
		font-size: 36rpx;
		float: right;
		background-color: #ff7a55;
		color: #fff;
		text-align: center;
		padding: 4rpx 12rpx;
		display: inline-block;
		border-radius: 6rpx;
	}
</style>