<template>
	<view>
		<view class="container" :class="[themeConfigData.layout]">
			<status-bar-height></status-bar-height>
			<view class="page-bg2" v-if="themeConfigData.layout == 'layout3'">
				<image class="img" :src="themeConfigData.layoutData.search.backgroundImage" mode="widthFix"></image>
				<view class="page-tab">
					<view class="item active">
						<text class="t">首页</text>
					</view>
					<navigator class="item" open-type="switchTab" hover-class="none" url="/pages/goods-category/goods-category">
						<text class="t">新品</text>
					</navigator>
				</view>
				<!-- 搜索栏2 -->
				<view class="search-wrap2">
					<navigator class="search-content" hover-class="none" url="/pages/goods-search/goods-search">
						<uni-icons type="scan" size="24" color="#E75A63"></uni-icons>
						<view class="ipt">请输入商品名称</view>
						<uni-icons type="camera" size="30" color="#999"></uni-icons>
						<view class="btn">
							<view class="line"></view>
							<text class="t">搜索</text>
						</view>
					</navigator>
				</view>
			</view>
			<view class="page-bg" v-else>
				<image class="img" :src="themeConfigData.layoutData ? themeConfigData.layoutData.search.backgroundImage : ''" mode="widthFix"></image>
			</view>
			<view class="layout3-category" v-if="themeConfigData.layout == 'layout3'">
				<scroll-view class="category-list" :class="[themeConfigData.layout]" scroll-x :scrollLeft="scrollLeft">
					<view class="item tab-item" :class="{ active: currentTab == 0 }" @click="handleTabClick(0)">
						<view class="t-wrap">
							<view class="dot" :style="{ background: themeConfigData.themeColor }"></view>
							<view class="t">推荐</view>
						</view>
					</view>
					<view class="item tab-item" :class="{ active: currentTab == index + 1 }" v-for="(item, index) in category_list" :key="item.id" @click="handleTabClick(index + 1)">
						<view class="t-wrap">
							<view class="dot" :style="{ background: themeConfigData.themeColor }"></view>
							<view class="t">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
				<navigator class="cate" open-type="switchTab" hover-class="none" url="/pages/goods-category/goods-category">
					<uni-icons type="bars" color="#555" size="18"></uni-icons>
					<text class="t">分类</text>
				</navigator>
			</view>
			<template v-if="themeConfigData.layout != 'layout3'">
				<view class="logo">
					<image class="img" :src="application_logo" mode="aspectFit"></image>
				</view>
				<!-- 搜索栏1 -->
				<view class="search-wrap">
					<navigator class="search-content" hover-class="none" url="/pages/goods-search/goods-search">
						<view class="ipt">请输入商品名称</view>
						<view class="btn">
							<uni-icons type="search" size="22" color="#fff"></uni-icons>
						</view>
					</navigator>
				</view>
			</template>
			<!-- 轮播图 -->
			<view v-if="banner_list.length && themeConfigData.layoutData.carousel.visible">
				<component-banner :propData="banner_list" @changeBanner="change_banner"></component-banner>
			</view>
			<!-- <view v-if="banner_list.length > 0 && themeConfigData.layoutData && themeConfigData.layoutData.carousel.visible">
				<component-banner :propData="banner_list" @changeBanner="change_banner"></component-banner>
			</view> -->
			<!-- 金刚区 -->
			<view class="menus-wrap" v-if="themeConfigData.layout != 'layout3'">
				<view class="item" v-for="item in navigation.slice(0, 10)" :key="item.id" :data-value="item.event_value" :data-type="item.event_type" @tap="navigation_event">
					<view class="icon">
						<image class="img" :src="item.images_url" mode="aspectFit"></image>
					</view>
					<text class="t">{{ item.name }}</text>
				</view>
			</view>
			<!-- 推荐区1 -->
			<view class="recommed-wrap" v-if="themeConfigData.layout == 'layout2' && themeConfigData.layoutData.jingang.visible">
				<view class="left-icon">
					<image class="img" :src="themeConfigData.layoutData && themeConfigData.layoutData.jingang.backgroundImage" mode="aspectFit"></image>
				</view>
				<view class="goods-wrap">
					<scroll-view class="scroll-view" scroll-x>
						<view class="item" v-for="(item, index) in recommd_goods_list" :key="item.id" :data-index="index" :data-value="item.goods_url" @tap="goods_event">
							<view class="cover">
								<image class="img" :src="item.images" mode="aspectFill"></image>
							</view>
							<view class="name">
								{{ item.title }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 推荐区2 -->
			<view class="recommed2-wrap" v-if="themeConfigData.layoutData.newGoods.visible" :style="{ background: `linear-gradient(${themeConfigData.layoutData.newGoods.bgColorDeg}deg, ${themeConfigData.layoutData.newGoods.bgColor} 0%, ${themeConfigData.layoutData.newGoods.bgColor1} 100%)` }">
				<view class="top">
					<text class="title">#新品上架#</text>
					<navigator class="more" open-type="switchTab" url="/pages/goods-category/goods-category" :style="{ 'background-color': themeConfigData.themeColor }">
						<text class="t">更多好物</text>
						<uni-icons type="right" color="#333" size="12"></uni-icons>
					</navigator>
				</view>
				<view class="goods-wrap">
					<view class="item" v-for="(item, index) in news_goods_list" :key="item.id" :data-index="index" :data-value="item.goods_url" @tap="goods_event">
						<view class="icon">
							<image class="img" :src="item.images" mode="aspectFill"></image>
						</view>
						<view class="name">{{ item.title }}</view>
						<view class="price-wrap">
							<text class="p">￥{{ item.min_price }}</text>
							<text class="o">￥{{ item.original_price }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐区3 -->
			<view class="recommed3-wrap" v-if="themeConfigData.layout == 'layout1' && themeConfigData.layoutData.jingang.visible">
				<view class="left" v-if="recommd_goods_list.length">
					<image class="bg" :src="themeConfigData.layoutData.jingang.block1.backgroundImage" mode="aspectFill"></image>
					<view class="top1">
						<image class="img" :src="recommd_goods_list[0].images" mode="aspectFill" :data-value="recommd_goods_list[0].goods_url" @tap="goods_event"></image>
						<view class="tag">TOP 1</view>
					</view>
					<view class="goods-wrap">
						<view class="item" v-for="item in recommd_goods_list.slice(1, 4)" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
							<image class="img" :src="item.images" mode="aspectFill"></image>
							<text class="t">￥{{ item.min_price }}</text>
						</view>
					</view>
				</view>
				<view class="right" v-if="news_goods_list.length">
					<view class="item" :data-value="news_goods_list[0].goods_url" @tap="goods_event">
						<image class="bg" :src="themeConfigData.layoutData.jingang.block2.backgroundImage" mode=""></image>
						<image class="img" :src="news_goods_list[0].images" mode="aspectFill"></image>
					</view>
					<view class="item" :data-value="news_goods_list[1].goods_url" @tap="goods_event">
						<image class="bg" :src="themeConfigData.layoutData.jingang.block3.backgroundImage" mode=""></image>
						<image class="img" :src="news_goods_list[1].images" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 推荐区4 -->
			<view class="recommed4-wrap" v-if="themeConfigData.layout == 'layout3'">
				<view class="col">
					<view class="col-item">
						<view class="title">
							<text class="t">{{ themeConfigData.layoutData.recommandGoods.block1.title }}</text>
						</view>
						<view class="items">
							<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block1.data" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
								<image class="img" :src="item.images"></image>
								<view class="t">
									<view class="price">￥{{ item.min_price }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex">
						<view class="col-item">
							<view class="title">
								<text class="t">{{ themeConfigData.layoutData.recommandGoods.block2.title }}</text>
							</view>
							<view class="items">
								<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block2.data" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
									<image class="img" :src="item.images"></image>
									<view class="name">
										{{ item.title }}
									</view>
									<view class="t">
										<view class="price">￥{{ item.min_price }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="col-item">
							<view class="title">
								<text class="t">{{ themeConfigData.layoutData.recommandGoods.block3.title }}</text>
							</view>
							<view class="items">
								<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block3.data" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
									<image class="img" :src="item.images"></image>
									<view class="name">
										{{ item.title }}
									</view>
									<view class="t">
										<view class="price">￥{{ item.min_price }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="col">
					<view class="col-item">
						<view class="title">
							<view class="left">
								<text class="t">{{ themeConfigData.layoutData.recommandGoods.block4.title }}</text>
								<view class="tag">
									<view class="tag-bg"></view>
									<text class="tag-t">好物推荐</text>
								</view>
							</view>
							<view class="title-goods">
								<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block4.data.slice(0, 2)" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
									<image class="img" :src="item.images" mode="aspectFill"></image>
									<text class="name">{{ item.title }}</text>
								</view>
							</view>
						</view>
						<view class="items">
							<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block4.data.slice(2, 5)" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
								<image class="img" style="height: 100upx; border-radius: 8upx" :src="item.images" mode="aspectFill"></image>
								<text class="name" style="width: 100upx">{{ item.title }}</text>
							</view>
						</view>
					</view>
					<view class="col-item">
						<view class="title">
							<text class="t">{{ themeConfigData.layoutData.recommandGoods.block5.title }}</text>
						</view>
						<view class="items">
							<view class="item" v-for="(item, index) in themeConfigData.layoutData.recommandGoods.block5.data" :key="item.id" :data-index="index" :data-value="item.goods_url" @tap="goods_event">
								<image class="img" :src="item.images" mode="aspectFill"></image>
								<view class="name">
									{{ item.title }}
								</view>
								<view class="t">
									<view class="price"> ￥{{ item.min_price }} </view>
									<view class="old"> ￥{{ item.original_price }} </view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goods-list">
				<scroll-view class="category-list" scroll-x :scrollLeft="scrollLeft" v-if="themeConfigData.layout != 'layout3'">
					<view class="item tab-item" :class="{ active: currentTab == 0 }" @click="handleTabClick(0)">
						<view class="t-wrap">
							<view class="line" :style="{ background: themeConfigData.themeColor }"></view>
							<view class="t">为你推荐</view>
						</view>
					</view>
					<view class="item tab-item" :class="{ active: currentTab == index + 1 }" v-for="(item, index) in category_list" :key="item.id" @click="handleTabClick(index + 1)">
						<view class="t-wrap">
							<view class="line" :style="{ background: themeConfigData.themeColor }"></view>
							<view class="t">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="list">
					<view class="item" v-for="(item, index) in goods_list" :key="item.id" :data-index="index" :data-value="item.goods_url" @tap="goods_event">
						<view class="icon">
							<image class="img" :src="item.images" mode="widthFix"></image>
						</view>
						<view class="info">
							<view class="name">{{ item.title }}</view>
							<view class="tag-list">
								<view class="tag">新品</view>
							</view>
							<view class="price-wrap">
								<text class="p">￥{{ item.min_price }}</text>
								<text class="o">￥{{ item.original_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 提示信息 -->
			<!-- <block v-if="load_status == 0">
				<component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg" propPage="home" :propIsHeader="true"></component-no-data>
			</block> -->
			<view class="loading-wrap" v-if="theme_loading">
				<view class="loading">
					<image class="logo" :src="application_logo_square" mode="aspectFill"></image>
					<text class="t">拼命加载中...</text>
				</view>
			</view>
		</view>
		<!-- 页面已加载、模式 -->
		<block v-if="load_status == 1 && data_mode != 3">
			<!-- 结尾 -->
			<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>

			<!-- 版权信息 -->
			<component-copyright></component-copyright>

			<!-- 在线客服 -->
			<component-online-service :propIsNav="true" :propIsBar="true" :propIsGrayscale="plugins_mourning_data_is_app"></component-online-service>

			<!-- 快捷导航 -->
			<component-quick-nav :propIsNav="true" :propIsBar="true" :propIsGrayscale="plugins_mourning_data_is_app"></component-quick-nav>

			<!-- 公共 -->
			<component-common ref="common" :propIsGrayscale="plugins_mourning_data_is_app"></component-common>
		</block>
	</view>
</template>
<script>
	const app = getApp();
	import componentCommon from '@/components/common/common';
	import componentSearch from '@/components/search/search';
	import componentQuickNav from '@/components/quick-nav/quick-nav';
	import componentIconNav from '@/components/icon-nav/icon-nav';
	import componentBanner from '@/components/slider/slider';
	import componentCountdown from '@/components/countdown/countdown';
	import componentLayout from '@/components/layout/layout';
	import componentBadge from '@/components/badge/badge';
	import componentNoData from '@/components/no-data/no-data';
	import componentBottomLine from '@/components/bottom-line/bottom-line';
	import componentCopyright from '@/components/copyright/copyright';
	import componentOnlineService from '@/components/online-service/online-service';
	import componentActivityList from '@/components/activity-list/activity-list';
	import componentBlogList from '@/components/blog-list/blog-list';
	import componentRealstoreList from '@/components/realstore-list/realstore-list';
	import componentShopList from '@/components/shop-list/shop-list';
	import componentGoodsList from '@/components/goods-list/goods-list';
	import componentBindingList from '@/components/binding-list/binding-list';
	import componentMagicList from '@/components/magic-list/magic-list';
	import componentDiy from '@/components/diy/diy';
	import componentChoiceLocation from '@/components/choice-location/choice-location';

	// 状态栏高度
	var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0, true));
	// #ifdef MP-TOUTIAO
	bar_height = 0;
	// #endif
	export default {
		data() {
			return {
				theme_view: '',
				theme_color: '',
				common_static_url: '',
				seckill_static_url: '',
				static_url: '',
				data_list_loding_status: 1,
				data_list_loding_msg: '',
				data_bottom_line_status: false,
				load_status: 0,
				currency_symbol: app.globalData.currency_symbol(),
				is_home_search_scan: app.globalData.data.is_home_search_scan,
				data_list: [],
				banner_list: [],
				navigation: [],
				article_list: [],
				cart_total: 0,
				message_total: 0,
				category_list: [],
				currentTab: 0,
				scrollLeft: 0,
				tabWidths: [],
				right_icon_list: [],
				recommd_goods_list: [],
				news_goods_list: [],
				goods_list: [],
				// 首页数据模式
				data_mode: 0,
				// 增加随机数，避免无法监听数据列表内部数据更新
				random_value: 0,
				// 基础配置
				common_shop_notice: null,
				common_app_is_enable_search: 0,
				common_app_is_header_nav_fixed: 0,
				common_app_is_online_service: 0,
				// 顶部导航、名称、logo、定位
				application_title: app.globalData.data.application_title,
				application_logo: app.globalData.data.application_logo,
				application_logo_square: app.globalData.get_application_logo_square(),
				is_home_logo_use_text: app.globalData.data.is_home_logo_use_text,
				is_home_location_choice: app.globalData.data.is_home_location_choice,
				// 顶部+搜索样式配置
				top_content_bg_color: '',
				top_content_search_bg_color: '',
				top_content_search_content_style: '',
				// #ifdef MP
				top_content_style: 'padding-top:' + (bar_height + 10) + 'px;',
				// #endif
				// #ifdef H5 || MP-TOUTIAO
				top_content_style: 'padding-top:' + (bar_height + 14) + 'px;',
				// #endif
				// #ifdef APP
				top_content_style: 'padding-top:' + bar_height + 'px;',
				// #endif
				// 是否单页预览
				is_single_page: app.globalData.is_current_single_page() || 0,
				// 轮播滚动时，背景色替换
				slider_bg: null,
				// 插件顺序列表
				plugins_sort_list: [],
				// 限时秒杀插件
				plugins_seckill_data: null,
				// 购买记录插件
				plugins_salerecords_data: null,
				// 活动配置插件
				plugins_activity_data: null,
				// 标签插件
				plugins_label_data: null,
				// 首页中间广告插件
				plugins_homemiddleadv_data: null,
				// 哀悼灰度插件
				plugins_mourning_data_is_app: app.globalData.is_app_mourning(),
				// 标签插件
				plugins_blog_data: null,
				// 门店插件
				plugins_realstore_data: null,
				// 多商户插件
				plugins_shop_data: null,
				// 组合搭配插件
				plugins_binding_data: null,
				// 魔方插件
				plugins_magic_data: null,
				themeConfigData: {
					layout: '',
					themeColor: '',
					layoutData: {
						carousel: '',
						categories: '',
						jingang: '',
						newGoods: '',
						products: '',
						search: '',
						recommandGoods: {
							block1: '',
							block2: '',
							block3: '',
							block4: '',
							block5: '',
						},
					},
				},
				theme_loading: true,
			};
		},

		components: {
			componentCommon,
			componentSearch,
			componentQuickNav,
			componentIconNav,
			componentBanner,
			componentCountdown,
			componentLayout,
			componentBadge,
			componentNoData,
			componentBottomLine,
			componentCopyright,
			componentOnlineService,
			componentActivityList,
			componentBlogList,
			componentRealstoreList,
			componentShopList,
			componentGoodsList,
			componentBindingList,
			componentMagicList,
			componentDiy,
			componentChoiceLocation,
		},

		onLoad(params) {
			// 调用公共事件方法
			app.globalData.page_event_onload_handle(params);

			this.getThemeConfig();
		},

		onShow() {
			// 调用公共事件方法
			app.globalData.page_event_onshow_handle();

			// 数据加载
			this.init();

			// 初始化配置
			this.init_config();

			// 公共onshow事件
			if ((this.$refs.common || null) != null) {
				this.$refs.common.on_show({ object: this, method: 'init' });
			}

			// 设置顶部导航的默认颜色
			this.set_navigation_bar_color();
		},

		// 下拉刷新
		onPullDownRefresh() {
			if (this.data_list_loding_status === 1) {
				uni.stopPullDownRefresh();
			} else {
				this.init();
			}
		},
		methods: {
			// 获取首页主题配置
			getThemeConfig() {
				this.theme_loading = true;
				uni.request({
					url: app.globalData.get_request_url('pageConfigCurrent', 'common'),
					method: 'GET',
					success: (res) => {
						console.log('getThemeConfig===', JSON.parse(res.data.data.json_data));
						if (res.data.code == 0) {
							this.themeConfigData = JSON.parse(res.data.data.json_data);
						} else {
							console.log('主题获取失败===', res.data.msg);
						}
					},
					complete: () => {
						setTimeout(() => {
							this.theme_loading = false;
						}, 1500);
					},
				});
			},
			// 商品事件
			goods_event(e) {
				console.log('goods_event===', e);
				// 商品数据缓存处理
				// var goods = this.goods_list[e.currentTarget.dataset.index];
				// app.globalData.goods_data_cache_handle(goods.id, goods);

				// 调用公共打开url地址
				app.globalData.url_event(e);
			},
			// 金刚区导航
			navigation_event(e) {
				app.globalData.operation_event(e);
			},
			// 根据分类获取商品列表
			getCategoryGoods() {
				uni.request({
					url: app.globalData.get_request_url('index2', 'search'),
					method: 'get',
					data: {
						category_id: this.currentTab == 0 ? '' : this.category_list[this.currentTab - 1].id,
					},
					dataType: 'json',
					success: (res) => {
						console.log('根据分类获取商品列表===', res);
						if (res.data.code == 0) {
							var data = res.data.data;
							var temp_category = data.data || [];
							this.goods_list = temp_category;
						} else {
							app.globalData.showToast(this.$t('common.internet_error_tips'));
						}
					},
					fail: (err) => {
						app.globalData.showToast(this.$t('common.internet_error_tips'));
					},
				});
			},
			// 获取推荐/新品
			getRecommedGoods() {
				// 获取推荐
				uni.request({
					url: app.globalData.get_request_url('recommendList', 'search'),
					method: 'POST',
					data: {
						type: 1,
					},
					dataType: 'json',
					success: (res) => {
						console.log('获取推荐===', res);
						if (res.data.code == 0) {
							var data = res.data.data;
							var temp_category = data.data || [];
							this.recommd_goods_list = temp_category;
						} else {
							app.globalData.showToast(this.$t('common.internet_error_tips'));
						}
					},
					fail: (err) => {
						app.globalData.showToast(this.$t('common.internet_error_tips'));
					},
				});

				// 获取新品
				uni.request({
					url: app.globalData.get_request_url('recommendList', 'search'),
					method: 'POST',
					data: {
						type: 0,
					},
					dataType: 'json',
					success: (res) => {
						console.log('获取新品===', res);
						if (res.data.code == 0) {
							var data = res.data.data;
							var temp_category = data.data || [];
							this.news_goods_list = temp_category.slice(0, 4);

							console.log('this.news_goods_list===', this.news_goods_list);
						} else {
							app.globalData.showToast(this.$t('common.internet_error_tips'));
						}
					},
					fail: (err) => {
						app.globalData.showToast(this.$t('common.internet_error_tips'));
					},
				});
			},
			// 初始化配置
			init_config(status) {
				if ((status || false) == true) {
					this.setData({
						currency_symbol: app.globalData.get_config('currency_symbol'),
						common_shop_notice: app.globalData.get_config('config.common_shop_notice'),
						common_app_is_enable_search: app.globalData.get_config('config.common_app_is_enable_search'),
						common_app_is_header_nav_fixed: app.globalData.get_config('config.common_app_is_header_nav_fixed'),
						common_app_is_online_service: app.globalData.get_config('config.common_app_is_online_service'),
						application_title: app.globalData.get_application_title(),
						application_logo: app.globalData.get_application_logo(),
					});
				} else {
					app.globalData.is_config(this, 'init_config');
				}
			},
			// 初始化获取所有选项卡的宽度
			initTabWidths() {
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.tab-item')
					.boundingClientRect((rects) => {
						this.tabWidths = rects.map((rect) => rect.width);
					})
					.exec();
			},
			// 处理选项卡点击
			handleTabClick(index) {
				console.log(index);
				this.currentTab = index;

				// 计算需要滚动的距离使目标选项卡居中
				let scrollLeft = 0;
				for (let i = 0; i < index; i++) {
					scrollLeft += this.tabWidths[i] || 0;
				}

				// 获取容器宽度和当前选项卡宽度
				const containerWidth = uni.getSystemInfoSync().windowWidth - 50;
				const currentTabWidth = this.tabWidths[index] || 0;

				// 计算居中偏移量
				scrollLeft = scrollLeft + currentTabWidth / 2 - containerWidth / 2;

				// 确保滚动距离不小于0
				scrollLeft = Math.max(0, scrollLeft);

				// 设置滚动位置
				this.scrollLeft = scrollLeft;

				console.log('this.scrollLeft===', this.scrollLeft);

				this.getCategoryGoods();
			},
			// 获取分类
			getCategory() {
				uni.request({
					url: app.globalData.get_request_url('category', 'goods'),
					method: 'POST',
					data: {},
					dataType: 'json',
					success: (res) => {
						console.log('获取分类===', res);
						if (res.data.code == 0) {
							var data = res.data.data;
							var temp_category = data.category || [];
							this.category_list = temp_category;

							this.$nextTick(() => {
								setTimeout(() => {
									this.initTabWidths();
								}, 1000);
							});
						} else {
							app.globalData.showToast(this.$t('common.internet_error_tips'));
						}
					},
					fail: (err) => {
						app.globalData.showToast(this.$t('common.internet_error_tips'));
					},
				});
			},
			// 获取数据
			init(params = {}) {
				// 还没有数据则读取缓存
				var cache_key = app.globalData.data.cache_index_data_key;
				if (this.load_status == 0) {
					// 本地缓存数据
					var upd_data = uni.getStorageSync(cache_key) || null;
					if (upd_data != null) {
						// 先使用缓存数据展示
						this.setData(upd_data);

						// 初始化返回公共处理
						this.init_result_common_handle();

						// 已有本地缓存则直接取远程有效数据（默认首次取的是远程缓存数据）
						params['is_cache'] = 0;

						// 设置顶部导航的默认颜色
						this.set_navigation_bar_color();
					}
				} else {
					// 已有本地缓存则直接取远程有效数据（默认首次取的是远程缓存数据）
					params['is_cache'] = 0;
				}

				// 网络检查
				if ((params || null) == null || (params.loading || 0) == 0) {
					app.globalData.network_type_handle(this, 'init', params);
					return false;
				}

				// 没有缓存数据则开启加载层
				if (upd_data == null) {
					this.setData({
						data_list_loding_status: 1,
					});
				}
				this.getCategoryGoods();
				this.getRecommedGoods();
				this.getCategory();
				// 请求远程数据
				uni.request({
					url: app.globalData.get_request_url('index', 'index'),
					method: 'POST',
					data: params,
					dataType: 'json',
					success: (res) => {
						uni.stopPullDownRefresh();
						// 数据处理
						var data = res.data.data;
						if (res.data.code == 0) {
							var data_list = data.data_list || null;

							console.log('data_list===', data_list);

							var upd_data = {
								random_value: Math.random(),
								data_bottom_line_status: true,
								banner_list: data.banner_list || [],
								navigation: data.navigation || [],
								article_list: data.article_list || [],
								data_mode: data.data_mode || 0,
								data_list: data_list,
								cart_total: data.cart_total.buy_number || 0,
								message_total: parseInt(data.message_total || 0),
								right_icon_list: data.right_icon_list || [],
								data_list_loding_status: data_list == null || data_list.length == 0 ? 0 : 3,
								plugins_sort_list: data.plugins_sort_list || [],
								plugins_seckill_data: data.plugins_seckill_data || null,
								plugins_salerecords_data: (data.plugins_salerecords_data || null) == null || data.plugins_salerecords_data.length <= 0 ? null : data.plugins_salerecords_data,
								plugins_activity_data: (data.plugins_activity_data || null) == null || data.plugins_activity_data.length <= 0 ? null : data.plugins_activity_data,
								plugins_label_data: (data.plugins_label_data || null) == null || (data.plugins_label_data.base || null) == null || (data.plugins_label_data.data || null) == null || data.plugins_label_data.data.length <= 0 ? null : data.plugins_label_data,
								plugins_homemiddleadv_data: (data.plugins_homemiddleadv_data || null) == null || data.plugins_homemiddleadv_data.length <= 0 ? null : data.plugins_homemiddleadv_data,
								plugins_mourning_data_is_app: parseInt(data.plugins_mourning_data || 0) == 1,
								plugins_blog_data: data.plugins_blog_data || null,
								plugins_realstore_data: data.plugins_realstore_data || null,
								plugins_shop_data: data.plugins_shop_data || null,
								plugins_binding_data: data.plugins_binding_data || null,
								plugins_magic_data: data.plugins_magic_data || null,
							};
							// 如果开启了哀悼灰色则不固定导航
							if (upd_data.plugins_mourning_data_is_app == 1) {
								upd_data['common_app_is_header_nav_fixed'] = 0;
							}
							this.setData(upd_data);

							// 存储缓存
							uni.setStorageSync(cache_key, upd_data);

							// 设置顶部导航的默认颜色
							this.set_navigation_bar_color();

							// 是否需要重新加载数据
							if (parseInt(data.is_result_data_cache || 0) == 1) {
								this.init({ is_cache: 0 });
							} else {
								// 购物车导航角标
								app.globalData.set_tab_bar_badge('cart', this.cart_total);
							}
						} else {
							this.setData({
								data_list_loding_status: 0,
								data_list_loding_msg: res.data.msg,
								data_bottom_line_status: true,
							});
						}

						// 初始化返回公共处理
						this.init_result_common_handle();
					},
					fail: () => {
						// 轮播数据处理
						if (this.load_status == 0 || (this.top_content_search_bg_color || null) == null) {
							this.change_banner(app.globalData.get_theme_color());
						}

						uni.stopPullDownRefresh();
						this.setData({
							data_list_loding_status: 2,
							data_list_loding_msg: this.$t('common.internet_error_tips'),
							data_bottom_line_status: true,
							load_status: 1,
						});
					},
				});
			},

			// 设置顶部导航的默认颜色
			set_navigation_bar_color() {
				if (this.data_mode == 3) {
					app.globalData.set_navigation_bar_color(parseInt(app.globalData.get_key_data(this.data_list, 'config.header.com_data.style.function_buttons_type', 0)) == 1);
				}
			},

			// 初始化返回公共处理
			init_result_common_handle() {
				var theme_view = app.globalData.get_theme_value_view();
				var theme_color = app.globalData.get_theme_color();
				var common_static_url = app.globalData.get_static_url('common');
				var seckill_static_url = app.globalData.get_static_url('seckill', true) + 'app/';
				var static_url = app.globalData.get_static_url('home');

				// 轮播数据处理
				if (this.load_status == 0 || (this.top_content_search_bg_color || null) == null) {
					var color = this.banner_list && this.banner_list.length > 0 && (this.banner_list[0]['bg_color'] || null) != null ? this.banner_list[0]['bg_color'] : theme_color;
					this.change_banner(color);
				}

				// 公共数据
				this.setData({
					top_content_search_content_style: 'background-image: url("' + static_url + 'nav-top.png");',
					theme_view: theme_view,
					theme_color: theme_color,
					common_static_url: common_static_url,
					seckill_static_url: seckill_static_url,
					static_url: static_url,
					load_status: 1,
				});

				// 分享菜单处理、延时执行，确保基础数据已加载完成
				setTimeout(function () {
					app.globalData.page_share_handle();
				}, 3000);
			},

			// 选择用户地理位置回调
			user_back_choice_location(e) {
				// 重新刷新数据
				this.init();
			},

			// url事件
			url_event(e) {
				app.globalData.url_event(e);
			},

			// 轮播改变、背景色处理
			change_banner(color) {
				if ((color || null) == null) {
					color = this.theme_color;
				}
				this.setData({
					top_content_bg_color: 'background: linear-gradient(180deg, ' + color + ' 0%, #f5f5f5 80%);',
					top_content_search_bg_color: 'background: linear-gradient(180deg, ' + color + ' 0%, #f5f5f5 300%);',
				});
			},

			// 搜索icon扫码事件
			search_icon_event(e) {
				app.globalData.scan_handle();
			},
		},
	};
</script>
<style>
	@import './index.css';
</style>

<style scoped lang="scss">
	.container {
		&.layout3 {
			padding-top: 174upx;
		}
	}
	.layout3-category {
		padding: 20upx 0;
		display: flex;
		.cate {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.t {
				color: #555;
			}
		}
	}
	.category-list {
		white-space: nowrap;
		width: calc(750upx - 56upx);
		&.layout3 {
			width: calc(750upx - 56upx - 80upx);
		}
		.item {
			display: inline-block;
			padding-right: 40upx;
			&.active {
				.t-wrap {
					.t {
						color: #333;
						font-weight: bold;
					}
					.line,
					.dot {
						display: block;
					}
				}
			}
			.t-wrap {
				padding: 20upx 0;
				position: relative;
				.t {
					position: relative;
					z-index: 2;
					color: #555;
				}
				.dot {
					display: none;
					$size: 16upx;
					width: $size;
					height: $size;
					border-radius: 50%;
					position: absolute;
					left: 0;
					bottom: 24upx;
				}
				.line {
					display: none;
					width: 60upx;
					height: 8upx;
					position: absolute;
					bottom: 12upx;
					left: 50%;
					margin-left: -30upx;
					z-index: 1;
					border-radius: 20upx;
				}
			}
		}
	}
	.loading-wrap {
		width: 100%;
		height: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 30%;
		.loading {
			display: flex;
			gap: 20upx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.logo {
				$size: 120upx;
				width: $size;
				height: $size;
				border-radius: 16upx;
				animation: ani 1s ease-in-out infinite;
			}
			@keyframes ani {
				0% {
					transform: translateY(0);
				}
				50% {
					transform: translateY(-10px);
				}
				100% {
					transform: translateY(0);
				}
			}
			.t {
				color: #999;
			}
		}
	}
	.container {
		padding: 20upx;
		position: relative;
		.page-bg {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			.img {
				width: 100%;
				height: auto;
			}
		}
		.page-bg2 {
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99;
			.img {
				width: 100%;
				height: auto;
			}
			.page-tab {
				width: 100%;
				position: absolute;
				top: 0;
				display: flex;
				padding: 0 29upx;
				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					padding: 12upx 0;
					margin-right: 50upx;
					&.active {
						&::after {
							content: '';
							width: 40upx;
							height: 4upx;
							border-radius: 4upx;
							background: #fff;
							position: absolute;
							bottom: 0;
							left: 50%;
							margin-left: -20upx;
						}
						.t {
							color: rgba(255, 255, 255, 1);
						}
					}
					.t {
						font-size: 42upx;
						color: rgba(255, 255, 255, 0.6);
					}
				}
			}

			.search-wrap2 {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				padding: 20upx;
				box-sizing: border-box;
				$color: #fb1622;
				.search-content {
					height: 60upx;
					border: 1px solid $color;
					border-radius: 12upx;
					background-color: #fff;
					display: flex;
					align-items: center;
					padding: 6upx 8upx;
					.ipt {
						flex: 1;
						display: flex;
						align-items: center;
						padding-left: 20upx;
						height: 100%;
						font-size: 28upx;
						color: #999;
					}
					.btn {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 120upx;
						height: 100%;
						position: relative;
						margin-left: 20upx;
						.line {
							height: 30upx;
							border-left: 1px solid #999;
							position: absolute;
							top: 50%;
							margin-top: -15upx;
							left: 0;
						}
						.t {
							color: $color;
							font-weight: bold;
						}
					}
				}
			}
		}
		.logo {
			position: relative;
			.img {
				width: 180upx;
				height: 40upx;
			}
		}
		.search-wrap {
			position: relative;
			padding: 20upx 0;
			.search-content {
				height: 70upx;
				border: 1px solid #000;
				border-radius: 80upx;
				background-color: #fff;
				display: flex;
				padding: 6upx 8upx;
				.ipt {
					flex: 1;
					display: flex;
					align-items: center;
					padding-left: 20upx;
					height: 100%;
					font-size: 28upx;
					color: #999;
				}
				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120upx;
					height: 100%;
					border-radius: 80upx;
					background-color: #000;
				}
			}
		}
		.menus-wrap {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: repeat(2, 1fr);
			grid-column-gap: 28upx;
			grid-row-gap: 28upx;
			position: relative;
			padding: 28upx 0;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.icon {
					.img {
						$size: 80upx;
						width: $size;
						height: $size;
					}
				}
				.t {
					color: #333;
					font-size: 28upx;
				}
			}
		}
		.recommed-wrap {
			$height: 292upx;
			display: flex;
			margin-bottom: 28upx;
			.left-icon {
				.img {
					width: 204upx;
					height: $height;
				}
			}
			.goods-wrap {
				flex: 1;
				height: $height;
				padding-left: 20upx;
				.scroll-view {
					white-space: nowrap;
					width: calc(100vw - 284upx);
					overflow-x: hidden;
					.item {
						$coverHeight: 240upx;
						display: inline-block;
						width: 204upx;
						height: $height;
						margin-right: 20upx;
						background-color: #fff;
						border-radius: 20upx;
						overflow: hidden;
						.cover {
							width: 100%;
							height: $coverHeight;
							.img {
								width: 100%;
								height: 100%;
							}
						}
						.name {
							box-sizing: border-box;
							padding: 0 10px;
							width: 204upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
		.recommed2-wrap {
			padding: 20upx;
			border-radius: 20upx;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.title {
					font-size: 28upx;
					font-weight: bold;
					color: #000;
				}
				.more {
					display: flex;
					align-items: center;
					gap: 2px;
					border-radius: 100px;
					padding: 4upx 12upx;
					.t {
						color: #333;
						font-size: 24upx;
					}
				}
			}
			.goods-wrap {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: auto;
				grid-column-gap: 10px;
				grid-row-gap: 10px;
				padding-top: 20upx;
				.item {
					.icon {
						.img {
							display: block;
							width: 100%;
							height: 180upx;
							border-radius: 20upx;
						}
					}
					.name {
						width: 140upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.price-wrap {
						display: flex;
						align-items: center;
						gap: 6upx;
						.p {
							color: #d1381e;
						}
						.o {
							color: #999;
							font-size: 20upx;
							text-decoration: line-through;
							position: relative;
							top: 1px;
						}
					}
				}
			}
		}
		.recommed3-wrap {
			display: flex;
			gap: 20upx;
			padding-top: 32upx;
			.left {
				flex: 1;
				box-sizing: border-box;
				position: relative;
				padding: 108upx 16upx 16upx;
				.bg {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					border-radius: 12upx;
				}
				.top1 {
					width: 100%;
					height: 170upx;
					position: relative;
					border-radius: 12upx;
					overflow: hidden;
					.tag {
						content: 'TOP 1';
						padding: 4upx 12upx;
						position: absolute;
						z-index: 2;
						top: 0;
						left: 0;
						font-size: 20upx;
						color: #fff;
						border-radius: 0 0 12upx 0;
						background: linear-gradient(to right, #aedaf9, #d8bcff);
					}
					.img {
						width: 100%;
						height: 100%;
					}
				}
				.goods-wrap {
					position: relative;
					display: flex;
					gap: 8upx;
					padding-top: 20upx;
					.item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.img {
							width: 100%;
							height: 130upx;
							border-radius: 8upx;
						}
						.t {
							font-size: 24upx;
						}
					}
				}
			}
			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 20upx;
				.item {
					position: relative;
					height: 228upx;
					.bg {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
					}
					.img {
						width: 90%;
						height: 108upx;
						border-radius: 8upx;
						position: absolute;
						bottom: 16upx;
						left: 5%;
					}
				}
			}
		}
		.recommed4-wrap {
			$gap: 12upx;
			display: flex;
			gap: $gap;
			box-sizing: border-box;
			.flex {
				display: flex;
				gap: $gap;
				box-sizing: border-box;
				.col-item {
					flex: 1;
				}
			}
			.col {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: $gap;
				box-sizing: border-box;
				.col-item {
					background-color: #fff;
					border-radius: $gap;
					box-sizing: border-box;
					.title {
						display: flex;
						padding-bottom: $gap;
						box-sizing: border-box;
						padding: $gap;
						.left {
							flex-shrink: 0;
							display: flex;
							flex-direction: column;
							box-sizing: border-box;
							.t {
								color: #333;
								box-sizing: border-box;
							}
							.tag {
								position: relative;
								box-sizing: border-box;
								.tag-bg {
									position: absolute;
									width: 100%;
									height: 60%;
									bottom: 0;
									left: 0;
									background-color: #ffd1d1;
									border-radius: 40upx 4upx 4upx;
									box-sizing: border-box;
								}
								.tag-t {
									color: #ff3838;
									position: relative;
									box-sizing: border-box;
								}
							}
						}
						.title-goods {
							flex: 1;
							display: flex;
							gap: $gap;
							margin-left: $gap;
							box-sizing: border-box;
							.item {
								flex: 1;
								display: flex;
								flex-direction: column;
								box-sizing: border-box;
								.img {
									width: 100%;
									height: 100upx;
									border-radius: 8upx;
									box-sizing: border-box;
								}
								.name {
									width: 60upx;
									height: 40upx;
									color: #999;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									box-sizing: border-box;
								}
							}
						}
					}
					.items {
						display: flex;
						gap: $gap;
						box-sizing: border-box;
						.item {
							flex: 1;
							display: flex;
							flex-direction: column;
							box-sizing: border-box;
							.img {
								width: 100%;
								height: 180upx;
								box-sizing: border-box;
							}
							.name {
								width: 140upx;
								height: 40upx;
								color: #999;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								box-sizing: border-box;
							}
							.t {
								display: flex;
								align-items: center;
								box-sizing: border-box;
								.price {
									color: #fb1622;
									box-sizing: border-box;
								}
								.old {
									color: #999;
									font-size: 20upx;
									text-decoration: line-through;
									box-sizing: border-box;
								}
							}
						}
					}
				}
			}
		}
		.goods-list {
			padding: 20upx 0;
			.list {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: auto;
				grid-column-gap: 20upx;
				grid-row-gap: 20upx;
				.item {
					background-color: #fff;
					border-radius: 20upx;
					overflow: hidden;
					.icon {
						.img {
							display: block;
							width: 100%;
							height: auto;
							border-radius: 20upx;
						}
					}
					.info {
						padding: 20upx;
					}
					.name {
						width: calc(750upx / 2 - 94upx);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 6px;
					}
					.tag-list {
						display: flex;
						gap: 6px;
						flex-wrap: wrap;
						.tag {
							display: flex;
							align-items: center;
							padding: 4upx 16upx;
							border-radius: 12upx;
							background-color: #d1381e;
							color: #fff;
							font-size: 24upx;
						}
					}
					.price-wrap {
						display: flex;
						align-items: center;
						gap: 6upx;
						.p {
							color: #d1381e;
							font-size: 36upx;
							font-weight: bold;
						}
						.o {
							color: #999;
							font-size: 20upx;
							text-decoration: line-through;
							position: relative;
							top: 2px;
						}
					}
				}
			}
		}
	}
</style>
