970 lines
32 KiB
Vue
970 lines
32 KiB
Vue
<template>
|
||
<div class="main">
|
||
<!-- <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
|
||
<!-- <commercial-type :have="7"/>-->
|
||
<!-- </div>-->
|
||
<div class="leftArrow" v-if="false" :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" @click="handleChangeService">-->
|
||
<!-- <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>-->
|
||
<!-- <div class="pick" :value="selectIndex" :range="array" range-key="name">-->
|
||
<!-- <view class="picker">-->
|
||
<!-- <p class="pickTitle">{{info.SERVERPART_NAME?info.SERVERPART_NAME:''}}</p>-->
|
||
<!-- {{info.SPREGIONTYPE_NAME?info.SPREGIONTYPE_NAME:''}}-->
|
||
<!-- </view>-->
|
||
<!-- <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<div class="picker" :style="{ top: (menu.bottom + 24) + 'px' }" @click="handleChangeService">
|
||
<div class="selectService">
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
||
<view class="select">
|
||
<view class="content">
|
||
<view class="uni-input">{{ info.SERVERPART_NAME ? info.SERVERPART_NAME : '' }}</view>
|
||
<p class="area">{{ info.SPREGIONTYPE_NAME ? info.SPREGIONTYPE_NAME : '' }}</p>
|
||
<text class="noticeText" v-if="info.SERVERPART_NAME === '安徽驿达'">选择您要看的服务区</text>
|
||
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="topImg" :style="{height: (menu.bottom + 62) + 'px'}"> -->
|
||
<div class="topImg" :style="{ height: (menu.bottom + 14) + 'px' }">
|
||
<!-- <swiper v-if="topBg && topBg.length>0" :current="currentImg" class="carousel" @change="changeSwiper">-->
|
||
<!-- <swiper-item class="imgIndex" v-for="(item,index) in topBg" :key="index" :style="{backgroundImage:`url(${item})`}">-->
|
||
<!--<!– <image class="img" :src="item"></image>–>-->
|
||
<!-- <view class="sliderPage" :style="{top: (menu.bottom + 18) + 'px'}">-->
|
||
<!-- <SliderPage :index="0"/>-->
|
||
<!-- </view>-->
|
||
<!-- </swiper-item>-->
|
||
<!-- </swiper>-->
|
||
<!-- <div v-if="topBg && topBg.length>0" class="picNumber" @click="handlePreview">-->
|
||
<!-- <image class="icon" src="/static/images/noImg.svg"></image>-->
|
||
<!-- <text class="text"> {{ currentImg<1?1:currentImg>topBgRealLength?topBgRealLength:currentImg }} / {{ topBgRealLength }}</text>-->
|
||
<!-- <image class="more" src="/static/images/more.svg"></image>-->
|
||
<!-- </div>-->
|
||
<!-- <image v-else @click="handlePreview('default')" class="topDefaultBg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/default.png"></image>-->
|
||
</div>
|
||
<div class="menu">
|
||
<div class="top">
|
||
<div class="left">
|
||
<div class="leftImgBox">
|
||
<image class="img" :src="topBg[0]" @click="handlePreview" />
|
||
</div>
|
||
<div class="serviceInfo">
|
||
<view class="serviceInfoTop">
|
||
<p class="title">{{ info.SERVERPART_NAME ? info.SERVERPART_NAME : '-' }}</p>
|
||
<div class="iconBox" @click="handleGoMap">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/map.svg"></image>
|
||
</div>
|
||
</view>
|
||
<p class="address">{{ info.ServerpartInfo.EXPRESSWAY_NAME ? info.ServerpartInfo.EXPRESSWAY_NAME : '-' }}</p>
|
||
<view class="status">营业中</view>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<scroll-view scroll-y="true" class="scroll" :style="{ height: `calc(100vh - ${menu.bottom + 176}px)` }">
|
||
<div class="info">
|
||
<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="unqualifiedNeeds">-->
|
||
<!-- <text class="subTitle">介绍说明</text>-->
|
||
<!-- <text class="unqualNeedText" style="text-indent:28px">{{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 ? 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'" style="display: flex;align-items: center">
|
||
<image style="width: 16px;height: 16px;margin-right: 4px"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/service/manWc.svg" />男厕<text
|
||
style="margin-left: 4px">{{ item.HASPANTRY ? '(' + item.HASPANTRY + ')' : '' }}</text>
|
||
</p>
|
||
<p :class="item.HASTHIRDTOILETS ? 'text' : 'unText'">第三卫生间</p>
|
||
<p :class="item.HASCHILD ? 'text' : 'unText'">车辆维修</p>
|
||
<p :class="item.HASWATERROOM ? 'text' : 'unText'">开水器<text style="margin-left: 4px">{{
|
||
item.HASWATERROOM ? '(' + item.HASWATERROOM + ')' : '' }}</text></p>
|
||
</div>
|
||
<div class="item">
|
||
<p :class="item.HASWIFI ? 'text' : 'unText'" style="display: flex;align-items: center">
|
||
<image style="width: 16px;height: 16px;margin-right: 4px"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/service/womanWc.svg" />女厕<text
|
||
style="margin-left: 4px">{{ item.HASWIFI ? '(' + item.HASWIFI + ')' : '' }}</text>
|
||
</p>
|
||
<p :class="item.TOILETCOUNT ? 'text' : 'unText'">潮汐厕位<text style="margin-left: 4px">{{
|
||
item.TOILETCOUNT ? '('
|
||
+ item.TOILETCOUNT + ')' : '' }}</text></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'">轿车车位<text style="margin-left: 4px">{{
|
||
item.SMALLPARKING ? '(' + item.SMALLPARKING + ')' : '' }}</text></p>
|
||
<p :class="item.TRUCKPACKING ? 'text' : 'unText'">货车车位<text style="margin-left: 4px">{{
|
||
item.TRUCKPACKING ? '(' + item.TRUCKPACKING + ')' : '' }}</text></p>
|
||
|
||
</div>
|
||
<div class="item">
|
||
<p :class="item.PACKING ? 'text' : 'unText'">客车车位<text style="margin-left: 4px">{{ item.PACKING ? '('
|
||
+
|
||
item.PACKING + ')' : '' }}</text></p>
|
||
<p :class="item.DANPACKING ? 'text' : 'unText'">危化品车位<text style="margin-left: 4px">{{ item.DANPACKING
|
||
? '('
|
||
+ item.DANPACKING + ')' : '' }}</text></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="model">{{ item.BUSINESSTYPE }}</p>
|
||
</div>
|
||
<div class="item">
|
||
<p :class="item.HASBACKGROUNDRADIO ? 'text' : 'unText'">便利店</p>
|
||
<p :class="item.DININGBXCOUNT ? 'text' : 'unText'">商铺<text style="margin-left: 4px">{{
|
||
item.DININGBXCOUNT ? '(' + item.DININGBXCOUNT + ')' : '' }}</text></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
import commercialType from "./components/commercialType.vue";
|
||
import SliderPage from "./components/sliderPage.vue";
|
||
export default {
|
||
name: "mapDetail",
|
||
components: { SliderPage, commercialType },
|
||
data() {
|
||
return {
|
||
info: {},
|
||
isShowPicker: false,//判断是否有选择器
|
||
menu: {},//手机参数
|
||
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: [],
|
||
defaultBg: ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'],
|
||
topBg: [],
|
||
selectTopBg: 0,
|
||
screenWidth: 0,
|
||
currentImg: 0,//当前选中的图片
|
||
come: '',// 来自首页还是用户页,
|
||
topBgRealLength: 0,// 去除添加的上一个 后一个 的真实图片长度
|
||
seatInfo: {}
|
||
}
|
||
},
|
||
props: {
|
||
selectIndex: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
watch: {
|
||
selectIndex: {
|
||
handler(value) {
|
||
console.log('mapValue', value)
|
||
if (value === 0) {
|
||
this.handleGetPageData()
|
||
}
|
||
},
|
||
immediate: true,
|
||
}
|
||
},
|
||
created(option) {
|
||
// // this.come = option.come
|
||
// // 获取手机参数
|
||
// let systemInfo = uni.getSystemInfoSync()
|
||
// this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
// this.menu = uni.getMenuButtonBoundingClientRect()
|
||
// this.screenWidth = systemInfo.screenWidth
|
||
// // if (option.isPicker==='false'){
|
||
// // this.isShowPicker = false
|
||
// // }else if (option.isPicker==='true'){
|
||
// // this.isShowPicker = true
|
||
// // }
|
||
// console.log('created',this.query)
|
||
},
|
||
mounted() {
|
||
// console.log('mounted')
|
||
// let seat = uni.getStorageSync('currentService')
|
||
// console.log('seat',seat)
|
||
// this.handleSearch(seat)
|
||
// this.topBg = []
|
||
// this.currentImg = 1
|
||
},
|
||
// onShow(){
|
||
// console.log('onShow')
|
||
// let seat = uni.getStorageSync('currentService')
|
||
// this.handleSearch(seat)
|
||
// this.topBg = []
|
||
// this.currentImg = 1
|
||
// },
|
||
// onUnload() {
|
||
//
|
||
// this.$util.addUserBehavior()
|
||
// },
|
||
methods: {
|
||
handleGetPageData() {
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
this.screenWidth = systemInfo.screenWidth
|
||
let seat = uni.getStorageSync('currentService')
|
||
console.log('seat', seat)
|
||
this.handleSearch(seat)
|
||
this.topBg = []
|
||
this.currentImg = 1
|
||
},
|
||
// 滚动轮播图
|
||
changeSwiper(e) {
|
||
console.log('e', e)
|
||
this.currentImg = e.detail.current
|
||
console.log('thisbg', this.topBg[Number(e.detail.current)])
|
||
let value = this.topBg[Number(e.detail.current)].key
|
||
if (value === 'previous') {
|
||
uni.redirectTo({
|
||
url: `/pages/examine/detail?type=${2}`
|
||
})
|
||
} else if (value === 'next') {
|
||
uni.redirectTo({
|
||
url: `/pages/commercialBINew/carPortrait`
|
||
})
|
||
}
|
||
},
|
||
// 点击预览图片
|
||
handlePreview(type) {
|
||
if (type === 'default') {
|
||
uni.previewImage({
|
||
current: this.defaultBg[this.currentImg], // 图片的地址url
|
||
urls: this.defaultBg // 预览的地址url
|
||
})
|
||
} else {
|
||
uni.previewImage({
|
||
current: this.topBg[this.currentImg], // 图片的地址url
|
||
urls: this.topBg // 预览的地址url
|
||
})
|
||
}
|
||
},
|
||
async handleSearch(seat) {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
this.seatInfo = JSON.parse(seatInfo);
|
||
|
||
let reqs = {
|
||
longitude: this.seatInfo.longitude,
|
||
ServerpartId: currentService.Serverpart_ID || currentService.SERVERPART_ID,
|
||
latitude: this.seatInfo.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
|
||
if (this.info && this.info.ImageLits && this.info.ImageLits.length > 0) {
|
||
this.topBg = this.info.ImageLits
|
||
// this.topBg.unshift({key:'previous'})
|
||
// this.topBg.push({key:'next'})
|
||
// this.currentImg = 1
|
||
// this.topBgRealLength = this.topBg.length-2
|
||
console.log('this.topBg', this.topBg)
|
||
this.$forceUpdate()
|
||
} else {
|
||
this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
|
||
// this.topBg.unshift({key:'previous'})
|
||
// this.topBg.push({key:'next'})
|
||
// this.currentImg = 1
|
||
// this.topBgRealLength = this.topBg.length - 2
|
||
console.log('this.topBg', this.topBg)
|
||
}
|
||
// if (this.info && this.info.ImageLits && this.info.ImageLits.length>0){
|
||
// console.log('111')
|
||
// this.topBg = this.info.ImageLits
|
||
// this.topBg.unshift({key:'previous'})
|
||
// this.topBg.push({key:'next'})
|
||
// this.currentImg = 1
|
||
// this.topBgRealLength = this.topBg.length-2
|
||
// console.log('this.topBg',this.topBg)
|
||
// this.$forceUpdate()
|
||
// }else{
|
||
// this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
|
||
// this.topBg.unshift({key:'previous'})
|
||
// this.topBg.push({key:'next'})
|
||
// this.currentImg = 1
|
||
// this.topBgRealLength = this.topBg.length - 2
|
||
// }
|
||
|
||
},
|
||
//选择服务区
|
||
handleChangeService() {
|
||
let currentService = uni.getStorageSync('currentService')
|
||
let lastDay = uni.getStorageSync('lastDay')
|
||
let pageList = getCurrentPages()
|
||
console.log('pageList', pageList)
|
||
if (pageList.length > 2) {
|
||
if (this.isShowPicker) {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
|
||
})
|
||
}
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
|
||
})
|
||
}
|
||
},
|
||
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() {
|
||
if (this.come === 'index') {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
} else if (this.come === 'user') {
|
||
uni.switchTab({
|
||
url: '/pages/userCenter/userCenter'
|
||
})
|
||
} else {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
|
||
},
|
||
//点击跳转导航页
|
||
handleGoMap() {
|
||
uni.openLocation({
|
||
latitude: this.info.SERVERPART_Y * 1,
|
||
longitude: this.info.SERVERPART_X * 1,
|
||
scale: 16, // 缩放比例
|
||
name: this.info.SERVERPART_NAME,
|
||
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||
success(data) {
|
||
console.log(data);
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
// let key='STWBZ-DKCR4-J6UUF-FRD5I-3EBN2-GDBOT'
|
||
// let referer ='goMap'
|
||
// //拿到用户当前的位置
|
||
// let user = uni.getStorageSync('seatInfo')
|
||
// let startPoint = {
|
||
// name:'我的位置',
|
||
// latitude:user.latitude,
|
||
// longitude:user.longitude
|
||
// }
|
||
// //拿到当前已经选中的服务区的位置 也就是终点
|
||
// let seat = uni.getStorageSync('currentService')
|
||
// let endPoint = {
|
||
// name:seat.SERVERPART_NAME,
|
||
// latitude:seat.latitude,
|
||
// longitude:seat.longitude
|
||
// }
|
||
// wx.navigateTo({
|
||
// url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
|
||
// });
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main {
|
||
max-width: 100vw;
|
||
width: 100%;
|
||
max-width: 100vw;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.leftArrow {
|
||
height: 24px;
|
||
position: absolute;
|
||
left: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 99999999999;
|
||
|
||
.img {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.picker {
|
||
.selectService {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 40px;
|
||
height: 40px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.select {
|
||
height: 32px;
|
||
background: #F8F8FA;
|
||
border-radius: 0 16px 16px 0;
|
||
transform: translateX(-40px);
|
||
box-sizing: border-box;
|
||
padding-left: 35px;
|
||
padding-right: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.uni-input {
|
||
padding: 0;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
|
||
.area {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 40px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.noticeText {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #B6BACB;
|
||
line-height: 40rpx;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.topImg {
|
||
width: 100%;
|
||
position: relative;
|
||
background: #EEEFF1;
|
||
|
||
.sliderPage {
|
||
width: 100%;
|
||
z-index: 9;
|
||
position: absolute;
|
||
left: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.topDefaultBg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.carousel {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
float: left;
|
||
|
||
.imgIndex {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: 100% 100%;
|
||
|
||
//.img{
|
||
// width: 100%;
|
||
// height: 324px;
|
||
//}
|
||
}
|
||
}
|
||
|
||
.picNumber {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #383132;
|
||
border-radius: 11px;
|
||
position: absolute;
|
||
right: 16px;
|
||
bottom: 32px;
|
||
padding: 5px 9px;
|
||
|
||
.icon {
|
||
width: 16px;
|
||
height: 18px;
|
||
opacity: 0.7;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.more {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: #EEEFF1;
|
||
|
||
.top {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
padding: 16px 16px;
|
||
background: #fff;
|
||
border-radius: 16px 16px 1px 1px;
|
||
|
||
.left {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.leftImgBox {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.serviceInfo {
|
||
margin-left: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: calc(100% - 176rpx);
|
||
|
||
.serviceInfoTop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
|
||
.iconBox {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid #F1F1F1;
|
||
border-radius: 50%;
|
||
|
||
.icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.address {
|
||
width: 100%;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.status {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
// color: #160002;
|
||
padding: 0 6px;
|
||
background: #43C677;
|
||
border-radius: 2px;
|
||
display: inline-block;
|
||
width: 80rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroll {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
height: calc();
|
||
background: #F2F4F5;
|
||
|
||
.info {
|
||
width: 100%;
|
||
padding: 0 32rpx 32rpx;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
z-index: 100;
|
||
|
||
.typeList {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
|
||
.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;
|
||
}
|
||
|
||
.text {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
}
|
||
|
||
.unqualifiedNeeds {
|
||
.subTitle {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
margin-right: 8px;
|
||
min-width: 60px;
|
||
}
|
||
|
||
.unqualNeedText {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.service {
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
padding: 32rpx 32rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.serviceItem {
|
||
.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;
|
||
}
|
||
|
||
.model {
|
||
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;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|