From 5662a306b30fc83bf73ba9d74cb6f12aa749e6f3 Mon Sep 17 00:00:00 2001
From: "20932067@zju.edu.cn" <Clay>
Date: Sat, 20 Mar 2021 15:55:37 +0800
Subject: [PATCH] 11

---
 src/components/AppHeader.vue               |  23 +-
 src/components/admin/SuggestList.vue       |  41 +--
 src/components/personPage/MyMessage.vue    | 333 +++++++++++----------
 src/components/personPage/user/AddInfo.vue | 243 +++++++--------
 4 files changed, 320 insertions(+), 320 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index c1305d2..a6d1ce5 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -10,7 +10,7 @@
       <router-link to="/home">主页</router-link>
       <a v-on:click="gotoSelf()">
         <el-badge is-dot
-                  :hidden='true'
+                  :hidden='countStart'
                   class="item">个人中心
         </el-badge>
       </a>
@@ -38,10 +38,11 @@
 <script>
   import axios from 'axios'
   import {mapState} from 'vuex'
-
+  import {getMessageCount} from '../api/message'
   export default {
     data () {
       return {
+        countStart:true,
         loginState: false,
         userName: '',
         identity:''
@@ -52,12 +53,30 @@
       this.identity = sessionStorage.getItem('identity')
       if (this.userName != null) {
         this.loginState = true
+        this.getMsgCount()
       }
     },
     methods: {
       toLogin () {
         this.$router.push({path: '/login'})
       },
+      getMsgCount(){
+        getMessageCount().then(res=>{
+          console.log(res)
+          if (res.data.success){
+            if (res.data.data>0){
+              this.$store.commit('saveUserInfo', {msgLen: res.data.data})
+              this.$notify({
+                title: '登录成功',
+                duration: 2000,
+                message:'尊敬的'+this.userName+'您有'+res.data.data+'条消息,请前往我的消息查看!',
+                type: 'info'
+              })
+              this.countStart = false
+            }
+          }
+        })
+      },
       gotoSelf(){
         if (this.identity == 3){
           this.$router.push({path: '/person'})
diff --git a/src/components/admin/SuggestList.vue b/src/components/admin/SuggestList.vue
index bd06b6b..fe43147 100644
--- a/src/components/admin/SuggestList.vue
+++ b/src/components/admin/SuggestList.vue
@@ -6,22 +6,22 @@
             :data="suggestList"
             style="width: 100%">
             <el-table-column
-                prop="submitTime"
                 label="提交时间"
                 width="180">
+              <template slot-scope="scope" v-text="timeChange(scope.row.cCreateTime)"></template>
             </el-table-column>
             <el-table-column
-                prop="userName"
+                prop="cName"
                 label="提交人"
                 width="180">
             </el-table-column>
             <el-table-column
-                prop="phoneNum"
+                prop="cPhone"
                 label="联系方式"
                  width="180">
             </el-table-column>
             <el-table-column
-                prop="suggestText"
+                prop="cContent"
                 label="内容">
             </el-table-column>
             </el-table>
@@ -32,6 +32,8 @@
 <script>
 import axios from 'axios'
 import {getComplaint} from '../../api/complaint'
+import {formData} from '../../unit/formDate'
+
 export default {
     data(){
         return{
@@ -42,25 +44,24 @@ export default {
         this.getSuggestList();
     },
     methods:{
+      timeChange(tiem){
+        return formData(time, 'yyyy-MM-dd hh:mm:ss')
+      },
         getSuggestList(){
-            // let loading = this.$loading({lock:true,text:'玩命加载中...'});
+            let loading = this.$loading({lock:true,text:'玩命加载中...'});
           getComplaint().then(res=>{
-            console.log(res)
+            let  data = res.data
+            if (data.success) {
+              this.suggestList = data.data.list
+              loading.close()
+            }else {
+              this.$message({
+                type:'success',
+                title:data.msg
+              })
+            }
           })
-
-
-
-            // axios.get(`/admin/suggestList`).then(response=>{
-            //     let res = response.data;
-            //     loading.close();
-            //     if(res.status=='0'){
-            //         this.suggestList = res.result;
-            //     }else{
-            //         console.log(res.msg);
-            //     }
-            // }).catch(err=>{
-            //     console.log(err);
-            // });
+          loading.close()
         }
     }
 
diff --git a/src/components/personPage/MyMessage.vue b/src/components/personPage/MyMessage.vue
index 796d64f..13b7d5d 100644
--- a/src/components/personPage/MyMessage.vue
+++ b/src/components/personPage/MyMessage.vue
@@ -1,43 +1,43 @@
 <template>
-    <div class="myMessage">
-        <person-title>我的消息 >> <em>消息</em></person-title>
-        <div class="myMessage-cont">
-            <el-collapse 
-            @change="handleReadMsg"
-            v-model="activeName" accordion>
-                <el-collapse-item 
-                v-for='item in userMessage'
-                :key='item.title'
-                :class="{'messageIsRead':item.isRead}"
-                :title="item.title"
-                :name="item.title">
-                    <template slot="title">
-                    <i class="el-icon-message"></i>
-                    {{item.title}}
-                    ( {{item.isRead ? '已读' : '未读'}} )
-                    </template>
-                    <p class="msg-body">
-                        {{item.cont}} <br>
-                        <span>(发送时间 : {{item.sendTime}})</span>
-                        <el-button type="danger" size='mini'
-                        @click="handleDeleteMessage(item.title)"
-                        icon="el-icon-delete" circle></el-button>
-                    </p>
-                </el-collapse-item>
-            </el-collapse>
-        </div>
-        <div class="pageination-oder">
-            <el-pagination v-if="showPagination"
-                background
-                @current-change="handleCurrentChange"
-                :current-page="currentPage"
-                :pager-count="5"
-                :page-size="pageSize"
-                layout="total, prev, pager, next, jumper"
-                :total="totalOrder">
-            </el-pagination>
-        </div>
+  <div class="myMessage">
+    <person-title>我的消息 >> <em>消息</em></person-title>
+    <div class="myMessage-cont">
+      <el-collapse
+        @change="handleReadMsg"
+        v-model="activeName" accordion>
+        <el-collapse-item
+          v-for='(item,index) in userMessage'
+          :key='index'
+          :class="{'messageIsRead':item.isRead ==2}"
+          :title="item.title"
+          :name="index">
+          <template slot="title">
+            <i class="el-icon-message"></i>
+            {{ item.title }}
+            ( {{ item.isRead == 2 ? '已读' : '未读' }} )
+          </template>
+          <p class="msg-body">
+            {{ item.content }} <br>
+            <span v-text="tiemChange(item.sendTime)"></span>
+            <el-button type="danger" size='mini'
+                       @click="handleDeleteMessage(item.id)"
+                       icon="el-icon-delete" circle></el-button>
+          </p>
+        </el-collapse-item>
+      </el-collapse>
     </div>
+    <div class="pageination-oder">
+      <el-pagination v-if="showPagination"
+                     background
+                     @current-change="handleCurrentChange"
+                     :current-page="selectDate.page"
+                     :pager-count="5"
+                     :page-size="selectDate.size"
+                     layout="total, prev, pager, next, jumper"
+                     :total="count">
+      </el-pagination>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -45,136 +45,143 @@ import axios from 'axios'
 //借助兄弟通信, 之前是为了跳转菜单,
 //这里借助一下 用来更新消息红点数量,名字就懒得改了
 import {gotoNewOrder} from './../../assets/js/gotoNewOrder'
+import {getMessageList, readerMessage, removeMessage} from '../../api/message'
+import {formData} from '../../unit/formDate'
+
 export default {
-    data(){
-        return{
-            activeName: '',
-            userMessage:[],
-            loading:null ,
-            currentPage : 1,
-            pageSize : 13,
-            totalOrder : 0,
-            showPagination : true,
-        }
-    },
-    mounted() {
-        this.getMessage();
-    },
-    methods:{
-        getMessage(){
-            let loading = this.$loading({lock:true,text:'玩命加载中...'});
-            axios.get(`/users/userMessage?size=${this.pageSize}&page=${this.currentPage}`).then(response=>{
-                let res = response.data;
-                loading.close();
-                if(res.status=='0'){
-                    this.userMessage = res.result.userMessage;
-                    this.totalOrder = Number.parseInt(res.result.totalOrder);
-                    if(this.totalOrder <= this.pageSize){
-                        this.showPagination = false
-                    }
-                    let notReadMsg= this.userMessage.filter(it=>!it.isRead);
-                    if(!notReadMsg.length){
-                        this.$store.commit("saveUserInfo",{msgLen:notReadMsg .length});
-                    }
-                }else{
-                    this.$message({
-                        type: 'error',
-                        message:res.msg
-                    });  
-                }
-            }).catch(err=>{
-                console.log(err);
-            })
-        },
-        handleReadMsg(data){   
-            let flag = this.userMessage.filter(it=>!it.isRead && it.title==data);
-            if(data !='' && flag.length){
-                axios.get(`/users/readMessage?title=${data}`).then(response=>{
-                let res = response.data;
-                    if(res.status=='0'){
-                        this.getMessage();
-                        gotoNewOrder.$emit('readMessage');
-                    }else{
-                        console.log(res.msg);  
-                    }
-                }).catch(err=>{
-                    console.log(err);
-                });
-            } 
-        },
-        handleDeleteMessage(title){
-             this.$confirm('此操作将永久删除该消息, 是否继续?', 
-                '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'error'
-            }).then(() => {
-                axios.get(`/users/deleteMessage?title=${title}`).then(response=>{
-                    let res = response.data;
-                    if(res.status=='0'){
-                        this.$message({
-                            type: 'success',
-                            message: '删除成功!'
-                        });
-                        let mode = this.totalOrder % this.pageSize; 
-                        if(mode ===1){ //判断是否当页最后一条
-                            this.currentPage --;
-                        }
-                        this.getMessage();
-                    }else{
-                        this.$message({
-                            type: 'error',
-                            message:res.msg
-                        });  
-                    }
-                }).catch(err=>{
-                    console.log(err);     
-                });  
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '已取消删除'
-                });          
-            });  
-        },
-        handleCurrentChange(val) {
-            this.currentPage = val;
-            this.getMessage();
-        }
+  data () {
+    return {
+      activeName: '',
+      userMessage: [],
+      loading: null,
+      selectDate: {
+        page: 1,
+        size: 13,
+      },
+      count: 0,
+      showPagination: true,
     }
+  },
+  mounted () {
+    this.getMessage()
+  },
+  methods: {
+    getMessage () {
+      let loading = this.$loading({lock: true, text: '玩命加载中...'})
+      loading.close()
+      getMessageList(this.selectDate).then(res => {
+        let data = res.data
+        if (data.success) {
+          this.userMessage = data.data.list
+          this.count = data.data.count
+          // this.$store.commit('saveUserInfo', {msgLen: this.count})
+        } else {
+          this.$message({
+            type: 'error',
+            message: data.msg
+          })
+        }
+      })
+    },
+    handleReadMsg (data) {
+      let vm = this
+      let flag = vm.userMessage.filter(item => item.isRead == 1 && item.id == vm.userMessage[data].id)
+      if (data != '' && flag.length) {
+        readerMessage(flag[0].id).then(res => {
+          let data = res.data
+          if (data.success) {
+            let it = flag[0]
+            it.isRead = 2
+            vm.userMessage[data] = it
+            gotoNewOrder.$emit('readMessage')
+          } else {
+            vm.$message({
+              type: 'error',
+              message: data.msg
+            })
+          }
+        }).catch(err => {
+          console.log(err)
+        })
+      }
+    },
+    tiemChange (tiem) {
+      return '(发送时间 : ' + formData(tiem, 'yyyy-MM-dd hh:mm:ss') + ')'
+    },
+    handleDeleteMessage (id) {
+      this.$confirm('此操作将永久删除该消息, 是否继续?',
+        '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'error'
+        }).then(() => {
+        removeMessage(id).then(res => {
+          let data = res.data
+          if (data.success) {
+            this.$message({
+              type: 'success',
+              message: data.msg
+            })
+            this.getMessage()
+          } else {
+            this.$message({
+              type: 'error',
+              message: data.msg
+            })
+          }
+        }).catch(err => {
+          console.log(err)
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    handleCurrentChange (val) {
+      this.selectDate.page = val
+      this.getMessage()
+    }
+  }
 }
 </script>
 
 <style lang='scss'>
-.myMessage-cont{
-    text-align: left;
-    // 展开的框框 ,下划线
-    .el-collapse-item__header.is-active{
-        border-bottom-color: #ebeef5;
-    }
-    //下划线
-    .el-collapse-item__header{
-        border-bottom: 1px solid #e2e2e2;
-    }
-    // 标题框
-    .el-collapse-item__header{
-        font-size: 0.8rem;
-        padding-left: 2rem;
-        color: rgb(85, 192, 211); //未读消息标题颜色
-        background-color: #e7f2fb;
-    }
-    .messageIsRead .el-collapse-item__header{
-        color: #999; //已读消息标题颜色
-    }
-    // 内容框
-    .el-collapse-item__content{
-        padding-left: 2rem;
-        padding-top: 0.5rem;
-    }
-    .msg-body{
-        letter-spacing: 0.1rem;
-        padding-right: 2rem;
-        color: #666;
-    }   
+.myMessage-cont {
+  text-align: left;
+  // 展开的框框 ,下划线
+  .el-collapse-item__header.is-active {
+    border-bottom-color: #ebeef5;
+  }
+
+  //下划线
+  .el-collapse-item__header {
+    border-bottom: 1px solid #e2e2e2;
+  }
+
+  // 标题框
+  .el-collapse-item__header {
+    font-size: 0.8rem;
+    padding-left: 2rem;
+    color: rgb(85, 192, 211); //未读消息标题颜色
+    background-color: #e7f2fb;
+  }
+
+  .messageIsRead .el-collapse-item__header {
+    color: #999; //已读消息标题颜色
+  }
+
+  // 内容框
+  .el-collapse-item__content {
+    padding-left: 2rem;
+    padding-top: 0.5rem;
+  }
+
+  .msg-body {
+    letter-spacing: 0.1rem;
+    padding-right: 2rem;
+    color: #666;
+  }
 }
 </style>
diff --git a/src/components/personPage/user/AddInfo.vue b/src/components/personPage/user/AddInfo.vue
index dfc6f72..a64b373 100644
--- a/src/components/personPage/user/AddInfo.vue
+++ b/src/components/personPage/user/AddInfo.vue
@@ -1,46 +1,46 @@
 <template>
-    <div class="addInformation">
-        <person-title>当前位置 :: 个人中心 >> <em>完善个人信息</em></person-title>
-        <div class="add-infor-cont">
-            <el-form :model="personForm"
-            :rules="rules" ref="personForm"
-            label-position='left'
-            @submit.native.prevent
-            :status-icon='true'
-            label-width="7rem" class="demo-ruleForm">
-                <el-form-item label="用户名 : " prop="userName">
-                    <el-input
-                    placeholder="请输入用户名！"
-                    v-model.trim="personForm.userName"></el-input>
-                </el-form-item>
-                <el-form-item label="性别 : " prop="gender">
-                    <el-radio-group v-model.number="personForm.gender">
-                    <el-radio :label="1">男</el-radio>
-                    <el-radio :label="0">女</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item label="邮箱 : " prop="personEmail">
-                    <el-input
-                      placeholder="请输入邮箱！"
-                      v-model="personForm.personEmail"></el-input>
-                </el-form-item>
-                <el-form-item label="生日 : " prop="birthday">
-                    <el-input
-                    placeholder="输入您的生日 格式为 2000-01-01"
-                     v-model="personForm.birthday"></el-input>
-                </el-form-item>
-                <el-form-item class="completed-info-btn">
-                    <el-button type="primary"
-                     @click="submitForm('personForm')">修改</el-button>
-                    <el-button  @click="resetForm('personForm')">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
+  <div class="addInformation">
+    <person-title>当前位置 :: 个人中心 >> <em>完善个人信息</em></person-title>
+    <div class="add-infor-cont">
+      <el-form :model="personForm"
+               :rules="rules" ref="personForm"
+               label-position='left'
+               @submit.native.prevent
+               :status-icon='true'
+               label-width="7rem" class="demo-ruleForm">
+        <el-form-item label="用户名 : " prop="userName">
+          <el-input
+            placeholder="请输入用户名！"
+            v-model.trim="personForm.userName"></el-input>
+        </el-form-item>
+        <el-form-item label="性别 : " prop="gender">
+          <el-radio-group v-model.number="personForm.gender">
+            <el-radio :label="1">男</el-radio>
+            <el-radio :label="0">女</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="邮箱 : " prop="personEmail">
+          <el-input
+            placeholder="请输入邮箱！"
+            v-model="personForm.personEmail"></el-input>
+        </el-form-item>
+        <el-form-item label="生日 : " prop="birthday">
+          <el-input
+            placeholder="输入您的生日 格式为 2000-01-01"
+            v-model="personForm.birthday"></el-input>
+        </el-form-item>
+        <el-form-item class="completed-info-btn">
+          <el-button type="primary"
+                     @click="submitForm()">修改
+          </el-button>
+          <el-button @click="resetForm()">重置</el-button>
+        </el-form-item>
+      </el-form>
     </div>
+  </div>
 </template>
 
 <script>
-// import {gotoNewOrder} from './../../../assets/js/gotoNewOrder'
 import {personInfoEdit} from '../../../api/personInfoAdd'
 import axios from 'axios'
 
@@ -57,11 +57,10 @@ export default {
         callback()
       }
     }
-   let regexBirthday = (rule, value, callback) => {
+    let regexBirthday = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('请输入生日!'))
-      }
-      else if (!/^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/.test(value)) {
+      } else if (!/^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/.test(value)) {
         callback(new Error('生日格式不正确!'))
       } else {
         callback()
@@ -76,22 +75,22 @@ export default {
       },
       rules: {
         userName: [
-          { required: true, message: '请输入名字', trigger: 'blur' },
-          { min: 2, max: 6, message: '长度在 3 到 6 个字符', trigger: 'change' },
-          { min: 2, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' },
-          { pattern: /\D/, message: '不能为纯数字', trigger: 'change' },
-          { pattern: /\D/, message: '不能为纯数字', trigger: 'blur' }
+          {required: true, message: '请输入名字', trigger: 'blur'},
+          {min: 2, max: 6, message: '长度在 3 到 6 个字符', trigger: 'change'},
+          {min: 2, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur'},
+          {pattern: /\D/, message: '不能为纯数字', trigger: 'change'},
+          {pattern: /\D/, message: '不能为纯数字', trigger: 'blur'}
         ],
         personEmail: [
-          { required: true, message: '请输入您的电子邮件'},
-          { validator: regexpPhoneNumber, trigger: 'change'},
-          { validator: regexpPhoneNumber, trigger: 'blur'}
+          {required: true, message: '请输入您的电子邮件'},
+          {validator: regexpPhoneNumber, trigger: 'change'},
+          {validator: regexpPhoneNumber, trigger: 'blur'}
         ],
         gender: [
-          { required: true, type: 'number', message: '请选择性别', trigger: 'change' }
+          {required: true, type: 'number', message: '请选择性别', trigger: 'change'}
         ],
         birthday: [
-          { required: true, message: '请输入生日 格式为 2000-01-01', trigger: 'blur' }
+          {required: true, message: '请输入生日 格式为 2000-01-01', trigger: 'blur'}
         ]
       }
     }
@@ -100,102 +99,76 @@ export default {
     // this.personForm.phoneNum = this.$store.state.user.userInfo.userId
   },
   methods: {
-    submitForm (formName) {
-      // this.$refs[formName].validate((valid) => {
-      // this.$refs[formName].validate((valid) => {
-        let tip =this.personForm
-      console.log(tip)
-      let addInfo = {
-        username: this.personForm.userName,
-        email: this.personForm.personEmail,
-        sex: this.personForm.gender,
-        birthday: this.personForm.birthday
-      }
-        if (tip) {
-          console.log("0000000")
-          personInfoEdit(this.addInfo).then((res)=>{
-            console.log(res)
-            console.log("11111")
-            var data = res.data
-            if (data.success){
-              this.$notify({
-                title: '提交成功',
-                duration: 2000,
-                type: 'success'
-              })
-              sessionStorage.clear()
-              // this.$router.push({path: '/login'})
-            }else {
-              this.$notify({
-                title: '提交失败',
-                message:data.msg,
-                duration: 2000,
-                type: 'error'
-              })
-            }
-          })
-        }
+    submitForm () {
+      this.$refs.personForm.validate((valid) => {
+        if (valid) {
 
-        /*if (valid) {
+          let tip = this.personForm
           let addInfo = {
-            userName: this.ruleForm.userName,
-            phoneNum: this.ruleForm.phoneNum,
-            gender: this.ruleForm.gender,
-            address: this.ruleForm.address
+            username: this.personForm.userName,
+            email: this.personForm.personEmail,
+            sex: this.personForm.gender,
+            birthday: this.personForm.birthday
+          }
+          console.log(tip)
+          if (tip) {
+            console.log('0000000')
+            personInfoEdit(addInfo).then((res) => {
+              console.log(res)
+              console.log('11111')
+              var data = res.data
+              if (data.success) {
+                this.$notify({
+                  title: '提交成功',
+                  duration: 2000,
+                  type: 'success'
+                })
+                sessionStorage.clear()
+                // this.$router.push({path: '/login'})
+              } else {
+                this.$notify({
+                  title: '提交失败',
+                  message: data.msg,
+                  duration: 2000,
+                  type: 'error'
+                })
+              }
+            })
+          } else {
+            this.$message({
+              message: tip,
+              type: 'error'
+            })
           }
-          axios.post(`/users/addInformation`, addInfo).then(response => {
-            let res = response.data
-            if (res.status == '0') {
-              this.$notify({
-                title: '修改成功',
-                message: '恭喜你! 修改成功!',
-                duration: 2000,
-                type: 'success'
-              })
-              gotoNewOrder.$emit('goNewOrder', 'userInformation')
-              this.$router.push({path: 'userInformation'})
-            } else {
-              this.$notify({
-                title: '修改失败',
-                message: res.msg,
-                duration: 2000,
-                type: 'error'
-              })
-            }
-          }).catch(err => {
-            console.log(err)
-          })*/
-         else {
-          this.$message({
-            message: tip,
-            type: 'error'
-          });
         }
-      // })
+      })
     },
-    resetForm (formName) {
-      this.$refs[formName].resetFields()
+    resetForm () {
+      this.$refs.personForm.resetFields()
     }
   }
 }
 </script>
 
 <style lang='scss'>
-.add-infor-cont{
-    padding-left: 5rem;
-    padding-top: 2rem;
-    width: 40%;
-    min-width: 20rem;
-    .el-form-item{
-        margin-bottom: 1.5rem;
-    }
+.add-infor-cont {
+  padding-left: 5rem;
+  padding-top: 2rem;
+  width: 40%;
+  min-width: 20rem;
+
+  .el-form-item {
+    margin-bottom: 1.5rem;
+  }
 }
-.completed-info-btn{
-    margin: 2rem;
+
+.completed-info-btn {
+  margin: 2rem;
 }
-@media only screen and (max-width:768px){
-    .add-infor-cont{
-        width: 70%;
-    }
+
+@media only screen and (max-width: 768px) {
+  .add-infor-cont {
+    width: 70%;
+  }
 }
 </style>