初步完工

houtai/package-lock.json

@@ -6409,6 +6409,11 @@
       "integrity": "sha1-J8dlOb4U2L0Sghmi1zGwkzeQTnk=",
       "dev": true
     },
+    "js-base64": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.7.tgz",

houtai/package.json

@@ -10,6 +10,7 @@
     "axios": "^0.24.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
+    "js-base64": "^3.7.2",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"
   },

houtai/src/assets/chushi.css

@@ -6,3 +6,6 @@
 ul li {
   list-style: none;
 }
+body {
+  background-color: #e2e2e2;
+}

houtai/src/utils/api.js

@@ -15,3 +15,23 @@ export const updatePwd = (data) => {
     data
   })
 }
+//获取留言列表
+export const geiList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/comment/list',
+    data
+  })
+}
+//留言是否通过审核
+export const displayPass = (id,display) => {
+  return axios({
+    url: `/cms/comment/audit/${id}/${display}`,
+  })
+}
+//删除留言
+export const delLiuYan = (id) => {
+  return axios({
+    url: `/cms/comment/remove/${id}`,
+  })
+}

houtai/src/utils/pass.js

@@ -0,0 +1,105 @@
+function NoToChinese(num) {  
+  num = String(num)
+  var chnNumChar = ["零","一","二","三","四","五","六","七","八","九","十"];
+  if(num == 0){  
+    return chnNumChar[0];  
+  }     
+  let tmp = ''
+  for (let i = 0; i < num.length; i++) {
+    let ele = num.charAt(i)
+    tmp += chnNumChar[ele]
+  }
+   
+  return tmp;  
+}  
+
+function randomWord (randomFlag, min, max) {
+  let str = ''
+  let range = min
+  let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+  // 随机产生
+  if (randomFlag) {
+    range = Math.round(Math.random() * (max - min)) + min
+  }
+  for (var i = 0; i < range; i++) {
+    let pos = Math.round(Math.random() * (arr.length - 1))
+    str += arr[pos]
+  }
+  return str
+}
+
+module.exports = {
+  formatDate: function(time) {
+    var weekArr = ["日", "一", "二", "三", "四", "五", "六"];
+    var date = new Date(time);
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    var week = "星期" + weekArr[date.getDay()];
+    if (window.innerWidth < 1700) {
+      return (
+        year +
+        "年" +
+        (String(month).length > 1 ? month : "0" + month) +
+        "月" +
+        (String(day).length > 1 ? day : "0" + day) +
+        "日" +
+        "<br/>" +
+        week
+      );
+    }
+    return (
+      year +
+      "年" +
+      (String(month).length > 1 ? month : "0" + month) +
+      "月" +
+      (String(day).length > 1 ? day : "0" + day) +
+      "日" +
+      " " +
+      week
+    );
+  },
+  smoothscrollpos: function(domName) {
+    if (domName == "/") {
+      return window.scrollTo(0, 0);
+    }
+    let smoothscroll = () => {
+      let dom = document.getElementById(domName);
+      // window.scrollTo({
+      //   top:dom.offsetTop - 100,
+      //   left:0,
+      //   behavior: "smooth"
+      // })
+      dom && window.scrollTo(0, dom.offsetTop - 120);
+    };
+    smoothscroll();
+  },
+  
+  formatTime: function(time, fan = false) {
+    let t1 = time.split(" ")[0].split("-");
+    if (fan) {
+      t1 = t1.map((item) => {
+        let t = NoToChinese(item);
+        return t;
+      });
+    }
+    return t1;
+  },
+  encodeStr: function (str, strv = '') {
+    const NUM = 2
+    const front = randomWord(false, 8)
+    const middle = randomWord(false, 8)
+    const end = randomWord(false, 8)
+
+    let str1 = str.substring(0, NUM)
+    let str2 = str.substring(NUM)
+
+    if (strv) {
+      let strv1 = strv.substring(0, NUM)
+      let strv2 = strv.substring(NUM)
+      return [front + str2 + middle + str1 + end, front + strv2 + middle + strv1 + end]
+    }
+
+    return front + str2 + middle + str1 + end
+  }
+};

houtai/src/views/Home.vue

@@ -15,11 +15,85 @@
         </ul>
       </div>
     </div>
+    <!-- 搜索模块 -->
+    <div class="search">
+      <div class="row">
+        <span>留言内容</span>
+        <el-input
+          style="width: 300px"
+          placeholder="请输入关键字"
+          v-model="formData.searchKey"
+        ></el-input>
+      </div>
+      <div class="row">
+        <span>提交时间</span>
+        <el-date-picker
+          style="width: 300px"
+          v-model="time"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </div>
+      <div class="row">
+        <span>状态</span>
+        <el-select v-model="formData.status">
+          <el-option label="全部" value=""></el-option>
+          <el-option label="待审核" :value="0"></el-option>
+          <el-option label="审核通过" :value="1"></el-option>
+          <el-option label="不通过" :value="2"></el-option>
+        </el-select>
+      </div>
+      <!-- 右侧按钮 -->
+      <div class="search_btn">
+        <div class="one" @click="cliSear">搜 索</div>
+        <div class="tow" @click="reset">重 置</div>
+      </div>
+    </div>
+
+    <!-- 下面的内容模块 -->
+    <div class="conten">
+      <el-table :data="tableData" style="width: 100%">
+          <el-table-column label="序号" width="80">
+            <template slot-scope="scope">
+              {{ scope.$index + (formData.pageNum - 1) * formData.pageSize + 1 }}
+            </template>
+          </el-table-column>
+         <el-table-column prop="content" label="留言内容">
+        </el-table-column>
+        <el-table-column prop="userName" label="提交人" width="180">
+        </el-table-column>
+        <el-table-column prop="updateTime" label="提交时间" width="280"> </el-table-column>
+        <el-table-column prop="status" label="审核状态" width="180"> </el-table-column>
+          <el-table-column label="操作" width="230">
+            <template #default='{row}'>
+              <el-button type="text" @click="pass(row.id,1)" v-if="row.status!=='审核通过'">通过</el-button>
+              <el-button type="text" @click="pass(row.id,2)" style="color:#ac3334" v-if="row.status!=='审核不通过'">不通过</el-button>
+              <el-button type="text" style="color:#808080" @click="delLiuYan(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <div class="paging">
+        <el-pagination
+          layout="prev, pager, next,sizes,jumper"
+          :total="total"
+          :current-page="formData.pageNum"
+          @current-change="currentChange"
+          @size-change="sizeChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
     <!-- 点击修改密码出现弹窗 -->
     <el-dialog title="修改密码" :visible.sync="isShow" @close="btnX()">
       <el-form :model="form" label-width="100px" :rules="rules" ref="ruleForm">
         <el-form-item label="旧密码：" prop="oldPassword">
           <el-input
+            style="width: 400px"
             v-model="form.oldPassword"
             placeholder="请输入"
             show-password
@@ -27,6 +101,7 @@
         </el-form-item>
         <el-form-item label="新密码：" prop="newPassword">
           <el-input
+            style="width: 400px"
             v-model="form.newPassword"
             placeholder="请输入"
             show-password
@@ -34,6 +109,7 @@
         </el-form-item>
         <el-form-item label="确定新密码：" prop="checkPass">
           <el-input
+            style="width: 400px"
             v-model="form.checkPass"
             placeholder="请输入"
             show-password
@@ -42,29 +118,30 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="btnX">取 消</el-button>
-        <el-button type="primary" @click="btnOk">确 定</el-button>
+        <el-button type="danger" @click="btnOk">确 定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
-import { updatePwd } from "../utils/api";
+import { encodeStr } from "../utils/pass";
+import { Base64 } from "js-base64";
+import { updatePwd,geiList,displayPass,delLiuYan } from "../utils/api";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
   data() {
     //这里存放数据
-        const validatePass2 = (rule, value, callback) => {
+    const validatePass2 = (rule, value, callback) => {
       if (value !== this.form.newPassword) {
-        callback(new Error('两次输入密码不一致!'))
+        callback(new Error("两次输入密码不一致!"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
+      total:0,
       userName: "",
       cut: false,
       isShow: false,
@@ -79,14 +156,75 @@ export default {
         oldPassword: [{ required: true, message: "不能为空", trigger: "blur" }],
         newPassword: [{ required: true, message: "不能为空", trigger: "blur" }],
       },
+      //列表搜索的数据
+      time: "",
+      formData: {
+        status: "", //审核状态: 0:不通过， 1：通过（允许显示在展示页）,为空就是待审核
+        startTime: "",
+        endTime: "",
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+      },
+      tableData:[]
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    time(val) {
+      this.handleSelect(val);
+    },
+  },
   //方法集合
   methods: {
+    //点击删除
+    delLiuYan(id){
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          await delLiuYan(id)
+          this.$message.success('删除成功!')
+          this.getList(this.formData)
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })    },
+    //点击通过和不通过
+   async pass(id,display){
+    let res = await displayPass(id,display)
+    this.$message.success('操作成功!')
+    this.getList(this.formData)
+    },
+    //点击重置
+    reset(){
+      this.time=''
+      this.formData.searchKey=''
+      this.formData.status=''
+      this.formData.startTime=''
+      this.formData.endTime=''
+    },
+    //点击搜索
+    cliSear(){
+      this.formData.pageNum = 1
+      this.getList(this.formData)
+    },
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.formData.pageNum = val
+      this.getList(this.formData)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      this.getList(this.formData)
+    },
     // 修改密码点击取消
     btnX() {
       this.$refs.ruleForm.resetFields();
@@ -102,7 +240,11 @@ export default {
     async btnOk() {
       await this.$refs.ruleForm.validate();
       try {
-        await updatePwd(this.form);
+        let data = {
+          oldPassword: encodeStr(Base64.encode(this.form.oldPassword)),
+          newPassword: encodeStr(Base64.encode(this.form.newPassword)),
+        };
+        await updatePwd(data);
         this.$message.success("修改成功");
         localStorage.clear("DSJY_token");
         localStorage.clear("DSJY_Name");
@@ -128,11 +270,56 @@ export default {
           this.$message.info("已取消");
         });
     },
+    // 时间处理----------------
+    handleSelect(e) {
+      const date = [];
+      for (const i in e) {
+        date.push(this.gettime(e[i]));
+      }
+      this.formData.startTime = date[0];
+      if (date[1]) this.formData.endTime = date[1].replace("00:00:00", "23:59:59");
+      if(e===null) this.formData.endTime=''
+    },
+    gettime(data) {
+      const value =
+        data.getFullYear() +
+        "-" +
+        this.checkTime(data.getMonth() + 1) +
+        "-" +
+        this.checkTime(data.getDate()) +
+        " " +
+        this.checkTime(data.getHours()) +
+        ":" +
+        this.checkTime(data.getMinutes()) +
+        ":" +
+        this.checkTime(data.getSeconds());
+      return value;
+    },
+    checkTime(i) {
+      if (i < 10) {
+        i = "0" + i;
+      }
+      return i;
+    },
+    //封装获取留言列表的方法
+   async getList(data){
+      let res =await geiList(data)
+      this.tableData=res.data.records
+      this.total=res.data.total
+      this.tableData.forEach(v=>{
+        if(v.userName==='') v.userName='匿名'
+        if(v.status===0) v.status='待审核'
+        else if(v.status===1) v.status='审核通过'
+        else if(v.status===2) v.status='审核不通过'
+      })
+      // console.log(999,res);
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     // 获取用户信息
     this.userName = localStorage.getItem("DSJY_Name");
+    this.getList(this.formData)
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -147,12 +334,15 @@ export default {
 </script>
 <style lang='less' scoped>
 .home {
+    /deep/ .el-table .el-table__cell{
+      padding: 5px 0;
+    }
   .top {
-    padding: 0 30px;
+    padding: 0 50px 0 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 100px;
+    height: 80px;
     background-color: #ac3334;
     color: #fff;
     .left {
@@ -160,6 +350,7 @@ export default {
       font-size: 34px;
     }
     .right {
+      cursor: pointer;
       position: relative;
       display: flex;
       align-items: center;
@@ -181,7 +372,6 @@ export default {
         border-bottom: 8px solid #fff;
       }
       .pull_up {
-        cursor: pointer;
         position: absolute;
         right: -20px;
         bottom: 13px;
@@ -197,7 +387,7 @@ export default {
         z-index: 999;
         padding: 10px 0;
         position: absolute;
-        right: -30px;
+        right: -50px;
         bottom: -110px;
         background-color: #ac3334;
         li {
@@ -212,5 +402,67 @@ export default {
       }
     }
   }
+  .search {
+    border-radius: 8px;
+    position: relative;
+    padding: 0 30px;
+    display: flex;
+    align-items: center;
+    width: 94%;
+    margin: 20px auto;
+    height: 100px;
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 0px;
+    .row {
+      width: 450px;
+      display: flex;
+      align-items: center;
+      & > span {
+        margin-right: 15px;
+      }
+    }
+    .search_btn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 30px;
+      display: flex;
+      & > div {
+        margin-right: 20px;
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        border-radius: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .one {
+        color: #fff;
+        background-color: #ac3334;
+      }
+      .tow {
+        border: 1px solid #ccc;
+      }
+    }
+  }
+  .conten {
+    position: relative;
+    padding: 15px 20px 0;
+    border-radius: 8px;
+    margin: 0 auto;
+    width: 94%;
+    height: 700px;
+    background-color: #fff;
+    .paging{
+      position: absolute;
+      right: 30px;
+      bottom: 30px;
+    }
+    /deep/.el-table__body-wrapper{
+      max-height: 561px;
+      overflow-y: auto;
+    }
+  }
 }
 </style>

houtai/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: './'
+}