MeiMeiZhuan/pages/index/index.vue

<template>
	<view class="container">
		<!-- 首页头部搜索 -->
		<!-- #ifdef MP -->
		<navigator url="/pages/product/search">
			<view class="input-box flex">
				<view class=" input-content flex">
					<view class="iconfont iconsearch"></view>
					<view class="input"><input disabled placeholder="请输入搜索内容" /></view>
				</view>
				<view class="input-button flex"><text>搜索</text></view>
			</view>
		</navigator>
		<!-- #endif -->
		<!-- 滚动tab导航 -->
		<view class="horizonal-tab">
			<scroll-view class="scroll-list" scroll-x>
				<view class="scoll-box" v-for="(item, index) in tabTitle" :key="index" :class="{ active: item.id === currentId }" @click="tabtap(item)">
					<view class="scoll-name">{{ item.cate_name }}</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view @click="add">扫码</view> -->
		<!-- 护肤 -->
		<view v-if="currentId !== 0" class="skincare-content">
			<view class="skincare-cate">
				<view class="skincare-cate-row" v-for="(items, indexs) in children" :key="indexs" @click="navToList(items.id)">
					<view class="skincare-cate-item">
						<view class="img"><image :src="items.pic"></image></view>
						<view class="name">{{ items.cate_name }}</view>
					</view>
				</view>
				<view class="skincare-cate-row" @click="switchTab('/pages/category/category')">
					<view class="skincare-cate-item">
						<view class="img"><image src="../../static/img/34.png" style="width: 54rpx;height: 54rpx;"></image></view>
						<view class="name">更多</view>
					</view>
				</view>
			</view>
			<!-- 排行榜 -->
			<view class="store-box">
				<!-- 排行榜charts -->
				<view class="charts-box">
					<view class="charts-header">
						<image src="../../static/img/33.png"></image>
						<view class="charts-name">排行榜</view>
						<view class="charts-info" @click="navTo('/pages/index/hotindex?type=2')">热门好货top榜</view>
					</view>
					<view class="charts-content">
						<view v-for="(item, index) in rankingList" :key="index" open-type="switchTab" hover-class="none" @click="navToDetailPage(item)">
							<view class="goods-box">
								<view class="goods-bg"><image :src="item.image"></image></view>
								<view class="goods-name">{{ item.store_name }}</view>
								<!-- <view class="goods-info"><text class="goods-name">面膜</text></view> -->
								<view class="goods-prince">
									￥
									<text>{{ item.price }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 天天特价 便宜好货 -->
			<view class="recommend">
				<view class="recommend-list" v-for="(ls, lsindex) in recommend" :key="lsindex" @click="change(ls.id)">
					<view class="re_title" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_title }}</view>
					<view class="re_name" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_name }}</view>
					<image class="selected_icon" src="/static/img/31.png" v-bind:class="{ active: ls.id == checkid }"></image>
				</view>
			</view>

			<view class="guess-box">
				<view class="list-box">
					<view class="guess-section">
						<view v-for="(item, index) in bargain" :key="index" open-type="switchTab" hover-class="none" @click="navToDetailPage(item)">
							<view class="guess-section-item">
								<view class="img"><image :src="item.image"></image></view>
								<view class="guess-info">
									<view class="name">{{ item.store_name }}</view>
									<view class="price">
										￥
										<text>{{ item.price }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 首页 -->
		<view v-if="currentId == 0">
			<!-- 首页轮播 -->
			<view class="carousel-section">
				<swiper class="carousel" indicator-dots indicator-color="#FFFFFF" indicator-active-color="#333333" autoplay="true" duration="400" interval="5000">
					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item.pic" /></swiper-item>
				</swiper>
			</view>
			<!-- 礼包 -->
			<view class="cate-section" @click="navTo('/pages/hotsale/giftbag')"><image src="https://mmz.liuniu946.com/statics/img/img50.png"></image></view>
			<!-- <view class="cate-section">
				<view class="hot-live">
					<view class="title">大礼包专区</view>
					<view class="hot-living">升级合伙人</view>
				</view>
				<swiper class="cate-box" scroll-x="true" @scroll="bindscroll" show-scrollbar="false">
					<swiper-item class="cate-frame" v-if="menusList_one.length != 0">
						<view class="cate-frame-1" v-for="(item, index) in menusList_one" :key="index" @click="navToDetailPage(item)">
							<view class="item-cate">
								<view class="image"><image :src="item.image" /></view>
								<text>大礼包{{ index + 1 }}</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item class="cate-frame" v-if="menusList_two.length != 0">
						<view class="cate-frame-1" v-for="(item, index) in menusList_two" :key="index" @click="navToDetailPage(item)">
							<view class="item-cate">
								<view class="image"><image :src="item.image" /></view>
								<text>大礼包{{ index + 1 + 10 }}</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item class="cate-frame" v-if="menusList_three.length != 0">
						<view class="cate-frame-1" v-for="(item, index) in menusList_three" :key="index" @click="navToDetailPage(item)">
							<view class="item-cate">
								<view class="image"><image :src="item.image" /></view>
								<text>大礼包{{ index + 1 + 20 }}</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item class="cate-frame" v-if="menusList_four.length != 0">
						<view class="cate-frame-1" v-for="(item, index) in menusList_four" :key="index" @click="navToDetailPage(item)">
							<view class="item-cate">
								<view class="image"><image :src="item.image" /></view>
								<text>大礼包{{ index + 1 + 30 }}</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item class="cate-frame" v-if="menusList_five.length != 0">
						<view class="cate-frame-1" v-for="(item, index) in menusList_five" :key="index" @click="navToDetailPage(item)">
							<view class="item-cate">
								<view class="image"><image :src="item.image" /></view>
								<text>大礼包{{ index + 1 + 40 }}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="progressBar-green"><view class="left" :style="{ width: sildeWidth + 'px', marginLeft: videoSilde + 'px' }"></view></view>
			</view> -->

			<!-- 热门直播 -->
			<view class="hot-live">
				<view class="title">热门直播</view>
				<view class="hot-living">火热直播中</view>
			</view>
			<view class="live-goods">
				<scroll-view scroll-x="true" @scrolltolower="liveList()">
					<view class="goods flex1">
						<view class="live-good-items" v-for="(item, index) in LiveList" :key="index" @click="goLive(item)">
							<image :src="item.image"></image>
							<text class="goods-info" style="width: 175rpx;">{{ item.store_name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 秒杀楼层 -->
			<seckill></seckill>

			<!-- 砍价商品 -->
			<view class="hot-goods">
				<view class="hot-headers flex-upDown-center">
					<!-- <image class="img" src="../../static/img/img44.png"></image> -->
					<view class="hot-title">超值砍价</view>
					<view><view class="more" @click.stop="navTo('/pages/activity/goods_bargain/index')">更多</view></view>
				</view>
				<view class="hot-lists" v-for="(baritem, barindex) in bargainlist" :key="barindex" @click.stop="navToDetailPages(baritem)">
					<view class="hot-produce">
						<view class="produce-image"><image :src="baritem.image"></image></view>
						<view class="produce-content">
							<view class="produce-price1 ">
								<view class="produce-name line2">{{ baritem.title }}</view>
								<!-- <view class="produce-info">
									已抢
									<text style="color: #FF383E">{{ baritem.sales }}</text>
									箱/仅剩
									<text style="color:#FF383E">{{ baritem.stock }}</text>
									箱
								</view> -->
								<view class="produce-center">
									<view class="kanjia_word">
										<view class="word-1">原价:￥{{ baritem.price }}</view>
										<view class="word-2">
											砍后价
											<text style="font-size: 24rpx;">￥</text>
											<text style="font-size: 36rpx;">{{ baritem.min_price }}</text>
										</view>
									</view>
									<view
										class="kanjia_button flex-center"
										@tap.stop="openSubscribe('/pages/activity/goods_bargain_details/index?id=' + baritem.id + '&bargain=' + userInfo.uid)"
									>
										<view>查看详情</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 热销产品 -->
			<view class="hot-goods" v-if="showCard" style="margin-top: 30rpx;">
				<view class="hot-headers flex-upDown-center" @click="navTo('/pages/hotsale/hotsale')">
					<!-- <image class="img" src="../../static/img/img44.png"></image> -->
					<view class="hot-title">热销产品</view>
					<view><view class="more">更多</view></view>
				</view>
				<view class="hot-lists" v-for="(hotitem, hotindex) in hotlist" :key="hotindex" @click="navToDetailPage(hotitem)">
					<view class="hot-produce">
						<view class="produce-image"><image :src="hotitem.image"></image></view>
						<view class="produce-content">
							<view class="produce-name">{{ hotitem.store_name }}</view>
							<view class="produce-info">
								已抢
								<text style="color: #FF383E">{{ hotitem.sales }}</text>
								箱/仅剩
								<text style="color:#FF383E">{{ hotitem.stock }}</text>
								箱
							</view>
							<view class="produce-price ">
								<view>
									￥
									<text>{{ hotitem.price }}</text>
								</view>
								<view class="produce-price-1" v-if="userInfo.level != null" :key="hotitem.origin_price">￥{{ hotitem.origin_price }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
import seckill from './seckill';
import { loadIndexs } from '@/api/index.js';
import { groomList, getProducts, productDetail, getliveList,userSpread } from '@/api/product.js';
import navTab from '@/components/navTab.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { getList } from '@/api/category.js';
import { openBargainSubscribe } from '@/utils/SubscribeMessage.js';
import { interceptor } from '@/utils/loginUtils.js';
import { getBargainList } from '@/api/user.js';
import { mapState } from 'vuex';
// import uniPopups from '@/components/uni-popup/uni-popups.vue';
export default {
	components: {
		seckill,
		navTab,
		uniLoadMore
		// uniPopups
	},
	computed: {
		...mapState(['baseURL', 'userInfo', 'hasLogin'])
	},
	// 监听导航栏输入框点击事件
	onNavigationBarSearchInputClicked(e) {
		uni.navigateTo({
			url: '/pages/product/search'
		});
	},
	onReachBottom() {
		this.gethotlists();
	},
	onBackPress() {
		obj.hotlist = [];
	},
	data() {
		return {
			showCard: false, //数据加载完成在渲染界面
			type: 3,
			hotlist: [], //热销产品1
			bargainlist: [], //砍价商品
			rankingList: [], //排行榜2
			bargain: [], //特价商品4 便宜好货3
			currentId: 0,
			list: [],
			children: [], //详细的分类
			//直播
			LiveList: [],
			checkid: 3,
			// swiperHeight: 0,
			// bastList: [],
			isFixed: false,
			carouselList: [],
			giftbag: 12, //礼包id
			menusList_one: [],
			menusList_two: [],
			menusList_three: [],
			menusList_four: [],
			menusList_five: [],
			tabIndex: 0,
			tabTitle: [],
			goodstype: 1,
			recommend: [
				{
					id: 3,
					re_title: '天天特价',
					re_name: '为你推荐'
				},
				{
					id: 4,
					re_title: '便宜好货',
					re_name: '特价包邮'
				}
			],
			videoSilde: '', // 滑动条移动左侧距离
			ScollWid: '', // 分类框宽度
			sildeWidth: '20', // 滑动条宽度
			buttonWidth: '', // 滑动条底部宽度
			specSelected: '',
			specList: '',
			actionPrice: '',
			productValue: [],
			page: 1,
			limit: 5,
			hotpage: 1,
			hotlimit: 5,
			number: '',
			loadingType: 'more' //加载更多状态
		};
	},
	onLoad: function(option) {
		let obj = this;
		if (option.spread) {
			uni.setStorageSync('spread', option.spread);
		}
		if (option.scene) {
			if (typeof option.scene == 'string' && isNaN(option.scene)) {
					let da = GetRequest(decodeURIComponent(option.scene));
					uni.setStorageSync('spread', da.scene);
					if (obj.hasLogin) {
						if(obj.userInfo.spread_uid == 0){
							userSpread({
								puid: uni.getStorageSync('spread')
							}).then(res => {
								uni.showToast({
									title:'添加成功'
								})
							});
						}
					}
				}
			
			if (!isNaN(option.scene)) {
				uni.setStorageSync('spread_code', option.scene);
				
				if (obj.hasLogin) {
					if(obj.userInfo.spread_uid == 0){
						userSpread({
							pcode: uni.getStorageSync('spread_code')
						}).then(res => {
							uni.showToast({
								title:'邀请人添加成功'
							})
						});
					}
				}
			}
		}
		this.liveList();
		if (!obj.hasLogin) {
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					if (e.confirm) {
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
			return;
		}
	},
	onShow: function() {
		this.hotpage = 1;
		this.loadData();
		this.loadDatalist();
		this.getBargainList();
		this.hotlist = [];
		this.loadingType = 'more';
		this.gethotlists();
		// #ifdef APP-PLUS
		let obj = this;
		uni.getClipboardData({
			//获取剪切板里的信息
			data: 'hello',
			success: function(res) {
				//var str =res.data.substring(0,6);
				var arr = res.data.split('@');
				console.log(arr[0],'arr[0]');//https://pt.xsp
				console.log(arr[1],'arr[1]');//pages/product/details
				console.log(arr[2],'arr[2]');//type:0商品,type=1拼团,type=2邀请注册,type=3邀请好友参团type=4邀请好友助力
				console.log(arr[3],'arr[3]');//uid 邀请人id
				let userInfo = uni.getStorageSync('userInfo') || '';
				if (arr[0] == obj.baseURL) {
					//判断是不是美美赚的复制内容
					if (userInfo.uid != arr[3]) {
						uni.showModal({
							title: '是否要进入你好友分享的页面',
							content: arr[1],
							//image:"https://img-blog.csdnimg.cn/20200313124105374.png",
							success: function(r) {
								if (r.confirm) {
									uni.setClipboardData({
										data: '',
										success: function() {
											uni.hideToast();
										}
									});
									if (arr[2] == 4) {
										uni.switchTab({
											url: '/' + arr[1]
										});
									} else {
										uni.navigateTo({
											url: '/' + arr[1] + '&spread=' + arr[3]
										});
									}
								} else if (r.cancel) {
									uni.setClipboardData({
										data: '',
										success: function() {
											uni.hideToast();
										}
									});
								}
							},
							fail: function(err) {
								console.log('fail');
							}
						});
					} else {
						console.log('这是自己分享的链接');
					}
				} else {
					console.log('不是美美赚的地址：' + res.data);
				}
			},
			fail: function(err) {
				console.log('fail');
			}
		});
		//关闭剪贴板。
		//uni.CloseClipboard();
		// #endif
	},
	// onReady() {
	// 	// 获取分类包裹框宽度
	// 	uni.getSystemInfo({
	// 		success: function(res) {
	// 			// res - 各种参数
	// 			let obj = uni.createSelectorQuery().select('.cate-box');
	// 			obj.boundingClientRect(function(data) {
	// 				// data - 各种参数
	// 				uni.setStorageSync('ScollWid', data.width);
	// 			}).exec();
	// 		}
	// 	});
	// 	// 获取进度条底部宽度
	// 	uni.getSystemInfo({
	// 		success: function(res) {
	// 			// res - 各种参数
	// 			let obj = uni.createSelectorQuery().select('.progressBar-green');
	// 			obj.boundingClientRect(function(data) {
	// 				// data - 各种参数
	// 				uni.setStorageSync('buttonWidth', data.width);
	// 			}).exec();
	// 		}
	// 	});
	// },
	methods: {
		add(){
			uni.scanCode({
			    success: function (res) {
					// uni.showModal({
					// 	title:'s',
					// 	content:JSON.stringify(res)
					// })
			    }
			});
		},
		getBargainList() {
			let that = this;

			getBargainList({
				page: that.page,
				limit: that.limit
			})
				.then(function(res) {
					that.$set(that, 'bargainlist', res.data.slice(0, 2));
				})
				.catch(res => {
					console.log(res, 'getBargainList');
				});
		},
		gethotlists() {
			let obj = this;
			//获取精品推荐放在热销商品
			if (obj.loadingType == 'more') {
				groomList(
					{
						page: obj.hotpage,
						limit: obj.hotlimit
					},
					obj.goodstype
				)
					.then(({ data }) => {
						let hotlists = obj.hotlist.concat(data.list);
						// 传值处理数据
						obj.getVipMoney(hotlists, data, obj.hotpage, obj.hotlimit).then(res => {
							obj.hotlist = res;
							obj.showCard = true;
							if (obj.hotlimit == data.list.length) {
								obj.hotpage++;
								obj.loadingType = 'more';
							} else {
								obj.loadingType = 'nomore';
							}
						});
					})
					.catch(e => {
						console.log(e);
					});
			}
		},
		openSubscribe: function(e) {
			let page = e;
			// #ifndef MP
			uni.navigateTo({
				url: page
			});
			// #endif
			// #ifdef MP
			uni.showLoading({
				title: '正在加载'
			});
			openBargainSubscribe()
				.then(res => {
					uni.hideLoading();
					uni.navigateTo({
						url: page
					});
				})
				.catch(err => {
					uni.hideLoading();
				});
			// #endif
		},
		// 获取当前等级价格
		/**
		 * @param {number} num 用于计算是否取得指定数据次数
		 */
		getVipMoney(hotlists, dataList, page, limit) {
			let obj = this;
			return new Promise((ok, error) => {
				let out = setTimeout(e => {
					error('请求超时', hotlists);
				}, 20000);
				//计算请求返回次数
				let num = 0;
				for (let i = 0; i < hotlists.length; i++) {
					num++;
					if (page == 1) {
						obj.specList = hotlists[i].productAttr; //保存产品属性
						obj.productValue = hotlists[i].productValue;
					} else {
						let a = (page - 1) * limit + i;
						obj.specList = hotlists[a].productAttr;
						obj.productValue = hotlists[a].productValue;
					}
					obj.specSelected = []; //初始化默认选择对象
					for (let i = 0; i < obj.specList.length; i++) {
						// 设置默认数据
						let attrValue = obj.specList[i].attr_value[0];
						attrValue.check = true;
						obj.specSelected.push(attrValue.attr);
					}
					let str = obj.specSelected.join(',');
					let actionPrice = obj.productValue[str].price;
					if (page == 1) {
						hotlists[i].origin_price = hotlists[i].price;
						hotlists[i].price = actionPrice;
					} else {
						let a = (page - 1) * limit + i;
						hotlists[a].origin_price = hotlists[a].price;
						hotlists[a].price = actionPrice;
					}
					if (dataList.list.length == num) {
						// 清除倒计时
						clearTimeout(out);
						ok(hotlists);
					}
				}
			});
		},
		// 获取首页数据
		loadData() {
			let obj = this;
			let types = 2;
			groomList({}, types)
				.then(({ data }) => {
					let rankingList = data.list.slice(0, 3);
					for (let i = 0; i < 3; i++) {
						let goodsid = data.list[i].id;
						productDetail({}, goodsid).then(({ data }) => {
							obj.specList = data.productAttr; //保存产品属性
							obj.specSelected = []; //初始化默认选择对象
							obj.productValue = data.productValue;
							for (let i = 0; i < obj.specList.length; i++) {
								// 设置默认数据
								let attrValue = obj.specList[i].attr_value[0];
								attrValue.check = true;
								obj.specSelected.push(attrValue.attr);
							}
							let str = obj.specSelected.join(',');
							let actionPrice = obj.productValue[str].price;
							rankingList[i].price = actionPrice;
						});
					}
					setTimeout(function() {
						obj.rankingList = rankingList;
					}, 500);
				})
				.catch(e => {
					console.log(e);
				});

			//获取轮播图
			loadIndexs({})
				.then(({ data }) => {
					this.carouselList = data.banner;
				})
				.catch(e => {
					console.log(e);
				});
			getList({})
				.then(({ data }) => {
					// obj.tabTitle = data.map(function(s) {
					// 	return s;
					// });
					obj.tabTitle = data;
					let poped = obj.tabTitle.pop();

					obj.giftbag = poped.children[0].id;
					let newDate = {
						id: 0,
						cate_name: '首页'
					};
					obj.tabTitle.unshift(newDate);

					let datas = {
						sid: obj.giftbag, //分类id
						isPink: 1
					};
					getProducts(datas).then(function(e) {
						obj.menusList_one = e.data.slice(0, 10);
						obj.menusList_two = e.data.slice(11, 20);
						obj.menusList_three = e.data.slice(21, 30);
						obj.menusList_four = e.data.slice(31, 40);
						obj.menusList_five = e.data.slice(41, 50);
					});
					// obj.currentId = obj.flist[0].id;
				})
				.catch(err => {
					console.log(err);
				});
		},
		loadDatalist() {
			let obj = this;
			let type = this.type;
			groomList(
				{
					page: 1,
					limit: 10
				},
				type
			)
				.then(({ data }) => {
					let bargain = data.list.slice(0, 10);
					for (let i = 0; i < 10; i++) {
						let goodsid = data.list[i].id;
						productDetail({}, goodsid).then(({ data }) => {
							obj.specList = data.productAttr; //保存产品属性
							obj.specSelected = []; //初始化默认选择对象
							obj.productValue = data.productValue;
							for (let i = 0; i < obj.specList.length; i++) {
								// 设置默认数据
								let attrValue = obj.specList[i].attr_value[0];
								attrValue.check = true;
								obj.specSelected.push(attrValue.attr);
							}
							let str = obj.specSelected.join(',');
							let actionPrice = obj.productValue[str].price;
							bargain[i].price = actionPrice;
						});
					}
					setTimeout(function() {
						obj.bargain = bargain;
					}, 500);
				})
				.catch(e => {
					console.log(e);
				});
		},
		liveList() {
			let obj = this;
			if (obj.number != obj.page) {
				getliveList({
					page: obj.page,
					limit: obj.limit
				}).then(res => {
					obj.LiveList = obj.LiveList.concat(res.data);
					obj.number = obj.page;
					if (res.data.length == obj.limit) {
						obj.page++;
					}
				});
			} else {
				uni.showToast({
					title: '已经到底了',
					duration: 1000
				});
			}
		},
		goLive(item) {
			let url = item.kd_url;
			wx.navigateToMiniProgram({
				appId: 'wx60d176f873ca2d67',
				envVersion: 'release',
				path: url,
				success(res) {
					console.log(res);
					// 打开成功
				}
			});
			// let url = this.goodsObjact.jump_url
			// // #ifdef H5
			// if (url.indexOf('http') != -1) {
			// 	window.location.href = url;
			// }
			// // #endif
			// uni.navigateTo({
			// 	url: url
			// })
		},
		navToList(tid) {
			// 点击导航跳转到详细页面
			uni.navigateTo({
				url: '/pages/product/list?fid=' + this.currentId + '&sid=' + this.currentId + '&tid=' + tid
			});
		},
		// 轮播图跳转
		bannerNavToUrl(item) {
			// #ifdef H5
			if (item.wap_url.indexOf('http') != -1) {
				window.location.href = item.wap_url;
			}
			// #endif
			//测试数据没有写id，用title代替
			uni.navigateTo({
				url: item.url,
				fail() {
					uni.switchTab({
						url: item.url
					});
				}
			});
		},
		//商品推荐详情页
		navToDetailPage(item) {
			let id = item.id;
			//let type = 2;

			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		},
		//砍价商品推荐详情页
		navToDetailPages(item) {
			let id = item.product_id;
			//let type = 2;

			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		},
		// 分类滑动进度条
		bindscroll(e) {
			// 分类框宽度
			this.ScollWid = uni.getStorageSync('ScollWid');
			// 滑动条底部宽度
			this.buttonWidth = uni.getStorageSync('buttonWidth');

			// 滑动条宽度
			let sliderWidth = (this.ScollWid / e.detail.scrollWidth) * this.buttonWidth;
			this.sildeWidth = sliderWidth;

			// 滑动条移动距离
			let sliderValue = (e.detail.scrollLeft / e.detail.scrollWidth) * this.buttonWidth;
			this.videoSilde = sliderValue;
		},

		// 监听切换事件
		listChange(e) {
			this.checkid = e.detail.current;
		},
		changeTab: function(e) {
			console.log(e);
		},
		// 點擊搜索框
		clickSearch() {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		//切换选项卡
		toggleTab(index) {
			this.tabIndex = index;
		},
		navTo(url) {
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			uni.navigateTo({
				url
			});
		},
		switchTab(url) {
			// if (!this.hasLogin) {
			// 	uni.showModal({
			// 		title: '登录',
			// 		content: '您未登录，是否马上登陆?',
			// 		success: e => {
			// 			if (e.confirm) {
			// 				interceptor();
			// 			}
			// 		},
			// 		fail: e => {
			// 			console.log(e);
			// 		}
			// 	});
			// 	return;
			// }
			uni.switchTab({
				url: url
			});
		},
		//滑动切换swiper
		tabChange(e) {
			//console.log(e);
			this.tabIndex = e.detail.current;
		},
		async loadDataList() {
			let obj = this;
			getList({})
				.then(({ data }) => {
					// obj.tabTitle = data.map(function(s) {
					// 	return s;
					// });
					obj.tabTitle = data;
					let newDate = {
						id: 0,
						cate_name: '首页'
					};
					obj.tabTitle.unshift(newDate);
					// obj.currentId = obj.flist[0].id;
				})
				.catch(err => {
					console.log(err);
				});
		},
		tabtap(item) {
			this.currentId = item.id;
			this.pages = 1;
			this.limits = 6;
			this.queryList = [];
			this.loadingTypes = 'more';
			this.children = item.children.slice(0, 7);
			// if (item.id != 0) {
			// 	this.productList();
			// }
		},
		toCategory() {
			uni.switchTab({
				url: '/pages/category/category'
			});
		},
		change(item) {
			// console.log(item)
			// let id = item;
			// this.checkid = id;
			// console.log(this.checkid)
			// if (this.checkid == 1) {
			// 	// console.log(1);
			// 	this.detail = this.selected_detail;
			// } else if (this.checkid == 2) {
			// 	// console.log(2);
			// 	this.detail = this.new_product;
			// } else {
			// 	this.detail = this.cheap_good;
			// }

			if (item == 3) {
				this.checkid = 3;
				this.type = 3;
				this.loadDatalist();
			} else {
				this.checkid = 4;
				this.type = 4;
				this.loadDatalist();
			}
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
	height: 100%;
}
.container {
	.horizonal-tab {
		background-color: #fff;
		padding: 0rpx;
	}

	/* #ifdef MP || APP-PLUS*/
	.input-box {
		padding: 25rpx;
		/* #ifdef APP-PLUS */
		margin-top: var(--status-bar-height);
		/* #endif */
		background-color: #ffffff;
		height: 44px;
		.iconsearch {
			font-size: 50rpx;
		}
		.input-content {
			border-radius: 99rpx;
			flex-grow: 1;
			padding: 5rpx 30rpx;
			background-color: rgba(231, 231, 231, 0.7);

			.input {
				flex-grow: 1;

				input {
					font-size: $font-base;
				}
			}
		}

		.input-button {
			padding-left: 20rpx;
			font-size: $font-base;
			height: 100%;
		}
	}
	/* #endif */
	// 横向tab
	.scroll-list {
		padding-left: 24rpx;
		overflow: hidden;
		white-space: nowrap;
		.scoll-box {
			padding-bottom: 10rpx;
			margin-right: 50rpx;
			text-align: center;
			display: inline-block;
			color: #666666;
			.scoll-name {
				font-size: 30rpx;
			}
			&.active {
				color: #dc4d46;
				border-bottom: 4rpx solid #fa2740;
			}
		}
	}
	.skincare-content {
		.skincare-cate {
			width: 100%;
			padding-bottom: 20rpx;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			.skincare-cate-row {
				width: 25%;
			}
			.skincare-cate-item {
				display: flex;
				justify-content: center;
				justify-items: center;
				flex-direction: column;
				.img {
					height: 160rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 120rpx;
						height: 120rpx;
					}
				}
				.name {
					font-size: 24rpx;
					color: #666666;
					text-align: center;
				}
			}
		}
		.store-box {
			width: 100%;
			padding: 25rpx 27rpx 40rpx 24rpx;
			.charts-box {
				background: linear-gradient(180deg, rgba(233, 234, 239, 1) 0%, rgba(255, 255, 255, 1) 12%);
				border-radius: 10rpx;
				.charts-header {
					display: flex;
					align-items: center;
					height: 80rpx;
					border-bottom: 2rpx solid #f0f0f0;
					margin-left: 30rpx;
					margin-right: 30rpx;
					image {
						height: 34rpx;
						width: 28rpx;
						margin-top: 6rpx;
					}
					.charts-name {
						font-size: 30rpx;
						color: #333333;
						font-weight: bold;
						margin-left: 10rpx;
					}
					.charts-info {
						color: #dc4d46;
						font-size: 24rpx;
						margin-left: 30rpx;
					}
				}
				.charts-content {
					display: flex;
					padding: 30rpx 10rpx 12rpx;
					justify-content: space-around;
					.goods-box {
						.goods-bg {
							image {
								width: 194rpx;
								height: 194rpx;
							}
						}
						.goods-name {
							width: 180rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.goods-info {
							color: #e93323;
							font-size: 20rpx;
							margin-top: 10rpx;
							height: 30rpx;
							line-height: 30rpx;
							.goods-name {
								border: 1px solid #f8f8f8;
								border-radius: 10rpx;
							}
						}
						.goods-prince {
							font-size: 24rpx;
							color: #fc4141;
							margin-top: 20rpx;
							font-weight: bold;
							text {
								font-size: 30rpx;
							}
						}
					}
				}
			}
		}
		.recommend {
			display: flex;
			padding: 0 30rpx;
			.recommend-list {
				width: 50%;
				font-size: 16px;
				text-align: center;
				color: #000000;
				.re_title {
					font-size: 36rpx;
				}
				.re_name {
					font-size: 24rpx;
				}
				.selected_icon {
					width: 25rpx;
					height: 10rpx;
					margin: 0px auto;
					display: none;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.active {
					display: block;
				}
				.active_color {
					color: #dc4d46;
				}
			}
		}
		.guess-box {
			padding: 0 24rpx;
			.list-box {
				margin-top: 30rpx;
				margin-bottom: 100rpx;
				min-height: 1800rpx;
				.guess-section {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					navigator {
						width: 49%;
					}
					.guess-section-item {
						height: 490rpx;
						border-radius: 19rpx;
						background-color: #fff;
						margin-bottom: 16rpx;
						.img {
							width: 340rpx;
							height: 340rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							image {
								width: 270rpx;
								height: 270rpx;
							}
						}
						.guess-info {
							padding-left: 21rpx;
							padding-right: 25rpx;
							font-weight: bold;
							.name {
								margin-top: 21rpx;
								font-size: 26rpx;
								width: 270rpx;
								display: inline-block;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.price {
								color: #fc4141;
								font-size: 24rpx;
								margin-top: 16rpx;
							}
						}
					}
				}
			}
		}
	}
	.carousel-section {
		padding: 0;
		.carousel {
			padding: 0;
			height: 320rpx;
			.carousel-item {
				width: 100%;
				height: 100%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.cate-section {
		width: 100%;
		background-color: #fff;
		image {
			width: 750rpx;
			height: 205rpx;
		}
		// height: 340rpx;
		//padding-bottom: 10rpx;
		// display: flex;
		// flex-wrap: wrap;
		// padding-left: 22rpx;
		// padding-bottom: 40rpx;

		// 进度条
		// .progressBar-green {
		// 	width: 130rpx;
		// 	height: 6rpx;
		// 	background: #f7f4f8;
		// 	border-radius: 2rpx;
		// 	z-index: 10;
		// 	margin: auto;
		// 	.left {
		// 		height: 100%;
		// 		background: #fc676c;
		// 	}
		// }

		// .cate-box {
		// 	width: 100%;
		// 	.cate-frame {
		// 		display: flex;
		// 		flex-wrap: wrap;
		// 		height: 360rpx;
		// 		padding: 20rpx 0;
		// 		.cate-frame-1 {
		// 			width: 150rpx;
		// 			margin-bottom: 20rpx;
		// 		}
		// 	}
		// }

		// .item-cate {
		// 	display: flex;
		// 	flex-direction: column;
		// 	align-items: center;
		// 	font-size: 24rpx;
		// 	color: #666;
		// 	.image {
		// 		width: 85rpx;
		// 		height: 85rpx;
		// 		overflow: hidden;
		// 		box-shadow: 0px 3px 15px 1px rgba(153, 153, 153, 0.2);
		// 		border-radius: 50%;
		// 	}
		// 	image {
		// 		width: 85rpx;
		// 		height: 85rpx;
		// 		margin-bottom: 6rpx;
		// 	}
		// }
	}
	// 火热直播中
	.hot-live {
		display: flex;
		padding-left: 45rpx;
		padding-top: 30rpx;
		align-items: center;
		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			margin-right: 10rpx;
		}
		.hot-living {
			height: 30rpx;
			line-height: 30rpx;
			background-color: #fc4141;
			padding: 0rpx 15rpx;
			border-radius: 20rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
	// 直播商品
	.live-goods {
		margin-top: 18rpx;
		padding: 0 25rpx;
		.goods {
			width: 100%;
		}
		.live-good-items {
			width: 220rpx;
			height: 270rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			margin-left: 20rpx;
			&:first-of-type {
				margin-left: 0;
			}
			image {
				width: 220rpx;
				height: 196rpx;
				border-radius: 12rpx 12rpx 0 0;
			}
			.goods-info {
				font-size: 26rpx;
				margin: 0 25rpx;
				color: #333333;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	// 限时秒杀
	.seckill-section {
		// overflow: hidden;
		background-color: #fff;
		margin: 30rpx 25rpx;
		border-radius: 8rpx;
		.seckill-header {
			display: flex;
			margin-left: 24rpx;
			padding-top: 20rpx;
			.seckill-titile {
				font-size: 28rpx;
			}
			.seckill-time {
				width: 180rpx;
				height: 28rpx;
				line-height: 28rpx;
				border-radius: 14rpx;
				border: 1px solid #fc4141;
				font-size: 18rpx;
				margin-left: 10rpx;
				margin-top: 4rpx;
				display: flex;
				.seckill-countdown {
					width: 64rpx;
					height: 28rpx;
					line-height: 28rpx;
					text-align: center;
					border-radius: 14rpx;
					background-color: #fc4141;
					color: #fff;
				}
				.countdown {
					color: #fc4141;
					text-align: center;
					margin-left: 4rpx;
				}
			}
		}
		.seckill-goods {
			display: flex;
			justify-content: space-around;
			margin-top: 14rpx;
			text-align: center;
			.seckill-goods-item {
				display: flex;
				flex-direction: column;
				image {
					width: 128rpx;
					height: 128rpx;
				}
				.new-price {
					font-size: 28rpx;
					margin-top: 8rpx;
					font-weight: bold;
				}
				.old-price {
					font-size: 20rpx;
					color: #999999;
					text-decoration: line-through;
				}
			}
		}
	}
	// 热销商品
	.hot-goods {
		margin: 0 25rpx;
		padding: 5rpx 25rpx 30rpx 25rpx;
		background-color: #fff;
		border-radius: 10rpx;
		.hot-headers {
			margin: 25rpx 0;
			width: 100%;
			display: flex;
			.img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
			.hot-title {
				font-size: 30rpx;
				margin-right: 15rpx;
			}
			.more {
				line-height: 1;
				padding: 5rpx 10rpx 5rpx 15rpx;
				text-align: center;
				font-size: 20rpx;
				border-radius: 15rpx;
				color: #ffffff;
				background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);
				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
		.hot-lists {
			line-height: 1;
			display: flex;
			.hot-produce {
				width: 100%;
				height: 260rpx;
				border-top: 1px solid #f0f0f0;
				display: flex;
				padding-top: 28rpx;
				.produce-image {
					width: 200rpx;
					height: 200rpx;
					image {
						width: 200rpx;
						height: 200rpx;
						border: 1px solid #f0f0f0;
					}
				}
				.produce-content {
					// flex-direction: column;
					margin-left: 30rpx;
					height: 200rpx;
					position: relative;
					width: calc(100% - 200rpx - 30rpx);
					.produce-name {
						font-size: 28rpx;
						font-weight: bold;
						line-height: 35rpx;
						color: #343434;
					}
					.produce-info {
						font-size: 20rpx;
						margin-top: 25rpx;
					}
					.produce-price {
						display: flex;
						align-items: flex-end;
						color: #ff383e;
						font-size: 24rpx;
						margin-top: 70rpx;
						font-weight: bold;
						text {
							font-size: 36rpx;
						}
						.produce-price-1 {
							font-size: 22rpx;
							font-weight: 500;
							text-decoration: line-through;
							color: rgba(170, 170, 170, 1);
							margin-left: 20rpx;
						}
					}
					.produce-price1 {
						height: 100%;
						letter-spacing: 3rpx;
						color: #ff383e;
						font-size: 24rpx;
						font-weight: bold;
						.produce-center {
							width: 100%;
							position: absolute;
							bottom: 0;
							display: flex;
							justify-content: space-between;
							align-items: center;
							.kanjia_word {
								.word-1 {
									font-size: 22rpx;
									color: #666666;
								}
								.word-2 {
									font-size: 28rpx;
									color: #ff383e;
									margin-top: 10rpx;
								}
							}
							.kanjia_button {
								height: 50rpx;
								width: 150rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								font-weight: 500;
								color: #ff383e;
								border: 1px solid rgba(255, 56, 62, 1);
							}
						}
					}
				}
			}
		}
	}
}
</style>