Skip to content

吴良建 / JinQiu

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

添加加载中动画 和 空页面

1 个父辈 bd5e2032
内嵌 并排
正在显示 8 个修改的文件 包含 403 行增加 和 294 行删除
components/MatchList.vue
......@@ -60,9 +60,10 @@
style=" display: flex; align-items: center; width: 100%; justify-content: space-between;">
<view
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.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>
</view>
......@@ -79,7 +80,7 @@
<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>
......@@ -107,6 +108,7 @@
import utils from "../utils/utils.js";
import followHelper from '../utils/followHelper.js';
import common from '../utils/common';
import loginHelper from "../utils/loginHelper.js";
export default {
name: "MatchList",
props: {
......@@ -144,14 +146,19 @@
}
return ""
},
async follow_action(match,index) {
this.$emit("updateItem", match.Id , index)
await followHelper.follow_action(match)
async follow_action(match,index) {
await this.handlerData()
if(loginHelper.hasLogin()) {
this.$emit("updateItem", match.Id , index)
await followHelper.follow_action(match)
await this.handlerData()
} else {
uni.navigateTo({
url:'/pages/login_pwd/login_pwd'
})
}
},
async handlerData() {
......
components/match-list/MatchEventAnalysis.vue
......@@ -5,7 +5,7 @@
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 src="../../static/loading_icon.gif"></image>
<image style="width: 400rpx; height: 400rpx;" src="../../static/loading_icon.gif"></image>
</view>
</view>
<view v-if="!loading">
......
pages.json
......@@ -5,7 +5,8 @@
"style": {
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#04764E"
"navigationBarBackgroundColor": "#04764E",
"enablePullDownRefresh": true
}
}, {
"path": "pages/study/study",
......
pages/analysis/analysis.vue
<template>
<view>
<view v-if="isLoading" style="display: flex; justify-content: center; width: 100%; height: 100vh; align-items: center;">
<image src="../../static/loading_icon.gif"></image>
<view v-if="isLoading"
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 v-else>
......@@ -41,26 +44,26 @@
</view>
</view>
<view :v-show="getIntegralData(false,6)" class="unselect_tong_ke" style="flex: 1; margin-left: 35rpx">
<view style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<text style="color: #666; font-size: 28rpx; margin-top: 10rpx;">客队</text>
<text style="color: #666; font-size: 50rpx;">{{getIntegralData(false,6)}}</text>
</view>
<view style="flex: 1;">
<view class="color_item">
<text style="flex: 1; color: #333333;">{{getIntegralData(false,1) + "胜"}}</text>
<view style="flex: 1; height: 30rpx; background-color: #ff6858;"></view>
</view>
<view class="color_item">
<text style="flex: 1; color: #333333;">{{getIntegralData(false,2) + "平"}}</text>
<view style="flex: 1; height: 30rpx; background-color: #91bb80;"></view>
</view>
<view class="color_item">
<text style="flex: 1; color: #333333;">{{getIntegralData(false,3) + "负"}}</text>
<view style="flex: 1; height: 30rpx; background-color: #6f83fc;"></view>
</view>
</view>
<view :v-show="getIntegralData(false,6)" class="unselect_tong_ke" style="flex: 1; margin-left: 35rpx">
<view style="flex: 1; display: flex; flex-direction: column; align-items: center;">
<text style="color: #666; font-size: 28rpx; margin-top: 10rpx;">客队</text>
<text style="color: #666; font-size: 50rpx;">{{getIntegralData(false,6)}}</text>
</view>
<view style="flex: 1;">
<view class="color_item">
<text style="flex: 1; color: #333333;">{{getIntegralData(false,1) + "胜"}}</text>
<view style="flex: 1; height: 30rpx; background-color: #ff6858;"></view>
</view>
<view class="color_item">
<text style="flex: 1; color: #333333;">{{getIntegralData(false,2) + "平"}}</text>
<view style="flex: 1; height: 30rpx; background-color: #91bb80;"></view>
</view>
<view class="color_item">
<text style="flex: 1; color: #333333;">{{getIntegralData(false,3) + "负"}}</text>
<view style="flex: 1; height: 30rpx; background-color: #6f83fc;"></view>
</view>
</view>
</view>
</view>
......@@ -216,7 +219,7 @@
<view class="item_win_text"
:style="'background-color:' + getTeamNameColor(gameInfo.HomeTeam.Id, gameInfo.HomeTeam.Id, item)"
@click="switchWinType()">
<text>{{getWinTypeInfo( gameInfo.HomeTeam.Id, item)}}</text>
<text>{{getWinTypeInfo(gameInfo.HomeTeam.Id, item)}}</text>
</view>
</view>
......@@ -385,17 +388,17 @@
icon: "none",
title: "数据异常",
});
}
}
this.isLoading = false
},
methods: {
getIntegralData(home, index) {
getIntegralData(home, index) {
var data = this.homeIntegral
if (!home) {
data = this.awayIntegral
}
}
if (data && Object.keys(data).length !== 0) {
console.log(JSON.stringify(data))
return data.Data[index]
......@@ -405,48 +408,50 @@
selectHeader(type) {
this.headerType = type
var this_ = this
var cName = this.gameInfo.Competition.Name
var homeId = this.gameInfo.HomeTeam.Id
var cName = this.gameInfo.Competition.Name
var homeId = this.gameInfo.HomeTeam.Id
var awayId = this.gameInfo.AwayTeam.Id
switch (type) {
case 0:
console.log(JSON.stringify(Object.values(this.competitionstanding.Standing)[0]) + "--" + cName)
var data = Object.values(this.competitionstanding.Standing)[0].Away
data.forEach(function(item) {
if (item.Team == homeId) {
console.log(JSON.stringify(item) + "--" + homeId)
this_.homeIntegral = item;
}
if (item.Team == awayId) {
this_.awayIntegral = item;
}
});
break
case 1:
var data = Object.values(this.competitionstanding.Standing)[0].Home
data.forEach(function(item) {
if (item.Team == homeId) {
this_.homeIntegral = item;
}
if (item.Team == awayId) {
this_.awayIntegral = item;
}
});
break
case 2:
var data = Object.values(this.competitionstanding.Standing)[0].Total
data.forEach(function(item) {
if (item.Team == homeId) {
this_.homeIntegral = item;
}
if (item.Team == awayId) {
this_.awayIntegral = item;
}
});
break
if (Object.values(this.competitionstanding.Standing)[0]) {
switch (type) {
case 0:
console.log(JSON.stringify(Object.values(this.competitionstanding.Standing)[0]) + "--" + cName)
var data = Object.values(this.competitionstanding.Standing)[0].Away
data.forEach(function(item) {
if (item.Team == homeId) {
console.log(JSON.stringify(item) + "--" + homeId)
this_.homeIntegral = item;
}
if (item.Team == awayId) {
this_.awayIntegral = item;
}
});
break
case 1:
var data = Object.values(this.competitionstanding.Standing)[0].Home
data.forEach(function(item) {
if (item.Team == homeId) {
this_.homeIntegral = item;
}
if (item.Team == awayId) {
this_.awayIntegral = item;
}
});
break
case 2:
var data = Object.values(this.competitionstanding.Standing)[0].Total
data.forEach(function(item) {
if (item.Team == homeId) {
this_.homeIntegral = item;
}
if (item.Team == awayId) {
this_.awayIntegral = item;
}
});
break
}
}
},
......@@ -541,11 +546,11 @@
case 1:
return (item.ScoreAll[0] + item.ScoreAll[1]) + "球"
case 2:
return this.checkTramWin(id, item, item.Half.split('-')) + this.checkTramWin(id, item, item
.ScoreAll)
return this.checkTramWin(item.Id[2], item, item.Half.split('-')) +
this.checkTramWin(item.Id[2], item, item.ScoreAll)
}
},
getTeamNameColor(homdId, id, item) {
getTeamNameColor(homdId, id, item) {
console.log("homeId:" + homdId + "--" + id + " item:" + JSON.stringify(item))
if (homdId != id) {
return "#888888"
......@@ -741,7 +746,7 @@
justify-content: space-between;
align-items: center;
padding-top: 3px;
padding-bottom: 3px;
padding-bottom: 3px;
font-size: 24rpx;
}
</style>
pages/index/index.vue
<template>
<view>
<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>
<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>
<z-swiper ref="zSwiper" v-model="tabs" @slideChange="onSwiperChange"
:options="options">
<z-swiper-item v-for="(item, index) in tabs" :key="item" style="min-height: 90vh;">
<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>
<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>
</view>
<view style="width: 100vw; height: 80vh; align-items: center; display: flex; justify-content: center;"
v-else>
<image style="height: 460rpx; width: 460rpx;" src="../../static/pic_zanwushuju@2x.png"></image>
</view>
<z-swiper ref="zSwiper" v-model="tabs" @slideChange="onSwiperChange" :options="options">
</z-swiper-item>
<z-swiper-item v-for="(item, index) in tabs" :key="item" style="min-height: 90vh;">
</z-swiper>
<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>
</view>
<view
style="width: 100vw; height: 80vh; align-items: center; display: flex; justify-content: center; flex-direction: column;"
v-else>
<image style="height: 400rpx; width: 400rpx;" src="../../static/pic_zanwushuju@2x.png"></image>
<text>暂无内容</text>
</view>
</z-swiper-item>
</z-swiper>
</view>
</view>
</template>
......@@ -49,114 +58,127 @@
initialSlide: 1
},
current: 1,
tabs: []
tabs: [],
loading: false,
timer: null
}
},
async onLoad() {
let infoRes = await http.gql({
"query": `{
liveScore(lotIds: "72,45",order:[["MatchTime","desc"]], limit:100) {
count
matchs {
Id
InfoId
LotteryId
IssueName
MatchTime
MatchNumber
HostName
HostRed
HostYellow
GuestName
GuestRed
GuestYellow
GameName
QcBf
BcBf
HostTeam {
LogoFullPath
}
GuestTeam {
LogoFullPath
}
MatchState
MatchRound
PreTotalScore
Temperature
SportsInjury
SportsInfoCount
Sportsdt {
SportsdtMatchId
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({
"query": `{
liveScore(lotIds: "72,45",order:[["MatchTime","desc"]], limit:100) {
count
matchs {
Id
InfoId
LotteryId
IssueName
MatchTime
MatchNumber
HostName
HostRed
HostYellow
GuestName
GuestRed
GuestYellow
GameName
QcBf
BcBf
HostTeam {
LogoFullPath
}
GuestTeam {
LogoFullPath
}
MatchState
MatchRound
PreTotalScore
Temperature
SportsInjury
SportsInfoCount
Sportsdt {
SportsdtMatchId
}
}
}
}
}
} `
})
let matchs = infoRes.data.liveScore.matchs
if (this.match_map.size > 0) {
this.match_map.clear()
}
this.tabs.length = 0
var followList = await followHelper.getFollowList()
this.match_map.set("关注", followList)
let zhongyao = []
let wancheng = []
for (let m of matchs) {
if (m.MatchState === "完") {
wancheng.push(m)
} else if(m.MatchState === "未"){
zhongyao.push(m)
} `
})
let matchs = infoRes.data.liveScore.matchs
if (this.match_map.size > 0) {
this.match_map.clear()
}
}
zhongyao.sort((item1, item2) => (new Date(item1.IssueName) - new Date(item2.IssueName)))
this.match_map.set("重要", zhongyao)
this.match_map.set("完赛", wancheng)
for (let m of matchs) {
if (m.GameName) {
var list = this.match_map.get(m.GameName)
if (!list) {
list = []
this.tabs.length = 0
var followList = await followHelper.getFollowList()
this.match_map.set("关注", followList)
let zhongyao = []
let wancheng = []
for (let m of matchs) {
if (m.MatchState === "完") {
wancheng.push(m)
} else if (m.MatchState === "未") {
zhongyao.push(m)
}
list.push(m)
this.match_map.set(m.GameName, list)
}
}
for (const [key, value] of this.match_map.entries()) {
console.log(key, value.length);
}
this.tabs.push(...this.match_map.keys())
},
methods: {
updateItem(id, index) {
console.log("id：" + id + "index:" + index)
var list = this.match_map.get(this.tabs[this.current])
var follow_list = followHelper.getFollowList()
var same = follow_list.some(function(item, index) {
return item.Id === id
})
if (same) {
list[index].isFollow = true
} else {
list[index].isFollow = false
}
console.log(list[index])
zhongyao.sort((item1, item2) => (new Date(item1.IssueName) - new Date(item2.IssueName)))
this.match_map.set("重要", zhongyao)
this.match_map.set("完赛", wancheng)
for (let m of matchs) {
if (m.GameName) {
var list = this.match_map.get(m.GameName)
if (!list) {
list = []
}
list.push(m)
this.match_map.set(m.GameName, list)
}
}
for (const [key, value] of this.match_map.entries()) {
console.log(key, value.length);
}
this.tabs.push(...this.match_map.keys())
},
async startRealTime() {
updateItem(id, index) {
console.log("id：" + id + "index:" + index)
var list = this.match_map.get(this.tabs[this.current])
var follow_list = followHelper.getFollowList()
var same = follow_list.some(function(item, index) {
return item.Id === id
})
if (same) {
list[index].isFollow = true
} else {
list[index].isFollow = false
}
console.log(list[index])
},
async startRealTime(ref) {
if(this.current != 1) {
return
}
let query_data = `query{
getlivedata
......@@ -180,6 +202,7 @@
m.HostYellow = live.YellowCard[0]
m.GuestRed = live.RedCard[1]
m.GuestYellow = live.YellowCard[1]
m.MatchState = this.getCurrentState(live)
}
}
}
......@@ -187,13 +210,72 @@
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) {
this.current = this.$refs.zSwiper.swiper.activeIndex
console.log("---》" + this.tabs[this.current] +"--"+ this.match_map.get(this.tabs[this.current]))
console.log('onSwiperChange：' + 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('onSwiperChange：' + swiper.activeIndex)
var ref = this.$refs.MatchListRef[this.current]
console.log(this.$refs.MatchListRef)
if (this.current === 0) {
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) {
var followList = followHelper.getFollowList()
ref.onRefreshInfo(followList)
} else {
......
pages/info/info.vue
<template>
<view>
<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%'}">
<view :class="select_index === index ? 'match-info' : 'match-info-unselect'"
@click="change_match(item, index)">
<view v-if="match_list && match_list.length > 0">
<view style="display: flex; justify-content: space-between; width: 100%;">
<text class="title-text-one" :style="{'color': (select_index === index)
<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%'}">
<view :class="select_index === index ? 'match-info' : 'match-info-unselect'"
@click="change_match(item, index)">
<view style="display: flex; justify-content: space-between; width: 100%;">
<text class="title-text-one" :style="{'color': (select_index === index)
? '#ffffff' : '#101010'}" @click="change_match(item, index)">{{deal_match_time(item)}}</text>
<text class="title-text-one" :style="{'color': (select_index === index)
<text class="title-text-one" :style="{'color': (select_index === index)
? '#ffffff' : '#101010'}" @click="change_match(item, index)">{{item.MatchState}}</text>
</view>
<view class="team-h-g">
<image class="team-logo" :src="item.HostTeam.LogoFullPath" />
<text class="title-text-two" :style="{'color': (select_index === index)
</view>
<view class="team-h-g">
<image class="team-logo" :src="item.HostTeam.LogoFullPath" />
<text class="title-text-two" :style="{'color': (select_index === index)
? '#ffffff' : '#101010'}">{{item.HostName}}</text>
</view>
<view class="team-h-g">
<image class="team-logo" :src="item.GuestTeam.LogoFullPath" />
<text class="title-text-two" :style="{'color': (select_index === index)
</view>
<view class="team-h-g">
<image class="team-logo" :src="item.GuestTeam.LogoFullPath" />
<text class="title-text-two" :style="{'color': (select_index === index)
? '#ffffff' : '#101010'}">{{item.GuestName}}</text>
</view>
</view>
</view>
</z-swiper-item>
</z-swiper>
</z-swiper-item>
</z-swiper>
<z-swiper ref="zSwiperInfo" v-model="match_list" @slideChange="onSwiperInfoChange" :options="info_options">
<z-swiper-item v-for="(info_item, index) in match_list" :key="info_item.Id">
<view v-if="info_item.Info">
<z-swiper ref="zSwiperInfo" v-model="match_list" @slideChange="onSwiperInfoChange" :options="info_options">
<z-swiper-item v-for="(info_item, index) in match_list" :key="info_item.Id">
<view v-for="(strInfo, index) in info_item.Info"
style="display: flex; flex-direction: row; margin: 35rpx; float: left;">
<view>
<text class="text-index-c">
{{index + 1}}
</text>
</view>
<view v-if="info_item.Info">
<text class="text-item">{{strInfo}}</text>
<view v-for="(strInfo, index) in info_item.Info"
style="display: flex; flex-direction: row; margin: 35rpx; float: left;">
</view>
</view>
<view v-else
style="width: 100%; height: 400px; display: flex;
justify-content: center; align-items: center;">
<text style="color: #999999; font-size: 16px;">暂无情报</text>
</view>
<view>
<text class="text-index-c">
{{index + 1}}
</text>
</view>
</z-swiper-item>
</z-swiper>
<text class="text-item">{{strInfo}}</text>
</view>
</view>
<view v-else style="width: 100%; height: 400px; display: flex;
justify-content: center; align-items: center;">
<text style="color: #999999; font-size: 16px;">暂无情报</text>
</view>
</z-swiper-item>
</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>
</template>
......@@ -75,7 +75,7 @@
options: {
slidesPerView: 'auto'
},
info_options: {
info_options: {
autoHeight: true,
centeredSlides: true,
centeredSlidesBounds: true
......@@ -181,12 +181,12 @@
font-size: 25rpx;
}
.text-index-c{
.text-index-c {
width: 42rpx;
height: 42rpx;
margin: 22rpx;
background-color: #5589FF;
color: white;
color: white;
float: left;
font-size: 28rpx;
border-radius: 100%;
......
pages/settings/settings.vue
......@@ -63,7 +63,7 @@
onShow() {
this.hasLogin = loginHelper.hasLogin()
console.log("onShow");
this.updateVersion();
// this.updateVersion();
},
methods: {
bindLogout() {
......
pages/study/study.vue
<template>
<view>
<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%'}">
<view :class="select_index === index ? 'match-info' : 'match-info-unselect'"
@click="change_match(item, index)">
<view style="display: flex; justify-content: space-between; width: 100%;">
<text class="title-text-one" :style="{'color': (select_index === index)
<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-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'"
@click="change_match(item, index)">
<view style="display: flex; justify-content: space-between; width: 100%;">
<text class="title-text-one" :style="{'color': (select_index === index)
? '#ffffff' : '#777777'}" @click="change_match(item, index)">{{deal_match_time(item)}}</text>
<text class="title-text-one" :style="{'color': (select_index === index)
<text class="title-text-one" :style="{'color': (select_index === index)
? '#ffffff' : '#777777'}" @click="change_match(item, index)">{{item.MatchState}}</text>
</view>
<view class="team-h-g">
<image class="team-logo" :src="item.HostTeam.LogoFullPath" />
<text class="title-text-two" :style="{'color': (select_index === index)
</view>
<view class="team-h-g">
<image class="team-logo" :src="item.HostTeam.LogoFullPath" />
<text class="title-text-two" :style="{'color': (select_index === index)
? '#ffffff' : '#333333'}">{{item.HostName}}</text>
</view>
<view class="team-h-g">
<image class="team-logo" :src="item.GuestTeam.LogoFullPath" />
<text class="title-text-two" :style="{'color': (select_index === index)
</view>
<view class="team-h-g">
<image class="team-logo" :src="item.GuestTeam.LogoFullPath" />
<text class="title-text-two" :style="{'color': (select_index === index)
? '#ffffff' : '#333333'}">{{item.GuestName}}</text>
</view>
</view>
</view>
</z-swiper-item>
</z-swiper-item>
</z-swiper>
</z-swiper>
<z-swiper ref="zSwiperInfo" v-model="match_list" @slideChange="onSwiperInfoChange" :options="info_options">
<z-swiper-item v-for="(info_item, index) in match_list" :key="info_item.Id">
<MatchEventAnalysis ref="child" :data_info="info_item" />
<z-swiper ref="zSwiperInfo" v-model="match_list" @slideChange="onSwiperInfoChange" :options="info_options">
<z-swiper-item v-for="(info_item, index) in match_list" :key="info_item.Id">
</z-swiper-item>
</z-swiper>
<MatchEventAnalysis ref="child" :data_info="info_item" />
</z-swiper-item>
</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>
</template>
......@@ -65,17 +77,18 @@
match_list: [],
view_point: null,
select_index: 0,
loading: false
}
},
methods: {
onSwiperChange(swiper) {
onSwiperChange(swiper) {
console.log(swiper)
this.select_index = this.$refs.zSwiper.swiper.activeIndex
this.select_index = this.$refs.zSwiper.swiper.activeIndex
this.$refs.child[this.select_index].childmethods(this.match_list[this.select_index]) //子组件$on中的名字
this.$refs.zSwiperInfo.swiper.slideTo(this.select_index); //切换到第一个slide，速度为1秒
},
onSwiperInfoChange(swiper) {
this.select_index = this.$refs.zSwiperInfo.swiper.activeIndex
this.select_index = this.$refs.zSwiperInfo.swiper.activeIndex
this.$refs.child[this.select_index].childmethods(this.match_list[this.select_index]) //子组件$on中的名字
this.$refs.zSwiper.swiper.slideTo(this.select_index); //切换到第一个slide，速度为1秒
},
......@@ -90,7 +103,8 @@
this.$refs.zSwiperInfo.swiper.slideTo(index); //切换到第一个slide，速度为1秒
}
},
async onLoad() {
async onLoad() {
this.loading = true
let infoRes = await http.gql({
"query": `{
liveScore(lotId: 72, matchState: "未") {
......@@ -128,18 +142,18 @@
let matchs = infoRes.data.liveScore.matchs
if (this.match_list.length > 0) {
this.match_list.length = 0
}
for (let m of matchs) {
if (m.YiqiuMatchId) {
this.match_list.push(m)
}
}
for (let m of matchs) {
if (m.YiqiuMatchId) {
this.match_list.push(m)
}
}
if (this.match_list.length > 0) {
this.select_index = 0
}
console.log("==========>>>", JSON.stringify(this.match_list))
this.$refs.zSwiper.swiper
this.loading = false;
}
}
</script>
......@@ -147,7 +161,7 @@
<style>
.match-info {
display: flex;
flex-direction: column;
flex-direction: column;
min-width: 400;
margin-top: 32rpx;
margin-left: 32rpx;
......@@ -159,7 +173,7 @@
.match-info-unselect {
display: flex;
flex-direction: column;
margin-top: 32rpx;
margin-top: 32rpx;
min-width: 400;
margin-left: 32rpx;
padding: 24rpx;
......@@ -205,7 +219,7 @@
.title-text-one {
font-size: 28rpx;
color: white;
color: white;
white-space: nowrap;
font-weight: 400;
}
......@@ -213,7 +227,7 @@
.title-text-two {
font-size: 36rpx;
margin-left: 6px;
color: white;
color: white;
white-space: nowrap;
font-weight: 500;
}
......
支持 Markdown 格式
你添加了 0 人 到此讨论。请谨慎行事。
Finish editing this message first!