Vue中使用v-for制作動態手風琴效果


<template>
  <div class="problem-content">
    <icm-navbar
      title="常見問題"
      @leftClick="goBack">
      <template #right>
        <span></span>
      </template>
    </icm-navbar>
  <icm-scroll
      class="demo-scroll-content"
      ref="scrollView"
      :scrolling-x="false"
      auto-reflow
    >
    <div class="problemList" v-for="(item,index) in Faq" :key="index">
      <p @click="toShow(item,index)">
      <span>{{item.about}}</span>
      <span><svg-icon :icon-class="item.isSubShow ? 'down_arrow@1x' :'up_arrow@1x'"></svg-icon></span>
    </p>
    <icm-collapse-transition>
        <div class="box" v-show="item.isSubShow">
        {{item.answer}}
        </div>
      </icm-collapse-transition>
    </div>
    </icm-scroll>
  </div>
</template>
<script>
export default {
  data () {
    return {
      Faq: [
        { isSubShow: false, about: 'Q:非公司員工是否可通過次入口申請公司客房?', answer: 'A:暫不支持,該版本僅支持在MO提單且出差人為公司正式員工,非公司正式員工可走原有MO客房申請流程。' },
        { isSubShow: false, about: 'Q:客房到期時是否可以續期?', answer: 'A:如需續住,請在退房時間結束前一天再次擬制申請,同時備注續住房間號(房源充足情況下可優先安排,房源已滿時需另行協商安排);未提前擬制申請視為無續住需求。' },
        { isSubShow: false, about: 'Q:退房時間規定。', answer: 'A:各區域在14:00前退房' },
        { isSubShow: false, about: 'Q:已分配客房后,取消客房預訂規范。', answer: 'A:已分配的客房,用戶如取消,需在入住當日前16:00取消客房並系統對應至客房管理員;如果違反取消政策,即使沒有入住,也需要其個人(對私)或部門(對公)承擔費用。' },
        { isSubShow: false, about: 'Q:推送了客房預訂通知,沒有預訂客房直接定了酒店會造成什么后果?', answer: 'A:需填寫不選擇公司客房的原因。' },
        { isSubShow: false, about: 'Q:推送了客房預訂通知,去系統中預訂不到客房怎么辦?', answer: 'A:客房系統若無房源,請前往Otravel系統預訂協議酒店。' },
        { isSubShow: false, about: 'Q:客房預訂成功,但是沒有去入住也沒有取消會造成什么后果?', answer: 'A:需要其個人(對私)或部門(對公)承擔費用。' },
        { isSubShow: false, about: 'Q:客房的使用是如何計算費用的?', answer: 'A:一般按照區域和房間類型定價。特殊情況說明:若兩人入住則費用均攤;若連續入住超過30天則采用特殊定價政策,入住期間每日費用單價會上調。' },
        { isSubShow: false, about: 'Q:客房預訂成功以后還能取消嗎?', answer: 'A:可以,必須在入住當日16:00以前取消。可通過TT或電話聯系酒店管理員取消。' },
        { isSubShow: false, about: 'Q:客房入住后想延長入住期限怎么辦?', answer: 'A:在退房時間結束前一天再次擬制申請,同時備注房間號即可。' },
        { isSubShow: false, about: 'Q:若客房申請時間需超過15天怎么辦?', answer: 'A:客房申請入住時間不得超過15天,若超過需要重新擬制客房使用申請。如需續住直接在原始入住單上續住即可。' },
        { isSubShow: false, about: 'Q:為什么去北京出差提交的客房申請被拒絕?', answer: 'A:北京客房的入住時間需大於3天,否則不予通過。' },
        { isSubShow: false, about: 'Q:國內派駐人員可以入住公司客房嗎?', answer: 'A:派駐時間在一個月內可以申請公司客房,若超過一個月需要入住職員宿舍。' },
        { isSubShow: false, about: 'Q:我在外地派駐期間,需要到外地出差,出差期間客房費用如何計算?', answer: 'A:客房申請期間若有空住行為,費用照常結算。' },
        { isSubShow: false, about: 'Q:提交客房申請時,能否在申請頁添加入住人?', answer: 'A:入住人的人員信息是按照出差申請單上來的,出差申請單上的出差人員和入住人員有差異時,建議重新填報出差申請。' },
        { isSubShow: false, about: 'Q:客服人員一直沒有處理我的客房申請怎么辦?', answer: 'A:界面上有聯系客服人員的入口,點擊' }
      ]
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    toShow: function (item, index) {
      this.Faq.forEach(i => {
        if (i.isSubShow !== this.Faq[index].isSubShow) {
          i.isSubShow = false
        }
      })
      item.isSubShow = !item.isSubShow
      this.litter = !this.litter
    }
  }
}

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM