Commit 12bbfccb1504d24461cf581e89e6224bcc365f5f
1 parent
e761f677
Exists in
master
feat:新埋点对接
Showing
9 changed files
with
778 additions
and
696 deletions
Show diff stats
public/index.html
@@ -2,70 +2,25 @@ | @@ -2,70 +2,25 @@ | ||
2 | <html lang="en"> | 2 | <html lang="en"> |
3 | 3 | ||
4 | <head> | 4 | <head> |
5 | - <meta charset="utf-8"> | ||
6 | - <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
7 | - <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
8 | - <meta name="format-detection" content="telephone=yes" /> | ||
9 | - <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | ||
10 | - <title></title> | ||
11 | - <!-- 埋点 --> | ||
12 | - <!-- <script src="https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085"></script> --> | ||
13 | - <script> | ||
14 | - (function(w, d, s, q, i) { | ||
15 | - w[q] = w[q] || []; | ||
16 | - var f = d.getElementsByTagName(s)[0], | ||
17 | - j = d.createElement(s); | ||
18 | - j.async = true; | ||
19 | - j.id = 'beacon-aplus'; | ||
20 | - j.src = 'https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085'; | ||
21 | - f.parentNode.insertBefore(j, f); | ||
22 | - })(window, document, 'script', 'aplus_queue'); | ||
23 | - | ||
24 | - aplus_queue.push({ | ||
25 | - action: 'aplus.setMetaInfo', | ||
26 | - arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn'] | ||
27 | - }); | ||
28 | - | ||
29 | - | ||
30 | - aplus_queue.push({ | ||
31 | - action: 'aplus.setMetaInfo', | ||
32 | - arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn'] | ||
33 | - }); | ||
34 | - | ||
35 | - aplus_queue.push({ | ||
36 | - action: 'aplus.setMetaInfo', | ||
37 | - arguments: ['appId', '60506758'] | ||
38 | - }); | ||
39 | - aplus_queue.push({ | ||
40 | - 'action': 'aplus.sendPV', | ||
41 | - 'arguments': [{ | ||
42 | - is_auto: false | ||
43 | - }, { | ||
44 | - miniAppId: '2001895516', | ||
45 | - }] | ||
46 | - }) | ||
47 | - // aplus_queue.push({ | ||
48 | - // action: 'aplus.setMetaInfo', | ||
49 | - // arguments: ['miniAppId', '2001895516'] | ||
50 | - // }); | ||
51 | - // aplus_queue.push({ | ||
52 | - // action: 'aplus.setMetaInfo', | ||
53 | - // arguments: ['miniAppName', '红色网上游'] | ||
54 | - // }); | ||
55 | - </script> | 5 | + <meta charset="utf-8"> |
6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
7 | + <meta name="viewport" | ||
8 | + content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
9 | + <meta name="format-detection" content="telephone=yes" /> | ||
10 | + <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | ||
11 | + <title></title> | ||
12 | + <script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script> | ||
13 | + <script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script> | ||
56 | </head> | 14 | </head> |
57 | 15 | ||
58 | <body> | 16 | <body> |
59 | - <noscript> | ||
60 | - <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. | ||
61 | - Please enable it to continue.</strong> | ||
62 | - </noscript> | ||
63 | - <div id="app"></div> | ||
64 | - <!-- 地图 --> | ||
65 | - <script src="https://webapi.amap.com/maps?v=1.4.15&key=61af1988b71a634a59a0de29409baeb8"></script> | ||
66 | - <!-- 政务中台JSAPI --> | ||
67 | - <script src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js"></script> | ||
68 | - | 17 | + <noscript> |
18 | + <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. | ||
19 | + Please enable it to continue.</strong> | ||
20 | + </noscript> | ||
21 | + <div id="app"></div> | ||
22 | + <!-- 地图 --> | ||
23 | + <script src="https://webapi.amap.com/maps?v=1.4.15&key=61af1988b71a634a59a0de29409baeb8"></script> | ||
69 | </body> | 24 | </body> |
70 | 25 | ||
71 | </html> | 26 | </html> |
72 | \ No newline at end of file | 27 | \ No newline at end of file |
public/zwlogJS接入.html
@@ -17,9 +17,11 @@ | @@ -17,9 +17,11 @@ | ||
17 | _user_id: "用户ID", | 17 | _user_id: "用户ID", |
18 | _user_nick: "用户昵称" | 18 | _user_nick: "用户昵称" |
19 | }) | 19 | }) |
20 | + console.log(2222) | ||
20 | 21 | ||
21 | //onReady表示zwlog加载完成后的函数,它接收一个匿名函数,而sendPV与record方法均要在匿名函数内调用。eg: | 22 | //onReady表示zwlog加载完成后的函数,它接收一个匿名函数,而sendPV与record方法均要在匿名函数内调用。eg: |
22 | zwlog.onReady(function () { | 23 | zwlog.onReady(function () { |
24 | + console.log(1111) | ||
23 | //PV日志 | 25 | //PV日志 |
24 | zwlog.sendPV({ | 26 | zwlog.sendPV({ |
25 | miniAppId: 'IRS服务侧应用appid', | 27 | miniAppId: 'IRS服务侧应用appid', |
src/App.vue
@@ -11,8 +11,17 @@ export default { | @@ -11,8 +11,17 @@ export default { | ||
11 | isElder: false, | 11 | isElder: false, |
12 | } | 12 | } |
13 | }, | 13 | }, |
14 | + watch: { | ||
15 | + $route(to, from) { | ||
16 | + console.log('zheliban 》》》 ', to, from) | ||
17 | + this.$zwlogPvGlobal({ url: to.meta.pagePath, enterPageTime: new Date() }) | ||
18 | + this.$zwlogPvGlobal({ | ||
19 | + url: from.meta.pagePath, | ||
20 | + leavePageTime: new Date(), | ||
21 | + }) | ||
22 | + }, | ||
23 | + }, | ||
14 | mounted() { | 24 | mounted() { |
15 | - // new vConsole() | ||
16 | ZWJSBridge.onReady(() => { | 25 | ZWJSBridge.onReady(() => { |
17 | console.log('初始化完成后,执行bridge方法') | 26 | console.log('初始化完成后,执行bridge方法') |
18 | }) | 27 | }) |
@@ -0,0 +1,134 @@ | @@ -0,0 +1,134 @@ | ||
1 | + | ||
2 | +// 埋点对象 | ||
3 | +var zwlog; | ||
4 | + | ||
5 | +// 页面埋点数据 | ||
6 | +var pageLogMap = {}; | ||
7 | + | ||
8 | +/* | ||
9 | + * *******用户信息采集,同时声明 Zwlog 对象实例 | ||
10 | + * uerId 用户 ID 没登录就非必填,登录了必填 | ||
11 | + */ | ||
12 | +export function initZwlog () { | ||
13 | + zwlog = new ZwLog({ | ||
14 | + _user_id: localStorage.getItem('centerNo'), | ||
15 | + _user_nick: localStorage.getItem('_user_nick') | ||
16 | + }); | ||
17 | +} | ||
18 | + | ||
19 | +/* | ||
20 | + * *******PV 日志参数- global_args | ||
21 | + * url 页面路径 【选填】(未传参默认获取当前路由地址) | ||
22 | + * enterPageTime 【必填】(默认在路由改变的时候自动获取时间) 进入页面的时间 new Date() | ||
23 | + * leavePageTime 【必填】(默认在路由改变的时候自动获取时间) 离开页面的时间 new Date() | ||
24 | + * loadTime【必填】(页面onShow中获取当前时间) 加载完的时间 new Date() | ||
25 | + * responseTime 【必填】(页面onShow的nextTick中获取当前时间) 响应完的时间 new Date() | ||
26 | + */ | ||
27 | +export function zwlogPvGlobal ({ | ||
28 | + url = null, | ||
29 | + enterPageTime = null, | ||
30 | + leavePageTime = null, | ||
31 | + loadTime = null, | ||
32 | + responseTime = null | ||
33 | +} = {}) { | ||
34 | + console.log('调用zwlogPvGlobal') | ||
35 | + if (!zwlog) initZwlog(); | ||
36 | + let path = url || getCurRoute(); | ||
37 | + if (!pageLogMap.hasOwnProperty(path)) | ||
38 | + pageLogMap[path] = { | ||
39 | + enterPageTime: null, | ||
40 | + leavePageTime: null, | ||
41 | + loadTime: null, | ||
42 | + responseTime: null, | ||
43 | + }; | ||
44 | + | ||
45 | + if (enterPageTime) pageLogMap[path].enterPageTime = enterPageTime; | ||
46 | + if (leavePageTime) pageLogMap[path].leavePageTime = leavePageTime; | ||
47 | + if (loadTime) pageLogMap[path].loadTime = loadTime; | ||
48 | + if (responseTime) pageLogMap[path].responseTime = responseTime; | ||
49 | + | ||
50 | + console.log("zheliban === " + path, pageLogMap[path]); | ||
51 | + | ||
52 | + if ( | ||
53 | + pageLogMap[path].enterPageTime && | ||
54 | + pageLogMap[path].leavePageTime && | ||
55 | + pageLogMap[path].loadTime && | ||
56 | + pageLogMap[path].responseTime | ||
57 | + ) { | ||
58 | + /* | ||
59 | + * miniAppId 应用开发管理 平台 appId | ||
60 | + * miniAppName 应用开发管理 平台应用名称 | ||
61 | + * log_status 用户登录状态 (01:未登录/ 02:单点登录) | ||
62 | + * Page_duration 浏览时长 用户从进入到离开当 前页面的时长 | ||
63 | + * t2 页面加载时间 页面启动到加载完成 的时间 | ||
64 | + * t0 页面响应时间 页面启动到页面响应 完成的时间 | ||
65 | + * pageId 应用页面 ID | ||
66 | + * pageName 应用页面名称 | ||
67 | + */ | ||
68 | + let Page_duration = | ||
69 | + pageLogMap[path].leavePageTime.getTime() - | ||
70 | + pageLogMap[path].enterPageTime.getTime(); | ||
71 | + let t2 = | ||
72 | + pageLogMap[path].loadTime.getTime() - | ||
73 | + pageLogMap[path].enterPageTime.getTime(); | ||
74 | + let t0 = | ||
75 | + pageLogMap[path].responseTime.getTime() - | ||
76 | + pageLogMap[path].enterPageTime.getTime(); | ||
77 | + setTimeout(() => { | ||
78 | + let pvParams = { | ||
79 | + miniAppId: "2001895516", | ||
80 | + miniAppName: "红色网上游", | ||
81 | + log_status: "2001895516", | ||
82 | + Page_duration: Page_duration / 1000 + "秒", | ||
83 | + t2: t2 / 1000 + "秒", | ||
84 | + t0: t0 / 1000 + "秒", | ||
85 | + pageId: path, | ||
86 | + pageName: getNavigationBarTitleText(), | ||
87 | + }; | ||
88 | + zwlog.onReady(function () { | ||
89 | + console.log('zwlog onReady') | ||
90 | + zwlog.sendPV(pvParams); | ||
91 | + delete pageLogMap[path]; | ||
92 | + }); | ||
93 | + }, 500); | ||
94 | + } else { | ||
95 | + let result = ""; | ||
96 | + for (let k in pageLogMap[path]) { | ||
97 | + if (!pageLogMap[path][k]) result += k + ","; | ||
98 | + } | ||
99 | + console.log("zheliban === 浙里办页面" + path + "埋点缺少参数=>>", result); | ||
100 | + } | ||
101 | +} | ||
102 | +// 获取页面的导航title | ||
103 | +function getNavigationBarTitleText () { | ||
104 | + // let pages = getCurrentPages(); | ||
105 | + // let page = pages[pages.length - 1]; | ||
106 | + // let title = page.$holder.navigationBarTitleText; | ||
107 | + // console.log("zheliban === getNavigationBarTitleText title=", title); | ||
108 | + return document.title; | ||
109 | +} | ||
110 | + | ||
111 | +// 点击事件的埋点 | ||
112 | +export function zwlogRecord ({ code = "" } = {}) { | ||
113 | + if (!zwlog) initZwlog(); | ||
114 | + let path = getCurRoute(); | ||
115 | + zwlog.onReady(function () { | ||
116 | + zwlog.record({ | ||
117 | + trackerEventCode: `${code}`, | ||
118 | + eventType: "OTHER", | ||
119 | + eventParams: { | ||
120 | + pageId: path, //采用页面路径,也可以自己给每个页面设置一个pageId | ||
121 | + pageName: getNavigationBarTitleText(), | ||
122 | + }, | ||
123 | + }); | ||
124 | + }); | ||
125 | +} | ||
126 | + | ||
127 | + | ||
128 | +let getCurRoute = () => { | ||
129 | + // let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 | ||
130 | + // let curRoute = routes[routes.length - 1].route; // 获取当前页面路由,也就是最后一个打开的页面路由 | ||
131 | + // console.log("curRoute", curRoute); | ||
132 | + | ||
133 | + return '/'; | ||
134 | +}; | ||
0 | \ No newline at end of file | 135 | \ No newline at end of file |
src/main.js
@@ -18,8 +18,8 @@ import yxAxios from '@/https/yxAxios' | @@ -18,8 +18,8 @@ import yxAxios from '@/https/yxAxios' | ||
18 | Vue.prototype.yxAxios = yxAxios; | 18 | Vue.prototype.yxAxios = yxAxios; |
19 | Vue.prototype.dialog = Dialog; | 19 | Vue.prototype.dialog = Dialog; |
20 | 20 | ||
21 | -import { mgop } from '@aligov/jssdk-mgop'; | ||
22 | -Vue.prototype.mgop = mgop; | 21 | +import {zwlogPvGlobal} from './common/zwUtil.js' |
22 | +Vue.prototype.$zwlogPvGlobal = zwlogPvGlobal; | ||
23 | 23 | ||
24 | import common from './common/index' | 24 | import common from './common/index' |
25 | Vue.prototype.common = common; | 25 | Vue.prototype.common = common; |
src/views/Home/Home.vue
@@ -96,6 +96,10 @@ export default { | @@ -96,6 +96,10 @@ export default { | ||
96 | }, | 96 | }, |
97 | 97 | ||
98 | mounted() { | 98 | mounted() { |
99 | + this.$zwlogPvGlobal({ loadTime: new Date() }) | ||
100 | + this.$nextTick(() => { | ||
101 | + this.$zwlogPvGlobal({ responseTime: new Date() }) | ||
102 | + }) | ||
99 | const isElder = localStorage.getItem('isElder') | 103 | const isElder = localStorage.getItem('isElder') |
100 | if (isElder) { | 104 | if (isElder) { |
101 | this.isElder = true | 105 | this.isElder = true |
@@ -193,8 +197,8 @@ export default { | @@ -193,8 +197,8 @@ export default { | ||
193 | localStorage.removeItem('centerNo') | 197 | localStorage.removeItem('centerNo') |
194 | setTimeout(() => { | 198 | setTimeout(() => { |
195 | const sUserAgent = window.navigator.userAgent.toLowerCase() | 199 | const sUserAgent = window.navigator.userAgent.toLowerCase() |
196 | - const dtdreamweb = sUserAgent.indexOf('dtdreamweb') > -1 | ||
197 | - const miniprogram = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1 | 200 | + const dtdreamweb = sUserAgent.indexOf('dtdreamweb') > -1 |
201 | + const miniprogram = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1 | ||
198 | if (miniprogram) { | 202 | if (miniprogram) { |
199 | // alert('支付宝') | 203 | // alert('支付宝') |
200 | window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc` | 204 | window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc` |
src/views/Service/ServiceKQ.vue
@@ -12,7 +12,6 @@ export default { | @@ -12,7 +12,6 @@ export default { | ||
12 | centerNo: '', | 12 | centerNo: '', |
13 | } | 13 | } |
14 | }, | 14 | }, |
15 | - | ||
16 | mounted() { | 15 | mounted() { |
17 | console.log('xst mounted') | 16 | console.log('xst mounted') |
18 | this.checkAuth() | 17 | this.checkAuth() |
@@ -127,13 +126,13 @@ export default { | @@ -127,13 +126,13 @@ export default { | ||
127 | // }) | 126 | // }) |
128 | // } else { | 127 | // } else { |
129 | // localStorage.setItem('reloadCount', 2) | 128 | // localStorage.setItem('reloadCount', 2) |
130 | - if (miniprogram) { | ||
131 | - // alert('支付宝') | ||
132 | - window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc` | ||
133 | - } else { | ||
134 | - // alert('浙里办') | ||
135 | - window.location.href = `https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=82a7a71edb794fc285895f9e33290ddc` | ||
136 | - } | 129 | + if (miniprogram) { |
130 | + // alert('支付宝') | ||
131 | + window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc` | ||
132 | + } else { | ||
133 | + // alert('浙里办') | ||
134 | + window.location.href = `https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=82a7a71edb794fc285895f9e33290ddc` | ||
135 | + } | ||
137 | // } | 136 | // } |
138 | }, | 137 | }, |
139 | // 获取用户信息 | 138 | // 获取用户信息 |
@@ -143,8 +142,14 @@ export default { | @@ -143,8 +142,14 @@ export default { | ||
143 | this.yxAxios.get(`${this.proxyUrl}/user/info/getPortalUserByNum?userNum=${localStorage.getItem('centerNo')}`).then((res) => { | 142 | this.yxAxios.get(`${this.proxyUrl}/user/info/getPortalUserByNum?userNum=${localStorage.getItem('centerNo')}`).then((res) => { |
144 | console.log('获取用户信息getPortalUserByNum:', res) | 143 | console.log('获取用户信息getPortalUserByNum:', res) |
145 | if (res.data.code == 200) { | 144 | if (res.data.code == 200) { |
146 | - localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo)) | ||
147 | - this.userInfo = res.data.data.userInfo | 145 | + let userInfo = res.data.data.userInfo |
146 | + localStorage.setItem('userInfo', JSON.stringify(userInfo)) | ||
147 | + this.userInfo = userInfo | ||
148 | + localStorage.setItem('_user_nick', userInfo.travelerName) | ||
149 | + this.$zwlogPvGlobal({ loadTime: new Date() }) | ||
150 | + this.$nextTick(() => { | ||
151 | + this.$zwlogPvGlobal({ responseTime: new Date() }) | ||
152 | + }) | ||
148 | } | 153 | } |
149 | }) | 154 | }) |
150 | }, | 155 | }, |
src/views/Yanxue/achievementsOne.vue
1 | <template> | 1 | <template> |
2 | - <div class="cardBox"> | ||
3 | - <!-- <van-tabs v-model="tabsName"> | 2 | + <div class="cardBox"> |
3 | + <!-- <van-tabs v-model="tabsName"> | ||
4 | <van-tab title="红色教育"></van-tab> | 4 | <van-tab title="红色教育"></van-tab> |
5 | <van-tab title="劳动教育"></van-tab> | 5 | <van-tab title="劳动教育"></van-tab> |
6 | <van-tab title="课外实践"></van-tab> | 6 | <van-tab title="课外实践"></van-tab> |
7 | <van-tab title="研学旅行"></van-tab> | 7 | <van-tab title="研学旅行"></van-tab> |
8 | </van-tabs> --> | 8 | </van-tabs> --> |
9 | - <van-tabs v-model="sort" @click="tabsClick"> | ||
10 | - <van-tab title="发布时间">发布时间</van-tab> | ||
11 | - <van-tab title="点赞量">点赞量</van-tab> | ||
12 | - <van-tab title="阅读量">阅读量</van-tab> | ||
13 | - </van-tabs> | ||
14 | - <div class="contextBox" v-if="newsList.length != 0" @load="getData"> | ||
15 | - <van-list | ||
16 | - v-model="loading" | ||
17 | - :finished="finished" | ||
18 | - finished-text="没有更多了" | ||
19 | - @load="getData" | ||
20 | - > | ||
21 | - <div | ||
22 | - class="art_card_pic" | ||
23 | - v-for="(v, i) in newsList" | ||
24 | - :key="i" | ||
25 | - @click="toDetails(v)" | ||
26 | - > | ||
27 | - <div class="art_context"> | ||
28 | - <div class="art_title">{{ v.titleDesc }}</div> | ||
29 | - <div class="art_bot"> | ||
30 | - <!-- <div class="redSticky" v-if="v.readNumber">置顶</div> --> | ||
31 | - <!-- <div class="greyTime">发布于 {{ v.createTime ? Moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</div> --> | ||
32 | - <div class="greyTime"> | ||
33 | - 点赞量 {{ v.likeNumber }} | ||
34 | - </div> | ||
35 | - <div class="greyFont"> | ||
36 | - 浏览量 {{ v.readNumber }} | ||
37 | - </div> | ||
38 | - </div> | ||
39 | - </div> | ||
40 | - <div class="art_pic"> | ||
41 | - <img :src="v.imgUrl" /> | ||
42 | - </div> | ||
43 | - </div> | ||
44 | - </van-list> | ||
45 | - <!-- <div | 9 | + <van-tabs v-model="sort" @click="tabsClick"> |
10 | + <van-tab title="发布时间">发布时间</van-tab> | ||
11 | + <van-tab title="点赞量">点赞量</van-tab> | ||
12 | + <van-tab title="阅读量">阅读量</van-tab> | ||
13 | + </van-tabs> | ||
14 | + <div class="contextBox" v-if="newsList.length != 0" @load="getData"> | ||
15 | + <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData"> | ||
16 | + <div class="art_card_pic" v-for="(v, i) in newsList" :key="i" @click="toDetails(v)"> | ||
17 | + <div class="art_context"> | ||
18 | + <div class="art_title">{{ v.titleDesc }}</div> | ||
19 | + <div class="art_bot"> | ||
20 | + <!-- <div class="redSticky" v-if="v.readNumber">置顶</div> --> | ||
21 | + <!-- <div class="greyTime">发布于 {{ v.createTime ? Moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</div> --> | ||
22 | + <div class="greyTime">点赞量 {{ v.likeNumber }}</div> | ||
23 | + <div class="greyFont">浏览量 {{ v.readNumber }}</div> | ||
24 | + </div> | ||
25 | + </div> | ||
26 | + <div class="art_pic"> | ||
27 | + <img :src="v.imgUrl" /> | ||
28 | + </div> | ||
29 | + </div> | ||
30 | + </van-list> | ||
31 | + <!-- <div | ||
46 | class="art_card_pic" | 32 | class="art_card_pic" |
47 | v-for="(v, i) in newsList" | 33 | v-for="(v, i) in newsList" |
48 | :key="i" | 34 | :key="i" |
@@ -59,224 +45,223 @@ | @@ -59,224 +45,223 @@ | ||
59 | <img :src="v.imgUrl" /> | 45 | <img :src="v.imgUrl" /> |
60 | </div> | 46 | </div> |
61 | </div> --> | 47 | </div> --> |
62 | - </div> | ||
63 | - | ||
64 | - <van-empty description="暂无数据" v-else /> | 48 | + </div> |
65 | 49 | ||
66 | - <div class="imgPic" @click="toChoose"> | ||
67 | - <img src="@/assets/changeSchool.png" /> | ||
68 | - </div> | 50 | + <van-empty description="暂无数据" v-else /> |
69 | 51 | ||
70 | - <tabbar4 active="fruit"></tabbar4> | 52 | + <div class="imgPic" @click="toChoose"> |
53 | + <img src="@/assets/changeSchool.png" /> | ||
71 | </div> | 54 | </div> |
55 | + | ||
56 | + <tabbar4 active="fruit"></tabbar4> | ||
57 | + </div> | ||
72 | </template> | 58 | </template> |
73 | 59 | ||
74 | <script> | 60 | <script> |
75 | -import Tabbar4 from "@/component/Tabbar4"; | 61 | +import Tabbar4 from '@/component/Tabbar4' |
76 | export default { | 62 | export default { |
77 | - components: { Tabbar4 }, | ||
78 | - data() { | ||
79 | - return { | ||
80 | - tabsName: 1, | ||
81 | - newsList: [], | ||
82 | - pageNum: 1, | ||
83 | - pageSize: 10, | ||
84 | - finished: false, | ||
85 | - loading: false, | ||
86 | - sort: 0 | ||
87 | - }; | 63 | + components: { Tabbar4 }, |
64 | + data() { | ||
65 | + return { | ||
66 | + tabsName: 1, | ||
67 | + newsList: [], | ||
68 | + pageNum: 1, | ||
69 | + pageSize: 10, | ||
70 | + finished: false, | ||
71 | + loading: false, | ||
72 | + sort: 0, | ||
73 | + } | ||
74 | + }, | ||
75 | + methods: { | ||
76 | + //详情新闻 | ||
77 | + toDetails(v) { | ||
78 | + this.$router.push({ | ||
79 | + name: 'pageDetails', | ||
80 | + query: { schoolId: v.schoolId, dataId: v.id }, | ||
81 | + }) | ||
88 | }, | 82 | }, |
89 | - methods: { | ||
90 | - //详情新闻 | ||
91 | - toDetails(v) { | ||
92 | - this.$router.push({ | ||
93 | - name: "pageDetails", | ||
94 | - query: { schoolId: v.schoolId, dataId: v.id }, | ||
95 | - }); | ||
96 | - }, | ||
97 | - //选择 | ||
98 | - toChoose() { | ||
99 | - this.$router.push({ name: "chooseSchoolOne" }); | ||
100 | - }, | ||
101 | - tabsClick() { | ||
102 | - this.newsList = [] | ||
103 | - this.pageNum = 1 | ||
104 | - this.pageSize = 10 | ||
105 | - this.getData() | ||
106 | - }, | ||
107 | - getData() { | ||
108 | - this.loading = true; | ||
109 | - let schoolId = this.$route.query.schoolId | ||
110 | - ? this.$route.query.schoolId | ||
111 | - : ""; | ||
112 | - | ||
113 | - this.yxAxios | ||
114 | - .get( | ||
115 | - `${this.kqUrl}/schoolConsult/consultList?pageNum=${this.pageNum}&pageSize=${this.pageSize}&schoolId=` + | ||
116 | - schoolId + `&sort=` + this.sort | ||
117 | - ) | ||
118 | - .then((res) => { | ||
119 | - if (res.data.code == 200) { | ||
120 | - this.newsList = this.newsList.concat( | ||
121 | - res.data.data.list | ||
122 | - ); | ||
123 | - this.loading = false; | ||
124 | - if ( | ||
125 | - this.pageSize * this.pageNum >= | ||
126 | - res.data.data.total | ||
127 | - ) { | ||
128 | - this.finished = true; | ||
129 | - } else { | ||
130 | - this.pageNum++; | ||
131 | - } | ||
132 | - } else { | ||
133 | - this.$toast.fail(res.data.message); | ||
134 | - } | ||
135 | - }); | ||
136 | - // this.yxAxios | ||
137 | - // .post(`${this.dataUrl}/sys/yx/consultList`, { | ||
138 | - // page: 1, | ||
139 | - // pageSize: 999, | ||
140 | - // schoolId: this.$route.query.schoolId*1 | ||
141 | - // }) | ||
142 | - // .then((res) => { | ||
143 | - // if (res.data.success) { | ||
144 | - // this.newsList = res.data.data.list; | ||
145 | - // } else { | ||
146 | - // this.$toast.fail(res.data.message); | ||
147 | - // } | ||
148 | - // }); | ||
149 | - }, | 83 | + //选择 |
84 | + toChoose() { | ||
85 | + this.$router.push({ name: 'chooseSchoolOne' }) | ||
150 | }, | 86 | }, |
151 | - mounted() { | ||
152 | - this.getData(); | 87 | + tabsClick() { |
88 | + this.newsList = [] | ||
89 | + this.pageNum = 1 | ||
90 | + this.pageSize = 10 | ||
91 | + this.getData() | ||
153 | }, | 92 | }, |
154 | -}; | 93 | + getData() { |
94 | + this.loading = true | ||
95 | + let schoolId = this.$route.query.schoolId ? this.$route.query.schoolId : '' | ||
96 | + | ||
97 | + this.yxAxios | ||
98 | + .get( | ||
99 | + `${this.kqUrl}/schoolConsult/consultList?pageNum=${this.pageNum}&pageSize=${this.pageSize}&schoolId=` + | ||
100 | + schoolId + | ||
101 | + `&sort=` + | ||
102 | + this.sort | ||
103 | + ) | ||
104 | + .then((res) => { | ||
105 | + if (res.data.code == 200) { | ||
106 | + this.newsList = this.newsList.concat(res.data.data.list) | ||
107 | + this.loading = false | ||
108 | + if (this.pageSize * this.pageNum >= res.data.data.total) { | ||
109 | + this.finished = true | ||
110 | + } else { | ||
111 | + this.pageNum++ | ||
112 | + } | ||
113 | + } else { | ||
114 | + this.$toast.fail(res.data.message) | ||
115 | + } | ||
116 | + }) | ||
117 | + // this.yxAxios | ||
118 | + // .post(`${this.dataUrl}/sys/yx/consultList`, { | ||
119 | + // page: 1, | ||
120 | + // pageSize: 999, | ||
121 | + // schoolId: this.$route.query.schoolId*1 | ||
122 | + // }) | ||
123 | + // .then((res) => { | ||
124 | + // if (res.data.success) { | ||
125 | + // this.newsList = res.data.data.list; | ||
126 | + // } else { | ||
127 | + // this.$toast.fail(res.data.message); | ||
128 | + // } | ||
129 | + // }); | ||
130 | + }, | ||
131 | + }, | ||
132 | + mounted() { | ||
133 | + this.getData() | ||
134 | + this.$zwlogPvGlobal({ loadTime: new Date() }) | ||
135 | + this.$nextTick(() => { | ||
136 | + this.$zwlogPvGlobal({ responseTime: new Date() }) | ||
137 | + }) | ||
138 | + }, | ||
139 | +} | ||
155 | </script> | 140 | </script> |
156 | 141 | ||
157 | <style lang="scss" scoped> | 142 | <style lang="scss" scoped> |
158 | .cardBox { | 143 | .cardBox { |
159 | - padding: 2vw 0; | ||
160 | - box-sizing: border-box; | 144 | + padding: 2vw 0; |
145 | + box-sizing: border-box; | ||
161 | 146 | ||
162 | - .contextBox { | ||
163 | - margin-top: 20px; | ||
164 | - margin-bottom: 140px; | ||
165 | - .art_card { | ||
166 | - padding: 28px; | ||
167 | - box-sizing: border-box; | ||
168 | - | ||
169 | - .art_title { | ||
170 | - width: 100%; | ||
171 | - font-size: 34px; | ||
172 | - font-weight: bold; | ||
173 | - display: -webkit-box; | ||
174 | - -webkit-box-orient: vertical; | ||
175 | - -webkit-line-clamp: 1; //限制行数 | ||
176 | - overflow: hidden; //超出部分隐藏 | ||
177 | - text-overflow: ellipsis; //用一个省略号代替超出的内容 | ||
178 | - } | 147 | + .contextBox { |
148 | + margin-top: 20px; | ||
149 | + margin-bottom: 140px; | ||
150 | + .art_card { | ||
151 | + padding: 28px; | ||
152 | + box-sizing: border-box; | ||
179 | 153 | ||
180 | - .art_bot { | ||
181 | - padding-top: 22px; | ||
182 | - box-sizing: border-box; | ||
183 | - display: flex; | ||
184 | - align-items: center; | 154 | + .art_title { |
155 | + width: 100%; | ||
156 | + font-size: 34px; | ||
157 | + font-weight: bold; | ||
158 | + display: -webkit-box; | ||
159 | + -webkit-box-orient: vertical; | ||
160 | + -webkit-line-clamp: 1; //限制行数 | ||
161 | + overflow: hidden; //超出部分隐藏 | ||
162 | + text-overflow: ellipsis; //用一个省略号代替超出的内容 | ||
163 | + } | ||
185 | 164 | ||
186 | - .redSticky { | ||
187 | - color: #ff4444; | ||
188 | - font-size: 24px; | ||
189 | - padding: 2px; | ||
190 | - box-sizing: border-box; | ||
191 | - border: 1px solid #ff4444; | ||
192 | - } | 165 | + .art_bot { |
166 | + padding-top: 22px; | ||
167 | + box-sizing: border-box; | ||
168 | + display: flex; | ||
169 | + align-items: center; | ||
193 | 170 | ||
194 | - .greyTime { | ||
195 | - color: #999; | ||
196 | - font-size: 24px; | ||
197 | - margin: 0 20px; | ||
198 | - } | 171 | + .redSticky { |
172 | + color: #ff4444; | ||
173 | + font-size: 24px; | ||
174 | + padding: 2px; | ||
175 | + box-sizing: border-box; | ||
176 | + border: 1px solid #ff4444; | ||
177 | + } | ||
199 | 178 | ||
200 | - .greyFont { | ||
201 | - color: #999; | ||
202 | - font-size: 24px; | ||
203 | - } | ||
204 | - } | 179 | + .greyTime { |
180 | + color: #999; | ||
181 | + font-size: 24px; | ||
182 | + margin: 0 20px; | ||
205 | } | 183 | } |
206 | - .art_card_pic { | ||
207 | - padding: 28px; | ||
208 | - box-sizing: border-box; | ||
209 | - display: flex; | ||
210 | - justify-content: space-between; | ||
211 | 184 | ||
212 | - .art_context { | ||
213 | - height: 180px; | ||
214 | - display: flex; | ||
215 | - align-content: space-between; | ||
216 | - flex-wrap: wrap; | 185 | + .greyFont { |
186 | + color: #999; | ||
187 | + font-size: 24px; | ||
188 | + } | ||
189 | + } | ||
190 | + } | ||
191 | + .art_card_pic { | ||
192 | + padding: 28px; | ||
193 | + box-sizing: border-box; | ||
194 | + display: flex; | ||
195 | + justify-content: space-between; | ||
217 | 196 | ||
218 | - .art_title { | ||
219 | - width: 100%; | ||
220 | - font-size: 34px; | ||
221 | - font-weight: bold; | ||
222 | - display: -webkit-box; | ||
223 | - -webkit-box-orient: vertical; | ||
224 | - -webkit-line-clamp: 2; //限制行数 | ||
225 | - overflow: hidden; //超出部分隐藏 | ||
226 | - text-overflow: ellipsis; //用一个省略号代替超出的内容 | ||
227 | - } | 197 | + .art_context { |
198 | + height: 180px; | ||
199 | + display: flex; | ||
200 | + align-content: space-between; | ||
201 | + flex-wrap: wrap; | ||
228 | 202 | ||
229 | - .art_bot { | ||
230 | - padding-top: 22px; | ||
231 | - box-sizing: border-box; | ||
232 | - display: flex; | ||
233 | - align-items: center; | 203 | + .art_title { |
204 | + width: 100%; | ||
205 | + font-size: 34px; | ||
206 | + font-weight: bold; | ||
207 | + display: -webkit-box; | ||
208 | + -webkit-box-orient: vertical; | ||
209 | + -webkit-line-clamp: 2; //限制行数 | ||
210 | + overflow: hidden; //超出部分隐藏 | ||
211 | + text-overflow: ellipsis; //用一个省略号代替超出的内容 | ||
212 | + } | ||
234 | 213 | ||
235 | - .redSticky { | ||
236 | - color: #ff4444; | ||
237 | - font-size: 24px; | ||
238 | - padding: 2px; | ||
239 | - box-sizing: border-box; | ||
240 | - border: 1px solid #ff4444; | ||
241 | - } | 214 | + .art_bot { |
215 | + padding-top: 22px; | ||
216 | + box-sizing: border-box; | ||
217 | + display: flex; | ||
218 | + align-items: center; | ||
242 | 219 | ||
243 | - .greyTime { | ||
244 | - color: #999; | ||
245 | - font-size: 24px; | ||
246 | - margin: 0; | ||
247 | - } | 220 | + .redSticky { |
221 | + color: #ff4444; | ||
222 | + font-size: 24px; | ||
223 | + padding: 2px; | ||
224 | + box-sizing: border-box; | ||
225 | + border: 1px solid #ff4444; | ||
226 | + } | ||
248 | 227 | ||
249 | - .greyFont { | ||
250 | - color: #999; | ||
251 | - font-size: 24px; | ||
252 | - margin-left: 20px; | ||
253 | - } | ||
254 | - } | ||
255 | - } | ||
256 | - .art_pic { | ||
257 | - width: 180px; | ||
258 | - height: 180px; | ||
259 | - flex-shrink: 0; | ||
260 | - background-color: #ff4444; | 228 | + .greyTime { |
229 | + color: #999; | ||
230 | + font-size: 24px; | ||
231 | + margin: 0; | ||
232 | + } | ||
261 | 233 | ||
262 | - img { | ||
263 | - width: 100%; | ||
264 | - height: 100%; | ||
265 | - } | ||
266 | - } | 234 | + .greyFont { |
235 | + color: #999; | ||
236 | + font-size: 24px; | ||
237 | + margin-left: 20px; | ||
238 | + } | ||
267 | } | 239 | } |
268 | - } | ||
269 | - .imgPic { | ||
270 | - position: fixed; | ||
271 | - right: 2vw; | ||
272 | - bottom: 40vw; | ||
273 | - width: 26vw; | ||
274 | - height: 26vw; | 240 | + } |
241 | + .art_pic { | ||
242 | + width: 180px; | ||
243 | + height: 180px; | ||
244 | + flex-shrink: 0; | ||
245 | + background-color: #ff4444; | ||
275 | 246 | ||
276 | img { | 247 | img { |
277 | - width: 100%; | ||
278 | - height: 100%; | 248 | + width: 100%; |
249 | + height: 100%; | ||
279 | } | 250 | } |
251 | + } | ||
252 | + } | ||
253 | + } | ||
254 | + .imgPic { | ||
255 | + position: fixed; | ||
256 | + right: 2vw; | ||
257 | + bottom: 40vw; | ||
258 | + width: 26vw; | ||
259 | + height: 26vw; | ||
260 | + | ||
261 | + img { | ||
262 | + width: 100%; | ||
263 | + height: 100%; | ||
280 | } | 264 | } |
265 | + } | ||
281 | } | 266 | } |
282 | -</style> | ||
283 | \ No newline at end of file | 267 | \ No newline at end of file |
268 | +</style> |
src/views/answerRank/stars.vue
1 | <template> | 1 | <template> |
2 | - <div class="bck"> | ||
3 | - <div class="box"> | ||
4 | - <div class="box_L"> | ||
5 | - <div class="L_top"> | ||
6 | - <div class="pic"> | ||
7 | - <img src="@/assets/rank/tx.png" /> | ||
8 | - </div> | ||
9 | - <div class="font_box"> | ||
10 | - <div class="font_name" @click="switchUser"> | ||
11 | - {{ user.travelerName }} | ||
12 | - <img src="@/assets/rank/qh1.png" /> | ||
13 | - </div> | ||
14 | - <div class="font_sch">{{ user.schoolName }}</div> | ||
15 | - </div> | ||
16 | - </div> | ||
17 | - <div class="L_mid"> | ||
18 | - <div class="mid_item"> | ||
19 | - <div> | ||
20 | - <span class="strong_font">{{ | ||
21 | - scoreObj.scoreTotal | ||
22 | - }}</span> | ||
23 | - <span>分</span> | ||
24 | - </div> | ||
25 | - <div class="grey_font">已完成题数</div> | ||
26 | - </div> | ||
27 | - <div class="mid_item"> | ||
28 | - <div> | ||
29 | - <span class="strong_font">{{ scoreObj.rate }}</span> | ||
30 | - <span>%</span> | ||
31 | - </div> | ||
32 | - <div class="grey_font">正确率</div> | ||
33 | - </div> | ||
34 | - </div> | ||
35 | - <div class="yellowFont">*积分可用于兑换各种福利</div> | ||
36 | - </div> | ||
37 | - | ||
38 | - <div class="box_R"> | ||
39 | - <div class="box_R_item" @click="toRank"> | ||
40 | - <div class="title"> | ||
41 | - <div>排行榜</div> | ||
42 | - <span>RANKS</span> | ||
43 | - </div> | ||
44 | - <div class="imgBox"> | ||
45 | - <img src="@/assets/rank/jb.png" /> | ||
46 | - </div> | ||
47 | - </div> | ||
48 | - <div class="box_R_item" @click="toRecord"> | ||
49 | - <div class="title"> | ||
50 | - <div>刷题记录</div> | ||
51 | - <span>RECORD</span> | ||
52 | - </div> | ||
53 | - <div class="imgBox"> | ||
54 | - <img src="@/assets/rank/qz.png" /> | ||
55 | - </div> | ||
56 | - </div> | 2 | + <div class="bck"> |
3 | + <div class="box"> | ||
4 | + <div class="box_L"> | ||
5 | + <div class="L_top"> | ||
6 | + <div class="pic"> | ||
7 | + <img src="@/assets/rank/tx.png" /> | ||
8 | + </div> | ||
9 | + <div class="font_box"> | ||
10 | + <div class="font_name" @click="switchUser"> | ||
11 | + {{ user.travelerName }} | ||
12 | + <img src="@/assets/rank/qh1.png" /> | ||
57 | </div> | 13 | </div> |
14 | + <div class="font_sch">{{ user.schoolName }}</div> | ||
15 | + </div> | ||
58 | </div> | 16 | </div> |
59 | - | ||
60 | - <div class="card"> | ||
61 | - <div class="picBox" @click="toYanxue"> | ||
62 | - <img src="@/assets/rank/wxsn.png" /> | 17 | + <div class="L_mid"> |
18 | + <div class="mid_item"> | ||
19 | + <div> | ||
20 | + <span class="strong_font">{{ scoreObj.scoreTotal }}</span> | ||
21 | + <span>分</span> | ||
63 | </div> | 22 | </div> |
64 | - | ||
65 | - <div class="flexBox" v-for="(v, i) in libraryList" :key="i"> | ||
66 | - <div class="tipPic"> | ||
67 | - <!-- <img :src="v.imgUrl" /> --> | ||
68 | - <img v-if="v.type == 1" src="@/assets/rank/qt.png" /> | ||
69 | - <img v-if="v.type == 2" src="@/assets/rank/hj.png" /> | ||
70 | - <img v-if="v.type == 3" src="@/assets/rank/bj.png" /> | ||
71 | - </div> | ||
72 | - <div class="context"> | ||
73 | - <div class="context_title" v-if="v.type == 1">青铜级</div> | ||
74 | - <div class="context_title" v-if="v.type == 2">黄金级</div> | ||
75 | - <div class="context_title" v-if="v.type == 3">白金级</div> | ||
76 | - <div class="context_grey">{{ v.text }}</div> | ||
77 | - </div> | ||
78 | - <div class="btnBox"> | ||
79 | - <div class="btn" @click="toAns(v)">开始答题</div> | ||
80 | - </div> | 23 | + <div class="grey_font">已完成题数</div> |
24 | + </div> | ||
25 | + <div class="mid_item"> | ||
26 | + <div> | ||
27 | + <span class="strong_font">{{ scoreObj.rate }}</span> | ||
28 | + <span>%</span> | ||
81 | </div> | 29 | </div> |
30 | + <div class="grey_font">正确率</div> | ||
31 | + </div> | ||
32 | + </div> | ||
33 | + <div class="yellowFont">*积分可用于兑换各种福利</div> | ||
34 | + </div> | ||
35 | + | ||
36 | + <div class="box_R"> | ||
37 | + <div class="box_R_item" @click="toRank"> | ||
38 | + <div class="title"> | ||
39 | + <div>排行榜</div> | ||
40 | + <span>RANKS</span> | ||
41 | + </div> | ||
42 | + <div class="imgBox"> | ||
43 | + <img src="@/assets/rank/jb.png" /> | ||
44 | + </div> | ||
82 | </div> | 45 | </div> |
83 | - <tabbar4 active="yanxue"></tabbar4> | 46 | + <div class="box_R_item" @click="toRecord"> |
47 | + <div class="title"> | ||
48 | + <div>刷题记录</div> | ||
49 | + <span>RECORD</span> | ||
50 | + </div> | ||
51 | + <div class="imgBox"> | ||
52 | + <img src="@/assets/rank/qz.png" /> | ||
53 | + </div> | ||
54 | + </div> | ||
55 | + </div> | ||
84 | </div> | 56 | </div> |
57 | + | ||
58 | + <div class="card"> | ||
59 | + <div class="picBox" @click="toYanxue"> | ||
60 | + <img src="@/assets/rank/wxsn.png" /> | ||
61 | + </div> | ||
62 | + | ||
63 | + <div class="flexBox" v-for="(v, i) in libraryList" :key="i"> | ||
64 | + <div class="tipPic"> | ||
65 | + <!-- <img :src="v.imgUrl" /> --> | ||
66 | + <img v-if="v.type == 1" src="@/assets/rank/qt.png" /> | ||
67 | + <img v-if="v.type == 2" src="@/assets/rank/hj.png" /> | ||
68 | + <img v-if="v.type == 3" src="@/assets/rank/bj.png" /> | ||
69 | + </div> | ||
70 | + <div class="context"> | ||
71 | + <div class="context_title" v-if="v.type == 1">青铜级</div> | ||
72 | + <div class="context_title" v-if="v.type == 2">黄金级</div> | ||
73 | + <div class="context_title" v-if="v.type == 3">白金级</div> | ||
74 | + <div class="context_grey">{{ v.text }}</div> | ||
75 | + </div> | ||
76 | + <div class="btnBox"> | ||
77 | + <div class="btn" @click="toAns(v)">开始答题</div> | ||
78 | + </div> | ||
79 | + </div> | ||
80 | + </div> | ||
81 | + <tabbar4 active="yanxue"></tabbar4> | ||
82 | + </div> | ||
85 | </template> | 83 | </template> |
86 | 84 | ||
87 | <script> | 85 | <script> |
88 | -import Tabbar4 from "@/component/Tabbar4"; | 86 | +import Tabbar4 from '@/component/Tabbar4' |
89 | export default { | 87 | export default { |
90 | - components: { | ||
91 | - Tabbar4, | ||
92 | - }, | ||
93 | - data() { | ||
94 | - return { | ||
95 | - libraryList: [ | ||
96 | - { | ||
97 | - name: "青铜级", | ||
98 | - type: "1", | ||
99 | - text: "夯实基础,稳步前进", | ||
100 | - imgUrl: require("@/assets/rank/qt.png"), | ||
101 | - }, | ||
102 | - { | ||
103 | - name: "黄金级", | ||
104 | - type: "2", | ||
105 | - text: "夯实基础,稳步前进", | ||
106 | - imgUrl: require("@/assets/rank/hj.png"), | ||
107 | - }, | ||
108 | - { | ||
109 | - name: "白金级", | ||
110 | - type: "3", | ||
111 | - text: "夯实基础,稳步前进", | ||
112 | - imgUrl: require("@/assets/rank/bj.png"), | ||
113 | - }, | ||
114 | - ], | ||
115 | - userInfo: {}, | ||
116 | - user: { | ||
117 | - travelerName: "", | ||
118 | - travelerNum: 0, | ||
119 | - schoolName: "", | ||
120 | - }, | ||
121 | - //答题人-正确率 | ||
122 | - scoreObj: { | ||
123 | - rate: 0, | ||
124 | - scoreTotal: 0, | ||
125 | - }, | ||
126 | - }; | ||
127 | - }, | ||
128 | - methods: { | ||
129 | - //获取用户信息 | ||
130 | - getUser() { | ||
131 | - this.userInfo = JSON.parse(localStorage.getItem("userInfo")); | ||
132 | - | ||
133 | - if (!this.userInfo.subUsers || this.userInfo.subUsers.length == 0) { | ||
134 | - return this.$toast.fail("暂无绑定出行人"); | ||
135 | - } | ||
136 | - | ||
137 | - //选择了用户 | ||
138 | - if (this.$route.query.index) { | ||
139 | - let index = this.$route.query.index; | ||
140 | - localStorage.setItem( | ||
141 | - "travelerNum", | ||
142 | - this.userInfo.subUsers[index].travelerNum | ||
143 | - ); | ||
144 | - this.user = { | ||
145 | - travelerNum: this.userInfo.subUsers[index].travelerNum, | ||
146 | - travelerName: this.userInfo.subUsers[index].travelerName, | ||
147 | - schoolName: this.userInfo.subUsers[index].schoolName, | ||
148 | - }; | ||
149 | - this.getscoreInfo(); | ||
150 | - return; | ||
151 | - } | ||
152 | - //未选择用户 - 默认第一个 | ||
153 | - | ||
154 | - localStorage.setItem( | ||
155 | - "travelerNum", | ||
156 | - this.userInfo.subUsers[0].travelerNum | ||
157 | - ); | ||
158 | - | ||
159 | - this.user = { | ||
160 | - travelerNum: this.userInfo.subUsers[0].travelerNum, | ||
161 | - travelerName: this.userInfo.subUsers[0].travelerName, | ||
162 | - schoolName: this.userInfo.subUsers[0].schoolName, | ||
163 | - }; | ||
164 | - this.getscoreInfo(); | 88 | + components: { |
89 | + Tabbar4, | ||
90 | + }, | ||
91 | + data() { | ||
92 | + return { | ||
93 | + libraryList: [ | ||
94 | + { | ||
95 | + name: '青铜级', | ||
96 | + type: '1', | ||
97 | + text: '夯实基础,稳步前进', | ||
98 | + imgUrl: require('@/assets/rank/qt.png'), | ||
165 | }, | 99 | }, |
166 | - //切换用户 | ||
167 | - switchUser() { | ||
168 | - this.$router.push({ | ||
169 | - name: "switchUser", | ||
170 | - }); | 100 | + { |
101 | + name: '黄金级', | ||
102 | + type: '2', | ||
103 | + text: '夯实基础,稳步前进', | ||
104 | + imgUrl: require('@/assets/rank/hj.png'), | ||
171 | }, | 105 | }, |
172 | - //进入题库 | ||
173 | - toAns(val) { | ||
174 | - this.$router.push({ | ||
175 | - name: "category", | ||
176 | - query: { | ||
177 | - categoryId: val.itemCategoryId, | ||
178 | - index: this.$route.query.index, | ||
179 | - type: val.type, | ||
180 | - }, | ||
181 | - }); | 106 | + { |
107 | + name: '白金级', | ||
108 | + type: '3', | ||
109 | + text: '夯实基础,稳步前进', | ||
110 | + imgUrl: require('@/assets/rank/bj.png'), | ||
182 | }, | 111 | }, |
183 | - //进入刷题记录 | ||
184 | - toRecord() { | ||
185 | - this.$router.push({ | ||
186 | - name: "brush_questions", | ||
187 | - query: { | ||
188 | - index: this.$route.query.index, | ||
189 | - }, | ||
190 | - }); | 112 | + ], |
113 | + userInfo: {}, | ||
114 | + user: { | ||
115 | + travelerName: '', | ||
116 | + travelerNum: 0, | ||
117 | + schoolName: '', | ||
118 | + }, | ||
119 | + //答题人-正确率 | ||
120 | + scoreObj: { | ||
121 | + rate: 0, | ||
122 | + scoreTotal: 0, | ||
123 | + }, | ||
124 | + } | ||
125 | + }, | ||
126 | + methods: { | ||
127 | + //获取用户信息 | ||
128 | + getUser() { | ||
129 | + this.userInfo = JSON.parse(localStorage.getItem('userInfo')) | ||
130 | + | ||
131 | + if (!this.userInfo.subUsers || this.userInfo.subUsers.length == 0) { | ||
132 | + return this.$toast.fail('暂无绑定出行人') | ||
133 | + } | ||
134 | + | ||
135 | + //选择了用户 | ||
136 | + if (this.$route.query.index) { | ||
137 | + let index = this.$route.query.index | ||
138 | + localStorage.setItem('travelerNum', this.userInfo.subUsers[index].travelerNum) | ||
139 | + this.user = { | ||
140 | + travelerNum: this.userInfo.subUsers[index].travelerNum, | ||
141 | + travelerName: this.userInfo.subUsers[index].travelerName, | ||
142 | + schoolName: this.userInfo.subUsers[index].schoolName, | ||
143 | + } | ||
144 | + this.getscoreInfo() | ||
145 | + return | ||
146 | + } | ||
147 | + //未选择用户 - 默认第一个 | ||
148 | + | ||
149 | + localStorage.setItem('travelerNum', this.userInfo.subUsers[0].travelerNum) | ||
150 | + | ||
151 | + this.user = { | ||
152 | + travelerNum: this.userInfo.subUsers[0].travelerNum, | ||
153 | + travelerName: this.userInfo.subUsers[0].travelerName, | ||
154 | + schoolName: this.userInfo.subUsers[0].schoolName, | ||
155 | + } | ||
156 | + this.getscoreInfo() | ||
157 | + }, | ||
158 | + //切换用户 | ||
159 | + switchUser() { | ||
160 | + this.$router.push({ | ||
161 | + name: 'switchUser', | ||
162 | + }) | ||
163 | + }, | ||
164 | + //进入题库 | ||
165 | + toAns(val) { | ||
166 | + this.$router.push({ | ||
167 | + name: 'category', | ||
168 | + query: { | ||
169 | + categoryId: val.itemCategoryId, | ||
170 | + index: this.$route.query.index, | ||
171 | + type: val.type, | ||
191 | }, | 172 | }, |
192 | - //进入排行榜 | ||
193 | - toRank() { | ||
194 | - this.$router.push({ | ||
195 | - name: "ans_rank", | ||
196 | - query: { | ||
197 | - index: this.$route.query.index, | ||
198 | - }, | ||
199 | - }); | 173 | + }) |
174 | + }, | ||
175 | + //进入刷题记录 | ||
176 | + toRecord() { | ||
177 | + this.$router.push({ | ||
178 | + name: 'brush_questions', | ||
179 | + query: { | ||
180 | + index: this.$route.query.index, | ||
200 | }, | 181 | }, |
201 | - //用户答题信息 | ||
202 | - getscoreInfo() { | ||
203 | - this.yxAxios | ||
204 | - .get( | ||
205 | - `${ | ||
206 | - this.kqUrl | ||
207 | - }/item/getTravelerScoreInfo?travelerNum=${localStorage.getItem( | ||
208 | - "travelerNum" | ||
209 | - )}` | ||
210 | - ) | ||
211 | - .then((res) => { | ||
212 | - if (res.data.code == 200) { | ||
213 | - this.scoreObj = res.data.data; | ||
214 | - } else { | ||
215 | - this.$toast.fail(res.data.message); | ||
216 | - } | ||
217 | - }); | 182 | + }) |
183 | + }, | ||
184 | + //进入排行榜 | ||
185 | + toRank() { | ||
186 | + this.$router.push({ | ||
187 | + name: 'ans_rank', | ||
188 | + query: { | ||
189 | + index: this.$route.query.index, | ||
218 | }, | 190 | }, |
219 | - toYanxue() { | ||
220 | - this.$router.push({ name: 'YanxuePage' }) | 191 | + }) |
192 | + }, | ||
193 | + //用户答题信息 | ||
194 | + getscoreInfo() { | ||
195 | + this.yxAxios.get(`${this.kqUrl}/item/getTravelerScoreInfo?travelerNum=${localStorage.getItem('travelerNum')}`).then((res) => { | ||
196 | + if (res.data.code == 200) { | ||
197 | + this.scoreObj = res.data.data | ||
198 | + } else { | ||
199 | + this.$toast.fail(res.data.message) | ||
221 | } | 200 | } |
201 | + }) | ||
222 | }, | 202 | }, |
223 | - mounted() { | ||
224 | - this.getUser(); | 203 | + toYanxue() { |
204 | + this.$router.push({ name: 'YanxuePage' }) | ||
225 | }, | 205 | }, |
226 | -}; | 206 | + }, |
207 | + mounted() { | ||
208 | + this.getUser() | ||
209 | + this.$zwlogPvGlobal({ loadTime: new Date() }) | ||
210 | + this.$nextTick(() => { | ||
211 | + this.$zwlogPvGlobal({ responseTime: new Date() }) | ||
212 | + }) | ||
213 | + }, | ||
214 | +} | ||
227 | </script> | 215 | </script> |
228 | 216 | ||
229 | <style lang="scss" scoped> | 217 | <style lang="scss" scoped> |
230 | .bck { | 218 | .bck { |
231 | - position: absolute; | ||
232 | - width: 100vw; | ||
233 | - height: 30vh; | ||
234 | - background-image: url("../../assets/rank/wx_back.png"); | ||
235 | - -moz-background-size: 100% 100%; | ||
236 | - background-size: 100% 100%; | ||
237 | - | ||
238 | - .box { | 219 | + position: absolute; |
220 | + width: 100vw; | ||
221 | + height: 30vh; | ||
222 | + background-image: url('../../assets/rank/wx_back.png'); | ||
223 | + -moz-background-size: 100% 100%; | ||
224 | + background-size: 100% 100%; | ||
225 | + | ||
226 | + .box { | ||
227 | + display: flex; | ||
228 | + justify-content: space-between; | ||
229 | + margin: 5vw 3vw 8vw; | ||
230 | + | ||
231 | + .box_L { | ||
232 | + width: 45vw; | ||
233 | + height: 360px; | ||
234 | + background-color: #fff; | ||
235 | + border-radius: 30px; | ||
236 | + padding: 3vw 2vw; | ||
237 | + box-sizing: border-box; | ||
238 | + display: flex; | ||
239 | + flex-wrap: wrap; | ||
240 | + align-content: space-between; | ||
241 | + border: 1px solid #ff6868; | ||
242 | + | ||
243 | + .L_top { | ||
244 | + width: 100%; | ||
239 | display: flex; | 245 | display: flex; |
240 | justify-content: space-between; | 246 | justify-content: space-between; |
241 | - margin: 5vw 3vw 8vw; | ||
242 | - | ||
243 | - .box_L { | ||
244 | - width: 45vw; | ||
245 | - height: 360px; | ||
246 | - background-color: #fff; | ||
247 | - border-radius: 30px; | ||
248 | - padding: 3vw 2vw; | ||
249 | - box-sizing: border-box; | ||
250 | - display: flex; | ||
251 | - flex-wrap: wrap; | ||
252 | - align-content: space-between; | ||
253 | - border: 1px solid #ff6868; | ||
254 | - | ||
255 | - .L_top { | ||
256 | - width: 100%; | ||
257 | - display: flex; | ||
258 | - justify-content: space-between; | ||
259 | - | ||
260 | - .pic { | ||
261 | - display: flex; | ||
262 | - align-items: center; | ||
263 | - | ||
264 | - img { | ||
265 | - width: 13vw; | ||
266 | - height: 13vw; | ||
267 | - } | ||
268 | - } | ||
269 | - .font_box { | ||
270 | - width: 25vw; | ||
271 | - display: flex; | ||
272 | - align-content: space-between; | ||
273 | - flex-wrap: wrap; | ||
274 | - | ||
275 | - .font_name { | ||
276 | - font-size: 30px; | ||
277 | - color: #333333; | ||
278 | - | ||
279 | - img { | ||
280 | - margin-top: 5px; | ||
281 | - width: 30px; | ||
282 | - height: 25px; | ||
283 | - } | ||
284 | - } | ||
285 | - .font_sch { | ||
286 | - font-size: 27px; | ||
287 | - color: #999; | ||
288 | - white-space: nowrap; //文本强制不换行; | ||
289 | - text-overflow: ellipsis; //文本溢出显示省略号; | ||
290 | - overflow: hidden; //溢出的部分隐藏; | ||
291 | - } | ||
292 | - } | ||
293 | - } | ||
294 | 247 | ||
295 | - .L_mid { | ||
296 | - width: 100%; | ||
297 | - display: flex; | ||
298 | - justify-content: space-between; | ||
299 | - | ||
300 | - .mid_item { | ||
301 | - width: 100%; | ||
302 | - text-align: center; | ||
303 | - font-size: 25px; | ||
304 | - | ||
305 | - .grey_font { | ||
306 | - color: #999; | ||
307 | - font-size: 25px; | ||
308 | - margin-top: 5px; | ||
309 | - } | ||
310 | - | ||
311 | - .strong_font { | ||
312 | - font-size: 50px; | ||
313 | - font-weight: bold; | ||
314 | - } | ||
315 | - } | ||
316 | - } | 248 | + .pic { |
249 | + display: flex; | ||
250 | + align-items: center; | ||
317 | 251 | ||
318 | - .yellowFont { | ||
319 | - width: 100%; | ||
320 | - font-size: 24px; | ||
321 | - color: #ff7a1c; | ||
322 | - text-align: center; | ||
323 | - } | 252 | + img { |
253 | + width: 13vw; | ||
254 | + height: 13vw; | ||
255 | + } | ||
324 | } | 256 | } |
325 | - .box_R { | ||
326 | - width: 45vw; | ||
327 | - height: 360px; | ||
328 | - display: flex; | ||
329 | - flex-wrap: wrap; | ||
330 | - align-content: space-between; | ||
331 | - | ||
332 | - .box_R_item { | ||
333 | - width: 100%; | ||
334 | - height: 165px; | ||
335 | - border-radius: 30px; | ||
336 | - display: flex; | ||
337 | - justify-content: space-between; | ||
338 | - padding: 20px 30px; | ||
339 | - box-sizing: border-box; | ||
340 | - background-color: #fff; | ||
341 | - | ||
342 | - .title { | ||
343 | - font-size: 30px; | ||
344 | - color: #000000; | ||
345 | - | ||
346 | - span { | ||
347 | - color: #999999; | ||
348 | - font-size: 22px; | ||
349 | - } | ||
350 | - } | ||
351 | - | ||
352 | - .imgBox { | ||
353 | - display: flex; | ||
354 | - align-items: center; | ||
355 | - | ||
356 | - img { | ||
357 | - width: 110px; | ||
358 | - height: 110px; | ||
359 | - } | ||
360 | - } | 257 | + .font_box { |
258 | + width: 25vw; | ||
259 | + display: flex; | ||
260 | + align-content: space-between; | ||
261 | + flex-wrap: wrap; | ||
262 | + | ||
263 | + .font_name { | ||
264 | + font-size: 30px; | ||
265 | + color: #333333; | ||
266 | + | ||
267 | + img { | ||
268 | + margin-top: 5px; | ||
269 | + width: 30px; | ||
270 | + height: 25px; | ||
361 | } | 271 | } |
272 | + } | ||
273 | + .font_sch { | ||
274 | + font-size: 27px; | ||
275 | + color: #999; | ||
276 | + white-space: nowrap; //文本强制不换行; | ||
277 | + text-overflow: ellipsis; //文本溢出显示省略号; | ||
278 | + overflow: hidden; //溢出的部分隐藏; | ||
279 | + } | ||
362 | } | 280 | } |
363 | - } | 281 | + } |
364 | 282 | ||
365 | - .card { | 283 | + .L_mid { |
366 | width: 100%; | 284 | width: 100%; |
367 | - min-height: 800px; | ||
368 | - background-color: #fff; | 285 | + display: flex; |
286 | + justify-content: space-between; | ||
287 | + | ||
288 | + .mid_item { | ||
289 | + width: 100%; | ||
290 | + text-align: center; | ||
291 | + font-size: 25px; | ||
292 | + | ||
293 | + .grey_font { | ||
294 | + color: #999; | ||
295 | + font-size: 25px; | ||
296 | + margin-top: 5px; | ||
297 | + } | ||
298 | + | ||
299 | + .strong_font { | ||
300 | + font-size: 50px; | ||
301 | + font-weight: bold; | ||
302 | + } | ||
303 | + } | ||
304 | + } | ||
305 | + | ||
306 | + .yellowFont { | ||
307 | + width: 100%; | ||
308 | + font-size: 24px; | ||
309 | + color: #ff7a1c; | ||
310 | + text-align: center; | ||
311 | + } | ||
312 | + } | ||
313 | + .box_R { | ||
314 | + width: 45vw; | ||
315 | + height: 360px; | ||
316 | + display: flex; | ||
317 | + flex-wrap: wrap; | ||
318 | + align-content: space-between; | ||
319 | + | ||
320 | + .box_R_item { | ||
321 | + width: 100%; | ||
322 | + height: 165px; | ||
369 | border-radius: 30px; | 323 | border-radius: 30px; |
370 | - padding: 5vw 3vw; | 324 | + display: flex; |
325 | + justify-content: space-between; | ||
326 | + padding: 20px 30px; | ||
371 | box-sizing: border-box; | 327 | box-sizing: border-box; |
328 | + background-color: #fff; | ||
372 | 329 | ||
373 | - .picBox { | ||
374 | - width: 100%; | ||
375 | - margin-bottom: 30px; | 330 | + .title { |
331 | + font-size: 30px; | ||
332 | + color: #000000; | ||
376 | 333 | ||
377 | - img { | ||
378 | - width: 100%; | ||
379 | - height: 100%; | ||
380 | - } | 334 | + span { |
335 | + color: #999999; | ||
336 | + font-size: 22px; | ||
337 | + } | ||
381 | } | 338 | } |
382 | 339 | ||
383 | - .flexBox { | ||
384 | - display: flex; | ||
385 | - justify-content: space-between; | ||
386 | - padding: 5vw 3vw; | ||
387 | - box-sizing: border-box; | ||
388 | - border-bottom: 1px solid #f1f1f1; | ||
389 | - | ||
390 | - .tipPic { | ||
391 | - width: 15vw; | ||
392 | - img { | ||
393 | - width: 16vw; | ||
394 | - height: 16vw; | ||
395 | - } | ||
396 | - } | ||
397 | - .context { | ||
398 | - display: flex; | ||
399 | - align-content: space-between; | ||
400 | - flex-wrap: wrap; | ||
401 | - padding: 5px 0; | ||
402 | - box-sizing: border-box; | ||
403 | - margin-left: 5vw; | ||
404 | - | ||
405 | - .context_title { | ||
406 | - width: 100%; | ||
407 | - font-size: 36px; | ||
408 | - color: #333333; | ||
409 | - } | ||
410 | - .context_grey { | ||
411 | - font-size: 30px; | ||
412 | - color: #999999; | ||
413 | - } | ||
414 | - } | ||
415 | - .btnBox { | ||
416 | - display: flex; | ||
417 | - justify-content: flex-end; | ||
418 | - align-items: center; | ||
419 | - | ||
420 | - .btn { | ||
421 | - width: 180px; | ||
422 | - height: 70px; | ||
423 | - background-color: #fff2f2; | ||
424 | - color: #ff6868; | ||
425 | - padding: 10px 30px; | ||
426 | - box-sizing: border-box; | ||
427 | - font-size: 28px; | ||
428 | - border-radius: 30px; | ||
429 | - text-align: center; | ||
430 | - } | ||
431 | - } | 340 | + .imgBox { |
341 | + display: flex; | ||
342 | + align-items: center; | ||
343 | + | ||
344 | + img { | ||
345 | + width: 110px; | ||
346 | + height: 110px; | ||
347 | + } | ||
348 | + } | ||
349 | + } | ||
350 | + } | ||
351 | + } | ||
352 | + | ||
353 | + .card { | ||
354 | + width: 100%; | ||
355 | + min-height: 800px; | ||
356 | + background-color: #fff; | ||
357 | + border-radius: 30px; | ||
358 | + padding: 5vw 3vw; | ||
359 | + box-sizing: border-box; | ||
360 | + | ||
361 | + .picBox { | ||
362 | + width: 100%; | ||
363 | + margin-bottom: 30px; | ||
364 | + | ||
365 | + img { | ||
366 | + width: 100%; | ||
367 | + height: 100%; | ||
368 | + } | ||
369 | + } | ||
370 | + | ||
371 | + .flexBox { | ||
372 | + display: flex; | ||
373 | + justify-content: space-between; | ||
374 | + padding: 5vw 3vw; | ||
375 | + box-sizing: border-box; | ||
376 | + border-bottom: 1px solid #f1f1f1; | ||
377 | + | ||
378 | + .tipPic { | ||
379 | + width: 15vw; | ||
380 | + img { | ||
381 | + width: 16vw; | ||
382 | + height: 16vw; | ||
383 | + } | ||
384 | + } | ||
385 | + .context { | ||
386 | + display: flex; | ||
387 | + align-content: space-between; | ||
388 | + flex-wrap: wrap; | ||
389 | + padding: 5px 0; | ||
390 | + box-sizing: border-box; | ||
391 | + margin-left: 5vw; | ||
392 | + | ||
393 | + .context_title { | ||
394 | + width: 100%; | ||
395 | + font-size: 36px; | ||
396 | + color: #333333; | ||
397 | + } | ||
398 | + .context_grey { | ||
399 | + font-size: 30px; | ||
400 | + color: #999999; | ||
401 | + } | ||
402 | + } | ||
403 | + .btnBox { | ||
404 | + display: flex; | ||
405 | + justify-content: flex-end; | ||
406 | + align-items: center; | ||
407 | + | ||
408 | + .btn { | ||
409 | + width: 180px; | ||
410 | + height: 70px; | ||
411 | + background-color: #fff2f2; | ||
412 | + color: #ff6868; | ||
413 | + padding: 10px 30px; | ||
414 | + box-sizing: border-box; | ||
415 | + font-size: 28px; | ||
416 | + border-radius: 30px; | ||
417 | + text-align: center; | ||
432 | } | 418 | } |
419 | + } | ||
433 | } | 420 | } |
421 | + } | ||
434 | } | 422 | } |
435 | -</style> | ||
436 | \ No newline at end of file | 423 | \ No newline at end of file |
424 | +</style> |