FeedModal.vue

<template>
  <div v-if="showFeedModal">
    <div class="feed-modal-page">
      <div class="feed-modal">
        <img src="~IMAGES/program/pc_landing/modal_close.png" alt="" class="feed-modal-close" @click="closeFeedModal">
        <div class="modal-container">
          <div v-if="isLive">
             <div class="modal-content" v-if="!showFeedItem">
                <img src="~IMAGES/program/course_center/feed_modal_avatar.png" alt="">
                <div class="feed-first-title">我是秒可督学CEO的秘书--大脸猫</div>
                <div class="feed-second-title">关于产品或者内容的建议, 我会认真处理您的反馈</div>
                <div class="four-btn-container">
                  <img src="~IMAGES/program/course_center/feed_btn1.png" alt="" @click="showItem(1, true)">
                  <img src="~IMAGES/program/course_center/feed_btn2.png" alt="" @click="showItem(2, true)">
                  <img src="~IMAGES/program/course_center/feed_btn3.png" alt="" @click="showItem(3, true)">
                  <img src="~IMAGES/program/course_center/feed_btn4.png" alt="" @click="showItem(4, true)">
                </div>
             </div>
          </div>
          <div v-if="showFeedItem">
            <div class="des-content">
                <div>
                  <div class="item-title">{{itemName}}</div>
                  <div class="textarea-input">
                    <textarea name="" id="" cols="40" rows="10" placeholder="请填写详细的描述, 以帮助我们更好的理解"></textarea>
                  </div>
                  <div class="history-feed-other">
                      <div class="other-btn" @click="changeItem">其他反馈</div>
                      <div class="feed-btn" @click="goHistroyFeed">历史反馈</div>
                  </div>
                  <div class="commit-btn">提交</div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import { EventBus } from '../../../../util/eventBus'
export default {
  name: 'FeedModal',
  data () {
    return {
      itemName: '',
      // 展示反馈modal框
      showFeedModal: false,
      // 展示点击的相应的反馈按钮
      showFeedItem: false,
      // 判断是否有直播活动
      isLive: true
    }
  },
  mounted () {
    EventBus.$off('showFeedModal')
    EventBus.$on('showFeedModal', params => {
      this.showFeedModal = params
    })
  },
  beforeDestroy () {
    EventBus.$off('showFeedModal')
  },
  methods: {
    changeItem () {
      this.itemName = '其他反馈'
    },
    closeFeedModal () {
      this.showFeedModal = false
      this.showFeedItem = false
    },
    showItem (index, isShow) {
      switch (index) {
        case 1:
          this.itemName = '新课开发建议'
          this.showFeedItem = isShow
          break
        case 2:
          this.itemName = '系统故障'
          this.showFeedItem = isShow
          break
        case 3:
          this.itemName = '产品建议'
          this.showFeedItem = isShow
          break
        case 4:
          this.itemName = '其他反馈'
          this.showFeedItem = isShow
      }
    },
    goHistroyFeed () {
      this.$router.push({name: 'Feedback'})
    }
  }
}
</script>

<style scoped>
.feed-modal-page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9996;
}
.feed-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 444;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: #fff;
  border-radius: 10px;
  background-size: cover;
  height: 59vh;
  width: 46vw;
}
.feed-modal-close {
  position: absolute;
  color: #ccc;
  height: 18px;
  width: 18px;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.modal-container {
 width: 40vw;
 margin: 0 auto;
 text-align: center;
 margin-top: 4vh;
}
.feed-first-title {
  color: #181052;
  font-size: 3.5vh;
}
.feed-second-title {
  color: #181052;
  font-size: 2.8vh;
  letter-spacing: .1vw;
  margin-top: .8vh;
}
.four-btn-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  margin-top: 2.5vh;
}
.four-btn-container img {
   width: 17vw;
   object-fit: contain;
   margin-right: 1vw;
   cursor: pointer;
}
.four-btn-container img:nth-child(3) {
  margin-top: 1vw;
}
.four-btn-container img:nth-child(4) {
  margin-top: 1vw;
}
.item-title {
  font-size: 1.4vw;
  color: #181052;
  font-weight: bold;
  margin-bottom: 2.5vh;
  letter-spacing: .2vw;
}
.textarea-input {
  /* margin-top: 2vh; */
  width: 40vw;
  height: 36vh;
  margin: 0 auto;
  box-sizing: border-box;
}
.textarea-input textarea {
  /* margin-top: 2vh; */
  width: 100%;
  height: 100%;
  padding: 1.46vw 1.87vw;
  resize: none;
  box-sizing: border-box;
  font-size: 1.14vw;
}
.history-feed-other {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-top: 1vh;
}
.other-btn,.feed-btn {
  width: 4vw;
  height: 3vh;
  border-radius: 50px;
  text-align: center;
  line-height: 3vh;
  border: 1px solid #B1B1B1;
  color: #B1B1B1;
  cursor: pointer;
  font-size: 1vh;
  box-sizing: border-box;
  box-shadow: 0 0.21vw 0.46vw 0.06vw rgb(0 0 0 / 20%);
}
.other-btn {
  margin-right: .5vw;
}
.commit-btn {
 margin: 0 auto;
 width: 13vw;
 height: 5vh;
 line-height: 5vh;
 border-radius: 50px;
 font-size: 1.2vw;
 font-weight: 400;
 color: #fff;
 background: #24C6B5;
 cursor: pointer;
 letter-spacing: 1vh;
 box-shadow: 0 0.21vw 0.46vw 0.06vw rgb(0 0 0 / 20%);
}
</style>