P0006/src/view/about.vue

<template>
  <el-main class="main-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>关于我们</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="card_menu">
      <el-col :span="4">
        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
          <div slot="header">
            <span>关于我们</span>
          </div>
          <!-- <div class="menu-item active">SICA简介</div> -->
          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
              {{item.channelName}}</div>
        </el-card>
      </el-col>
      <el-col :span="20" >
        <el-card shadow="never" style="margin: 0 10px" v-if="activeIndex == 0">
          <el-row>
            <el-col :span="12" v-for="(item, index) in dataList" :key="index" >
              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px'}">
                <img :src="item.aboutImg" style="border-radius: 10px;margin: 10px 0 10px 0;height: 100%;width: 100%"/>
              <p style="color: #333">{{item.title}}</p>
              </el-card>
            </el-col>

          </el-row>
        </el-card>

         <el-card class="article" shadow="never" style="border-radius: 8px" v-if="activeIndex == 1">
            <h2 class="title">上海市集成电路行业协会章程</h2>
            <div class="info">作者：{{InfoObj.author}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布日期：{{InfoObj.publishTime}}</div>
            <div class="content" v-html="InfoObj.content"></div>
            <!-- <div class="content">
                <div class="title">第一章&nbsp;&nbsp;总&nbsp;则<br /></div>
                <span><br />第一条&nbsp;&nbsp;本会的名称是上海市集成电路行业协会。（英文名称是SHANGHAI&nbsp;INTEGRATED&nbsp;CIRCUIT&nbsp;INDUSTRY&nbsp;&nbsp;ASSOCIATION，缩写是&nbsp;SICA。）<br /><br />第二条&nbsp;&nbsp;本会依照《社会团体登记管理条例》和《上海市促进行业协会发展规定》等规定，由本市集成电路行业同业企业，（从事集成电路的生产、设计、科研教学、开发、经营、应用）以及其他相关经济组织自愿组成、实行行业服务和自律管理的非营利性的社会团体法人。<br /><br />第三条&nbsp;&nbsp;本会的宗旨：遵守中华人民共和国宪法和法律，在行业管理中发挥积极作用，作为政府与企事业单位之间的桥梁和纽带，为增强企业的市场竞争力，为促进上海集成电路产业的发展提供服务。<br /><br />第四条&nbsp;&nbsp;本会的登记管理机关是上海市社会团体管理局，相关行业主管部门是上海市经济和信息化委员会。本会接受登记管理机关和相关行业主管部门的监督管理和业务指导。<br /><br />第五条&nbsp;&nbsp;本会的住所和活动地域：上海市。<br /><br/></span>
                <div class="title">第二章&nbsp;任务、业务范围、活动原则<br/></div>
                <span><br />第六条&nbsp;&nbsp;本会的任务：加强行业服务、行业自律、行业代表、行业协调：<br /><br />（一）宣传贯彻国家关于集成电路产业的各项方针、政策，促进企业提高市场竞争力。<br /><br />（二）收集整理国内外行业信息，进行产业发展的政策、环境、技术和市场等方面的研究，为会员传递信息，为政府部门决策和制定产业政策提供参考。<br /><br />（三）代表本行业向有关国家机关反映涉及行业利益的事项，提出经济政策和立法方面的意见和建议。<br /><br />（四）根据国家法律、法规，代表行业内相关企业向政府有关部门提出反倾销、反补贴调查或者采取保障措施的申请，协助政府有关部门完成相关调查。<br /><br />（五）制订并督促会员企业遵守诚信原则。对违反行规行约，损害行业整体形象的会员，采取相应的行业自律措施；对违法经营的企业，建议政府有关部门予以查处。<br /><br />（六）促进行业内集成电路产业链间的交流与合作，组织拓展、发布市场信息，推介行业产品。<br /><br />（七）开展知识产权保护工作，组织行业内各种层次的技术培训、进修和国际国内的合作与交流。<br /><br />（八）接受政府有关部门委托承担集成电路企业产品认定、产品评测、行业评估论证、技能资质考核、行业统计调查、行业发展规划和有关技术标准的制订等职能。<br /><br />第七条&nbsp;&nbsp;本会的业务范围：行业调研、产品评测、会展、技术培训、交流、合作，编辑出版、咨询服务，承担政府授权的职能。<br /><br />第八条&nbsp;本会的活动原则：<br /><br />（一）本会遵守宪法、法律、法规和国家政策，自觉遵守宪法确定的基本原则，自觉维护国家的统一、安全和民族的团结，自觉维护国家利益、社会公共利益以及其他组织和公民的合法权益，遵守社会公德和公序良俗，按照核准的章程开展公益性或者非营利性活动。<br /><br />（二）民主办会，实行民主集中制，建立民主决策、民主选举和民主管理制度，领导机构的产生和重大事项的决策，须经集体讨论，并按少数服从多数的原则作出决定。<br /><br />（三）本会开展活动时，诚实守信，公正公平，不弄虚作假，不损害国家、会员和个人利益。<br /><br />（四）本会遵循“自主办会”原则，工作自主、人员自聘、经费自筹。<br /><br /><br/></span>
                <div class="title">第三章&nbsp;&nbsp;会&nbsp;员<br /></div>
                <span><br />第九条&nbsp;&nbsp;本会由单位会员组成。<br /><br />第十条&nbsp;&nbsp;申请加入本会，必须具备下列条件：<br /><br />（一）应持有工商营业执照等相关证件。<br /><br />（二）自愿加入本会。<br /><br />（三）承认本会章程。<br /><br />（四）本行业同业企业以及其他相关经济组织。<br /><br />（五）在本会的业务领域内具有一定的影响。<br /><br />第十一条&nbsp;会员入会的程序：<br /><br />（一）提交入会申请书。<br /><br />（二）经理事会授权的秘书处审核同意，并发给同意吸收入会的有关证书。<br /><br />第十二条&nbsp;会员享有下列权利：<br /><br />（一）本会的选举权、被选举权和表决权。<br /><br />（二）参加本会的活动权。<br /><br />（三）获得本会服务的优先权。<br /><br />（四）查阅本会章程、规章制度、会员名册、理事名册、会议记录、会议决议、会议纪要、财务审计报告等知情权。<br /><br />（五）提议案权、建议权和监督权。<br /><br />（六）入会自愿、退会自由。<br /><br />（七）法律、法规、规章以及本会章程规定的其他权利。<br /><br />第十三条&nbsp;会员履行下列义务：<br /><br />（一）遵守本会的章程。<br /><br />（二）执行本会的决议。<br /><br />（三）维护本行业的合法权益。<br /><br />（四）完成本会交办的工作。<br /><br />（五）向本会反映情况，提供有关资料。<br /><br />（六）按规定缴纳会费。<br /><br />（七）法律、法规、规章以及本会章程规定的其他权利。<br /><br />第十四条&nbsp;&nbsp;本会会员不得利用其经营规模、市场份额等优势，限制其他会员在本会中发挥作用。<br /><br />第十五条&nbsp;&nbsp;会员退会应向本会递交书面函件，并交回会员有关证书。<br /><br />会员如在两年内无故不缴纳会费或不参加本会活动的，经理事会确认，视为自动退会。本会取消其会员资格。<br /><br />第十六条&nbsp;&nbsp;会员如有严重违反国家法律、法规、规章或本会章程的，经理事会三分之二以上与会者表决通过，取消其会员资格并公示。<br /><br />会员如对理事会取消会员资格决定不服，可提出申诉，由理事会作出答复，必要时提交会员大会审议后答复。<br /><br />第十七条&nbsp;&nbsp;本会建立完整的会员名册和会员诚信档案，并根据变化情况及时调整。</span
                >
            </div> -->
        </el-card>


      </el-col>


    </el-row>
  </el-main>
</template>

<script>
import moment from 'moment'
import {getChannelInformationsRequest, getChannelsRequest, getChannelSecond} from "../api/data";

export default {
  data () {
    return {
        titleList: [],
        activeIndex: 0,
        dataList: [],
        infoId: '',
        InfoObj: {}
    }
  },
  filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      }
    },
  methods: {
      async getChannelsRequest(){
          let res = await getChannelsRequest({current:1,size:100})
          if(res.code == 200){
              res.data.records.map((item) => {
                  if(item.channelName == '关于我们'){
                      this.getChannelSecond(item.id)
                  }else if(item.channelName == '协会章程'){
                      this.infoId= item.id
                  }
              })
          }
      },

      async getChannelSecond(id){
          let res = await getChannelSecond(id)
          if(res.code == 200){
            //   console.log(JSON.stringify(res.data))
              this.titleList = res.data
              if(this.titleList){
                this.getChannelInformationsRequest(this.titleList[0].id)
              }
              
          }
      },

      async getChannelInformationsRequest(id){
          let res = await getChannelInformationsRequest({channelId: id})
          if(res.code == 200){
              this.dataList = res.data.records
              if(this.activeIndex == 1){
                  this.InfoObj = {...this.dataList[0]}
                  console.log(this.InfoObj.publishTime)
                  this.InfoObj.publishTime = this.$moment(Number(this.InfoObj.publishTime)).format("YYYY年MM月DD")
              }
          }
      },

      changeType(index){
          this.activeIndex = index;
          
          if(index == 0){
              this.getChannelInformationsRequest(this.titleList[index].id)
          }else if(index == 1){
              this.getChannelInformationsRequest(this.infoId)
          }
      }
  },
  mounted() {
    this.getChannelsRequest()
  }
}
</script>
<style>
.title{
  color: #333 !important;
  font-weight: 700;
}
.article .title,.article .info{
  text-align: center;
  margin: 10px;
}
.article .info{
  color: #999;
}
.article .content p{
  text-indent: 2em;
  margin-bottom: 20px;
  line-height: 1.5rem;
}
.article .content span{
  line-height: 1.5rem;
}
</style>