Skip to content

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

h5 style

上级 16f9b4e1
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 94 行增加 和 79 行删除
assets/scripts/fetcher.js
浏览文件 @ 030f7b3a
import axios from 'axios' 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' axios.defaults.headers.common['Content-Type'] = 'application/json'
export const fetcher = async (APIUrl, httpVerb = 'POST', payload) => { export const fetcher = async(APIUrl, httpVerb = 'POST', payload) => {
const axiosConfig = { const axiosConfig = {
method: httpVerb.toLowerCase(), method: httpVerb.toLowerCase(),
url: APIUrl, url: APIUrl,
data: payload data: payload
} }
return await axios(axiosConfig) return await axios(axiosConfig)
.then(function (response) { .then(function(response) {
if (response.data.code === 200) { if (response.data.code === 200) {
return response.data return response.data
} else { } else {
return Promise.reject(response) return Promise.reject(response)
} }
}) })
.catch(function (error) { .catch(function(error) {
return error return error
}) })
} }
\ No newline at end of file
assets/scripts/socket.js
浏览文件 @ 030f7b3a
import Vue from 'vue' import Vue from 'vue'
const wsUrl = 'ws://8.218.98.47:6658' const wsUrl = 'wss://api.chzb9.com/wss'
let socket = null let socket = null
const heartCheck = { const heartCheck = {
timeout: 40000, timeout: 40000,
...@@ -9,7 +9,7 @@ const heartCheck = { ...@@ -9,7 +9,7 @@ const heartCheck = {
this.start() this.start()
}, },
start() { start() {
this.timeoutObj = setTimeout(function () { this.timeoutObj = setTimeout(function() {
emitter.send({ type: "heartbeat" }) emitter.send({ type: "heartbeat" })
}, this.timeout) }, this.timeout)
}, },
...@@ -26,11 +26,11 @@ const emitter = new Vue({ ...@@ -26,11 +26,11 @@ const emitter = new Vue({
}, },
connect() { connect() {
socket = new WebSocket(wsUrl) socket = new WebSocket(wsUrl)
socket.onopen = function () { socket.onopen = function() {
console.log('open') console.log('open')
heartCheck.start() heartCheck.start()
} }
socket.onmessage = function (msg) { socket.onmessage = function(msg) {
emitter.$emit('message', msg.data) emitter.$emit('message', msg.data)
if (msg.code === 101) { if (msg.code === 101) {
heartCheck.reset() heartCheck.reset()
...@@ -39,10 +39,10 @@ const emitter = new Vue({ ...@@ -39,10 +39,10 @@ const emitter = new Vue({
emitter.$emit('message', msg.data) emitter.$emit('message', msg.data)
} }
} }
socket.onerror = function (err) { socket.onerror = function(err) {
emitter.$emit('error', err) emitter.$emit('error', err)
} }
socket.onclose = function () { socket.onclose = function() {
console.log('close') console.log('close')
emitter.connect() emitter.connect()
} }
......
components/Match.vue
浏览文件 @ 030f7b3a
<!-- Please remove this file from your project --> <!-- Please remove this file from your project -->
<template> <template>
<div> <div>
<!-- <el-tabs class="tab-nav" v-model="activeName" type="card" @tab-click="getFootballMatch"> <van-tabs
<el-tab-pane :label="beforeyesterday" :name="beforeyesterday"></el-tab-pane> class="tab-nav"
<el-tab-pane :label="yesterday" :name="yesterday"></el-tab-pane> v-model="activeName"
<el-tab-pane :label="`${today} (今天)`" :name="today"></el-tab-pane> type="card"
<el-tab-pane :label="tomorrow" :name="tomorrow"></el-tab-pane> @click="getFootballMatch"
<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-tab :title="beforeyesterday" :name="beforeyesterday"></van-tab> <van-tab :title="beforeyesterday" :name="beforeyesterday"></van-tab>
<van-tab :title="yesterday" :name="yesterday"></van-tab> <van-tab :title="yesterday" :name="yesterday"></van-tab>
<van-tab :title="`${today} (今天)`" :name="today"></van-tab> <van-tab :title="`${today} (今天)`" :name="today"></van-tab>
...@@ -19,61 +15,75 @@ ...@@ -19,61 +15,75 @@
<van-tab :title="aftertomorrow2" :name="aftertomorrow2"></van-tab> <van-tab :title="aftertomorrow2" :name="aftertomorrow2"></van-tab>
</van-tabs> </van-tabs>
<el-table :data="list" style="width: 100%" :show-header="false"> <van-cell-group v-for="item in list" :key="item.id">
<el-table-column> <van-cell>
<template slot-scope="scope"> <span>{{ timeStamp1(item.time) }}</span>
<div>{{ timeStamp1(scope.row.time) }}</div> <span>{{ item.competition_name_zh }}</span>
</template> <span>{{ item.home_team_name_zh }}</span>
</el-table-column> <!-- <van-image width="15" :src="item.home_team_log" /> -->
<el-table-column prop="competition_name_zh"> <span>{{ item.home_score }} ：{{ item.away_score }}</span>
</el-table-column> <!-- <van-image width="15" :src="item.away_team_log" /> -->
<el-table-column prop="home_team_name_zh"> <span>{{ item.away_team_name_zh }}</span>
</el-table-column> <span>{{ item.status_str }}</span>
<el-table-column> </van-cell>
<template slot-scope="scope"> </van-cell-group>
<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>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from "vuex";
import { import { getFootballMatch, scheduleList } from "~/api/football.js";
getFootballMatch,
scheduleList
} from '~/api/football.js'
export default { export default {
name: 'NuxtTutorial', name: "NuxtTutorial",
data() { data() {
return { return {
activeName: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(), activeName:
today: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(), new Date().getFullYear() +
yesterday: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() - 1), "-" +
beforeyesterday: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() - 2), (new Date().getMonth() + 1) +
tomorrow: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 1), "-" +
aftertomorrow: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 2), new Date().getDate(),
aftertomorrow2: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 3), 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: [], list: [],
} };
}, },
created() { created() {
this.getFootballMatch() this.getFootballMatch();
}, },
computed: { computed: {
...mapState({ ...mapState({
...@@ -85,10 +95,10 @@ export default { ...@@ -85,10 +95,10 @@ export default {
if (data.type === "football_match") { if (data.type === "football_match") {
this.list.forEach((x, index) => { this.list.forEach((x, index) => {
if (x.id === data.id) { if (x.id === data.id) {
x.home_score = data.home_score x.home_score = data.home_score;
x.away_score = data.away_score x.away_score = data.away_score;
} }
}) });
} }
}, },
}, },
...@@ -107,27 +117,27 @@ export default { ...@@ -107,27 +117,27 @@ export default {
// 返回 // 返回
return result; return result;
}, },
async getFootballMatch(tab, event) { async getFootballMatch(name, title) {
const day = tab ? tab.name : this.today const day = name ? name : this.today;
try { try {
const res = await getFootballMatch(day) const res = await getFootballMatch(day);
if (res.data.code === 0) { if (res.data.code === 0) {
this.list = res.data.data.data this.list = res.data.data.data;
} }
} catch (err) { } catch (err) {
console.error(err) console.error(err);
} }
}, },
async scheduleList() { async scheduleList() {
try { try {
const res = await scheduleList() const res = await scheduleList();
this.list = res.data.data.data this.list = res.data.data.data;
} catch (err) { } catch (err) {
console.error(err) console.error(err);
} }
}, },
} },
} };
</script> </script>
<style scoped> <style scoped>
.tab-nav { .tab-nav {
......
layouts/default.vue
浏览文件 @ 030f7b3a
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<el-menu-item index="/schedule">赛程</el-menu-item> <el-menu-item index="/schedule">赛程</el-menu-item>
</el-menu> --> </el-menu> -->
</div> </div>
<van-tabs v-model="activeIndex"> <van-tabs class="tab" v-model="activeIndex">
<van-tab title="即时比分" to="/"></van-tab> <van-tab title="即时比分" to="/"></van-tab>
<van-tab title="赛程" to="/schedule"></van-tab> <van-tab title="赛程" to="/schedule"></van-tab>
</van-tabs> </van-tabs>
...@@ -46,10 +46,14 @@ export default { ...@@ -46,10 +46,14 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.tab {
margin: 10px 0;
}
.nav { .nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 10px;
} }
.nav img { .nav img {
......
pages/Schedule.vue
浏览文件 @ 030f7b3a
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论