549 lines
15 KiB
Vue
549 lines
15 KiB
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> > 详情
|
|
</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}} | ￥<em>{{itemContent.priceDTOS[0].typePrice}}</em>元</span>
|
|
</div>
|
|
<div class="urgent">
|
|
<span>{{itemContent.priceDTOS[1].priceTypeText}} | ￥<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> |