xiongmao/pages/index/index.vue

<!-- 首页 -->
<template>
	<view class="wrap">

		<view class="header">
			<view class="header-top">
				<view class="header-left">
					<image src="../../static/logo.jpeg" mode="widthFix"></image>
					<view class="header-left-column">
						<text>药食同源</text>
						<text>康养食品</text>
					</view>
				</view>
				<view class="headr-title">
					<image src="../../static/index-title.png" mode="widthFix"></image>
				</view>
				<view class="header-right">
					<button type="default" @tap="videoColumn">
						<image src="../../static/head-icon1.png" mode="widthFix"></image>
					</button>
					<button type="default" @tap="show">
						<image src="../../static/head-icon2.png" mode="widthFix"></image>
					</button>
				</view>
			</view>
			<view class="header-bottom">
				<view class="location-row" @tap="city">
					<image src="../../static/location-1.png" class="location-icon" mode="widthFix"></image>
					嘉兴
				</view>
				<view class="search-bar">
					<image src="../../static/search-icon.png" mode="" class="search-icon"></image>
					<input type="text" value="" placeholder="西藏冬虫夏草  大红袍" placeholder-class="placeholder"
						class="search-input" @tap="search" />
					<button type="default" class="search-btn">搜索</button>
				</view>
			</view>
		</view>

		<view class="padding-box">
			<view class="swiper-box">
				<swiper class="swiper" indicator-dots="true" indicator-color="#F2F2F2" indicator-active-color="#F2501A"
					:circular="true" autoplay="true" interval="3000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<view class="swiper-item">
							<image :src="item.cover" class="banner-img" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="notice-box">
				<uni-notice-bar class="my-notice-bar" :scrollable="true" :speed="50" :single="true" :text="message">
				</uni-notice-bar>
				<image src="../../static/message.png" class="notice-icon" mode=""></image>
			</view>

			<view class="menu-list">
				<view class="menu-item" v-for="(item, index) in menuList" @tap="raiseFiveInternalOrgans(item.id)">
					<image :src="item.logo" mode="heightFix"></image>
					{{item.name}}
				</view>
				<!-- <view class="menu-item" @tap="raiseFiveInternalOrgans">
					<image src="../../static/index-menu1.png" mode="heightFix"></image>
					养五脏
				</view>
				<view class="menu-item" @tap="regulateSixBowels">
					<image src="../../static/index-menu2.png" mode="heightFix"></image>
					调六腑
				</view>
				<view class="menu-item">
					<image src="../../static/index-menu3.png" mode="heightFix"></image>
					健五官
				</view>
				<view class="menu-item">
					<image src="../../static/index-menu4.png" mode="heightFix"></image>
					通经络
				</view>
				<view class="menu-item">
					<image src="../../static/index-menu5.png" mode="heightFix"></image>
					强筋骨
				</view>
				<view class="menu-item">
					<image src="../../static/index-menu6.png" mode="heightFix"></image>
					提免疫
				</view>
				<view class="menu-item">
					<image src="../../static/index-menu7.png" mode="heightFix"></image>
					均营养
				</view>
				<view class="menu-item">
					<image src="../../static/index-menu8.png" mode="heightFix"></image>
					促健康
				</view>
				<view class="menu-item">
					<image src="../../static/index-menu9.png" mode="heightFix"></image>
					舒压力
				</view>
				<view class="menu-item">
					<image src="../../static/index-menu10.png" mode="heightFix"></image>
					增颜值
				</view> -->
			</view>

			<scroll-view scroll-x="true" class="recommend-box">
				<view class="recommend-item" @tap="goodAualityWork">
					<view class="recommend-item-column">
						<text>品质良作</text>
						<text>区域环境</text>
					</view>
					<image src="../../static/img-1.png" class="recommend-item-img" mode="widthFix"></image>
				</view>
				<view class="recommend-item" @tap="goodAualityWork">
					<view class="recommend-item-column">
						<text>时令良作</text>
						<text>优质品种</text>
					</view>
					<image src="../../static/img-2.png" class="recommend-item-img" mode="widthFix"></image>
				</view>
				<view class="recommend-item" @tap="goodAualityWork">
					<view class="recommend-item-column">
						<text>膳食良作</text>
						<text>千年传承</text>
					</view>
					<image src="../../static/img-3.png" class="recommend-item-img" mode="widthFix"></image>
				</view>
			</scroll-view>

			<view class="swiper-box">
				<swiper class="swiper" indicator-dots="true" indicator-color="#F2F2F2" indicator-active-color="#F2501A"
					:circular="true" autoplay="true" interval="2500" duration="500">
					<swiper-item v-for="(item,index) in swiperList2" :key="index">
						<view class="swiper-item">
							<image :src="item.cover" class="banner-img" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="tag-box">
				<view class="tag-list">
					<view class="tag-item">
						# 经常熬夜该吃的食物
					</view>
					<view class="tag-item">
						# 经常熬夜该吃的食物
					</view>
					<view class="tag-item">
						# 经常熬夜该吃的食物
					</view>
					<view class="tag-item">
						# 经常熬夜该吃的食物
					</view>
				</view>
				<view class="refresh-row">
					<image src="../../static/refresh-icon.png" mode=""></image>
					换一批
				</view>
			</view>

			<view class="classification-module-box">
				<view class="classification-module" @tap="subHealthPool">
					<view class="classification-module-top">
						<view class="classification-module-name">亚健康汇</view>
					</view>
					<view class="classification-module-msg">今日狂补·口碑爆款</view>
					<view class="classification-list">
						<view class="classification-item">
							<image src="../../static/index-menu1.png" class="classification-item-img" mode="heightFix">
							</image>
							新鲜奶莓
						</view>
						<view class="classification-item">
							<image src="../../static/index-menu8.png" class="classification-item-img" mode="heightFix">
							</image>
							烟台苹果
						</view>
					</view>
				</view>
				<view class="classification-module" @tap="giftChoice">
					<view class="classification-module-top">
						<view class="classification-module-name">礼品心选</view>
						<view class="classification-module-tag">
							<image src="../../static/tag-icon1.png" mode="widthFix"></image>
							用心挑选
						</view>
					</view>
					<view class="classification-module-msg">送家人·送爸妈</view>
					<view class="classification-list">
						<view class="classification-item">
							<image src="../../static/index-menu10.png" class="classification-item-img" mode="heightFix">
							</image>
							新鲜奶莓
						</view>
						<view class="classification-item">
							<image src="../../static/index-menu2.png" class="classification-item-img" mode="heightFix">
							</image>
							烟台苹果
						</view>
					</view>
				</view>
				<view class="classification-module" @tap="promotionalPicks">
					<view class="classification-module-top">
						<view class="classification-module-name">促销精选</view>
						<view class="classification-module-tag">
							<image src="../../static/tag-icon2.png" mode="widthFix"></image>
							限时折扣
						</view>
					</view>
					<view class="classification-module-msg">精品促销·优惠不断</view>
					<view class="classification-list">
						<view class="classification-item">
							<image src="../../static/index-menu6.png" class="classification-item-img" mode="heightFix">
							</image>
							<view class="classification-item-bottom">
								<text class="classification-item-price">￥34.00</text>
								<button type="default" class="add-btn">
									<image src="../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
						<view class="classification-item">
							<image src="../../static/index-menu5.png" class="classification-item-img" mode="heightFix">
							</image>
							<view class="classification-item-bottom">
								<text class="classification-item-price">￥34.00</text>
								<button type="default" class="add-btn">
									<image src="../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
					</view>
				</view>
				<view class="classification-module" @tap="limitedSourcePreSale">
					<view class="classification-module-top">
						<view class="classification-module-name">限源预售</view>
					</view>
					<view class="classification-module-msg">精彩预售·抢不停</view>
					<view class="classification-list">
						<view class="classification-item">
							<image src="../../static/index-menu4.png" class="classification-item-img" mode="heightFix">
							</image>
							<view class="classification-item-bottom">
								<text class="classification-item-price">￥34.00</text>
								<button type="default" class="add-btn">
									<image src="../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
						<view class="classification-item">
							<image src="../../static/index-menu3.png" class="classification-item-img" mode="heightFix">
							</image>
							<view class="classification-item-bottom">
								<text class="classification-item-price">￥34.00</text>
								<button type="default" class="add-btn">
									<image src="../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="seasonal-nutrition-box" @tap="seasonalNutrition">
				<view class="seasonal-nutrition-top">
					<view class="seasonal-nutrition-top-left">
						<view class="seasonal-nutrition-top-name">
							时令营养
						</view>
						<view class="seasonal-nutrition-top-msg">
							滋补免疫推荐
						</view>
					</view>
					<button type="default" class="all-btn">全部</button>
				</view>
				<view class="swiper-box-product">
					<swiper class="swiper-product" indicator-dots="true" indicator-color="#F2F2F2"
						indicator-active-color="#F2501A" :circular="true" interval="3000" duration="500">
						<swiper-item>
							<view class="swiper-item-product">
								<view class="swiper-item-product-item">
									<image src="../../static/img-4.png" class="swiper-item-product-item-img"
										mode="aspectFill"></image>
									<view class="swiper-item-product-item-name">
										补气养阴
									</view>
									<view class="swiper-item-product-item-msg">
										杞里香枸杞子宁夏特级500g
									</view>
									<view class="swiper-item-product-item-bottom">
										<view class="swiper-item-product-item-price">
											￥394.00
										</view>
										<view class="swiper-item-product-item-delprice">
											￥34.00
										</view>
									</view>
								</view>
								<view class="swiper-item-product-item">
									<image src="../../static/img-4.png" class="swiper-item-product-item-img"
										mode="aspectFill"></image>
									<view class="swiper-item-product-item-name">
										补气养阴
									</view>
									<view class="swiper-item-product-item-msg">
										杞里香枸杞子宁夏特级500g
									</view>
									<view class="swiper-item-product-item-bottom">
										<view class="swiper-item-product-item-price">
											￥394.00
										</view>
										<view class="swiper-item-product-item-delprice">
											￥34.00
										</view>
									</view>
								</view>
								<view class="swiper-item-product-item">
									<image src="../../static/img-4.png" class="swiper-item-product-item-img"
										mode="aspectFill"></image>
									<view class="swiper-item-product-item-name">
										补气养阴
									</view>
									<view class="swiper-item-product-item-msg">
										杞里香枸杞子宁夏特级500g
									</view>
									<view class="swiper-item-product-item-bottom">
										<view class="swiper-item-product-item-price">
											￥394.00
										</view>
										<view class="swiper-item-product-item-delprice">
											￥34.00
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item-product">
								<view class="swiper-item-product-item">
									<image src="../../static/img-4.png" class="swiper-item-product-item-img"
										mode="aspectFill"></image>
									<view class="swiper-item-product-item-name">
										补气养阴
									</view>
									<view class="swiper-item-product-item-msg">
										杞里香枸杞子宁夏特级500g
									</view>
									<view class="swiper-item-product-item-bottom">
										<view class="swiper-item-product-item-price">
											￥394.00
										</view>
										<view class="swiper-item-product-item-delprice">
											￥34.00
										</view>
									</view>
								</view>
								<view class="swiper-item-product-item">
									<image src="../../static/img-4.png" class="swiper-item-product-item-img"
										mode="aspectFill"></image>
									<view class="swiper-item-product-item-name">
										补气养阴
									</view>
									<view class="swiper-item-product-item-msg">
										杞里香枸杞子宁夏特级500g
									</view>
									<view class="swiper-item-product-item-bottom">
										<view class="swiper-item-product-item-price">
											￥394.00
										</view>
										<view class="swiper-item-product-item-delprice">
											￥34.00
										</view>
									</view>
								</view>
								<view class="swiper-item-product-item">
									<image src="../../static/img-4.png" class="swiper-item-product-item-img"
										mode="aspectFill"></image>
									<view class="swiper-item-product-item-name">
										补气养阴
									</view>
									<view class="swiper-item-product-item-msg">
										杞里香枸杞子宁夏特级500g
									</view>
									<view class="swiper-item-product-item-bottom">
										<view class="swiper-item-product-item-price">
											￥394.00
										</view>
										<view class="swiper-item-product-item-delprice">
											￥34.00
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="seasonal-health-box" @tap="seasonalHealthyFood">
				<view class="seasonal-health-top">
					<view class="seasonal-health-top-left">
						<view class="seasonal-health-top-name">
							时令健康
						</view>
						<view class="seasonal-health-top-msg">
							养生食品推荐
						</view>
					</view>
					<image src="../../static/bg-4.png" class="seasonal-health-top-bg" mode="heightFix"></image>
					<button type="default" class="seasonal-health-all-btn" >全部</button>
				</view>
				<view class="seasonal-health-list">
					<view class="seasonal-health-item">
						<image src="../../static/img-4.png" class="seasonal-health-item-img" mode="aspectFill"></image>
						<view class="seasonal-health-item-name">
							健脾除湿
						</view>
					</view>
					<view class="seasonal-health-item">
						<image src="../../static/img-4.png" class="seasonal-health-item-img" mode="aspectFill"></image>
						<view class="seasonal-health-item-name">
							排寒利尿
						</view>
					</view>
					<view class="seasonal-health-item">
						<image src="../../static/img-4.png" class="seasonal-health-item-img" mode="aspectFill"></image>
						<view class="seasonal-health-item-name">
							平肝和胃
						</view>
					</view>
				</view>
			</view>

			<view class="logo-box">
				<image src="../../static/banner-4.png" mode="widthFix"></image>
			</view>

			<view class="product-bottom">
				<scroll-view scroll-x="true" class="tab-list">
					<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
						:key="index" @click="checked(index)">
						<view class="child-column">
							<view class="child-column-name">{{item.title}}</view>
							<view class="child-column-msg">
								<text>{{item.msg}}</text>
								<image src="../../static/border.png" class="border-img" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="product-list">
					<view class="product-item">
						<view class="product-item-column">
							<image src="../../static/img-4.png" class="product-item-column-img" mode="aspectFill"></image>
							<view class="product-item-column-bottom">
								<view class="product-item-column-name">产地直销</view>
								<view class="product-item-column-tag">
									<text>当日热卖榜</text>
									<text>好货闭眼抢</text>
								</view>
								<button type="default" class="product-item-column-btn">立即抢购<image src="../../static/back-icon.png" mode="widthFix"></image></button>
							</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">
						<view class="product-item-column">
							<image src="../../static/img-4.png" class="product-item-column-img" mode="aspectFill"></image>
							<view class="product-item-column-bottom">
								<view class="product-item-column-name">产地直销</view>
								<view class="product-item-column-tag">
									<text>当日热卖榜</text>
									<text>好货闭眼抢</text>
								</view>
								<button type="default" class="product-item-column-btn">立即抢购<image src="../../static/back-icon.png" mode="widthFix"></image></button>
							</view>
						</view>
					</view>
					<view class="product-item">
						<view class="product-item-column">
							<image src="../../static/img-4.png" class="product-item-column-img" mode="aspectFill"></image>
							<view class="product-item-column-bottom">
								<view class="product-item-column-name">产地直销</view>
								<view class="product-item-column-tag">
									<text>当日热卖榜</text>
									<text>好货闭眼抢</text>
								</view>
								<button type="default" class="product-item-column-btn">立即抢购<image src="../../static/back-icon.png" mode="widthFix"></image></button>
							</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="product-list">
					<view class="product-item" v-for="(item,index) in list" @tap.stop="productDetails(item.id)">
						<view class="product-item-column2">
							<image :src="item.cover" class="product-item-column2-img" mode="aspectFill"></image>
							<view class="product-item-column2-bottom">
								<view class="product-item-column-name2">{{item.name}}</view>
								<view class="product-item-column2-row-between">
									<view class="product-item-column2-price">
										￥{{item.low_price}}
										<text>￥{{item.low_original}}</text>
									</view>
								<!-- 	<button type="default" class="product-item-column2-btn" @tap.stop="addTrolley()">
										<image src="../../static/add-icon.png" mode=""></image>
									</button> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<!-- 顶部-弹窗 -->
		<view v-show="isShow">
			<view class="mask" @tap="close"></view>
			<view class="window">
				<view class="window-item">
					<image src="../../static/icon-20.png" mode="widthFix"></image>
					扫一扫
				</view>
				<view class="window-item">
					<image src="../../static/icon-18.png" mode="widthFix"></image>
					分享
				</view>
				<view class="window-item">
					<image src="../../static/icon-19.png" mode="widthFix"></image>
					消息
				</view>
			</view>
		</view>
		<!-- 顶部-弹窗  -->
		
		<!-- 底部tabbar组件 -->
		<tab-bar :current="0"></tab-bar>
		
	</view>
</template>

<script>
	import {
		expediteGetBanner,
		expediteGetIndexMenu,
		expediteGetGoodsList,
		informationGetBanner,
		trolleyAddTrolley,
	} from '../../common/service.js';
	import UniNoticeBar from '../../components/uni-notice-bar/uni-notice-bar.vue';
	export default {
		components: {
			UniNoticeBar,
		},
		data() {
			return {
				//轮播
				swiperList: [],
				menuList: [],
				//轮播2
				swiperList2: [],

				//公告
				message: '最先上市：西藏冬虫夏草 云南白药 青海牦牛肉',

				//选项卡
				isActive: 3,
				navList: [{
					index: 0,
					title: '精选',
					msg: '为您推荐'
				}, {
					index: 1,
					title: "养生",
					msg: '推荐养生'
				}, {
					index: 2,
					title: "滋补",
					msg: '滋补清肝'
				}, {
					index: 3,
					title: "养颜",
					msg: '补气养颜'
				}],
				
				//顶部弹窗
				isShow:false,
				list: [],
				page: 1,
				page_num: 20,
			}
		},
		onLoad() {
			this.getBanner();
			this.getInformationBanner();
			this.getIndexMenu();
			// this.getGoodsList();
		},
		onReady() {
			let animation = uni.createAnimation({
				transformOrigin: "50% 50%",
				duration: 900,
				timingFunction: "linear",
				delay: 0
			})
			this.animation = animation;
		},
		methods: {
			addTrolley(id){
				trolleyAddTrolley();
			},
			getBanner(){
				expediteGetBanner({
					// data: { num: 5 },
					success: ({code, msg, data}) => {
						if (code == 1) {
							this.swiperList = data.list;
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					}
				});
			},
			getInformationBanner(){
				informationGetBanner({
					// data: { num: 5 },
					success: ({code, msg, data}) => {
						if (code == 1) {
							this.swiperList2 = data.list;
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					}
				});
			},
			getIndexMenu(){
				expediteGetIndexMenu({
					// data: { num: 5 },
					success: ({code, msg, data}) => {
						if (code == 1) {
							this.menuList = data;
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					}
				});
			},
			// 获取列表
			getGoodsList() {
				const {page, page_num} = this;
				expediteGetGoodsList({
					data: {
						page,
						page_num,
					},
					success: res => {
						if (res.code === 1) {
							const list = res.data.list;
							this.list = page > 1 ? [...this.list, ...list] : list;
							if (list.length === 0) {
								uni.showToast({
									icon: 'none',
									title: '没有更多数据了'
								});
							} else {
								this.page = this.page + 1;
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					},
					complete: () => {
						this.getDataLoading = false;
						uni.stopPullDownRefresh();
					}
				})
			},

			/**
			 * 下拉刷新
			 */
			onPullDownRefresh() {
				this.getGoodsList();
			},

			/**
			 * 触底加载
			 */
			onReachBottom() {
				this.getGoodsList();
			},
			checked(index) {
				this.isActive = index
			},
			//顶部-弹窗
			show() {
				this.isShow = true;
			},
			close() {
				this.isShow = false;
			},
			//跳转搜索页
			search(){
				uni.navigateTo({
					url:'search/search'
				})
			},
			//跳转养五脏
			raiseFiveInternalOrgans(){
				uni.navigateTo({
					url:'raise-five-internal-organs/raise-five-internal-organs'
				})
			},
			//跳转调六腑
			regulateSixBowels(){
				uni.navigateTo({
					url:'regulate-six-bowels/regulate-six-bowels'
				})
			},
			//跳转亚健康汇
			subHealthPool(){
				uni.navigateTo({
					url:'sub-health-pool/sub-health-pool'
				})
			},
			//跳转礼品心选
			giftChoice(){
				uni.navigateTo({
					url:'gift-choice/gift-choice'
				})
			},
			//跳转促销精选
			promotionalPicks(){
				uni.navigateTo({
					url:'promotional-picks/promotional-picks'
				})
			},
			//跳转限源预售
			limitedSourcePreSale(){
				uni.navigateTo({
					url:'limited-source-pre-sale/limited-source-pre-sale'
				})
			},
			//跳转时令健康养生食品
			seasonalHealthyFood(){
				uni.navigateTo({
					url:'seasonal-healthy-food/seasonal-healthy-food'
				})
			},
			//跳转时令营养
			seasonalNutrition(){
				uni.navigateTo({
					url:'seasonal-nutrition/seasonal-nutrition'
				})
			},
			//跳转品质良作
			goodAualityWork(){
				uni.navigateTo({
					url:'good-quality-work/good-quality-work'
				})
			},
			//跳转产品详情
			productDetails(id){
				uni.navigateTo({
					url:'product-details/product-details' + '?id=' + id,
				})
			},
			//跳转选择城市
			city(){
				uni.navigateTo({
					url:'city/city'
				})
			},
			//跳转视频专栏
			videoColumn(){
				uni.navigateTo({
					url:'video-column/video-column'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./index.css";
</style>