822 lines
24 KiB
Vue
822 lines
24 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="leftArrow" :style="{ top: (menu.top + ((menu.height - 24) / 2)) + 'px' }" @click="handleBack">
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
|
||
</div>
|
||
<view class="mapBox" v-if="isShowMap">
|
||
<map id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" class="map" show-location></map>
|
||
<!-- <view class="ydBox" @click="handleClickYD">
|
||
<image class="ydIcon" src="/static/images/tabBar/company_active.png" />
|
||
</view> -->
|
||
</view>
|
||
<view v-else class="map"></view>
|
||
<div class="list" :style="{ transform: isMoveUp ? `translateY(calc(-40vh + ${menu.bottom + 5}px))` : '' }">
|
||
<div class="top">
|
||
<div class="topImg" @click="handleChangeUp">
|
||
<image class="packUp" :style="{ transform: isMoveUp ? 'rotate(180deg)' : '' }"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/service/packUp.svg"></image>
|
||
</div>
|
||
<div class="search">
|
||
<div class="right">
|
||
<input class="searchText" v-model="searchText" confirm-type="search" @confirm="handleSearch"
|
||
placeholder="搜索服务区" placeholder-style="font-size: 14px;color: #A69E9F;" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="serviceList" :style="{ height: isMoveUp ? `calc(100vh - 90px - ${menu.bottom + 5}px)` : '' }">
|
||
<div class="serviceItem" v-for="(item, index) in serviceList" :key="index"
|
||
@click="handleGoDetail(item.SERVERPART_ID, item)">
|
||
<div class="topItem">
|
||
<view class="leftItem">
|
||
<!-- <p class="title">{{ item.SERVERPART_NAME }}</p> -->
|
||
<p class="title">{{ item.SAName }}</p>
|
||
<!-- <view class="typeBox">{{ serviceTypeObj[item.SERVERPART_TYPE] }}</view> -->
|
||
</view>
|
||
<div class="box">
|
||
<div class="imgBox">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/phone.svg"></image>
|
||
</div>
|
||
<div class="imgBox" style="margin-right: 0px" @click.stop="handleGomap(item)">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/map.svg"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="distance">距您 <text class="number">{{ item.SERVERPART_DISTANCE }}</text> km</p>
|
||
<div class="info">
|
||
<image class="infoIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/address.svg"></image>
|
||
<p class="address">{{ item.belongArea }}-{{ item.belongRegion }}-{{ item.belongLine }}</p>
|
||
</div>
|
||
<div class="info" v-if="item.STARTDATE">
|
||
<image class="infoIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/time.svg"></image>
|
||
<p class="time">{{ item.STARTDATE }}</p>
|
||
</div>
|
||
<div class="typeList">
|
||
<image class="typeItem" v-if="item.SERVERPART_TYPE"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg"></image>
|
||
<image class="typeItem" v-if="item.HASMOTHER"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/service/baby.svg"></image>
|
||
<image class="typeItem" v-if="item.HASPILOTLOUNGE"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg"></image>
|
||
<image class="typeItem" v-if="item.HASCHARGE"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg"></image>
|
||
<image class="typeItem" v-if="item.HASGUESTROOM"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
import { getFieldEnum } from "../../util/dateTime";
|
||
export default {
|
||
name: "index",
|
||
data() {
|
||
return {
|
||
isShowMap: false,
|
||
longitude: null,
|
||
latitude: null,
|
||
userLongitude: null,
|
||
userLatitude: null,
|
||
mapCtx: {},
|
||
menu: {},//手机参数
|
||
statusBarHeight: '',// 每个手机的状态栏高度
|
||
selectIndex: null,//服务区选择器选择的值
|
||
array: [],//服务区选择器选择的列表
|
||
serviceList: [],
|
||
searchText: '',
|
||
isMoveUp: false, //是否展开
|
||
chartType: false,//是否从图表也跳过来
|
||
page: '',//从哪个图表也跳过来
|
||
markers: '',//地图属性
|
||
covers: '',//地图属性
|
||
area: '',//当前选中片区名称
|
||
serviceInfo: {},
|
||
type: '',// 哪里进来
|
||
serviceTypeObj: {},
|
||
serviceMessage: {},// 当前选中的服务区
|
||
seatInfo: {},
|
||
allServiceList: []
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
// 获取手机参数
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
|
||
let seatInfo = uni.getStorageSync('seatInfo')
|
||
|
||
if (option.chartType) {
|
||
this.chartType = true
|
||
}
|
||
this.page = option.page
|
||
this.type = option.type
|
||
console.log('type', this.type)
|
||
|
||
if (seatInfo) {
|
||
this.seatInfo = JSON.parse(seatInfo)
|
||
this.longitude = this.seatInfo.longitude
|
||
this.latitude = this.seatInfo.latitude
|
||
|
||
this.getListData()
|
||
} else {
|
||
let _this = this
|
||
uni.getLocation({
|
||
type: "gcj02",
|
||
altitude: true,
|
||
success: (res) => {
|
||
let seatInfo = {
|
||
latitude: res.latitude,
|
||
longitude: res.longitude,
|
||
};
|
||
_this.seatInfo = seatInfo
|
||
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
|
||
_this.getListData()
|
||
},
|
||
fail: (err) => {
|
||
console.log('errerrerr', err);
|
||
|
||
// 因为错误 所以默认给读书铺的位置
|
||
let seatInfo = {
|
||
latitude: 24.95152,
|
||
longitude: 102.553311,
|
||
};
|
||
_this.seatInfo = seatInfo
|
||
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
|
||
_this.getListData()
|
||
},
|
||
});
|
||
}
|
||
|
||
|
||
this.isShowMap = true
|
||
// 地图初始化
|
||
this.mapCtx = uni.createMapContext('myMap')
|
||
},
|
||
onShow() {
|
||
// let seat = uni.getStorageSync('currentService')
|
||
// console.log('seat', seat)
|
||
// if (seat && !seat.latitude) {
|
||
// JSON.parse(seat)
|
||
// }
|
||
// if (seat.SERVERPART_NAME === '安徽驿达') {
|
||
// this.getServiceList()
|
||
// } else if (seat) {
|
||
// this.longitude = seat.longitude
|
||
// this.latitude = seat.latitude
|
||
// this.area = seat.SPREGIONTYPE_NAME
|
||
// // 标点
|
||
// this.addMarkers(seat)
|
||
// this.getServiceList()
|
||
// } else {
|
||
// // 查详情
|
||
// this.getServiceDetail(this.serviceInfo.Serverpart_ID)
|
||
// }
|
||
// // 获取手机参数
|
||
// let systemInfo = uni.getSystemInfoSync()
|
||
// this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
// this.menu = uni.getMenuButtonBoundingClientRect()
|
||
|
||
// // 服务区类型枚举
|
||
// this.handleServiceType()
|
||
// // this.getLocation()
|
||
// // this.getListData()
|
||
},
|
||
onHide() {
|
||
this.isShowMap = true
|
||
},
|
||
onUnload() {
|
||
this.isShowMap = false
|
||
this.$util.addUserBehavior()
|
||
},
|
||
watch: {
|
||
// 监听经纬度
|
||
// latitude:{
|
||
// handler(value){
|
||
// if (value){
|
||
// console.log('value',value)
|
||
// this.getListData()
|
||
// }
|
||
// },
|
||
// deep:true,
|
||
// immediate:true
|
||
// }
|
||
},
|
||
methods: {
|
||
// 点击驿达表示 默认选择驿达
|
||
handleClickYD() {
|
||
let YD = {
|
||
SERVERPART_NAME: "安徽驿达",
|
||
SPREGIONTYPE_NAME: "",
|
||
SPRegionType_ID: null,
|
||
Serverpart_ID: 424,
|
||
latitude: 32,
|
||
longitude: 117,
|
||
}
|
||
uni.setStorageSync('currentService', YD)
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
// 枚举服务区类型 SERVERPART_TYPE
|
||
async handleServiceType() {
|
||
const data = await getFieldEnum({ FieldExplainField: 'SERVERPART_TYPE' });
|
||
console.log('data', data)
|
||
let obj = {}
|
||
data.forEach(item => {
|
||
obj[Number(item.value)] = item.label
|
||
})
|
||
console.log('obj', obj)
|
||
this.serviceTypeObj = obj
|
||
},
|
||
//跳转到腾讯地图
|
||
handleGomap(item) {
|
||
let obj = item;
|
||
uni.openLocation({
|
||
latitude: obj.latitude * 1,
|
||
longitude: obj.longitude * 1,
|
||
scale: 16, // 缩放比例
|
||
name: obj.SAName,
|
||
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||
success(data) {
|
||
},
|
||
fail(err) {
|
||
},
|
||
});
|
||
|
||
// let seat = uni.getStorageSync('seatInfo')
|
||
// let key = 'STWBZ-DKCR4-J6UUF-FRD5I-3EBN2-GDBOT'
|
||
// let referer = 'goMap'
|
||
// let startPoint = {
|
||
// name: '我的位置',
|
||
// latitude: seat.latitude,
|
||
// longitude: seat.longitude
|
||
// }
|
||
// let endPoint = {
|
||
// 'name': item.SERVERPART_NAME,
|
||
// latitude: item.SERVERPART_Y,
|
||
// longitude: item.SERVERPART_X
|
||
// }
|
||
// wx.navigateTo({
|
||
// url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
|
||
// });
|
||
},
|
||
//返回上一级页面
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
//获取服务区详情信息
|
||
async getServiceDetail(id) {
|
||
let req = {
|
||
ServerpartId: id
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', req)
|
||
this.longitude = data.Result_Data.ServerpartInfo.SERVERPART_X
|
||
this.latitude = data.Result_Data.ServerpartInfo.SERVERPART_Y
|
||
this.isShowMap = true
|
||
},
|
||
//获取片区列表
|
||
async getServiceList() {
|
||
let req = {
|
||
Province_Code: '530000'
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BaseInfo/GetSPRegionList', req)
|
||
console.log('data123', data)
|
||
let list = []
|
||
data.Result_Data.List.forEach(item => {
|
||
list.push({ name: item.name, value: item.value })
|
||
})
|
||
// let list = [{name:'安徽驿达',value:'0'}]
|
||
// data.Result_Data.List.forEach(item=>{
|
||
// list.push({name:item.name,value:item.value})
|
||
// })
|
||
let seat = uni.getStorageSync('currentService')
|
||
this.array = list
|
||
if (seat && seat.SERVERPART_NAME === '安徽驿达') {
|
||
this.selectIndex = 0
|
||
this.serviceMessage = seat
|
||
}
|
||
await this.getListData()
|
||
if (this.area) {
|
||
this.array.forEach((item, index) => {
|
||
if (item.name === this.area) {
|
||
this.selectIndex = index
|
||
}
|
||
})
|
||
}
|
||
await this.getLocation()
|
||
},
|
||
//选择片区
|
||
handleChangeService(e) {
|
||
console.log('e', e)
|
||
this.selectIndex = Number(e.detail.value)
|
||
console.log(this.selectIndex)
|
||
if (this.selectIndex === 0) {
|
||
let res = {
|
||
SERVERPART_NAME: '安徽驿达',//服务区
|
||
SPREGIONTYPE_NAME: '安徽驿达',//片区
|
||
Serverpart_ID: null,
|
||
SPRegionType_ID: null,
|
||
longitude: '117.200927',
|
||
latitude: '31.832905',
|
||
}
|
||
uni.setStorageSync('currentService', res) //当前选中服务区信息
|
||
if (this.type === 'springTravel') {
|
||
|
||
} else {
|
||
if (this.chartType) {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
} else {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
}
|
||
}
|
||
this.getListData()
|
||
|
||
},
|
||
//搜索框触发的方法
|
||
async handleSearch() {
|
||
if (this.searchText) {
|
||
let res = []
|
||
if (this.allServiceList && this.allServiceList.length > 0) {
|
||
|
||
this.allServiceList.forEach((item) => {
|
||
if (item.SAName.indexOf(this.searchText) !== -1) {
|
||
res.push(item)
|
||
}
|
||
})
|
||
}
|
||
this.serviceList = res
|
||
} else {
|
||
this.serviceList = JSON.parse(JSON.stringify(this.allServiceList))
|
||
}
|
||
|
||
|
||
|
||
// let req = {
|
||
// longitude: this.longitude,
|
||
// Province_Code: '530000',
|
||
// latitude: this.latitude,
|
||
// Serverpart_Name: this.searchText
|
||
// }
|
||
// const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList', req)
|
||
// this.serviceList = data.Result_Data.List
|
||
},
|
||
//跳转相对应的服务区详情界面
|
||
handleGoDetail(id, item) {
|
||
let res = {
|
||
...item,
|
||
// SERVERPART_NAME: item.SAName,//服务区
|
||
// SPREGIONTYPE_NAME: item.belongArea,//片区
|
||
// Serverpart_ID: "",
|
||
// SPRegionType_ID: "",
|
||
// longitude: item.longitude,
|
||
// latitude: item.latitude,
|
||
}
|
||
uni.setStorageSync('currentService', res)
|
||
let pageList = getCurrentPages()
|
||
if (this.type === 'index') {
|
||
this.$util.toNextRoute('navigateTo', `/pages/summaryOfPortraits/index?index=0`)
|
||
} else if (this.type === 'attendanceStatus') {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
} else {
|
||
if (this.chartType) {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
} else {
|
||
if (pageList.length > 2) {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// let res = {
|
||
// SERVERPART_NAME: item.SERVERPART_NAME,//服务区
|
||
// SPREGIONTYPE_NAME: item.SPREGIONTYPE_NAME,//片区
|
||
// Serverpart_ID: item.SERVERPART_ID,
|
||
// SPRegionType_ID: item.SPREGIONTYPE_ID,
|
||
// longitude: item.SERVERPART_X,
|
||
// latitude: item.SERVERPART_Y,
|
||
// }
|
||
// uni.setStorageSync('currentService', res) //当前选中服务区信息
|
||
// let pageList = getCurrentPages()
|
||
// if (this.type === 'index') {
|
||
// this.$util.toNextRoute('navigateTo', `/pages/summaryOfPortraits/index?index=0`)
|
||
// } else if (this.type === 'springTravel') {
|
||
// uni.setStorageSync('springService', res) //当前选中服务区信息
|
||
// uni.navigateBack({
|
||
// delta: 1
|
||
// })
|
||
// } else if (this.type === 'attendanceStatus') {
|
||
// uni.navigateBack({
|
||
// delta: 1
|
||
// })
|
||
// } else {
|
||
// if (this.chartType) {
|
||
// uni.navigateBack({
|
||
// delta: 1
|
||
// })
|
||
// } else {
|
||
// if (pageList.length > 2) {
|
||
// uni.navigateBack({
|
||
// delta: 1
|
||
// })
|
||
// }
|
||
// }
|
||
// }
|
||
},
|
||
async getListData() {
|
||
let req = {
|
||
bsessionKey: "46BC6D5E069411B39C215C8A3B474B31",
|
||
pageNum: 1,
|
||
pageSize: 500
|
||
}
|
||
const data = await new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: "https://fwqznxj.yciccloud.com:9081/ynjt/pushManage/getSaMsgAll",
|
||
method: "POST",
|
||
data: req,
|
||
header: {
|
||
"content-type": "application/x-www-form-urlencoded",
|
||
},
|
||
success(res) {
|
||
resolve(res.data.data)
|
||
},
|
||
});
|
||
});
|
||
|
||
// 这个是云南那边给来的数据 根据 云南的数据 把我们算的距离补给他们的数据里面
|
||
let YNList = data.data
|
||
|
||
if (YNList && YNList.length > 0) {
|
||
YNList.forEach((item, index) => {
|
||
item.SERVERPART_DISTANCE = item.latitude && item.longitude ? this.haversineDistance({ lat: this.seatInfo.latitude, lng: this.seatInfo.longitude }, { lat: item.latitude, lng: item.longitude }) : "-"
|
||
item.fileId = item.fileId ? JSON.parse(item.fileId) : []
|
||
item.businessModel = item.businessModel ? JSON.parse(item.businessModel) : []
|
||
// fileId: obj.fileId ? JSON.parse(obj.fileId) : [],
|
||
// businessModel: obj.businessModel ? JSON.parse(obj.businessModel) : [],
|
||
})
|
||
|
||
this.serviceList = YNList
|
||
this.allServiceList = YNList
|
||
// uni.setStorageSync('YNList', YNList)
|
||
|
||
}
|
||
// let serverpartList = uni.getStorageSync('ServerpartList')
|
||
// console.log('serverpartListserverpartListserverpartList', serverpartList);
|
||
// // 判断缓存里面 是不是有数据 没数据就调接口那新的 有数据 就用 serverpartList
|
||
// let list = []
|
||
// if (serverpartList && serverpartList.length > 0) {
|
||
// list = serverpartList
|
||
// } else {
|
||
// let req = {
|
||
// Province_Code: "530000",
|
||
// ShowService: true,
|
||
// longitude: this.seatInfo.longitude,
|
||
// latitude: this.seatInfo.latitude,
|
||
// PageIndex: 1,
|
||
// PageSize: 300
|
||
// }
|
||
// console.log('req', req)
|
||
// const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList', req)
|
||
// // const data = await request.$webJavaGet('third-party/getServerPartList', req)
|
||
// console.log('datadatadatadata', data);
|
||
// list = data.Result_Data.List
|
||
// uni.setStorageSync('ServerpartList', list)
|
||
// }
|
||
|
||
// if (list && list.length > 0) {
|
||
|
||
// }
|
||
// console.log('this.serviceListthis.serviceListthis.serviceList', this.serviceList);
|
||
|
||
},
|
||
// 算经纬度的之间距离的方法
|
||
haversineDistance({ lat: lat1, lng: lon1 }, { lat: lat2, lng: lon2 }) {
|
||
const toRad = (d) => d * Math.PI / 180;
|
||
const R = 6378137; // 地球半径(米) WGS84 椭球近似为球
|
||
const φ1 = toRad(lat1);
|
||
const φ2 = toRad(lat2);
|
||
const Δφ = toRad(lat2 - lat1);
|
||
const Δλ = toRad(lon2 - lon1);
|
||
|
||
const a = Math.sin(Δφ / 2) ** 2 +
|
||
Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) ** 2;
|
||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||
const distanceMeters = R * c;
|
||
|
||
return (distanceMeters / 1000).toFixed(2); // 返回 km，字符串
|
||
},
|
||
//点击向上移动
|
||
handleChangeUp() {
|
||
if (this.isMoveUp) {
|
||
this.isMoveUp = false
|
||
} else {
|
||
this.isMoveUp = true
|
||
}
|
||
},
|
||
async getLocation() {
|
||
let seat = uni.getStorageSync('seatInfo')
|
||
if (!seat) {
|
||
uni.getFuzzyLocation({
|
||
type: 'gcj02',
|
||
altitude: true,
|
||
success: function (res) {
|
||
this.latitude = res.latitude
|
||
this.longitude = res.longitude
|
||
}
|
||
})
|
||
} else {
|
||
await this.getListData()
|
||
}
|
||
|
||
},
|
||
//添加标点
|
||
addMarkers(value) {
|
||
let markers = []
|
||
markers.push({
|
||
// iconPath: 'https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg',
|
||
id: value.Serverpart_ID,
|
||
latitude: value.latitude,
|
||
longitude: value.longitude
|
||
})
|
||
// }
|
||
this.markers = markers
|
||
this.isShowMap = true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main {
|
||
max-height: 100vh;
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.leftArrow {
|
||
width: 24px;
|
||
height: 24px;
|
||
position: absolute;
|
||
left: 16px;
|
||
z-index: 99999999999;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.mapBox {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 40vh;
|
||
|
||
.map {
|
||
width: 100%;
|
||
height: 40vh;
|
||
}
|
||
|
||
.ydBox {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
bottom: 40px;
|
||
left: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.ydIcon {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
width: 100%;
|
||
height: calc(60vh + 20px);
|
||
box-sizing: border-box;
|
||
transform: translateY(-20px);
|
||
background: #F2F4F5;
|
||
position: absolute;
|
||
top: 40vh;
|
||
|
||
.top {
|
||
width: 100%;
|
||
height: 74px;
|
||
padding: 0 16px;
|
||
border-radius: 20px 20px 0 0;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
box-shadow: 0 4px 4px 0 rgba(22, 0, 2, 0.04);
|
||
|
||
.topImg {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.packUp {
|
||
width: 26px;
|
||
height: 5px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.search {
|
||
width: 100%;
|
||
height: 36px;
|
||
background: #F2F4F5;
|
||
border-radius: 4px;
|
||
margin-top: 13px;
|
||
box-sizing: border-box;
|
||
padding: 8px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.left {
|
||
width: 40%;
|
||
position: relative;
|
||
|
||
.pick {
|
||
.box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.picker {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.selectIcon {
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.left:after {
|
||
content: '';
|
||
width: 2px;
|
||
height: 20px;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
background: #E1DFDF;
|
||
}
|
||
|
||
.right {
|
||
width: 100%;
|
||
margin-left: 12px;
|
||
|
||
.searchText {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.serviceList {
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
height: calc(100% - 90px);
|
||
box-sizing: border-box;
|
||
padding: 0 16px;
|
||
overflow-y: auto;
|
||
|
||
.serviceItem {
|
||
width: 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
border-radius: 8px;
|
||
margin-bottom: 12px;
|
||
|
||
.topItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.leftItem {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.typeBox {
|
||
background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
|
||
border-radius: 8rpx;
|
||
padding: 0 16rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #1E67FF;
|
||
line-height: 40rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.imgBox {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid #F1F1F1;
|
||
overflow: hidden;
|
||
margin-right: 16px;
|
||
border-radius: 50%;
|
||
|
||
.icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.distance {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 18px;
|
||
|
||
.number {
|
||
color: #D7000F;
|
||
margin: 0 2px;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 4px;
|
||
|
||
.infoIcon {
|
||
width: 12px;
|
||
height: 15px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.address,
|
||
.time {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
|
||
.typeList {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.typeItem {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 9px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|