Skip to content

P
pica-annual-summary
提交 9778d96f 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

接入数据及数据处理

上级 2a053fb3
显示空白字符变更
内嵌 并排
正在显示 包含 363 行增加 和 117 行删除
src/components/annual-summary/card-1.vue
浏览文件 @ 9778d96f
<template>
<div class="card-1-wrapper">
<Logo></Logo>
<div class="bgi-wrapper"><img src="~@/images/annual/page-1-back.png" alt="" /></div>
<div class="bgi-wrapper">
<img src="~@/images/annual/page-1-back.png" alt />
</div>
<section class="detail">
<p class="title">尊敬的<span class="shareanimate" swiper-animate-effect="shareanimate" swiper-animate-duration="4s" swiper-animate-delay="0s">齐天大圣</span>医生</p>
<p v-if="anualData.doctorName" class="title">
尊敬的
<span
class="shareanimate"
swiper-animate-effect="shareanimate"
swiper-animate-duration="4s"
swiper-animate-delay="0s"
>{{anualData.doctorName | shortName(5)}}</span>医生
</p>
<p v-if="!anualData.doctorName" class="title">
尊敬的医生
</p>
<article class="shareanimate">
<p style="line-height: 2;">我们在一起已经<span class="fbig6 cg2">100</span>天啦</p>
<p class="mt-15"><span class="cg2 b">2018</span> 年 <span class="cg2 b">12</span> 月 <span class="cg2 b"> 1 </span>日</p>
<p style="line-height: 2;">
我们在一起已经
<span class="fbig6 cg2">{{anualData.registerDays}}</span> 天啦
</p>
<p class="mt-15">
<span class="cg2 b">{{parseTime(anualData.registerTime, '{yyyy}')}} </span>年
<span class="cg2 b">{{parseTime(anualData.registerTime, '{mm}')}} </span>月
<span class="cg2 b">{{parseTime(anualData.registerTime, '{dd}')}} </span>日
</p>
<p>第一次遇见您</p>
<p class="mt-20"><span class="cg2 b">陈半仙</span> 老师的<span class="cg2 b">《我的大学》</span>课程</p>
<p>是您学习的第一门课；</p>
<p v-show="anualData.firstCourseName" class="mt-20">
<!-- <span class="cg2 b">陈半仙</span> 老师的 -->
<span class="cg2 b">《{{anualData.firstCourseName | shortName(10)}}》</span>课程
</p>
<p v-show="anualData.firstCourseName">是您学习的第一门课；</p>
</article>
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
import { parseTime } from "@/utils"
export default {
components: {
Logo
},
props: {
anualData: {
type: Object,
default: () => {
return {};
}
}
},
methods: {
parseTime(value, format) {
return parseTime(value, format);
}
},
};
</script>
<style lang="less" scoped>
......
src/components/annual-summary/card-2.vue
浏览文件 @ 9778d96f
......@@ -4,12 +4,12 @@
<div class="bgi-wrapper"><img src="~@/images/annual/page-2-back.png" alt="" /></div>
<section class="detail">
<div id="detail-content">
<p >2020年，您一共学习了</p>
<p class="mt-10"><span class="fbig6 cg2">100</span> 分钟</p>
<p><span class="fbig6 cg2">100</span> 课程</p>
<p><span class="fbig6 cg2">100</span> 文章</p>
<p class="mt-5">您最关注的学科</p>
<p class="cg2 b">内科内科内科</p>
<p >{{anualData.yearType}}年，您一共学习了</p>
<p class="mt-10"><span class="fbig6 cg2">{{anualData.loginTotalTimeM}}</span> 分钟</p>
<p v-show="anualData.learnCourseNum" ><span class="fbig6 cg2">{{anualData.learnCourseNum}}</span> 课程</p>
<p v-show="anualData.learnArticleNum"><span class="fbig6 cg2">{{anualData.learnArticleNum}}</span> 文章</p>
<p v-show="anualData.learnMoreCourseLabelName" class="mt-5">您最关注的学科</p>
<p v-show="anualData.learnMoreCourseLabelName" class="cg2 b">{{anualData.learnMoreCourseLabelName | shortName(10)}}</p>
</div>
</section>
</div>
......@@ -20,6 +20,14 @@ export default {
components: {
Logo
},
props: {
anualData: {
type: Object,
default: () => {
return {};
}
}
},
}
</script>
<style lang="less" scoped>
......
src/components/annual-summary/card-3.vue
浏览文件 @ 9778d96f
......@@ -3,11 +3,11 @@
<Logo></Logo>
<div class="bgi-wrapper"><img src="~@/images/annual/page-3-back.png" alt="" /></div>
<section class="detail">
<p>2020年，您通过使用</p>
<p>{{anualData.yearType}}年，您通过使用</p>
<p class="mt-10 lh-25"><span class="fbig6 cg2">找药工具</span></p>
<p class="mt-5">开了 <span class="cg2 b">2018</span> 笔订单</p>
<p class="mt-5">服务了 <span class="cg2 b">2018</span> 居民增加了</p>
<p class="mt-5">增加了 <span class="cg2 b">2018</span> 收入</p>
<p class="mt-5">开了 <span class="cg2 b">{{anualData.orderNum}}</span> 笔订单</p>
<p class="mt-5">服务了 <span class="cg2 b">{{anualData.orderOfferPatientNum}}</span> 居民增加了</p>
<p class="mt-5">增加了 <span class="cg2 b">{{anualData.orderTotalAmountY | yLocalString}}</span> 收入</p>
</section>
</div>
</template>
......@@ -17,6 +17,14 @@ export default {
components: {
Logo
},
props: {
anualData: {
type: Object,
default: () => {
return {};
}
}
},
}
</script>
<style lang="less" scoped>
......
src/components/annual-summary/card-4.vue
浏览文件 @ 9778d96f
<template>
<div class="card-4-wrapper" :class="{'ysl': type == 1, 'zqc': type == 2, 'no': type == 3}">
<Logo imgType=2></Logo>
<Logo imgType="2"></Logo>
<section class="detail">
<p v-show="title"><span class="fbig6 cw">{{title}}</span></p>
<p v-show="title">
<span class="fbig6 cw">{{title}}</span>
</p>
<section class="ct">
<p><span class="fw7">12</span> 月 <span class="fw7">12</span> 日 <span class="fw7">12</span> 点，您还在学习。 </p>
<p>
<span class="fw7">{{parseTime(anualData.learnEarliestTime, '{mm}')}}</span> 月
<span class="fw7">{{parseTime(anualData.learnEarliestTime, '{dd}')}}</span> 日
<span class="fw7">{{parseTime(anualData.learnEarliestTime, '{hh}')}}</span> 点，您还在学习。
</p>
<p>老师，您辛苦了！</p>
<p class="tr mt-40">这一年，有 <span class="fw7">10</span> 天，</p>
<p class="tr mt-40">
这一年，有
<span class="fw7">{{anualData.loginDays}}</span> 天，
</p>
<p class="tr">您都在持续不断的学习。</p>
</section>
</section>
</div>
</template>
<script>
import { parseTime } from "@/utils"
import Logo from "@/components/annual-summary/logo";
export default {
components: {
......@@ -21,51 +32,81 @@ export default {
props: {
type: {
type: Number | String,
default: 3,
default: 1
},
title: {
type: String,
default: '' // 夜深了 早起床
anualData: {
type: Object,
default: () => {
return {};
}
}
},
}
computed: {
title() {
let text = "";
if (this.type == 1) {
text = "夜深了";
} else if (this.type == 2) {
text = "早起床";
}
return text;
}
},
methods: {
parseTime(value, format) {
return parseTime(value, format);
}
},
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-4-wrapper {
position: relative;
top: 0;
left: 0;
height: 100vh;
font-size: 16px;
color: #3B3B3B;
color: #3b3b3b;
&.ysl {
background: url('../../images/annual/page-4-back.png') no-repeat center center;
background: url("../../images/annual/page-4-back.png") no-repeat center
center;
background-size: cover;
color: #FFFFFF;
color: #ffffff;
}
&.zqc {
background: url('../../images/annual/page-5-back.png') no-repeat center center;
background: url("../../images/annual/page-5-back.png") no-repeat center
center;
background-size: cover;
color: #134A5D;
color: #134a5d;
}
&.no {
background: url('../../images/annual/page-6-back.png') no-repeat center center;
background: url("../../images/annual/page-6-back.png") no-repeat center
center;
background-size: cover;
color: #FFFFFF;
color: #ffffff;
}
.detail {
position: relative;
top: 0;
left: 0;
z-index: 2;
margin: 20px 30px;
.ct {
p {
line-height: 1.6 !important;
}
margin-top: 20px;
.tr {
text-align: right;
}
......
src/components/annual-summary/card-5.vue
浏览文件 @ 9778d96f
......@@ -7,7 +7,7 @@
</div>
<section v-show="type == 1" class="detail">
<p>这一年</p>
<p class="mg-30">您获得了 <span class="num">100</span> 个云鹊豆</p>
<p class="mg-30">您获得了 <span class="num">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆</p>
<p>在勤奋学习的同时，还积极参与活动，是收获颇丰的一年</p>
</section>
<section v-show="type == 2" class="detail">
......@@ -24,9 +24,17 @@ export default {
Logo
},
props: {
type: {
type: Number | String,
default: 2, // 1: 已经获取云鹊豆; 2: 没有获取云鹊豆
anualData: {
type: Object,
default: () => {
return {};
}
}
},
computed: {
// 1: 已经获取云鹊豆; 2: 没有获取云鹊豆
type() {
return this.anualData.creditNum ? 1 : 2;
}
}
}
......
src/components/annual-summary/card-6.vue
浏览文件 @ 9778d96f
......@@ -7,28 +7,31 @@
</div>
<section class="detail">
<p class="title">2020年度学习报告</p>
<p>
<p v-if="anualData.doctorName">
尊敬的
<span class="cg2 b">齐天大圣</span> 医生
<span class="cg2 b">{{anualData.doctorName}}</span> 医生
</p>
<p v-if="!anualData.doctorName">
尊敬的医生
</p>
<p>
2020年您学习了
<span class="cg2 b">10</span> 门课程，时长
<span class="cg2 b">10</span> 小时
{{anualData.yearType}}年您学习了
<span class="cg2 b">{{anualData.learnCourseNum}}</span> 门课程，时长
<span class="cg2 b">{{anualData.loginTotalTimeH}}</span> 小时
</p>
<p>
获得了
<span class="cg2 b">10</span> 个云鹊豆
<span class="cg2 b">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆
</p>
<p>
<p v-if="anualData.learnMoreCourseLabelName">
最关注的知识类型是：
<span class="cg2 b">10</span>
<span class="cg2 b">{{anualData.learnMoreCourseLabelName}}</span>
</p>
<p class="mt-20">2020年极不平凡，回顾这一年也极为难得，这一年感谢有你。</p>
<p class="mt-20">{{anualData.yearType}}年极不平凡，回顾这一年也极为难得，这一年感谢有你。</p>
<p>希望你的2021年也有云鹊医的陪伴，因为云鹊医的参与，生活变得平凡也珍贵。</p>
<p class="mt-20">
——已陪伴你
<span class="cg2 b">10</span> 天的云鹊医
<span class="cg2 b">{{anualData.registerDays}}</span> 天的云鹊医
</p>
</section>
<div class="qr-wrapper">
......@@ -54,6 +57,12 @@ export default {
type: {
type: Number | String,
default: 1 // 1: 站内; 2: 站外
},
anualData: {
type: Object,
default: () => {
return {};
}
}
},
data() {
......@@ -136,8 +145,9 @@ export default {
}
}
.qr-wrapper {
position: relative;
top: 0;
width: 100%;
position: absolute;
top: 410px;
left: 0;
z-index: 1;
text-align: center;
......
src/components/annual-summary/logo.vue
浏览文件 @ 9778d96f
......@@ -12,6 +12,10 @@ export default {
imgType: {
type: Number | String,
default: 1
},
backType: {
type: Number | String,
default: 1 // 1: H5返回; 2: 原生返回
}
},
data() {
......@@ -21,8 +25,11 @@ export default {
},
methods: {
back() {
// rocNative.goBack();
if( backType == 1) {
this.$router.back(-1);
} else {
rocNative.goBack();
}
}
},
};
......
src/utils/env-config.js
浏览文件 @ 9778d96f
......@@ -8,7 +8,7 @@ export const envConfig = {
// baseUrl: 'http://10.177.15.180:10202/',
// baseUrl: 'http://192.168.140.14:10201/',
baseUrl: 'https://test1-sc.yunqueyi.com/',
baseUrl: 'https://dev-sc.yunqueyi.com/',
apiUrl: 'https://dev-api.yunqueyi.com/',
webPageUrl: 'https://dev-phome.yunqueyi.com/',
hactiveUrl: 'https://dev-hactive.yunqueyi.com',
......
src/views/annual-summary/detail.vue
浏览文件 @ 9778d96f
......@@ -2,22 +2,22 @@
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<Card1></Card1>
<Card1 :anualData="anualData"></Card1>
</div>
<div class="swiper-slide">
<Card2></Card2>
<Card2 :anualData="anualData"></Card2>
</div>
<div class="swiper-slide">
<Card3></Card3>
<div v-if="anualData.orderNum" class="swiper-slide">
<Card3 :anualData="anualData"></Card3>
</div>
<div class="swiper-slide">
<Card4></Card4>
<div v-if="anualData.learnTime4Show" class="swiper-slide">
<Card4 :anualData="anualData"></Card4>
</div>
<div class="swiper-slide">
<Card5></Card5>
<Card5 :anualData="anualData"></Card5>
</div>
<div class="swiper-slide">
<Card6></Card6>
<Card6 :anualData="anualData"></Card6>
</div>
</div>
<Loading v-show="showLoading" />
......@@ -52,9 +52,14 @@ export default {
},
data() {
return {
token: "5EE5FA068BD646C687239ED119377185",
isWeb: window.__isWeb,
isInfresh: false,
showLoading: false
showLoading: false,
anualData: {
orderNum: 1,
learnTime4Show: 1
}
};
},
......@@ -84,7 +89,71 @@ export default {
_this.getUserInfo();
},
mounted() {
mounted() {},
methods: {
...mapActions(["setUserInfo"]),
// 获取数据
initData() {
let param = {
token: this.token || "A0774D88168047CC9BE57B8BAB4F6F50",
yearType: "2020",
setEntry: true
};
this.showLoading = true;
this.GET(`stats/year/end/report/app`, param).then(res => {
if (res.code == "000000") {
this.handlerDate(res.data || {});
this.$forceUpdate();
this.$nextTick(() => {
setTimeout(() => {
this.showLoading = false;
this.initSwiper();
}, 100);
});
} else {
this.$toast(res.message);
}
});
},
// 对数据进行处理
handlerDate(anualData) {
let learnTime4Show = 0,
loginTotalTime = 0,
loginTotalTimeM = 0,
loginTotalTimeH = 0,
orderTotalAmount = 0,
orderTotalAmountY = 0;
if (anualData.learnEarliestTimeFlag == 1) {
learnTime4Show = anualData.learnEarliestTime;
} else if (anualData.learnLatestTimeFlag == 1) {
learnTime4Show = anualData.learnLatestTime;
} else {
learnTime4Show =
anualData.learnEarliestTime || anualData.learnLatestTime;
}
anualData.learnTime4Show = learnTime4Show;
loginTotalTime = anualData.loginTotalTime || 0;
if (loginTotalTime) {
loginTotalTimeM = Math.floor(loginTotalTime / 1000);
loginTotalTimeH = Math.floor(loginTotalTime / 1000 / 60);
}
anualData.loginTotalTimeM = loginTotalTimeM;
anualData.loginTotalTimeH = loginTotalTimeH;
orderTotalAmount = anualData.orderTotalAmount;
if (orderTotalAmount) {
orderTotalAmountY = Math.floor(orderTotalAmount / 100);
}
anualData.orderTotalAmountY = orderTotalAmountY;
this.anualData = anualData;
},
// 初始化Swiper
initSwiper() {
new Swiper(".swiper-container", {
direction: "vertical",
speed: 300,
......@@ -95,40 +164,22 @@ export default {
on: {
init: function() {
swiperAnimateCache(this);
console.log('---111');
console.log("---111");
swiperAnimate(this);
},
slideChangeTransitionEnd: function(se) {
let activeIndex = se.activeIndex;
swiperAnimate(this);
console.log('---2323', se);
console.log("---2323", se);
if (activeIndex == 1) {
document.getElementById('detail-content').className = 'shareanimate';
document.getElementById("detail-content").className =
"shareanimate";
}
}
}
});
},
methods: {
...mapActions(["setUserInfo"]),
// 获取数据
initData() {
let param = {
token: this.token,
setEntry: true
};
// this.showLoading = true;
// this.GET(`portal/titleTest/user/getBrushTitleInfo/${this.secondSubjectId}`, param).then(res => {
// if (res.code == "000000") {
// this.showLoading = false;
// } else {
// this.$toast(res.message);
// }
// });
},
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
......@@ -139,7 +190,7 @@ export default {
// token是否失效校验
checkToken() {
let param = {
token: this.userInfo.userToken || this.token,
token: this.anualData.userToken || this.token,
setEntry: true
};
this.GET("campaign/admin/task/checkToken", param).then(res => {
......
src/views/annual-summary/index.vue
浏览文件 @ 9778d96f
<template>
<div class="as-index-wrapper">
<Logo imgType="2"></Logo>
<Logo imgType=2 backType=2></Logo>
<div class="bgi-wrapper">
<img src="~@/images/annual/index-back.png" alt />
</div>
......@@ -58,6 +58,7 @@ export default {
return {
isSelect: false,
isHide: true,
isAndroid: window.__isAndroid,
};
},
created() {
......@@ -75,6 +76,15 @@ export default {
this.isHide = true;
console.log("__savePage2Picture", param);
}
// 先调用存储权限（只有安卓手机需要）
this.isAndroid && rocNative.openExternalStoragePermission();
// 全局埋点--对外埋点
this.$sendBuriedData({
action: "ACTION_WEB_ENTER",
component_tag: `559#0#app`
});
},
methods: {
......
src/views/annual-summary/share.vue
浏览文件 @ 9778d96f
<template>
<div class="as-share-wrapper">
<Card6 type="2"></Card6>
<Card6 type="2" :anualData="anualData"></Card6>
<Loading v-show="showLoading" />
</div>
</template>
<script>
import Loading from "@/components/common/common-loading";
import Card6 from "@/components/annual-summary/card-6";
import {
getWebPageUrl
} from "@/utils"
export default {
components: {
Card6
Card6,
Loading
},
data() {
return {
uuid: '',
shareUrl: '',
showLoading: false,
anualData: {
}
}
},
created() {
......@@ -24,18 +31,77 @@ export default {
if (uuidIndex > 0) {
this.uuid = href.substr(uuidIndex + 5, 32);
} else {
this.uuid = "07F9625472D6444EBAE4BF7D2EF83BC4";
this.uuid = "74ad500d5edf11eba76d000c29f14581"; // 测试用
}
this.shareUrl = location.href;
if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
this.shareUrl = getWebPageUrl(`profexam/#/sharecoop?uuid=${this.uuid}`);
this.shareUrl = getWebPageUrl(`profexam/#/as-share?uuid=${this.uuid}`);
location.replace(this.shareUrl);
}
this.initData();
// 设置二次分享
this.secondShare();
// 全局埋点--对外埋点
this.$sendBuriedData({
action: "ACTION_WEB_ENTER",
component_tag: `561#0#${this.uuid}`
});
},
methods: {
// 获取数据
initData() {
let param = {
uuid: this.uuid,
};
this.showLoading = true;
this.GET(`stats/year/end/report/share`, param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
this.handlerDate(res.data || {});
} else {
this.$toast(res.message);
}
});
},
// 对数据进行处理
handlerDate(anualData) {
let learnTime4Show = 0,
loginTotalTime = 0,
loginTotalTimeM = 0,
loginTotalTimeH = 0,
orderTotalAmount = 0,
orderTotalAmountY = 0;
if (anualData.learnEarliestTimeFlag == 1) {
learnTime4Show = anualData.learnEarliestTime;
} else if (anualData.learnLatestTimeFlag == 1) {
learnTime4Show = anualData.learnLatestTime;
} else {
learnTime4Show =
anualData.learnEarliestTime || anualData.learnLatestTime;
}
anualData.learnTime4Show = learnTime4Show;
loginTotalTime = anualData.loginTotalTime || 0;
if (loginTotalTime) {
loginTotalTimeM = Math.floor(loginTotalTime / 1000);
loginTotalTimeH = Math.floor(loginTotalTime / 1000 / 60);
}
anualData.loginTotalTimeM = loginTotalTimeM;
anualData.loginTotalTimeH = loginTotalTimeH;
orderTotalAmount = anualData.orderTotalAmount;
if (orderTotalAmount) {
orderTotalAmountY = Math.floor(orderTotalAmount / 100);
}
anualData.orderTotalAmountY = orderTotalAmountY;
this.anualData = anualData;
},
// 二次分享
secondShare() {
this.wechatShare(
{
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或