Skip to content

吴良建 / JinQiu

转到一个项目
切换导航栏
切换导航栏固定状态
Commit e87b9a02 由 吴良建
选项

添加加载中动画 和 空页面

1 个父辈 bd5e2032
内嵌 并排
正在显示 8 个修改的文件 包含 147 行增加 和 38 行删除
components/MatchList.vue
...@@ -60,9 +60,10 @@ ...@@ -60,9 +60,10 @@
style=" display: flex; align-items: center; width: 100%; justify-content: space-between;"> style=" display: flex; align-items: center; width: 100%; justify-content: space-between;">
<view <view
style="display: flex; flex: 1; flex-direction: row-reverse; ; width: 100%; margin-right: 75rpx; align-items: center;"> style="display: flex; flex: 1; flex-direction: row-reverse; ; width: 100%; margin-right: 75rpx; align-items: center;">
<text v-show="item.HostYellow" class="yellow_p">{{item.HostYellow}}</text> <text v-show="item.HostYellow" class="yellow_p">{{item.HostYellow}}</text>
<text v-show="item.HostRed" class="reb_p">{{item.HostRed}}</text> <text v-show="item.HostRed" class="red_p">{{item.HostRed}}</text>
<text class="name-text">{{item.HostName}}</text> <text class="name-text">{{item.HostName}}</text>
</view> </view>
...@@ -79,7 +80,7 @@ ...@@ -79,7 +80,7 @@
<text class="name-text">{{item.GuestName}}</text> <text class="name-text">{{item.GuestName}}</text>
<text v-show="item.GuestRed" class="reb_p">{{item.GuestRed}}</text> <text v-show="item.GuestRed" class="red_p">{{item.GuestRed}}</text>
<text v-show="item.GuestYellow" class="yellow_p">{{item.GuestYellow}}</text> <text v-show="item.GuestYellow" class="yellow_p">{{item.GuestYellow}}</text>
...@@ -107,6 +108,7 @@ ...@@ -107,6 +108,7 @@
import utils from "../utils/utils.js"; import utils from "../utils/utils.js";
import followHelper from '../utils/followHelper.js'; import followHelper from '../utils/followHelper.js';
import common from '../utils/common'; import common from '../utils/common';
import loginHelper from "../utils/loginHelper.js";
export default { export default {
name: "MatchList", name: "MatchList",
props: { props: {
...@@ -146,12 +148,17 @@ ...@@ -146,12 +148,17 @@
}, },
async follow_action(match,index) { async follow_action(match,index) {
if(loginHelper.hasLogin()) {
this.$emit("updateItem", match.Id , index) this.$emit("updateItem", match.Id , index)
await followHelper.follow_action(match) await followHelper.follow_action(match)
await this.handlerData() await this.handlerData()
} else {
uni.navigateTo({
url:'/pages/login_pwd/login_pwd'
})
}
}, },
async handlerData() { async handlerData() {
......
components/match-list/MatchEventAnalysis.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
style="height: 100vh; width: 100vw; display: flex; justify-items: center; align-items: center;"> style="height: 100vh; width: 100vw; display: flex; justify-items: center; align-items: center;">
<view <view
style="height: 100%; width: 100%; display: flex; justify-items: center; align-items: center; align-content: center; justify-content: center; "> style="height: 100%; width: 100%; display: flex; justify-items: center; align-items: center; align-content: center; justify-content: center; ">
<image src="../../static/loading_icon.gif"></image> <image style="width: 400rpx; height: 400rpx;" src="../../static/loading_icon.gif"></image>
</view> </view>
</view> </view>
<view v-if="!loading"> <view v-if="!loading">
......
pages.json
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
"style": { "style": {
"navigationBarTitleText": "首页", "navigationBarTitleText": "首页",
"navigationBarTextStyle": "white", "navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#04764E" "navigationBarBackgroundColor": "#04764E",
"enablePullDownRefresh": true
} }
}, { }, {
"path": "pages/study/study", "path": "pages/study/study",
......
pages/analysis/analysis.vue
<template> <template>
<view> <view>
<view v-if="isLoading" style="display: flex; justify-content: center; width: 100%; height: 100vh; align-items: center;"> <view v-if="isLoading"
<image src="../../static/loading_icon.gif"></image> style="display: flex; justify-content: center; width: 100%; height: 100vh; align-items: center;">
<image style="width: 400rpx; height: 400rpx;" src="../../static/loading_icon.gif"></image>
</view> </view>
<view v-else> <view v-else>
...@@ -216,7 +219,7 @@ ...@@ -216,7 +219,7 @@
<view class="item_win_text" <view class="item_win_text"
:style="'background-color:' + getTeamNameColor(gameInfo.HomeTeam.Id, gameInfo.HomeTeam.Id, item)" :style="'background-color:' + getTeamNameColor(gameInfo.HomeTeam.Id, gameInfo.HomeTeam.Id, item)"
@click="switchWinType()"> @click="switchWinType()">
<text>{{getWinTypeInfo( gameInfo.HomeTeam.Id, item)}}</text> <text>{{getWinTypeInfo(gameInfo.HomeTeam.Id, item)}}</text>
</view> </view>
</view> </view>
...@@ -408,6 +411,7 @@ ...@@ -408,6 +411,7 @@
var cName = this.gameInfo.Competition.Name var cName = this.gameInfo.Competition.Name
var homeId = this.gameInfo.HomeTeam.Id var homeId = this.gameInfo.HomeTeam.Id
var awayId = this.gameInfo.AwayTeam.Id var awayId = this.gameInfo.AwayTeam.Id
if (Object.values(this.competitionstanding.Standing)[0]) {
switch (type) { switch (type) {
case 0: case 0:
...@@ -448,6 +452,7 @@ ...@@ -448,6 +452,7 @@
}); });
break break
} }
}
}, },
selectTong(away, sai, ke, chang) { selectTong(away, sai, ke, chang) {
...@@ -541,8 +546,8 @@ ...@@ -541,8 +546,8 @@
case 1: case 1:
return (item.ScoreAll[0] + item.ScoreAll[1]) + "球" return (item.ScoreAll[0] + item.ScoreAll[1]) + "球"
case 2: case 2:
return this.checkTramWin(id, item, item.Half.split('-')) + this.checkTramWin(id, item, item return this.checkTramWin(item.Id[2], item, item.Half.split('-')) +
.ScoreAll) this.checkTramWin(item.Id[2], item, item.ScoreAll)
} }
}, },
getTeamNameColor(homdId, id, item) { getTeamNameColor(homdId, id, item) {
......
pages/index/index.vue
<template> <template>
<view> <view>
<v-tabs class="tab_c" v-model="current" :tabs="tabs" @change="changeTab" fixed="true" <view v-if="loading"
line-height="8rpx" line-color="#04764E" style="height: 100vh; width: 100vw; display: flex; justify-items: center; align-items: center;">
color="#AAAAAA" activeColor="#04764E" height="88rpx"></v-tabs> <view
style="height: 100%; width: 100%; display: flex; justify-items: center; align-items: center; align-content: center; justify-content: center; ">
<image style="width: 400rpx; height: 400rpx;" src="../../static/loading_icon.gif"></image>
</view>
</view>
<view v-else>
<v-tabs class="tab_c" v-model="current" :tabs="tabs" @change="changeTab" :fixed="true" line-height="8rpx"
line-color="#04764E" color="#AAAAAA" activeColor="#04764E" height="88rpx"></v-tabs>
<z-swiper ref="zSwiper" v-model="tabs" @slideChange="onSwiperChange" <z-swiper ref="zSwiper" v-model="tabs" @slideChange="onSwiperChange" :options="options">
:options="options">
<z-swiper-item v-for="(item, index) in tabs" :key="item" style="min-height: 90vh;"> <z-swiper-item v-for="(item, index) in tabs" :key="item" style="min-height: 90vh;">
<view v-if="match_map.get(item) && match_map.get(item).length > 0 " style="width: 100vw;"> <view v-if="match_map.get(item) && match_map.get(item).length > 0 " style="width: 100vw;">
<MatchList :data_info="match_map.get(item)" ref="MatchListRef" :key="index" @updateItem ="updateItem"></MatchList> <MatchList :data_info="match_map.get(item)" ref="MatchListRef" :key="index"
@updateItem="updateItem"></MatchList>
</view> </view>
<view style="width: 100vw; height: 80vh; align-items: center; display: flex; justify-content: center;" <view
style="width: 100vw; height: 80vh; align-items: center; display: flex; justify-content: center; flex-direction: column;"
v-else> v-else>
<image style="height: 460rpx; width: 460rpx;" src="../../static/pic_zanwushuju@2x.png"></image> <image style="height: 400rpx; width: 400rpx;" src="../../static/pic_zanwushuju@2x.png"></image>
<text>暂无内容</text>
</view> </view>
</z-swiper-item> </z-swiper-item>
</z-swiper> </z-swiper>
</view>
</view> </view>
</template> </template>
...@@ -49,11 +58,22 @@ ...@@ -49,11 +58,22 @@
initialSlide: 1 initialSlide: 1
}, },
current: 1, current: 1,
tabs: [] tabs: [],
loading: false,
timer: null
} }
}, },
async onLoad() { async onLoad() {
this.loading = true
await this.requestData()
this.loading = false
},
async onPullDownRefresh() {
await this.requestData()
uni.stopPullDownRefresh(); //停止刷新
},
methods: {
async requestData() {
let infoRes = await http.gql({ let infoRes = await http.gql({
"query": `{ "query": `{
liveScore(lotIds: "72,45",order:[["MatchTime","desc"]], limit:100) { liveScore(lotIds: "72,45",order:[["MatchTime","desc"]], limit:100) {
...@@ -107,7 +127,7 @@ ...@@ -107,7 +127,7 @@
if (m.MatchState === "完") { if (m.MatchState === "完") {
wancheng.push(m) wancheng.push(m)
} else if(m.MatchState === "未"){ } else if (m.MatchState === "未") {
zhongyao.push(m) zhongyao.push(m)
} }
} }
...@@ -136,7 +156,6 @@ ...@@ -136,7 +156,6 @@
this.tabs.push(...this.match_map.keys()) this.tabs.push(...this.match_map.keys())
}, },
methods: {
updateItem(id, index) { updateItem(id, index) {
console.log("id：" + id + "index:" + index) console.log("id：" + id + "index:" + index)
...@@ -156,7 +175,10 @@ ...@@ -156,7 +175,10 @@
console.log(list[index]) console.log(list[index])
}, },
async startRealTime() { async startRealTime(ref) {
if(this.current != 1) {
return
}
let query_data = `query{ let query_data = `query{
getlivedata getlivedata
...@@ -180,6 +202,7 @@ ...@@ -180,6 +202,7 @@
m.HostYellow = live.YellowCard[0] m.HostYellow = live.YellowCard[0]
m.GuestRed = live.RedCard[1] m.GuestRed = live.RedCard[1]
m.GuestYellow = live.YellowCard[1] m.GuestYellow = live.YellowCard[1]
m.MatchState = this.getCurrentState(live)
} }
} }
} }
...@@ -187,12 +210,71 @@ ...@@ -187,12 +210,71 @@
console.log(zhongyao) console.log(zhongyao)
} }
}, },
getCurrentState(data) {
var result = data.MatchState;
if (!data) {
return "";
}
switch (data.Status) {
case 4:
case 10:
case 12:
result = "完";
break;
case 2:
result = "中场";
break;
case 5:
result = "中断";
break;
case 6:
result = "取消";
break;
case 13:
result = "延期";
break;
case 14:
result = "腰斩";
break;
case 15:
result = "待定";
break;
default:
var time = data.TStartTime;
if (data.Status == 3) {
result = (time / (1000 * 60) + 45) + "'";
if ((time / (1000 * 60)) > 45) {
result = 90 + "+";
}
} else if (data.Status == 1) {
result = time / (1000 * 60) + "'";
if (time / (1000 * 60) > 45) {
result = 45 + "+";
} else if (time / (1000 * 60) == 0) {
result = 1 + "'";
}
} else {
result = time / (1000 * 60) + "'";
}
break;
}
return result
},
onSwiperChange(swiper) { onSwiperChange(swiper) {
this.current = this.$refs.zSwiper.swiper.activeIndex this.current = this.$refs.zSwiper.swiper.activeIndex
console.log("---》" + this.tabs[this.current] +"--"+ this.match_map.get(this.tabs[this.current])) console.log("---》" + this.tabs[this.current] + "--" + this.match_map.get(this.tabs[this.current]))
console.log('onSwiperChange：' + swiper.activeIndex) console.log('onSwiperChange：' + swiper.activeIndex)
var ref = this.$refs.MatchListRef[this.current] var ref = this.$refs.MatchListRef[this.current]
console.log(this.$refs.MatchListRef) console.log(this.$refs.MatchListRef)
if(this.current == 1) {
this.timer = setInterval(this.startRealTime(ref), 5 * 1000)
} else {
clearInterval(this.timer)
}
if (this.current === 0) { if (this.current === 0) {
var followList = followHelper.getFollowList() var followList = followHelper.getFollowList()
ref.onRefreshInfo(followList) ref.onRefreshInfo(followList)
......
pages/info/info.vue
<template> <template>
<view> <view>
<view v-if="match_list && match_list.length > 0">
<z-swiper ref="zSwiper" v-model="match_list" @slideChange="onSwiperChange" :options="options"> <z-swiper ref="zSwiper" v-model="match_list" @slideChange="onSwiperChange" :options="options">
<z-swiper-item v-for="(item, index) in match_list" :key="item.Id" :custom-style="{width:'46%'}"> <z-swiper-item v-for="(item, index) in match_list" :key="item.Id" :custom-style="{width:'46%'}">
<view :class="select_index === index ? 'match-info' : 'match-info-unselect'" <view :class="select_index === index ? 'match-info' : 'match-info-unselect'"
...@@ -42,15 +44,12 @@ ...@@ -42,15 +44,12 @@
</text> </text>
</view> </view>
<text class="text-item">{{strInfo}}</text> <text class="text-item">{{strInfo}}</text>
</view> </view>
</view> </view>
<view v-else <view v-else style="width: 100%; height: 400px; display: flex;
style="width: 100%; height: 400px; display: flex;
justify-content: center; align-items: center;"> justify-content: center; align-items: center;">
<text style="color: #999999; font-size: 16px;">暂无情报</text> <text style="color: #999999; font-size: 16px;">暂无情报</text>
...@@ -59,10 +58,11 @@ ...@@ -59,10 +58,11 @@
</z-swiper-item> </z-swiper-item>
</z-swiper> </z-swiper>
</view>
<view v-else style="align-items: center; display: flex; flex-direction: column; height: 80vh;">
<image style="height: 400rpx; width: 400rpx;" src="../../static/pic_zanwushuju@2x.png"></image>
<text>暂无内容</text>
</view>
</view> </view>
</template> </template>
...@@ -181,7 +181,7 @@ ...@@ -181,7 +181,7 @@
font-size: 25rpx; font-size: 25rpx;
} }
.text-index-c{ .text-index-c {
width: 42rpx; width: 42rpx;
height: 42rpx; height: 42rpx;
margin: 22rpx; margin: 22rpx;
......
pages/settings/settings.vue
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
onShow() { onShow() {
this.hasLogin = loginHelper.hasLogin() this.hasLogin = loginHelper.hasLogin()
console.log("onShow"); console.log("onShow");
this.updateVersion(); // this.updateVersion();
}, },
methods: { methods: {
bindLogout() { bindLogout() {
......
pages/study/study.vue
<template> <template>
<view> <view>
<view v-if="loading" style="height: 100vh; width: 100vw; display: flex; justify-items: center; align-items: center;">
<view
style="height: 100%; width: 100%; display: flex; justify-items: center; align-items: center; align-content: center; justify-content: center; ">
<image style="width: 400rpx; height: 400rpx;" src="../../static/loading_icon.gif"></image>
</view>
</view>
<view v-else-if="match_list && match_list.length > 0">
<z-swiper ref="zSwiper" v-model="match_list" @slideChange="onSwiperChange" :options="options"> <z-swiper ref="zSwiper" v-model="match_list" @slideChange="onSwiperChange" :options="options">
<z-swiper-item v-for="(item, index) in match_list" :key="item.Id" :custom-style="{width:'48%'}"> <z-swiper-item v-for="(item, index) in match_list" :key="item.Id" :custom-style="{width:'48%'}">
<view :class="select_index === index ? 'match-info' : 'match-info-unselect'" <view :class="select_index === index ? 'match-info' : 'match-info-unselect'"
...@@ -34,7 +42,11 @@ ...@@ -34,7 +42,11 @@
</z-swiper-item> </z-swiper-item>
</z-swiper> </z-swiper>
</view>
<view v-else style="align-items: center; display: flex; flex-direction: column; height: 80vh;">
<image style="height: 400rpx; width: 400rpx;" src="../../static/pic_zanwushuju@2x.png"></image>
<text>暂无内容</text>
</view>
</view> </view>
</template> </template>
...@@ -65,6 +77,7 @@ ...@@ -65,6 +77,7 @@
match_list: [], match_list: [],
view_point: null, view_point: null,
select_index: 0, select_index: 0,
loading: false
} }
}, },
methods: { methods: {
...@@ -91,6 +104,7 @@ ...@@ -91,6 +104,7 @@
} }
}, },
async onLoad() { async onLoad() {
this.loading = true
let infoRes = await http.gql({ let infoRes = await http.gql({
"query": `{ "query": `{
liveScore(lotId: 72, matchState: "未") { liveScore(lotId: 72, matchState: "未") {
...@@ -139,7 +153,7 @@ ...@@ -139,7 +153,7 @@
this.select_index = 0 this.select_index = 0
} }
console.log("==========>>>", JSON.stringify(this.match_list)) console.log("==========>>>", JSON.stringify(this.match_list))
this.$refs.zSwiper.swiper this.loading = false;
} }
} }
</script> </script>
......
支持 Markdown 格式
你添加了 0 人 到此讨论。请谨慎行事。
Finish editing this message first!