新闻评论
This commit is contained in:
liuye
224
src/project/qujing/AppContent/AppContent.vue
Normal file
224
src/project/qujing/AppContent/AppContent.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="wrapper" :style="{ paddingTop: categorys.length ? '54px' : '10px' }" v-if="pageShow">
|
||||
<div class="tabs">
|
||||
<u-tabs
|
||||
:list="categorys && categorys.map(e=>({name:e.categoryName}))"
|
||||
font-size="36"
|
||||
bg-color="transparent"
|
||||
:bold="false"
|
||||
inactive-color="#ccddff"
|
||||
:is-scroll="true"
|
||||
:gutter="16"
|
||||
active-color="#fff"
|
||||
:current="index"
|
||||
@change="tabChange">
|
||||
</u-tabs>
|
||||
</div>
|
||||
<div class="list-wrap" v-if="categoryList && categoryList.length">
|
||||
<div class="list-card" hover-class="bg-hover" v-for="(category,index) in categoryList" :key="index"
|
||||
@click="$linkTo('./contentDetail?id='+category.id)">
|
||||
<div class="header">{{ category.title }}</div>
|
||||
<div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length == 1">
|
||||
<img class="img" :src="item.url" v-for="(item,index) in category.files" :key="index.id" alt="">
|
||||
</div>
|
||||
<div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length > 1">
|
||||
<img class="min-img" :src="item.url" v-for="(item,index) in category.files && category.files.slice(0,3)"
|
||||
:key="index.id" alt="">
|
||||
</div>
|
||||
<div class="content-wrap" v-if="category.contentType==1">
|
||||
<img class="img" :src="category.pictureUrl" alt="">
|
||||
<img class="play-icon" src="https://cdn.cunwuyun.cn/AppContent/play.png" alt="">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="tag">{{ category.categoryName || names }}</div>
|
||||
{{ category.createTime }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<em>{{ category.viewCount }}</em>
|
||||
人看过
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else></AiEmpty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "AppContent",
|
||||
appName: "内容管理",
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
names: "",
|
||||
categorys: [],
|
||||
categoryList: [],
|
||||
pageShow: false,
|
||||
search: {}
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.$loading()
|
||||
this.names = option.names;
|
||||
this.search.areaId = option.areaId || this.user.areaId || ""
|
||||
this.getName();
|
||||
if (option.names) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.names
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
active() {
|
||||
return {
|
||||
fontSize: "22px",
|
||||
color: "#fff",
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getName() {
|
||||
this.$instance.post("/app/appcontentmoduleinfo/listByName", null, {
|
||||
params: {names: this.names}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.categorys = res.data?.[0]?.categoryList || [];
|
||||
this.search.moduleId = res.data?.[0]?.id || "";
|
||||
this.search.categoryId = res.data?.[0]?.categoryList?.[0]?.id || "";
|
||||
this.getCategoryList();
|
||||
} else {
|
||||
this.$hideLoading()
|
||||
}
|
||||
})
|
||||
},
|
||||
tabChange(e) {
|
||||
this.index = e
|
||||
this.search.categoryId = this.categorys?.[e]?.id
|
||||
this.getCategoryList();
|
||||
},
|
||||
getCategoryList() {
|
||||
this.$instance.post("/app/appcontentinfo/list", null, {
|
||||
params: {...this.search, size: 10}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.categoryList = this.current > 1 ? [...this.categoryList, ...res.data.records] : res.data.records;
|
||||
}
|
||||
this.pageShow = true
|
||||
this.$hideLoading()
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current++;
|
||||
this.getCategoryList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
padding-top: 100px;
|
||||
|
||||
.list-wrap {
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
|
||||
.list-card {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.header {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 50px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 24px;
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.min-img {
|
||||
width: 204px;
|
||||
height: 204px;
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
|
||||
.tag {
|
||||
width: 144px;
|
||||
height: 48px;
|
||||
background: #EEEEEE;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: #4181FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
295
src/project/qujing/AppContent/contentDetail.vue
Normal file
295
src/project/qujing/AppContent/contentDetail.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<section class="contentDetail">
|
||||
<AiDetail :detail="detail" :props="props"/>
|
||||
<u-gap height="16"/>
|
||||
<AiComment v-if="detail.id&&detail.isComment==1" :bid="detail.id"/>
|
||||
<div class="btn_box">
|
||||
<div class="input_btn" @click="showSend = true">我来说两句...</div>
|
||||
<div class="comment" @click="showComment = true;getComment()">
|
||||
<img src="https://cdn.cunwuyun.cn/qujing/message.png" alt="">
|
||||
<div class="comm_num">
|
||||
<span>{{ commentList.length || 0}}</span><span v-show="commentList.length > 999">+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<u-popup v-model="showComment" mode="bottom" border-radius="32">
|
||||
<h4 class="message_num">共{{ commentList.length }}条评论</h4>
|
||||
<div v-if="commentList.length">
|
||||
<div class="comment_card" v-for="item in commentList" :key="item.id">
|
||||
<div class="avatar">
|
||||
<img :src="item.avatar" alt="" v-if="item.avatar">
|
||||
<img src="https://cdn.cunwuyun.cn/shandong10086/avatar.png" alt="" v-else>
|
||||
</div>
|
||||
<div class="comment_info">
|
||||
<div class="avatar_info">
|
||||
<div class="avatar_name">{{ item.name }}</div>
|
||||
<div class="avatar_time">{{ item.commentTime }}</div>
|
||||
</div>
|
||||
<div class="comm_content">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty :description="`暂无相关评论`" class="emptyWrap" v-else/>
|
||||
|
||||
<div class="comm_input_btn" @click="showSend = true,showComment= false">
|
||||
<div>我来说两句...</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
|
||||
<u-popup v-model="showSend" mode="bottom" border-radius="32">
|
||||
<div class="send_box">
|
||||
<div class="text">
|
||||
<textarea
|
||||
@blur="height = 0"
|
||||
placeholder-style="color: #999;font-size: 16px;"
|
||||
v-model="content"
|
||||
:cursor-spacing="40"
|
||||
placeholder="我来说两句..."
|
||||
maxlength="100"
|
||||
@keyboardheightchange="keyboard">
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="send_btn" @click="sendComment">发送</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "contentDetail",
|
||||
appName: "内容详情",
|
||||
data() {
|
||||
return {
|
||||
detail: {title: "内容详情"},
|
||||
props: {
|
||||
count: "viewCount"
|
||||
},
|
||||
id: "",
|
||||
|
||||
showComment: false,
|
||||
showSend: false,
|
||||
content: '',
|
||||
height: 0,
|
||||
data: {},
|
||||
commentList: [],
|
||||
id: '',
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
onLoad({id}) {
|
||||
if (id) {
|
||||
this.id = id
|
||||
this.getDetail()
|
||||
this.getComment()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail(id) {
|
||||
this.$instance.post(`/app/appcontentinfo/queryDetailById`, null, {
|
||||
params: {id: this.id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 评论集合
|
||||
getComment() {
|
||||
this.$instance.post(`/app/appcontentcomment/listForWX?contentId=${this.id}`).then(res=> {
|
||||
if(res?.data) {
|
||||
this.commentList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
// 新增评论
|
||||
sendComment() {
|
||||
if(this.flag) return
|
||||
|
||||
if(!this.content) {
|
||||
return this.$u.toast('请输入内容')
|
||||
}
|
||||
|
||||
this.flag = true
|
||||
this.$instance.post(`/app/appcontentcomment/addByApplet`,{
|
||||
contentId: this.detail.id,
|
||||
content: this.content,
|
||||
type: '1'
|
||||
}).then(res=> {
|
||||
if(res.code==0) {
|
||||
this.flag = false
|
||||
this.showSend = false
|
||||
this.getComment()
|
||||
this.getDetail()
|
||||
}
|
||||
}).catch(err=> {
|
||||
this.flag = false
|
||||
this.showSend = false
|
||||
this.$u.toast(err.msg)
|
||||
})
|
||||
},
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.detail.title,
|
||||
path: '/AppHome/contentDetail?id=' + this.id
|
||||
};
|
||||
},
|
||||
onReachBottom() {
|
||||
uni.$emit("moreComments")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentDetail {
|
||||
.btn_box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
background: #fff;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.input_btn {
|
||||
width: 87%;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
padding-left: 32px;
|
||||
box-sizing: border-box;
|
||||
background: #F4F5FA;
|
||||
border-radius: 44px;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
color: #666666;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.comment {
|
||||
position: relative;
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.comm_num {
|
||||
position: absolute;
|
||||
left: 34px;
|
||||
top: -10px;
|
||||
background: #FFF;
|
||||
color: #E23C3C;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message_num {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.comment_card {
|
||||
display: flex;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.comment_info {
|
||||
margin-left: 16px;
|
||||
width: calc(100% - 80px);
|
||||
|
||||
.avatar_info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.avatar_name {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: #333333;
|
||||
}
|
||||
.avatar_time {
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.comm_content {
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comm_input_btn {
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
background: #fff;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
padding-left: 32px;
|
||||
box-sizing: border-box;
|
||||
background: #F4F5FA;
|
||||
border-radius: 44px;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.send_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
.text {
|
||||
textarea {
|
||||
background: #F4F5FA;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
height: 128px;
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
.send_btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
font-size: 34rpx;
|
||||
color: #2D7DFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
src/project/qujing/AppContent/contentManager.vue
Normal file
103
src/project/qujing/AppContent/contentManager.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<section class="contentManager">
|
||||
<AiNewsList :list="list" :loadmore="loadmore" @select="showDetail">
|
||||
<template #header>
|
||||
<div class="search-wrap">
|
||||
<div class="search">
|
||||
<u-icon name="search" color="rgba(255,255,255,0.5)" size="40"></u-icon>
|
||||
<input placeholder="请输入需要搜索的内容" class="desc" placeholder-style="color:rgba(255,255,255,0.5);"
|
||||
confirm-type="search" @change="onChange"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AiNewsList>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "contentManager",
|
||||
appName: "搜索结果",
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
loadmore() {
|
||||
return this.pages <= this.current ? 'loading ' : 'nomore'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
current: 1,
|
||||
pages: 0,
|
||||
name: "",
|
||||
}
|
||||
},
|
||||
onLoad(params) {
|
||||
if (params.moduleId) {
|
||||
this.moduleId = params.moduleId
|
||||
this.getData(params.moduleId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(val) {
|
||||
this.current = 1;
|
||||
this.getData(val.detail.value);
|
||||
},
|
||||
getData(title = "") {
|
||||
let {current} = this
|
||||
this.moduleId && this.$instance.post("/app/appcontentinfo/list", null, {
|
||||
params: {moduleId: this.moduleId, current, size: 10, title}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.list = current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
||||
this.pages = res.data.pages
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectArea(e) {
|
||||
this.search.areaId = e.id
|
||||
this.getData()
|
||||
},
|
||||
showDetail(row) {
|
||||
uni.navigateTo({url: `./contentDetail?id=${row.id}`})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current++;
|
||||
this.getData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .search-wrap {
|
||||
width: 750px;
|
||||
height: 112px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #4181FF;
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
border-radius: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
font-size: 28px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="header-bg">
|
||||
<div class="header-info">
|
||||
<div class="search-wrap">
|
||||
<div class="search fill" @click="$linkTo('/mods/AppContent/contentManager?moduleId=' + search.moduleId)">
|
||||
<div class="search fill" @click="$linkTo('../AppContent/contentManager?moduleId=' + search.moduleId)">
|
||||
<u-icon name="search" color="#333" size="40"></u-icon>
|
||||
<span class="desc">请输入需要搜索的内容</span>
|
||||
</div>
|
||||
@@ -42,7 +42,7 @@
|
||||
:is-scroll="true" :current="index" @change="tabChange"/>
|
||||
<div class="list-wrap" v-if="categoryList && categoryList.length>0">
|
||||
<div class="list-card" v-for="(category,index) in categoryList" :key="index"
|
||||
@click="$linkTo('/mods/AppContent/contentDetail?id='+category.id)">
|
||||
@click="$linkTo('../AppContent/contentDetail?id='+category.id)">
|
||||
<div class="header">{{ category.title }}</div>
|
||||
<div class="content-wrap"
|
||||
v-if="category.contentType==0 && category.files && category.files.length<3&&category.files.length>0">
|
||||
|
||||
Reference in New Issue
Block a user