|
|
@@ -0,0 +1,332 @@
|
|
|
+<template>
|
|
|
+ <div class="forumM_list">
|
|
|
+ <h3>论坛</h3>
|
|
|
+ <ul class="topTab">
|
|
|
+ <li
|
|
|
+ :class="{ active: item.id === tabInd }"
|
|
|
+ v-for="item in tab"
|
|
|
+ :key="item.id"
|
|
|
+ @click="cutTab(item)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <div class="conten" ref="contenSro">
|
|
|
+ <div
|
|
|
+ class="row"
|
|
|
+ v-for="item in dataArr"
|
|
|
+ :key="item.id"
|
|
|
+ @click="skip(item)"
|
|
|
+ >
|
|
|
+ <div class="row_top">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../../assets/imgAdd/touxiang.png" alt="" />
|
|
|
+ <span>{{ item.creatorName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="right">{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="rowCon">
|
|
|
+ <div class="title">{{ item.title }}</div>
|
|
|
+ <div v-html="item.content" class="txt"></div>
|
|
|
+ </div>
|
|
|
+ <div class="rowFloo">
|
|
|
+ <div class="one">{{ item.visit }}</div>
|
|
|
+ <div
|
|
|
+ class="tow"
|
|
|
+ :class="{ active: item.flag }"
|
|
|
+ @click.stop="likeClick(item)"
|
|
|
+ >
|
|
|
+ {{ item.upVote }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 底部的回帖按钮 -->
|
|
|
+ <div class="postMes" @click="postMesShow=true">我 要 发 贴</div>
|
|
|
+ <!-- 富文本 -->
|
|
|
+ <div class="postMesShow" v-show="postMesShow">
|
|
|
+ <div class="postMesBack" @click="postMesShow = false">
|
|
|
+ <i class="el-icon-arrow-left"></i>
|
|
|
+ <span>我 要 发 贴</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标题输入框 -->
|
|
|
+ <el-input
|
|
|
+ style="margin:20px 0 10px"
|
|
|
+ type="text"
|
|
|
+ placeholder="帖子标题字数不能超过30个字。"
|
|
|
+ v-model="title"
|
|
|
+ maxlength="30"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-select
|
|
|
+ v-model="selectType"
|
|
|
+ placeholder="请选择主题分类"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="数字史馆" value="scene"></el-option>
|
|
|
+ <el-option label="美丽校园" value="school"></el-option>
|
|
|
+ <el-option label="文物典藏" value="goods"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- 富文本 -->
|
|
|
+ <div id="div1" style="z-index: 1"></div>
|
|
|
+ <!-- 底部姓名和按钮 -->
|
|
|
+ <div class="postMesFloo">
|
|
|
+ <el-input
|
|
|
+ style="margin-right: 20px"
|
|
|
+ type="text"
|
|
|
+ placeholder="请填写您的姓名"
|
|
|
+ v-model="creatorName"
|
|
|
+ maxlength="8"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <div class="submit">提 交</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { webBbsList, webBbsVisit, webBbsLike } from '@/apis/tab8'
|
|
|
+export default {
|
|
|
+ neme: 'forumM_list',
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ // 这里存放数据
|
|
|
+ return {
|
|
|
+ tabInd: 1,
|
|
|
+ tab: [
|
|
|
+ { id: 1, name: '数字史馆', type: 'scene' },
|
|
|
+ { id: 2, name: '美丽校园', type: 'school' },
|
|
|
+ { id: 3, name: '文物典藏', type: 'goods' }
|
|
|
+ ],
|
|
|
+ dataArr: [],
|
|
|
+ formData: {
|
|
|
+ endTime: '',
|
|
|
+ searchKey: '',
|
|
|
+ startTime: '',
|
|
|
+ status: 2,
|
|
|
+ type: 'scene',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 99999,
|
|
|
+ bbsType: 'topic'
|
|
|
+ },
|
|
|
+ selectType: 'scene',
|
|
|
+ title: '',
|
|
|
+ creatorName: '',
|
|
|
+ content: '',
|
|
|
+ // 点赞-帖子的开关
|
|
|
+ likeFlagOne: [],
|
|
|
+ // 控制富文本的显示和隐藏
|
|
|
+ postMesShow: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // 点击点赞
|
|
|
+ async likeClick (item) {
|
|
|
+ if (!this.likeFlagOne.includes(item.id)) {
|
|
|
+ const res = await webBbsLike('upVote', item.id)
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success('点赞成功.')
|
|
|
+ this.likeFlagOne.push(item.id)
|
|
|
+ item.upVote++
|
|
|
+ item.flag = true
|
|
|
+ } else this.$message.warning(res.msg)
|
|
|
+ } else this.$message.warning('您已经赞过了.')
|
|
|
+ },
|
|
|
+ // 点击通知父组件切换 动态组件is的值，并且把数据传过去
|
|
|
+ async skip (item) {
|
|
|
+ await webBbsVisit(item.id)
|
|
|
+ this.$emit('cutComFn', item)
|
|
|
+ },
|
|
|
+ cutTab (item) {
|
|
|
+ this.tabInd = item.id
|
|
|
+ this.formData.type = item.type
|
|
|
+ this.webBbsList(this.formData)
|
|
|
+ // 让下面的下拉框同步
|
|
|
+ this.selectType = item.type
|
|
|
+ // 回到屏幕顶点
|
|
|
+ this.$refs.contenSro.scrollTo({ top: 0 })
|
|
|
+ // console.log('-----------')
|
|
|
+ // window.scrollTo({ top: 0 })
|
|
|
+ },
|
|
|
+ // 封装获取列表的方法
|
|
|
+ async webBbsList (data) {
|
|
|
+ const res = await webBbsList(data)
|
|
|
+ this.dataArr = res.data.records
|
|
|
+ this.likeFlagOne.forEach((p) => {
|
|
|
+ this.dataArr.forEach((v) => {
|
|
|
+ if (p === v.id) v.flag = true
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created () {},
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted () {},
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {
|
|
|
+ // 调用获取列表方法
|
|
|
+ this.webBbsList(this.formData)
|
|
|
+ } // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.forumM_list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ & > h3 {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .topTab {
|
|
|
+ margin: 10px;
|
|
|
+ display: flex;
|
|
|
+ & > li {
|
|
|
+ margin-right: 15px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ width: 100px;
|
|
|
+ color: #a19d97;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ border-radius: 13px;
|
|
|
+ background-color: #b92e2e;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conten {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 162px);
|
|
|
+ overflow-y: auto;
|
|
|
+ .row {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 8px;
|
|
|
+ padding-bottom: 0;
|
|
|
+ background-color: rgba(255, 255, 255, 0.3);
|
|
|
+ .row_top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ & > img {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ & > span {
|
|
|
+ font-size: 14px;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #a19d97;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowCon {
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ font-size: 14px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #c0b19c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowFloo {
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ & > div {
|
|
|
+ padding-left: 30px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .one {
|
|
|
+ background: url("../../assets/imgAdd/comment.png") no-repeat left
|
|
|
+ center;
|
|
|
+ }
|
|
|
+ .tow {
|
|
|
+ background: url("../../assets/imgAdd/like.png") no-repeat left center;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background: url("../../assets/imgAdd/likeAc.png") no-repeat left
|
|
|
+ center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .postMes {
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #b92e2e;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .postMesShow {
|
|
|
+ padding: 20px;
|
|
|
+ background: url("../../assets/imgAdd/mesBac.png") #f3e9d9;
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ .postMesBack {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 700;
|
|
|
+ & > span {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background-color: rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+ /deep/.el-input__count-inner {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ /deep/.w-e-toolbar {
|
|
|
+ background-color: rgba(255, 255, 255, 0.5) !important;
|
|
|
+ }
|
|
|
+ /deep/.w-e-text-container {
|
|
|
+ background-color: rgba(255, 255, 255, 0.5) !important;
|
|
|
+ }
|
|
|
+ #div1{
|
|
|
+ height: calc(100vh - 230px);
|
|
|
+ }
|
|
|
+ .postMesFloo{
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .submit{
|
|
|
+ margin-top: 2px;
|
|
|
+ width: 60px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #b92e2e;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
