Skip to content

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

h5 style

上级 16f9b4e1
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 155 行增加 和 139 行删除
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
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论