moxuan_takeaway_user/pages/index/index.vue

<template>
	<view class="content">
		<view @click="goAddress()" class="address text-bold">
			<view class="address_name">{{address?address:'选择地址'}}</view>
			<u-icon name="arrow-down" color="#333333" size="28"></u-icon>
		</view>
		<!-- #ifdef H5 -->
		<view class="bg-white">
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="bg-white" style="margin-top: 180rpx;">
				<!-- #endif -->
				<view class="padding-lr padding-top">
					<view class="flex align-center padding-left" @click="goNav('/pages/index/search/index')"
						style="border: 2rpx solid #FFAF5E;height: 80rpx;border-radius: 60rpx;">
						<u-icon name="search" size="46"></u-icon>
						<view class="flex-sub text-gray margin-left-sm">输入商家或商品名称</view>
						<view class="search-btn">搜索</view>
					</view>
				</view>

				<view class="padding-top padding-lr">
					<swiper class="swiper radius" :autoplay="true" interval="2000" duration="500" :circular="true"
						style="width: 100%;height: 280rpx;">
						<swiper-item v-for="(item,index) in bannerList" :key='index' @click="goNav(item.url)">
							<image :src="item.imageUrl" class="radius" style="width: 100%;height: 280rpx;"></image>
						</swiper-item>
					</swiper>
				</view>

				<view class="padding-lr radius" v-if="XCXIsSelect == '是'">
					<u-grid :col="5" :border="false">
						<u-grid-item v-for="(item,index) in gridData" :key='index' @tap="goDetail(item)">
							<image :src="item.imageUrl" style="width: 92rpx;height: 92rpx;border-radius: 92rpx;">
							</image>
							<view class="grid-text margin-top-sm">{{item.name}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<!-- 公告 -->
			<view class="flex justify-between align-center bg-white padding-bottom padding-lr radius bg-white"
				style="width: 100%;height: 100rpx;">
				<image src="../../static/images/index/gonggao.png" style="width: 140rpx;height: 50rpx;" mode=""></image>
				<view class="flex-sub margin-left-sm" style="height:82rpx;overflow: hidden;">
					<uni-notice-bar single speed="25" scrollable background-color="#fff" color="#000" :text="noticeList.value" />
				</view>
			</view>
			<view class="flex justify-between padding-lr bg-white" v-if="XCXIsSelect == '是'">
				<image src="../../static/images/index/jifen.png" @click="goNav('/my/integral/index')"
					style="width: 338rpx;height: 180rpx;" mode=""></image>
				<image src="../../static/images/index/renwu.png" @click="goNav('/my/task/index')"
					style="width: 338rpx;height: 180rpx;" mode=""></image>
			</view>

			<!-- <view class="padding-top padding-lr bg-white" v-if="!shopStatus == 1&&XCXIsSelect=='是'">
				<image src="../../static/images/index/banner.png" @click="goNav('/my/apply/index')"
					style="width: 100%;height: 170rpx;" mode=""></image>
			</view> -->
			<!-- 活动推荐 -->
			<view class="huodong flex justify-center" v-if="huodongList.length>0&&XCXIsSelect!='否'">
				<view class="huodong-box flex justify-center">
					<view class="huodong-box-c">
						<view class="huodong-box-c-title flex justify-between align-center">
							<view class="huodong-box-c-title-l flex align-center">
								<image src="../../static/images/index/hd.png" mode=""></image>
							</view>
							<view class="huodong-box-c-title-r">
								美食速达
							</view>
						</view>
						<view class="huodong-box-c-list">
							<swiper @change="swiperChange" :indicator-dots="false" display-multiple-items="3"
								:circular="true" style="height: 300rpx;" :autoplay="false" previous-margin="5"
								:interval="300" :duration="300">
								<swiper-item v-for="(item,index) in huodongList"
									style="border-radius: 28rpx;height: 320rpx;"
									@click="gotohuodong(item.name,item.id,item.imageUrl,item.url)">
									<view class="swiper-item flex justify-center flex-wrap align-center"
										style="width: 200rpx;height: 240rpx;background: linear-gradient(0deg, rgba(252, 210, 2, 0.8) 0%, rgba(252, 210, 2, 1) 100%);border-radius: 28rpx;"
										:style="currents==index?'height:260rpx;border-radius: 28rpx;':'margin-top:14rpx;'">
										<view class="flex justify-center align-center"
											:style="currents==index?'height:200rpx':''"
											style="width: 190rpx;height: 180rpx;border-radius: 28rpx;margin-top: 5rpx;">
											<image :src="item.imageUrl"
												style="width: 95%;height: 95%;border-radius: 20rpx;" mode="aspectFill">
											</image>
										</view>

										<view class=""
											style="width: 100%;text-align: center;font-size: 32rpx;color: white;font-weight: bold;padding-bottom: 10rpx;">
											{{item.name}}
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐商家 -->
			<view class="jxShop flex justify-center" v-if="jxlist.length>0&&XCXIsSelect!='否'">
				<view class="jxShop-box flex justify-center">
					<view class="jxShop-box-c">
						<view class="jxShop-box-c-title flex justify-between align-center">
							<view class="jxShop-box-c-title-l">
								推荐商家
							</view>
							<view class="jxShop-box-c-title-r flex align-center" @click="gotoList()">
								更多
								<u-icon name="arrow-right" color="#1E1F31" size="28"></u-icon>
							</view>
						</view>
						<view class="jxShop-box-c-list flex justify-between">
							<view class="jxShop-box-c-list-item"
								@click="goShopDet(item.shopId,item,item.shopActivityList)"
								v-for="(item,index) in jxlist" :key="index">
								<image :src="item.shopCover" mode="aspectFill"></image>
								<view class="jxShop-box-c-list-item-name">
									{{item.shopName}}
								</view>
							</view>
							<view class="jxShop-box-c-list-item" style="height: 0;">
							</view>
							<view class="jxShop-box-c-list-item" style="height: 0;">
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="flex justify-center"
				style="position: relative;background-color: #ffffff;padding-top: 20rpx;padding-bottom: 20rpx;">
				<view style="width: 686rpx;" class="flex justify-between align-center bg-white">
					<view :class="current==1?'select':''" @click="confirm(1)">综合排序</view>
					<view :class="current==3?'select':''" @click="confirm(3)">距离优先</view>
					<view :class="current==4?'select':''" @click="confirm(4)">销量优先</view>
					<view class="flex" @click="isShow = !isShow">
						<view class="flex align-center" style="margin: 0 auto;">
							<view :class="isShow?'select':''">筛选</view>
							<u-icon v-if="!isShow" name="arrow-down" size="28"></u-icon>
							<u-icon v-if="isShow" name="arrow-up" color="#FCD202" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="isShow"
					style="position: absolute;top: 50rpx;width: 100%;z-index: 10;background: rgba(0,0,0,.5);height: 100vh;"
					@click="isShow =false">
					<view class="padding-lr bg-white">
						<view class="flex justify-between align-center padding-tb-sm u-border-bottom"
							v-for="(item,index) in options4" :key='index' @click.stop="getSelect(item)">
							<view class="text-df" :class="item.select?'select':''">{{item.shopTypeName}}</view>
							<u-icon v-if="item.select" name="checkmark" color="#FCD202" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 活动筛选 -->
			<view class="hd flex justify-center" v-if="hdlist.length>0">
				<view class="hd-box">
					<scroll-view scroll-x="true" class="scroll-view_H">
						<view class="hd-box-item" :style="currenthd==index?'background-color:#fcd202;':''"
							@click="searchhd(index,item.id)" v-for="(item,index) in hdlist" :key="index">
							{{item.title}}
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="padding-lr">
				<view class="margin-tb-sm flex justify-between bg-white padding-sm radius"
					v-for="(item,index) in shopList" :key='index'
					@click="goShopDet(item.shopId,item,item.shopActivityList)">
					<image :src="item.shopCover[0]" class="radius" style="width: 160rpx;height: 160rpx;"></image>
					<view class=" margin-left-sm" style="width: 450rpx;">
						<view class=" flex flex-direction justify-between">
							<view class="text-lg text-bold text-black">{{item.shopName}}</view>
							<view class="flex align-center margin-top-xs" style="width: 100%;">
								<u-icon name="star-fill" color="#FD6416" size="28"></u-icon>
								<text class="text-lg" style=""> {{item.shopScore?item.shopScore:0}}</text>
								<text
									class="text-gray flex-sub margin-left-xs">销量{{item.shopSales?item.shopSales:0}}</text>
								<text class="text-gray margin-left-xs">{{item.errandTime}}分钟</text>
								<text class="text-gray margin-left-xs">{{item.distance}}</text>
							</view>
							<view class="text-gray margin-top-xs flex justify-between">
								<view>起送 ¥{{item.minimumDelivery}} 配送 ¥{{item.errandMoney?item.errandMoney:0}}</view>
								<view style="color: #FCD202;">{{item.autoSendOrder==1?'商家配送':'平台配送'}}</view>
							</view>
							<view class="text-gray margin-top-xs" v-if="item.businessHours&&item.lockHours">
								营业时间：{{item.businessHours}}-{{item.lockHours}}</view>
							<view class="flex margin-top-xs justify-between align-start" style="width: 100%;">
								<view class="flex flex-wrap align-center"
									style="width: 100%;height: 100%;overflow: hidden;">
									<!-- <view class="lable flex justify-center align-center" v-if="item.enableFullReductionFlag==1">
										不参与配送费满减</view> -->
									<view class="lable flex justify-center align-center" v-if="item.enableFullReductionFlag==0&&item.exemptMinMoney">
										满{{item.exemptMinMoney}}免配送费</view>
									<view v-for="(ite,ind) in item.shopActivityList" :key='ind' v-if="item.shopActivityList && ite.activityType!='1'">
										<view class="lable flex justify-center align-center" style="border-radius: 4rpx;background-color: #ffffff;color: red;box-sizing: border-box;">
											<text v-if="ite.activityType=='2'">时段</text>
											<text v-if="ite.activityType=='3'">满额</text>
											<text v-if="ite.activityType=='4'">全场</text>
											<text style="margin-left: 3px;">|</text>
											<text style="margin-left: 3px;">{{ite.activityName}}</text>
										</view>
										<!-- <view class="lable flex justify-center align-center"
											style="border-radius: 4rpx;border: 1rpx solid red;background-color: #ffffff;color: red;box-sizing: border-box;"
											>{{ite.activityName}}
										</view> -->
									</view>
									<view class="lable flex justify-center align-center" v-for="(ite,ind) in item.shopLable" :key='ind'
										v-if="item.shopLable">
										{{ite}}
									</view>
									<view class="lable flex justify-center align-center" v-if="item.couponList" style="border-radius: 4rpx;border: 1rpx solid red;background-color: #ffffff;color: red;box-sizing: border-box;" v-for="(it,ide) in item.couponList" :key="ide">
										<text>优惠券</text>
										<text style="margin-left: 3px;">|</text>
										<text style="margin-left: 3px;">满{{it.minMoney}}减{{it.money}}</text>
									</view>
									
								</view>
							</view>
						</view>
						<view class="flex margin-top-xs">
							<view v-for="(ite,ind) in item.goodsList" :key='ind'
								@click.stop="goDet(ite.goodsId,item.shopId)" style="width: 33%;">
								<image :src="ite.goodsCover" style="width: 120rpx;height: 120rpx;" class="radius"
									mode="">
								</image>
								<view class="u-line-1 text-df text-bold margin-top-xs">{{ite.goodsName}}</view>
								<view class="text-bold margin-top-xs" style="color: #FD6416;"> <text
										class="text-sm">¥</text> {{ite.goodsMoney}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <empty v-if="!shopList.length" ></empty> -->
			<view class="page-box" v-if="!shopList.length">
				<view class="centre" v-if="XCXIsSelect == '是'">
					<image src="../../static/images/empty.png" mode=""></image>
					<view class="tips">暂无内容</view>
				</view>
				<view class="centre" v-else-if="XCXIsSelect == '否'">
					<image style="width: 345px;height: 140px;" src="https://mxys.chuanghai-tech.com/img/20240315/12fa3c96351f4f10abae1ba251d4c284.jpg" mode=""></image>
				</view>
			</view>
			<!-- 打样提示 -->
			<view v-if="hintShow" class="hintPopul" @click.stop="hintShow=false">
				<view class="content_">
					<image src="../../static/images/index/shop.png" mode="" style="width: 200rpx;height: 180rpx;">
					</image>
					<view class="text-xl text-bold">店铺打烊啦</view>
					<view class="hintText margin-top-sm text-gray">现在店铺已经打烊了,营业时间</view>
					<view class="margin-top-xs text-gray margin-bottom">{{shop.businessHours}}-{{shop.lockHours}}</view>
					<view class="skuBtn" @click="hintShow=false">知道了</view>
				</view>
			</view>

			<u-popup v-model="Authorization" mode="center" close-icon="close-circle" close-icon-pos="top-right"
				close-icon-color="#8f9298" close-icon-size="50">
				<view class="contentview">
					<view class="title">隐私保护指引</view>
					<view class="des" @click="openPrivacyContract">
						在使用当前小程序服务之前，请仔细阅读<text
							style="color: #FF7F00;">{{privacyContractName}}</text>。如你同意{{privacyContractName}}，请点击“同意”开始使用。
					</view>
					<view class="btns">
						<button class="item reject" @click="exitMiniProgram">拒绝</button>
						<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
							@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
					</view>
				</view>
			</u-popup>
			<!-- 新人红包 -->

			<view class="hongbao" v-if="waimaiHB == '是' &&HBShow">
				<view style="width: 62%;margin: 0 auto;position: relative;">
					<view @click="HBShow=false"
						style="position: absolute;right: -10rpx;top: -10rpx;z-index: 999;;font-size: 60rpx;font-weight: bold;">
						X
					</view>
					 <!-- @click="takemoney()" ../../static/images/index/hb_bg.png-->
					<image :src="Tupian('/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240520171928.jpg')" class="hb_img"></image>
					<!-- <image src="../../static/images/index/hb_btn.png" class="hb_btn" @click="takemoney()"></image> -->
				</view>
			</view>
			
			<!-- 联系客服悬浮按钮区域 -->
			<view class="serviceBtn" @click="goChat">
				<img src="../../static/images/my/13.png" style="width: 60rpx;height: 60rpx;" mode="scaleToFill" />
				<view class="serviceBtn_text">
					联系客服
				</view>
			</view>
		</view>
</template>

<script>
	import empty from '@/components/empty.vue'

	import {
		requestAndroidPermission,
		gotoAppPermissionSetting
	} from '@/components/permission.js'
	export default {
		components: {
			empty
		},
		data() {
			return {
				Authorization: false,
				privacyContractName: '',
				lookShow: false,
				currenthd: -1,
				hdlist: [],
				activityId: '',
				currents: 1,
				HBShow: false,
				isShow: false,
				hintShow: false,
				address: '暂无地址',
				city:'',
				bannerList: [{
						"id": 3,
						"createTime": "2021-12-24 17:52:27",
						"name": "banner3",
						"imageUrl": "https://diancan.xianmxkj.com/file/uploadPath/2021/12/24/0bfdbabcde9c62b42e77aecdb583033b.png",
						"state": 1,
						"classify": 1,
						"url": "",
						"sort": 3,
						"describess": "banner3"
					},
					{
						"id": 45,
						"createTime": "2021-12-24 17:52:27",
						"name": "banner",
						"imageUrl": "https://diancan.xianmxkj.com/file/uploadPath/2021/12/24/589d72b40a690147a48854a3b7f88953.png",
						"state": 1,
						"classify": 1,
						"url": "",
						"sort": 1,
						"describess": ""
					},
				],
				gridData: [],
				page: 1,
				limit: 10,
				shopList: [],
				screen: '1',
				lng: '',
				lat: '',
				shopType: '1',
				shopTypeList: [{
					id: '0',
					shopTypeName: "全部"
				}],
				userId: '',
				src1: '../../static/images/index/xia.png',
				noticeList: {},
				show: false,
				typeShow: false,
				current: 1,
				sort: 1,
				fabuclassifyId: '',
				typeName: '全部',
				fabuclassifyName: '筛选',
				shopTypeId: '',
				value1: 0,
				value2: 0,
				value3: 0,
				value4: 0,
				options1: [{
					label: '综合排序',
					value: 1,
				}],
				options2: [{
					value: '3',
					label: "距离优先"
				}],
				options3: [{
					value: '4',
					label: "销量优先"
				}],
				options4: [{
					id: '',
					select: true,
					shopTypeName: "全部"
				}],
				defaultIndex: [0, 0, 0, 0],
				filterData: [
					[{
						label: '综合排序',
						value: '1',
					}],
					[{
						label: '距离优先',
						value: '3',
					}],
					[{
						label: '销量优先',
						value: '4',
					}],
					[{
							label: '不限性别',
							value: '0',
						},
						{
							label: '限男生',
							value: 1,
						},
						{
							label: '限女生',
							value: 2,
						}
					],

				],
				shopStatus: '',
				shop: {},
				title: '综合排序',
				title1: '距离优先',
				title2: '销量优先',
				title3: '筛选',
				XCXIsSelect: '否',
				arr: [],
				showModal: true,
				shopId: '',
				totalCount: 0,
				newUserFlagWm: 2,
				waimaiHB: '否',
				tuiguang: '',
				tuiguangImg: '',
				huodongList: [],
				jxlist: [],
				huoList:[],//商户参与的活动
				token:""
			}
		},
		onLoad(e) {
			let that = this
			that.token = that.$queue.getData("token")
			that.userId = uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
			that.getZiZhi();
			that.getBannerList()
			that.getGridList()
			that.getShopType()
			that.getNoticeList()
			// that.getHuoDongList() //活动列表
			that.getHuoDList() //活动轮播

			that.gethdlist();
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				highAccuracyExpireTime: 100,
				success: function(res) {
					that.lat = res.latitude;
					that.lng = res.longitude;
					that.defaultAddress()
					// that.getShopList()
				},
				fail(e) {
					uni.showModal({
						title: '温馨提示',
						content: '您的定位权限未开启，请开启后再来刷新操作吧！',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确认',
						success: res => {
							if (res.confirm) {
								// #ifdef MP-WEIXIN
								uni.openSetting({ // 打开设置页
									success(rea) {
										console.log(rea.authSetting)
									}
								});
								// #endif
								// #ifdef APP-PLUS
								gotoAppPermissionSetting()
								// #endif
							}
						}
					});
				}
			});
			console.log(that.lat, that.lng, '经纬度')


			// #ifdef MP-WEIXIN

			if (e.scene) {
				const scene = decodeURIComponent(e.scene);
				let list = scene.split(',');
				let shopId;

				if (list.length > 0) {
					shopId = list[0]; //获取shopid
				}
				// uni.setStorageSync('shopId',e.shopId)
				console.log(e, '首页')
				console.log(scene, '商铺id')
				console.log(shopId, 'shopId')

				if (shopId) {
					that.shopId = shopId
				}

				if (!that.userId) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return;
				}

				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/index/shop/index?shopId=' + that.shopId
					})
				}, 100)
			} else if (e.orderId) {

				uni.setStorageSync('orderId', e.orderId)
				if (!that.userId) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return;
				}
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/index/shop/goodsList?shopId=' + e.shopId
					})
				}, 100)
			}

			try {
				wx.getPrivacySetting({
					success: res => {
						console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
						if (res.needAuthorization) {
							that.privacyContractName = res.privacyContractName;
							// this.$refs.popusAuthorization.open();
							that.Authorization = true;
						}
					},
					fail: () => {},
					complete: () => {},
				})
			} catch (e) {
				//TODO handle the exception
			}
			// #endif
		},
		onShow() {
			let that = this
			that.token = that.$queue.getData('token')
			that.$Request.get('/app/common/type/264').then(res => {
				if (res.code == 0) {
					// #ifdef MP-WEIXIN
					that.XCXIsSelect = res.data.value;
					that.$queue.setData('XCXIsSelect', res.data.value);
					that.$queue.setData('shangxianSelect', res.data.value);
					// #endif
					// #ifndef MP-WEIXIN
					that.$queue.setData('XCXIsSelect', '是');
					that.$queue.setData('shangxianSelect', '是');
					that.XCXIsSelect = '是'
					// #endif

				}
			});
			that.getHuoDList() //活动轮播
			that.gethdlist();
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: function(res) {
					console.log(res)
					that.lat = res.latitude;
					that.lng = res.longitude;
					that.defaultAddress()
				}
			});
			that.userId = uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''

			that.lng = uni.getStorageSync('lng') ? uni.getStorageSync('lng') : that.lng
			that.lat = uni.getStorageSync('lat') ? uni.getStorageSync('lat') : that.lat
			console.log(that.userId, '我的id')
			// if (this.lng && this.lat) {
			// that.defaultAddress()
			that.getjxShop(); //精选商家
			// }

			if (that.userId) {
				that.getUserInfo()

				that.$Request.getT('/app/common/type/266').then(res => { //订单取消通知
					if (res.code == 0) {
						if (res.data && res.data.value) {
							that.arr.push(res.data.value)
						}
					}
				})
				that.$Request.getT('/app/common/type/269').then(res => { //订单状态通知
					if (res.code == 0) {
						if (res.data && res.data.value) {
							that.arr.push(res.data.value)
						}
					}
				})
				// #ifdef MP-WEIXIN
				if (that.showModal) {
					that.openMsg()
				}
				// #endif
			}
			// this.getShopList()

		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.tuiguang,
				path: '/pages/index/index',
				imageUrl: this.tuiguangImg,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.tuiguang,
				path: '/pages/index/index',
				imageUrl: this.tuiguangImg,
			}
		},
		methods: {
			goChat() {
				if (this.token) {
					uni.navigateTo({
						url: '/my/setting/chat'
					})
				} else {
					this.bindlogin()
				}
			},
			bindlogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			// 打开隐私协议页面
			openPrivacyContract() {
				let that = this;
				wx.openPrivacyContract({
					fail: () => {
						that.$queue.showToast('遇到错误无法打开！');
					}
				})
			},
			// 拒绝隐私协议
			exitMiniProgram() {
				// 直接退出小程序
				wx.exitMiniProgram()
			},
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				// this.$refs.popusAuthorization.close();
				this.Authorization = false;
				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					highAccuracyExpireTime: 100,
					success: function(res) {
						console.log(res)
						that.lat = res.latitude;
						that.lng = res.longitude;
						that.defaultAddress()
						// that.getShopList()
					},
					fail(e) {
						uni.showModal({
							title: '温馨提示',
							content: '您的定位权限未开启，请开启后再来刷新操作吧！',
							showCancel: true,
							cancelText: '取消',
							confirmText: '确认',
							success: res => {
								if (res.confirm) {
									// #ifdef MP-WEIXIN
									uni.openSetting({ // 打开设置页
										success(rea) {
											console.log(rea.authSetting)
										}
									});
									// #endif
									// #ifdef APP-PLUS
									gotoAppPermissionSetting()
									// #endif
								}
							}
						});
					}
				});
			},
			selectShow() {
				this.lookShow = !this.lookShow
			},
			//筛选活动
			searchhd(index, activityId) {
				if (index == this.currenthd) {
					this.page=1
					this.currenthd = -1
					this.activityId = '';
					this.shopList =[]
					this.getShopList()
				} else {
					console.log('eww','ll')
					this.page=1
					this.currenthd = index;
					this.activityId = activityId;
					this.shopList =[]
					// this.getShopList()
					this.huoDListSh()
				}
			},
			//获取所有活动
			gethdlist() {
				// this.$Request.get("/app/activityManage/getActivityList").then(res => {
				let data={
					page:1,
					limit:10,
				}
				this.$Request.get('/app/activity/page').then(res => {
					if (res.code == 0) {
						var total=res.totalCount
						let data={
							page:1,
							limit:total,
						}
						this.$Request.get('/app/activity/page').then(res => {
							if (res.code == 0) {
								res.data.list.map((item, index) => {
									if (item.id == 14) {
										res.data.list.splice(index, 1)
									}
								})
								this.hdlist = res.data.list
							}
						});
					}
				});
			},
			// 获取精选商家
			getjxShop() {
				let data = {
					activityId: 14,
					page: 1,
					limit: 4,
					lat: this.lat,
					lng: this.lng,
				}
				this.$Request.get("/app/activityManage/getShoActivityShopList", data).then(res => {
					if (res.code == 0) {
						this.jxlist = res.data.records
					}
				});
			},
			gotoList() {
				uni.navigateTo({
					url: '/running/huodong/list?activityId=14'
				})
			},
			gotohuodong(name,id,imageUrl, url) {
				uni.navigateTo({
					url: url + '?activityTitle=' + name+'&activityId='+id+'&imageUrl='+imageUrl
				})
			},
			// 获取活动轮播图
			getHuoDList() {
				let data = {
					classify: 12
				}
				this.$Request.get("/app/banner/selectBannerList", data).then(res => {
					if (res.code == 0) {
						let arr = []
						arr = res.data
						arr.map((item, index) => {
							if (item.name == '推荐商家') {
								arr.splice(index, 1)
							}
						})
						this.huodongList = arr
					}
				});
			},
			swiperChange(e) {
				if (this.huodongList.length - 1 == e.detail.current) {
					this.currents = 0
				} else {
					this.currents = e.detail.current + 1
				}
				// this.moneys = this.swiper[this.currents].mysteryBoxTypePrice
				// this.boxType = this.swiper[this.currents].mysteryBoxTypeId
				// this.getgoodsList(this.swiper[this.currents].mysteryBoxTypeId)
			},
			//活动列表
			getHuoDongList() {
				// huodongList
				// 
				// this.$Request.getT('/app/activityManage/getActivityList').then(res => {
				let data={
					page:1,
					limit:10,
				}
				this.$Request.getT('/app/activity/page',data).then(res => {
					if (res.code === 0) {
						var total=res.totalCount
						let data={
							page:1,
							limit:total,
						}
						this.$Request.getT('/app/activity/page',data).then(res => {
							if (res.code === 0) {
								this.huodongList = res.data.list
							}
						});
					}
				});
			},
			// 分享文案和图片
			getZiZhi() {
				this.$Request.getT('/app/common/type/239').then(res => {
					if (res.code === 0) {
						this.tuiguang = res.data.value;
					}
				});
				this.$Request.getT('/app/common/type/238').then(res => {
					if (res.code === 0) {
						this.tuiguangImg = res.data.value;
					}
				});
			},
			// 红包
			takemoney() {
				this.$Request.getT('/app/userinfo/getNewUserRedPacketWm').then(res => {
					console.log(res.code)
					if (res.code == 0) {
						this.HBShow = false
						this.getUserInfo()
						setTimeout(function() {
							uni.navigateTo({
								url: '/my/coupon/index'
							})
						}, 100)
					}
				});
			},
			getSelect(e) {
				this.options4.forEach(res => {
					if (res.id == e.id) {
						res.select = true
						this.page = 1
						this.shopTypeId = e.id
						this.getShopList();
						this.isShow = false
					} else {
						res.select = false
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				this.$Request.getT('/app/user/selectUserMessage').then(res => {
					console.log(res)
					if (res.code == 0) {
						this.shopStatus = res.data.shopStatus
						this.newUserFlagWm = res.data.newUserFlagWm
						if (this.newUserFlagWm == 1) {
							this.waimaiHB = this.$queue.getData('waimaiHB');
							if (this.waimaiHB === '是') {
								this.HBShow = true
							}
						} else {
							this.HBShow = false
						}
					}
				});
			},
			// 获取公告
			getNoticeList() {
				let data = {
					page: 1,
					limit: 100
				}
				this.$Request.get("/app/common/type/432", data).then(res => {
					if (res.code == 0) {
						this.noticeList = res.data
						// console.log(this.noticeList,999);
					}
				});
			},
			confirm(e) {
				this.isShow = false
				this.page = 1
				this.current = e;
				this.getShopList();
			},

			// 获取轮播图
			getBannerList() {
				let data = {
					classify: 1
				}
				this.$Request.get("/app/banner/selectBannerList", data).then(res => {
					if (res.code == 0) {
						this.bannerList = res.data
					}
				});
			},
			// 获取轮播图
			getGridList() {
				let data = {
					classify: 4
				}
				this.$Request.get("/app/banner/selectBannerList", data).then(res => {
					if (res.code == 0) {
						this.gridData = res.data
					}
				});
			},
			// 商户类型
			getShopType() {
				this.$Request.getT('/app/shoptype/selectShopTypeList').then(res => {
					if (res.code == 0) {
						// this.shopTypeList = [...this.shopTypeList ,...res.data]

						res.data.forEach(res => {
							res.select = false
						})
						this.options4 = [...this.options4, ...res.data]
						console.log(this.options4, '+++++++++++++++++++')
					}
				})
			},
			//活动下的商户
			huoDListSh(){
				let data = {
					page: this.page,
					limit: this.limit,
					screen: this.current,
					shopTypeId: this.shopTypeId,
					lng: this.lng,
					lat: this.lat,
					// activityId: this.activityId,
					city:this.city,
				}
				this.$Request.getT('/app/goods/selectShop', data).then(res => {
					if (res.code == 0) {
						var totalCount=res.data.totalCount
						let data = {
							page: this.page,
							limit: totalCount,
						}
						console.log(data,this.activityId)
						this.$Request.getT(`/app/activity-shop/activity-shop-page/${this.activityId}`, data).then(res => {
							console.log(res,'hhhhhh2h')
							if (res.code == 0) {
								var huodongList=[]
								huodongList=res.data.list
								let data = {
									page: this.page,
									limit: totalCount,
									screen: this.current,
									shopTypeId: this.shopTypeId,
									lng: this.lng,
									lat: this.lat,
									// activityId: this.activityId,
									city:this.city,
								}
								this.$Request.getT('/app/goods/selectShop', data).then(res => {
									if (res.code == 0) {
										this.totalCount = res.data.totalCount
										res.data.list.forEach(ret => {
											if (ret.distance > 1000) {
												ret.distance = Number((ret.distance / 1000)).toFixed(2) + "km"
											} else {
												if (ret.distance == 0) {
													ret.distance = "0m";
												} else {
													ret.distance = Number(ret.distance).toFixed(1) + "m";
												}
											}
								
											ret.shopScore = ret.shopScore.toFixed(1)
											ret.shopLable = ret.shopLable ? ret.shopLable.split(',') : ''
											ret.shopCover = ret.shopCover ? ret.shopCover.split(',') :
												'../../static/logo.png'
											ret.errandTime = Math.round(ret.errandTime)
										})
										var shopList=[]
										shopList=res.data.list
										for (let i = 0; i < shopList.length; i++) {
										  let item1 = shopList[i];
										  // 内层循环遍历array2
										  for (let j = 0; j < huodongList.length; j++) {
										    let item2 = huodongList[j];
										    // 检查id是否相等
										    if (item1.shopId === item2.shopId) {
										      // 如果相等，将对象添加到matchedArray
										      this.shopList.push(item1);
										      // 如果只需要添加一次，则可以在这里退出内层循环
										      // break;
										    }
										  }
										}
										// for(var i=0;i<shopList.length;i++){
										// 	let item1 = shopList[i];
										// 	for(var j=0;j<huodongList.length;j++){
										// 		let item2 = huodongList[j];
										// 		console.log(shopList[i].shopId==huodongList[j].shopId,'oppoo')
										// 		if(item1.shopId==item2.shopId){
										// 			this.shopList.push(item1)
										// 			console.log(this.shopList,'pp')
										// 			// return一次就退出
										// 		}else{
										// 			this.shopList =[]
										// 		}
										// 	}
										// }
									}
								})
							}
						})
					}
					uni.stopPullDownRefresh();
					uni.hideLoading()
				})
				
			},
			// 商户列表
			getShopList() {
				console.log(this.city,'city')
				uni.setStorageSync('lng', this.lng);
				uni.setStorageSync('lat', this.lat);
				let data = {
					page: this.page,
					limit: this.limit,
					screen: this.current,
					shopTypeId: this.shopTypeId,
					lng: this.lng,
					lat: this.lat,
					// activityId: this.activityId,
					city:this.city,
				}
				console.log(data,'jjj')
				this.$Request.getT('/app/goods/selectShop', data).then(res => {
					console.log(res,'hhhhhh')
					if (res.code == 0) {
						this.totalCount = res.data.totalCount
						res.data.list.forEach(ret => {
							if (ret.distance > 1000) {
								ret.distance = Number((ret.distance / 1000)).toFixed(2) + "km"
							} else {
								if (ret.distance == 0) {
									ret.distance = "0m";
								} else {
									ret.distance = Number(ret.distance).toFixed(1) + "m";
								}
							}

							ret.shopScore = ret.shopScore.toFixed(1)
							ret.shopLable = ret.shopLable ? ret.shopLable.split(',') : ''
							ret.shopCover = ret.shopCover ? ret.shopCover.split(',') :
								'../../static/logo.png'
							ret.errandTime = Math.round(ret.errandTime)
						})

						if (this.page == 1) {
							this.shopList = res.data.list
						} else {
							this.shopList = [...this.shopList, ...res.data.list]
						}
						
						console.log(this.shopList)
					}
					uni.stopPullDownRefresh();
					uni.hideLoading()
				})
			},
			goNav(url) {
				console.log(url)
				if (this.userId) {
					if (uni.getStorageSync('sendMsg')) {
						console.log('授权+1')
						wx.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								console.log(JSON.stringify(re), 111111111111)
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									// console.log(re)
								}
							},
							fail: (res) => {
								// console.log(res)
							}
						})
					}
					uni.navigateTo({
						url
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			},
			goShopDet(url, e,shuzu) {
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								// console.log(re)
							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
				}
				this.shop = e
				// console.log(e, '当前店铺')

				let myDate = new Date();
				let hours = myDate.getHours();
				let minute = myDate.getMinutes();
				let openTime = this.shop.businessHours.split(':')[0] //开始小时
				let openTime1 = this.shop.businessHours.split(':')[1] //开始分钟
				let closeTime = this.shop.lockHours.split(':')[0] //结束小时
				let closeTime1 = this.shop.lockHours.split(':')[1] //结束分钟.
				console.log(hours)
				console.log(minute)
				console.log(openTime)
				console.log(openTime1)

				console.log(closeTime)
				console.log(closeTime1)
				console.log(minute >= closeTime1)
				if (hours < openTime) {
					this.hintShow = true
					return
				} else if (hours == openTime && minute < openTime1) {
					this.hintShow = true
					return
				} else if (hours > closeTime) {
					this.hintShow = true
					return
				} else if (hours == closeTime && minute >= closeTime1) {
					this.hintShow = true
					return
				}

				console.log(url)
				let items = encodeURIComponent(JSON.stringify(shuzu));
				if (this.userId) {
					uni.navigateTo({
						url:'/pages/index/shop/index?shopId='+url+'&huoListss='+items
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			},
			defaultAddress() {
				if (uni.getStorageSync('city')) {
					this.address = uni.getStorageSync('city')
					this.lng = uni.getStorageSync('lng')
					this.lat = uni.getStorageSync('lat')

					this.page = 1
					this.getShopList()
					return
				}
				let data = {
					page: 1,
					limit: 1000
				}
				this.$Request.get('/app/address/selectAddressList', data).then(res => {
					if (res.code == 0 && res.data.list.length) {
						this.address = res.data.list[0].addressDetail
						this.city=res.data.list[0].city
						this.lng = res.data.list[0].lng
						this.lat = res.data.list[0].lat
						res.data.list.forEach(res => {
							if (res.addressDefault) {
								this.address = res.addressDetail
								this.city=res.city
								this.lng = res.lng
								this.lat = res.lat
							}
						})
						console.log('选择的经纬度', this.lng, this.lat)

					} else {
						let data = {
							lat: this.lat,
							lng: this.lng
						}
						this.$Request.get("/app/address/selectCity", data).then(res => {
							
							if (res.code == 0) {
								this.address = res.data.city
								// console.log(3333333333)
								// this.getShopList()
							}
						});
					}
					this.page = 1
					this.getShopList()
				})
			},
			goAddress() {
				let userId = this.$queue.getData('userId');
				if (!userId) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/index/selectCampus'
				})
			},
			// 查看金刚区详情
			goDetail(item) {
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1',this.arr)
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								// console.log(re)
							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
				}

				let userId = this.$queue.getData('userId');
				if (!userId) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				//如果是小程序跳转就是设置这个
				if (item.describes) {
					uni.navigateToMiniProgram({
						appId: item.describes,
						path: item.classifyUrl,
						success: res => {
							// 打开成功
							console.log("打开成功", res);
						},
						fail: err => {
							console.log(err);
						}
					})
					return
				}
				uni.navigateTo({
					url: item.url
				});

			},
			// 开启订阅消息
			openMsg() {
				console.log('订阅消息')
				var that = this
				uni.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(ret) {
						console.log(ret.subscriptionsSetting, '------------------')
						// if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
						if (ret.subscriptionsSetting.itemSettings) {
							uni.setStorageSync('sendMsg', true)
							uni.openSetting({ // 打开设置页 
								success(rea) {
									console.log(rea.authSetting)
								}
							});
						} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							console.log(99999)
							uni.setStorageSync('sendMsg', false)
							uni.showModal({
								title: '提示',
								content: '为了更好的体验,请绑定消息推送',
								confirmText: '确定',
								cancelText: '取消',
								success: function(res) {
									if (res.confirm) {
										console.log(that.arr)
										wx.requestSubscribeMessage({
											tmplIds: that.arr,
											success(re) {
												console.log(JSON.stringify(re),
													'++++++++++++++')
												var datas = JSON.stringify(re);
												if (datas.indexOf("accept") != -1) {
													console.log(re)
													uni.setStorageSync('sendMsg', true)
												}
											},
											fail: (res) => {
												console.log(res)
											}
										})
										uni.setStorageSync('sendMsg', true)
										console.log('确认')
										that.showModal = false
									} else if (res.cancel) {
										console.log('取消')
										uni.setStorageSync('sendMsg', false)
										that.showModal = true
									}
								}
							})
						}
					}
				})
			},
			// 跳转商品详情
			goDet(goodsId, shopId) {
				let userId = this.$queue.getData('userId');
				if (!userId) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/index/shop/goodsDet?goodsId=' + goodsId + '&shopId=' + shopId + '&orderType=2'
				})
			},

		},
		onReachBottom: function() {
			console.log('当前长度',this.shopList.length,this.totalCount)
			
			if (this.shopList.length < this.totalCount) {
				
				if(this.activityId==''){
					wx.showLoading({
				   title: '加载中...',
				   mask: true, // 是否显示透明蒙层，防止触摸穿透
				 })
					this.page = this.page + 1;
					this.getShopList()
				}
				
			} else {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			}
		},
		onPullDownRefresh: function() {
			
			if(this.activityId==''){
				this.page = 1;
				this.getShopList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.privacy {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 9999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contentview {
		width: 632rpx;
		padding: 48rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
	}

	.contentview .title {
		text-align: center;
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.contentview .des {
		font-size: 26rpx;
		color: #666;
		margin-top: 40rpx;
		text-align: justify;
		line-height: 1.6;
	}

	.contentview .des .link {
		color: #07c160;
		text-decoration: underline;
	}

	button::after {
		border: none;
	}

	.btns {
		margin-top: 48rpx;
		display: flex;
	}

	.btns .item {
		justify-content: space-between;
		width: 244rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		box-sizing: border-box;
		border: none;
	}

	.btns .reject {
		background: #f4f4f5;
		color: #909399;
	}

	.btns .agree {
		background: #07c160;
		color: #fff;
	}

	.hd {
		width: 100%;
		height: auto;
		// margin-top: 20rpx;
		background-color: #ffffff;

		.hd-box {
			width: 686rpx;
			height: 100%;
			// padding-top: 20rpx;
			padding-bottom: 20rpx;

			.scroll-view_H {
				width: 100%;
				white-space: nowrap;
			}

			.hd-box-item {
				display: inline-block;
				padding: 10rpx 20rpx 10rpx 20rpx;
				background-color: #F7F5F6;
				font-size: 24rpx;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}

		}
	}

	.select {
		color: #FCD202;
	}

	.jxShop {
		width: 100%;
		height: 320rpx;
		background-color: #ffffff;

		.jxShop-box {
			margin-top: 20rpx;
			width: 686rpx;
			height: 300rpx;
			// background-color: #F7F5F6;
			// background: linear-gradient(rgba(252,210,2,0.4) 1%,#fffdf2 100%);
			// background: linear-gradient(#ffee99 1%,#fffbe5 100%);
			background: #fff8d3;
			border-radius: 16rpx;

			.jxShop-box-c {
				width: 626rpx;
				height: 100%;
			}

			.jxShop-box-c-title {
				width: 100%;
				margin-top: 20rpx;
			}

			.jxShop-box-c-title-l {
				color: #1A1A1A;
				font-size: 34rpx;
				font-weight: 800;
			}

			.jxShop-box-c-title-r {
				color: #1E1F31;
				font-size: 26rpx;
				font-weight: 500;
			}

			.jxShop-box-c-list {
				width: 100%;
				height: 190rpx;
				margin-top: 20rpx;
			}

			.jxShop-box-c-list-item {
				width: 149rpx;
				height: 100%;
				background: #ffffff;
				border-radius: 8px;

				image {
					width: 100%;
					height: 114rpx;
					border-radius: 8rpx 8rpx 0 0;
				}

				.jxShop-box-c-list-item-name {
					width: 149rpx;
					text-align: center;
					font-size: 28rpx;
					color: #1A1A1A;
					font-weight: bold;
					margin-top: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding-left: 10rpx;
					padding-right: 10rpx;
				}
			}
		}
	}

	.huodong {
		width: 100%;
		height: 380rpx;
		// margin-top: 20rpx;
		background-color: #ffffff;

		.huodong-box {
			margin-top: 20rpx;
			width: 686rpx;
			height: 360rpx;
			// background-color: #D4FCE2;
			background-color: #fff8d3;
			border-radius: 24rpx;

			.huodong-box-c {
				width: 646rpx;
				height: 100%;
			}

			.huodong-box-c-title {
				margin-top: 20rpx;
			}

			.huodong-box-c-title-l {
				// color: #34CD40;
				color: rgba(252, 210, 2, 1);
				font-size: 44rpx;
				font-weight: 600;

				image {
					width: 276rpx;
					height: 65rpx;
				}

				// font-style: italic;
			}

			.huodong-box-c-title-r {
				// background: linear-gradient(114deg, rgba(252, 210, 2, 0.2) 0%, rgba(252, 210, 2, 0.5) 50%, rgba(252, 210, 2, 1) 100%);
				background-color: #FFE3C7;
				border-radius: 40rpx;
				color: #FF8D1A;
				font-size: 26rpx;
				font-weight: 600;
				padding: 10rpx 20rpx;
			}

			.huodong-box-c-list {
				width: 100%;
				height: 320rpx;
				margin-top: 10rpx;
			}

			.huodong-box-c-list-l {
				width: 190rpx;
				height: 250rpx;
				background: linear-gradient(0deg, #34CD41 0%, #48DB19 100%);
				border-radius: 24rpx;
			}

			.huodong-box-c-list-l-t {
				width: 180rpx;
				height: 240rpx;
				border-radius: 24rpx;
				background-color: #ffffff;
				margin-top: 5rpx;
			}

			.huodong-box-c-list-l-t>image {
				width: 160rpx;
				height: 170rpx;
				margin-top: 10rpx;
				border-radius: 24rpx;
			}

			.huodong-box-c-list-l-t-b {
				width: 100%;
				height: 56rpx;
				background-color: #E0F7F1;
				color: #36CF3D;
				font-size: 30rpx;
				border-radius: 24rpx;
			}

			.huodong-box-c-list-l-t-t {
				width: 100%;
				text-align: center;
				font-size: 36rpx;
				// font-weight: bold;
				font-weight: 600;
				color: #ffffff;
			}

			.huodong-box-c-list-c {
				width: 220rpx;
				height: 280rpx;
				background: linear-gradient(0deg, #34CD41 0%, #48DB19 100%);
				border-radius: 24rpx;
			}

			.huodong-box-c-list-c-t {
				width: 211rpx;
				height: 270rpx;
				border-radius: 24rpx;
				background-color: #ffffff;
				margin-top: 5rpx;
			}

			.huodong-box-c-list-c-t>image {
				width: 186rpx;
				height: 190rpx;
				margin-top: 10rpx;
				border-radius: 24rpx;
			}

			.huodong-box-c-list-c-b {
				width: 100%;
				height: 70rpx;
				background-color: #E0F7F1;
				color: #36CF3D;
				font-size: 30rpx;
				border-radius: 24rpx;
			}

			.huodong-box-c-list-c-t-t {
				width: 100%;
				text-align: center;
				font-size: 36rpx;
				// font-weight: bold;
				font-weight: 600;
				color: #ffffff;
			}
		}
	}

	.search-btn {
		width: 132rpx;
		height: 80rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 80rpx;
		background: #FFAF5E;
		border-radius: 36px;
	}

	.address {
		width: 100%;
		background-color: #FFAF5E;
		display: flex;
		align-items: center;
		// #ifndef H5
		position: fixed;
		top: 0;
		height: 180rpx;
		// line-height: 260rpx;
		padding: 80rpx 34rpx 0rpx;
		// #endif

		// #ifdef H5
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 34rpx;
		// #endif
		font-size: 32rpx;

		z-index: 999;

		.address_name {
			max-width: 90%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}



	.lable {
		border: 1rpx solid #FFE6D9;
		height: 40rpx;
		padding: 0 14rpx;
		background: #FFE6D9;
		border-radius: 4rpx;
		font-weight: 500;
		color: #FD6416;
		font-size: 20rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.tabs {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tabs_name {

		flex: 1;
		/* display: inline-block; */
		text-align: center;
		margin-bottom: 30rpx 0;
		position: relative;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	.tabs_name view {
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.tabs_2 {
		/* width: 30%; */
	}

	.actives {
		color: #007AFF;
	}

	.tabsicon {
		position: absolute;
		top: 0;
		right: 22rpx;
		width: 20rpx;
		height: 40rpx;
		z-index: 1;
	}

	.tabs_icon {
		width: 12rpx;
		height: 8rpx;
		z-index: 1;
		margin-left: 10rpx;
	}

	.icon1 {
		/* position: absolute; */
		/* top: 6rpx; */
	}

	.icon2 {
		position: absolute;
		bottom: 6rpx;
	}

	.page-box {
		// position: relative;
		// z-index: 0;
		// top: 70px;
	}

	.centre {
		margin: auto;
		height: 400rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.centre image {
		width: 387rpx;
		height: 341rpx;
		margin: 40rpx auto 20rpx;
	}

	.centre .tips {
		font-size: 32rpx;
		color: #2F3044;
		margin: 20rpx 0 40rpx;
		font-weight: 700;
	}


	.hintPopul {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		background: rgba(0, 0, 0, .4);
		z-index: 999;
	}

	.content_ {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		text-align: center;
		width: 500rpx;
		height: 400rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding-top: 120rpx;
	}

	.content_ image {
		position: absolute;
		top: -50rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.hintText {
		font-size: 30rpx;
	}

	.skuBtn {
		width: 460rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #FCD202;
		font-size: 28rpx;
		border: 2rpx solid #FCD202;
		color: #333333;
		border-radius: 50rpx;
		font-weight: 700;
		margin: auto;
	}

	.hongbao {
		width: 100%;
		/* height: 100px; */
		/* background: #007AFF; */
		position: fixed;
		top: 34%;
		/* bottom: 50%; */
		left: 0rpx;
		right: 0rpx;
		/* display: none; */
	}

	.hb_img {
		width: 100%;
		height: 535rpx;
	}

	.hb_btn {
		width: 70%;
		height: 72rpx;
		position: absolute;
		top: 315rpx;
		left: 80rpx;
	}
	
	.serviceBtn{
		position: fixed;
		right: 52rpx;
		bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		color: #fff;
		font-size: 20rpx;
		background-color: #3E8EF7;
		box-shadow: 0 0 7rpx #000;
		
		.serviceBtn_text{
			margin-top: 5rpx;
		}
	}
</style>