copyright-official-website/src/components/DaiLiShang.vue

<template>
  <div class="dai-li-shang">
    <div class="box-top">
      <div class="title">
        <h4>AI著作权·代理商展示</h4>
        <p>灵活搭建更高效的著作权办理平台</p>
      </div>
    </div>
    <div class="box-bottom">
      <div class="box dlslist">
        <ul>
          <li v-for="(item, index) in dlsList" :key="index">
            <div class="title">
              <div class="logo">
                <img :src="item.logo" alt="logo图片">
              </div>
              <div class="message">
                <h4>{{ item.basicsName }}</h4>
                <span class="row1">
                  <i class="icon1"></i>
                  <em>{{ item.basicsContactPerson }}</em>
                  <i class="icon2"></i>
                  <em>{{ item.basicsContactNumber }}</em>
                </span>
                <span class="row2">
                  <i class="icon3"></i>
                  <em>{{ item.basicsAddresss }}</em>
                </span>
              </div>
            </div>
            <!-- <div class="content">
              腾众理有限公司[注册号:***** ***** 9831]是一家经深圳市市场监督管理局批准的合法代理机构，本公司由多年行业的咨询代理人士与资深师共同设立经营。
            </div> -->
            <div class="btnrow">
              <button id="btn" type="button" @click="showDetails(item.basicsId)" :soleId="item.basicsId">查看详情</button>
            </div>
          </li>
          
        </ul>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
              v-model:page-size="pageSize"
              :page-sizes="[1,2,4,6,8,10]"
              :current-page="currentPage"             
              layout="total, sizes, prev, pager, next, jumper"
              :total=total>
          </el-pagination>
        </div>


      </div>
      <!-- 详情 -->
      <div class="details" v-if="showDetails" style="display: none;">
        <div class="lable">
          <span>
            <em @click="dlslist()">代理商展示</em>&emsp;>&emsp;详情
          </span>
        </div>
        <div class="text" v-for="(itemContent, index) in detailsContent" :key="index">
          <div class="title">
              <div class="logo">
                <img :src="itemContent.logo" alt="logo图片" id="logo111">
              </div>
              <div class="message">
                <h4 id="gsname111">{{ itemContent.basicsName }}</h4>
                <span class="row1">
                  <i class="icon1"></i>
                  <em id="name111">{{ itemContent.basicsContactPerson }}</em>
                  <i class="icon2"></i>
                  <em id="phone111">{{ itemContent.basicsContactNumber }}</em>
                </span>
                <span class="row2">
                  <i class="icon3"></i>
                  <em id="dz111">{{ itemContent.basicsAddresss }}</em>
                </span>
              </div>
              <div class="price">
                <div class="general">
                  <span>{{itemContent.priceDTOS[0].priceTypeText}}&emsp;|&emsp;￥<em>{{itemContent.priceDTOS[0].typePrice}}</em>元</span>
                </div>
                <div class="urgent">
                  <span>{{itemContent.priceDTOS[1].priceTypeText}}&emsp;|&emsp;￥<em>{{itemContent.priceDTOS[1].typePrice}}</em>元</span>
                </div>
              </div>
          </div>
          <div class="content" id="nr111" v-html="itemContent.basicsIntro">
            
          </div>
          <div class="tupian" v-for="(itemzZ, index) in detailsContent" :key="index">
            <img id="zz111" class="zz111" v-for="(itemTp, index) in itemzZ.ziZhi" :key="index" :src="itemTp" alt="资质图片">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElButton, ElInput } from 'element-plus'
import axios from 'axios'
import { ref, computed, onMounted } from 'vue'
export default {
  components: { ElButton,ElInput },
  data() {
    return{
      dlsList: [],//存储当前页的数据
      total: 0, //总数据量
      pageSize: 6,//每页显示的数量
      currentPage: 1, //当前页码

      showDetails111: false, // 控制详情显示的标志
      selectedId: null,// 存储选中的ID
      detailsContent: [], // 存储详情数据
      // imageSourse:[] //存储img地址
    }
   
  },
  methods: { 
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1;
      this.fetchData();
    },

    fetchData() {
      const url = `http://121.36.71.250:58086/systemaiagent/api/basics/listpage-audit-yes/${this.pageSize}/${this.currentPage}`
      axios.get(url)
      .then(response => {
        // let datarows = response.data.rows
        // datarows.forEach(item => {
        //   item.logo = `http://192.168.0.115:9000/systemaiagent/route/file/download/true/${item.basicsLogo}`
        //   // item.ziZhi = `http://192.168.0.115:9000/systemaiagent/route/file/download/true/${item.basicsCertification.split(',')[0]}`
        //   item.ziZhi = item.basicsCertification.split(',').map(cert => {
        //       return `http://192.168.0.115:9000/systemaiagent/route/file/download/true/${cert}`;
        //     });
        // })

        let datarows = response.data.rows.map(item => {
          return {
            ...item,
            logo: `http://121.36.71.250:58086/systemaiagent/route/file/download/true/${item.basicsLogo}`,
            ziZhi: item.basicsCertification.split(',').map(cert => {
            return `http://121.36.71.250:58086/systemaiagent/route/file/download/true/${cert}`;
          })
          }
        })

        // for(let i = 0; i < datarows.length; i ++) {
        //   let logo = `http://192.168.0.115:9000/systemaiagent/route/file/download/true/${datarows[i].basicsLogo}`
        //   // let ziZhi = `http://192.168.0.115:9000/systemaiagent/route/file/download/true/${datarows[i].basicsCertification.split(',')[0]}`

        //   datarows[i]['logo']= logo
        //   // datarows[i]['ziZhi']= ziZhi
        // }
        
        console.log(response.data);
        console.log(response.data.rows);
        // this.dlsList = datarows; 
        this.dlsList = [...datarows]; 
        this.total = response.data.total; 

        this.updatePagination();
        
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
    },

    updatePagination() {
      this.pagedItems = this.dlsList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    showDetails(id) {
      const dlslist = document.querySelector('.dlslist')
      const details = document.querySelector('.details')
      dlslist.style.display = 'none'
      details.style.display = 'block'

      this.selectedId = id;
      this.showDetails111 = true;
      // 更新详情内容
      this.detailsContent = this.dlsList.filter(item => item.basicsId === id);
      // this.imageSourse = this.detailsContent.ziZhi
      // console.log(detailsContent);
      // this.selectedItem = this.dlsList.find(item => item.basicsId === id);
     
    },
    hideDetails() {
      this.selectedId = null;
      this.showDetails111 = false;
      this.detailsContent = [];
    },
    certUrl(cert) {
      return `http://121.36.71.250:58086/systemaiagent/route/file/download/true/${cert}`;
      // return `http://192.168.0.115:9000/systemaiagent/route/file/download/true/${cert}`;
    },

    dlslist() {
      const dlslist = document.querySelector('.dlslist')
      const details = document.querySelector('.details')
      dlslist.style.display = 'block'
      details.style.display = 'none'
    }

  },
  mounted() {
    this.fetchData()
  },

}
</script>

<style scoped> 
.dai-li-shang {
  position: relative;
}
.dai-li-shang .box-top {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 605px;
  background: url(/assets/img/dailishang-bj.png) no-repeat;
  background-size: cover;
}
.dai-li-shang .box-top .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 1000px;
  height: 150px;
  margin: 0 auto;
  /* border: 2px solid red; */
}
.dai-li-shang .box-top h4 {
  width: 500px;
  font-size: 30px;
  color: #74491a;
  margin-bottom: 10px;
}
.dai-li-shang .box-top p {
  width: 500px;
  font-size: 16px;
  letter-spacing: 5px;
  color: #9a7148;
}
.dai-li-shang .box-bottom {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  /* height: 1300px; */
  background-color: #f5f5f5;
}
.dai-li-shang .box-bottom .box {
  position: relative;
  top: -200px;
  display: flex;
  flex-direction: column;
  width: 1000px;
  /* height: 1350px; */
  /* border: 2px solid red; */
  background-color: #FFF;
  padding: 15px;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.dai-li-shang .box-bottom .box ul {
  /* position: absolute; */
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-content: start;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 10px;
  
}
.dai-li-shang .box-bottom .box ul li {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 460px;
  height: 220px;
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f9f9f9;
}

.dai-li-shang .box-bottom .box ul li:nth-child(2n) {
  margin-left: 20px;
}
.dai-li-shang .box-bottom .box ul li .title {
  display: flex;
  height: 140px;
  
  /* background-color: pink; */
}

.dai-li-shang .box-bottom .box ul li .title .logo {
  width: 120px;
  height: 120px;
  margin: 10px;
  border-radius: 8px;
  /* border: 0.5px solid rgba(0,0,0,.1); */
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.dai-li-shang .box-bottom .box ul li .message {
  display: flex;
  flex-direction: column;
  width: 290px;
  margin: 10px 10px 10px 0;
  /* background-color: skyblue; */
}
.dai-li-shang .box-bottom .box ul li .message h4 {
  font-size: 20px;
  margin: 5px 10px;
}

.dai-li-shang .box-bottom .box ul li .message span {
  display: flex;
  /* align-content: center; */
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  margin-top: 8px;
}
.dai-li-shang .box-bottom .box ul li .message span i {
  display: block;
  width: 16px;
  height: 16px;
  margin: auto 10px;
  background: url(/assets/img/dlsicon1.png) no-repeat;
  background-size: contain;
}
.dai-li-shang .box-bottom .box ul li .message .row1 .icon2 {
  background: url(/assets/img/dlsicon2.png) no-repeat;
  background-size: contain;
}
.dai-li-shang .box-bottom .box ul li .message .row2 .icon3 {
  background: url(/assets/img/dlsicon3.png) no-repeat;
  background-size: contain;
}
.dai-li-shang .box-bottom .box ul li .message span em {
  display: block;
}
.dai-li-shang .box-bottom .box ul li .content {
  padding: 10px;
  margin: 10px 0;
  border-top: 0.25px solid rgba(0,0,0,.1);
  /* border-top: 0.25px solid rgba(255,255,255); */
  /* background-color: green; */
}
.dai-li-shang .box-bottom .box ul li .btnrow {
  position: relative;
  height: 100%;
  /* background-color: pink; */
}
.dai-li-shang .box-bottom .box ul li #btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 90px;
  height: 30px;
  font-size: 13px;
  border-radius: 15px;
  margin: 5px 0; 
  border: none;
  color: #FFF;
  background-color: #febe54;
  cursor: pointer;
}
.dai-li-shang .box-bottom .box ul li #btn:hover {
  /* opacity: 0.6; */
  color: red;
}

/* 详情 */
.details {
  position: relative;
  display: flex;
  flex-direction: column;
  top: -100px;
  bottom: 50px;
  display: flex;
  width: 1000px;
  background-color: #FFF;
  padding: 20px 30px;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.details .lable {
  height: 40px;
  font-size: 16px;
  /* background-color: skyblue; */
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.details .lable span em {
  color: skyblue;
  cursor: pointer;
}
.details .lable span em:hover {
  color: red;
}
.details .text {
  display: flex;
  flex-direction: column;
  
}
.details .text .title {
  display: flex;
  height: 180px;
  /* border: 1px solid red; */
  border-bottom: 0.5px solid rgba(0,0,0,.1);
}
.details .text .title .logo {
  width: 140px;
  height: 140px;
  margin: 20px;
  margin-right: 10px;
  /* background-color: pink; */
}
.details .text .title .message {
  width: 450px;
  margin: 20px 0;
  /* background-color: pink; */
}
.details .text .title .message h4 {
  font-size: 18px;
  margin: 12px;
}

.details .text .title .message span {
  display: flex;
  /* align-content: center; */
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  margin-top: 10px;
}
.details .text .title .message span i {
  display: block;
  width: 16px;
  height: 16px;
  margin: auto 10px;
  background: url(/assets/img/dlsicon1.png) no-repeat;
  background-size: contain;
}
.details .text .title .message .row1 .icon2 {
  background: url(/assets/img/dlsicon2.png) no-repeat;
  background-size: contain;
}
.details .text .title .message .row2 .icon3 {
  background: url(/assets/img/dlsicon3.png) no-repeat;
  background-size: contain;
}
.details .text .title .message span em {
  display: block;
}
.details .text .title .price {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 280px;
  margin: 20px;
  /* background-color: pink; */
}
.details .text .title .price .general {
  width: 240px;
  height: 46px;
  line-height: 42px;
  text-align: center;
  margin: 0 auto;
  border: 2px solid #fd6767;
  border-radius: 23px;
  font-size: 14px;
  color: #fd6767;
}
.details .text .title .price .urgent {
  width: 240px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  margin: 0 auto;
  /* border: 2px solid #fd6767; */
  background-color: #fd6767;
  border-radius: 23px;
  font-size: 14px;
  color: #FFF;
}
/* .details .text .title .price .general span,
.details .text .title .price .urgent span {
  margin: auto;
  border: 1px solid #333;
} */
.details .text .title .price .general em,
.details .text .title .price .urgent em {
  font-size: 20px;
  font-weight: 700;
}
.details .text .content {
  margin: 10px 0;
  /* border: 1px solid red; */
}
.details .text .content p {
  text-indent: 2em;
}
.details .text .tupian {
  display: flex;
  flex-direction: row;
  justify-content: start;
  flex-wrap: wrap;
  width: 100%;
  /* background-color: pink; */
  /* border: 1px solid red; */
}
.details .text .tupian img {
  width: 280px;
  height: 380px;
  margin: 16px;
  /* background-color: skyblue; */
  /* border: 1px solid red; */
}

.dai-li-shang .box-bottom .box .pagination {
  position: relative;
  right: 25px;
  height: 80px;
  line-height: 80px;
  margin-top: 50px;
  display: flex;
  justify-content: flex-end;
}
</style>