You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
470 lines
11 KiB
470 lines
11 KiB
<template>
|
|
|
|
<TabLayout ref='tabLayout' text="选择球馆" :tabTitleData="page.tabTitle" @tabClickItem='clickTab' @downRefresh="down">
|
|
|
|
<swiper style="min-height: 100vh;" :current="page.currentTab" @change="swiperTab">
|
|
<swiper-item v-for="(listItem,listIndex) in data.tabList" :key="listIndex" style="box-sizing: border-box;">
|
|
|
|
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1">
|
|
|
|
<view :style="{'width': '100%','padding-top': page.paddingTop}">
|
|
|
|
<loading v-if="page.showLoading[listIndex]" :key='listIndex'></loading>
|
|
|
|
<view class="outer" v-for="(item,index) in listItem">
|
|
|
|
<view class="Item">
|
|
|
|
<image class="Img" :src="item.logo" mode="aspectFill" @click="img(item.sid)"></image>
|
|
|
|
<view class="Right" @click="right(item.sid,item.name)">
|
|
|
|
<text class="gameTv">{{item.name}}</text>
|
|
<text class="gameTv2">{{item.address}}</text>
|
|
<!-- <text class="gameTv2">{{item.linkerName+" "+item.linkerPhone}}</text> -->
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<loading v-if="page.showBottomLoading[listIndex]" :key="'bottom'+listIndex"></loading>
|
|
|
|
<noData v-if="page.showNoData[listIndex]" :key="'nodata'+listIndex"></noData>
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
|
|
</TabLayout>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
const util = require('../../util/util.js');
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
page: {
|
|
tabTitle: ['常驻球馆', '所有球馆'],
|
|
tabType: ["gms/v1/userGymnasiumsManagement/getUserGymnasiumList",
|
|
"gms/v1/gymnasiumsManagement/getGymnasiumAreaVoPagerList"
|
|
],
|
|
currentTab: 0,
|
|
pages: [1, 1], //第几个swiper的第几页
|
|
nowLoadingPages: [false, false], //是否正在加载
|
|
paddingTop: '0px',
|
|
showLoading: [false, false],
|
|
showBottomLoading: [false, false],
|
|
showNoData: [false, false],
|
|
city: "石家庄",
|
|
code: "1301"
|
|
},
|
|
data: {
|
|
tabList: [
|
|
[],
|
|
[],
|
|
[],
|
|
[]
|
|
]
|
|
},
|
|
info: {
|
|
address: "",
|
|
placeName: ''
|
|
}
|
|
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
|
|
let find_city_code = this.ReadPreference("find_city_code")
|
|
let find_city = this.ReadPreference("find_city")
|
|
|
|
let _this = this
|
|
this.$nextTick()
|
|
.then(function() {
|
|
_this.page.paddingTop = _this.$refs.tabLayout.getViewPagerTop()
|
|
})
|
|
|
|
if (this.IsEmpty(find_city_code)) {
|
|
// 首次进入
|
|
find_city_code = 0;
|
|
|
|
// 获取定位
|
|
let _this = this;
|
|
// 获取定位
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success: function(res) {
|
|
|
|
let locat = res
|
|
|
|
// 先写入定位
|
|
_this.location = {
|
|
latitude: locat.latitude,
|
|
longitude: locat.longitude
|
|
}
|
|
|
|
let url =
|
|
"https://restapi.amap.com/v3/geocode/regeo?key=b564c757b4cf4fd4a5d914625ca9373f&location=" +
|
|
res.longitude +
|
|
"," + res.latitude +
|
|
"&poitype=&radius=1000&extensions=all&batch=false&roadlevel=0";
|
|
|
|
_this.HttpOtherUrl({
|
|
url: url
|
|
}).then((res) => {
|
|
|
|
let json = JSON.stringify(res);
|
|
let info = JSON.parse(json).regeocode.addressComponent;
|
|
// 城市
|
|
let city = info.city;
|
|
// 城市编码
|
|
let code = info.adcode;
|
|
|
|
// 获取到正确的城市编码
|
|
if (code > 0) {
|
|
|
|
// 保存本次定位
|
|
_this.WritePreference("find_city", city)
|
|
_this.WritePreference("find_city_code", code)
|
|
|
|
_this.page.code = code
|
|
_this.page.city = city
|
|
_this.page.tabTitle[1] = "所有球馆(" + _this.page.city + ")"
|
|
|
|
} else {
|
|
|
|
// 未获取到正确的城市编码
|
|
_this.WritePreference("find_city", "石家庄")
|
|
_this.WritePreference("find_city_code", "1301")
|
|
|
|
_this.page.code = "1301"
|
|
_this.page.city = "石家庄"
|
|
_this.page.tabTitle[1] = "所有球馆(" + _this.page.city + ")"
|
|
|
|
}
|
|
}, (err) => {
|
|
|
|
//获取当前城市失败
|
|
_this.WritePreference("find_city", "石家庄")
|
|
_this.WritePreference("find_city_code", "1301")
|
|
|
|
_this.page.code = "1301"
|
|
_this.page.city = "石家庄"
|
|
_this.page.tabTitle[1] = "所有球馆(" + _this.page.city + ")"
|
|
|
|
})
|
|
},
|
|
fail(err) {
|
|
// 定位失败
|
|
_this.WritePreference("find_city", "石家庄")
|
|
_this.WritePreference("find_city_code", "1301")
|
|
|
|
_this.page.code = "1301"
|
|
_this.page.city = "石家庄"
|
|
_this.page.tabTitle[1] = "所有球馆(" + _this.page.city + ")"
|
|
}
|
|
});
|
|
|
|
} else {
|
|
this.page.code = find_city_code
|
|
this.page.city = find_city
|
|
this.page.tabTitle[1] = "所有球馆(" + this.page.city + ")"
|
|
}
|
|
|
|
// 加载第一页数据
|
|
this.down(0)
|
|
},
|
|
methods: {
|
|
img(sid) {
|
|
uni.navigateTo({
|
|
url: 'ArenaDetailActivity?sid=' + sid
|
|
})
|
|
},
|
|
right(sid, name) {
|
|
this.info.sid = sid
|
|
this.info.name = name
|
|
console.log("传值>" + JSON.stringify(this.info))
|
|
this.SetResult(this.info)
|
|
},
|
|
// swiper 滑动
|
|
swiperTab: function(e) {
|
|
// 模拟tab点击
|
|
this.$refs.tabLayout.changeTab(e);
|
|
},
|
|
clickTab(index) {
|
|
this.page.currentTab = index
|
|
// 每次切换时都重新加载页面
|
|
this.down(index)
|
|
},
|
|
down(index) {
|
|
// 下拉刷新请求 并更改数据
|
|
|
|
let _this = this
|
|
|
|
this.data.tabList[index] = []
|
|
//二维数组，开启强制渲染
|
|
_this.$forceUpdate()
|
|
|
|
// 初始化当前的页数
|
|
this.page.pages[index] = 1
|
|
// 当前页数的加载状态
|
|
this.page.nowLoadingPages[index] = true
|
|
|
|
// 只要切换页面就显示
|
|
this.page.showLoading[index] = true
|
|
this.page.showNoData[index] = false
|
|
|
|
if (index == 0) {
|
|
this.Login()
|
|
.then((res) => {
|
|
|
|
let path = index == 0 ? "/" + getApp().globalData.memberSid : "";
|
|
|
|
this.HTTP({
|
|
url: _this.page.tabType[index] + path,
|
|
method: index == 0 ? 'GET' : 'POST',
|
|
paramsType: index == 0 ? 'FORM' : "JSON",
|
|
data: index == 0 ? {} : {
|
|
"current": 1,
|
|
"size": 10,
|
|
"params": {
|
|
"memberSid": getApp().globalData.memberSid,
|
|
"regionId": _this.page.code
|
|
}
|
|
}
|
|
}).then((res) => {
|
|
// 当前页数的加载状态
|
|
_this.page.nowLoadingPages[index] = false
|
|
// 填充数据
|
|
_this.data.tabList[index] = res.data
|
|
_this.$refs.tabLayout.downRefresh()
|
|
//二维数组，开启强制渲染
|
|
_this.$forceUpdate()
|
|
// 关闭loading
|
|
_this.page.showLoading[index] = false
|
|
_this.page.showNoData[index] = res.data.length == 0
|
|
}, (err) => {
|
|
// 当前页数的加载状态
|
|
_this.page.nowLoadingPages[index] = false
|
|
_this.$refs.tabLayout.downRefresh()
|
|
//二维数组，开启强制渲染
|
|
_this.$forceUpdate()
|
|
// 关闭loading
|
|
_this.page.showLoading[index] = false
|
|
_this.page.showNoData[index] = false
|
|
|
|
})
|
|
})
|
|
}else{
|
|
|
|
let path = index == 0 ? "/" + getApp().globalData.memberSid : "";
|
|
|
|
this.HTTP({
|
|
url: _this.page.tabType[index] + path,
|
|
method: index == 0 ? 'GET' : 'POST',
|
|
paramsType: index == 0 ? 'FORM' : "JSON",
|
|
data: index == 0 ? {} : {
|
|
"current": 1,
|
|
"size": 10,
|
|
"params": {
|
|
"memberSid": getApp().globalData.memberSid,
|
|
"regionId": _this.page.code
|
|
}
|
|
}
|
|
}).then((res) => {
|
|
// 当前页数的加载状态
|
|
_this.page.nowLoadingPages[index] = false
|
|
// 填充数据
|
|
_this.data.tabList[index] = res.data.records
|
|
_this.$refs.tabLayout.downRefresh()
|
|
//二维数组，开启强制渲染
|
|
_this.$forceUpdate()
|
|
// 关闭loading
|
|
_this.page.showLoading[index] = false
|
|
_this.page.showNoData[index] = res.data.records.length == 0
|
|
}, (err) => {
|
|
// 当前页数的加载状态
|
|
_this.page.nowLoadingPages[index] = false
|
|
_this.$refs.tabLayout.downRefresh()
|
|
//二维数组，开启强制渲染
|
|
_this.$forceUpdate()
|
|
// 关闭loading
|
|
_this.page.showLoading[index] = false
|
|
_this.page.showNoData[index] = false
|
|
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
request(index, pagerStart) {
|
|
|
|
let _this = this
|
|
|
|
let path = index == 0 ? "/" + getApp().globalData.memberSid : "";
|
|
|
|
this.HTTP({
|
|
url: _this.page.tabType[index] + path,
|
|
method: index == 0 ? 'GET' : 'POST',
|
|
paramsType: index == 0 ? 'FORM' : "JSON",
|
|
data: index == 0 ? {} : {
|
|
"current": pagerStart,
|
|
"size": 10,
|
|
"params": {
|
|
"memberSid": getApp().globalData.memberSid,
|
|
"regionId": _this.page.code
|
|
}
|
|
|
|
}
|
|
}).then((res) => {
|
|
|
|
// 重置加载状态
|
|
_this.page.nowLoadingPages[index] = false
|
|
_this.$refs.tabLayout.downRefresh()
|
|
_this.page.showBottomLoading[this.page.currentTab] = false
|
|
|
|
if (res.data.records.length == 0) {
|
|
_this.Toast('没有更多数据了')
|
|
//二维数组，开启强制渲染
|
|
_this.$forceUpdate()
|
|
return
|
|
}
|
|
|
|
_this.data.tabList[index] = _this.data.tabList[index].concat(res.data.records)
|
|
//二维数组，开启强制渲染
|
|
_this.$forceUpdate()
|
|
|
|
}, (err) => {
|
|
// 重置加载状态
|
|
_this.page.nowLoadingPages[index] = false
|
|
_this.$refs.tabLayout.downRefresh()
|
|
//二维数组，开启强制渲染
|
|
_this.$forceUpdate()
|
|
})
|
|
},
|
|
// 加载更多 util.throttle为防抖函数
|
|
lower1: util.throttle(function(e) {
|
|
|
|
if (this.page.nowLoadingPages[this.page.currentTab]) {
|
|
// 正在加载 拦截请求
|
|
return
|
|
}
|
|
|
|
this.page.showBottomLoading[this.page.currentTab] = true
|
|
//二维数组，开启强制渲染
|
|
this.$forceUpdate()
|
|
|
|
// 更改请求的页数
|
|
this.page.pages[this.page.currentTab]++
|
|
// 正在加载
|
|
this.page.nowLoadingPages[this.page.currentTab] = true
|
|
|
|
// 请求数据
|
|
this.request(this.page.currentTab, this.page.pages[this.page.currentTab])
|
|
|
|
}, 300)
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-left: 30rpx;
|
|
margin-right: 30rpx;
|
|
margin-top: 25rpx;
|
|
padding-bottom: 20rpx;
|
|
|
|
.textLogin {
|
|
background-color: #E91E63;
|
|
border-radius: 30rpx;
|
|
padding-left: 25rpx;
|
|
padding-right: 25rpx;
|
|
padding-top: 7rpx;
|
|
padding-bottom: 7rpx;
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.textGray3 {
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
margin-top: 5rpx;
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.outer {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 22rpx 38rpx;
|
|
box-sizing: border-box;
|
|
border-bottom: 0.1px #F1F1F1 solid;
|
|
|
|
.title {
|
|
padding-bottom: 22rpx;
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #007AFF;
|
|
overflow: hidden;
|
|
box-orient: vertical;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.Item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 144rpx;
|
|
box-sizing: border-box;
|
|
|
|
.Img {
|
|
height: 100%;
|
|
width: 220rpx;
|
|
margin-right: 15rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.Right {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
|
|
.gameTv {
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gameTv2 {
|
|
font-size: 25rpx;
|
|
margin-top: 10rpx;
|
|
color: #666666;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|