388 lines
9.4 KiB
Vue
388 lines
9.4 KiB
Vue
<template>
|
|
<div class="publicity-body">
|
|
<div class="screen-box">
|
|
<picker mode="multiSelector" @columnchange="bindDateColumnChange" @change="bindDateChange" :value="values" :range="dateCodes" class="screen-unit">
|
|
<view>{{pageMsg.showDate}}</view>
|
|
</picker>
|
|
|
|
<picker mode="selector" @change="bindPartChange" :value="pageMsg.selectPart" range-key="ServerPart_Name" :range="screenPartCodes" class="screen-unit">
|
|
<view>{{pageMsg.selectPart!=0 ?screenPartCodes[pageMsg.selectPart].ServerPart_Name:' 全部服务区'}}</view>
|
|
</picker>
|
|
|
|
</div>
|
|
|
|
<view v-if="publicity.length>0">
|
|
<div class="publicity-unit" @tap="gopublicityDetail(item)" v-for="(item,i) in publicity" :key="i">
|
|
<div class="publicity-unit-body">
|
|
<div class="publicity-unit-title">
|
|
{{item.PUBLICITY_TITTLE}}
|
|
</div>
|
|
<div class="publicity-unit-info flex-between">
|
|
<div class="serverpart-name">
|
|
<view class="severpart-ico"></view>
|
|
<span>{{item.SERVERPART_NAME}}</span>
|
|
</div>
|
|
<view class="">
|
|
<text class="severpart-base-text">{{item.STAFF_NAME}}</text>
|
|
<text class="severpart-base-text">{{item.OPERATE_DATE}}</text>
|
|
|
|
</view>
|
|
</div>
|
|
|
|
<p class="publicity-text" >{{item.PUBLICITY_CONTENT}}</p>
|
|
|
|
<div class="publicity-unit-info publicity-bottom">
|
|
<div class="button-box">
|
|
<i class="img-tsr"></i>
|
|
<text class="button-text">{{item.COMMENT_COUNT}}评论</text>
|
|
</div>
|
|
<div class=" button-box" hover-class="navigator-hover" @tap.stop="tapPublicity(item)">
|
|
<i class="img-lxfs" :class="{'img-zan-active':item.THUMBUP_STATE==1}"></i>
|
|
<text class="button-text" :class="{'active':item.THUMBUP_STATE==1}">{{item.THUMBUP_COUNT}}赞</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="footer-text">{{publicity.length===pageMsg.totalCount?'———— 加载完毕 ————':'正在加载...'}}</div> -->
|
|
</view>
|
|
|
|
<view v-else-if="!pageMsg.isLoading" style="height: 100%;">
|
|
<noFound :nodata="publicity.length>0 ? false : true"/>
|
|
</view>
|
|
<view class="load-more" v-if="publicity.length>0">
|
|
<text>{{!pageMsg.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
|
|
</view>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters,mapMutations } from 'vuex'
|
|
export default {
|
|
data () {
|
|
const date = new Date()
|
|
const year = date.getFullYear()
|
|
const month = date.getMonth() + 1
|
|
const day = date.getDate()
|
|
let years = []
|
|
let months = []
|
|
let startYear = 2015
|
|
for (let i = 1; i <= 12; i++) {
|
|
months.push(i+'月')
|
|
}
|
|
for (let i = startYear; i <= year; i++) {
|
|
years.push(i+'年')
|
|
}
|
|
|
|
let nowShowTime = this.$util.cutDate(new Date(), 'YYYY年MM月')
|
|
|
|
return {
|
|
|
|
showPicker: false,
|
|
pageMsg: {
|
|
pageIndex: 1,
|
|
pageSize: 16,
|
|
totalCount: 0,
|
|
showDate: nowShowTime,
|
|
selectDate: year+'-'+month,
|
|
selectPart: 0,
|
|
isEnd:false,
|
|
isLoading: true,
|
|
},
|
|
/**
|
|
* 解决动态设置indicator-style不生效的问题
|
|
*/
|
|
visible: true,
|
|
dateCodes:[years,months],
|
|
values: [years.length-1,month-1],
|
|
indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
|
|
publicity: [],
|
|
screenPartCodes:[], // 可选择的服务区列表
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters({
|
|
'user': 'getUser',
|
|
isReloading:'shouldReLoadingList'
|
|
}),
|
|
},
|
|
methods:{
|
|
...mapMutations(['shouldReLoadingList']),
|
|
bindDateChange() {
|
|
let values = this.values
|
|
this.pageMsg.showDate = this.dateCodes[0][values[0]] + this.dateCodes[1][values[1]]
|
|
this.pageMsg.selectDate = this.dateCodes[0][values[0]].replace('年','') +'-'+ this.dateCodes[1][values[1]].replace('月','')
|
|
this.pageMsg.pageIndex=1
|
|
this.loadingType = 1
|
|
this.getpublicity()
|
|
},
|
|
bindDateColumnChange (e){
|
|
|
|
this.values[e.detail.column] = e.detail.value
|
|
|
|
},
|
|
bindPartChange (e){
|
|
this.pageMsg.selectPart = e.detail.value
|
|
this.pageMsg.pageIndex= 1
|
|
this.loadingType = 1
|
|
this.getpublicity()
|
|
},
|
|
pickerCancel(){
|
|
this.showPicker=false
|
|
},
|
|
tapPublicity(item){
|
|
|
|
let _this = this
|
|
|
|
_this.$request.$post("updatePublicityThumbs",{
|
|
publicityId: item.PUBLICITY_ID
|
|
}).then(rs=>{
|
|
if( item.THUMBUP_STATE ==1) {
|
|
item.THUMBUP_STATE = 0
|
|
item.THUMBUP_COUNT -= 1
|
|
}else {
|
|
item.THUMBUP_STATE = 1
|
|
item.THUMBUP_COUNT += 1
|
|
}
|
|
})
|
|
},
|
|
getServerList() { // 获取服务区
|
|
let _this = this
|
|
_this.$request.$get('GetPendingItemsBySP',{
|
|
moduleguid: 'c870b1bc-95c8-473d-81c8-8596eb793bd4'
|
|
}).then(rs => {
|
|
if(rs.ResultCode && rs.ResultCode=='100'){
|
|
_this.screenPartCodes = rs.Data.List
|
|
}
|
|
|
|
_this.screenPartCodes.unshift({ServerPart_Name:'全部服务区',ServerPartID:''})
|
|
|
|
})
|
|
},
|
|
getpublicity(){
|
|
let _this = this
|
|
_this.$request.$get('getPublicityList',{
|
|
serverpartId: _this.pageMsg.selectPart==0? '' :_this.screenPartCodes[_this.pageMsg.selectPart].ServerPartID,
|
|
startDate: this.pageMsg.selectDate,
|
|
pageIndex: this.pageMsg.pageIndex,
|
|
pageSize: this.pageMsg.pageSize
|
|
}).then(res => {
|
|
|
|
uni.hideLoading()
|
|
|
|
if(res.ResultCode==100 && res.Data.List instanceof Array){
|
|
let _data = res.Data
|
|
|
|
_this.pageMsg.totalCount = _data.TotalCount
|
|
_this.publicity = _this.pageMsg.pageIndex==1 ? _data.List : [..._this.publicity,..._data.List,]
|
|
if(_data.List.length< _this.pageMsg.pageSize) {
|
|
_this.pageMsg.isEnd = true
|
|
}
|
|
}else{
|
|
_this.publicity =[]
|
|
_this.pageMsg.isEnd =true
|
|
_this.pageMsg.isLoading= false
|
|
}
|
|
|
|
_this.$forceUpdate()
|
|
})
|
|
},
|
|
gopublicityDetail(item){
|
|
this.$util.toNextRoute('navigateTo',"/pages/publicity/publicityDetail?PUBLICITY_ID=" + item.PUBLICITY_ID)
|
|
// uni.navigateTo({
|
|
// url: "/pages/publicity/publicityDetail?PUBLICITY_ID=" + item.PUBLICITY_ID
|
|
// })
|
|
},
|
|
reloading() {
|
|
let _this = this
|
|
uni.showLoading({
|
|
title:'正在加载'
|
|
})
|
|
_this.publicity = []
|
|
_this.publicitySum = []
|
|
_this.getpublicity()
|
|
_this.getServerList()
|
|
},
|
|
reachBottom () {
|
|
let _this = this
|
|
|
|
if(! _this.pageMsg.isEnd){
|
|
uni.showLoading({
|
|
title:'正在加载'
|
|
})
|
|
_this.pageMsg.pageIndex += 1
|
|
_this.getpublicity()
|
|
}
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.reloading()
|
|
|
|
|
|
},
|
|
onReachBottom() {
|
|
this.reachBottom()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.reloading()
|
|
|
|
setTimeout(function() {
|
|
uni.stopPullDownRefresh()
|
|
}, 1000)
|
|
},
|
|
onShow() {
|
|
if(this.isReloading) {
|
|
this.reloading()
|
|
this.shouldReLoadingList(false)
|
|
}
|
|
},
|
|
onUnload() {
|
|
this.$util.addUserBehavior()
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.publicity-body {
|
|
}
|
|
.flex-between {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.publicity-unit-title {
|
|
padding: 20upx 0 0 0;
|
|
font-weight: bold;
|
|
}
|
|
.publicity-unit-info{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24upx;
|
|
padding: 12upx 0;
|
|
}
|
|
.img-lxfs {
|
|
background: url('../../static/images/publicity/zan.png') no-repeat center;
|
|
background-size: contain;
|
|
}
|
|
.img-zan-active {
|
|
background: url('../../static/images/publicity/zan-active.png') no-repeat center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.img-tsr {
|
|
background: url('../../static/images/publicity/comment.png') no-repeat center right;
|
|
background-size: contain;
|
|
}
|
|
|
|
.publicity-unit {
|
|
/* border-bottom: 1upx solid #F0F0F0; */
|
|
padding: 0 24upx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
margin-bottom: 16upx;
|
|
}
|
|
.severpart-ico {
|
|
background: url('../../static/images/publicity/dingwei.png') no-repeat center right;
|
|
background-size: contain;
|
|
width: 48upx;
|
|
height: 48upx;
|
|
margin-right: 16upx;
|
|
}
|
|
|
|
|
|
.publicity-text {
|
|
font-size: 28upx;
|
|
/* color: #000; */
|
|
/* height: 96upx; */
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.5;
|
|
margin-bottom: 32upx;
|
|
}
|
|
|
|
.publicity-unit-info .serverpart-name {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1.7;
|
|
color: #626262;
|
|
background-color: #F7F7F7;
|
|
border-radius: 4upx;
|
|
justify-content: center;
|
|
padding-right: 16upx;
|
|
font-size: 24upx;
|
|
}
|
|
.publicity-unit-info>div i{
|
|
margin-right: 8upx;
|
|
width: 34upx;
|
|
height: 34upx;
|
|
}
|
|
.publicity-bottom {
|
|
|
|
border-top: 1upx;
|
|
border-top-color: #eee;
|
|
border-top-style: solid;
|
|
justify-content: center;
|
|
width: 700upx;
|
|
}
|
|
.button-box {
|
|
flex: 1;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.button-text {
|
|
color: #626262;
|
|
font-size: 24upx;
|
|
}
|
|
.active.button-text {
|
|
color: #CB3A1B;
|
|
}
|
|
.severpart-base-text {
|
|
font-size: 24upx;
|
|
color: #A8A8A8;
|
|
}
|
|
.severpart-base-text+.severpart-base-text{
|
|
margin-left: 16upx;
|
|
}
|
|
.severpart-base-text.ml30 {
|
|
margin-left: 46upx;
|
|
}
|
|
.severpart-base-text span {
|
|
color: #878686;
|
|
}
|
|
.footer-text {
|
|
font-size: 24upx;
|
|
text-align: center;
|
|
padding: 16upx 0;
|
|
color: #999;
|
|
}
|
|
.screen-box {
|
|
background-color: #F8F8F8;
|
|
padding: 15upx 24upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.screen-unit {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
}
|
|
.screen-unit:after {
|
|
content: '';
|
|
background: url('../../static/images/tab_down.png') no-repeat center;
|
|
background-size: contain;
|
|
width: 16upx;
|
|
height: 20upx;
|
|
display: inline-block;
|
|
margin-left: 12upx;
|
|
}
|
|
|
|
</style>
|