增加t2模板：只显示富文本和留言部分

src/views/system/personalPage/detail/video copy.vue

@@ -1,111 +0,0 @@
-<template>
-    <div>
-        
-      <el-form>
-        <el-col :offset="1">
-            <el-form-item label="视频上传" prop="Video">
-            <!-- action必选参数, 上传的地址 -->
-                <el-upload class="avatar-uploader el-upload--text" 
-                  action="#" 
-                  :http-request="uploadVideo"
-                  :show-file-list="false" 
-                  :on-success="handleVideoSuccess" 
-                  :before-upload="beforeUploadVideo" 
-                  :on-progress="uploadVideoProcess">
-                    <video v-if="videoForm.url !='' && videoFlag == false" 
-                      :src="videoForm.url" class="avatar" 
-                      controls="controls">
-                      您的浏览器不支持视频播放
-                    </video>
-                    <i v-else-if="videoForm.Video =='' && videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
-                    <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
-                </el-upload>
-                <P class="text">请保证视频格式正确，且不超过50M</P>
-            </el-form-item>
-        </el-col>
-      </el-form>
-    </div>
-</template>
-
-<script>
-import { allPersonalVideo,uploadFile,delPersonalVideo } from "@/api/system/personalVideo";
-export default {
-  name: "PersonalVideo",
-  data() {
-    return {
-      videoFlag: false,
-      videoUploadPercent: null,
-      videoForm: {
-          id:null,
-          personalId: null,
-          url: null
-      },
-    }
-  },
-  created(){
-    const pid = this.$route.query.pid;
-    this.videoForm.personalId = pid;
-    this.getList(pid);
-  },
-  methods: {
-    getList(pid){
-      allPersonalVideo(this.videoForm).then(res => {
-        if(res.code !== 200){
-          this.$message.error('获取视频列表失败')
-          return
-        }
-
-      })
-    },
-    beforeUploadVideo(file) {
-      debugger
-      const size = file.size / 1024 / 1024  < 100;
-      if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
-          this.$message.error('请上传正确的视频格式');
-          return false;
-      }
-      if (!size) {
-          this.$message.error('上传视频大小不能超过100MB哦!');
-          return false;
-      }
-    },
-    uploadVideoProcess (event, file, fileList) {
-        console.log(event.percent, file, fileList)
-        this.videoFlag = true
-        // this.videoUploadPercent = file.percentage.toFixed(0)
-        // this.videoUploadPercent = event.percent.toFixed(0)
-        this.videoUploadPercent = Math.floor(event.percent)
-      },
-      //获取上传图片地址
-      handleVideoSuccess(res, file) {
-          this.videoFlag = false;
-          this.videoUploadPercent = 0;
-          if(res.status == 200){
-              this.videoForm.id = res.data.id;
-              this.videoForm.url = res.data.url;
-          }else{
-              this.$message.error('视频上传失败，请重新上传！');
-          }
-      },
-      uploadVideo(item){
-        const formData = new FormData()
-        const pid = this.personalImg.personalId;
-        formData.append('file', item.file)
-        formData.append('personalId', pid)
-        const uid = item.file.uid
-        uploadFile(formData).then(res => {
-            // this.emptyUpload()
-            this.getList(pid)
-            // // this.picList.push({ key: uid, value: res.url })
-        }).catch(() => {
-            this.$message.error('上传失败，请重新上传')
-            // this.emptyUpload()
-        })
-      }
-  }    
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/template/t2.vue

@@ -0,0 +1,255 @@
+<template>
+  <div>
+    <div class="add-message" @click="handleOpen"> + </div>
+
+    <el-form>
+      
+      <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
+        <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
+          <div slot="header" class="clearfix">
+            <span>事迹</span>
+          </div>
+          <div v-html="personal.content"></div>
+        </el-card>
+      </el-col>
+
+      <el-col :style="{ padding: '10px 0px 10px' }" style="display:flex;justify-content:center;">
+        <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
+          <el-table v-loading="loading" :data="messageOptions">
+            <el-table-column label="TA的留念" prop="name" width="80" />
+            <el-table-column prop="contents" />
+          </el-table>
+          <br />
+          <el-pagination small layout="prev, pager, next"
+            v-show="total>0"
+            :page-size="queryParams.pageSize"
+            :current-page="queryParams.pageNum"
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+      </el-card>
+      </el-col>
+  </el-form>
+
+    <el-drawer
+      :size="'70%'"
+      :wrapperClosable="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :visible.sync="drawer"
+      :direction="direction"
+      :before-close="handleClose">
+
+      <div class="drawer__content">
+
+        <el-form ref="messageForm" :model="messageForm" :rules="rules">
+          <el-form-item label="姓名" prop="name" :label-width="'80px'">
+            <el-col :span="20">
+            <el-input v-model="messageForm.name" placeholder="请输入您的姓名" />
+            </el-col>
+          </el-form-item>
+          <el-form-item :label-width="'80px'">
+            <el-radio-group size="small" v-model="messageForm.type" @change="tepyChange">
+              <el-radio-button :label="1">留言语</el-radio-button>
+              <el-radio-button :label="2">留念语</el-radio-button>
+              <el-radio-button :label="3">缅怀语</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item :label-width="'10px'">
+            
+          <div class="box-card">
+            <el-table v-loading="loading" 
+              height="250"
+              :border="true"
+              :data="modelOptions" 
+              highlight-current-row 
+              @current-change="modelCurrentChange">
+              <el-table-column label="选择留言" prop="contents" />
+            </el-table>
+          </div>
+
+          </el-form-item>
+        </el-form>
+        <div class="drawer__footer">
+          <el-button type="primary" @click="addMessages" :loading="loading">留言</el-button>
+        </div>
+      </div>
+
+    </el-drawer>
+
+  </div>
+</template>
+
+<script>
+import { allPersonalImg, getPersonal,allPersonalModel,getPersonalModel,addMessage,messageList } from "@/api/common/template";
+import { setToken } from "@/utils/auth";
+
+export default {
+  data() {
+    return {
+      drawer: false,
+      loading: false,
+      direction: 'btt',
+      baseUrl: process.env.VUE_APP_BASE_API,
+      pid: 0,
+      personal: {},
+      personalImg: {
+        personalId: null,
+      },
+      messageOptions: [],
+      modelOptions: [],
+      picList: [],
+      messageForm:{
+        type: 1, //设置默认
+      },
+      // 总条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        personalId: null
+      },
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "请输入姓名", trigger: "blur" },
+        ],
+      }
+    };
+  },
+  created() {
+    this.pid = this.$route.params && this.$route.params.id;
+    this.personalImg.personalId = this.pid;
+    this.getContent(this.pid);
+    this.getImgs(this.pid);
+    this.getModels(this.messageForm.type);
+    this.getMessageList();
+    this.messageForm.type = 1;
+  },
+  methods: {
+    getContent(id) {
+      getPersonal(id).then((response) => {
+        this.personal = response.data;
+      });
+    },
+    getImgs(id) {
+      allPersonalImg(this.personalImg).then((res) => {
+        if (res.code !== 200) {
+          this.$message.error("获取照片列表失败");
+          return;
+        }
+        var apiUrl = process.env.VUE_APP_BASE_API;
+        var items = res.data;
+        for (const i in items) {
+          var url = apiUrl + items[i].url;
+          this.picList.push({ key: items[i].id, value: url });
+        }
+      });
+    },
+    getModels(type){
+      getPersonalModel(type).then((res) => {
+        this.modelOptions = res.data;
+      });
+    },
+    modelCurrentChange(row){
+      this.messageForm.contents = row.contents;
+    },
+    handleSizeChange: function(size) {
+      this.queryParams.pageSize =  size
+      this.getMessageList();
+    },
+    handleCurrentChange: function(currentPage) {
+      this.queryParams.pageNum = currentPage
+      this.getMessageList();
+    },
+    getMessageList(){
+      this.loading = true;
+      this.queryParams.personalId = this.personalImg.personalId;
+      messageList(this.queryParams).then(response => {
+        this.messageOptions = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    addMessages(){
+      this.loading = true;
+      this.messageForm.personalId = this.personalImg.personalId;
+      addMessage(this.messageForm).then(response => {
+        if (response.code === 200) {
+          this.msgSuccess("留言成功");
+          this.loading = false;
+          this.drawer = false;
+          this.getMessageList();
+        }
+      });
+      this.loading = false;
+    },
+    handleOpen (){
+      this.drawer = true;
+    },
+    handleClose (){
+      this.drawer = false;
+    },
+    tepyChange(label){
+      this.getModels(label);
+    }
+  },
+};
+</script>
+
+<style>
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
+
+.add-message {
+  position: fixed;
+  background-color: #1890ff;
+  width: 40px;
+  height: 40px;
+  right: 40px; 
+  bottom: 40px;
+  border-radius: 50%;
+  color: #fff;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 20px;
+  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  z-index: 5;
+}
+.drawer__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.drawer__footer {
+  text-align:center
+}
+.el-drawer__header {
+    margin-bottom: 8px;
+    padding: 10 5 10;
+}
+.box-card {
+  height: 250px;
+  width: 95%;
+  overflow:auto;
+  background:#fff;
+}
+</style>