<template>
	<view class="content">

		<!-- <view style="background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 0%, #F4F4F4 100%, #F4F4F4 100%);"> -->
		<view style="background-color:#FFFFFF">
			<view class="" style="margin-left: 25rpx;margin-right: 25rpx;">
				<view class="flex align-center padding-top-sm">
					<!-- <image src="../../static/back.png" style="width:5vw;height: 5vw;" @click.stop="closeWeb">
					</image> -->
					<view class="color-11 text-bold " style="font-size: 36rpx;flex: 1;">
						<view class="flex align-center" @click.stop="closeWeb">
							<image src="../../static/back.png" style="width:36rpx;height: 36rpx;margin-right: 16rpx;">
							</image>
							<text v-if="this.$bizType == 1">家政</text>
							<text v-if="this.$bizType == 2">维修</text>
						</view>

					</view>

					<view class="flex align-center" @click="openAddress">
						<u-image width="28rpx" height="28rpx" src="../../static/home_address_icon.png"></u-image>
						<text class="address_text" style="margin-left: 5rpx;">{{address}}</text>
						<u-image src="../../static/back_down.png"
							style="width:24rpx;height: 24rpx;margin-left: 10rpx;margin-bottom: 6rpx;">
						</u-image>
					</view>

				</view>
				<view class="flex align-center justify-between search_main" @click="gotoSearch">
					<view class="flex align-center">
						<u-image style="margin-left: 34rpx;" width="34rpx" height="34rpx"
							src="../../static/home_search_icon.png"></u-image>
						<text class="search_text" v-if="this.$bizType == 1">油烟机清洗</text>
						<text class="search_text" v-if="this.$bizType == 2">洗衣机维修</text>
					</view>
					<view class="search_button">搜索</view>
					<!-- <u-search @click="gotoSearch" bg-color="#ffffff" :disabled="true"  :show-action="false"></u-search> -->
				</view>
				<view class="wrap">
					<u-swiper mode="dot" border-radius="20" :list="list" name="urlImg" height="200" img-mode="widthFix">
					</u-swiper>
				</view>
				<view
					style="border-radius: 20rpx; overflow: hidden; margin-top: 20rpx;background-color: #FFFFFF;box-shadow: 0px 0px 28rpx 0px #242F3E10;">
					<u-grid :col="4" style="padding-bottom: 15rpx;">
						<u-grid-item v-for="(item,index) in categoryList" :key='index' :custom-style="gridStyle"
							@tap="onCateClick(index)">
							<image :src="item.icon" style="width: 100rpx;height: 100rpx; border-radius: 100rpx;">
							</image>
							<view class="grid-text">{{item.categoryName}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

		</view>
		<view class="flex"
			style="margin: 20rpx 25rpx;color: #778296 ;font-size: 24rpx;background-color: #F7F8F9;padding: 26rpx 31rpx;border-radius: 20rpx;">
			<view class="" style="flex: 1;">
				<text>支付金额由优鲜信托管，服务不满意，可申请退款，1小时内受理。服务热线时间：8:00-20:00</text>
			</view>
			<view class="" style="width: 2rpx;height: 60rpx;background: #DDDDDD;margin:0 20rpx;">
			</view>
			<view class="flex align-center" @click.stop="hotPhone">
				<u-image src='../../static/phone_index.png' width="28" height="28" style="margin-right: 10rpx;">
				</u-image>
				<text style="color: #F59A23;">投诉</text>
			</view>
			<!-- <a class="flex align-center " :href="'tel:'+complaintHotline" style="text-decoration: none;">

				<image src='../../static/phone_index.png'style="width: 28rpx;height: 28rpx;margin-right: 10rpx;">
				</image>
				<text style="color: #F59A23;">投诉</text>
			</a> -->
		</view>
		<view style="">
			<view style="margin-left: 25rpx;margin-right: 25rpx;padding-top: 10rpx;padding-bottom: 20rpx;"
				class="flex align-center justify-between ">
				<text class="server_title">热门服务</text>
				<view class="flex align-center">
					<view v-if="bizType ==1" :class="{'selected_server_type':serverType ==2,'unselected_server_type':serverType ==1 || serverType ==0}"
						@click="selectServer(2)">
						团购服务
					</view>
					<view style="margin-left: 18rpx;" 
						:class="{'selected_server_type':serverType ==0,'unselected_server_type':serverType ==1 || serverType ==2 }"
						@click="selectServer(0)">
						预定服务
					</view>
					<view style="margin-left: 18rpx;"
						:class="{'selected_server_type':serverType ==1,'unselected_server_type':serverType ==0 || serverType ==2}"
						@click="selectServer(1)">
						商家
					</view>
				</view>
			</view>
			
			<view>
				<view class="" style="height:88rpx; padding-left: 10rpx;">
					<u-sticky offset-top="0" @fixed="tabFixed=true" @unfixed="tabFixed=false" h5-nav-height="0">
						<u-tabs-swiper active-color="#111111" inactive-color="#111111" ref="uTabs" bg-color="#fff"
							:bar-style="barStyle" :list="categoryList" :is-scroll="true" :current="tabCurrent"
							swiperWidth="740" name="categoryName" @change="tabChange">
						</u-tabs-swiper>
					</u-sticky>
				</view>
				<swiper style="height: calc(100vh - 100rpx); " :current="swiperCurrent" @transition="transition"
					@animationfinish="animationfinish">
					<swiper-item class="swiper-item " v-for="(item, index) in categoryList" :key="index">   
						<scroll-view :scroll-y="tabFixed" style="height: 100%" id="mySwiper" @scrolltolower='scrolltolower(index)' v-if="item.childList.length>0">
							<view v-if="serverType < 2">
                                <view @click="gotoDetails(contentItem)" v-for="(contentItem,index1) in item.childList" :key="index1" class="flex align-start"
								style="margin-left: 25rpx;margin-right: 25rpx;" :class="serverType==0?'margin-top-lg':''">
                                    <view style="position: relative;" :style="{height:serverType==1?'254rpx':''}" :class="serverType==1?'flex align-center':''">
                                        <view v-if="serverType==0" :class="{'presonal_auth':contentItem.merchantType == 1, 'company_auth':contentItem.merchantType ==0}"
                                            style="position: absolute; top: 0;left: 0;z-index: 2;">
                                            {{contentItem.merchantType == 1?"个人认证":"企业认证"}}
                                        </view>
                                        <image style="width: 240rpx; height: 180rpx; border-radius: 10rpx;" mode="aspectFill" :src="contentItem.goodsImageList[0].url" v-if="serverType ==0"></image>
                                        <image style="width: 240rpx; height: 180rpx; border-radius: 10rpx;" mode="aspectFill" :src="contentItem.avatar" v-if="serverType ==1"></image>
                                    </view>
                                    <view class="flex-sub padding-right">
                                        <view :style="{height:serverType==1?'220rpx':'180rpx'}" style="margin-left: 20rpx; width: 100%; display: flex;flex-direction: column;justify-content: space-between;word-break:break-all">
                                            <view :class="serverType==1?'margin-top-lg':''">
                                                <view class="wb_hide_2 content_text" v-if="serverType==0">{{contentItem.name}}</view>
                                                <view class="wb_hide_2 content_text" v-if="serverType==1">{{contentItem.merchantName}}</view>
                                                
                                                <view style="margin-top: 15rpx;" class="flex align-center" v-if="serverType==0">
                                                    <view class="age_tag"> {{contentItem.serverAge}}年工龄</view>
                                                    <view class="content_comment" v-if="contentItem.rate>0">好评率{{contentItem.rate}}%</view>
                                                </view>

                                                <view style="margin-top: 15rpx;" class="flex align-center justify-between" v-if="serverType==1">
                                                    <view class="age_tag"> {{contentItem.storeAge}}年店龄</view>
                                                    <view style="color:#999;" class="text-sm">成交{{contentItem.sales}}单</view>
                                                </view>

                                                <view style="margin-top: 15rpx;" class="flex align-center justify-between" v-if="serverType==1">
                                                    <view style="color:#FF481E;font-size:22rpx;"> 综合评分： <span style="font-size: 24rpx;" class="text-bold">{{contentItem.score}}</span> </view>
                                                    <view class="content_comment" v-if="contentItem.rate>0">好评率{{contentItem.rate}}%</view>
                                                </view>

                                                <view class="" style="margin-top: 10rpx;display: flex;justify-content: space-between;" v-if="serverType==0">
                                                    <view class="flex align-center">
                                                        <text style="color: #111111; font-size: 24rpx;">{{contentItem.realName}}</text>
                                                        <text v-if="contentItem.serverLevel == '001'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;">初级家政</text>
                                                        <text v-else-if="contentItem.serverLevel == '002'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;">中级家政</text>
                                                        <text v-else-if="contentItem.serverLevel == '003'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;">高级家政</text>
                                                        <text v-else-if="contentItem.serverLevel == '004'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;">金牌家政</text>
                                                    </view>
                                                    <view style="font-size: 32rpx;color: #FF1414;" class="flex justify-end flex-sub">
                                                        <span class="text-bold" style="margin-right:6rpx;">{{contentItem.goodsServerPrice}}</span>
                                                        <span style="font-size: 26rpx;">元/{{contentItem.goodsUnit == "999"?contentItem.otherUnit:contentItem.goodsUnitName}}</span>
                                                    </view>
                                                </view>
                                            </view>
                    
                                            <view style="margin-top: 0rpx;" v-if="contentItem.merchantType!=1&&serverType==0">
                                                <text style="font-size: 22rpx;color: #999999;" class="wb_hide_2">{{contentItem.merchantName}}</text>
                                            </view>
                                        </view>
                                        <view style="margin-left: 20rpx; width: 100%;" v-if="serverType==1">
                                            <view v-for="(good,goodIndex) in contentItem.goodsList" :key="good.goodsId">
                                                <view v-if="goodIndex<2">
                                                    <view class="flex align-center">
                                                        <image src="../../static/group.png" style="width:36rpx;height:36rpx;left:0;top:0;" v-if="good.isGroupGoods==1"></image>
                                                        <image src="../../static/reserve.png" style="width:36rpx;height:36rpx;left:0;top:0;" v-if="good.isGroupGoods==0"></image>
                                                        <view style="margin-left:10rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 380rpx;">{{good.name}}</view>
                                                    </view>
                                                    <view class="flex align-center margin-top-sm margin-bottom" v-if="good.isGroupGoods==1">
                                                        <view style="color: #FF0000;font-size:32rpx;" class="text-bold">
                                                            <span class="text-sm">￥</span>{{good.currentPrice}}
                                                        </view>
                                                        <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                                            <span>￥</span>{{good.scribingPrice}}
                                                        </view>
                                                    </view>
                                                    <view style="font-size: 32rpx;color: #FF1414;" class="flex flex-sub margin-top-sm margin-bottom" v-if="good.isGroupGoods==0">
                                                        <span class="text-bold" style="margin-right:8rpx;">{{good.goodsServerPrice}}</span>
                                                        <span style="font-size: 26rpx;">元/{{good.goodsUnit == "999"?good.otherUnit:good.goodsUnitName}}</span>
                                                    </view>
                                                </view>
                                               
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                
                            </view>

                            <view v-if="serverType==2 && bizType ==1">
                                <u-waterfall  v-model="item.childList" ref="uWaterfall" style="padding-left:18rpx;">
                                <template v-slot:left="{leftList}">
                                    <view @click="gotoDetails(item)" class="demo-warter" v-for="(item, index) in leftList" :key="index">
                                        <u-lazy-load threshold="-450" border-radius="0" :height="260" img-mode="" :image="item.goodsImageList[0].url" :index="index"></u-lazy-load>
                                        <view class="padding-lr-sm padding-bottom">
                                            <view class="demo-title">
                                                {{item.name}}
                                            </view>
                                            <view v-if="item.rate>0" style="margin-top: 20rpx;color:#FF0000; font-size: 22rpx;" class="flex align-center justify-center rate-box">
                                                <view style=" text-align: left;">好评率</view>
                                                <view style="margin-left:6rpx;margin-top:4rpx;">{{item.rate}}%</view>
                                            </view>
                                            <view style="margin-top: 20rpx;" class="flex align-center">
                                                <view style="color: #FF0000;font-size:32rpx;" class="text-bold">
                                                    <span class="text-sm">￥</span>{{item.currentPrice}}
                                                </view>
                                                <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                                    <span>￥</span>{{item.scribingPrice}}
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </template>

                                <template v-slot:right="{rightList}">
                                    <view @click="gotoDetails(item)" class="demo-warter" v-for="(item, index) in rightList" :key="index">
                                        <u-lazy-load threshold="-450" border-radius="0" :height="260" img-mode="" :image="item.goodsImageList[0].url" :index="index"></u-lazy-load>
                                        <view class="padding-lr-sm padding-bottom">
                                            <view class="demo-title">
                                                {{item.name}}
                                            </view>
                                            <view v-if="item.rate>0" style="margin-top: 20rpx;color:#FF0000; font-size: 22rpx;" class="flex align-center justify-center rate-box">
                                                <view style=" text-align: left;">好评率</view>
                                                <view style="margin-left:6rpx;margin-top:4rpx;">{{item.rate}}%</view>
                                            </view>
                                            <view style="margin-top: 20rpx;" class="flex align-center">
                                                <view style="color: #FF0000;font-size:32rpx;" class="text-bold">
                                                    <span class="text-sm">￥</span>{{item.currentPrice}}
                                                </view>
                                                <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                                    <span>￥</span>{{item.scribingPrice}}
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </template>
                            </u-waterfall>
                            </view>
			
						</scroll-view>
						<view class="align-center" v-else>
							<image src="../../static/nomore_icon.png" mode=""
								style="width: 370rpx;height: 370rpx;margin: 0 auto;"></image>
						</view>
			
					</swiper-item>
				</swiper>
			</view>
			
			
		</view>
	</view>
 
</template>
<script>
	export default {
		data() {
			return {
				bizType:0,
				complaintHotline: '',
				gridStyle: {
					'padding': '15rpx 0'
				},
				activeitemstyle: {
					'font-size': '34rpx',
					'font-weight': 'blod'
				},
				barStyle: {
					'height': '14rpx',
					'background-color': 'transparent',
					'background-image': "url('../../static/tabbar_icon.png')",
					'background-size': '100% 100%'
				},
				topheight: -88,
				tabFixed: false,
				refresherStatus: false,
				address: '',
				title: 'Hello',
				tabCurrent: 0,
				swiperCurrent: 0,
				serverType: 0, // 0服务人员 1商家 2团购
				lastServerType: -1,
				categoryList: [],
				list: [],
				templocation: {
					latitude: '',
					longitude: ''
				},
				tempObj:{},//flutter带来的参数

                isChangeTab: false,
				
			}
			
		},
		onLoad(options) {
			this.bizType = this.$bizType;
			this.getAddressLocation()
			// this.getConfigSty()
			this.getBannerList()
            if(this.bizType ==1) {
                this.serverType = 2
            }
			this.getCaregoryList()
			this.address = uni.getStorageSync('addressName').title
			if(options.goodId && options.shopId && options.isPerson)
			{
				this.tempObj=options
			}
				
		},
		onHide() {
			// this.serverType = 0
			// this.tabChange(0)
		},
		onShow() {
			
			uni.removeStorageSync('channelPage')
		},
		onReady() {
			if(this.tempObj.goodId && this.tempObj.shopId && this.tempObj.isPerson)
			{
				// alert(options.query.goodId)
				if(this.tempObj.isPerson === '1') //1是个人0是商家
				{
					uni.navigateTo({
						url: 'personDetails?goodsId='+this.tempObj.goodId+'&serverId='+this.tempObj.shopId+'&bizType='+this.$bizType+'&flag=true'
					})
				}else{
					uni.navigateTo({
						url: 'shopDetails?merchantId='+this.tempObj.merchantId+'&bizType='+this.$bizType+'&flag=true'
					})
				}
			}
		},
		onPullDownRefresh() {
			// this.lastServerType = -1
			this.categoryList = []
			this.getAddressLocation()
			this.getCaregoryList()
		},
		methods: {
			hotPhone() {
				uni.makePhoneCall({
					phoneNumber: this.complaintHotline
				});
			},
			// 点击分类
			onCateClick(index) {
				var data = this.categoryList[index];
				data.selectIndex = -1
				console.log(data)
				uni.setStorageSync('channelPage', data)
				// var item = JSON.stringify(data)
				// console.log(data)
				uni.navigateTo({
					url: "../mine/minePage/channelPage"
				});
			},
			openAddress() {
				uni.navigateTo({
					url: '../mine/minePage/addressPage'
				})
			},
			getBannerList() {
				this.$u.api.getBannerList({
					'bizType': this.$bizType
				}).then(res => {
					if (res.code == 200) {
						this.list = res.data
						this.complaintHotline = this.list[0].complaintHotline
						uni.setStorageSync('complaintHotline',this.complaintHotline)
						// console.log(res.data)
					}
				})
			},
			//scroll view 触底加载
			scrolltolower(index) {
				console.log('scrolltolower')
				this.categoryList[index].pageNum++
				this.getChannelContentList(index)
			},
			rmFixed(e, ownI) {
				this.tabFixed = false
			},
			getCaregoryList() {
				this.$u.api.categoryHomeList({
					bizType: this.$bizType
				}).then(res => {
					// console.log(res,'categoryHomeList')
					if (res.code == 200) {
						// this.categoryList=[]
						this.categoryList = res.data;
						this.categoryList.forEach(function(element) {
							element.childList = []
							element.pageNum = 1
						});
					
						this.getChannelContentList(this.swiperCurrent);
					}
				}).catch(error => {
					console.log(error)
				})
			},
			getChannelContentList(index) {
				// console.log(this.lastServerType, this.serverType,'kaishi ')
				var item = this.categoryList[index];
				
				//   console.log(item)
				if (this.serverType == 0) {
					var param = {
						pageNum: item.pageNum,
						pageSize: 10,
						bizType: this.$bizType, //业务类型（1：家政；2：维修）
                        isGroupGoods: 0,
						// parentId: item.categoryId
					}
					if (item.categoryId) {
						param.parentId = item.categoryId
					}
					var that = this
					this.$u.api.seekCrewList(param).then(res => {
						if (res.code == 200) {
							if (that.lastServerType == that.serverType) {
								// item.pageNum++
							} else {
								item.pageNum = 1
								that.categoryList[index].childList = []
							}
						
							that.lastServerType = that.serverType
							that.categoryList[index].childList = that.categoryList[index].childList.concat(res
								.rows)
							uni.stopPullDownRefresh()
							that.$forceUpdate()

						}
					}).catch(error => {

					})
				} else if (this.serverType == 1) {
					var param = {
						pageNum: item.pageNum,
						pageSize: 10,
						bizType: this.$bizType, //业务类型（1：家政；2：维修）
						// parentId: item.categoryId
					}
					if (item.categoryId) {
						param.parentId = item.categoryId
					}
					var that = this

                    this.$u.api.seekMerchantMerchandiseList(param).then(res => {
						if (res.code == 200) {
							if (that.lastServerType == that.serverType) {
								// item.pageNum++
							} else {
								item.pageNum = 1
								that.categoryList[index].childList = []
							}
							that.lastServerType = that.serverType
							that.categoryList[index].childList = that.categoryList[index].childList.concat(res
								.rows)

							uni.stopPullDownRefresh()
							that.$forceUpdate()

						}
					}).catch(error => {

					})
				}else if (this.serverType == 2) {

                    var param = {
						pageNum: item.pageNum,
						pageSize: 10,
						bizType: this.$bizType, //业务类型（1：家政；2：维修）
						isGroupGoods: 1,
					}
					if (item.categoryId) {
						param.parentId = item.categoryId
					}
					var that = this
					this.$u.api.seekCrewList(param).then(res => {
						if (res.code == 200) {
							if (that.lastServerType == that.serverType) {
								// item.pageNum++
							} else {
								item.pageNum = 1
								that.categoryList[index].childList = []
							}
						    // console.log(res.rows)
							that.lastServerType = that.serverType
                            for(let i = 0; i < res.rows.length; i++) {
                                // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
                                let item = JSON.parse(JSON.stringify(res.rows[i]))
                                that.categoryList[index].childList.push(item);
                            }
                                  
							uni.stopPullDownRefresh()
							that.$forceUpdate()

						}
					}).catch(error => {

					})
													
				}
			 
			},
	
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},

			getAddressLocation() {
				const that = this
				uni.getLocation({
					geocode: true,
					type: 'gcj02',
					success: function(res) {
						// console.log(res, 'getAddressLocation')
						let location = [res.latitude, res.longitude]
						let StringLocation = location.toString()
						let url = 'https://apis.map.qq.com/ws/geocoder/v1?&output=jsonp';
						that.$jsonp(url, {
								key: '2KVBZ-JCJC5-WWCIG-QALQX-3HLMZ-A7FPF',
								location: StringLocation,
								get_poi: 1
							})
							.then(res => {
								// 获取附近地址赋值
								// console.log(res, 'res')
								let list = res.result.pois
								list.forEach(item => {
									item.address = item.address.substring(3)
								})
								const currentAddress = list[0]
								that.address = currentAddress.title
								uni.setStorageSync('addressName', currentAddress)
							})

					},

				})
			},
			onJump() {
				uni.navigateTo({
					url: '../codelogin/codelogin'
				})
			},
			tabChange(index) {
				// this.tabCurrent = index;
				this.swiperCurrent = index
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.tabCurrent = current
				if ((this.categoryList[current].childList == undefined || this.categoryList[current].childList.length <
						1) && this.categoryList[current].pageNum < 2) {
					console.log('滑动结束',current,this.categoryList[current].childList.length)
					this.getChannelContentList(current)
				}
                if(this.isChangeTab) {
                    this.categoryList[this.swiperCurrent].pageNum = 1
                    this.categoryList[this.swiperCurrent].childList = []
                    this.isChangeTab = false;
                    this.getChannelContentList(this.swiperCurrent)
                }
                // console.log('ooiiii0000000000000000',current)
            },

			gotoSearch() {
				uni.navigateTo({
					url: './search',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			selectServer(index) {
				this.serverType = index
				this.categoryList[this.swiperCurrent].pageNum = 1
				this.categoryList[this.swiperCurrent].childList = []
                this.isChangeTab = true;
                // console.log('selectServerselectServerselectServer',this.swiperCurrent)
				this.getChannelContentList(this.swiperCurrent)


			},
			gotoDetails(obj) {
				uni.removeStorageSync('indexDetails')
				// console.log(obj)
				if (this.serverType == 0) {
					obj.bizType = this.$bizType
					uni.setStorageSync('indexDetails', obj)
					uni.navigateTo({
						url: './personDetails'
					})
				} else if (this.serverType == 1){
					obj.bizType = this.$bizType
					uni.setStorageSync('indexDetails', obj)
					uni.navigateTo({
						url: './shopDetails'
					})
				}else if (this.serverType == 2){
					obj.bizType = this.$bizType
					uni.setStorageSync('indexDetails', obj)
					uni.navigateTo({
						url: './groupDetails'
					})
				}

			},
			closeWeb() {
				CloseWeb.postMessage("调用了fluter");
			},
		}
	}
</script>
<style>
	page {
			background-color: rgb(240, 240, 240);
		}
</style>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}
	.address_text {
		font-size: 28rpx;
		// font-weight: bold;
		color: #111111;
	}

	.search_main {
		margin-top: 20rpx;
		height: 68rpx;
		border-radius: 100rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #FC6035;
	}

	.search_button {
		margin-right: 5rpx;
		background-color: #FC6035;
		color: #FFFFFF;
		font-size: 30rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 21rpx;
		padding-right: 21rpx;
		border-radius: 50rpx;
		margin-right: 6rpx;
	}

	.search_text {
		font-size: 28rpx;
		color: #999999;
		margin-left: 13rpx;
	}

	.wrap {
		margin-top: 20rpx;
	}

	.grid-text {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.server_title {
		font-size: 38rpx;
		font-weight: bold;
		color: #BEC3C6;
	}

	.selected_server_type {
		font-size: 26rpx;
		border: 2rpx solid #FC6035;
		color: #FC6035;
		padding-bottom: 6rpx;
		padding-top: 6rpx;
		padding-left: 21rpx;
		padding-right: 21rpx;
		border-radius: 50rpx;

	}

	.unselected_server_type {
		font-size: 26rpx;
		border: 2rpx solid #E0E0E0;
		color: #333333;
		padding-bottom: 6rpx;
		padding-top: 6rpx;
		padding-left: 21rpx;
		padding-right: 21rpx;
		border-radius: 50rpx;
	}

	.company_auth {
		// width: 98rpx;
		// height: 32rpx;
		padding: 4rpx 10rpx;
		background: linear-gradient(270deg, #009BF8 0%, #009BF8 0%, #97D5FF 100%, #97D5FF 100%);
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		// font-weight: bold;
	}

	.presonal_auth {
		// width: 98rpx;
		// height: 32rpx;
		padding: 4rpx 10rpx;
		background: linear-gradient(270deg, #FF6B00 0%, #FF6B00 0%, #FFB700 100%, #FFB700 100%);
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		// font-weight: bold;
	}

	.age_tag {
		// width: 98rpx;
		padding: 1rpx 10rpx;
		// height: 32rpx;
		background: linear-gradient(269deg, #E7C2A1 0%, #E7C2A1 0%, #F4EBE1 100%, #F4EBE1 100%);
		border-radius: 8rpx;
		opacity: 1;
		color: #885c4b;
		text-align: center;
		font-size: 22rpx;
	}

	.wb_hide_2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.content_text {
		font-size: 30rpx;
		color: #111111;
	}

	.content_comment {
		border-radius: 8rpx;
		border: 1rpx solid #FF9999;
		color: #FF1414;
		font-size: 22rpx;
		padding: 4rpx 14rpx;
		margin-left: 17rpx;
	}

.demo-warter {
        border-radius: 20rpx;
        overflow: hidden;
        margin: 18rpx 18rpx 18rpx 0;
        background-color: #ffffff;
        position: relative;
    }

    .u-close {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
    }

    .demo-image {
        width: 100%;
        border-radius: 4px;
    }

    .demo-title {
        font-size: 30rpx;
        margin-top: 5px;
        color: #111;
        word-wrap: break-word;
    }

    .rate-box {
        border: 2rpx solid #ff8f96;
        border-radius: 8rpx;
        width: 150rpx;
        height: 36rpx;
    }
</style>
