424 lines
9.9 KiB
Vue
424 lines
9.9 KiB
Vue
<!--阳光公示详情-->
|
|
<template>
|
|
<div class="page-view">
|
|
<div v-if="isShow">
|
|
<div class='base-info pb20'>
|
|
<view class="content-title">{{baseData.PUBLICITY_TITTLE}}</view>
|
|
<div class="content-top">
|
|
<div class="serverpart-name">
|
|
<view class="severpart-ico"></view>
|
|
<span>{{baseData.SERVERPART_NAME}}</span>
|
|
</div>
|
|
<p>
|
|
<span>{{baseData.STAFF_NAME}}</span>
|
|
<span class="ml30">{{baseData.OPERATE_DATE}}</span>
|
|
</p>
|
|
|
|
</div>
|
|
<div class="publicity-content">{{baseData.PUBLICITY_CONTENT}}</div>
|
|
|
|
<div class="publicity-content" v-if="baseData.fixedFileList.length>0">
|
|
<b class="strong-text">
|
|
固定文件
|
|
</b>
|
|
<div class="img-Box">
|
|
<fileUnit v-for="(arr,i) in baseData.fixedFileList" :fileItem="arr" :key="i" @tap="rememberReader(arr.name)"></fileUnit>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="publicity-content mt30" v-if="baseData.spotcheckFileList.length>0">
|
|
<b class="strong-text">
|
|
抽检文件
|
|
</b>
|
|
<div class="img-Box">
|
|
<fileUnit v-for="(arr,i) in baseData.spotcheckFileList" :fileItem="arr" :key="i" @tap="rememberReader(arr.name)"></fileUnit>
|
|
|
|
</div>
|
|
</div>
|
|
<view class="publicity-content mt30" v-if="baseData.THUMBUP_LIST.length>2">
|
|
<view class="support-box uni-flex">
|
|
<i class="img-zan img-zan-active ico" ></i>
|
|
<text class="support-names">{{baseData.THUMBUP_LIST}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<div class="publicity-content mt30" v-if="baseData.commentList.length>0">
|
|
<div>
|
|
|
|
<b class="strong-text">最新评论</b> <span class="count">{{baseData.COMMENT_COUNT}}</span>
|
|
</div>
|
|
|
|
<view class="">
|
|
<view class="uni-comment-list" v-for="(item,i) in baseData.commentList" :key="i">
|
|
<view class="uni-comment-face"><image src="../../static/images/publicity/user.png" mode="aspectFit"></image></view>
|
|
<view class="uni-comment-body">
|
|
<view class="uni-comment-top">
|
|
<text class="comment-name-text">{{item.STAFF_NAME}}</text>
|
|
</view>
|
|
<view class="uni-comment-content">{{item.COMMENT_CONTENT}}</view>
|
|
<view class="uni-comment-date">
|
|
<view class="date-text">{{timeFormat(item.OPERATE_DATE)}}</view>
|
|
<!-- <view class="uni-comment-replay-btn">5回复</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
<div class="rate-box">
|
|
<div class="rate-gray" @click="showPopupBottom=true">写评论</div>
|
|
<div class="rate-ico" @click="showPopupBottom=true">
|
|
<i class="img-comment ico"></i>
|
|
<text class="fs12">评论</text>
|
|
</div>
|
|
<div class="rate-ico" @tap="tapPublicity" >
|
|
<i class="img-zan ico" :class="{'img-zan-active':baseData.THUMBUP_STATE==1}"></i>
|
|
<text class="fs12">赞</text>
|
|
</div>
|
|
</div>
|
|
<!-- 关联弹出框 -->
|
|
<uni-popup :show="showPopupBottom" type="bottom" @hidePopup="hidePopup">
|
|
<view class="pop-body">
|
|
<textarea v-model="commentContent" cursor-spacing='120' placeholder="填写你的评论" auto-height :focus="showPopupBottom" class="comment-textarea" placeholder-style="color:#A3A6AC;"/>
|
|
<div class="btn" hover-class="btn-active" @tap="upComment">发布</div>
|
|
</view>
|
|
</uni-popup>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters,mapMutations} from 'vuex'
|
|
import uniPopup from '@/components/uni-popup.vue'
|
|
import fileUnit from '@/components/filesComponent/fileUnit.vue'
|
|
export default {
|
|
data() {
|
|
|
|
return {
|
|
baseData: {
|
|
|
|
},
|
|
isShow: false,
|
|
loadingType: 1,
|
|
foundType:0,
|
|
FileList:[],
|
|
cardShow:true,
|
|
isSign: false,
|
|
isResolve: false,
|
|
showPopupBottom: false,
|
|
commentContent: '',
|
|
signInfo: {
|
|
|
|
}
|
|
}
|
|
},
|
|
components:{
|
|
uniPopup,
|
|
fileUnit
|
|
},
|
|
computed: {
|
|
...mapGetters({'users':'getUser'})
|
|
},
|
|
methods: {
|
|
...mapMutations(['shouldReLoadingList']),
|
|
getDetail (id) {
|
|
let _this = this
|
|
_this.$request.$get('getPublicityDetils',{
|
|
publicityId: id
|
|
}).then(rs => {
|
|
|
|
if(rs.ResultCode=='100'){
|
|
this.isShow = true
|
|
}
|
|
uni.hideLoading()
|
|
_this.baseData = rs.Data
|
|
|
|
_this.baseData.fixedFileList.map(v => {
|
|
let name= v.IMAGE_DESC.split('.')
|
|
v.type = name[name.length-1]
|
|
v.name = v.IMAGE_DESC
|
|
v.path = v.IMAGE_PATH
|
|
})
|
|
_this.baseData.spotcheckFileList.map(v => {
|
|
let name= v.IMAGE_DESC.split('.')
|
|
v.type = name[name.length-1]
|
|
v.name = v.IMAGE_DESC
|
|
v.path = v.IMAGE_PATH
|
|
})
|
|
_this.rememberReader()
|
|
|
|
})
|
|
},
|
|
timeFormat(timestamp) {
|
|
var mistiming = Math.round((Date.now() - (new Date(timestamp)).getTime()) / 1000);
|
|
var arrr = ['年', '个月', '星期', '天', '小时', '分钟', '秒'];
|
|
var arrn = [31536000, 2592000, 604800, 86400, 3600, 60, 1];
|
|
for (var i = 0; i<arrn.length; i++) {
|
|
var inm = Math.floor(mistiming / arrn[i]);
|
|
if (inm != 0) {
|
|
return inm + arrr[i] + '前';
|
|
}
|
|
}
|
|
},
|
|
hidePopup() {
|
|
this.showPopupBottom = false
|
|
},
|
|
tapPublicity(){
|
|
let _this = this
|
|
_this.$request.$post("updatePublicityThumbs",{
|
|
publicityId: _this.baseData.PUBLICITY_ID
|
|
|
|
}).then(res=>{
|
|
_this.getDetail(_this.baseData.PUBLICITY_ID)
|
|
_this.shouldReLoadingList(true);
|
|
})
|
|
},
|
|
upComment(){
|
|
let _this = this
|
|
if(_this.commentContent.trim().length==0){
|
|
return
|
|
}
|
|
_this.$request.$post("addPublicityComment",{
|
|
|
|
publicityId: _this.baseData.PUBLICITY_ID,
|
|
content: _this.commentContent.trim()
|
|
}).then(res=>{
|
|
if(res.ResultCode==100) {
|
|
_this.commentContent = ''
|
|
_this.hidePopup()
|
|
_this.getDetail(_this.baseData.PUBLICITY_ID)
|
|
_this.shouldReLoadingList(true);
|
|
}
|
|
})
|
|
},
|
|
rememberReader(fileName){
|
|
let _this = this
|
|
let data = {}
|
|
|
|
_this.$request.$post("InsertPublicityReading",{
|
|
fileName: fileName||'',
|
|
readingType: 1000,
|
|
publicityId: _this.baseData.PUBLICITY_ID
|
|
})
|
|
}
|
|
},
|
|
onUnload() {
|
|
this.$util.addUserBehavior()
|
|
},
|
|
onLoad(option) {
|
|
uni.showLoading({
|
|
title:'正在加载'
|
|
})
|
|
this.getDetail(option.PUBLICITY_ID)
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import url("../../common/css/tenderingDetail.css");
|
|
.page-view {
|
|
height: 100%;
|
|
background-color: #fff;
|
|
}
|
|
.base-info {
|
|
padding-bottom: 140rpx;
|
|
}
|
|
.fs12 {
|
|
padding-left: 8rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
.content-title {
|
|
font-weight: bold;
|
|
line-height: 1.5;
|
|
}
|
|
.ml30 {
|
|
margin-left: 24rpx;
|
|
}
|
|
.content-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #A8A8A8;
|
|
|
|
padding: 0 36rpx;
|
|
}
|
|
.content-top span{font-size: 24rpx; }
|
|
.serverpart-name {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1.7;
|
|
color: #626262;
|
|
background-color: #F7F7F7;
|
|
border-radius: 4rpx;
|
|
justify-content: center;
|
|
padding-right: 16rpx;
|
|
|
|
}
|
|
.severpart-ico {
|
|
background: url('../../static/images/publicity/dingwei.png') no-repeat center right;
|
|
background-size: contain;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.publicity-content {
|
|
padding: 16rpx 36rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.mt30{
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.strong-text{
|
|
display: inline-block;
|
|
font-size: 26rpx;
|
|
font-weight: bolder;
|
|
}
|
|
.count {
|
|
display: inline-block;
|
|
font-size: 24rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
.img-Box {
|
|
margin-left: 0;
|
|
/* padding-top: 24rpx; */
|
|
font-size: 22rpx;
|
|
width: 100%;
|
|
}
|
|
.uni-comment-top .comment-name-text {
|
|
color: #E49641;
|
|
}
|
|
.uni-comment-content{
|
|
word-break: break-all;
|
|
font-size: 26rpx;
|
|
}
|
|
.uni-comment-face image {
|
|
height: 100%;
|
|
}
|
|
.uni-comment-date .date-text{
|
|
color: #B1B3B8;
|
|
}
|
|
.support-box:before{
|
|
content: '';
|
|
border-width: 0 16rpx 16rpx 16rpx;
|
|
border-style: solid;
|
|
border-color: transparent transparent #F1F1F4;
|
|
position: absolute;
|
|
top: -16rpx;
|
|
left: 16rpx;
|
|
}
|
|
.support-box {
|
|
background-color: #F1F1F4;
|
|
color: #586A8F;
|
|
font-size: 26rpx;
|
|
padding: 12rpx;
|
|
position: relative;
|
|
border-radius: 4rpx;
|
|
margin-top: 30rpx;
|
|
align-items: center;
|
|
}
|
|
.support-names {
|
|
margin-left: 16rpx;
|
|
}
|
|
.rate-box{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 110rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-top:1rpx solid #e1e1e1;
|
|
justify-content: space-evenly;
|
|
/* padding: 0 30rpx; */
|
|
}
|
|
.rate-gray {
|
|
width: 460rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
color: #A3A6AC;
|
|
background-color: #F7F8FB;
|
|
border-radius: 35rpx;
|
|
padding-left: 24rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
.rate-gray:before {
|
|
content: '';
|
|
width: 31rpx;
|
|
height: 30rpx;
|
|
background: url('../../static/images/publicity/tsjy_yj.png') no-repeat center;
|
|
background-size: contain;
|
|
display: inline-block;
|
|
margin-right: 24rpx;
|
|
}
|
|
.img-zan {
|
|
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-comment {
|
|
background: url('../../static/images/publicity/comment.png') no-repeat center right;
|
|
background-size: contain;
|
|
}
|
|
.rate-ico{
|
|
position: relative;
|
|
align-items: center;
|
|
}
|
|
/* span.ico-t-count {
|
|
|
|
font-style: normal;
|
|
color: #fff;
|
|
border-radius: 18px;
|
|
min-width: 8px;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0rpx 8rpx;
|
|
font-size: 20rpx;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
background-color: #ed4d3e;
|
|
position: absolute;
|
|
right: -28rpx;
|
|
top: -12rpx;
|
|
} */
|
|
.pop-body {
|
|
height: 220rpx;
|
|
padding: 32rpx 24rpx;
|
|
display: flex;
|
|
/* align-items: flex-end; */
|
|
justify-content: space-between;
|
|
}
|
|
.comment-textarea {
|
|
background-color: #F7F8FB;
|
|
font-size: 26rpx;
|
|
border-radius: 6rpx;
|
|
padding: 16rpx;
|
|
min-height: 148rpx;
|
|
text-align: left;
|
|
width: 520rpx;
|
|
}
|
|
.btn {
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
background-color: #C4D9F5;
|
|
border-radius: 30rpx;
|
|
margin-top: 90rpx;
|
|
}
|
|
.btn:active {
|
|
background-color: #a7c3e8;
|
|
}
|
|
</style>
|