ltlzx
/
wenhuayun_index
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
0 Tags
1.3 MiB
 
 
 
Tree: 4d64f54053
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4d64f54053'
${ noResults }
wenhuayun_index/src/components/page/ClassificationDetails.vue

422 lines
11 KiB
Raw Blame History

<template>
<div class="body">
<div>
<div class="seach">
<div class="seach_left">
<img src="../../assets/img/all_zc.png" alt="">
<span>标的类型</span>
</div>
<div class="seach_right">
<el-radio-group v-model="query.serial_type" class="seach_group" @change="changeDate(3)">
<el-radio-button label="" >不限</el-radio-button>
<el-radio-button label="1">知识产权（著作权、专利权、专有技术、商标专有权）</el-radio-button>
<el-radio-button label="2">销售网络及客户关系</el-radio-button>
<el-radio-button label="3">特许经营权</el-radio-button>
<el-radio-button label="4">合同权益</el-radio-button>
<el-radio-button label="5">域名</el-radio-button>
<el-radio-button label="6">商誉</el-radio-button>
<el-radio-button label="7">时间和档期</el-radio-button>
<el-radio-button label="8">其它</el-radio-button>
</el-radio-group>
</div>
</div>
<div class="seach">
<div class="seach_left">
<img src="../../assets/img/all_zc1.png" alt="">
<span>标的所在地</span>
</div>
<div class="seach_right">
<el-radio-group class="seach_group" @change="changeDate(2)">
<el-radio-button >不限</el-radio-button>
</el-radio-group>
<el-select placeholder="选择具体省份" clearable filterable v-model="query.province" class="select_city" @change="changeDate(0)">
<el-option
v-for="item in province"
:key="item.id"
:label="item.name"
:value="item.province_code" >
</el-option>
</el-select>
<el-select placeholder="选择具体城市" clearable filterable v-model="query.city" class="select_city" @change="changeDate(1)">
<el-option
v-for="item in city"
:key="item.id"
:label="item.name"
:value="item.city_code" >
</el-option>
</el-select>
<el-select placeholder="选择具体区镇" clearable filterable v-model="query.area" class="select_city" @change="changeDate(3)">
<el-option
v-for="item in area"
:key="item.id"
:label="item.name"
:value="item.area_code">
</el-option>
</el-select>
</div>
</div>
<div class="seach">
<div class="seach_left">
<img src="../../assets/img/all_zc2.png" alt="">
<span>标的状态</span>
</div>
<div class="seach_right">
<el-radio-group v-model="query.asset_status" class="seach_group" @change="changeDate(3)">
<el-radio-button label="" >不限</el-radio-button>
<el-radio-button :label="1">挂牌中</el-radio-button>
<el-radio-button :label="2">交易中</el-radio-button>
<el-radio-button :label="3">已成交</el-radio-button>
<el-radio-button :label="4">已摘牌</el-radio-button>
</el-radio-group>
</div>
</div>
</div>
<div class="seach1">
<div class="seach1_item">
<span>
全部资产 （
<span class="seach1_item_span">{{pageTotal}}</span>
）
</span>
</div>
<div class="seach1_item">
<el-select placeholder="" v-model="query.sort" @change="changeDate(3)">
<el-option :key="0" label="标的价格升序" value="create_time asc"></el-option>
<el-option :key="1" label="标的价格降序" value="create_time desc"></el-option>
<el-option :key="2" label="挂牌时间升序" value="price asc"></el-option>
<el-option :key="3" label="挂牌时间降序" value="price desc"></el-option>
</el-select>
</div>
<div class="seach1_item">
<el-date-picker
v-model="query.date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
value-format="yyyy-MM-dd"
@change="changeDate(3)"
:default-time="['00:00:00', '23:59:59']"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="seach1_item">
<span>价格</span>
<el-input
class="seach_input"
v-model="query.min_price">
<span slot="prefix" class="el-input__icon ">￥</span>
</el-input>
<span>-</span>
<el-input
class="seach_input"
v-model="query.max_price">
<span slot="prefix" class="el-input__icon ">￥</span>
</el-input>
<button @click="changeDate(3)" class="seach_button">确定</button>
</div>
</div>
<div class="tabs">
<div class="tabs_item" @click="goDetails(item.id)" v-for="(item,index) in listingList" :key="index">
<img :src="item.serial_img" alt="" class="tabs_item_img">
<div class="tabs_item_lable">{{item.serial_number}}</div>
<div class="tabs_item_content">
<p class="tabs_item_content_title">{{item.serial_name}}</p>
<p class="tabs_item_content_p">
<span>资产价格： </span>
<span class="tabs_item_content_span">￥</span>
<span class="tabs_item_content_span tabs_item_content_span1">{{item.price}}</span>
</p>
<p class="tabs_item_content_p">
<span>标的类型： </span>
<span class="tabs_item_content_span2 tabs_item_content_span3">{{item. serial_type_name}}</span>
</p>
<p class="tabs_item_content_p">
<span>所在地： </span>
<span class="tabs_item_content_span2 tabs_item_content_span3">{{item.address}}</span>
</p>
<p class="tabs_item_content_p">
<span>有效日期： </span>
<span class="tabs_item_content_span2 ">{{item.effective_date}}前</span>
</p>
</div>
</div>
</div>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="query.page"
:page-size="query.limit"
:total="pageTotal"
@current-change="handlePageChange"
></el-pagination>
</div>
</div>
</template>
<script>
import {assetClassInfo,getProvince,getCity,getArea,} from '../../api/index'
export default {
data(){
return{
query:{
page:1,
limit:12,
province:'',
city:'',
area:'',
serial_type:'',
asset_status:'',
date:'',
min_price:'',
max_price:'',
sort:'create_time desc'
},
pageTotal:0,
listingList:[],
province:[],
city:[],
area:[],
}
},
created(){
this.getData()
this.getProvince();
},
methods:{
changeDate(type){
if(type==0){
this.getCity()
}else if(type==1){
this.getArea()
}else if(type==2){
this.query.province=''
this.query.city=''
this.query.area=''
}
console.info(this.query)
this.getData()
},
getProvince(){
getProvince().then(res => {
if(res.code==100){
this.province=res.list
}
})
},
getCity(){
let data={
code:this.query.province
}
getCity(data).then(res=>{
if(res.code==100){
this.city=res.list
}
})
},
getArea(){
let data={
code:this.query.city
}
getArea(data).then(res=>{
if(res.code==100){
this.area=res.list
}
})
},
getData(){
assetClassInfo(this.query).then(res => {
console.info(res)
if(res.code==100){
this.listingList=res.data.list;
this.pageTotal=res.data.count
}else{
this.$message.error(res.msg)
}
})
},
// 分页导航
handlePageChange(val) {
this.$set(this.query, 'page', val);
// this.getData();
},
goDetails(id){
this.$router.push({path:'/AssetDetails',query:{id:id}})
}
}
}
</script>
<style scoped>
.body{
width: 1200px;
margin: 0 auto;
}
.seach_button{
width: 60px;
height: 30px;
font-size: 12px;
color: #333333;
background-color: transparent;
border:1px solid #D7D7D7;
cursor: pointer;
}
.seach_input{
width: 100px;
margin: 0 15px;
}
.seach1{
width: 100%;
height: 50px;
background: #F2F2F2;
border: 1px solid #D7D7D7;
box-sizing: border-box;
display: flex;
align-items: center;
}
.seach1_item{
padding: 0 15px;
display: flex;
align-items: center;
border-right: 1px solid #D7D7D7;
font-size: 12px;
height: 100%;
}
.seach1_item_span{
color: #C94C4C;
}
.seach1_item:last-child{
border-right: none;
}
.select_city{
margin: 0 15px;
}
.seach{
padding: 25px 0;
border-bottom: 1px solid #D7D7D7;
display: flex;
}
.seach:last-child{
border-bottom: none;
}
.seach_left{
display: flex;
align-items: center;
font-weight: 650;
font-size: 14px;
color: #C94C4C;
width: 130px;
margin-right: 20px;
}
.seach_group >>> .el-radio-button--small .el-radio-button__inner{
border: none;
border-radius: 0;
}
.seach_group >>> .el-radio-button__orig-radio:checked+.el-radio-button__inner{
color: #FFF;
background-color: #C94C4C;
box-shadow: none;
}
.seach_left img{
width: 17px;
height: 17px;
margin-right: 5px;
}
.el-dropdown-link{
color: #EAB1B1;
cursor: pointer;
}
.tabs{
margin-top: 20px;
display: flex;
flex-wrap: wrap;
/* justify-content: space-between; */
}
.tabs_item{
width: 283px;
height: 300px;
border: 1px solid #E9B7B7;
margin-bottom: 20px;
box-sizing: border-box;
position: relative;
border-radius: 5px;
cursor: pointer;
margin-right: 20px;
}
.tabs_item:nth-child(4n+4){
margin-right: 0;
}
.tabs_item_img{
width: 100%;
height: 170px;
border-radius: 5px 5px 0 0;
}
.tabs_item_lable{
width: 100px;
height: 25px;
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: #FFFFFF;
background: #C94C4C;
z-index: 100;
line-height: 25px;
text-align: center;
}
.tabs_item_lable::after{
content: '';
border-top: 12.5px solid transparent;
border-left: 10px solid #C94C4C;
border-bottom: 12.5px solid transparent;
position: absolute;
top: 0;
left: 100px;
}
.breadcrumb{
margin-top: 30px;
}
.el-breadcrumb{
font-size: 18px;
}
.tabs_item_content{
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
height: 150px;
margin-top: -40px;
/* padding: 10px 10px; */
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
/* padding-bottom: 10px; */
}
.tabs_item_content_title{
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 14px;
background: rgba(238, 238, 238, 0.5);
box-sizing: border-box;
padding: 10px;
}
.tabs_item_content_p{
color: #7F7F7F;
font-size: 12px;
padding-left: 10px;
}
.tabs_item_content_span{
color: #C94C4C;
}
.tabs_item_content_span1{
font-size: 18px;
}
.tabs_item_content_span2{
color: #333333;
}
.tabs_item_content_span3{
font-weight: bold;
}
</style>