612 lines
16 KiB
Vue
612 lines
16 KiB
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: #096f4b;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
|
||
}
|
||
// debugger;
|
||
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: #096f4b;
|
||
padding: 5rpx 15rpx;
|
||
font-size: 24upx;
|
||
letter-spacing: 2rpx;
|
||
border-radius: 8rpx;
|
||
// margin-top: 10rpx;
|
||
margin-right: 8upx;
|
||
}
|
||
</style>
|