剔除不上线内容
This commit is contained in:
aixianling
335
src/apps/AppPartyHistoryEducation/AppPartyHistoryEducation.vue
Normal file
335
src/apps/AppPartyHistoryEducation/AppPartyHistoryEducation.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<section class="AppPartyHistoryEducation">
|
||||
<div class="page">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<span class="tips"></span>党史上的今天
|
||||
</div>
|
||||
<div class="right" @click="handleGoto('./todayList')">
|
||||
查看全部
|
||||
<img src="https://cdn.cunwuyun.cn/img/down.svg" class="right-icon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="header" v-for="(item, index) in todayList" :key="index"
|
||||
@click="handleGoto(`./todayDetail?id=${item.id}`)">
|
||||
<img :src="item.thumbUrl[0].url" alt="" v-if="item.thumbUrl && item.thumbUrl.length">
|
||||
<p class="text">{{ item.title }}</p>
|
||||
<p class="time">{{ item.organizationName }} {{ item.publishDate || '' }}</p>
|
||||
</div>
|
||||
<AiEmpty v-if="todayList.length == 0"/>
|
||||
<div class="line-bg"></div>
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<span class="tips"></span>党史课堂
|
||||
</div>
|
||||
<div class="right" @click="handleGoto('./classroomList')">
|
||||
查看全部
|
||||
<img src="https://cdn.cunwuyun.cn/img/down.svg" class="right-icon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-item" v-for="(item, index) in classList" :key="index"
|
||||
@click="handleGoto(`./videoDetail?id=${item.id}`)">
|
||||
<img :src="item.thumbUrl[0].url" alt="" v-if="item.thumbUrl && item.thumbUrl.length">
|
||||
<p>{{ item.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="classList.length == 0"/>
|
||||
<div class="line-bg"></div>
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<span class="tips"></span>党史知识
|
||||
</div>
|
||||
<div class="right" @click="handleGoto('./knowledgeList?type=knowledge')">
|
||||
查看全部
|
||||
<img src="https://cdn.cunwuyun.cn/img/down.svg" class="right-icon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="new-list">
|
||||
<div class="list-content">
|
||||
<div class="bg-fff" v-for="(item, index) in knowledgeList" :key="index"
|
||||
@click="handleGoto(`./todayDetail?type=know&id=${item.id}`)">
|
||||
<div class="item">
|
||||
<div class="info">
|
||||
<p>{{ item.title }}</p>
|
||||
<span>{{ item.organizationName }} {{ item.createDate }}</span>
|
||||
</div>
|
||||
<img :src="item.thumbUrl[0].url" alt="" v-if="item.thumbUrl && item.thumbUrl.length"/>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="knowledgeList.length == 0"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "AppPartyHistoryEducation",
|
||||
appName: "党员学习",
|
||||
computed: {
|
||||
...mapState(["user", "token"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
todayList: [],
|
||||
classList: [],
|
||||
knowledgeList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getTodayList()
|
||||
this.getClassList()
|
||||
this.getKnowledgeList()
|
||||
},
|
||||
methods: {
|
||||
getTodayList() {
|
||||
this.$http.post(`/app/apppartyeducation/list?style=2&size=1&status=1`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data && res.data.records) {
|
||||
res.data.records.map((item) => {
|
||||
if (item.thumbUrl) {
|
||||
item.thumbUrl = JSON.parse(item.thumbUrl)
|
||||
}
|
||||
if (item.publishDate) {
|
||||
item.publishDate = item.publishDate.substring(0, 10)
|
||||
}
|
||||
})
|
||||
this.todayList = res.data.records
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getClassList() {
|
||||
this.$http.post(`/app/apppartyclassroom/list?size=3&status=1`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data && res.data.records) {
|
||||
res.data.records.map((item) => {
|
||||
item.thumbUrl = JSON.parse(item.thumbUrl)
|
||||
})
|
||||
this.classList = res.data.records
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getKnowledgeList() {
|
||||
this.$http.post(`/app/apppartyeducation/list?style=0&size=4&status=1`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data && res.data.records) {
|
||||
res.data.records.map((item) => {
|
||||
if (item.thumbUrl) {
|
||||
item.thumbUrl = JSON.parse(item.thumbUrl)
|
||||
}
|
||||
if (item.createDate) {
|
||||
item.createDate = item.createDate.substring(0, 10)
|
||||
}
|
||||
})
|
||||
this.knowledgeList = res.data.records
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleGoto(url) {
|
||||
uni.navigateTo({url});
|
||||
},
|
||||
toNewDetail(id) {
|
||||
this.handleGoto(`/pages/party/partyHistory/detail?id=${id}`);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../common/common.css";
|
||||
|
||||
.AppPartyHistoryEducation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
padding: 28px 16px 28px 28px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.tips {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 32px;
|
||||
background: #E02617;
|
||||
vertical-align: middle;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
transform: rotate(270deg);
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.left {
|
||||
font-size: 34px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 34px 40px 34px;
|
||||
|
||||
img {
|
||||
width: 684px;
|
||||
height: 252px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 16px;
|
||||
height: 96px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.line-bg {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background: #F2F2F2;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 0 0 40px 30px;
|
||||
overflow-x: hidden;
|
||||
height: 236px;
|
||||
width: 800px;
|
||||
|
||||
.tab-item {
|
||||
float: left;
|
||||
width: 236px;
|
||||
height: 236px;
|
||||
background: #FFF;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
|
||||
border-radius: 8px;
|
||||
margin-right: 16px;
|
||||
|
||||
img {
|
||||
width: 236px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 12px 8px 0;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 36px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-list {
|
||||
background-color: #fff;
|
||||
|
||||
.list-content {
|
||||
.bg-fff {
|
||||
padding: 0 30px;
|
||||
border-top: 1px solid #ddd;
|
||||
|
||||
.item {
|
||||
padding: 24px 0 32px 0;
|
||||
border-bottom: 2px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.info {
|
||||
// width: 410px;
|
||||
p {
|
||||
// width: 410px;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 46px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 224px;
|
||||
height: 168px;
|
||||
margin-left: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-more {
|
||||
background-color: #fff;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #c50000;
|
||||
line-height: 40px;
|
||||
padding: 30px 0 40px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
src/apps/AppPartyHistoryEducation/classroomList.vue
Normal file
105
src/apps/AppPartyHistoryEducation/classroomList.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<section class="home">
|
||||
<div class="page">
|
||||
<div class="item" v-for="(item, index) in classList" :key="index" @click.stop="toDetail(item.id)">
|
||||
<img :src="item.thumbUrl[0].url" alt="" class="banner-img">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/pay-btn.png" alt="" class="play-img">
|
||||
<p>{{item.title}}</p>
|
||||
<div>{{item.organizationName}} {{item.createDate}}</div>
|
||||
</div>
|
||||
<AiEmpty v-if="classList.length == 0" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "home",
|
||||
computed: {
|
||||
...mapState(["user", "token"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 1,
|
||||
pages: 2,
|
||||
classList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getClassList()
|
||||
},
|
||||
methods: {
|
||||
getClassList() {
|
||||
if (this.current > this.pages) return;
|
||||
this.$http.post(`/app/apppartyclassroom/list?size=10&status=1¤t=${this.current}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data && res.data.records) {
|
||||
res.data.records.map((item) => {
|
||||
item.thumbUrl = JSON.parse(item.thumbUrl)
|
||||
item.createDate = item.createDate.substring(0, 10)
|
||||
})
|
||||
const classList = this.current > 1 ? [...this.classList, ...res.data.records]: res.data.records
|
||||
this.pages = Math.ceil(res.data.total / 10)
|
||||
this.classList = classList
|
||||
this.classList = res.data.records
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(id) {
|
||||
uni.navigateTo({url: `./videoDetail?id=${id}`})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1
|
||||
this.getClassList()
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../common/common.css";
|
||||
.home {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: #fff;
|
||||
.item{
|
||||
position: relative;
|
||||
video{
|
||||
width: 100%;
|
||||
height: 416px;
|
||||
// background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.banner-img{
|
||||
width: 100%;
|
||||
height: 416px;
|
||||
}
|
||||
.play-img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
top: 148px;
|
||||
left: 334px;
|
||||
}
|
||||
p{
|
||||
padding: 20px 32px;
|
||||
width: 686px;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
}
|
||||
div{
|
||||
padding: 0 0 34px 32px;
|
||||
font-size: 22px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
100
src/apps/AppPartyHistoryEducation/detail.vue
Normal file
100
src/apps/AppPartyHistoryEducation/detail.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<section class="home">
|
||||
<div class="page">
|
||||
<div class="header">
|
||||
<p class="title">{{info.title}}</p>
|
||||
<div class="info mar-b16"><span class="label">发布单位：</span><span class="value">{{info.organizationName}}</span></div>
|
||||
<div class="info">发布时间：{{info.publishDate || info.createDate}}</div>
|
||||
|
||||
</div>
|
||||
<div class="content">
|
||||
<u-parse :html="info.content"></u-parse>
|
||||
</div>
|
||||
<AiTransSpeech :src="info.speech" v-if="info.speech"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "home",
|
||||
computed: {
|
||||
...mapState(["user", "token"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
info: {},
|
||||
content: ''
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = options.id
|
||||
this.getDetail()
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/apppartyhistory/queryDetailByIdWeChat?id=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if(res.data.publishDate) {
|
||||
res.data.publishDate = res.data.publishDate.substring(0, 10)
|
||||
}
|
||||
if(res.data.createDate) {
|
||||
res.data.createDate = res.data.createDate.substring(0, 10)
|
||||
}
|
||||
this.info = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../common/common.css";
|
||||
.home {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: #fff;
|
||||
.header{
|
||||
width: 100%;
|
||||
padding: 24px 32px 32px;
|
||||
box-sizing: border-box;
|
||||
background: #D03A28;
|
||||
.title{
|
||||
width: 100%;
|
||||
font-size: 40px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
line-height: 64px;
|
||||
letter-spacing: 1px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.info{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
line-height: 40px;
|
||||
.label{
|
||||
width: 140px;
|
||||
}
|
||||
.value{
|
||||
width: calc(100% - 140px);
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.mar-b16{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
295
src/apps/AppPartyHistoryEducation/knowledgeList.vue
Normal file
295
src/apps/AppPartyHistoryEducation/knowledgeList.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div style="height: 100%">
|
||||
<div class="fixed-top">
|
||||
<!-- 选择时间和类型 -->
|
||||
<div class="slect flex-row">
|
||||
<!-- 类型选择 -->
|
||||
<div class="uni-list type-slect">
|
||||
<div class="uni-list-cell">
|
||||
<div class="uni-list-cell-db">
|
||||
<picker
|
||||
@change="bindPickerChange"
|
||||
:range="array"
|
||||
range-key="dictName"
|
||||
>
|
||||
<div class="uni-input">{{styleText}}</div>
|
||||
<image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 时间选择 -->
|
||||
<div class="uni-list type-slect">
|
||||
<div class="uni-list-cell">
|
||||
<div class="uni-list-cell-db">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="date"
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
@change="bindDateChange"
|
||||
fields="month"
|
||||
>
|
||||
<div class="uni-input">{{ day }}</div>
|
||||
<image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-list">
|
||||
<div class="session-item" v-for="(item, index) in meetList" :key="index" @click="toDetail(item.id)">
|
||||
<div class="info">
|
||||
<p v-if="fromType != 'style'"><span :class="item.style == 0 ? 'status0' : 'status1'">{{item.style == 0 ? '党史知识' : '党史图书馆'}}</span>{{item.title}}</p>
|
||||
<p v-else><span class="status0">{{ $dict.getLabel(`partyHistoryType${optionStyle}`, item.type) }}</span>{{item.title}}</p>
|
||||
<span class="time">{{item.organizationName}} {{item.createDate}}</span>
|
||||
</div>
|
||||
<div class="img" v-if="item.thumbUrl && item.thumbUrl.length">
|
||||
<img :src="item.thumbUrl[0].url" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="meetList.length == 0" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const currentDate = this.getDate({
|
||||
format: true,
|
||||
});
|
||||
return {
|
||||
array: [],
|
||||
partyStudyType: "",
|
||||
date: currentDate,
|
||||
day: "时间",
|
||||
createDate: "", //创建时间
|
||||
meetList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pages: 2,
|
||||
fromType: '', //style 0、党建要闻 1、政策解读 knowledge 党史知识 policy 党史图书馆
|
||||
style: '4',
|
||||
styleText: '类型',
|
||||
optionStyle: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
startDate() {
|
||||
return this.getDate("start");
|
||||
},
|
||||
endDate() {
|
||||
return this.getDate("end");
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options)
|
||||
if(options.type == 'knowledge'){
|
||||
this.array = [{dictName: "全部类型", dictValue: "4"}, {dictName: "党史知识 ", dictValue: 0}, {dictName: "党史图书馆", dictValue: 1}]
|
||||
}
|
||||
if(options.type == 'style'){
|
||||
this.style = ''
|
||||
this.optionStyle = options.style
|
||||
this.$dict.load("partyHistoryType0", "partyHistoryType1").then(() => {
|
||||
this.array = this.$dict.getDict(`partyHistoryType${options.style}`)
|
||||
this.array.unshift({dictName: "全部类型", dictValue: ""})
|
||||
})
|
||||
}
|
||||
|
||||
this.fromType = options.type
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
bindPickerChange(e) {
|
||||
console.log(e)
|
||||
this.style = this.array[e.detail.value].dictValue
|
||||
if(this.style === ''){
|
||||
this.styleText = '类型'
|
||||
}else {
|
||||
this.styleText = this.array[e.detail.value].dictName
|
||||
}
|
||||
|
||||
this.pageNum = 1;
|
||||
this.pages = 2;
|
||||
this.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
bindDateChange (e) {
|
||||
this.day = e.target.value;
|
||||
this.createDate = e.target.value;
|
||||
this.pageNum = 1;
|
||||
this.pages = 2;
|
||||
this.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === "start") {
|
||||
year = year - 60;
|
||||
} else if (type === "end") {
|
||||
year = year + 2;
|
||||
}
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day > 9 ? day : "0" + day;
|
||||
|
||||
return `${year}-${month}-08 00:00:00 `;
|
||||
},
|
||||
|
||||
search() {
|
||||
this.pageNum = 1;
|
||||
this.pageSize = 10;
|
||||
this.pages = 2;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
if (this.pageNum > this.pages) return;
|
||||
|
||||
var createDate = ''
|
||||
if(this.createDate) {
|
||||
createDate = this.createDate + '-01'
|
||||
}
|
||||
this.$http.post(`/app/apppartyeducation/list?size=10¤t=${this.pageNum}&createDateParam=${createDate}&style=${this.style}&status=1`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
res.data.records.map((item) => {
|
||||
if(item.thumbUrl) {
|
||||
item.thumbUrl = JSON.parse(item.thumbUrl)
|
||||
}
|
||||
if(item.createDate) {
|
||||
item.createDate = item.createDate.substring(0, 10)
|
||||
}
|
||||
})
|
||||
const meetList = this.pageNum > 1 ? [...this.meetList, ...res.data.records]: res.data.records
|
||||
this.pages = Math.ceil(res.data.total / 10)
|
||||
this.meetList = meetList
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: "./todayDetail?type=know&id=" + id,
|
||||
});
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
@import "../../common/common.css";
|
||||
.page {
|
||||
.search-box {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
background-color: #e60012;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.slect {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
.type-slect {
|
||||
width: 50%;
|
||||
border-right: 1px solid #f7f7f7;
|
||||
margin: 30px 0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
.uni-input {
|
||||
display: inline-block;
|
||||
}
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
margin-left: 8spx;
|
||||
}
|
||||
}
|
||||
.type-slect:nth-child(2) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.session-list {
|
||||
padding-top: 112px;
|
||||
.session-item {
|
||||
width: 686px;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto 32px auto;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-radius: 8px;
|
||||
.info{
|
||||
p{
|
||||
height: 88px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 24px;
|
||||
span{
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
line-height: 44px;
|
||||
margin-right: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.status0{
|
||||
color: #2266FF;
|
||||
background-color: #E8EFFF;
|
||||
}
|
||||
.status1{
|
||||
color: #FF8822;
|
||||
background-color: #FFF3E9;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.img{
|
||||
padding-left: 24px;
|
||||
img{
|
||||
width: 192px;
|
||||
height: 144px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-affairs {
|
||||
width: 100%;
|
||||
height: calc(100% - 210px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
328
src/apps/AppPartyHistoryEducation/list.vue
Normal file
328
src/apps/AppPartyHistoryEducation/list.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div style="height: 100%">
|
||||
<div class="fixed-top">
|
||||
<!-- 选择时间和类型 -->
|
||||
<div class="slect flex-row">
|
||||
<!-- 类型选择 -->
|
||||
<div class="uni-list type-slect">
|
||||
<div class="uni-list-cell">
|
||||
<div class="uni-list-cell-db">
|
||||
<picker
|
||||
@change="bindPickerChange"
|
||||
:range="array"
|
||||
range-key="dictName"
|
||||
>
|
||||
<div class="uni-input">{{ styleText }}</div>
|
||||
<image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 时间选择 -->
|
||||
<div class="uni-list type-slect">
|
||||
<div class="uni-list-cell">
|
||||
<div class="uni-list-cell-db">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="date"
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
@change="bindDateChange"
|
||||
fields="month"
|
||||
>
|
||||
<div class="uni-input">{{ day }}</div>
|
||||
<image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-list">
|
||||
<div class="session-item" v-for="(item, index) in meetList" :key="index" @click="toDetail(item.id)">
|
||||
<div class="info">
|
||||
<p v-if="fromType != 'style'"><span
|
||||
:class="item.style == 0 ? 'status0' : 'status1'">{{ item.style == 0 ? '党史知识' : '党史图书馆' }}</span>{{ item.title }}
|
||||
</p>
|
||||
<p v-else><span class="status0">{{
|
||||
$dict.getLabel(`partyHistoryType${optionStyle}`, item.type)
|
||||
}}</span>{{ item.title }}</p>
|
||||
<span class="time">{{ item.organizationName }} {{ item.createDate }}</span>
|
||||
</div>
|
||||
<div class="img" v-if="item.thumbUrl && item.thumbUrl.length">
|
||||
<img :src="item.thumbUrl[0].url" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="meetList.length == 0"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const currentDate = this.getDate({
|
||||
format: true,
|
||||
});
|
||||
return {
|
||||
array: [],
|
||||
partyStudyType: "",
|
||||
date: currentDate,
|
||||
day: "时间",
|
||||
createDate: "", //创建时间
|
||||
meetList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pages: 2,
|
||||
fromType: '', //style 0、党建要闻 1、政策解读 knowledge 党史知识 policy 党史图书馆
|
||||
style: '',
|
||||
styleText: '类型',
|
||||
optionStyle: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
startDate() {
|
||||
return this.getDate("start");
|
||||
},
|
||||
endDate() {
|
||||
return this.getDate("end");
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options)
|
||||
if (options.type == 'knowledge') {
|
||||
this.array = [{dictName: "全部类型", dictValue: "0|1"}, {dictName: "党史知识 ", dictValue: 0}, {
|
||||
dictName: "党史图书馆",
|
||||
dictValue: 1
|
||||
}]
|
||||
}
|
||||
if (options.type == 'style') {
|
||||
this.style = ''
|
||||
this.optionStyle = options.style
|
||||
this.$dict.load("partyHistoryType0", "partyHistoryType1").then(() => {
|
||||
this.array = this.$dict.getDict(`partyHistoryType${options.style}`)
|
||||
this.array.unshift({dictName: "全部类型", dictValue: ""})
|
||||
})
|
||||
}
|
||||
|
||||
this.fromType = options.type
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
bindPickerChange(e) {
|
||||
console.log(e)
|
||||
this.style = this.array[e.detail.value].dictValue
|
||||
if (this.style === '') {
|
||||
this.styleText = '类型'
|
||||
} else {
|
||||
this.styleText = this.array[e.detail.value].dictName
|
||||
}
|
||||
|
||||
this.pageNum = 1;
|
||||
this.pages = 2;
|
||||
this.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
bindDateChange(e) {
|
||||
this.day = e.target.value;
|
||||
this.createDate = e.target.value;
|
||||
this.pageNum = 1;
|
||||
this.pages = 2;
|
||||
this.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === "start") {
|
||||
year = year - 60;
|
||||
} else if (type === "end") {
|
||||
year = year + 2;
|
||||
}
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day > 9 ? day : "0" + day;
|
||||
|
||||
return `${year}-${month}-08 00:00:00 `;
|
||||
},
|
||||
|
||||
search() {
|
||||
this.pageNum = 1;
|
||||
this.pageSize = 10;
|
||||
this.pages = 2;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
if (this.pageNum > this.pages) return;
|
||||
|
||||
var createDate = ''
|
||||
if (this.createDate) {
|
||||
createDate = this.createDate + '-01 00:00:00'
|
||||
}
|
||||
this.$http.post(`/app/apppartyhistory/listWechat`, {
|
||||
style: this.fromType == 'style' ? this.optionStyle : this.style,
|
||||
type: this.style,
|
||||
createDate: createDate,
|
||||
current: this.pageNum,
|
||||
size: this.pageSize,
|
||||
status: 1
|
||||
}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
res.data.records.map((item) => {
|
||||
if (item.thumbUrl) {
|
||||
item.thumbUrl = JSON.parse(item.thumbUrl)
|
||||
}
|
||||
if (item.createDate) {
|
||||
item.createDate = item.createDate.substring(0, 10)
|
||||
}
|
||||
})
|
||||
const meetList = this.pageNum > 1 ? [...this.meetList, ...res.data.records] : res.data.records
|
||||
this.pages = Math.ceil(res.data.total / 10)
|
||||
this.meetList = meetList
|
||||
// this.meetList.map((item) => {
|
||||
// item.thumbUrl = JSON.parse(item.thumbUrl)
|
||||
// })
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: "./detail?id=" + id,
|
||||
});
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
@import "../../common/common.css";
|
||||
|
||||
.page {
|
||||
.search-box {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
background-color: #e60012;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slect {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
|
||||
.type-slect {
|
||||
width: 50%;
|
||||
border-right: 1px solid #f7f7f7;
|
||||
margin: 30px 0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
|
||||
.uni-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
margin-left: 8 spx;
|
||||
}
|
||||
}
|
||||
|
||||
.type-slect:nth-child(2) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.session-list {
|
||||
padding-top: 112px;
|
||||
|
||||
.session-item {
|
||||
width: 686px;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto 32px auto;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-radius: 8px;
|
||||
|
||||
.info {
|
||||
p {
|
||||
height: 88px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 24px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
line-height: 44px;
|
||||
margin-right: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.status0 {
|
||||
color: #2266FF;
|
||||
background-color: #E8EFFF;
|
||||
}
|
||||
|
||||
.status1 {
|
||||
color: #FF8822;
|
||||
background-color: #FFF3E9;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
padding-left: 24px;
|
||||
|
||||
img {
|
||||
width: 192px;
|
||||
height: 144px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-affairs {
|
||||
width: 100%;
|
||||
height: calc(100% - 210px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
src/apps/AppPartyHistoryEducation/select.vue
Normal file
76
src/apps/AppPartyHistoryEducation/select.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<section class="home">
|
||||
<div class="page">
|
||||
<p class="title">点击进入月份</p>
|
||||
<div class="tab-content">
|
||||
<span v-for="(item, index) in tabList" :key="index" class="tab-item" :class="tabIndex == index ? 'active' : ''" @click="back(index)">{{item}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "home",
|
||||
computed: {
|
||||
...mapState(["user", "token"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabList: ['全部', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
||||
tabIndex: 0,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.tabIndex = options.index
|
||||
},
|
||||
methods: {
|
||||
back(index) {
|
||||
this.tabIndex = index
|
||||
uni.setStorageSync('partyTabIndex', this.tabIndex)
|
||||
uni.navigateBack({delta:1})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../common/common.css";
|
||||
.home {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: #fff;
|
||||
.title{
|
||||
padding: 32px 0 40px 30px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #B9B9B9;
|
||||
line-height: 36px;
|
||||
}
|
||||
.tab-content{
|
||||
padding-left: 30px;
|
||||
.tab-item{
|
||||
display: inline-block;
|
||||
width: 144px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
border-radius: 24px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #CBCBCB;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin: 0 38px 32px 0;
|
||||
}
|
||||
.active{
|
||||
color: #DA2D1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
104
src/apps/AppPartyHistoryEducation/todayDetail.vue
Normal file
104
src/apps/AppPartyHistoryEducation/todayDetail.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<section class="home">
|
||||
<div class="page">
|
||||
<div class="header">
|
||||
<p class="title">{{info.title}}</p>
|
||||
<div class="info mar-b16"><span class="label">发布单位：</span><span class="value">{{info.organizationName}}</span></div>
|
||||
<div class="info" v-if="type == 'know'">发布时间：{{info.createDate || '-'}}</div>
|
||||
<div class="info" v-else>发布时间：{{info.publishDate || '-'}}</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<u-parse :html="info.content"></u-parse>
|
||||
</div>
|
||||
<AiTransSpeech :src="info.speech" v-if="info.speech"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "home",
|
||||
computed: {
|
||||
...mapState(["user", "token"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
info: {},
|
||||
content: '',
|
||||
type: '', //know 党史知识
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options)
|
||||
this.id = options.id
|
||||
this.type = options.type
|
||||
this.getDetail()
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/apppartyeducation/queryDetailById?id=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if(res.data.createDate) {
|
||||
res.data.createDate = res.data.createDate.substring(0, 10)
|
||||
}
|
||||
if(res.data.publishDate) {
|
||||
res.data.publishDate = res.data.publishDate.substring(0, 10)
|
||||
}
|
||||
this.info = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../common/common.css";
|
||||
.home {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: #fff;
|
||||
.header{
|
||||
width: 100%;
|
||||
padding: 24px 32px 32px;
|
||||
box-sizing: border-box;
|
||||
background: #D03A28;
|
||||
.title{
|
||||
width: 100%;
|
||||
font-size: 40px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
line-height: 64px;
|
||||
letter-spacing: 1px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.info{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
.label{
|
||||
width: 140px;
|
||||
}
|
||||
.value{
|
||||
width: calc(100% - 140px);
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.mar-b16{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
160
src/apps/AppPartyHistoryEducation/todayList.vue
Normal file
160
src/apps/AppPartyHistoryEducation/todayList.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<section class="home">
|
||||
<div class="page">
|
||||
<div class="tab-content">
|
||||
<span v-for="(item, index) in tabList" :key="index" class="tab-item" :class="tabIndex == index ? 'active' : ''" @click="timeSelect(index)">{{item}}</span>
|
||||
<img src="https://cdn.cunwuyun.cn/img/party_detail.png" alt="" @click="handleGoto(`./select?index=${tabIndex}`)">
|
||||
</div>
|
||||
<div class="item" v-for="(item, index) in todayList" :key="index" @click="handleGoto(`./todayDetail?id=${item.id}`)">
|
||||
<div class="header">
|
||||
<img :src="item.thumbUrl[0].url" alt="" v-if="item.thumbUrl && item.thumbUrl.length" />
|
||||
<p class="text">{{item.title}}</p>
|
||||
<p class="time">{{item.organizationName}} {{item.publishDate || ''}}</p>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
</div>
|
||||
<AiEmpty v-if="todayList.length == 0" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "home",
|
||||
computed: {
|
||||
...mapState(["user", "token"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabList: ['全部', '一月', '二月', '三月', '四月', '五月'],
|
||||
tabIndex: 0,
|
||||
todayList: [],
|
||||
current: 1,
|
||||
pages: 2
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getTodayList();
|
||||
},
|
||||
onShow() {
|
||||
if(uni.getStorageSync('partyTabIndex')) {
|
||||
this.tabIndex = uni.getStorageSync('partyTabIndex')
|
||||
uni.setStorageSync('partyTabIndex', '')
|
||||
this.timeSelect(this.tabIndex);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTodayList() {
|
||||
if (this.current > this.pages) return;
|
||||
var publishDate = ''
|
||||
if(this.tabIndex > 0) {
|
||||
var myDate = new Date();
|
||||
var tYear = myDate.getFullYear();
|
||||
var month = this.tabIndex < 10 ? '0' + this.tabIndex : this.tabIndex
|
||||
publishDate = tYear + '-' + month + '-01'
|
||||
}
|
||||
this.$http.post(`/app/apppartyeducation/list?style=2¤t=${this.current}&size=10&publishDate=${publishDate}&status=1`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.records && res.data.records.length) {
|
||||
res.data.records.map((item) => {
|
||||
console.log(item.thumbUrl)
|
||||
if(item.thumbUrl) {
|
||||
item.thumbUrl = JSON.parse(item.thumbUrl)
|
||||
}
|
||||
if(item.publishDate) {
|
||||
item.publishDate = item.publishDate.substring(0, 10)
|
||||
}
|
||||
})
|
||||
const todayList = this.current > 1 ? [...this.todayList, ...res.data.records]: res.data.records
|
||||
this.pages = Math.ceil(res.data.total / 10)
|
||||
this.todayList = todayList
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleGoto(url) {
|
||||
uni.navigateTo({url})
|
||||
},
|
||||
timeSelect(index) {
|
||||
this.tabIndex = index
|
||||
this.current = 1
|
||||
this.pages = 2
|
||||
this.todayList = []
|
||||
this.getTodayList()
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1
|
||||
this.getTodayList()
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../common/common.css";
|
||||
.home {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: #fff;
|
||||
.tab-content{
|
||||
width: 100%;
|
||||
height: 84px;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
background: #FCF0ED;
|
||||
.tab-item{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
line-height: 80px;
|
||||
height: 80px;
|
||||
margin-right: 48px;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #70737B;
|
||||
}
|
||||
.active{
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #DA2D1A;
|
||||
border-bottom: 4px solid #DE2C19;
|
||||
}
|
||||
img{
|
||||
width: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
padding: 0 34px;
|
||||
img {
|
||||
width: 684px;
|
||||
height: 252px;
|
||||
margin: 32px 0;
|
||||
}
|
||||
.text {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.time {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
line-height: 30px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
.line-bg {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
180
src/apps/AppPartyHistoryEducation/videoDetail.vue
Normal file
180
src/apps/AppPartyHistoryEducation/videoDetail.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<section class="home" v-if="pageShow">
|
||||
<div class="page" v-if="videoList.length">
|
||||
<video :src="videoList[activeIndex].videoUrl" :id="`video${activeIndex+1}`"></video>
|
||||
<p class="video-name">{{videoList[activeIndex].title}}</p>
|
||||
<div class="time">{{info.organizationName}} {{info.createDate}}</div>
|
||||
<div class="title">
|
||||
<span>选集</span>
|
||||
<p @click="show=true" v-if="videoList.length > 7">查看全部 ></p>
|
||||
</div>
|
||||
<div class="select page-select">
|
||||
<div class="item" :class="index == activeIndex ? 'active' : ''" v-for="(item, index) in videoList" :key="index" @click="activeIndex=index">{{item.num}}</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span>内容简介</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<u-parse :html="info.content"></u-parse>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom">
|
||||
<div class="title">
|
||||
<span>选集</span>
|
||||
</div>
|
||||
<div class="select pop-select">
|
||||
<div class="item" :class="index == activeIndex ? 'active' : ''" v-for="(item, index) in videoList" :key="index" @click="activeIndex=index;show=false">{{item.num}}</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
<AiEmpty v-else />
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "home",
|
||||
computed: {
|
||||
...mapState(["user", "token"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
id: '',
|
||||
info: {},
|
||||
videoList: [],
|
||||
activeIndex: 0,
|
||||
pageShow: false
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = options.id
|
||||
this.getClassDetail()
|
||||
this.getVideoList()
|
||||
},
|
||||
methods: {
|
||||
change(index) {
|
||||
this.current = index;
|
||||
},
|
||||
getClassDetail() {
|
||||
this.$http.post(`/app/apppartyclassroom/queryDetailById?id=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data) {
|
||||
res.data.createDate = res.data.createDate.substring(0, 10)
|
||||
this.info= res.data
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getVideoList() {
|
||||
this.$http.post(`/app/apppartyclassroomepisode/list?classroomId=${this.id}&size=10000`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log(res)
|
||||
if (res.data && res.data.records) {
|
||||
this.videoList = res.data.records
|
||||
this.pageShow = true
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../common/common.css";
|
||||
.home {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: #fff;
|
||||
video{
|
||||
width: 100%;
|
||||
height: 416px;
|
||||
}
|
||||
.video-name{
|
||||
padding: 24px 32px 20px;
|
||||
width: 686px;
|
||||
font-size: 34px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
}
|
||||
.time{
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
line-height: 30px;
|
||||
margin-bottom: 32px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
.title{
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
padding: 0 32px 16px 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
span{
|
||||
display: inline-block;
|
||||
font-size: 34px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 80px;
|
||||
}
|
||||
p{
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
.select{
|
||||
padding: 0 0 24px 32px;
|
||||
width: 800px;
|
||||
overflow-x: hidden;
|
||||
.item{
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
text-align: center;
|
||||
background: #F0F4FB;
|
||||
border-radius: 8px;
|
||||
float: left;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.active{
|
||||
color: #DA2D1A;
|
||||
}
|
||||
}
|
||||
.page-select{
|
||||
height: 96px;
|
||||
padding-bottom: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.content{
|
||||
padding: 0 32px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.pop-select{
|
||||
.item{
|
||||
margin: 0 22px 22px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user