H5_module/pages/service/index.vue

<template>
	<view :style="[mainStyle]">
		<view :class="'top' + (isScroll ? ' top-background' : '')" :style="'height:' + systems.barHeight + 'rpx;'">
			<!-- #ifdef MP-WEIXIN -->
			<view class="top-nav ddflex"
				:style="'height:' + systems.navigationHeight + 'rpx;top:' + systems.ktxStatusHeight + 'rpx;'">
				<view class="search ddflex" @click="jumpUrl('/pages/search/search')">
					<image src="../../static/pages/images/ssico.png"></image>
					<view>请输入商品名称搜索</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="top-navc ddflex"
				:style="'height:' + systems.navigationHeight + 'rpx;top:' + systems.ktxStatusHeight + 'rpx;'">
				<view class="searchc ddflex" @click="jumpUrl('/pages/search/search')">
					<image src="../../static/pages/images/ssico.png"></image>
					<view>请输入商品名称搜索</view>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="top-con">
			<view class="top-bg">
				<image :src="picUrlss+'lvluo/service_img.png'"></image>
			</view>
			<view class="shop">
				<view class="shop-info ddflex">
					<view class="fflex">
						<view class="shop-name ddflex">
							<view class="tover">{{ merchant.title }}</view>
							<image src="../../static/pages/images/daohang.png" class="daohang" @click="goNavigation()">
							</image>
						</view>
						<view class="shop-datas ddflex">
							<!-- <image :src="picUrlss+'lvluo/service_dz.png'"></image> -->
							<view class="expre ddflex">预约到店</view>
							<!-- <view class="shop-addr"><view class="tover">{{merchant.address}}</view></view> -->
						</view>
						<view class="shop-infos ddflex">
							<view style="margin-right: 15rpx;">
								{{ merchant.range ? (merchant.mDistance < 1000 ? merchant.mDistance + 'm ·' : merchant.range + 'km ·') : ''}}
							</view>
							<!-- <view class="expre ddflex">预约到店</view> -->
							<view>服务时间：{{merchant.businessTime}}</view>
							<!-- <view class="expre ddflex"><image :src="picUrlss+'lvluo/service_kd.png'"></image><view class="fflex">快递发货</view></view>
							<view>预计1-3日达·月售9999+</view> -->
						</view>
					</view>
					<view class="shop-pic">
						<image :src="merchant.logo" mode="aspectFit" class="shop-logo"></image>
					</view>
				</view>
				<!-- <view class="m-tag ddflex">
					<view class="li ddflex"><image :src="picUrlss+'lvluo/service_dp.png'" style="width: 31rpx;"></image>支持自取</view>
					<view class="li ddflex"><image :src="picUrlss+'lvluo/service_fp.png'" style="width: 26rpx;"></image>开发票</view>
					<view class="li ddflex"><image :src="picUrlss+'lvluo/service_yd.png'" style="width: 28rpx;"></image>支持预定</view>
				</view> -->
				<view class="shop-bot" v-if="couponList.length>0">
					<view class="coupons-list fflex">
						<scroll-view scroll-x="true" class="coupons-s">
							<view class="li" v-for="(item,index) in couponList" :key="index"
								@click="recieveCoupon(item,index)">
								<view class="ddflex">
									<view class="coupon-money"><text>￥</text>{{item.couponAmount}}</view>
									<view class="coupons-tit">{{item.couponTitle}}</view>
									<text
										class="coupon-ling">{{item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? '已领' : '领'}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<block v-if="sort">
			<!-- #ifndef H5 -->
			<scroll-view scroll-y="true" class="sort-left" :style="'bottom:' + (bottomBlankHeignt + 115) + 'rpx;'">
				<block v-for="(item, index) in sortCategorys" :key="index">
					<view :class="'li ' + (selectTab == index ? 'active' : '')" :data-index="index" @tap="toScrollView"
						:data-id="item.id">{{ item.title }}</view>
				</block>
			</scroll-view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<scroll-view scroll-y="true" class="sort-left"
				:style="'bottom:' + (bottomBlankHeignt + 115) + 'rpx;' + 'top: 43px'">
				<block v-for="(item, index) in sortCategorys" :key="index">
					<view :class="'li ' + (selectTab == index ? 'active' : '')" :data-index="index" @tap="toScrollView"
						:data-id="item.id">{{ item.title }}</view>
				</block>
			</scroll-view>
			<!-- #endif  -->
			<scroll-view scroll-y="true" class="sort-right" :style="'height:' + scrollHeight + 'px;'"
				:scroll-into-view="toView" scroll-top="0" @scroll="scrollTo" scroll-with-animation="true">
				<view class="rcon">
					<view v-for="(cats, idx) in sortCategorys" :key="idx" :id="'position' + idx">
						<view class="tit" @tap="goUrl" :data-id="cats.id" :data-title="cats.title">{{ cats.title }}
						</view>
						<view class="list dflex">
							<view v-for="(item, index) in cats.nodes" :key="index" class="li" @tap="goUrl"
								:data-id="item.id" :data-title="item.title">
								<image :src="item.icon" v-if="item.icon" lazy-load="true"></image>
								<view class="litext" :data-key="key" :style="'background-color:' + item.colors" v-else>
									{{ item.first }}
								</view>
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</block>
		<view class="ddflex" style="align-items: flex-start;margin-top: 30rpx;position: relative;" v-else>

			<scroll-view scroll-y="true" :class="'left savepadding' + (isFixed ? ' left-position' : '')"
				:style="'top:' + leftTop + 'rpx;min-height:'+((systems.windowHeight - topHeight)*systems.pxToRpxScale - 131)+'rpx;'">
				<view :class="'li ddflex ' + (current == -1 ? 'active' : '')" :data-current="-1" @tap="cateTab">全部服务
				</view>
				<view :class="'li ddflex ' + (current == -2 ? 'active' : '')" :data-current="-2" @tap="cateTab">爆品推荐
				</view>
				<view :class="'li ddflex ' + (current == -3 ? 'active' : '')" :data-current="-3" @tap="cateTab"
					v-if="config.is_show_group_btn == 1">团购套餐</view>
				<block v-for="(item, index) in categorys" :key="index">
					<view :class="'li ddflex ' + (current == index ? 'active' : '')" :data-current="index"
						:data-id="item.id" @tap="cateTab">
						{{ item.title }}
					</view>
				</block>
			</scroll-view>

			<view :class="'right' + (isFixed ? ' right-position' : '')">
				<view class="savepadding">
					<scroll-view scroll-X="true" :class="'tab' + (isFixed ? ' tab-position' : '')"
						:style="'top:' + systems.barHeight + 'rpx;'" v-if="cates.length > 0">
						<view :class="'li ' + (currents == -1 ? 'active' : '')" @tap="all">全部</view>
						<block v-for="(item, index) in cates" :key="index" v-if="!merchantId">
							<view :class="'li ' + (currents == index ? 'active' : '')" @tap="cateTabs"
								:data-currents="index" :data-id="item.id">
								{{ item.title }}{{ merchantId }}
							</view>
						</block>
					</scroll-view>
					<view class="sort">
						<block v-for="(item, index) in pageList" :key="index">
							<view class="li dflex">
								<view class="proimgs" @tap="toDetail" :data-id="item.id">
									<image :src="item.pic + '?x-oss-process=style/w160'" mode="aspectFit" class="proimg"
										lazy-load="true"></image>
									<image :src="picUrlss + 'shouqing.png'" class="shouqing" v-if="item.stock < 1">
									</image>
								</view>
								<view class="flex">
									<view class="proname" @tap="toDetail" :data-id="item.id">{{ item.title }}</view>
									<!-- <view :class="[item.brandName ? '' : 'nopronames', 'pronames']">{{ item.brandName ? item.brandName : '' }}</view> -->
									<view class="operate dflex">
										<view class="price">
											￥
											<text>{{ item.salePrice }}</text>
											<!-- <text class="vip" v-if="show_membership_price==1&&item.actualPrice < item.salePrice"><text class="sale">VIP</text><text class="members">{{item.actualPrice}}</text></text>
											<text class="vip"
												v-if="show_membership_price==1&&item.membersPrice<item.salePrice"><text
													class="sale">VIP</text><text
													class="members">{{item.membersPrice}}</text></text> -->
											<text class="del">
												<block
													v-if="item.marketPrice != 0 && item.marketPrice > item.salePrice">
													￥{{ item.marketPrice }}</block>
											</text>
										</view>
									</view>
									<view class="optt ddflex" style="justify-content: space-between;">
										<view>
											<view class="vip-news ddflex"
												v-if="show_membership_price == 1 && item.actualPrice < item.salePrice">
												<text class="vip-sale">会员价</text>
												<text class="vip-members">￥{{ item.actualPrice }}</text>
											</view>
											<view class="vip-news ddflex"
												v-if="show_membership_price == 1 && item.membersPrice < item.salePrice">
												<text class="vip-sale">会员价</text>
												<text class="vip-members">￥{{ item.membersPrice }}</text>
											</view>
										</view>
										<view class="add-cart">
											<!-- addShopCart -->
											<image src="/static/pages/images/jia2.png" @tap="toDetail"
												:data-id="item.id" :data-skuid="item.skuId" :data-index="index"
												:data-state="item.state"></image>
										</view>
									</view>
								</view>
							</view>
						</block>
						<view class="nodata nosp bgfff" v-if="show">
							<image :src="picUrlss + 'empty_sp.png'"></image>
							<text>暂无商品</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<cart :isUpdate="isUpdate"></cart>
		<foot channel="service" :isUpdate="isUpdate"></foot>
	</view>
</template>

<script>
	// pages/sort/sort.js
	//获取应用实例
	const app = getApp();
	const req = require('../../utils/request.js');
	const util = require('../../utils/util.js');
	let scrollDdirection = 0; // 用来计算滚动的方向
	import foot from '../../components/nav-bar/index';
	import cart from '../../components/shopping-cart/index';
	export default {
		data() {
			return {
				mainStyle: app.globalData.mainStyle,
				isUpdate: false,
				picUrlss: req.public.picUrls,
				systems: {},
				topHeight: 0,
				isFixed: false,
				isScroll: false,
				bottomBlankHeignt: app.globalData.isIPhoneX ? 68 : 0,
				categorys: [],
				//产品一级分类列表
				cates: [],
				//产品二级分类列表
				current: -1,
				currents: -1,
				page: 1,
				sort: false,
				sortCategorys: [],
				//产品一级分类列表
				selectTab: 0,
				scrollTop: 0,
				scrollHeight: 0,
				// 滚动视图的高度
				toView: 'position0',
				// 滚动视图跳转的位置
				scrollInfo: [],
				isload: true,
				// 自定义自己喜欢的颜色
				colorArr: ['#e83fa0', '#0cd4c5', '#b146f4', '#18c88b', '#227bfe', '#e8a52f', '#f78d58'],
				// 存储随机颜色
				randomColorArr: [],
				isUpdate: false, // 是否更新消息
				merchantId: '',
				id: '',
				show_membership_price: 0,
				Is_Store_Price_Stock: 0,
				pageList: [],
				_key: '',
				show: Boolean,
				cateid: '',
				merchant: {},
				label: [],
				couponList: [],
				config: {},
				leftTop: 0,

			};
		},

		components: {
			foot,
			cart
		},
		props: {},
		onLoad: async function(options) {
			// 如果是tab页面不往下执行跳转tab缓存页面
			await this.getConfig().then(async res => {
				if (req.isTabPage('service', this.config.solution_name)) {
					req.toTabBar('service', options)
					return false
				} else {
					this.onLoadPage(options)
				}
			});
		},

		async onShow() {
			// 如果是tab页面不往下执行跳转tab缓存页面
			await this.getConfig().then(async res => {
				if (req.isTabPage('service', this.config.solution_name)) {
					return false
				} else {
					this.onShowPage()
				}
			});
		},

		onReachBottom() {
			this.onReachBottomPage()
		},

		methods: {
			async onLoadPage(options) {
				// console.log(options);
				this.setData({
					current: options.current ? options.current : -1,
					merchantId: options.merchantId,
					id: options.id
				});
				await this.getConfig();
				uni.getSystemInfo({
					success: res => {
						this.setData({
							scrollHeight: res.windowHeight - (136 * res.windowWidth) / 750
						});
					}
				});
				if (this.sort) await this.sortCategory();
				else await this.category('0', 'categorys', options.id);
				console.log('this.topHeight?????', this.topHeight);
			},
			onShowPage() {
				this.setData({
					isUpdate: !this.isUpdate
				});
				this.merchant = req.getStorage('MERCHANT') ? req.getStorage('MERCHANT') : req.getStorage(
					'defaultMerchant');
				if (this.merchant.label) {
					this.label = this.merchant.label.split(',');
				}
				this.getCoupon();
			},
			onReachBottomPage() {
				this.page++;
				if (this.currents > -1) {
					this.getList(this.cateid);
				} else {
					if (this.current == -1) {
						this.getList();
					} else if (this.current == -2) {
						this.getList('', 'Recommend')
					} else {
						this.getList(this.id);
					}
				}
			},
			onPageScrollPage(e) {
				console.log('onPageScrollPage')
				const systemInfo = uni.getSystemInfoSync();
				let height = systemInfo.statusBarHeight + 44;
				if (e.scrollTop > height) {
					this.isScroll = true;
				} else {
					this.isScroll = false;
				}
				if (e.scrollTop > this.topHeight) {
					this.isFixed = true;
					this.leftTop = this.systems.barHeight;
				} else {
					this.isFixed = false;
					this.leftTop = 0;
				}
			},
			recieveCoupon(item, index) {
				if (item.userReceive > -1 && item.userCount >= item.userReceive) {
					return req.msg('超出优惠券领取限制，无法领取');
				}
				req.postRequest('/api/coupon/receive', {
					id: item.id
				}, res => {
					item.userCount++;
					req.msg('领取成功');
				});
			},
			goNavigation() {
				// #ifdef MP-WEIXIN
				let plugin = requirePlugin('routePlan');
				let key = req.public.mapLBSKEY; //使用在腾讯位置服务申请的key
				let referer = this.config.CONFIG_PROJECT_TITLE; //调用插件的app的名称
				// console.log("名称====" + referer);
				let endPoint = JSON.stringify({
					//终点
					'name': this.merchant.title,
					'latitude': this.merchant.lat,
					'longitude': this.merchant.lng
				});
				var url = 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint;
				uni.navigateTo({
					url: url
				});
				// #endif
				// #ifdef H5
				util.openMapNavigation(this.merchant.lat, this.merchant.lng, this.merchant.title, '');
				// #endif
			},
			getCoupon() {
				let form = {
					page: 1,
					limit: 5
				}
				req.getRequest('/api/coupon/list', form, data => {
					this.couponList = data;
				})
			},
			getConfig() {
				var _this = this;

				return new Promise((resolve, reject) => {
					req.getRequest('/api/config', {}, function(res) {
						this.config = res;
						if (res && res.Product_Sort_ico == 1)
							_this.setData({
								sort: true
							});

						if (res && res.show_membership_price == 1) {
							_this.setData({
								show_membership_price: 1
							});
						}

						if (res && res.Is_Store_Price_Stock == 1) {
							_this.setData({
								Is_Store_Price_Stock: 1
							});
						}

						resolve(res);
					});
				});
			},

			category(id, dataName, listId) {
				//产品分类
				let that = this;
				// console.log(id, dataName, listId);
				let from = {
					page: 1,
					size: 1000,
					pid: id
				};

				if (this.Is_Store_Price_Stock == 1) {
					if (req.getStorage('smallShop')) {
						from.merchantId = req.getStorage('smallShop').merchantDTO.id;
					} else if (req.getStorage('MERCHANT')) {
						from.merchantId = req.getStorage('MERCHANT').id;
					}
				}
				return new Promise((resolve, reject) => {
					req.getRequest('/api/category/list', from, res => {
						// console.log(res);
						let data = {};
						data[dataName] = res;

						if (id == 0) {
							if (listId) {
								this.getList(listId); // this.initCate(listId, 'cates');
							} else {
								this.getList();
								// this.initCate(res[0].id, 'cates');
								// that.setData({
								// 	id: res[0].id
								// });
							}
						}

						that.setData(data);
						// console.log(data);
						resolve();
					});
				})
			},

			async initCate(id, dataName) {
				await this.category(id, dataName); // if(this.data.merchantId){
				//   return false
				// }

				this.getList(id);
			},

			cateTab(e) {
				let current = e.currentTarget.dataset.current;
				let id = e.currentTarget.dataset.id;
				this.isload = true;
				if (current == -1) {
					this.cates = [];
					this.current = current;
					this.page = 1;
					this.pageList = [];
					this.getList();
				} else if (current == -2) {
					this.cates = [];
					this.current = current;
					this.page = 1;
					this.pageList = [];
					this.getList('', 'Recommend');
				} else if (current == -3) {
					uni.navigateTo({
						url: '/group/list/index'
					})
				} else {
					this.current = current;
					this.page = 1;
					this.pageList = [];
					this.categoryId = id;
					this.id = id;
					this.currents = -1;
					this.initCate(id, 'cates');
				}
			},

			getList(id, attr) {
				if (!this.isload) return false;
				this.isload = false;
				// console.log("====================")
				//产品列表
				let that = this;
				var startTime = new Date().getTime();
				// console.log(id);
				let from = {
					page: that.page,
					limit: 6,
				};
				if (id) from.categoryId = id;
				if (attr) from.attr = attr;

				if (this.Is_Store_Price_Stock == 1) {
					if (req.getStorage('MERCHANT')) {
						if (req.getStorage('MERCHANT').isDefault != 1) {
							from.merchantId = req.getStorage('MERCHANT').id;
						} else {
							delete from.merchantId;
						}
					}
				}
				if (from.page == 1) {
					uni.showLoading()
				}
				return new Promise((resolve, reject) => {
					req.getRequest('/api/product/list', from, res => {
						// console.log(new Date().getTime() - startTime);
						if (res && res.length >= from.limit) that.isload = true;
						if (that.page > 1) res = that.pageList.concat(res);
						if (res.length <= 0) {
							that.setData({
								show: true
							});
						} else {
							that.setData({
								show: false
							});
						}
						that.setData({
							pageList: res
						});
						uni.hideLoading();
						resolve();
					});
				})
			},

			cateTabs(e) {
				let current = e.currentTarget.dataset.currents;
				let id = e.currentTarget.dataset.id;
				this.setData({
					currents: current,
					page: 1,
					pageList: [],
					cateid: id
				});
				this.isload = true;
				this.page = 1;
				this.getList(id);
			},

			all() {
				// console.log(this.id); // this.getList(this.data.id)

				this.setData({
					currents: -1
				});
				this.initCate(this.id, 'cates');
			},

			toDetail(e) {
				let id = e.currentTarget.dataset.id; // let merchant = e.currentTarget.dataset.merchant
				// let shopId = e.currentTarget.dataset.shopid

				if (this.Is_Store_Price_Stock == 1) {
					if (req.getStorage('smallShop')) {
						var merchantId = req.getStorage('smallShop').merchantDTO.id;
						var shopId = req.getStorage('smallShop').id;
						app.globalData.openPage('product/detail/detail?id=' + id + '&merchantId=' + merchantId +
							'&shopId=' + shopId);
					} else if (req.getStorage('MERCHANT')) {
						if (req.getStorage('MERCHANT').isDefault != 1) {
							merchantId = req.getStorage('MERCHANT').id;
							app.globalData.openPage('product/detail/detail?id=' + id + '&merchantId=' + merchantId);
						} else {
							app.globalData.openPage('product/detail/detail?id=' + id);
						}
					}
				} else {
					app.globalData.openPage('product/detail/detail?id=' + id);
				} // if (!shopId) {
				//   app.openPage("product/detail/detail?id=" + id + "&merchantId=" + merchantId)
				// } else {
				//   app.openPage("product/detail/detail?id=" + id + "&merchantId=" + merchantId + "&shopId=" + shopId)
				// }
				// app.openPage("product/detail/detail?id=" + id)
			},

			addShopCart(e) {
				let that = this;
				let skuId = e.currentTarget.dataset.skuid;
				let id = e.currentTarget.dataset.id;
				let index = e.currentTarget.dataset.index;
				let pageList = that.pageList;
				let state = e.currentTarget.dataset.state; // let merchant = req.getStorage('MERCHANT');

				req.isLogin().then(success => {
					if (success) {
						let params = {
							skuId: skuId,
							quantity: 1,
							productId: id
						};

						if (req.getStorage('smallShop')) {
							params.merchantId = req.getStorage('smallShop').merchantDTO.id;
							params.shopId = req.getStorage('smallShop').id;
						} else if (req.getStorage('MERCHANT')) {
							params.merchantId = req.getStorage('MERCHANT').id;
						} // if(state!=1){
						//   return req.msg('您来晚了，商品已经下架')
						// }

						req.postRequest('/api/purchase/cart', params, res => {
							that.setData({
								isUpdate: !that.isUpdate
							});
							req.msg('加入购物车成功');
						});
					}
				});
			},

			sortCategory() {
				//产品分类
				let that = this;
				let params = {
					page: 1,
					size: 1000
				};

				if (this.Is_Store_Price_Stock == 1) {
					if (req.getStorage('smallShop')) {
						params.merchantId = req.getStorage('smallShop').merchantDTO
							.id; // params.shopId= req.getStorage('smallShop').id
					} else if (req.getStorage('MERCHANT')) {
						if (req.getStorage('MERCHANT').isDefault != 1) {
							params.merchantId = req.getStorage('MERCHANT').id;
						}
					}
				}
				return new Promise((resolve, reject) => {
					req.getRequest('/api/category/list', params, res => {
						if (res) {
							let array = res
								.filter(it => it.pid == 0)
								.map(item => {
									item.nodes = res
										.filter(ite => ite.pid == item.id)
										.map(mp => {
											mp.first = mp.title.substr(0, 1);
											let random = that.colorArr[Math.floor(Math.random() *
												that.colorArr.length)];
											mp.colors = random;
											return mp;
										});
									return item;
								});
							that.setData({
								sortCategorys: array
							});
							setTimeout(() => {
								that.lisenerScroll();
							}, 100);
						}
						resolve();
					});
				})
			},

			goUrl(e) {
				let id = e.currentTarget.dataset.id;
				let title = e.currentTarget.dataset.title;

				if (this.Is_Store_Price_Stock == 1) {
					if (req.getStorage('smallShop')) {
						var merchantId = req.getStorage('smallShop').merchantDTO.id;
						app.globalData.openPage('product/list/list?id=' + id + '&smallShop=true' + '&title=' + title);
					} else if (req.getStorage('MERCHANT')) {
						if (req.getStorage('MERCHANT').isDefault != 1) {
							merchantId = req.getStorage('MERCHANT').id;
							app.globalData.openPage('product/list/list?id=' + id + '&merchantId=' + merchantId +
								'&title=' + title);
						} else {
							app.globalData.openPage('product/list/list?id=' + id + '&title=' + title);
						}
					}
				} else {
					app.globalData.openPage('product/list/list?id=' + id + '&title=' + title);
				} // app.openPage(e.currentTarget.dataset.url)
			},

			toScrollView(e) {
				const {
					index
				} = e.currentTarget.dataset;
				this.setData({
					selectTab: index,
					toView: `position${index}`
				});
			},

			/**
			 * 获取右边每个分类的头部偏移量
			 */
			lisenerScroll() {
				// var _ts=this;

				/* setTimeout(() => {
					   _ts.setHeight(0);
					 }, 10000);*/
				// 获取各分类容器距离顶部的距离
				new Promise(resolve => {
					let query = uni.createSelectorQuery();
					var clength = this.sortCategorys.length;

					for (var k = 0; k < clength; k++) {
						query.select(`#position${k}`).boundingClientRect();
					}

					query.exec(function(res) {
						resolve(res);
					});
				}).then(res => {
					var categorys = this.sortCategorys;

					if (res.length == categorys.length) {
						categorys.forEach((item, index) => {
							item.offsetTop = res[index].top;
						});
						this.setData({
							scrollInfo: res,
							sortCategorys: categorys
						});
					}
				});
			},

			setHeight(k) {
				var _ts = this;

				if (_ts.isload) {
					return;
				}

				_ts.isload = false;
				let query = uni.createSelectorQuery();
				query.select(`#position${k}`).boundingClientRect();
				query.exec(function(res) {
					var _key = 'categorys[' + k + '].offsetTop';

					_ts.setData({
						[_key]: res[0].top
					});

					_ts.isload = true;
				});
			},

			/**
			 * 监听滚动条滚动事件
			 */
			scrollTo(e) {
				const scrollTop = e.detail.scrollTop; //滚动的Y轴

				const {
					selectTab,
					sortCategorys
				} = this;

				if (scrollDdirection < scrollTop) {
					// 向上滑动
					scrollDdirection = scrollTop; // 计算偏移位置
					//  console.log(current, scrollTop,categorys[current + 1].offsetTop);

					if (selectTab < sortCategorys.length - 1 && scrollTop >= sortCategorys[selectTab + 1].offsetTop) {
						// console.log("chua");
						this.setData({
							selectTab: selectTab + 1
						});
					}
				} else {
					// 向下滑动
					scrollDdirection = scrollTop; // 计算偏移位置

					if (selectTab > 0 && scrollTop < sortCategorys[selectTab].offsetTop && scrollTop > 0) {
						this.setData({
							selectTab: selectTab - 1
						});
					}
				}
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			closeUpdate() {
				this.isShowUpdate = false;
			},
			updateInfo(e) {
				this.isUpdateInfo = e;
			},
			updateMobile(e) {
				this.isUpdateMobile = e;
			}
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			console.log('systemInfo==', systemInfo)
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
				windowHeight: systemInfo.windowHeight,
				pxToRpxScale: pxToRpxScale
			};
			console.log('windowHeight==', systems.windowHeight)
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		mounted: function(e) {
			this.$nextTick(() => {
				let that = this;
				const query = wx.createSelectorQuery().in(this);
				query
					.select('.top-con')
					.boundingClientRect(function(res) {
						console.log('top-con==', res);
						that.topHeight = res.height;
						console.log('that.topHeight==', that.topHeight);
					})
					.exec();
			})
		},
		onPageScroll(e) {
			this.onPageScrollPage(e)
		}
	};
</script>
<style scoped>
	@import './index.css';
</style>