xiongmao/pages/index/raise-five-internal-organs/raise-five-internal-organs.vue

<!-- 养五脏 -->
<template>
	<view class="wrap">
		<view class="tab-list">
			<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList" :key="index"
				@click="checked(index)">
				{{item.title}}
			</view>
		</view>
		<view class="product-list">
			<view class="product-item" @tap="productDetails">
				<view class="product-item-column2">
					<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill"></image>
					<view class="product-item-column2-bottom">
						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
			</view>
			<view class="product-item" @tap="productDetails">
				<view class="product-item-column2">
					<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill"></image>
					<view class="product-item-column2-bottom">
						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
			</view>
			<view class="product-item" @tap="productDetails">
				<view class="product-item-column2">
					<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill"></image>
					<view class="product-item-column2-bottom">
						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-label">
				精选搭配
			</view>
			<view class="featured-list">
				<view class="featured-item" @tap="seasonalHealthyFoodsShoppingCart">
					<view class="featured-item-top">
						<view class="featured-name">玫瑰平胃茶</view>
						<button type="default" class="look-btn">查看</button>
					</view>
					<view class="featured-msg">
						(胃痛）理气解郁、和胃散郁
					</view>
					<image src="../../../static/img-4.png" class="featured-img" mode="aspectFill"></image>
					<view class="featured-tag">
						石斛15g
					</view>        
				</view>
				<view class="featured-item" @tap="seasonalHealthyFoodsShoppingCart">
					<view class="featured-item-top">
						<view class="featured-name">玫瑰平胃茶</view>
						<button type="default" class="look-btn">查看</button>
					</view>
					<view class="featured-msg">
						(胃痛）理气解郁、和胃散郁
					</view>
					<image src="../../../static/img-4.png" class="featured-img" mode="aspectFill"></image>
					<view class="featured-tag">
						石斛15g
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '养心',
				}, {
					index: 1,
					title: "养肝",
				}, {
					index: 2,
					title: "养脾",
				}, {
					index: 3,
					title: "养肺",
				}, {
					index: 4,
					title: "养肾",
				}],
			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},
			//跳转商品详情
			productDetails(){
				uni.navigateTo({
					url:'../product-details/product-details'
				})
			},
			//跳转时令健康养生食品 购物车
			seasonalHealthyFoodsShoppingCart(){
				uni.navigateTo({
					url:'../seasonal-healthy-foods-shoppingCart/seasonal-healthy-foods-shoppingCart'
				})
			},
		}
	}
</script>


<style scoped lang="scss">
	@import "./raise-five-internal-organs.css";
</style>