From 12bbfccb1504d24461cf581e89e6224bcc365f5f Mon Sep 17 00:00:00 2001
From: xiayt <x1027869635@gmail.com>
Date: Mon, 28 Nov 2022 16:51:02 +0800
Subject: [PATCH] feat:新埋点对接
---
public/index.html | 77 ++++++++++++++++-------------------------------------------------------------
public/zwlogJS接入.html | 2 ++
src/App.vue | 11 ++++++++++-
src/common/zwUtil.js | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/main.js | 4 ++--
src/views/Home/Home.vue | 8 ++++++--
src/views/Service/ServiceKQ.vue | 25 +++++++++++++++----------
src/views/Yanxue/achievementsOne.vue | 439 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
src/views/answerRank/stars.vue | 774 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
9 files changed, 778 insertions(+), 696 deletions(-)
create mode 100644 src/common/zwUtil.js
diff --git a/public/index.html b/public/index.html
index 988e6ac..a9bb8ca 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,70 +2,25 @@
<html lang="en">
<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <meta name="format-detection" content="telephone=yes" />
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title></title>
- <!-- 埋点 -->
- <!-- <script src="https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085"></script> -->
- <script>
- (function(w, d, s, q, i) {
- w[q] = w[q] || [];
- var f = d.getElementsByTagName(s)[0],
- j = d.createElement(s);
- j.async = true;
- j.id = 'beacon-aplus';
- j.src = 'https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085';
- f.parentNode.insertBefore(j, f);
- })(window, document, 'script', 'aplus_queue');
-
- aplus_queue.push({
- action: 'aplus.setMetaInfo',
- arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
- });
-
-
- aplus_queue.push({
- action: 'aplus.setMetaInfo',
- arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']
- });
-
- aplus_queue.push({
- action: 'aplus.setMetaInfo',
- arguments: ['appId', '60506758']
- });
- aplus_queue.push({
- 'action': 'aplus.sendPV',
- 'arguments': [{
- is_auto: false
- }, {
- miniAppId: '2001895516',
- }]
- })
- // aplus_queue.push({
- // action: 'aplus.setMetaInfo',
- // arguments: ['miniAppId', '2001895516']
- // });
- // aplus_queue.push({
- // action: 'aplus.setMetaInfo',
- // arguments: ['miniAppName', '红色网上游']
- // });
- </script>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport"
+ content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <meta name="format-detection" content="telephone=yes" />
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title></title>
+ <script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script>
+ <script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>
</head>
<body>
- <noscript>
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
- Please enable it to continue.</strong>
- </noscript>
- <div id="app"></div>
- <!-- 地图 -->
- <script src="https://webapi.amap.com/maps?v=1.4.15&key=61af1988b71a634a59a0de29409baeb8"></script>
- <!-- 政务中台JSAPI -->
- <script src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js"></script>
-
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+ Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- 地图 -->
+ <script src="https://webapi.amap.com/maps?v=1.4.15&key=61af1988b71a634a59a0de29409baeb8"></script>
</body>
</html>
\ No newline at end of file
diff --git a/public/zwlogJS接入.html b/public/zwlogJS接入.html
index ed41807..15bfb06 100644
--- a/public/zwlogJS接入.html
+++ b/public/zwlogJS接入.html
@@ -17,9 +17,11 @@
_user_id: "用户ID",
_user_nick: "用户昵称"
})
+ console.log(2222)
//onReady表示zwlog加载完成后的函数，它接收一个匿名函数，而sendPV与record方法均要在匿名函数内调用。eg:
zwlog.onReady(function () {
+ console.log(1111)
//PV日志
zwlog.sendPV({
miniAppId: 'IRS服务侧应用appid',
diff --git a/src/App.vue b/src/App.vue
index 85211f5..3f88438 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,8 +11,17 @@ export default {
isElder: false,
}
},
+ watch: {
+ $route(to, from) {
+ console.log('zheliban 》》》 ', to, from)
+ this.$zwlogPvGlobal({ url: to.meta.pagePath, enterPageTime: new Date() })
+ this.$zwlogPvGlobal({
+ url: from.meta.pagePath,
+ leavePageTime: new Date(),
+ })
+ },
+ },
mounted() {
- // new vConsole()
ZWJSBridge.onReady(() => {
console.log('初始化完成后，执行bridge方法')
})
diff --git a/src/common/zwUtil.js b/src/common/zwUtil.js
new file mode 100644
index 0000000..30114ed
--- /dev/null
+++ b/src/common/zwUtil.js
@@ -0,0 +1,134 @@
+
+// 埋点对象
+var zwlog;
+
+// 页面埋点数据
+var pageLogMap = {};
+
+/*
+ * *******用户信息采集，同时声明 Zwlog 对象实例
+ * uerId 用户 ID 没登录就非必填，登录了必填
+ */
+export function initZwlog () {
+ zwlog = new ZwLog({
+ _user_id: localStorage.getItem('centerNo'),
+ _user_nick: localStorage.getItem('_user_nick')
+ });
+}
+
+/*
+ * *******PV 日志参数- global_args
+ * url 页面路径 【选填】（未传参默认获取当前路由地址）
+ * enterPageTime 【必填】（默认在路由改变的时候自动获取时间） 进入页面的时间 new Date()
+ * leavePageTime 【必填】（默认在路由改变的时候自动获取时间） 离开页面的时间 new Date()
+ * loadTime【必填】（页面onShow中获取当前时间） 加载完的时间 new Date()
+ * responseTime 【必填】（页面onShow的nextTick中获取当前时间） 响应完的时间 new Date()
+ */
+export function zwlogPvGlobal ({
+ url = null,
+ enterPageTime = null,
+ leavePageTime = null,
+ loadTime = null,
+ responseTime = null
+} = {}) {
+ console.log('调用zwlogPvGlobal')
+ if (!zwlog) initZwlog();
+ let path = url || getCurRoute();
+ if (!pageLogMap.hasOwnProperty(path))
+ pageLogMap[path] = {
+ enterPageTime: null,
+ leavePageTime: null,
+ loadTime: null,
+ responseTime: null,
+ };
+
+ if (enterPageTime) pageLogMap[path].enterPageTime = enterPageTime;
+ if (leavePageTime) pageLogMap[path].leavePageTime = leavePageTime;
+ if (loadTime) pageLogMap[path].loadTime = loadTime;
+ if (responseTime) pageLogMap[path].responseTime = responseTime;
+
+ console.log("zheliban === " + path, pageLogMap[path]);
+
+ if (
+ pageLogMap[path].enterPageTime &&
+ pageLogMap[path].leavePageTime &&
+ pageLogMap[path].loadTime &&
+ pageLogMap[path].responseTime
+ ) {
+ /*
+ * miniAppId 应用开发管理 平台 appId
+ * miniAppName 应用开发管理 平台应用名称
+ * log_status 用户登录状态 （01:未登录/ 02:单点登录）
+ * Page_duration 浏览时长 用户从进入到离开当 前页面的时长
+ * t2 页面加载时间 页面启动到加载完成 的时间
+ * t0 页面响应时间 页面启动到页面响应 完成的时间
+ * pageId 应用页面 ID
+ * pageName 应用页面名称
+ */
+ let Page_duration =
+ pageLogMap[path].leavePageTime.getTime() -
+ pageLogMap[path].enterPageTime.getTime();
+ let t2 =
+ pageLogMap[path].loadTime.getTime() -
+ pageLogMap[path].enterPageTime.getTime();
+ let t0 =
+ pageLogMap[path].responseTime.getTime() -
+ pageLogMap[path].enterPageTime.getTime();
+ setTimeout(() => {
+ let pvParams = {
+ miniAppId: "2001895516",
+ miniAppName: "红色网上游",
+ log_status: "2001895516",
+ Page_duration: Page_duration / 1000 + "秒",
+ t2: t2 / 1000 + "秒",
+ t0: t0 / 1000 + "秒",
+ pageId: path,
+ pageName: getNavigationBarTitleText(),
+ };
+ zwlog.onReady(function () {
+ console.log('zwlog onReady')
+ zwlog.sendPV(pvParams);
+ delete pageLogMap[path];
+ });
+ }, 500);
+ } else {
+ let result = "";
+ for (let k in pageLogMap[path]) {
+ if (!pageLogMap[path][k]) result += k + "，";
+ }
+ console.log("zheliban === 浙里办页面" + path + "埋点缺少参数=>>", result);
+ }
+}
+// 获取页面的导航title
+function getNavigationBarTitleText () {
+ // let pages = getCurrentPages();
+ // let page = pages[pages.length - 1];
+ // let title = page.$holder.navigationBarTitleText;
+ // console.log("zheliban === getNavigationBarTitleText title=", title);
+ return document.title;
+}
+
+// 点击事件的埋点
+export function zwlogRecord ({ code = "" } = {}) {
+ if (!zwlog) initZwlog();
+ let path = getCurRoute();
+ zwlog.onReady(function () {
+ zwlog.record({
+ trackerEventCode: `${code}`,
+ eventType: "OTHER",
+ eventParams: {
+ pageId: path, //采用页面路径，也可以自己给每个页面设置一个pageId
+ pageName: getNavigationBarTitleText(),
+ },
+ });
+ });
+}
+
+
+let getCurRoute = () => {
+ // let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
+ // let curRoute = routes[routes.length - 1].route; // 获取当前页面路由，也就是最后一个打开的页面路由
+ // console.log("curRoute", curRoute);
+
+ return '/';
+};
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 1b3ae2c..ab91b61 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,8 +18,8 @@ import yxAxios from '@/https/yxAxios'
Vue.prototype.yxAxios = yxAxios;
Vue.prototype.dialog = Dialog;
-import { mgop } from '@aligov/jssdk-mgop';
-Vue.prototype.mgop = mgop;
+import {zwlogPvGlobal} from './common/zwUtil.js'
+Vue.prototype.$zwlogPvGlobal = zwlogPvGlobal;
import common from './common/index'
Vue.prototype.common = common;
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 379d319..4614d5b 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -96,6 +96,10 @@ export default {
},
mounted() {
+ this.$zwlogPvGlobal({ loadTime: new Date() })
+ this.$nextTick(() => {
+ this.$zwlogPvGlobal({ responseTime: new Date() })
+ })
const isElder = localStorage.getItem('isElder')
if (isElder) {
this.isElder = true
@@ -193,8 +197,8 @@ export default {
localStorage.removeItem('centerNo')
setTimeout(() => {
const sUserAgent = window.navigator.userAgent.toLowerCase()
- const dtdreamweb = sUserAgent.indexOf('dtdreamweb') > -1
- const miniprogram = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1
+ const dtdreamweb = sUserAgent.indexOf('dtdreamweb') > -1
+ const miniprogram = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1
if (miniprogram) {
// alert('支付宝')
window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc`
diff --git a/src/views/Service/ServiceKQ.vue b/src/views/Service/ServiceKQ.vue
index de463dc..1585630 100644
--- a/src/views/Service/ServiceKQ.vue
+++ b/src/views/Service/ServiceKQ.vue
@@ -12,7 +12,6 @@ export default {
centerNo: '',
}
},
-
mounted() {
console.log('xst mounted')
this.checkAuth()
@@ -127,13 +126,13 @@ export default {
// })
// } else {
// localStorage.setItem('reloadCount', 2)
- if (miniprogram) {
- // alert('支付宝')
- window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc`
- } else {
- // alert('浙里办')
- window.location.href = `https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=82a7a71edb794fc285895f9e33290ddc`
- }
+ if (miniprogram) {
+ // alert('支付宝')
+ window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc`
+ } else {
+ // alert('浙里办')
+ window.location.href = `https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=82a7a71edb794fc285895f9e33290ddc`
+ }
// }
},
// 获取用户信息
@@ -143,8 +142,14 @@ export default {
this.yxAxios.get(`${this.proxyUrl}/user/info/getPortalUserByNum?userNum=${localStorage.getItem('centerNo')}`).then((res) => {
console.log('获取用户信息getPortalUserByNum:', res)
if (res.data.code == 200) {
- localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
- this.userInfo = res.data.data.userInfo
+ let userInfo = res.data.data.userInfo
+ localStorage.setItem('userInfo', JSON.stringify(userInfo))
+ this.userInfo = userInfo
+ localStorage.setItem('_user_nick', userInfo.travelerName)
+ this.$zwlogPvGlobal({ loadTime: new Date() })
+ this.$nextTick(() => {
+ this.$zwlogPvGlobal({ responseTime: new Date() })
+ })
}
})
},
diff --git a/src/views/Yanxue/achievementsOne.vue b/src/views/Yanxue/achievementsOne.vue
index 504b304..2faa7c5 100644
--- a/src/views/Yanxue/achievementsOne.vue
+++ b/src/views/Yanxue/achievementsOne.vue
@@ -1,48 +1,34 @@
<template>
- <div class="cardBox">
- <!-- <van-tabs v-model="tabsName">
+ <div class="cardBox">
+ <!-- <van-tabs v-model="tabsName">
<van-tab title="红色教育"></van-tab>
<van-tab title="劳动教育"></van-tab>
<van-tab title="课外实践"></van-tab>
<van-tab title="研学旅行"></van-tab>
</van-tabs> -->
- <van-tabs v-model="sort" @click="tabsClick">
- <van-tab title="发布时间">发布时间</van-tab>
- <van-tab title="点赞量">点赞量</van-tab>
- <van-tab title="阅读量">阅读量</van-tab>
- </van-tabs>
- <div class="contextBox" v-if="newsList.length != 0" @load="getData">
- <van-list
- v-model="loading"
- :finished="finished"
- finished-text="没有更多了"
- @load="getData"
- >
- <div
- class="art_card_pic"
- v-for="(v, i) in newsList"
- :key="i"
- @click="toDetails(v)"
- >
- <div class="art_context">
- <div class="art_title">{{ v.titleDesc }}</div>
- <div class="art_bot">
- <!-- <div class="redSticky" v-if="v.readNumber">置顶</div> -->
- <!-- <div class="greyTime">发布于 {{ v.createTime ? Moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</div> -->
- <div class="greyTime">
- 点赞量 {{ v.likeNumber }}
- </div>
- <div class="greyFont">
- 浏览量 {{ v.readNumber }}
- </div>
- </div>
- </div>
- <div class="art_pic">
- <img :src="v.imgUrl" />
- </div>
- </div>
- </van-list>
- <!-- <div
+ <van-tabs v-model="sort" @click="tabsClick">
+ <van-tab title="发布时间">发布时间</van-tab>
+ <van-tab title="点赞量">点赞量</van-tab>
+ <van-tab title="阅读量">阅读量</van-tab>
+ </van-tabs>
+ <div class="contextBox" v-if="newsList.length != 0" @load="getData">
+ <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
+ <div class="art_card_pic" v-for="(v, i) in newsList" :key="i" @click="toDetails(v)">
+ <div class="art_context">
+ <div class="art_title">{{ v.titleDesc }}</div>
+ <div class="art_bot">
+ <!-- <div class="redSticky" v-if="v.readNumber">置顶</div> -->
+ <!-- <div class="greyTime">发布于 {{ v.createTime ? Moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</div> -->
+ <div class="greyTime">点赞量 {{ v.likeNumber }}</div>
+ <div class="greyFont">浏览量 {{ v.readNumber }}</div>
+ </div>
+ </div>
+ <div class="art_pic">
+ <img :src="v.imgUrl" />
+ </div>
+ </div>
+ </van-list>
+ <!-- <div
class="art_card_pic"
v-for="(v, i) in newsList"
:key="i"
@@ -59,224 +45,223 @@
<img :src="v.imgUrl" />
</div>
</div> -->
- </div>
-
- <van-empty description="暂无数据" v-else />
+ </div>
- <div class="imgPic" @click="toChoose">
- <img src="@/assets/changeSchool.png" />
- </div>
+ <van-empty description="暂无数据" v-else />
- <tabbar4 active="fruit"></tabbar4>
+ <div class="imgPic" @click="toChoose">
+ <img src="@/assets/changeSchool.png" />
</div>
+
+ <tabbar4 active="fruit"></tabbar4>
+ </div>
</template>
<script>
-import Tabbar4 from "@/component/Tabbar4";
+import Tabbar4 from '@/component/Tabbar4'
export default {
- components: { Tabbar4 },
- data() {
- return {
- tabsName: 1,
- newsList: [],
- pageNum: 1,
- pageSize: 10,
- finished: false,
- loading: false,
- sort: 0
- };
+ components: { Tabbar4 },
+ data() {
+ return {
+ tabsName: 1,
+ newsList: [],
+ pageNum: 1,
+ pageSize: 10,
+ finished: false,
+ loading: false,
+ sort: 0,
+ }
+ },
+ methods: {
+ //详情新闻
+ toDetails(v) {
+ this.$router.push({
+ name: 'pageDetails',
+ query: { schoolId: v.schoolId, dataId: v.id },
+ })
},
- methods: {
- //详情新闻
- toDetails(v) {
- this.$router.push({
- name: "pageDetails",
- query: { schoolId: v.schoolId, dataId: v.id },
- });
- },
- //选择
- toChoose() {
- this.$router.push({ name: "chooseSchoolOne" });
- },
- tabsClick() {
- this.newsList = []
- this.pageNum = 1
- this.pageSize = 10
- this.getData()
- },
- getData() {
- this.loading = true;
- let schoolId = this.$route.query.schoolId
- ? this.$route.query.schoolId
- : "";
-
- this.yxAxios
- .get(
- `${this.kqUrl}/schoolConsult/consultList?pageNum=${this.pageNum}&pageSize=${this.pageSize}&schoolId=` +
- schoolId + `&sort=` + this.sort
- )
- .then((res) => {
- if (res.data.code == 200) {
- this.newsList = this.newsList.concat(
- res.data.data.list
- );
- this.loading = false;
- if (
- this.pageSize * this.pageNum >=
- res.data.data.total
- ) {
- this.finished = true;
- } else {
- this.pageNum++;
- }
- } else {
- this.$toast.fail(res.data.message);
- }
- });
- // this.yxAxios
- // .post(`${this.dataUrl}/sys/yx/consultList`, {
- // page: 1,
- // pageSize: 999,
- // schoolId: this.$route.query.schoolId*1
- // })
- // .then((res) => {
- // if (res.data.success) {
- // this.newsList = res.data.data.list;
- // } else {
- // this.$toast.fail(res.data.message);
- // }
- // });
- },
+ //选择
+ toChoose() {
+ this.$router.push({ name: 'chooseSchoolOne' })
},
- mounted() {
- this.getData();
+ tabsClick() {
+ this.newsList = []
+ this.pageNum = 1
+ this.pageSize = 10
+ this.getData()
},
-};
+ getData() {
+ this.loading = true
+ let schoolId = this.$route.query.schoolId ? this.$route.query.schoolId : ''
+
+ this.yxAxios
+ .get(
+ `${this.kqUrl}/schoolConsult/consultList?pageNum=${this.pageNum}&pageSize=${this.pageSize}&schoolId=` +
+ schoolId +
+ `&sort=` +
+ this.sort
+ )
+ .then((res) => {
+ if (res.data.code == 200) {
+ this.newsList = this.newsList.concat(res.data.data.list)
+ this.loading = false
+ if (this.pageSize * this.pageNum >= res.data.data.total) {
+ this.finished = true
+ } else {
+ this.pageNum++
+ }
+ } else {
+ this.$toast.fail(res.data.message)
+ }
+ })
+ // this.yxAxios
+ // .post(`${this.dataUrl}/sys/yx/consultList`, {
+ // page: 1,
+ // pageSize: 999,
+ // schoolId: this.$route.query.schoolId*1
+ // })
+ // .then((res) => {
+ // if (res.data.success) {
+ // this.newsList = res.data.data.list;
+ // } else {
+ // this.$toast.fail(res.data.message);
+ // }
+ // });
+ },
+ },
+ mounted() {
+ this.getData()
+ this.$zwlogPvGlobal({ loadTime: new Date() })
+ this.$nextTick(() => {
+ this.$zwlogPvGlobal({ responseTime: new Date() })
+ })
+ },
+}
</script>
<style lang="scss" scoped>
.cardBox {
- padding: 2vw 0;
- box-sizing: border-box;
+ padding: 2vw 0;
+ box-sizing: border-box;
- .contextBox {
- margin-top: 20px;
- margin-bottom: 140px;
- .art_card {
- padding: 28px;
- box-sizing: border-box;
-
- .art_title {
- width: 100%;
- font-size: 34px;
- font-weight: bold;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 1; //限制行数
- overflow: hidden; //超出部分隐藏
- text-overflow: ellipsis; //用一个省略号代替超出的内容
- }
+ .contextBox {
+ margin-top: 20px;
+ margin-bottom: 140px;
+ .art_card {
+ padding: 28px;
+ box-sizing: border-box;
- .art_bot {
- padding-top: 22px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
+ .art_title {
+ width: 100%;
+ font-size: 34px;
+ font-weight: bold;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 1; //限制行数
+ overflow: hidden; //超出部分隐藏
+ text-overflow: ellipsis; //用一个省略号代替超出的内容
+ }
- .redSticky {
- color: #ff4444;
- font-size: 24px;
- padding: 2px;
- box-sizing: border-box;
- border: 1px solid #ff4444;
- }
+ .art_bot {
+ padding-top: 22px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
- .greyTime {
- color: #999;
- font-size: 24px;
- margin: 0 20px;
- }
+ .redSticky {
+ color: #ff4444;
+ font-size: 24px;
+ padding: 2px;
+ box-sizing: border-box;
+ border: 1px solid #ff4444;
+ }
- .greyFont {
- color: #999;
- font-size: 24px;
- }
- }
+ .greyTime {
+ color: #999;
+ font-size: 24px;
+ margin: 0 20px;
}
- .art_card_pic {
- padding: 28px;
- box-sizing: border-box;
- display: flex;
- justify-content: space-between;
- .art_context {
- height: 180px;
- display: flex;
- align-content: space-between;
- flex-wrap: wrap;
+ .greyFont {
+ color: #999;
+ font-size: 24px;
+ }
+ }
+ }
+ .art_card_pic {
+ padding: 28px;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
- .art_title {
- width: 100%;
- font-size: 34px;
- font-weight: bold;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2; //限制行数
- overflow: hidden; //超出部分隐藏
- text-overflow: ellipsis; //用一个省略号代替超出的内容
- }
+ .art_context {
+ height: 180px;
+ display: flex;
+ align-content: space-between;
+ flex-wrap: wrap;
- .art_bot {
- padding-top: 22px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
+ .art_title {
+ width: 100%;
+ font-size: 34px;
+ font-weight: bold;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2; //限制行数
+ overflow: hidden; //超出部分隐藏
+ text-overflow: ellipsis; //用一个省略号代替超出的内容
+ }
- .redSticky {
- color: #ff4444;
- font-size: 24px;
- padding: 2px;
- box-sizing: border-box;
- border: 1px solid #ff4444;
- }
+ .art_bot {
+ padding-top: 22px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
- .greyTime {
- color: #999;
- font-size: 24px;
- margin: 0;
- }
+ .redSticky {
+ color: #ff4444;
+ font-size: 24px;
+ padding: 2px;
+ box-sizing: border-box;
+ border: 1px solid #ff4444;
+ }
- .greyFont {
- color: #999;
- font-size: 24px;
- margin-left: 20px;
- }
- }
- }
- .art_pic {
- width: 180px;
- height: 180px;
- flex-shrink: 0;
- background-color: #ff4444;
+ .greyTime {
+ color: #999;
+ font-size: 24px;
+ margin: 0;
+ }
- img {
- width: 100%;
- height: 100%;
- }
- }
+ .greyFont {
+ color: #999;
+ font-size: 24px;
+ margin-left: 20px;
+ }
}
- }
- .imgPic {
- position: fixed;
- right: 2vw;
- bottom: 40vw;
- width: 26vw;
- height: 26vw;
+ }
+ .art_pic {
+ width: 180px;
+ height: 180px;
+ flex-shrink: 0;
+ background-color: #ff4444;
img {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
+ }
+ }
+ }
+ .imgPic {
+ position: fixed;
+ right: 2vw;
+ bottom: 40vw;
+ width: 26vw;
+ height: 26vw;
+
+ img {
+ width: 100%;
+ height: 100%;
}
+ }
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/answerRank/stars.vue b/src/views/answerRank/stars.vue
index 8dfcf52..8b21c6e 100644
--- a/src/views/answerRank/stars.vue
+++ b/src/views/answerRank/stars.vue
@@ -1,435 +1,423 @@
<template>
- <div class="bck">
- <div class="box">
- <div class="box_L">
- <div class="L_top">
- <div class="pic">
- <img src="@/assets/rank/tx.png" />
- </div>
- <div class="font_box">
- <div class="font_name" @click="switchUser">
- {{ user.travelerName }}
- <img src="@/assets/rank/qh1.png" />
- </div>
- <div class="font_sch">{{ user.schoolName }}</div>
- </div>
- </div>
- <div class="L_mid">
- <div class="mid_item">
- <div>
- <span class="strong_font">{{
- scoreObj.scoreTotal
- }}</span>
- <span>分</span>
- </div>
- <div class="grey_font">已完成题数</div>
- </div>
- <div class="mid_item">
- <div>
- <span class="strong_font">{{ scoreObj.rate }}</span>
- <span>%</span>
- </div>
- <div class="grey_font">正确率</div>
- </div>
- </div>
- <div class="yellowFont">*积分可用于兑换各种福利</div>
- </div>
-
- <div class="box_R">
- <div class="box_R_item" @click="toRank">
- <div class="title">
- <div>排行榜</div>
- <span>RANKS</span>
- </div>
- <div class="imgBox">
- <img src="@/assets/rank/jb.png" />
- </div>
- </div>
- <div class="box_R_item" @click="toRecord">
- <div class="title">
- <div>刷题记录</div>
- <span>RECORD</span>
- </div>
- <div class="imgBox">
- <img src="@/assets/rank/qz.png" />
- </div>
- </div>
+ <div class="bck">
+ <div class="box">
+ <div class="box_L">
+ <div class="L_top">
+ <div class="pic">
+ <img src="@/assets/rank/tx.png" />
+ </div>
+ <div class="font_box">
+ <div class="font_name" @click="switchUser">
+ {{ user.travelerName }}
+ <img src="@/assets/rank/qh1.png" />
</div>
+ <div class="font_sch">{{ user.schoolName }}</div>
+ </div>
</div>
-
- <div class="card">
- <div class="picBox" @click="toYanxue">
- <img src="@/assets/rank/wxsn.png" />
+ <div class="L_mid">
+ <div class="mid_item">
+ <div>
+ <span class="strong_font">{{ scoreObj.scoreTotal }}</span>
+ <span>分</span>
</div>
-
- <div class="flexBox" v-for="(v, i) in libraryList" :key="i">
- <div class="tipPic">
- <!-- <img :src="v.imgUrl" /> -->
- <img v-if="v.type == 1" src="@/assets/rank/qt.png" />
- <img v-if="v.type == 2" src="@/assets/rank/hj.png" />
- <img v-if="v.type == 3" src="@/assets/rank/bj.png" />
- </div>
- <div class="context">
- <div class="context_title" v-if="v.type == 1">青铜级</div>
- <div class="context_title" v-if="v.type == 2">黄金级</div>
- <div class="context_title" v-if="v.type == 3">白金级</div>
- <div class="context_grey">{{ v.text }}</div>
- </div>
- <div class="btnBox">
- <div class="btn" @click="toAns(v)">开始答题</div>
- </div>
+ <div class="grey_font">已完成题数</div>
+ </div>
+ <div class="mid_item">
+ <div>
+ <span class="strong_font">{{ scoreObj.rate }}</span>
+ <span>%</span>
</div>
+ <div class="grey_font">正确率</div>
+ </div>
+ </div>
+ <div class="yellowFont">*积分可用于兑换各种福利</div>
+ </div>
+
+ <div class="box_R">
+ <div class="box_R_item" @click="toRank">
+ <div class="title">
+ <div>排行榜</div>
+ <span>RANKS</span>
+ </div>
+ <div class="imgBox">
+ <img src="@/assets/rank/jb.png" />
+ </div>
</div>
- <tabbar4 active="yanxue"></tabbar4>
+ <div class="box_R_item" @click="toRecord">
+ <div class="title">
+ <div>刷题记录</div>
+ <span>RECORD</span>
+ </div>
+ <div class="imgBox">
+ <img src="@/assets/rank/qz.png" />
+ </div>
+ </div>
+ </div>
</div>
+
+ <div class="card">
+ <div class="picBox" @click="toYanxue">
+ <img src="@/assets/rank/wxsn.png" />
+ </div>
+
+ <div class="flexBox" v-for="(v, i) in libraryList" :key="i">
+ <div class="tipPic">
+ <!-- <img :src="v.imgUrl" /> -->
+ <img v-if="v.type == 1" src="@/assets/rank/qt.png" />
+ <img v-if="v.type == 2" src="@/assets/rank/hj.png" />
+ <img v-if="v.type == 3" src="@/assets/rank/bj.png" />
+ </div>
+ <div class="context">
+ <div class="context_title" v-if="v.type == 1">青铜级</div>
+ <div class="context_title" v-if="v.type == 2">黄金级</div>
+ <div class="context_title" v-if="v.type == 3">白金级</div>
+ <div class="context_grey">{{ v.text }}</div>
+ </div>
+ <div class="btnBox">
+ <div class="btn" @click="toAns(v)">开始答题</div>
+ </div>
+ </div>
+ </div>
+ <tabbar4 active="yanxue"></tabbar4>
+ </div>
</template>
<script>
-import Tabbar4 from "@/component/Tabbar4";
+import Tabbar4 from '@/component/Tabbar4'
export default {
- components: {
- Tabbar4,
- },
- data() {
- return {
- libraryList: [
- {
- name: "青铜级",
- type: "1",
- text: "夯实基础，稳步前进",
- imgUrl: require("@/assets/rank/qt.png"),
- },
- {
- name: "黄金级",
- type: "2",
- text: "夯实基础，稳步前进",
- imgUrl: require("@/assets/rank/hj.png"),
- },
- {
- name: "白金级",
- type: "3",
- text: "夯实基础，稳步前进",
- imgUrl: require("@/assets/rank/bj.png"),
- },
- ],
- userInfo: {},
- user: {
- travelerName: "",
- travelerNum: 0,
- schoolName: "",
- },
- //答题人-正确率
- scoreObj: {
- rate: 0,
- scoreTotal: 0,
- },
- };
- },
- methods: {
- //获取用户信息
- getUser() {
- this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
-
- if (!this.userInfo.subUsers || this.userInfo.subUsers.length == 0) {
- return this.$toast.fail("暂无绑定出行人");
- }
-
- //选择了用户
- if (this.$route.query.index) {
- let index = this.$route.query.index;
- localStorage.setItem(
- "travelerNum",
- this.userInfo.subUsers[index].travelerNum
- );
- this.user = {
- travelerNum: this.userInfo.subUsers[index].travelerNum,
- travelerName: this.userInfo.subUsers[index].travelerName,
- schoolName: this.userInfo.subUsers[index].schoolName,
- };
- this.getscoreInfo();
- return;
- }
- //未选择用户 - 默认第一个
-
- localStorage.setItem(
- "travelerNum",
- this.userInfo.subUsers[0].travelerNum
- );
-
- this.user = {
- travelerNum: this.userInfo.subUsers[0].travelerNum,
- travelerName: this.userInfo.subUsers[0].travelerName,
- schoolName: this.userInfo.subUsers[0].schoolName,
- };
- this.getscoreInfo();
+ components: {
+ Tabbar4,
+ },
+ data() {
+ return {
+ libraryList: [
+ {
+ name: '青铜级',
+ type: '1',
+ text: '夯实基础，稳步前进',
+ imgUrl: require('@/assets/rank/qt.png'),
},
- //切换用户
- switchUser() {
- this.$router.push({
- name: "switchUser",
- });
+ {
+ name: '黄金级',
+ type: '2',
+ text: '夯实基础，稳步前进',
+ imgUrl: require('@/assets/rank/hj.png'),
},
- //进入题库
- toAns(val) {
- this.$router.push({
- name: "category",
- query: {
- categoryId: val.itemCategoryId,
- index: this.$route.query.index,
- type: val.type,
- },
- });
+ {
+ name: '白金级',
+ type: '3',
+ text: '夯实基础，稳步前进',
+ imgUrl: require('@/assets/rank/bj.png'),
},
- //进入刷题记录
- toRecord() {
- this.$router.push({
- name: "brush_questions",
- query: {
- index: this.$route.query.index,
- },
- });
+ ],
+ userInfo: {},
+ user: {
+ travelerName: '',
+ travelerNum: 0,
+ schoolName: '',
+ },
+ //答题人-正确率
+ scoreObj: {
+ rate: 0,
+ scoreTotal: 0,
+ },
+ }
+ },
+ methods: {
+ //获取用户信息
+ getUser() {
+ this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
+
+ if (!this.userInfo.subUsers || this.userInfo.subUsers.length == 0) {
+ return this.$toast.fail('暂无绑定出行人')
+ }
+
+ //选择了用户
+ if (this.$route.query.index) {
+ let index = this.$route.query.index
+ localStorage.setItem('travelerNum', this.userInfo.subUsers[index].travelerNum)
+ this.user = {
+ travelerNum: this.userInfo.subUsers[index].travelerNum,
+ travelerName: this.userInfo.subUsers[index].travelerName,
+ schoolName: this.userInfo.subUsers[index].schoolName,
+ }
+ this.getscoreInfo()
+ return
+ }
+ //未选择用户 - 默认第一个
+
+ localStorage.setItem('travelerNum', this.userInfo.subUsers[0].travelerNum)
+
+ this.user = {
+ travelerNum: this.userInfo.subUsers[0].travelerNum,
+ travelerName: this.userInfo.subUsers[0].travelerName,
+ schoolName: this.userInfo.subUsers[0].schoolName,
+ }
+ this.getscoreInfo()
+ },
+ //切换用户
+ switchUser() {
+ this.$router.push({
+ name: 'switchUser',
+ })
+ },
+ //进入题库
+ toAns(val) {
+ this.$router.push({
+ name: 'category',
+ query: {
+ categoryId: val.itemCategoryId,
+ index: this.$route.query.index,
+ type: val.type,
},
- //进入排行榜
- toRank() {
- this.$router.push({
- name: "ans_rank",
- query: {
- index: this.$route.query.index,
- },
- });
+ })
+ },
+ //进入刷题记录
+ toRecord() {
+ this.$router.push({
+ name: 'brush_questions',
+ query: {
+ index: this.$route.query.index,
},
- //用户答题信息
- getscoreInfo() {
- this.yxAxios
- .get(
- `${
- this.kqUrl
- }/item/getTravelerScoreInfo?travelerNum=${localStorage.getItem(
- "travelerNum"
- )}`
- )
- .then((res) => {
- if (res.data.code == 200) {
- this.scoreObj = res.data.data;
- } else {
- this.$toast.fail(res.data.message);
- }
- });
+ })
+ },
+ //进入排行榜
+ toRank() {
+ this.$router.push({
+ name: 'ans_rank',
+ query: {
+ index: this.$route.query.index,
},
- toYanxue() {
- this.$router.push({ name: 'YanxuePage' })
+ })
+ },
+ //用户答题信息
+ getscoreInfo() {
+ this.yxAxios.get(`${this.kqUrl}/item/getTravelerScoreInfo?travelerNum=${localStorage.getItem('travelerNum')}`).then((res) => {
+ if (res.data.code == 200) {
+ this.scoreObj = res.data.data
+ } else {
+ this.$toast.fail(res.data.message)
}
+ })
},
- mounted() {
- this.getUser();
+ toYanxue() {
+ this.$router.push({ name: 'YanxuePage' })
},
-};
+ },
+ mounted() {
+ this.getUser()
+ this.$zwlogPvGlobal({ loadTime: new Date() })
+ this.$nextTick(() => {
+ this.$zwlogPvGlobal({ responseTime: new Date() })
+ })
+ },
+}
</script>
<style lang="scss" scoped>
.bck {
- position: absolute;
- width: 100vw;
- height: 30vh;
- background-image: url("../../assets/rank/wx_back.png");
- -moz-background-size: 100% 100%;
- background-size: 100% 100%;
-
- .box {
+ position: absolute;
+ width: 100vw;
+ height: 30vh;
+ background-image: url('../../assets/rank/wx_back.png');
+ -moz-background-size: 100% 100%;
+ background-size: 100% 100%;
+
+ .box {
+ display: flex;
+ justify-content: space-between;
+ margin: 5vw 3vw 8vw;
+
+ .box_L {
+ width: 45vw;
+ height: 360px;
+ background-color: #fff;
+ border-radius: 30px;
+ padding: 3vw 2vw;
+ box-sizing: border-box;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: space-between;
+ border: 1px solid #ff6868;
+
+ .L_top {
+ width: 100%;
display: flex;
justify-content: space-between;
- margin: 5vw 3vw 8vw;
-
- .box_L {
- width: 45vw;
- height: 360px;
- background-color: #fff;
- border-radius: 30px;
- padding: 3vw 2vw;
- box-sizing: border-box;
- display: flex;
- flex-wrap: wrap;
- align-content: space-between;
- border: 1px solid #ff6868;
-
- .L_top {
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- .pic {
- display: flex;
- align-items: center;
-
- img {
- width: 13vw;
- height: 13vw;
- }
- }
- .font_box {
- width: 25vw;
- display: flex;
- align-content: space-between;
- flex-wrap: wrap;
-
- .font_name {
- font-size: 30px;
- color: #333333;
-
- img {
- margin-top: 5px;
- width: 30px;
- height: 25px;
- }
- }
- .font_sch {
- font-size: 27px;
- color: #999;
- white-space: nowrap; //文本强制不换行；
- text-overflow: ellipsis; //文本溢出显示省略号；
- overflow: hidden; //溢出的部分隐藏；
- }
- }
- }
- .L_mid {
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- .mid_item {
- width: 100%;
- text-align: center;
- font-size: 25px;
-
- .grey_font {
- color: #999;
- font-size: 25px;
- margin-top: 5px;
- }
-
- .strong_font {
- font-size: 50px;
- font-weight: bold;
- }
- }
- }
+ .pic {
+ display: flex;
+ align-items: center;
- .yellowFont {
- width: 100%;
- font-size: 24px;
- color: #ff7a1c;
- text-align: center;
- }
+ img {
+ width: 13vw;
+ height: 13vw;
+ }
}
- .box_R {
- width: 45vw;
- height: 360px;
- display: flex;
- flex-wrap: wrap;
- align-content: space-between;
-
- .box_R_item {
- width: 100%;
- height: 165px;
- border-radius: 30px;
- display: flex;
- justify-content: space-between;
- padding: 20px 30px;
- box-sizing: border-box;
- background-color: #fff;
-
- .title {
- font-size: 30px;
- color: #000000;
-
- span {
- color: #999999;
- font-size: 22px;
- }
- }
-
- .imgBox {
- display: flex;
- align-items: center;
-
- img {
- width: 110px;
- height: 110px;
- }
- }
+ .font_box {
+ width: 25vw;
+ display: flex;
+ align-content: space-between;
+ flex-wrap: wrap;
+
+ .font_name {
+ font-size: 30px;
+ color: #333333;
+
+ img {
+ margin-top: 5px;
+ width: 30px;
+ height: 25px;
}
+ }
+ .font_sch {
+ font-size: 27px;
+ color: #999;
+ white-space: nowrap; //文本强制不换行；
+ text-overflow: ellipsis; //文本溢出显示省略号；
+ overflow: hidden; //溢出的部分隐藏；
+ }
}
- }
+ }
- .card {
+ .L_mid {
width: 100%;
- min-height: 800px;
- background-color: #fff;
+ display: flex;
+ justify-content: space-between;
+
+ .mid_item {
+ width: 100%;
+ text-align: center;
+ font-size: 25px;
+
+ .grey_font {
+ color: #999;
+ font-size: 25px;
+ margin-top: 5px;
+ }
+
+ .strong_font {
+ font-size: 50px;
+ font-weight: bold;
+ }
+ }
+ }
+
+ .yellowFont {
+ width: 100%;
+ font-size: 24px;
+ color: #ff7a1c;
+ text-align: center;
+ }
+ }
+ .box_R {
+ width: 45vw;
+ height: 360px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: space-between;
+
+ .box_R_item {
+ width: 100%;
+ height: 165px;
border-radius: 30px;
- padding: 5vw 3vw;
+ display: flex;
+ justify-content: space-between;
+ padding: 20px 30px;
box-sizing: border-box;
+ background-color: #fff;
- .picBox {
- width: 100%;
- margin-bottom: 30px;
+ .title {
+ font-size: 30px;
+ color: #000000;
- img {
- width: 100%;
- height: 100%;
- }
+ span {
+ color: #999999;
+ font-size: 22px;
+ }
}
- .flexBox {
- display: flex;
- justify-content: space-between;
- padding: 5vw 3vw;
- box-sizing: border-box;
- border-bottom: 1px solid #f1f1f1;
-
- .tipPic {
- width: 15vw;
- img {
- width: 16vw;
- height: 16vw;
- }
- }
- .context {
- display: flex;
- align-content: space-between;
- flex-wrap: wrap;
- padding: 5px 0;
- box-sizing: border-box;
- margin-left: 5vw;
-
- .context_title {
- width: 100%;
- font-size: 36px;
- color: #333333;
- }
- .context_grey {
- font-size: 30px;
- color: #999999;
- }
- }
- .btnBox {
- display: flex;
- justify-content: flex-end;
- align-items: center;
-
- .btn {
- width: 180px;
- height: 70px;
- background-color: #fff2f2;
- color: #ff6868;
- padding: 10px 30px;
- box-sizing: border-box;
- font-size: 28px;
- border-radius: 30px;
- text-align: center;
- }
- }
+ .imgBox {
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 110px;
+ height: 110px;
+ }
+ }
+ }
+ }
+ }
+
+ .card {
+ width: 100%;
+ min-height: 800px;
+ background-color: #fff;
+ border-radius: 30px;
+ padding: 5vw 3vw;
+ box-sizing: border-box;
+
+ .picBox {
+ width: 100%;
+ margin-bottom: 30px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .flexBox {
+ display: flex;
+ justify-content: space-between;
+ padding: 5vw 3vw;
+ box-sizing: border-box;
+ border-bottom: 1px solid #f1f1f1;
+
+ .tipPic {
+ width: 15vw;
+ img {
+ width: 16vw;
+ height: 16vw;
+ }
+ }
+ .context {
+ display: flex;
+ align-content: space-between;
+ flex-wrap: wrap;
+ padding: 5px 0;
+ box-sizing: border-box;
+ margin-left: 5vw;
+
+ .context_title {
+ width: 100%;
+ font-size: 36px;
+ color: #333333;
+ }
+ .context_grey {
+ font-size: 30px;
+ color: #999999;
+ }
+ }
+ .btnBox {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+ .btn {
+ width: 180px;
+ height: 70px;
+ background-color: #fff2f2;
+ color: #ff6868;
+ padding: 10px 30px;
+ box-sizing: border-box;
+ font-size: 28px;
+ border-radius: 30px;
+ text-align: center;
}
+ }
}
+ }
}
-</style>
\ No newline at end of file
+</style>
--
libgit2 0.21.0