uk_front/pages/home/FAQs.vue

<template>
  <div class="com-main com-width-1400 com-margin-auto">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item>FAQs</el-breadcrumb-item>
    </el-breadcrumb>
    <p class="title">FAQs</p>
    <div class="line"></div>
    <div v-show="issueInfo.length > 0">
      <div class="item" v-show="generalList.length > 0">
        <div class="item-title">
          <span></span>
          <span>General</span>
        </div>
        <el-collapse v-loading="listLoading">
          <el-collapse-item
            v-for="item in generalList"
            :key="item.id"
            @click.native="handleChange($event)"
          >
            <template slot="title">
              <i class="header-icon el-icon-circle-plus-outline"></i>
              <i class="header-icon el-icon-remove" style="display: none"></i>
              {{ item.issue }}
            </template>
            <div>
              {{ item.answer }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="item" v-show="orderingList.length > 0">
        <div class="item-title">
          <span></span>
          <span>Ordering</span>
        </div>
        <el-collapse v-loading="listLoading">
          <el-collapse-item
            v-for="item in orderingList"
            :key="item.id"
            @click.native="handleChange($event)"
          >
            <template slot="title">
              <i class="header-icon el-icon-circle-plus-outline"></i>
              <i class="header-icon el-icon-remove" style="display: none"></i>
              {{ item.issue }}
            </template>
            <div>
              {{ item.answer }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="item" v-show="artworkList.length > 0">
        <div class="item-title">
          <span></span>
          <span>Artwork</span>
        </div>
        <el-collapse v-loading="listLoading">
          <el-collapse-item
            v-for="item in artworkList"
            :key="item.id"
            @click.native="handleChange($event)"
          >
            <template slot="title">
              <i class="header-icon el-icon-circle-plus-outline"></i>
              <i class="header-icon el-icon-remove" style="display: none"></i>
              {{ item.issue }}
            </template>
            <div>
              {{ item.answer }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="item" v-show="paymentList.length > 0">
        <div class="item-title">
          <span></span>
          <span>Payment</span>
        </div>
        <el-collapse v-loading="listLoading">
          <el-collapse-item
            v-for="item in paymentList"
            :key="item.id"
            @click.native="handleChange($event)"
          >
            <template slot="title">
              <i class="header-icon el-icon-circle-plus-outline"></i>
              <i class="header-icon el-icon-remove" style="display: none"></i>
              {{ item.issue }}
            </template>
            <div>
              {{ item.answer }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="item" v-show="shippingReturnsList.length > 0">
        <div class="item-title">
          <span></span>
          <span>Shipping & Returns</span>
        </div>
        <el-collapse v-loading="listLoading">
          <el-collapse-item
            v-for="item in shippingReturnsList"
            :key="item.id"
            @click.native="handleChange($event)"
          >
            <template slot="title">
              <i class="header-icon el-icon-circle-plus-outline"></i>
              <i class="header-icon el-icon-remove" style="display: none"></i>
              {{ item.issue }}
            </template>
            <div>
              {{ item.answer }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div v-if="issueInfo.length == 0">
      <el-empty description="No Data"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      issueInfo: [],
      listLoading: true,
      generalList: [],
      orderingList: [],
      artworkList: [],
      paymentList: [],
      shippingReturnsList: [],
    };
  },
  async created() {
    await this.getInfoList();
  },
  methods: {
    getInfoList() {
      this.$axios
        .get("/api/others/issue/list")
        .then((res) => {
          if (res.code == 1) {
            this.issueInfo = res.result;
            this.issueInfo.forEach((item) => {
              if (item.id === 1) {
                this.generalList = item.issue;
              } else if (item.id === 2) {
                this.orderingList = item.issue;
              } else if (item.id === 3) {
                this.artworkList = item.issue;
              } else if (item.id === 4) {
                this.paymentList = item.issue;
              } else if (item.id === 5) {
                this.shippingReturnsList = item.issue;
              }
            });
            this.listLoading = false;
          }
        })
        .catch(() => {
          this.listLoading = false;
          this.issueInfo = [];
        });
    },
    handleChange(e) {
      let targetDom = e.currentTarget.children[0].children[0];
      if (targetDom.className.indexOf("is-active") > 0) {
       targetDom.children[0].style.display = "none";
        targetDom.children[1].style.display = "block";
      } else {
        targetDom.children[0].style.display = "block";
        targetDom.children[1].style.display = "none";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  height: 50px;
  font-size: 35px;
  font-family: Proxima Nova;
  font-weight: bold;
  color: #00213b;
  text-align: center;
  line-height: 50px;
}
.line {
  width: 99px;
  height: 4px;
  background: #e90000;
  margin: 15px auto;
}
.item {
  margin-bottom: 30px;
  .item-title {
    margin-bottom: 5px;
    span:nth-of-type(1) {
      display: inline-block;
      width: 3px;
      height: 13px;
      background: #e90000;
      border-radius: 2px;
    }
    span:nth-of-type(2) {
      height: 24px;
      font-size: 18px;
      font-family: Proxima Nova;
      font-weight: bold;
      color: #333333;
      line-height: 24px;
    }
  }
}
:deep(.el-collapse) {
  border: 1px solid #e3e3e3;
  background: rgba(255, 255, 255, 0.05);
  .el-collapse-item {
    font-family: Proxima Nova;
    font-weight: 400;
    color: #333333;
    .el-collapse-item__header {
      font-size: 16px;
      height: 40px;
      padding-left: 10px;
      border-bottom: 1px solid #e3e3e3;
      line-height: 40px;
      .header-icon {
        margin-right: 5px;
      }
      .el-collapse-item__arrow {
        display: none;
      }
    }
    .el-collapse-item__header.is-active {
      background: rgba(0, 33, 59, 0.05);
    }
    .el-collapse-item__content {
      padding-left: 25px;
      padding-top: 5px;
      font-size: 14px;
      background: rgba(0, 33, 59, 0.05);
    }
  }
}
:deep(.el-pagination.is-background) {
  .el-pager {
    li.number {
      background-color: #f8f8f8;
      border-radius: 50%;
      color: #a7a7a7;
    }
    li:not(.disabled).active {
      background-color: #00213b;
      color: #d4d7da;
    }
  }
  .btn-prev,
  .btn-next {
    border-radius: 50%;
    background-color: #fff;
    .el-icon-arrow-left:before {
      content: "";
    }
    .el-icon-arrow-right:before {
      content: "";
    }
  }
}
</style>