|
|
@@ -0,0 +1,426 @@
|
|
|
+<template>
|
|
|
+ <div class="tab6_list">
|
|
|
+ <div class="left">
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ :class="{ active: formData.type === item.type }"
|
|
|
+ v-for="item in listData"
|
|
|
+ :key="item.id"
|
|
|
+ @click="cutTab(item)"
|
|
|
+ >
|
|
|
+ <p v-if="formData.type === item.type">
|
|
|
+ ◆ {{ item.name }} ◆
|
|
|
+ </p>
|
|
|
+ <p v-else>{{ item.name }}</p>
|
|
|
+ <span> {{ item.biaoshi }} </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 下部内容 -->
|
|
|
+ <div class="conten">
|
|
|
+ <h1>
|
|
|
+ 公告/置顶
|
|
|
+ <div class="con_tit_post" @click="rollBottom">发帖</div>
|
|
|
+ </h1>
|
|
|
+ <div class="con_list">
|
|
|
+ <div class="con_tit">
|
|
|
+ <div class="con_tit_one">标题</div>
|
|
|
+ <div class="con_tit_tow">作者</div>
|
|
|
+ <div class="con_tit_three">回复数</div>
|
|
|
+ <div class="con_tit_four">最后发表</div>
|
|
|
+ </div>
|
|
|
+ <div class="con_tit con_tit2" v-for="i in 5" :key="i" @click="skip(i)">
|
|
|
+ <div class="con_tit_one" title="213">
|
|
|
+ 某某某在器械训练中突破自我，我要为他点赞
|
|
|
+ </div>
|
|
|
+ <div class="con_tit_tow" title="213">陈晨</div>
|
|
|
+ <div class="con_tit_three" title="213">232</div>
|
|
|
+ <div class="con_tit_four" title="213">陈晨 2021-07-12</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="paging">
|
|
|
+ <el-pagination
|
|
|
+ layout="prev,pager,next,jumper"
|
|
|
+ :total="total"
|
|
|
+ :page-size="5"
|
|
|
+ :current-page="formData.pageNum"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <!-- 底部富文本盒子 -->
|
|
|
+ <div class="rickText">
|
|
|
+ <div class="txtTit">发表新帖</div>
|
|
|
+ <div class="inputR">
|
|
|
+ <el-select
|
|
|
+ v-model="selectType"
|
|
|
+ placeholder="请选择主题分类"
|
|
|
+ style="width: 400px"
|
|
|
+ >
|
|
|
+ <el-option label="点赞箱" value="one"></el-option>
|
|
|
+ <el-option label="战友情" value="tow"></el-option>
|
|
|
+ <el-option label="敢为先" value="three"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ style="margin-left: 20px"
|
|
|
+ type="text"
|
|
|
+ placeholder="标题不能超过30字"
|
|
|
+ v-model="title"
|
|
|
+ maxlength="30"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <!-- 上传图片 -->
|
|
|
+ <el-upload
|
|
|
+ accept=".png,.jpg,.jpeg,.gif"
|
|
|
+ title="上传图片"
|
|
|
+ class="upload-demo imgUplod"
|
|
|
+ :action="baseURL + '/web/bbs/upload'"
|
|
|
+ multiple
|
|
|
+ :before-upload="beforethumbUploadImg"
|
|
|
+ :on-success="upload_thumb_successImg"
|
|
|
+ >
|
|
|
+ <i class="w-e-icon-image"></i>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <!-- 富文本 -->
|
|
|
+ <div id="div1" style="z-index: 1"></div>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="txtBtn">
|
|
|
+ <div>
|
|
|
+ <span class="txtBtn_tit">请填写您的姓名</span>
|
|
|
+ <el-input
|
|
|
+ style="width: 300px"
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入姓名"
|
|
|
+ v-model="creatorName"
|
|
|
+ maxlength="8"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" style="width: 120px" @click="publish"
|
|
|
+ >发 表</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import E from "wangeditor";
|
|
|
+import axios from "@/utils/request";
|
|
|
+export default {
|
|
|
+ name: "tab6_list",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ total: 20,
|
|
|
+ listData: [
|
|
|
+ { biaoshi: "/", id: 1, name: "点赞箱", type: "one" },
|
|
|
+ { biaoshi: "/", id: 2, name: "战友情", type: "tow" },
|
|
|
+ { biaoshi: "", id: 3, name: "敢为先", type: "three" },
|
|
|
+ ],
|
|
|
+ formData: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ type: "one",
|
|
|
+ },
|
|
|
+ // 有关富文本
|
|
|
+ selectType: "one",
|
|
|
+ title: "",
|
|
|
+ creatorName: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 点击上部的发帖滚动到底部
|
|
|
+ rollBottom() {
|
|
|
+ window.scrollTo({ top: 1000, behavior: "smooth" });
|
|
|
+ },
|
|
|
+ // 点击通知父组件切换 动态组件is的值，并且把数据传过去
|
|
|
+ async skip(item) {
|
|
|
+ this.$emit("cutComFn", item);
|
|
|
+ },
|
|
|
+ // 点击发表
|
|
|
+ publish() {},
|
|
|
+ // 切换顶部tab栏
|
|
|
+ cutTab(val) {
|
|
|
+ if (this.formData.type === val.type) return;
|
|
|
+ this.formData.pageNum = 1;
|
|
|
+ this.formData.type = val.type;
|
|
|
+ },
|
|
|
+ // 分页器方法
|
|
|
+ currentChange(val) {
|
|
|
+ // console.log('当前页改变了', val)
|
|
|
+ this.formData.pageNum = val;
|
|
|
+ },
|
|
|
+ sizeChange(val) {
|
|
|
+ // console.log('条数改变了', val)
|
|
|
+ this.formData.pageNum = 1;
|
|
|
+ this.formData.pageSize = val;
|
|
|
+ },
|
|
|
+ // 上传图片
|
|
|
+ beforethumbUploadImg(file) {
|
|
|
+ // console.log(998, file)
|
|
|
+ // 限制图片大小和格式
|
|
|
+ const sizeOk = file.size / 1024 / 1024 < 5;
|
|
|
+ const typeOk =
|
|
|
+ file.type === "image/png" ||
|
|
|
+ (file.type === "image/jpeg" && !file.name.includes(".jfif")) ||
|
|
|
+ file.type === "image/gif";
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (!typeOk) {
|
|
|
+ this.$message.error("图片格式有误！");
|
|
|
+ reject(file);
|
|
|
+ } else if (!sizeOk) {
|
|
|
+ this.$message.error("图片大小超过5M！");
|
|
|
+ reject(file);
|
|
|
+ } else if (file.name.length > 32) {
|
|
|
+ this.$message.error("图片名字不能超过32个字！");
|
|
|
+ reject(file);
|
|
|
+ } else {
|
|
|
+ resolve(file);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ upload_thumb_successImg(data) {
|
|
|
+ this.$message.success("上传成功");
|
|
|
+ this.editor.txt.append(
|
|
|
+ `<img src="${this.baseURL}${data.data.urlPath}" style="max-width:100%;display: block;margin: 10px auto;"/><p>  </p>`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ // 获取服务器前缀地址
|
|
|
+ this.baseURL = axios.defaults.baseURL;
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ // 初始化富文本
|
|
|
+ // 富文本
|
|
|
+ this.editor = new E("#div1");
|
|
|
+ // 配置字体
|
|
|
+ this.editor.config.fontNames = [
|
|
|
+ "黑体",
|
|
|
+ "仿宋",
|
|
|
+ "楷体",
|
|
|
+ "标楷体",
|
|
|
+ "华文仿宋",
|
|
|
+ "华文楷体",
|
|
|
+ "宋体",
|
|
|
+ "微软雅黑",
|
|
|
+ "Arial",
|
|
|
+ "Tahoma",
|
|
|
+ "Verdana",
|
|
|
+ "Times New Roman",
|
|
|
+ ];
|
|
|
+ this.editor.config.showLinkVideo = false;
|
|
|
+ this.editor.create();
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {
|
|
|
+ window.scrollTo({ top: 0 });
|
|
|
+ }, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.tab6_list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #3e3e3e;
|
|
|
+ .left {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background: url("../../assets/img/tab6Tab.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ width: 240px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #f2cd83;
|
|
|
+ }
|
|
|
+ & > span {
|
|
|
+ margin-left: 50px;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ & > p {
|
|
|
+ text-align: center;
|
|
|
+ width: 145px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #f2cd83;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conten {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 300px;
|
|
|
+ background: url("../../assets/img/tabBg.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ & > h1 {
|
|
|
+ position: relative;
|
|
|
+ color: #be1220;
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 35px;
|
|
|
+ .con_tit_post {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 22px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ width: 120px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #be1220;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .con_list {
|
|
|
+ .con_tit {
|
|
|
+ display: flex;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #3a3a3a;
|
|
|
+ & > div {
|
|
|
+ padding-right: 20px;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .con_tit_one {
|
|
|
+ padding-left: 10px;
|
|
|
+ text-align: left;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .con_tit_tow {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .con_tit_three {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .con_tit_four {
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 50px;
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .con_tit2 {
|
|
|
+ font-weight: 400;
|
|
|
+ & > div {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ font-size: 22px;
|
|
|
+ border-bottom: 1px dashed #d5a6a6;
|
|
|
+ }
|
|
|
+ .con_tit_four {
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paging {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px !important;
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ margin: 30px 0;
|
|
|
+ }
|
|
|
+ .rickText {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fcf7f4;
|
|
|
+ padding: 20px;
|
|
|
+ .txtTit {
|
|
|
+ color: #3a3a3a;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .inputR {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
+ .imgUplod {
|
|
|
+ /deep/.w-e-icon-image {
|
|
|
+ color: #999;
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ /deep/.el-upload-list {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
+ top: 61px;
|
|
|
+ right: 0px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ &:hover {
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ /deep/.w-e-icon-image {
|
|
|
+ color: black;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .txtBtn {
|
|
|
+ color: #9c9c9c;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20px;
|
|
|
+ .txtBtn_tit {
|
|
|
+ margin-right: 15px;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ content: "*";
|
|
|
+ position: absolute;
|
|
|
+ right: -10px;
|
|
|
+ top: -6px;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
