sadjv3_user/pages/index/index.vue

<template>
	<view class="content content_bj">
		<view class="index-head">
			<view class="index-top">
				<view class="index-top-left font-size-34">盛安到家</view>
				<view class="index-top-mian">
					<view class="index-top-mian-text">
						<image src="../../static/index-nav-1.png" mode="widthFix"></image>
						<span class="font-size-19">实名认证</span>
					</view>
					<view class="index-top-mian-text">
						<image src="../../static/index-nav-2.png" mode="widthFix"></image>
						<span class="font-size-19">资质认证</span>
					</view>
					<view class="index-top-mian-text">
						<image  src="../../static/index-nav-3.png" mode="widthFix"></image>
						<span class="font-size-19">平台担保</span>
					</view>
				</view>
				<view class="index-top-right">
					<image  src="../../static/index-nav-4.png" mode="widthFix"></image>
					<image  src="../../static/index-nav-5.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="padding-top-sm flex align-center index-mian">
				<view v-if="XCXIsSelect != '否'" class="flex align-center justify-between margin-right-sm"
					 @tap="Cityshow = true" style="line-height: 68rpx;">
					<image src="../../static/liliao-1.png" class="dingwei-img"></image>
					<view class="localName">{{ city }}</view>
				</view>
				<u-search class="" placeholder="请输入理疗师名字" :focus="false" shape="square" v-model="artificerName"
					:show-action="true" :animation="true" bg-color="#fff" color="#1A1A1A" @search="onSearch()"
					></u-search>
			</view>
			
			<view class="index-nav-bottom width">
				<image src="../../static/index-nav-6.png" mode="widthFix" @click="chaoji"></image>
				<image src="../../static/index-nav-7.png" mode="widthFix" @click="xinren"></image>
			</view>
		</view>
		<view class="title-star">
			<view class="star-technician-top">
				<view class="star-technician-top-text">
					<span class="star-technician-name">明星技师</span>
					<span class="star-technician-name-bot">Star technician</span>
				</view>
				<view class="star-technician-top-text" @click="gengduo">
					<span class="star-technician-gengguo">查看更多></span>
				</view>
			</view>
		</view>
		<view class="star-technician width">
			<view class="star-technician-mian">
				<liu-goods-swiper :goodsList="starTechnician" :imgWidth="160" :imgHeight="160" @clickItem="chooseItem" @cancellable='false'></liu-goods-swiper>
			</view>
		</view>
		<view class="index-project width">
			<view class="index-project-content" @click="goNav('/pages/my/indextaociliaoList?type='+104+'&name='+'index')">
				<image src="../../static/index-fenglei1.png" mode="widthFix"></image>
				<span class="feng_word">盛安套餐</span>
			</view>
			<view class="index-project-content" @click="goNav('/pages/therapist/therapist')">
				<image src="../../static/index-fenglei2.png" mode="widthFix"></image>
				<span class="feng_word">盛安技师</span>
			</view>
			<view class="index-project-content" @click="goNav()">
				<image src="../../static/index-fenglei3.png" mode="widthFix"></image>
				<span class="feng_word">招聘合作</span>
			</view>
			<view class="index-project-content" @click="goNav('/my/vip/index')">
				<image src="../../static/index-fenglei4.png" mode="widthFix"></image>
				<span class="feng_word">会员中心</span>
			</view>
			<view class="index-project-content"  @click="chaoji">
				<image src="../../static/index-fenglei10.png" mode="widthFix"></image>
				<span class="feng_word">充值赠送</span>
			</view>
			<view class="index-project-content" @click="goNav()">
				<image src="../../static/index-fenglei5.png" mode="widthFix"></image>
				<span class="feng_word">超值拼团</span>
			</view>
			<view class="index-project-content" @click="goNav('/pages/my/indextaociliaoList?type='+106+'&name='+'index')">
				<image src="../../static/index-fenglei6.png" mode="widthFix"></image>
				<span class="feng_word">服务疗程</span>
			</view>
			<view class="index-project-content" @click="goNav()">
				<image src="../../static/index-fenglei7.png" mode="widthFix"></image>
				<span class="feng_word">限时秒杀</span>
			</view>
			<view class="index-project-content" @click="goNav()">
				<image src="../../static/index-fenglei8.png" mode="widthFix"></image>
				<span class="feng_word">逛商城</span>
			</view>
			<view class="index-project-content" @click="goNav()">
				<image src="../../static/index-fenglei9.png" mode="widthFix"></image>
				<span class="feng_word">约到店</span>
			</view>
		</view>
		<view class="index-guanggao width">
			<image class="index-guanggao-pintuan" src="../../static/pintuan.png" mode="widthFix"></image>
			<view class="index-guanggao-right">
				<image class="index-guanggao-right-cika index-interval" @click="goNav('/pages/my/indextaociliaoList?type='+105+'&name='+'index')" src="../../static/cika.png" mode="widthFix"></image>
				<image class="index-guanggao-right-yuyue" src="../../static/yuyue.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="index-fujin">
			<view class="index-fujin-title width">
				<view class="index-fujin-title-left">
					<image src="../../static/fujin-jishi.png" mode="widthFix"></image>
					<span>附近技师</span>
				</view>
				<view class="index-fujin-title-right">
					<span class="index-fujin-title-left-text" @click="gengduo">更多</span>
					<span class="index-fujin-title-left-btn">>></span>
				</view>
			</view>
			<view class="index-fujin-img width">
				<view class="fujin-view" v-for="(item,index) in nearbyTechnician" :key="index" @click="goOrder(item)">
					<view class="index-fujin-view">
						<image class="index-fujin-view-img" :src="item.artificerImg" mode=""></image>
						<view class="index-fujin-view-text">
							<image src="../../static/orderDetail/dingwei.png" mode="w"></image>
							<span>1.2km</span>
						</view>
					</view>
					<view class="index-fujin-jie">
						<view class="index-fujin-jie-view">
							<span class="index-fujin-jie-name">{{item.artificerName}}</span>
							<span class="index-fujin-jie-id">{{item.content}}</span>
						</view>
					</view>
				</view>
				
			</view>
			<view class="index-taocan width">
				<view class="index-taocan-view">
					<view class="index-taocan-view-nav" v-for="item in felNav" :key="item.id" @click="chengFel(item)">
						<view class="index-taocan-view-nav-s">
							<span class="index-taocan-view-nav-text" :class="[currentTabFl==item.id?'activeL':'activeH']">{{item.name}}</span>
							<span class="index-taocan-view-nav-jie" :class="[currentTabFl==item.id?'activeXL':'activeXH']">{{item.content}}</span>
						</view>
						<view class="fenjie"></view>
					</view>
				</view>
				<view class="index-card">
					<view class="index-card-view" v-for="(item,index) in tjData" :key="index" @click="goDatail(item)">
						<view class="index-card-view-title">
							<image class="index-card-image" :src="item.packageImg" mode=""></image>
							<!-- <view class="index-card-view-title-left">{{item.title}}</view> -->
							<view class="index-card-view-title-right">助眠解压</view>
						</view>
						<view class="index-card-mian">
							<view class="index-card-mian-title marginTop">{{item.title}}</view>
							<view class="index-card-mian-biao marginTop">
								<view class="index-card-mian-biao-left">
									助眠减压
								</view>
								<view class="index-card-mian-biao-right">
									缓解疲劳
								</view>
							</view>
							<view class="index-card-mian-time marginTop" v-if="item.duration">
								<image src="../../static/rumen-time.png" mode="widthFix"></image>
								<span>{{item.duration}}分钟</span>
							</view>
							<view class="index-card-mian-money marginTop">
								<span class="index-card-mian-money-zhen">￥{{item.price}}</span>
								<span class="index-card-mian-money-jia">￥{{item.oldPrice}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="body-view">
				<!-- 使用scroll-view实现tabs滑动切换 -->
				<scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
					<view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index" @click="swichMenu(index)">
						<view :class="currentTab==index ? 'menu-topic-act' : 'menu-topic'">
							<text class="menu-topic-text">{{item.name}}</text>
							<view class="menu-topic-bottom">
								<view class="menu-topic-bottom-color"></view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 内容 -->
				<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
					<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
						<view class="swiper-item-card">
							<view class="swiper-back-img">
								<image src="../../static/bofang.png" mode="widthFix"></image>
							</view>
							<view class="swiper-item">
								<span>{{item.name}}</span>
								<span>{{item.content}}</span>
							</view>
						</view>
						<view class="swiper-item-card">
							<view class="swiper-back-img">
								<image src="../../static/bofang.png" mode="widthFix"></image>
							</view>
							<view class="swiper-item">
								<span>{{item.name}}</span>
								<span>{{item.content}}</span>
							</view>
						</view>
						<view class="swiper-item-card">
							<view class="swiper-back-img">
								<image src="../../static/bofang.png" mode="widthFix"></image>
							</view>
							<view class="swiper-item">
								<span>{{item.name}}</span>
								<span>{{item.content}}</span>
							</view>
						</view>
						<view class="swiper-item-card">
							<view class="swiper-back-img">
								<image src="../../static/bofang.png" mode="widthFix"></image>
							</view>
							<view class="swiper-item">
								<span>{{item.name}}</span>
								<span>{{item.content}}</span>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 经验筛选 -->
		<u-select v-model="Cityshow" :list="cityList" @confirm="getCity"></u-select>
	</view>
</template>

<script>
	import commonConfig from 'common/config.js';
	
	import * as webMap from 'utils/webMap.js';
	
	import permision from "@/components/permission.js";
	// 调用手机系统权限
	// #ifdef APP-PLUS
	// import permision from "@/components/permission.js";
	// #endif
	export default {
		data() {
			return {
				cityList: [],
				Cityshow: false,
				artificerName: '',
				//地图相关
				token: '',
				infoWindow: null,
				amap: null,
				latitude: '43.86487',
				longitude: '',
				city: '请选择城市',
				XCXIsSelect: '否',
				currentTabFl: 1,
				tjData:[],
				felNav:[{
						id:1,
						content: '大家常买',
						name: '热门精选'
					},
					{
						id:2,
						content: '优惠提前享',
						name: '推荐套餐'
					},
					{
						id:3,
						name: '专业培训',
						content: '特色专业'
					},
					{
						id:4,
						name: '更多优惠',
						content: '更多'
					},
				],
				scrollLeft:0,
				tabs: [{
						id: 1,
						name: '推荐'
					},
					{
						id: 2,
						name: '附近'
					},
					{
						id: 3,
						name: '关注'
					},
				],
				currentTab: 0,
				tabCurrent: 'tabNum1',
				// Tab切换内容
				swiperDateList: [{
						id: 1,
						content: '中医推拿',
						name:'李安茹',
					},
					{
						id: 2,
						content: '中医推拿',
						name:'李安茹',
					},
					{
						id: 3,
						content: '中医推拿',
						name:'李安茹',
					},
				
				],
				typeList:[],
				searchValue: '123123',
				starTechnician:[],//明星技师
				nearbyTechnician:[],//附近技师
				classifyId: '',
				page:1,
				limit:10,
				arr: [],
				txAppKey: '',
				tpSel: 0,
				tpCount: 0,
			}
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.tuiguang,
				path: '/pages/index/index?invitation=' + this.invitationCode,
				imageUrl: this.tuiguangImg,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.tuiguang,
				path: '/pages/index/index?invitation=' + this.invitationCode,
				imageUrl: this.tuiguangImg,
			}
		},
		onLoad(e) {
			let that = this
			that.getBannerList()
			that.remen()
			that.getKTCityList();
			// 获取邀请码保存到本地
			if (e.invitation) {
				that.$queue.setData('inviterCode', e.invitation);
			}
			// #ifdef MP-WEIXIN
			if (e.scene) {
				const scene = decodeURIComponent(e.scene);
				this.$queue.setData('inviterCode', scene.split(',')[0]);
			}
			// #endif
			
			that.$Request.getT('/app/common/type/250').then(res => { //理疗师完成通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			
			that.$Request.getT('/app/common/type/248').then(res => { //理疗师取消通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/app/common/type/217').then(res => { //腾讯地图key
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.txAppKey = res.data.value;
					}
				}
			})
			console.log(11)
			uni.getLocation({
				type: 'gcj02',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					console.log(res, '地理位置')
					that.latitude = res.latitude
					that.longitude = res.longitude
					uni.setStorageSync('latitude', res.latitude)
					uni.setStorageSync('longitude', res.longitude)
			
					// #ifdef APP-PLUS
					that.city = res.address.city
					that.selectCity(that.longitude, that.latitude);
					uni.setStorageSync('city', res.address.city)
					// that.page = 1
					// that.getorderlist('')
					that.getKTCityList();
					// #endif
			
					// #ifdef H5
					that.selectCity(that.longitude, that.latitude);
					// #endif
			
					// #ifdef MP-WEIXIN
					uni.request({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + that.latitude +
							',' + that.longitude + '&key=' + that.txAppKey,
						success(re) {
							if (re.statusCode === 200) {
								let citydata = re.data.result.address_component.city
								// console.log("获取城市名称成功", citydata)/
								that.city = citydata ? citydata : '未知'
								uni.setStorageSync('city', citydata)
								that.getKTCityList();
								// that.page = 1
								// that.getorderlist('')
							} else {
								console.log("获取信息失败，请重试！")
							}
						}
					});
					// #endif
				},
				fail: function() {
					// #ifdef APP-PLUS
					that.checkPermission();
					// #endif
				}
			})
		},
		onShow() {
			let that = this
			that.XCXIsSelect = this.$queue.getData("XCXIsSelect");
			let userId = uni.getStorageSync('userId')
			if (userId) {
				this.getTpMy();
				this.getTpCount();
				// this.checkNewUser();
				// #ifdef MP-WEIXIN
				//订阅
				if (this.showModal) {
					this.openMsg()
				}
				// #endif
				this.city = uni.getStorageSync('city')
				console.log(this.city)
				this.getKTCityList();
				this.getHomeArtificerList();
				this.latitude = uni.getStorageSync('latitude')
				this.longitude = uni.getStorageSync('longitude')
			}
			that.token = uni.getStorageSync('token');
			// that.getKTCityList();
			// if (uni.getStorageSync('token')) {
			// 		console.log(22)
			// 	if (that.latitude && that.longitude) {
			// 		that.page = 1
			// 		that.getHomeArtificerList()
			// 	} else {
			// 			console.log(33)
			// 		uni.getLocation({
			// 			type: 'wgs84',
			// 			// highAccuracyExpireTime: 500,
			// 			geocode: true, //设置该参数为true可直接获取经纬度及城市信息
			// 			success: function(res) {
			// 					console.log(44)
			// 				console.log( '------>地理位置',res)
			// 				that.latitude = res.latitude
			// 				that.longitude = res.longitude
			// 				that.page = 1
			// 				that.getHomeArtificerList()
			// 			},
			// 			fail: function() {
			// 				console.log(55)
			// 				console.log('获取地址失败2')
			// 			}
			// 		})
			// 	}
			// }
		},
		methods: {
			// 开启订阅消息
			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 { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							uni.setStorageSync('sendMsg', false)
							uni.showModal({
								title: '提示',
								content: '为了更好的体验,请绑定消息推送',
								confirmText: '确定',
								cancelText: '取消',
								success: function(res) {
									if (res.confirm) {
										wx.requestSubscribeMessage({
											tmplIds: that.arr,
											success(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)
			
										that.showModal = false
									} else if (res.cancel) {
										console.log('取消')
										// uni.setStorageSync('sendMsg', false)
										that.showModal = true
									}
								}
							})
						}
					}
				})
			},
			getTpCount() {
				this.$Request.getT('/app/message/selectCityCount?city=' + this.city).then(res => {
					if (res.code == 0) {
						this.tpCount = res.data ? res.data : 0;
					}
				});
			},
			getTpMy() {
				this.$Request.getT('/app/message/selectMessageByUserId?page=1&limit=1&state=11').then(res => {
					if (res.code == 0) {
						if (res.data && res.data.list && res.data.list.length > 0) {
							this.tpSel = 1;
						} else {
							this.tpSel = 2;
						}
					}
				});
			},
			selectCity(longitude, latitude) {
				this.$Request.get('/app/Login/selectCity?lat=' + latitude + '&lng=' + longitude).then(res => {
					if (res.code == 0) {
						this.city = res.data.city ? res.data.city : '未知'
						uni.setStorageSync('city', res.data.city)
						this.page = 1
						this.getorderlist('')
						this.getKTCityList();
					}
				});
			},
			chaoji(){//超级满减
				uni.navigateTo({
					url:'/my/wallet/index'
				})
			},
			xinren(){//新人专享
				var that=this;
				that.$Request.get('/app/coupon/insertNewUserCoupon').then(res => {
					if (res.code == 0) {
						uni.showToast({
							title:res.msg
						})
					}else{
						uni.showToast({
							icon:'error',
							title:res.msg
						})
					}
				})
			},
			goNav(e){
				if(e!=undefined){
					uni.navigateTo({
						url:e
					})
				}else{
					uni.showToast({
						title:'敬请期待！'
					})
				}
				
			},
			// chooseItem(item){
				
			// },
			chooseItem(e) {//点击某一个item 推荐明星
				console.log('授权', uni.getStorageSync('sendMsg'))
				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)
						}
					})
				}
				if (this.token) {
					uni.navigateTo({
						url: '/pages/therapist/orderDetail?artificerId=' + e.artificerId + "&classifyId=" + this
							.tabIndex
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			
			},
			goOrder(e) {
				console.log('授权', uni.getStorageSync('sendMsg'))
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							console.log(JSON.stringify(re), 'asdasdasdasddas')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				if (this.token) {
					uni.navigateTo({
						url: '/pages/therapist/orderDetail?artificerId=' + e.artificerId + "&classifyId=" + this.tabIndex
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			
			},
			gengduo(){
				uni.reLaunch({
					url:'/pages/therapist/therapist'
				})
			},
		
			getCity(e) {
				this.city = e[0].label;
				uni.setStorageSync('city', this.city)
				this.getKTCityList();
				this.getHomeArtificerList();
				// this.page = 1
				// this.getlist()
			},
			getKTCityList() {
				this.$Request.getT('/app/trip/selectTripList').then(res => {
					if (res.code == 0) {
						this.cityList = [];
						let isOpen = false
						let cityName = uni.getStorageSync('city') ? uni.getStorageSync('city') : '请选择城市'
						res.data.forEach((d, index) => {
							if (cityName === d.city) {
								isOpen = true;
							}
							let data = {}
							data.label = d.city
							data.value = index
							this.cityList.push(data);
						});
			
						if (!isOpen) {
							this.orderList = []
							// this.showTP = true;
						} else {
							this.showTP = false;
						}
					}
				});
			},
			showCityList() {
				// #ifdef APP-PLUS
				if (this.latitude === '' || this.longitude === '') {
					this.checkPermission();
					return;
				}
				// #endif
				this.Cityshow = true;
			},
			onSearch(e) {
				// this.artificerName = e;
				this.getlist()
			},
			async checkPermission() {
				let status = permision.isIOS ? await permision.requestIOS('location') : await permision.requestAndroid(
					'android.permission.ACCESS_FINE_LOCATION');
				if (status === null || status === 1) {
					status = 1;
				} else if (status === 2) {
					uni.showModal({
						content: "系统定位已关闭",
						confirmText: "确定",
						showCancel: false,
						success: function(res) {}
					})
				} else if (status.code) {
					uni.showModal({
						content: status.message
					})
				} else {
					uni.showModal({
						title: '定位服务已关闭',
						content: "您需要打开定位权限，否则我们将无法获得到您附近的项目服务，导致我们无法为您提供服务，请到>设置>隐私>定位服务>中开启【盛安到家】定位权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},
			getHomeArtificerList(){
				var data={
						  isStart: 1,
						  status: 1,
						  city: this.city,
						  longitude:this.longitude,
						  latitude:this.latitude,
						  page: 1,
						  limit: 3
						}
				this.$Request.get("/app/artificer/getHomeArtificerList",data).then(res => {
					if (res.code == 0) {
							this.starTechnician = res.startData.list;
							this.nearbyTechnician=res.nearData.list
							console.log("starTechnician",res.startData.list)
							// this.classifyId = res.data[0].id;
							// this.getorderlist('')
					}
				});
			},
			//获取轮播图
			getBannerList() {
			
				this.$Request.get("/app/dict/list", {
					type: '服务类型'
				}).then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.typeList = res.data
							// this.classifyId = res.data[0].id;
							// this.getorderlist('')
						}
					}
				});
			},
			goDatail(item){//热门精选，推荐套餐 跳详情
				if(this.currentTabFl=='1'){
					uni.navigateTo({
						url:'/pages/my/fuwuDateil?id='+item.massageTypeId+'&limit='+this.limit+'&page='+this.page
					})
				}else if(this.currentTabFl=='2'){
					uni.navigateTo({
						url:'/pages/my/serviceOderDrtail?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+'index'+'&isCanCoupon='+item.isCanCoupon
					})
				}
			},
			chengFel(item){//大家常买。。。 导航切换
				this.currentTabFl=item.id;
				if(this.currentTabFl=='1'){
					this.remen()
				}else if(this.currentTabFl=='2'){
					this.tjtaocan()
				}else if(this.currentTabFl=='3'){
					uni.navigateTo({
						url:'/pages/my/fuwuxiangm'
					})
				}else{
					uni.navigateTo({
						url:'/pages/my/fuwuGengduo'
					})
				}
			},
			tjtaocan(){//推荐套餐
				this.$Request.get("/app/massage/package/findPage", {
					type:'104',
					page:'1',
					limit:'2'
				}).then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.tjData = res.data.list
						}
					}
				});
			},
			remen(){//热门精选
				this.$Request.get("/app/artificer/selectMassageTypePage", {
					by: '3',
					status:'1',
					page:'1',
					limit:'2'
				}).then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.tjData = res.data.list
						}
					}
				});
			},
			swichMenu(id) {//视频导航
				this.currentTab = id
				console.log(11,id)
				//this.tabCurrent = 'tabNum'+ id
				
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				this.scrollLeft = 0;
				for (let i = 0; i < id; i++) {
					this.scrollLeft += 60
					console.log(this.scrollLeft ,60,id)
				};
			},
			swiperChange(e) {//视频导航
				console.log(22,e.detail.current)
				let index = e.detail.current
				this.swichMenu(index)
				
			},
			
		}
	}
</script>

<style scoped>
	.index-card-image{
		width: 100%;
		height: 100%;
	}
	.content_bj{
		height:100%;
		background:#fff url(../../static/background-img.png)no-repeat top;
	}
	.index-card-view-title{
		position: relative;
		width: 100%;
		height: 337.5rpx;
		display: flex;
		flex-direction: row;
		border-radius: 30px;
	}
	/deep/.u-select{
		width: 100%;
		height: 100%;
	}
	/deep/.u-select__header{
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: space-between;
	    height: 38px;
	    padding: 0 19px;
	}
	/deep/.u-content,/deep/.u-search{
		flex: none;
		width: 250px;
		border-radius: 32rpx !important;
		height: 64rpx !important;
	}
	/deep/.u-action{
		display: none;
	}
	.dingwei-img{
		width:33.33rpx;
		height:37.5rpx;
	}
	.localName{
		margin-left: 4rpx;
		font-weight: bold;		
		color: #333333;
	}
	.menu-topic-act .menu-topic-bottom-color {
		background: linear-gradient(90deg,rgba(234, 248, 245,0.7),rgba(132, 211, 196,0.7));
	}
	
	
	/* 字体 */
	.font-size-19{
		font-size: 19rpx;
	}
	.font-size-34{
		font-size: 34.72rpx;
	}
	.width{
		width: 95%;
	}
	/* 样式 */
	.index-taocan-view-nav:last-child .fenjie{
		display: none;
	}
	.index-taocan-view-nav-s{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.index-taocan-view-nav{
		width: 25%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.swiper-item span:nth-child(1){
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin:10px 0px;
	}
	.swiper-item span:nth-child(2){
		ont-weight: 400;
		font-size: 25rpx;
		color: #999999;
	}
	.swiper-item{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.swiper-item-card{
		width: 337rpx;
		display: flex;
		flex-direction: column;
	}
	.swiper-back-img{
		width: 100%;
		height: 338rpx;
		background-color:rgba(0, 0, 0, 0.2);
		border-radius: 17rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(../../static/yuyue.png) 100% no-repeat;
	}
	.swiper-back-img image{
		width: 91.67rpx;
		height: 93.06rpx;
	}
	
	.body-view {
		width: 100%;
		overflow: hidden;
	}
	/deep/.uni-scroll-view-content{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.top-menu-view {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		white-space: nowrap;
		background: linear-gradient(180deg,rgba(217, 240, 237,0.6),rgba(255, 255, 255,0.6));
		background-color:rgba(1, 156, 136, 0.2);
		height: 108rpx;
		line-height: 108rpx;
	}
	.menu-topic-text {
		font-size: 32rpx;
		color: #676767;
		padding: 10rpx 40rpx;
		font-weight: 500;
	}
	.menu-topic-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	
	.menu-topic-view {
		display: inline-block;
		white-space: nowrap;
		height: 86rpx;
		position: relative;
	}
	.menu-topic-act .menu-topic-bottom {
		display: flex;
		justify-content: center;
	}
	.menu-topic-act .menu-topic-text{
		color: #000000;
		font-weight: bold;
	}
	.menu-topic-bottom-color {
		width: 62.5rpx;
		height: 4px;
		position: absolute;
		z-index: 66;
		margin-top: -23px;
	}
	/deep/.menu-topic-act{
		position: relative;
	}
	
	.swiper-box-list {
		width: 95%;
		margin: 5px auto;
		flex:1;
		background-color: #FFFFFF;
		height: 490px;
	}
	.swiper-topic-list {
	     width: 100%;
		 display: flex;
		 flex-direction: row;
		 justify-content: space-between;
		flex-wrap: wrap;
	 }
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
	
	
	.index-card-mian-biao-left,.index-card-mian-biao-right{
		padding: 5px 10px;
	}
	.index-card-mian-biao-right{
		background-color:rgba(4, 184, 119, 0.12);
		border-radius: 3rpx;
		font-weight: 400;
		font-size: 21rpx;
		color: #0EBE80;
		margin-left: 10px;
	}
	.index-card-mian-biao-left{
		background-color:rgba(253, 197, 128, 0.2);
		border-radius: 3rpx;
		font-weight: 400;
		font-size: 21rpx;
		color: #FFA12D;
	}
	.index-card-mian-biao{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.index-card-mian-title{
		font-weight: bold;
		font-size: 31rpx;
		color: #333333;
		text-align: center;
	}
	.marginTop{
		margin-bottom: 10px;
	}
	.index-card-mian{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}
	.index-card-view-title-right{
		width: 65px;
		height: 47rpx;
		line-height: 47rpx;
		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
		border-top-left-radius: 10px;
		border-bottom-right-radius: 10px;
		text-align: center;
		font-weight: 400;
		font-size: 21rpx;
		color: #fff;
		position: absolute;
		/* margin-left: 85px; */
	}
	.index-card-view-title-left{
		width: 95px;
		height: 46.53rpx;
		line-height: 46.53rpx;
		font-weight: 400;
		font-size: 21rpx;
		text-align: center;
		color:#333333;
		border-top-left-radius: 30px;
		background-color: rgba(176, 176, 176, 0.48);
	}
	
	.index-card-mian-time,.index-card-mian-money{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.index-card-mian-money-zhen{
		font-weight: 400;
		font-size: 31rpx;
		color: #000000;
	}
	.index-card-mian-money-jia{
		margin-left: 10px;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		text-decoration-line: line-through;
	}
	.index-card-mian-time span{
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}
	.index-card-mian-time image{
		width: 20.83rpx;
		height: 20.83rpx;
		margin-right: 10px;
	}
	.index-card-view{
		width: 336.81rpx;
		display: flex;
		flex-direction: column;
	}
	.tuijian-view{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
	}
	.index-card{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
	}
	.fenjie{
		width: 1rpx;
		height: 32rpx;
		background: #CCCCCC;
	}
	
	.index-taocan-view-nav-text{
		font-weight: bold;
		font-size: 28rpx;
	}
	.index-taocan-view-nav-jie{
		font-weight: 400;
		font-size: 20rpx;
		color: #999;
	}
	.activeL{
		color: #019C88;
	}
	.activeXL{
		color: #2FC590;
	}
	.activeH{
		color: #333333;
	}
	.activexH{
		color: #999999;
	}
	.feng_word{
		font-size: 25rpx;			
	}
	.index-taocan-view{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.index-taocan{
		margin: 15px auto 0px auto;
		display: flex;
		flex-direction: column;
	}
	.index-fujin-jie-id{
		height: 30rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		text-align: center;
		display: table;
		width: 100px;		
		white-space: pre-wrap;		
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.index-fujin-jie-name{
		margin-bottom: 5px;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}
	.index-fujin{
		width: 100%;
		height: 290px;
		background: linear-gradient(0deg, #fff, #F4FFFB);
	}
	.index-fujin-jie-view{
		width: 222.22rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
	}
	.index-fujin-jie{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.fujin-view{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.index-fujin-view{
		width: 222.22rpx;
		position: relative;
		display: flex;
		align-items: center;
		height: 313rpx;
	}
	.index-fujin-view-img{
		width: 100%;
		height: 308.5rpx;
		border-radius: 14rpx;
	}
	.index-fujin-view-text{
		width: 100%;
		height: 63px;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		background: linear-gradient(4deg,rgba(0, 156, 136,0.6),rgba(0, 156, 136, 0));
		border-radius: 0px 0px 7px 7px;
		position: absolute;
		bottom:1px;
		
		padding-bottom: 13px;
	}
	.index-fujin-img{
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.index-fujin-view-text span{
		font-weight: 400;
		font-size: 25rpx;
		color: #FFFFFF;
	}
	.index-fujin-view-text image{
		width: 20.83rpx;
		height: 23.61rpx;
		margin-right: 5px;
	}
	
	.index-fujin-title-left image{
		width: 33.33rpx;
		height: 33.33rpx;
		margin-right: 10px;
	}
	.index-fujin-title-left span{
		font-weight: bold;
		font-size: 31rpx;
		color: #333333;
	}
	.index-fujin-title-left-text,.index-fujin-title-left-btn{
		font-weight: 400;
		font-size: 21rpx;
		color: #878787;
	}
	.index-fujin-title-left-btn{
		margin-left: 10px;
	}
	.index-fujin-title-left,.index-fujin-title-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.index-fujin-title{
		margin:0 auto;
		padding: 15px 0px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}
	
	.index-guanggao-pintuan{
		width: 340.28rpx;
		height: 100%;
	}
	.index-guanggao-right{
		width: 360.28rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		}
	.index-guanggao-right-cika{
		width: 100%;
		height: 200.56rpx;
		margin-bottom: 10rpx;
		}
	.index-guanggao-right-yuyue{
		width: 100%;
		height: 200.56rpx;
		}
	.index-guanggao{
		margin:10px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 426.39rpx;
	}
	.index-project{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin:0 10px 15px 10px;
	}
	.index-project-content image{
		width: 68.75rpx;
		height: 72.22rpx;
	}
	.index-project-content {
	  display: flex;
	  flex-direction: column;
	  flex-basis: 20%;
	  align-items: center;
	  margin-top: 15px;
	  height: 58px;
	}
	.star-technician-name{
		font-weight: bold;
		font-size: 37rpx;
		color: #FFFFFF;
	}
	.star-technician-name-bot{
		font-weight: 400;
		font-size: 21rpx;
		color: #FFFFFF;
		opacity: 0.7;
		margin-left: 10px;
	}
	.star-technician-gengguo{
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
	}
	.star-technician-top-text{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.title-star{
		width: 95.3%;
		margin: 0 auto;
		display: flex;
		height: 51px;
	}
	.star-technician-top{
		width: 100%;
		height: 100%;
		padding: 0px 20px;
		background-image: url(../../static/frame.png);
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		}
	.star-technician-mian{
		width: 100%;
		height: 100%;
	}
	.star-technician{
		position: relative;
		margin: -15px auto 0px auto;
		height: 260px;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 0px 0px 12px 12px;
		border: 4.5px solid #049E89;
		padding: 0px 8px;
	}
	.index-gun{
		width: 400px !important;
		white-space: nowrap;
		overflow-x: scroll;
	}
	.index-fenl{
		overflow: hidden;
		height: 40px;
		margin: 0 auto;
	}
	.fenl:nth-child(1){
		padding-left: 0px !important;
	}
	.fenl{
		display: inline-block;
		padding: 0px 10px;
		text-align: center;
		color: #666666;
		font-weight: 500;
		font-size: 34rpx;
	}
	.index-nav-bottom image{
		width: 350.11rpx;
		height: 182.64rpx;
	}
	.index-nav-bottom{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0px auto 8px auto;
	}
	/deep/.uni-select__selector{
		width: 200px;
	}
	.index-mian-select image{
		width: 16px;
		height: 8px;
		margin-left: 5px;
	}
	.index-mian-select{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.index-mian{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0px;
		padding: 0px 10px;
	}
	
	/deep/.uni-select__input-box .uni-icons {
	  display: none;
	}
	/deep/.uni-select__input-text{
		font-weight: bold;
		font-size: 29rpx;
	}
	/deep/.uni-select{
		border: 0px;
		padding: 0px;
	}
	/deep/.uni-searchbar .uni-searchbar__cancel{
		display: none;
	}
	/deep/.uni-searchbar{
		padding: 0px;
	}
	/deep/.uni-searchbar__box{
		border-radius: 30px !important;
		width: 300px;
		height: 63.89rpx;
	}
	.index-top-mian{
		display: flex;
		flex-direction: row;
	}
	.index-top-left{
		color: #019C88;
		font-weight: bold;
	}
	.index-top-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.index-top-right image{
		width: 13px;
		height: 12px;
		margin-right: 5px;
	}
	.index-top-mian-text{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 10px;
	}
	.index-top-mian-text span{
		color: #019c88;
		font-weight: 400;
		margin-left: 5px;
	}
	.index-top-mian-text image{
		width: 20.14rpx;
		height: 15.28rpx;
	}
	
	.index-top{
		width:95%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
	}
	.index-head{
		width: 100%;	
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		padding-top: 10px;
	}
	.content {
		width: 100%;
		height: 100vh;
		overflow: auto;
	}
</style>