anmo-user/pages/index/index1.vue

<template>
	<view class="">
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="padding-lr padding-top-sm bg flex " @click.stop="goSearch(1)">
				<view class="flex justify-between margin-right-sm" @tap.stop="goSelectCity" style="line-height: 68rpx;">
					<image src="../../static/images/index/place.png" style="width: 27rpx;height: 37rpx;"
						class="margin-top-xs"></image>
					<view class="localName text-white margin-left-sm">{{city}}</view>
				</view>
				<u-search class="flex-sub" placeholder="搜索你需要的服务" shape="square" disabled :show-action="false"
					:animation="true" bg-color="#F7F7F7" color="#1A1A1A"></u-search>
			</view>

			<view v-if="tabIndex == 0" class="bg">
				<view class="padding-lr-sm ">
					<swiper class="screen-swiper" style="height: 260rpx;" :circular="true" :autoplay="true"
						interval="2500" duration="800">
						
						
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<image :src="item.imageUrl" mode="aspectFit" class="radius"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="bg" style="color: #333333;">
					<u-grid :col="5" :border="false">
						<u-grid-item v-for="(item,index) in gridData" :key='index' @click="goNav(item.url)">
							<image :src="item.imageUrl" style="width: 92rpx;height: 92rpx;border-radius: 92rpx;">
							</image>
							<view class="grid-text" style="font-size: 25rpx;margin-top: 10rpx;">{{item.name}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<ren-dropdown-filter :filterData='filterData' :border="false" :defaultIndex='defaultIndex'
				@onSelected='change' class="u-skeleton-rect">
			</ren-dropdown-filter>

			<view style="background-color: #FFFFFF;" v-if="orderList.length">
				<view class="flex margin-bottom-sm bg padding-sm radius margin-lr-sm margin-top-sm "
					v-for="(item,index) in orderList" :key='index' @click="goOrder(item)" style="box-shadow: 6rpx 10rpx 4px #F5F5F5;">
					<view style="width: 220upx;height: 160upx;border-radius: 10rpx;">
						<image :src="item.massageImg?item.massageImg: '../../static/logo.png'"
							style="width: 220upx;height: 160upx;border-radius: 10upx;"></image>
					</view>
					<view class="margin-left text-white flex flex-direction" style="width: 65%;">
						<view class="flex justify-between">
							<view class="text-bold text-lg margin-left-xs">{{item.title}}</view>
							<view style="color: #999999;font-size: 22upx;">已售{{item.sales}}</view>
						</view>
						<view class="flex flex-wrap" style="margin-top: 10rpx;" v-if="item.labels.length>0">
							<text class="margin-bottom-xs box" v-for="(items,index) in item.labels"
								:key="index">{{items}}</text>
						</view>
						<!-- <view class="text-cut" style="color: #999999;">{{item.describes}}</view> -->
						<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
							<view style="color:#FF1200;font-size: 24upx;" v-if="isVip == false">
								￥<text
									style="font-size: 32upx;font-weight: bold;">{{item.price}}/</text>{{item.duration}}分钟
							</view>
							<view style="color:#FF1200;font-size: 24upx;" v-else>
								￥<text
									style="font-size: 32upx;font-weight: bold;">{{item.memberPrice}}/</text>{{item.duration}}分钟
							</view>
							<!-- <view class="text-green text-df">
								￥<text
									class="text-green text-xl text-bold">{{item.price}}</text>/<text class="text-sm">会员价:￥{{item.memberPrice}}</text>/</text>{{item.duration}}分钟
							</view> -->
							<view v-if="XCXIsSelect != '否'"
								style="background: #2FB57A;color: #ffffff;line-height: 56upx;border-radius: 8rpx;font-size: 24upx;padding: 0upx 23upx;"
								>
								选择技师
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty v-if="orderList.length == 0"></empty>
		</mescroll-body>
		<!-- <u-skeleton :loading="loading" :animation="true" elColor='#FFFFFF' bgColor='#FFFFFF'></u-skeleton> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '@/components/empty.vue'

	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			mescrollBody,
			meTabs,
			empty,
			RenDropdownFilter
		},
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				defaultSelected: [],
				tabIndex: 0, // tab下标
				tabData: [{
					createTime: "",
					gameName: '推荐',
					gameImg: "",
					id: 0,
					status: 0,
					updateTime: "",
				}],
				swiperList: [],
				gridData: [],

				value1: 0,
				value2: 0,
				value3: 0,
				game: [],
				defaultIndex: [0, 0, 0],
				filterData: [
					[{
						label: '推荐',
						value: '',
					}, ],
					[{
							label: '价格',
							value: '0',
						},

						{
							label: '从高到低',
							value: '1',
						},
						{
							label: '从低到高',
							value: '2',
						}
					],
					[{
							label: '销量',
							value: '0',
						},
						{
							label: '从高到低',
							value: '1',
						},
						{
							label: '从低到高',
							value: '2',
						}
					],
				],

				city: '请选择城市',
				latitude: '',
				longitude: '',
				orderList: [],
				token: '',
				XCXIsSelect: '否',
				isVip: false,
				myId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
				showModal: true,
				arr: [],
				tab: '',
				age: 0,
				birthDate: ''

			}
		},
		onLoad(e) {
			let that = this
			that.XCXIsSelect = that.$queue.getData('XCXIsSelect');
			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)
					let data = {
						num: 1,
						size: 10
					}
					that.getData(data)

					// #endif

					// #ifdef H5

					that.selectCity(that.longitude, that.latitude);
					// #endif

					// #ifdef MP-WEIXIN
					that.selectCity(that.longitude, that.latitude);
					// uni.request({
					// 	url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + that.latitude +
					// 		',' + that.longitude + '&key=5DLBZ-QYMR6-334SQ-MOZUI-Z3GVO-SBFB4',
					// 	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)
					// 			let data = {
					// 				num: 1,
					// 				size: 10
					// 			}
					// 			that.getData(data)
					// 		} else {
					// 			console.log("获取信息失败，请重试！")
					// 		}
					// 	}
					// });
					// #endif
				},
				fail: function() {
					console.log('获取地址失败')
				}
			})

			// 获取邀请码保存到本地
			if (e.invitation) {
				that.$queue.setData('inviterCode', e.invitation);
			}

			if (this.myId) {
				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)
						}
					}
				})

			}
		},
		onShow() {
			let that = this

			that.city = uni.getStorageSync('city') ? uni.getStorageSync('city') : '请选择城市'
			that.getBannerList()
			that.getGrid()

			// that.getRenZheng()

			that.token = uni.getStorageSync('token')
			if (uni.getStorageSync('token')) {
				that.getIsVip()
			}
			that.myId = uni.getStorageSync('userId')
			// #ifdef MP-WEIXIN
			//订阅
			if (that.myId) {
				if (this.showModal) {
					this.openMsg()
				}
			}
			// #endif
			let data = {
				num: 1,
				size: 10
			}
			that.getData(data)
			// that.mescroll.resetUpScroll()
		},
		methods: {
			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)
						let data = {
							num: 1,
							size: 10
						}
						this.getData(data)
					}
				});
			},
			// 开启订阅消息
			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
									}
								}
							})
						}
					}
				})
			},
			getIsVip() {
				this.$Request.get("/app/UserVip/isUserVip").then(res => {
					if (res.code == 0) {
						this.isVip = res.data
						uni.setStorageSync('isVIP', res.data)
					}
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				// this.$refs.uDropdown.close();
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {

				this.getData(page)
			},
			getData(page) {
				let data = {
					// id: curTab,
					page: page.num,
					limit: page.size,
					status: 1,
					// isRecommend: num,
					condition: this.value1, //智能优选
					by: this.value2, //销量
					authentication: this.value3, //价格
					latitude: this.latitude,
					longitude: this.longitude,
					city: this.city
				}
				this.$Request.get("/app/artificer/selectMassageTypePage", data).then(res => {
					this.mescroll.endBySize(res.data.list.length, res.data.list)
					this.loading = false;
					if (res.code == 0) {
						if (page.num == 1) {
							this.orderList = res.data.list
							for (let i = 0; i < this.orderList.length; i++) {
								this.orderList[i].labels = this.orderList[i].labels.split(",");

							}
						} else {
							this.orderList = [...this.orderList, ...res.data.list]
							for (let i = 0; i < this.orderList.length; i++) {
								this.orderList[i].labels = this.orderList[i].labels.split(",");

							}
						}

					}
					this.mescroll.endSuccess(res.data.list.length); // 隐藏加载状态栏
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
				// this.getClassfly()
				this.getBannerList()
				this.getGrid()

			},
			// 切换菜单
			tabChange() {
				if (uni.getStorageSync('sendMsg')) {
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				this.defaultIndex = [0, 0, 0]
				// this.$refs.uDropdown.close();
				// this.orderList = []; // 置空列表,显示加载进度条
				this.mescroll.resetUpScroll()
			},
			// 筛选
			change(e) {
				console.log(e)
				this.value1 = e[0][0].value
				this.value3 = e[1][0].value
				this.value2 = e[2][0].value
				this.mescroll.resetUpScroll()
			},
			// 选择城市
			goSelectCity() {
				uni.navigateTo({
					url: '/pages/index/citys/citys'
				});
			},
			// 跳转游戏列表
			goNav(url) {
				if (uni.getStorageSync('sendMsg')) {
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				if (url.indexOf('/pages/') !== -1) {
					uni.navigateTo({
						url
					});
				} else {
					//#ifndef H5
					uni.navigateTo({
						url: '/pages/index/webView?url=' + url
					});
					//#endif
					//#ifdef H5
					window.location.href = url;
					//#endif
				}
			},
			//获取轮播图
			getBannerList() {
				this.$Request.get("/app/banner/selectBannerList", {
					classify: 1
				}).then(res => {
					if (res.code == 0) {
						this.swiperList = res.data
					}
				});
			},
			// 获取金刚区分类
			getGrid() {
				this.$Request.get("/app/banner/selectBannerList", {
					classify: 2
				}).then(res => {
					if (res.code == 0) {
						this.gridData = res.data
						// console.log(this.gridData, '；；；；；；')
					}
				});
			},
			// 跳转搜索
			goSearch(index) {
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				uni.navigateTo({
					url: '/pages/index/search/index?index=' + index
				});
			},
			// 跳转订单
			goOrder(e) {
				console.log('授权', uni.getStorageSync('sendMsg'))
				if (uni.getStorageSync('sendMsg')) {
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							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/index/order/order?massageTypeId=' + e.massageTypeId
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.bg {
		background: #FFFFFF;
	}

	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	/* // 使用mescroll-uni,则top为0 */
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	.line_s {
		display: inline-flex;
		width: 10rpx;
		height: 10rpx;
		background: #1AD566;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.line_x {
		display: inline-flex;
		width: 10rpx;
		height: 10rpx;
		background: #000000;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.box {
		// border: 3rpx solid #005dff;
		background: #E8FAE1;
		color: #2FB57A;
		padding: 5rpx 15rpx;
		font-size: 24upx;
		letter-spacing: 2rpx;
		border-radius: 8rpx;
		// margin-top: 10rpx;
		margin-right: 8upx;
	}
</style>