532 lines
21 KiB
Vue
532 lines
21 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" >
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click="handleBack"></image>
|
||
<div class="pickers" v-if="isShowPicker">
|
||
<div class="pick" @click="handleChangeService" :value="selectIndex" :range="array" range-key="name">
|
||
<view class="picker">
|
||
<p class="pickTitle">{{info.SERVERPART_NAME}}</p>
|
||
{{array[selectIndex].name?array[selectIndex].name:''}}
|
||
</view>
|
||
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="topImg">
|
||
<image class="topDefaultBg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/default.png"></image>
|
||
</div>
|
||
<div class="info">
|
||
<div class="top">
|
||
<div class="left">
|
||
<p class="title">{{info.SERVERPART_NAME}}</p>
|
||
<text class="status">营业中</text>
|
||
</div>
|
||
<div class="iconBox">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/map.svg"></image>
|
||
</div>
|
||
</div>
|
||
<p class="address">{{info.ServerpartInfo.EXPRESSWAY_NAME}}</p>
|
||
<div class="typeList">
|
||
<div class="typeItem" v-for="(item,index) in typeList" :key="index" v-if="item.isShow">
|
||
<image class="img" :src="item.url"></image>
|
||
<text class="text">{{item.name}}</text>
|
||
</div>
|
||
</div>
|
||
<div class="baseInfo">
|
||
<p class="title">基本信息</p>
|
||
<div class="word">
|
||
<p class="subTitle">取水方式</p>
|
||
<text class="value">{{info.ServerpartInfo.WATERINTAKE_TYPE===1?'自来水':info.ServerpartInfo.WATERINTAKE_TYPE===2?'井水':'' }}</text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitle">污水处理</p>
|
||
<text class="text">{{info.ServerpartInfo.SEWAGEDISPOSAL_TYPE===1?'市政':info.ServerpartInfo.SEWAGEDISPOSAL_TYPE===2?'污水处理设备':''}}</text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitle">市区县镇</p>
|
||
<text class="text">{{info.ServerpartInfo.SERVERPART_ADDRESS?info.ServerpartInfo.SERVERPART_ADDRESS:'' }}</text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitle">管理单位</p>
|
||
<text class="text">{{info.ServerpartInfo.MANAGERCOMPANY?info.ServerpartInfo.MANAGERCOMPANY:'' }}</text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitle">产权单位</p>
|
||
<text class="text">{{info.ServerpartInfo.OWNEDCOMPANY?info.ServerpartInfo.OWNEDCOMPANY:'' }}</text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitle">介绍说明</p>
|
||
<text class="text">{{info.ServerpartInfo.SERVERPART_INFO?info.ServerpartInfo.SERVERPART_INFO:'' }}</text>
|
||
</div>
|
||
</div>
|
||
<div class="areaInfo" style="margin-top: 16px">
|
||
<p class="title">面积信息</p>
|
||
<div class="word">
|
||
<p class="subTitleArea">占地面积</p>
|
||
<text class="value" v-if="info.ServerpartInfo.FLOORAREA">{{info.ServerpartInfo.FLOORAREA }}<text style="margin-left: 4px">m²</text></text>
|
||
<text class="value" v-else></text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitleArea">停车场面积</p>
|
||
<text class="value" v-if="info.ServerpartInfo.SHAREAREA">{{info.ServerpartInfo.SHAREAREA}}<text style="margin-left: 4px">m²</text></text>
|
||
<text class="value" v-else></text>
|
||
</div>
|
||
<div class="word">
|
||
<p class="subTitleArea">建筑面积</p>
|
||
<text class="value" v-if="info.ServerpartInfo.SERVERPART_AREA">{{info.ServerpartInfo.SERVERPART_AREA }}<text style="margin-left: 4px">m²</text></text>
|
||
<text class="value" v-else></text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="service">
|
||
<div class="serviceItem" v-for="(item,index) in info.RegionInfo" :key="index" :style="{marginTop:index!==0?'32px':''}">
|
||
<p class="title">{{item.SERVERPART_REGIONNAME}}</p>
|
||
<div class="box">
|
||
<div class="left">
|
||
<image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceHotal.svg"></image>
|
||
<text class="textTitle">服务信息</text>
|
||
</div>
|
||
<div class="right">
|
||
<div class="item">
|
||
<p :class="item.HASPANTRY?'text':'unText'">男厕({{item.HASPANTRY?item.HASPANTRY:'0' }})</p>
|
||
<p :class="item.HASTHIRDTOILETS?'text':'unText'">第三卫生间</p>
|
||
<p :class="item.HASCHILD?'text':'unText'">车辆维修</p>
|
||
<p :class="item.HASWATERROOM?'text':'unText'">开水器({{item.HASWATERROOM?item.HASWATERROOM:'0' }})</p>
|
||
</div>
|
||
<div class="item">
|
||
<p :class="item.HASWIFI?'text':'unText'">女厕({{item.HASWIFI?item.HASWIFI:'0' }})</p>
|
||
<p :class="item.TOILETCOUNT?'text':'unText'">潮汐厕位({{item.TOILETCOUNT?item.TOILETCOUNT:'0' }}）</p>
|
||
<p :class="item.HASSHOWERROOM?'text':'unText'">车辆加水</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="left">
|
||
<image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceCar.svg"> </image>
|
||
<text class="textTitle">车位信息</text>
|
||
</div>
|
||
<div class="right">
|
||
<div class="item">
|
||
<p :class="item.SMALLPARKING?'text':'unText'">轿车车位({{item.SMALLPARKING?item.SMALLPARKING:'0' }})</p>
|
||
<p :class="item.TRUCKPACKING?'text':'unText'">货车车位({{item.TRUCKPACKING?item.TRUCKPACKING:'0' }})</p>
|
||
|
||
</div>
|
||
<div class="item">
|
||
<p :class="item.PACKING?'text':'unText'">客车车位({{item.PACKING?item.PACKING:'0' }})</p>
|
||
<p :class="item.DANPACKING?'text':'unText'">危化品车位({{item.DANPACKING?item.DANPACKING:'0' }})</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="left">
|
||
<image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceFood.svg"></image>
|
||
<text class="textTitle">经营信息</text>
|
||
</div>
|
||
<div class="right">
|
||
<div class="item">
|
||
<p :class="item.DININGROOMCOUNT?'text':'unText'" class="text">餐饮</p>
|
||
<p :class="item.HASMESSAGESEARCH?'text':'unText'" class="text">住宿</p>
|
||
<p :class="item.BUSINESSTYPE?'text':'unText'" >{{item.BUSINESSTYPE }}</p>
|
||
</div>
|
||
<div class="item">
|
||
<p :class="item.HASBACKGROUNDRADIO?'text':'unText'" >便利店</p>
|
||
<p :class="item.DININGBXCOUNT?'text':'unText'">商铺({{item.DININGBXCOUNT }})</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
export default {
|
||
name: "detail",
|
||
data(){
|
||
return {
|
||
info:{},
|
||
isShowPicker:false,//判断是否有选择器
|
||
menu:{},//手机参数
|
||
selectIndex:0,//服务区选择器选择的值
|
||
array:[],//服务区选择器选择的列表
|
||
typeList:[{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg',name:'A类',isShow:false},
|
||
{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/time.svg',name:'2015-06-10',isShow:false},
|
||
{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/baby.svg',name:'母婴室',isShow:false},
|
||
{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg',name:'司机之家',isShow:false},
|
||
{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg',name:'充电桩',isShow:false},
|
||
{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg',name:'客房',isShow:false}],
|
||
typeShowList:[]
|
||
}
|
||
},
|
||
onLoad(option){
|
||
// 获取手机参数
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
if (option.isPicker==='false'){
|
||
this.isShowPicker = false
|
||
this.getServiceList()
|
||
this.getList(option)
|
||
}else if (option.isPicker==='true'){
|
||
this.isShowPicker = true
|
||
console.log(1111)
|
||
console.log('option',option)
|
||
this.handleSearch(option.longitude,option.latitude)
|
||
this.getServiceList()
|
||
}else{
|
||
this.getServiceList()
|
||
this.getList(option)
|
||
}
|
||
},
|
||
methods:{
|
||
async handleSearch(longitude,latitude){
|
||
let req = {
|
||
longitude:longitude,
|
||
Province_Code:'340000',
|
||
latitude:latitude,
|
||
}
|
||
console.log(req)
|
||
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
|
||
let id =data.Result_Data.List[0].SERVERPART_ID
|
||
this.info = data.Result_Data.List[0]
|
||
let reqs = {
|
||
longitude:longitude,
|
||
ServerpartId:id,
|
||
latitude:latitude
|
||
}
|
||
const totalData = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',reqs)
|
||
console.log('totalData',totalData)
|
||
this.info = totalData.Result_Data
|
||
this.typeList[4].isShow = this.info.HASCHARGE
|
||
this.typeList[5].isShow = this.info.HASGUESTROOM
|
||
this.typeList[2].isShow = this.info.HASMOTHER
|
||
this.typeList[3].isShow = this.info.HASPILOTLOUNGE
|
||
if (this.info.SERVERPART_TYPE){
|
||
this.typeList[0].name = this.info.SERVERPART_TYPE===1000?'A类':this.info.SERVERPART_TYPE===1010?'A类（示范）':
|
||
this.info.SERVERPART_TYPE===2000?'B类':this.info.SERVERPART_TYPE===3000?'C类':this.info.SERVERPART_TYPE===4000?'D类':''
|
||
this.typeList[0].isShow = this.info.HASCHARGE
|
||
}
|
||
this.typeList[1].isShow = this.info.STARTDATE
|
||
},
|
||
//获取片区列表
|
||
async getServiceList(){
|
||
let req = {
|
||
Province_Code:'340000'
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BaseInfo/GetSPRegionList',req)
|
||
console.log('data22222',data)
|
||
this.array = data.Result_Data.List
|
||
},
|
||
//选择服务区
|
||
handleChangeService(e){
|
||
uni.redirectTo({
|
||
url:'/pages/map/index'
|
||
})
|
||
},
|
||
async getList(option){
|
||
let req = {
|
||
longitude:option.longitude,
|
||
ServerpartId:option.SERVERPART_ID,
|
||
latitude:option.latitude
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
|
||
console.log('data',data)
|
||
this.info = data.Result_Data
|
||
this.typeList[4].isShow = this.info.HASCHARGE
|
||
this.typeList[5].isShow = this.info.HASGUESTROOM
|
||
this.typeList[2].isShow = this.info.HASMOTHER
|
||
this.typeList[3].isShow = this.info.HASPILOTLOUNGE
|
||
if (this.info.SERVERPART_TYPE){
|
||
this.typeList[0].name = this.info.SERVERPART_TYPE===1000?'A类':this.info.SERVERPART_TYPE===1010?'A类（示范）':
|
||
this.info.SERVERPART_TYPE===2000?'B类':this.info.SERVERPART_TYPE===3000?'C类':this.info.SERVERPART_TYPE===4000?'D类':''
|
||
this.typeList[0].isShow = this.info.HASCHARGE
|
||
}
|
||
this.typeList[1].isShow = this.info.STARTDATE
|
||
|
||
},
|
||
//返回上一级页面
|
||
handleBack(){
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main{
|
||
width: 100%;
|
||
position: relative;
|
||
.leftArrow{
|
||
width: 100%;
|
||
height: 24px;
|
||
position: absolute;
|
||
left: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index:99999999999;
|
||
.img{
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 16px;
|
||
}
|
||
.pickers{
|
||
min-width: 167px;
|
||
height: 32px;
|
||
background: #FFFFFF;
|
||
border-radius: 16px;
|
||
box-sizing: border-box;
|
||
padding: 0 12px;
|
||
.pick{
|
||
height: 100%;
|
||
position: relative;
|
||
.picker{
|
||
height: 32px;
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
.pickTitle{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
.rightArrow{
|
||
width: 24px;
|
||
height: 12px;
|
||
position: absolute;
|
||
right: -10%;top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.topImg{
|
||
width: 100%;
|
||
height: 210px;
|
||
.topDefaultBg{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.info{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
border-radius: 16px 16px 1px 1px;
|
||
transform: translateY(-16px);
|
||
padding: 16px 16px 16px;
|
||
.top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left{
|
||
display: flex;
|
||
align-items: center;
|
||
.title{
|
||
font-size: 18px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 26px;
|
||
}
|
||
.status{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 18px;
|
||
padding: 0 6px;
|
||
background: #EAEAEA;
|
||
border-radius: 2px;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
.iconBox{
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid #F1F1F1;
|
||
border-radius: 50%;
|
||
.icon{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.address{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
margin-top: 4px;
|
||
}
|
||
.typeList{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
margin-top: 16px;
|
||
.typeItem{
|
||
width: calc((100% - 24px)/3);
|
||
height: 66px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #F7F7F7;
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
margin-right: 8px;
|
||
.img{
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
.baseInfo,.areaInfo{
|
||
margin-top: 8px;
|
||
.title{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
.word{
|
||
display: flex;
|
||
margin-top: 8px;
|
||
.subTitle{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
margin-right: 8px;
|
||
min-width: 60px;
|
||
padding-top: 2px;
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
display: inline-block;
|
||
vertical-algin: middle;
|
||
}
|
||
}
|
||
.subTitleArea{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
display: inline-block;
|
||
margin-right: 8px;
|
||
min-width: 80px;
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
.value{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
.service{
|
||
background: #fff;
|
||
padding: 12px 16px 0;
|
||
.serviceItem{
|
||
margin-top: 4px;
|
||
.title{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
.box{
|
||
margin-top: 12px;
|
||
display: flex;
|
||
.left{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 60px;
|
||
margin-right: 36px;
|
||
.boxImg{
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
.textTitle{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 16px;
|
||
}
|
||
}
|
||
.right{
|
||
flex: 1;
|
||
display: flex;
|
||
.item{
|
||
width: 50%;
|
||
.text{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 18px;
|
||
margin-bottom:4px;
|
||
}
|
||
.unText{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 18px;
|
||
text-decoration: line-through;
|
||
}
|
||
.unit{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|