Skip to content

M
mh-h5
提交 030f7b3a authored 作者: ling's avatar ling
浏览文件
操作

h5 style

上级 16f9b4e1
隐藏空白字符变更
内嵌 并排
正在显示 包含 433 行增加 和 218 行删除
assets/scripts/fetcher.js
浏览文件 @ 030f7b3a
import axios from 'axios'
axios.defaults.baseURL = 'http://8.218.98.47/'
axios.defaults.baseURL = 'https://api.chzb9.com'
axios.defaults.headers.common['Content-Type'] = 'application/json'
export const fetcher = async (APIUrl, httpVerb = 'POST', payload) => {
const axiosConfig = {
method: httpVerb.toLowerCase(),
url: APIUrl,
data: payload
}
return await axios(axiosConfig)
.then(function (response) {
if (response.data.code === 200) {
return response.data
} else {
return Promise.reject(response)
}
})
.catch(function (error) {
return error
})
}
export const fetcher = async(APIUrl, httpVerb = 'POST', payload) => {
const axiosConfig = {
method: httpVerb.toLowerCase(),
url: APIUrl,
data: payload
}
return await axios(axiosConfig)
.then(function(response) {
if (response.data.code === 200) {
return response.data
} else {
return Promise.reject(response)
}
})
.catch(function(error) {
return error
})
}
\ No newline at end of file
assets/scripts/socket.js
浏览文件 @ 030f7b3a
import Vue from 'vue'
const wsUrl = 'ws://8.218.98.47:6658'
const wsUrl = 'wss://api.chzb9.com/wss'
let socket = null
const heartCheck = {
timeout: 40000,
timeoutObj: null,
reset() {
clearTimeout(this.timeoutObj)
this.start()
},
start() {
this.timeoutObj = setTimeout(function () {
emitter.send({ type: "heartbeat" })
}, this.timeout)
},
clear() {
clearTimeout(this.timeoutObj)
},
}
const emitter = new Vue({
methods: {
send(message) {
if (socket.readyState === 1) {
socket.send(JSON.stringify(message))
}
timeout: 40000,
timeoutObj: null,
reset() {
clearTimeout(this.timeoutObj)
this.start()
},
start() {
this.timeoutObj = setTimeout(function() {
emitter.send({ type: "heartbeat" })
}, this.timeout)
},
connect() {
socket = new WebSocket(wsUrl)
socket.onopen = function () {
console.log('open')
heartCheck.start()
}
socket.onmessage = function (msg) {
emitter.$emit('message', msg.data)
if (msg.code === 101) {
heartCheck.reset()
}
if (msg.code === 100) {
emitter.$emit('message', msg.data)
}
}
socket.onerror = function (err) {
emitter.$emit('error', err)
}
socket.onclose = function () {
console.log('close')
emitter.connect()
}
clear() {
clearTimeout(this.timeoutObj)
},
close() {
heartCheck.clear()
socket.close()
}
const emitter = new Vue({
methods: {
send(message) {
if (socket.readyState === 1) {
socket.send(JSON.stringify(message))
}
},
connect() {
socket = new WebSocket(wsUrl)
socket.onopen = function() {
console.log('open')
heartCheck.start()
}
socket.onmessage = function(msg) {
emitter.$emit('message', msg.data)
if (msg.code === 101) {
heartCheck.reset()
}
if (msg.code === 100) {
emitter.$emit('message', msg.data)
}
}
socket.onerror = function(err) {
emitter.$emit('error', err)
}
socket.onclose = function() {
console.log('close')
emitter.connect()
}
},
close() {
heartCheck.clear()
socket.close()
},
},
},
})
export default emitter
export default emitter
\ No newline at end of file
components/Match.vue
浏览文件 @ 030f7b3a
<!-- Please remove this file from your project -->
<template>
<div>
<!-- <el-tabs class="tab-nav" v-model="activeName" type="card" @tab-click="getFootballMatch">
<el-tab-pane :label="beforeyesterday" :name="beforeyesterday"></el-tab-pane>
<el-tab-pane :label="yesterday" :name="yesterday"></el-tab-pane>
<el-tab-pane :label="`${today} (今天)`" :name="today"></el-tab-pane>
<el-tab-pane :label="tomorrow" :name="tomorrow"></el-tab-pane>
<el-tab-pane :label="aftertomorrow" :name="aftertomorrow"></el-tab-pane>
<el-tab-pane :label="aftertomorrow2" :name="aftertomorrow2"></el-tab-pane>
</el-tabs> -->
<van-tabs class="tab-nav" v-model="activeName" type="card" @click="getFootballMatch">
<van-tabs
class="tab-nav"
v-model="activeName"
type="card"
@click="getFootballMatch"
>
<van-tab :title="beforeyesterday" :name="beforeyesterday"></van-tab>
<van-tab :title="yesterday" :name="yesterday"></van-tab>
<van-tab :title="`${today} (今天)`" :name="today"></van-tab>
......@@ -19,61 +15,75 @@
<van-tab :title="aftertomorrow2" :name="aftertomorrow2"></van-tab>
</van-tabs>
<el-table :data="list" style="width: 100%" :show-header="false">
<el-table-column>
<template slot-scope="scope">
<div>{{ timeStamp1(scope.row.time) }}</div>
</template>
</el-table-column>
<el-table-column prop="competition_name_zh">
</el-table-column>
<el-table-column prop="home_team_name_zh">
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-image style="width: 40px;" :src="scope.row.home_team_log"></el-image>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div>{{ scope.row.home_score }}：{{ scope.row.away_score }}</div>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-image style="width: 40px;" :src="scope.row.away_team_log"></el-image>
</template>
</el-table-column>
<el-table-column prop="away_team_name_zh">
</el-table-column>
<el-table-column prop="status_str">
</el-table-column>
</el-table>
<van-cell-group v-for="item in list" :key="item.id">
<van-cell>
<span>{{ timeStamp1(item.time) }}</span>
<span>{{ item.competition_name_zh }}</span>
<span>{{ item.home_team_name_zh }}</span>
<!-- <van-image width="15" :src="item.home_team_log" /> -->
<span>{{ item.home_score }} ：{{ item.away_score }}</span>
<!-- <van-image width="15" :src="item.away_team_log" /> -->
<span>{{ item.away_team_name_zh }}</span>
<span>{{ item.status_str }}</span>
</van-cell>
</van-cell-group>
</div>
</template>
<script>
import { mapState } from 'vuex'
import {
getFootballMatch,
scheduleList
} from '~/api/football.js'
import { mapState } from "vuex";
import { getFootballMatch, scheduleList } from "~/api/football.js";
export default {
name: 'NuxtTutorial',
name: "NuxtTutorial",
data() {
return {
activeName: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
today: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
yesterday: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() - 1),
beforeyesterday: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() - 2),
tomorrow: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 1),
aftertomorrow: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 2),
aftertomorrow2: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 3),
activeName:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate(),
today:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate(),
yesterday:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() - 1),
beforeyesterday:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() - 2),
tomorrow:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() + 1),
aftertomorrow:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() + 2),
aftertomorrow2:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() + 3),
list: [],
}
};
},
created() {
this.getFootballMatch()
this.getFootballMatch();
},
computed: {
...mapState({
......@@ -84,11 +94,11 @@ export default {
webSocketData(data) {
if (data.type === "football_match") {
this.list.forEach((x, index) => {
if (x.id === data.id) {
x.home_score = data.home_score
x.away_score = data.away_score
}
})
if (x.id === data.id) {
x.home_score = data.home_score;
x.away_score = data.away_score;
}
});
}
},
},
......@@ -107,27 +117,27 @@ export default {
// 返回
return result;
},
async getFootballMatch(tab, event) {
const day = tab ? tab.name : this.today
async getFootballMatch(name, title) {
const day = name ? name : this.today;
try {
const res = await getFootballMatch(day)
const res = await getFootballMatch(day);
if (res.data.code === 0) {
this.list = res.data.data.data
this.list = res.data.data.data;
}
} catch (err) {
console.error(err)
console.error(err);
}
},
async scheduleList() {
try {
const res = await scheduleList()
this.list = res.data.data.data
const res = await scheduleList();
this.list = res.data.data.data;
} catch (err) {
console.error(err)
console.error(err);
}
},
}
}
},
};
</script>
<style scoped>
.tab-nav {
......
layouts/default.vue
浏览文件 @ 030f7b3a
......@@ -14,7 +14,7 @@
<el-menu-item index="/schedule">赛程</el-menu-item>
</el-menu> -->
</div>
<van-tabs v-model="activeIndex">
<van-tabs class="tab" v-model="activeIndex">
<van-tab title="即时比分" to="/"></van-tab>
<van-tab title="赛程" to="/schedule"></van-tab>
</van-tabs>
......@@ -46,10 +46,14 @@ export default {
};
</script>
<style scoped>
.tab {
margin: 10px 0;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.nav img {
......
pages/Schedule.vue
浏览文件 @ 030f7b3a
<!-- Please remove this file from your project -->
<template>
<div>
<el-tabs class="tab-nav" v-model="activeName" type="card" @tab-click="scheduleList">
<el-tab-pane :label="beforeyesterday" :name="beforeyesterday"></el-tab-pane>
<el-tab-pane :label="yesterday" :name="yesterday"></el-tab-pane>
<el-tab-pane :label="`${today} (今天)`" :name="today"></el-tab-pane>
<el-tab-pane :label="tomorrow" :name="tomorrow"></el-tab-pane>
<el-tab-pane :label="aftertomorrow" :name="aftertomorrow"></el-tab-pane>
<el-tab-pane :label="aftertomorrow2" :name="aftertomorrow2"></el-tab-pane>
</el-tabs>
<van-tabs
class="tab-nav"
v-model="activeName"
type="card"
@click="scheduleList"
>
<van-tab :title="beforeyesterday" :name="beforeyesterday"></van-tab>
<van-tab :title="yesterday" :name="yesterday"></van-tab>
<van-tab :title="`${today} (今天)`" :name="today"></van-tab>
<van-tab :title="tomorrow" :name="tomorrow"></van-tab>
<van-tab :title="aftertomorrow" :name="aftertomorrow"></van-tab>
<van-tab :title="aftertomorrow2" :name="aftertomorrow2"></van-tab>
</van-tabs>
<div class="schedule">
<div class="schedule-match">
<div class="search">
<van-icon name="search" @click="show = true" />
</div>
<van-action-sheet v-model="show" title="标题">
<div>
<van-field
class="content"
readonly
clickable
:value="matchText"
name="picker"
label="赛事"
placeholder="点击选择赛事"
@click="showMatchType = true"
/>
<van-popup v-model="showMatchType" position="bottom">
<van-picker
value-key="text"
show-toolbar
:columns="columns"
@confirm="getAllMatchType"
@cancel="showMatchType = false"
/>
</van-popup>
</div>
<div v-if="matchType === 1">
<van-field
class="content"
readonly
clickable
:value="compensationText"
name="picker"
label="足球"
placeholder="点击选择足球赛事"
@click="showFootball = true"
/>
<van-popup v-model="showFootball" position="bottom">
<van-picker
value-key="short_name_zh"
show-toolbar
:columns="football"
@confirm="getMatchType"
@cancel="showFootball = false"
/>
</van-popup>
</div>
<div v-if="matchType === 2">
<van-field
class="content"
readonly
clickable
:value="compensationText"
name="picker"
label="篮球"
placeholder="点击选择篮球赛事"
@click="showBasketball = true"
/>
<van-popup v-model="showBasketball" position="bottom">
<van-picker
value-key="short_name_zh"
show-toolbar
:columns="basketball"
@confirm="getMatchType"
@cancel="showBasketball = false"
/>
</van-popup>
</div>
</van-action-sheet>
<van-cell-group v-for="item in list" :key="item.id">
<van-cell>
<!-- <span>{{ timeStamp1(item.time) }}</span>
<span>{{ item.competition_name_zh }}</span>
<span>{{ item.home_team_name_zh }}</span>
<span>{{ item.home_score }} ：{{ item.away_score }}</span>
<van-image width="15" :src="item.away_team_log" />
<span>{{ item.away_team_name_zh }}</span>
<span>{{ item.status_str }}</span> -->
<div style="display: flex">
<div class="list-item" style="width: 10%;">
<van-image :src="item.away_team_logo" />
<van-image :src="item.home_team_logo" />
</div>
<div class="list-item" style="width: 40%;">
<div>{{ item.away_team_name }}</div>
<div>{{ item.home_team_name }}</div>
</div>
<div class="list-item" style="width: 25%;">
<div>{{ item.away_scores }}</div>
<div>{{ item.home_scores }}</div>
</div>
<div class="list-item" style="width: 25%;">
<div>{{ item.competition }}</div>
<div>{{ item.match_time }}</div>
<div>{{ item.status_str }}</div>
</div>
</div>
</van-cell>
</van-cell-group>
<!-- <div class="schedule">
<div class="schedule-match">
<div>
<div class="schedule-title">
<div>赛事</div>
</div>
<el-select v-model="matchType" placeholder="请选择" @change="getAllMatchType">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="matchType"
placeholder="请选择"
@change="getAllMatchType"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
......@@ -28,8 +142,17 @@
<div>足球</div>
<div>今日 {{ footballCount }} 场比赛</div>
</div>
<el-select v-model="footballCompensation" placeholder="请选择" @change="getMatchType">
<el-option v-for="item in football" :key="item.sourceid" :label="item.short_name_zh" :value="item.sourceid">
<el-select
v-model="footballCompensation"
placeholder="请选择"
@change="getMatchType"
>
<el-option
v-for="item in football"
:key="item.sourceid"
:label="item.short_name_zh"
:value="item.sourceid"
>
</el-option>
</el-select>
</div>
......@@ -39,9 +162,17 @@
<div>篮球</div>
<div>今日 {{ basketballCount }} 场比赛</div>
</div>
<el-select v-model="basketballCompensation" placeholder="请选择" @change="getMatchType">
<el-option v-for="item in basketball" :key="item.sourceid" :label="item.short_name_zh"
:value="item.sourceid">
<el-select
v-model="basketballCompensation"
placeholder="请选择"
@change="getMatchType"
>
<el-option
v-for="item in basketball"
:key="item.sourceid"
:label="item.short_name_zh"
:value="item.sourceid"
>
</el-option>
</el-select>
</div>
......@@ -50,9 +181,15 @@
<el-table :data="list" style="width: 100%" :show-header="false">
<el-table-column class="row" width="45">
<template slot-scope="scope">
<div style="display: grid;">
<el-image style="width: 30px;" :src="scope.row.away_team_logo"></el-image>
<el-image style="width: 30px;" :src="scope.row.home_team_logo"></el-image>
<div style="display: grid">
<el-image
style="width: 30px"
:src="scope.row.away_team_logo"
></el-image>
<el-image
style="width: 30px"
:src="scope.row.home_team_logo"
></el-image>
</div>
</template>
</el-table-column>
......@@ -76,63 +213,111 @@
</template>
</el-table-column>
</el-table>
</div>
</div> -->
</div>
</template>
<script>
import {
scheduleList,
scheduleMatch
} from '~/api/football.js'
import { scheduleList, scheduleMatch } from "~/api/football.js";
export default {
name: 'NuxtTutorial',
name: "NuxtTutorial",
data() {
return {
activeName: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
today: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
yesterday: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() - 1),
beforeyesterday: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() - 2),
tomorrow: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 1),
aftertomorrow: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 2),
aftertomorrow2: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 3),
show: false,
showMatchType: false,
showFootball: false,
showBasketball: false,
activeName:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate(),
today:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate(),
yesterday:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() - 1),
beforeyesterday:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() - 2),
tomorrow:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() + 1),
aftertomorrow:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() + 2),
aftertomorrow2:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
(new Date().getDate() + 3),
matchType: 0,
list: [],
football: [],
footballCount: '',
footballCount: "",
basketball: [],
basketballCount: '',
basketballCount: "",
basketballCompensation: 0,
footballCompensation: 0,
compensationId: 0,
options: [{
value: 0,
label: '全部赛事'
}, {
value: 1,
label: '足球'
}, {
value: 2,
label: '篮球'
}],
}
compensationText: "",
columns: [
{
value: 0,
text: "全部赛事",
},
{
value: 1,
text: "足球",
},
{
value: 2,
text: "篮球",
},
],
};
},
created() {
this.scheduleList()
this.scheduleMatch()
this.scheduleList();
this.scheduleMatch();
},
methods: {
getAllMatchType() {
this.activeName = this.today
this.compensationId = 0
this.footballCompensation = 0
this.basketballCompensation = 0
this.scheduleList()
getAllMatchType(value) {
this.matchText = value.text;
this.matchType = value.value;
this.activeName = this.today;
this.compensationId = 0;
this.footballCompensation = 0;
this.basketballCompensation = 0;
this.scheduleList();
this.showMatchType = false;
this.compensationText = "";
},
getMatchType(value) {
this.activeName = this.today
this.compensationId = value
this.scheduleList()
this.activeName = this.today;
this.compensationId = value.sourceid;
this.compensationText = value.short_name_zh;
this.scheduleList();
this.showFootball = false;
this.showBasketball = false;
},
timeStamp1(value) {
var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
......@@ -148,47 +333,47 @@ export default {
// 返回
return result;
},
async scheduleList(tab, event) {
async scheduleList(name, title) {
const params = {
date: tab ? tab.name : this.today,
date: name ? name : this.today,
match_type: this.matchType,
compensation_id: this.compensationId
}
compensation_id: this.compensationId,
};
try {
const res = await scheduleList(params)
const res = await scheduleList(params);
if (res.data.code === 0) {
this.list = res.data.data.data
this.list = res.data.data.data;
}
} catch (err) {
console.error(err)
console.error(err);
}
},
async scheduleMatch() {
const day = this.today
const day = this.today;
try {
const res = await scheduleMatch(day)
const res = await scheduleMatch(day);
if (res.data.code === 0) {
this.football = res.data.data.football.list
this.footballCount = res.data.data.football.count
this.football = res.data.data.football.list;
this.footballCount = res.data.data.football.count;
this.football.unshift({
name_zh: "全部",
short_name_zh: "全部",
sourceid: 0
})
this.basketball = res.data.data.basketball.list
this.basketballCount = res.data.data.basketball.count
sourceid: 0,
});
this.basketball = res.data.data.basketball.list;
this.basketballCount = res.data.data.basketball.count;
this.basketball.unshift({
name_zh: "全部",
short_name_zh: "全部",
sourceid: 0
})
sourceid: 0,
});
}
} catch (err) {
console.error(err)
console.error(err);
}
},
}
}
},
};
</script>
<style scoped>
.row {
......@@ -200,14 +385,28 @@ export default {
justify-content: center;
}
.search {
display: flex;
justify-content: end;
margin: 10px 20px;
}
.content {
padding: 15px;
}
.list-item {
display: grid;
}
.schedule-match {
width: 200px;
margin: 0 20px;
}
.schedule {
display: flex;
width: 800px;
margin: 0 auto;
width: 800px;
margin: 0 auto;
}
.schedule-title {
display: flex;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论