宣传资讯
This commit is contained in:
shijingjing
@@ -1,57 +1,361 @@
|
||||
<template>
|
||||
<div class="AppInfotainment">
|
||||
<div>
|
||||
<div class="title">点击进入栏目</div>
|
||||
<div class="project">
|
||||
<span @click="toProject">通知公告</span>
|
||||
<div class="header">
|
||||
<div class="header-tab">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/live/dh.png" alt="" class="more-icon" @click="toSelect()">
|
||||
<u-tabs :list="tabList" :current="currIndex" @change="changeTab" style="width:650rpx" :font-size="26"></u-tabs>
|
||||
<!-- <div v-for="(item, index) in tabList" :key="index" @click="changeTab(index)" v-if="index < 5" :class="currIndex == index ? 'tab-item active-item' : 'tab-item'">{{item}}<span class="active-line" v-if="currIndex == index"></span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <AiEmpty description="暂无数据" class="emptyWrap" v-else /> -->
|
||||
<div class="news-list">
|
||||
<div class="item" hover-class="bg-hover" v-for="(item, index) in newsList" :key="index" @click="toDetail(item)">
|
||||
<div class="item-wrapper solid" :style="{display: type === '1' ? 'block' : 'flex'}">
|
||||
<div class="item-left flex1">
|
||||
<h2 :style="{marginBottom: item.type === '1' ? '16rpx' : '30rpx'}" v-if="item.type != '1'">{{ item.title }}</h2>
|
||||
<div class="item-video" v-if="item.type === '1'">
|
||||
<p class="item-title">{{item.title}}</p>
|
||||
<image class="play-btn" src="https://cdn.cunwuyun.cn/dvcp/pay-btn.png" />
|
||||
<div class="mask"></div>
|
||||
<image class="cover" :src="item.coverFile" mode="aspectFill" />
|
||||
</div>
|
||||
<div class="item-left__bottom item-active" :class="[item.photo ? 'item-active' : '']">
|
||||
<span class="top-text" v-if="item.top == 1">置顶</span>
|
||||
<span>{{tabList[item.detailType].name || ''}}</span>
|
||||
<span>{{ item.createTime ? item.createTime.split(' ')[0] : '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<image v-if="item.type === '0'" :src="item.coverFile" mode="aspectFill" />
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!newsList.length && isShowEmpty"/>
|
||||
<div class="noMore" v-if="isMore && current !== 0">没有更多了噢！</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppInfotainment',
|
||||
appName: '宣传资讯',
|
||||
data() {
|
||||
return {
|
||||
export default {
|
||||
name: 'AppInfotainment',
|
||||
appName: '宣传资讯',
|
||||
data () {
|
||||
return {
|
||||
currIndex: 0,
|
||||
title: '',
|
||||
// isLoading: false,
|
||||
newsList: [],
|
||||
isShowEmpty: false,
|
||||
isMore: false,
|
||||
current: 0,
|
||||
areaId: '',
|
||||
tabList: [{name: '全部'}, {name: '通知公告'}, {name: '工作动态'},
|
||||
{name: '惠民政策'}, {name: '中央精神'},{name: '旅游故事'},{name: '特色农产品'}]
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (params) {
|
||||
// this.areaId = params.areaId
|
||||
// uni.setStorageSync('newTypeIndex', '')
|
||||
// this.$loading()
|
||||
// this.getNewsList()
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: params.title || '乡村资讯', //页面标题
|
||||
// })
|
||||
},
|
||||
onShow() {
|
||||
// if(uni.getStorageSync('newTypeIndex')) {
|
||||
// this.currIndex = uni.getStorageSync('newTypeIndex')
|
||||
// this.getListInit()
|
||||
// }
|
||||
},
|
||||
|
||||
methods: {
|
||||
toSelect() {
|
||||
// this.$linkTo(`./select?index=${this.currIndex}`)
|
||||
uni.navigateTo({url: './select'})
|
||||
},
|
||||
changeTab(index) {
|
||||
this.currIndex = index
|
||||
this.getListInit()
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
this.isMore = false
|
||||
this.current = 0
|
||||
this.$loading()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getNewsList(this.areaId)
|
||||
})
|
||||
},
|
||||
|
||||
getListInit() {
|
||||
this.isMore = false
|
||||
this.current = 0
|
||||
this.newsList = []
|
||||
this.$loading()
|
||||
this.getNewsList()
|
||||
},
|
||||
getNewsList() {
|
||||
if (this.isMore || this.isLoading) return
|
||||
var type = this.currIndex
|
||||
if(this.currIndex == 0) {
|
||||
type = ''
|
||||
}
|
||||
this.isLoading = true
|
||||
this.$instance.post(`/app/appnewscenterinfo/listForWxNew?current=${this.current + 1}&type=${type}&size=10&title=${this.title}&areaId=${this.areaId}`, null, {
|
||||
withoutToken: 1
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.isShowEmpty = true
|
||||
this.$hideLoading()
|
||||
|
||||
if (this.current === 0) {
|
||||
this.newsList = []
|
||||
}
|
||||
if (!res.data.records.length) {
|
||||
this.isMore = true
|
||||
this.isLoading = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const data = res.data.records
|
||||
this.newsList.push(...data)
|
||||
this.current = this.current + 1
|
||||
this.isLoading = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
} else {
|
||||
this.$hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$hideLoading()
|
||||
this.isShowEmpty = true
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
toDetail(item) {
|
||||
if(item.detailType == 6 || item.detailType == 5) { //特色农产品 旅游故事
|
||||
this.$linkTo(`/subPages/live/products?id=${item.id}&detailType=${item.detailType}`)
|
||||
}else {
|
||||
this.$linkTo(`/subPages/live/newsDetail?id=${item.id}&areaId=${this.areaId}&type=${this.currIndex}`)
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
onReachBottom () {
|
||||
this.getNewsList(this.areaId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toProject() {
|
||||
uni.navigateTo({url: './projectList'})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
document.title = '政策动态'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-page-body {
|
||||
background: pink !important;
|
||||
}
|
||||
.AppInfotainment {
|
||||
.title {
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
color: #B9B9B9;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.project {
|
||||
padding: 10px 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
padding: 5px 20px;
|
||||
border: 1px solid #CBCBCB;
|
||||
border-radius: 24px;
|
||||
margin-right: 20px;
|
||||
.header-tab{
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding: 0 100rpx 0 0;
|
||||
.more-icon{
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 38rpx;
|
||||
right: 32rpx;
|
||||
top: 20rpx;
|
||||
}
|
||||
.tab-item{
|
||||
color: #666;
|
||||
}
|
||||
.active-item{
|
||||
color: #3376FD;
|
||||
}
|
||||
.active-line{
|
||||
background-color: #3376FD;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.news-list{
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.news {
|
||||
min-height: 100vh;
|
||||
padding-top: 96rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.item-video {
|
||||
position: relative;
|
||||
height: 388rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 11;
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 121;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.item-title{
|
||||
width: 100%;
|
||||
padding: 0 30rpx 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
line-height: 40rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
word-break: break-all;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cover {
|
||||
display: block;
|
||||
width: 100%!important;
|
||||
height: 388rpx!important;
|
||||
margin-left: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.noMore {
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.news {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10000;
|
||||
width: 100%;
|
||||
padding: 8rpx 0;
|
||||
background: #fff;
|
||||
|
||||
.header-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 690rpx;
|
||||
height: 60rpx;
|
||||
margin: 0 auto 8rpx;
|
||||
padding: 0 32rpx;
|
||||
background: #0D6DDC;
|
||||
border-radius: 30rpx;
|
||||
|
||||
image {
|
||||
flex-shrink: 1;
|
||||
width: 32rpx;
|
||||
height: 32px;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0 30rpx;
|
||||
|
||||
&:first-child {
|
||||
.item-wrapper {
|
||||
padding-top: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
padding: 30rpx 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
flex: 1;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.item-left__bottom {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
margin-right: 10rpx;
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.top-text{
|
||||
font-size: 22rpx;
|
||||
color: #EF4645;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
flex-shrink: 0;
|
||||
width: 224rpx;
|
||||
height: 140rpx;
|
||||
// margin-left: 46rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.no-more {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
|
||||
image {
|
||||
width: 400rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<h2 class="title">加强检疫,精准防控！广州举办疫情防 控新</h2>
|
||||
<div>通知公告 2021-06-23</div>
|
||||
<u-parse :html="content" />
|
||||
<div class="accessory">
|
||||
<p>附件</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'detail',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 下载附件
|
||||
// previewFile(file) {
|
||||
// let fileList = [{
|
||||
// index: 0,
|
||||
// url: file.accessUrl
|
||||
// }]
|
||||
// if(file.postfix == ".png" || file.postfix == "jpg") {
|
||||
// uni.previewImage({
|
||||
// urls: fileList.map(v => v.url),
|
||||
// current: file.accessUrl
|
||||
// })
|
||||
// } else {
|
||||
// wx.downloadFile({
|
||||
// url: file.accessUrl,
|
||||
// success: function (res) {
|
||||
// const filePath = res.tempFilePath
|
||||
// wx.openDocument({
|
||||
// filePath: filePath,
|
||||
// success: function (res) {
|
||||
// console.log('打开文档成功')
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
},
|
||||
onShow() {
|
||||
document.title = '详情'
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
146
src/apps/AppInfotainment/liveList.vue
Normal file
146
src/apps/AppInfotainment/liveList.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="item-list">
|
||||
<div class="live-item" v-for="(op,i) in list" :key="i">
|
||||
<video :src="op.videoFile.url" :id="`video${i+1}`">
|
||||
<cover-view class="live-item__wrapper" v-show="currIndex != i" @ended="ended(`video${i+1}`)">
|
||||
<cover-view class="live-item__mask"></cover-view>
|
||||
<cover-image class="live-item__banner" :src="op.coverFile.url"/>
|
||||
<cover-image class="play-btn" hover-class="text-hover" @click="play(`video${i+1}`, i)"
|
||||
src="https://cdn.cunwuyun.cn/img/bf@2x.png"/>
|
||||
<cover-view class="live-item__text">{{ op.title }}</cover-view>
|
||||
</cover-view>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoContext: null,
|
||||
currIndex: -1,
|
||||
videoId: '',
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onLoad(params) {
|
||||
this.getList(params?.areaId)
|
||||
},
|
||||
methods: {
|
||||
getList(areaId) {
|
||||
this.$instance.post(`/app/appnewscenterinfo/homepage?areaId=${areaId}`, null, {
|
||||
withoutToken: true
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.list = res.data?.videoList
|
||||
}
|
||||
})
|
||||
},
|
||||
play(videoId, index) {
|
||||
if (this.videoContext) {
|
||||
this.videoContext.stop()
|
||||
}
|
||||
|
||||
this.currIndex = index
|
||||
this.videoContext = wx.createVideoContext(videoId)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.videoContext.play()
|
||||
})
|
||||
},
|
||||
ended(id) {
|
||||
let videoContext = uni.createVideoContext(id, this);
|
||||
videoContext.exitFullScreen();
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.item-list {
|
||||
min-height: 100%;
|
||||
|
||||
.live-item {
|
||||
position: relative;
|
||||
height: 396px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 396px;
|
||||
}
|
||||
|
||||
.live-item__wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 396px;
|
||||
|
||||
.live-item__mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.live-item__top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
width: 128px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
padding-left: 44px;
|
||||
box-sizing: border-box;
|
||||
background: url(https://cdn.cunwuyun.cn/img/jb@2x.png) no-repeat;
|
||||
background-size: 128px 56px;
|
||||
}
|
||||
|
||||
.live-item__text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
padding: 0 40px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.live-item__top {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.live-item__banner {
|
||||
width: 100%;
|
||||
height: 396px;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 11;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
697
src/apps/AppInfotainment/newsDetail.vue
Normal file
697
src/apps/AppInfotainment/newsDetail.vue
Normal file
@@ -0,0 +1,697 @@
|
||||
<template>
|
||||
<div class="news-detail" v-if="pageShow">
|
||||
<div class="video" v-if="info.videoFile">
|
||||
<video :src="info.videoFile.url" :poster="info.coverFile.url"></video>
|
||||
</div>
|
||||
<div class="detail-top" :class="[info.videoFile ? 'detail-top__active' : '']">
|
||||
<h2>{{ info.title }}</h2>
|
||||
<div class="detail-info">
|
||||
<div class="left">{{ info.areaName }} {{ info.createTime ? info.createTime.split(' ')[0] : '' }} </div>
|
||||
<div class="right">
|
||||
<div class="right-item">
|
||||
<i class="iconfont">{{ info.videoFile ? '' : ''}}</i>
|
||||
<span>{{ info.viewCount }}</span>
|
||||
</div>
|
||||
<div class="right-item">
|
||||
<i class="iconfont" :style="{color: info.nowUserStatus === '0' ? '#C41C19' : '#666'}"></i>
|
||||
<span :style="{color: info.nowUserStatus === '0' ? '#C41C19' : '#666'}">{{ info.upCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" v-if="!info.videoFile">
|
||||
<!-- <div v-html="info.content" class="articalContent"></div> -->
|
||||
<!-- <image :src="info.coverFile.url" mode="widthFix" /> -->
|
||||
<!-- <AiWxparse :imageProp="imageProp" className="articalContent" :content="info.content"/> -->
|
||||
<!-- <u-parse className="articalContent" :html="info.content"/> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-comments">
|
||||
<h2>全部评论({{ commentsTotal }})</h2>
|
||||
<div class="comments-list">
|
||||
<div class="item" v-for="(item, index) in commentList" :key="index">
|
||||
<image :src="item.avatar" />
|
||||
<div class="item-right">
|
||||
<div class="item-right__top">
|
||||
<h2>{{ item.name || '-' }}</h2>
|
||||
<div class="item-right__top--right" @click="replySuport(item.id, index)">
|
||||
<i class="iconfont" :style="{color: item.status === '0' ? '#C41C19' : '#666'}"></i>
|
||||
<span :style="{color: item.status === '0' ? '#C41C19' : '#666'}">{{ item.supportedQuantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-right__content">{{ item.content }}</div>
|
||||
<div class="item-right__info">
|
||||
<span>{{ item.name }} {{ item.commentTime.substring(0, 10)}} </span>
|
||||
<i @click="reply(item.id, item.name)">回复TA</i>
|
||||
</div>
|
||||
<div class="item-replay" v-if="item.secondComments.length">
|
||||
<div class="item-replay__item" v-for="(reply, i) in item.secondComments" :key="i" v-if="i < 2 || item.isShow === '1'">
|
||||
<h3>{{ reply.name }}: </h3>
|
||||
<span>{{ reply.content }}</span>
|
||||
</div>
|
||||
<div class="item-replay__more" v-if="item.secondComments.length > 2 && item.isShow !== '1'" @click="showMore(index)">
|
||||
查看全部{{ item.secondComments.length }}条回复 >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-more" v-if="!commentList.length">
|
||||
<image src="https://cdn.cunwuyun.cn/img/Empty.png" />
|
||||
<p>暂无评论</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiTransSpeech :src="info.speech"></AiTransSpeech>
|
||||
<div class="footer-bar">
|
||||
<input
|
||||
:cursor-spacing="10"
|
||||
:placeholder="focus ? '' : '我来说两句…'"
|
||||
@confirm="onConfirm"
|
||||
confirm-type="send"
|
||||
:focus="focus"
|
||||
:disabled="true"
|
||||
@click="showComments"
|
||||
@blur="focus = false, placeholder = '', commentId = ''">
|
||||
<div class="footer-bar__right flex1">
|
||||
<div class="count flex1" v-if="info.type === '0'">
|
||||
<img src="https://cdn.cunwuyun.cn/components/comment/pinglun.png" alt="" class="icon-img">
|
||||
<span>{{ commentsTotal }}</span>
|
||||
</div>
|
||||
<div class="flex1" v-if="info.type === '0'">
|
||||
<img src="https://cdn.cunwuyun.cn/components/comment/tabdz.png" alt="" class="icon-img" @click="suport">
|
||||
</div>
|
||||
<button class="flex1" v-if="info.type === '0'" open-type="share" style="text-align: center">
|
||||
<img src="https://cdn.cunwuyun.cn/components/comment/tabfx.png" alt="" class="icon-img">
|
||||
</button>
|
||||
<div class="video-item" v-if="info.type === '1'" @click="suport" :style="{color: info.nowUserStatus === '0' ? '#C41C19' : '#666'}">
|
||||
<img src="https://cdn.cunwuyun.cn/components/comment/tabdz.png" alt="" class="icon-img">
|
||||
<span>赞</span>
|
||||
</div>
|
||||
<button open-type="share" class="video-item" v-if="info.type === '1'">
|
||||
<img src="https://cdn.cunwuyun.cn/components/comment/tabfx.png" alt="" class="icon-img">
|
||||
<span>分享</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments" v-if="isShowComment" mode="bottom" @close="focus = false" :closeable="false">
|
||||
<div class="mask" @click="isShowComment = false"></div>
|
||||
<div class="comments-wrapper" :style="{bottom: bottom + 'px'}">
|
||||
<div class="textarea">
|
||||
<textarea
|
||||
placeholder="我来说两句…"
|
||||
:focus="focus"
|
||||
:maxlength="1000"
|
||||
fixed
|
||||
@keyboardheightchange="keyboardheightchange"
|
||||
:adjust-position="false"
|
||||
:show-confirm-bar="false"
|
||||
v-model="commnet">
|
||||
</textarea>
|
||||
<div class="textarea-bottom">
|
||||
<span></span>
|
||||
<div>字数{{ commnet.length }}/1000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-bottom">
|
||||
<span @click="commnet = ''">清空内容</span>
|
||||
<div @click="onConfirm">发表</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-login ref="login"></ai-login>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
// import AiLogin from '@/components/AiLogin/AiLogin'
|
||||
export default {
|
||||
name: 'newsDetail',
|
||||
computed: {
|
||||
...mapState(['token'])
|
||||
},
|
||||
components: {
|
||||
// AiLogin
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isShowComment: false,
|
||||
info: {},
|
||||
imageProp: {
|
||||
mode: 'widthFix',
|
||||
padding: 0,
|
||||
lazyLoad: false,
|
||||
domain: ''
|
||||
},
|
||||
bottom: 0,
|
||||
placeholder: '',
|
||||
pageShow: false,
|
||||
commnet: '',
|
||||
commentList: [],
|
||||
commnetId: '',
|
||||
areaId: '',
|
||||
focus: false,
|
||||
current: 0,
|
||||
isMore: false,
|
||||
commentsTotal: 0
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (params) {
|
||||
this.$loading()
|
||||
this.id = params.id
|
||||
this.areaId = params.areaId
|
||||
this.type = params.type
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getDetail()
|
||||
this.getComments()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
login() {
|
||||
this.$refs.login.show()
|
||||
},
|
||||
|
||||
keyboardheightchange (e) {
|
||||
this.bottom = e.detail.height
|
||||
},
|
||||
|
||||
showComments () {
|
||||
if(!this.token) {
|
||||
this.login()
|
||||
return false
|
||||
}
|
||||
this.commnetId = ''
|
||||
this.isShowComment = true
|
||||
|
||||
setTimeout(() => {
|
||||
this.focus = true
|
||||
}, 500)
|
||||
},
|
||||
|
||||
reply (id, name) {
|
||||
if(!this.token) {
|
||||
this.login()
|
||||
return false
|
||||
}
|
||||
this.isShowComment = true
|
||||
this.commentId = id
|
||||
|
||||
setTimeout(() => {
|
||||
this.focus = true
|
||||
}, 800)
|
||||
},
|
||||
|
||||
showMore (index) {
|
||||
this.$set(this.commentList[index], 'isShow', '1')
|
||||
},
|
||||
|
||||
suport() {
|
||||
this.$loading()
|
||||
|
||||
this.$instance.post('/app/appnewscenterinfo/suportFree?id=' + this.id).then(res => {
|
||||
this.$hideLoading()
|
||||
if (res.code === 0) {
|
||||
this.$set(this.info, 'upCount', this.info.upCount + 1)
|
||||
this.$set(this.info, 'nowUserStatus', '0')
|
||||
this.$toast('点赞成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
replySuport (id, index) {
|
||||
this.$loading()
|
||||
this.$instance.post('/app/appnewscentercommenthot/suportFree', {
|
||||
commentId: id,
|
||||
status: this.commentList[index].status === '0' ? '1' : '0'
|
||||
}).then(res => {
|
||||
this.$hideLoading()
|
||||
if (res.code === 0) {
|
||||
this.$set(this.commentList[index], 'supportedQuantity', this.commentList[index].supportedQuantity + 1)
|
||||
this.$set(this.commentList[index], 'status', '0')
|
||||
this.$toast('点赞成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getDetail() {
|
||||
var url = '/app/appnewscenterinfo/queryDetailByIdForWx?id=' + this.id
|
||||
if(this.type == 5) { //旅游故事
|
||||
url = '/app/appcountrysidetourism/queryDetailByIdForWX?id=' + this.id
|
||||
}
|
||||
this.$instance.post(url).then(res => {
|
||||
this.$hideLoading()
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.$hideLoading()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
if (!this.commnet) {
|
||||
return this.$toast('评论不能为空')
|
||||
}
|
||||
|
||||
this.$loading()
|
||||
this.$instance.post('/app/appnewscentercomment/addOrUpdateForWX', {
|
||||
circleId: this.id,
|
||||
content: this.commnet,
|
||||
type: this.commentId ? 2 : 1,
|
||||
commentId: this.commentId,
|
||||
name: uni.getStorageSync('userInfo').nickName,
|
||||
areaId: this.areaId
|
||||
}).then(res => {
|
||||
this.$hideLoading()
|
||||
if (res.code === 0) {
|
||||
this.commnet = ''
|
||||
this.$toast(this.commentId ? '回复成功' : '评论成功')
|
||||
this.current = 0
|
||||
this.isMore = false
|
||||
this.getComments()
|
||||
this.commentId = ''
|
||||
this.placeholder = ''
|
||||
} else {
|
||||
this.commentId = ''
|
||||
this.placeholder = ''
|
||||
this.$toast(res.msg)
|
||||
}
|
||||
this.isShowComment = false
|
||||
}).catch(() => {
|
||||
this.commentId = ''
|
||||
this.placeholder = ''
|
||||
this.$hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
getComments() {
|
||||
this.$instance.post('/app/appnewscentercomment/listForWX?size=5&circleId=' + this.id + '¤t=' + (this.current + 1)).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.commentsTotal = res.data.total
|
||||
|
||||
if (this.current === 0) {
|
||||
this.commentList = []
|
||||
}
|
||||
if (!res.data.records.length) {
|
||||
this.isMore = true
|
||||
this.isLoading = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const data = res.data.records.map(item => {
|
||||
item.isShow = '0'
|
||||
|
||||
return item
|
||||
})
|
||||
this.commentList.push(...data)
|
||||
this.current = this.current + 1
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onReachBottom () {
|
||||
this.getComments()
|
||||
},
|
||||
|
||||
onShareAppMessage () {
|
||||
return {
|
||||
title: this.info.title,
|
||||
imageUrl: this.info.coverFile.url,
|
||||
path: `/subPages/live/newsDetail?id=${this.id}&areaId=${this.$areaId}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.news-detail {
|
||||
padding-bottom: 120rpx;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.comments {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1111;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.comments-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.textarea {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 16rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8px;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 94rpx;
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.textarea-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 16rpx;
|
||||
|
||||
span {
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 144rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
background: #135AB8;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-img{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.video-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
|
||||
i {
|
||||
padding-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-top__active {
|
||||
padding-top: 30rpx;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
height: 396rpx;
|
||||
|
||||
video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 396rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-more {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
|
||||
image {
|
||||
width: 400rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-top {
|
||||
padding: 10rpx 30rpx 26rpx;
|
||||
background: #fff;
|
||||
|
||||
& > h2 {
|
||||
margin-bottom: 40rpx;
|
||||
color: #333333;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.detail-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 10rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
margin-top: 46rpx;
|
||||
|
||||
image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-comments {
|
||||
margin-top: 20rpx;
|
||||
padding: 0 30rpx 20rpx;
|
||||
background: #fff;
|
||||
|
||||
& > h2 {
|
||||
padding-top: 16rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.comments-list {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-top: 35px;
|
||||
|
||||
image {
|
||||
flex-shrink: 1;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
flex: 1;
|
||||
|
||||
.item-right__top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 50rpx;
|
||||
|
||||
.item-right__top--right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20rpx;
|
||||
|
||||
i {
|
||||
margin-right: 10rpx;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-right__content {
|
||||
line-height: 46rpx;
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.item-right__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10rpx 0;
|
||||
|
||||
span {
|
||||
margin-right: 20rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-replay {
|
||||
padding: 30rpx;
|
||||
background: #F0F0F0;
|
||||
|
||||
.item-replay__item {
|
||||
display: flex;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
h3 {
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-replay__more {
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-top: 1rpx solid rgba(0, 0, 0, 0.2);
|
||||
background: #fff;
|
||||
|
||||
input {
|
||||
width: 460rpx;
|
||||
height: 58rpx;
|
||||
background: #F0F0F0;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-bar__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.count {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
right: -11rpx;
|
||||
z-index: 21;
|
||||
padding: 3rpx 7rpx;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
background: #C41C19;
|
||||
}
|
||||
}
|
||||
|
||||
.count, & > i {
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0!important;
|
||||
font-size: 26rpx!important;
|
||||
color: #666!important;
|
||||
line-height: 1!important;
|
||||
background: transparent!important;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
276
src/apps/AppInfotainment/newsList.vue
Normal file
276
src/apps/AppInfotainment/newsList.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div class="news">
|
||||
<div class="fixed-top">
|
||||
<div class="header-search">
|
||||
<div class="search-input-content">
|
||||
<img src="https://cdn.cunwuyun.cn/img/search-blue.svg" alt="" class="search-icon">
|
||||
<input type="text" placeholder="请输入标题" class="search-input" placeholder-style="color:#E2E8F1;" v-model="title" @confirm="onConfirm" confirm-type="search" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-tab">
|
||||
<div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">{{item}}<span class="active-line" v-if="currIndex == index"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-list">
|
||||
<div class="item" hover-class="bg-hover" v-for="(item, index) in newsList" :key="index" @click="toDetail(item.id)">
|
||||
<div class="item-wrapper solid" :style="{display: type === '1' ? 'block' : 'flex'}">
|
||||
<div class="item-left flex1">
|
||||
<h2 :style="{marginBottom: item.type === '1' ? '16rpx' : '30rpx'}">{{ item.title }}</h2>
|
||||
<div class="item-video" v-if="item.type === '1'">
|
||||
<image class="play-btn" src="https://cdn.cunwuyun.cn/img/bf@2x.png" />
|
||||
<div class="mask"></div>
|
||||
<image class="cover" :src="item.coverFile.url" mode="aspectFill" />
|
||||
</div>
|
||||
<div class="item-left__bottom item-active" :class="[item.photo ? 'item-active' : '']">
|
||||
<span class="top-text">置顶</span>
|
||||
<span>浏览{{ item.viewCount }}</span>
|
||||
<span>点赞{{ item.upCount }}</span>
|
||||
<span>{{ item.createTime ? item.createTime.split(' ')[0] : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<image v-if="item.type === '0'" :src="item.coverFile.url" mode="aspectFill" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="noMore" v-if="isMore && current !== 0">没有更多了噢！</div>
|
||||
<div class="no-more" v-if="!newsList.length && isShowEmpty">
|
||||
<image src="https://cdn.cunwuyun.cn/img/Empty.png" />
|
||||
<p>暂无相关信息</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'newsList',
|
||||
|
||||
data () {
|
||||
return {
|
||||
currIndex: 0,
|
||||
title: '',
|
||||
isLoading: false,
|
||||
newsList: [],
|
||||
isShowEmpty: false,
|
||||
isMore: false,
|
||||
current: 0,
|
||||
areaId: '',
|
||||
tabList: ['全部', '视频', '文章']
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (params) {
|
||||
this.areaId = params.areaId
|
||||
this.$loading()
|
||||
this.getNewsList(params.areaId)
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.currIndex = index
|
||||
this.isMore = false
|
||||
this.current = 0
|
||||
this.$loading()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getNewsList(this.areaId)
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
this.isMore = false
|
||||
this.current = 0
|
||||
this.$loading()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getNewsList(this.areaId)
|
||||
})
|
||||
},
|
||||
|
||||
getNewsList(areaId) {
|
||||
if (this.isMore || this.isLoading) return
|
||||
let type = ''
|
||||
|
||||
if (this.currIndex === 1) {
|
||||
type = 1
|
||||
} else if (this.currIndex === 2) {
|
||||
type = 0
|
||||
}
|
||||
|
||||
this.isLoading = true
|
||||
this.$instance.post(`/app/appnewscenterinfo/listForWx?current=${this.current + 1}&type=${type}&size=10&areaId=&title=${this.title}`, null, {
|
||||
withoutToken: 1
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.isShowEmpty = true
|
||||
this.$hideLoading()
|
||||
|
||||
if (this.current === 0) {
|
||||
this.newsList = []
|
||||
}
|
||||
if (!res.data.records.length) {
|
||||
this.isMore = true
|
||||
this.isLoading = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const data = res.data.records
|
||||
this.newsList.push(...data)
|
||||
this.current = this.current + 1
|
||||
this.isLoading = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
} else {
|
||||
this.$hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$hideLoading()
|
||||
this.isShowEmpty = true
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
this.$linkTo(`/subPages/live/newsDetail?id=${id}&areaId=${this.areaId}`)
|
||||
}
|
||||
},
|
||||
|
||||
onReachBottom () {
|
||||
this.getNewsList(this.areaId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.news-list{
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
.news {
|
||||
min-height: 100vh;
|
||||
padding-top: 96rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.item-video {
|
||||
position: relative;
|
||||
height: 388rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 11;
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 121;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.cover {
|
||||
display: block;
|
||||
width: 100%!important;
|
||||
height: 388rpx!important;
|
||||
margin-left: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.noMore {
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.news {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0 30rpx;
|
||||
|
||||
&:first-child {
|
||||
.item-wrapper {
|
||||
padding-top: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
padding: 30rpx 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
flex: 1;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.item-left__bottom {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
margin-right: 10rpx;
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.top-text{
|
||||
font-size: 22rpx;
|
||||
color: #EF4645;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
flex-shrink: 0;
|
||||
width: 224rpx;
|
||||
height: 140rpx;
|
||||
margin-left: 46rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.no-more {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
|
||||
image {
|
||||
width: 400rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
287
src/apps/AppInfotainment/productList.vue
Normal file
287
src/apps/AppInfotainment/productList.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="news">
|
||||
<div class="news-list">
|
||||
<div class="item" hover-class="bg-hover" v-for="(item, index) in newsList" :key="index" @click="toDetail(item)">
|
||||
<div class="item-wrapper solid" :style="{display: type === '1' ? 'block' : 'flex'}">
|
||||
<div class="item-left flex1">
|
||||
<h2 :style="{marginBottom: item.type === '1' ? '16rpx' : '30rpx'}">{{ item.title }}</h2>
|
||||
<div class="item-video" v-if="item.type === '1'">
|
||||
<image class="play-btn" src="https://cdn.cunwuyun.cn/img/bf@2x.png" />
|
||||
<div class="mask"></div>
|
||||
<image class="cover" :src="item.coverFile" mode="aspectFill" />
|
||||
</div>
|
||||
<div class="item-left__bottom item-active" :class="[item.photo ? 'item-active' : '']">
|
||||
<span class="top-text" v-if="item.top == 1">置顶</span>
|
||||
<span>{{tabList[item.detailType].name || ''}}</span>
|
||||
<span>{{ item.createTime ? item.createTime.split(' ')[0] : '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<image v-if="item.type === '0'" :src="item.coverFile" mode="aspectFill" />
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!newsList.length && isShowEmpty"/>
|
||||
<div class="noMore" v-if="isMore && current !== 0">没有更多了噢！</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'productList',
|
||||
data () {
|
||||
return {
|
||||
currIndex: 0,
|
||||
title: '',
|
||||
isLoading: false,
|
||||
newsList: [],
|
||||
isShowEmpty: false,
|
||||
isMore: false,
|
||||
current: 0,
|
||||
areaId: '',
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (params) {
|
||||
this.areaId = params.areaId
|
||||
this.$loading()
|
||||
this.getNewsList()
|
||||
},
|
||||
onShow() {
|
||||
this.getListInit()
|
||||
},
|
||||
|
||||
methods: {
|
||||
toSelect() {
|
||||
this.$linkTo(`/subPages/live/select?index=6`)
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
this.isMore = false
|
||||
this.current = 0
|
||||
this.$loading()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getNewsList(this.areaId)
|
||||
})
|
||||
},
|
||||
|
||||
getListInit() {
|
||||
this.isMore = false
|
||||
this.current = 0
|
||||
this.newsList = []
|
||||
this.$loading()
|
||||
this.getNewsList()
|
||||
},
|
||||
getNewsList() {
|
||||
if (this.isMore || this.isLoading) return
|
||||
this.isLoading = true
|
||||
this.$instance.post(`/app/appnewscenterinfo/listForWxNew?current=${this.current + 1}&type=6&size=10&title=${this.title}&areaId=${this.areaId}`, null, {
|
||||
withoutToken: 1
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.isShowEmpty = true
|
||||
this.$hideLoading()
|
||||
|
||||
if (this.current === 0) {
|
||||
this.newsList = []
|
||||
}
|
||||
if (!res.data.records.length) {
|
||||
this.isMore = true
|
||||
this.isLoading = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const data = res.data.records
|
||||
this.newsList.push(...data)
|
||||
this.current = this.current + 1
|
||||
this.isLoading = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
} else {
|
||||
this.$hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$hideLoading()
|
||||
this.isShowEmpty = true
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$linkTo(`/subPages/live/products?id=${item.id}&detailType=${item.detailType}`)
|
||||
},
|
||||
},
|
||||
|
||||
onReachBottom () {
|
||||
this.getNewsList(this.areaId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.news-list{
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.news {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.item-video {
|
||||
position: relative;
|
||||
height: 388rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 11;
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 121;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.cover {
|
||||
display: block;
|
||||
width: 100%!important;
|
||||
height: 388rpx!important;
|
||||
margin-left: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.noMore {
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.news {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10000;
|
||||
width: 100%;
|
||||
padding: 8rpx 0;
|
||||
background: #fff;
|
||||
|
||||
.header-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 690rpx;
|
||||
height: 60rpx;
|
||||
margin: 0 auto 8rpx;
|
||||
padding: 0 32rpx;
|
||||
background: #0D6DDC;
|
||||
border-radius: 30rpx;
|
||||
|
||||
image {
|
||||
flex-shrink: 1;
|
||||
width: 32rpx;
|
||||
height: 32px;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0 30rpx;
|
||||
|
||||
&:first-child {
|
||||
.item-wrapper {
|
||||
padding-top: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
padding: 30rpx 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
flex: 1;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.item-left__bottom {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
margin-right: 10rpx;
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.top-text{
|
||||
font-size: 22rpx;
|
||||
color: #EF4645;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
flex-shrink: 0;
|
||||
width: 224rpx;
|
||||
height: 140rpx;
|
||||
margin-left: 46rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.no-more {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
|
||||
image {
|
||||
width: 400rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
src/apps/AppInfotainment/products.vue
Normal file
148
src/apps/AppInfotainment/products.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="swiper-content" v-if="list.length">
|
||||
<u-swiper :list="list" mode="number" height="720" bg-color="none"></u-swiper>
|
||||
</div>
|
||||
<div class="name-info">
|
||||
<h2>{{info.title}}</h2>
|
||||
<p v-if="detailType == 6">{{info.businessUnit}}</p>
|
||||
</div>
|
||||
<div class="products-info" v-if="detailType == 6">
|
||||
<div class="flex-info">
|
||||
<div class="label">联系人</div>
|
||||
<div class="value">{{info.contactPerson}}</div>
|
||||
</div>
|
||||
<div class="flex-info">
|
||||
<div class="label">电话</div>
|
||||
<div class="value">{{info.contactPhone}}
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/recruitWorkers/phone-icon.png" alt="" @click="callPhone()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-info">
|
||||
<div class="label">地址</div>
|
||||
<div class="value">{{info.address}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <p class="content" v-html="info.content"></p> -->
|
||||
<u-parse className="articalContent" :html="info.content" class="content"></u-parse>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page',
|
||||
data () {
|
||||
return {
|
||||
pageShow: false,
|
||||
info: {},
|
||||
id: '',
|
||||
list: [],
|
||||
detailType: 5, //5旅游故事 6特色农产品
|
||||
}
|
||||
},
|
||||
onLoad (option) {
|
||||
this.id = option.id
|
||||
this.detailType = option.detailType
|
||||
this.getDetail()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$instance.post('/app/appcountrysidetourism/queryDetailByIdForWX?id=' + this.id).then(res => {
|
||||
this.$hideLoading()
|
||||
if (res.code === 0) {
|
||||
res.data.photo = JSON.parse(res.data.photo)
|
||||
if(res.data.photo.length) {
|
||||
res.data.photo.map((item) => {
|
||||
this.list.push(item.url)
|
||||
})
|
||||
}
|
||||
this.info = res.data
|
||||
this.$hideLoading()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
callPhone() {
|
||||
wx.makePhoneCall({
|
||||
phoneNumber: this.info.contactPhone,
|
||||
})
|
||||
}
|
||||
},
|
||||
onShareAppMessage () {
|
||||
return {
|
||||
title: this.info.title,
|
||||
path: `/subPages/live/products?id=${this.id}&detailType=${this.detailType}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page{
|
||||
padding-bottom: 80rpx;
|
||||
background-color: #f3f6f9;
|
||||
.name-info{
|
||||
padding: 16rpx 32rpx 14rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 16rpx;
|
||||
h2{
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 50rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
p{
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
.products-info{
|
||||
background-color: #fff;
|
||||
margin-bottom: 16rpx;
|
||||
.flex-info{
|
||||
display: flex;
|
||||
line-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
.label{
|
||||
padding: 24rpx 0;
|
||||
width: 176rpx;
|
||||
padding-left: 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
}
|
||||
.value{
|
||||
padding: 24rpx 32rpx 24rpx 0;
|
||||
width: calc(100% - 176rpx);
|
||||
border-bottom: 2rpx solid #eee;
|
||||
box-sizing: border-box;
|
||||
word-break: break-all;
|
||||
img{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 32rpx;
|
||||
background-color: #fff;
|
||||
word-break: break-all;
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div class="projectList">
|
||||
<AiTopFixed>
|
||||
<scroll-view :scroll-x="true" style="width: 100%;background: #FFF;">
|
||||
<div class="tab-select">
|
||||
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{item.name}}<span></span></div>
|
||||
</div>
|
||||
</scroll-view>
|
||||
</AiTopFixed>
|
||||
<div class="List">
|
||||
<div class="item">
|
||||
<!-- <video class="banner-img" :src="item.videoUrl"></video> -->
|
||||
<div class="info">
|
||||
<div class="left">
|
||||
<h2>最新消息！我国正在研制鼻喷或 雾化的新型,最新消息！我国正在研制鼻喷或 雾化的新型,最新消息！我国正在研制鼻喷或 雾化的新型</h2>
|
||||
<p><span>通知公告</span> 2021-06-23</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<!-- <img src="" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'projectList',
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
tabs: [
|
||||
{id:'A1',name:'全部'},
|
||||
{id:'A2',name:'通知公告'},
|
||||
{id:'A3',name:'工作动态'},
|
||||
{id:'A4',name:'惠民政策'},
|
||||
{id:'A5',name:'中央政策'},
|
||||
{id:'A6',name:'政策动态'},
|
||||
{id:'A7',name:'新闻资讯'},
|
||||
{id:'A8',name:'军事新闻'},
|
||||
{id:'A9',name:'娱乐大事件'},],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// scroll(e) {
|
||||
// console.log(e);
|
||||
// },
|
||||
tabClick(index) {
|
||||
this.tabIndex = index;
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
onShow() {
|
||||
document.title = '新闻列表'
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.projectList {
|
||||
::v-deep .AiTopFixed .content {
|
||||
padding: 0 30px;
|
||||
}
|
||||
.tab-select {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
|
||||
.item{
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.active{
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
color: #3376FD;
|
||||
span{
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
background: #3376FD;
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 50%;
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.List {
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
.item {
|
||||
padding: 30px 0 20px 0;
|
||||
border-bottom: 1px solid #DDDDDD ;
|
||||
.info {
|
||||
display: flex;
|
||||
.left {
|
||||
width: 420px;
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-line-clamp:2;
|
||||
}
|
||||
p {
|
||||
margin-top: 30px;
|
||||
font-size: 22px;
|
||||
color: #999999;
|
||||
span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 224px;
|
||||
height: 140px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
src/apps/AppInfotainment/select.vue
Normal file
65
src/apps/AppInfotainment/select.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="title">点击进入栏目</div>
|
||||
<div class="tab-list">
|
||||
<div v-for="(item, index) in tabList" :key="index" :class="tabIndex == index ? 'tab-item active' : ' tab-item'" @click="tabClick(index)">{{item}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page',
|
||||
data () {
|
||||
return {
|
||||
tabList: ['全部', '通知公告', '工作动态', '惠民政策', '中央精神', '旅游故事', '特色农产品'],
|
||||
tabIndex: 0
|
||||
}
|
||||
},
|
||||
onLoad (option) {
|
||||
this.tabIndex = option.index
|
||||
},
|
||||
|
||||
methods: {
|
||||
tabClick(index) {
|
||||
this.tabIndex = index
|
||||
uni.setStorageSync('newTypeIndex', index)
|
||||
uni.navigateBack({delta: 1})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page{
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
.title{
|
||||
font-size: 26rpx;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #B9B9B9;
|
||||
line-height: 36rpx;
|
||||
padding: 32rpx 0 30rpx 40rpx;
|
||||
}
|
||||
.tab-list{
|
||||
padding: 0 0 0 30rpx;
|
||||
.tab-item{
|
||||
display: inline-block;
|
||||
width: 144rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid #CBCBCB;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
margin: 0 38rpx 32rpx 0;
|
||||
}
|
||||
.active{
|
||||
color: #3376FD;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user