Skip to content

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

h5 style

上级 16f9b4e1
显示空白字符变更
内嵌 并排
正在显示 包含 367 行增加 和 153 行删除
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
<!-- 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="scheduleList"> <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="scheduleList"
<el-tab-pane :label="aftertomorrow" :name="aftertomorrow"></el-tab-pane> >
<el-tab-pane :label="aftertomorrow2" :name="aftertomorrow2"></el-tab-pane> <van-tab :title="beforeyesterday" :name="beforeyesterday"></van-tab>
</el-tabs> <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="search">
<div class="schedule-match"> <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>
<div class="schedule-title"> <div class="schedule-title">
<div>赛事</div> <div>赛事</div>
</div> </div>
<el-select v-model="matchType" placeholder="请选择" @change="getAllMatchType"> <el-select
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> 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-option>
</el-select> </el-select>
</div> </div>
...@@ -28,8 +142,17 @@ ...@@ -28,8 +142,17 @@
<div>足球</div> <div>足球</div>
<div>今日 {{ footballCount }} 场比赛</div> <div>今日 {{ footballCount }} 场比赛</div>
</div> </div>
<el-select v-model="footballCompensation" placeholder="请选择" @change="getMatchType"> <el-select
<el-option v-for="item in football" :key="item.sourceid" :label="item.short_name_zh" :value="item.sourceid"> 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-option>
</el-select> </el-select>
</div> </div>
...@@ -39,9 +162,17 @@ ...@@ -39,9 +162,17 @@
<div>篮球</div> <div>篮球</div>
<div>今日 {{ basketballCount }} 场比赛</div> <div>今日 {{ basketballCount }} 场比赛</div>
</div> </div>
<el-select v-model="basketballCompensation" placeholder="请选择" @change="getMatchType"> <el-select
<el-option v-for="item in basketball" :key="item.sourceid" :label="item.short_name_zh" v-model="basketballCompensation"
:value="item.sourceid"> placeholder="请选择"
@change="getMatchType"
>
<el-option
v-for="item in basketball"
:key="item.sourceid"
:label="item.short_name_zh"
:value="item.sourceid"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
...@@ -50,9 +181,15 @@ ...@@ -50,9 +181,15 @@
<el-table :data="list" style="width: 100%" :show-header="false"> <el-table :data="list" style="width: 100%" :show-header="false">
<el-table-column class="row" width="45"> <el-table-column class="row" width="45">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="display: grid;"> <div style="display: grid">
<el-image style="width: 30px;" :src="scope.row.away_team_logo"></el-image> <el-image
<el-image style="width: 30px;" :src="scope.row.home_team_logo"></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> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -76,63 +213,111 @@ ...@@ -76,63 +213,111 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div> -->
</div> </div>
</template> </template>
<script> <script>
import { import { scheduleList, scheduleMatch } from "~/api/football.js";
scheduleList,
scheduleMatch
} 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(), show: false,
today: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(), showMatchType: false,
yesterday: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() - 1), showFootball: false,
beforeyesterday: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() - 2), showBasketball: false,
tomorrow: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 1), activeName:
aftertomorrow: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 2), new Date().getFullYear() +
aftertomorrow2: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate() + 3), "-" +
(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, matchType: 0,
list: [], list: [],
football: [], football: [],
footballCount: '', footballCount: "",
basketball: [], basketball: [],
basketballCount: '', basketballCount: "",
basketballCompensation: 0, basketballCompensation: 0,
footballCompensation: 0, footballCompensation: 0,
compensationId: 0, compensationId: 0,
options: [{ compensationText: "",
columns: [
{
value: 0, value: 0,
label: '全部赛事' text: "全部赛事",
}, { },
{
value: 1, value: 1,
label: '足球' text: "足球",
}, { },
{
value: 2, value: 2,
label: '篮球' text: "篮球",
}], },
} ],
};
}, },
created() { created() {
this.scheduleList() this.scheduleList();
this.scheduleMatch() this.scheduleMatch();
}, },
methods: { methods: {
getAllMatchType() { getAllMatchType(value) {
this.activeName = this.today this.matchText = value.text;
this.compensationId = 0 this.matchType = value.value;
this.footballCompensation = 0 this.activeName = this.today;
this.basketballCompensation = 0 this.compensationId = 0;
this.scheduleList() this.footballCompensation = 0;
this.basketballCompensation = 0;
this.scheduleList();
this.showMatchType = false;
this.compensationText = "";
}, },
getMatchType(value) { getMatchType(value) {
this.activeName = this.today this.activeName = this.today;
this.compensationId = value this.compensationId = value.sourceid;
this.scheduleList() this.compensationText = value.short_name_zh;
this.scheduleList();
this.showFootball = false;
this.showBasketball = false;
}, },
timeStamp1(value) { timeStamp1(value) {
var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
...@@ -148,47 +333,47 @@ export default { ...@@ -148,47 +333,47 @@ export default {
// 返回 // 返回
return result; return result;
}, },
async scheduleList(tab, event) { async scheduleList(name, title) {
const params = { const params = {
date: tab ? tab.name : this.today, date: name ? name : this.today,
match_type: this.matchType, match_type: this.matchType,
compensation_id: this.compensationId compensation_id: this.compensationId,
} };
try { try {
const res = await scheduleList(params) const res = await scheduleList(params);
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 scheduleMatch() { async scheduleMatch() {
const day = this.today const day = this.today;
try { try {
const res = await scheduleMatch(day) const res = await scheduleMatch(day);
if (res.data.code === 0) { if (res.data.code === 0) {
this.football = res.data.data.football.list this.football = res.data.data.football.list;
this.footballCount = res.data.data.football.count this.footballCount = res.data.data.football.count;
this.football.unshift({ this.football.unshift({
name_zh: "全部", name_zh: "全部",
short_name_zh: "全部", short_name_zh: "全部",
sourceid: 0 sourceid: 0,
}) });
this.basketball = res.data.data.basketball.list this.basketball = res.data.data.basketball.list;
this.basketballCount = res.data.data.basketball.count this.basketballCount = res.data.data.basketball.count;
this.basketball.unshift({ this.basketball.unshift({
name_zh: "全部", name_zh: "全部",
short_name_zh: "全部", short_name_zh: "全部",
sourceid: 0 sourceid: 0,
}) });
} }
} catch (err) { } catch (err) {
console.error(err) console.error(err);
} }
}, },
} },
} };
</script> </script>
<style scoped> <style scoped>
.row { .row {
...@@ -200,6 +385,20 @@ export default { ...@@ -200,6 +385,20 @@ export default {
justify-content: center; justify-content: center;
} }
.search {
display: flex;
justify-content: end;
margin: 10px 20px;
}
.content {
padding: 15px;
}
.list-item {
display: grid;
}
.schedule-match { .schedule-match {
width: 200px; width: 200px;
margin: 0 20px; margin: 0 20px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论