334 lines
8.9 KiB
Vue
334 lines
8.9 KiB
Vue
<template>
|
|
<view class="main" @click="handleGoDetail">
|
|
<view class="serviceMessage">
|
|
<view class="leftMessage">
|
|
<view class="leftTop">
|
|
<view class="massageNameBox">{{
|
|
currentServiceMessage.SERVERPART_NAME || ""
|
|
}}</view>
|
|
<span class="state">营业中</span>
|
|
</view>
|
|
<view class="leftBottom">
|
|
<image class="pointIcon" src="/static/images/home/address.png" />
|
|
<span class="distanceText">{{
|
|
currentServiceMessage.SERVERPART_DISTANCE
|
|
? currentServiceMessage.SERVERPART_DISTANCE + "km"
|
|
: "-"
|
|
}}</span>
|
|
<span class="line"></span>
|
|
<span
|
|
class="address"
|
|
v-if="currentServiceMessage && currentServiceMessage.ServerpartInfo"
|
|
>{{ currentServiceMessage.SERVERPART_ADDRESS || "" }}</span
|
|
>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="rightMessage"
|
|
@click.stop="handleToMap(currentServiceMessage)"
|
|
v-if="currentServiceMessage.SERVERPART_DISTANCE > 0"
|
|
>
|
|
<image
|
|
class="navigationIcon"
|
|
src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"
|
|
/>
|
|
导航
|
|
<!-- <span class="distance">{{
|
|
currentServiceMessage.SERVERPART_DISTANCE
|
|
? currentServiceMessage.SERVERPART_DISTANCE + "km"
|
|
: ""
|
|
}}</span> -->
|
|
</view>
|
|
</view>
|
|
|
|
<div class="serviceTypeTabs" v-if="!noIcon">
|
|
<div class="serviceTypeItem">
|
|
<image
|
|
class="itemIcon"
|
|
:src="
|
|
currentServiceMessage.HASCHARGE
|
|
? '/static/images/home/Charging.svg'
|
|
: '/static/images/home/noCharging.svg'
|
|
"
|
|
/>
|
|
|
|
<!-- <image
|
|
class="itemIcon"
|
|
:src="
|
|
serviceMessage.chargingStation
|
|
? 'https://eshangtech.com/ShopICO/discovery/chargingStationSelect.png'
|
|
: 'https://eshangtech.com/ShopICO/discovery/chargingStationNo.png'
|
|
"
|
|
/> -->
|
|
<!-- <span class="itemText">充电桩</span> -->
|
|
</div>
|
|
<div class="serviceTypeItem">
|
|
<image
|
|
class="itemIcon"
|
|
:src="
|
|
currentServiceMessage.HASPILOTLOUNGE
|
|
? '/static/images/home/jinCar.svg'
|
|
: '/static/images/home/noJinCar.svg'
|
|
"
|
|
/>
|
|
<!-- <image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/ShopICO/discovery/gasStationSelect.png"
|
|
/> -->
|
|
<!-- <span class="itemText">加油站</span> -->
|
|
</div>
|
|
<div class="serviceTypeItem">
|
|
<image
|
|
class="itemIcon"
|
|
:src="
|
|
currentServiceMessage.SERVERPART_TYPE
|
|
? '/static/images/home/health.svg'
|
|
: '/static/images/home/noHealth.svg'
|
|
"
|
|
/>
|
|
|
|
<!-- <image
|
|
class="itemIcon"
|
|
:src="
|
|
serviceMessage.nursery
|
|
? 'https://eshangtech.com/ShopICO/discovery/nurserySelect.png'
|
|
: 'https://eshangtech.com/ShopICO/discovery/nurseryNo.png'
|
|
"
|
|
/> -->
|
|
<!-- <span class="itemText">母婴室</span> -->
|
|
</div>
|
|
<div class="serviceTypeItem">
|
|
<image
|
|
class="itemIcon"
|
|
:src="
|
|
currentServiceMessage.HASMOTHER
|
|
? '/static/images/home/baby.svg'
|
|
: '/static/images/home/nobaby.svg'
|
|
"
|
|
/>
|
|
|
|
<!-- <image
|
|
class="itemIcon"
|
|
:src="
|
|
serviceMessage.parkingSpace
|
|
? 'https://eshangtech.com/ShopICO/discovery/parkingSpaceSelect.png'
|
|
: 'https://eshangtech.com/ShopICO/discovery/parkingSpaceNo.png'
|
|
"
|
|
/> -->
|
|
<!-- <span class="itemText">停车位</span> -->
|
|
</div>
|
|
<div class="serviceTypeItem">
|
|
<image
|
|
class="itemIcon"
|
|
:src="
|
|
currentServiceMessage.HASGUESTROOM
|
|
? '/static/images/home/hotel.svg'
|
|
: '/static/images/home/nohotel.svg'
|
|
"
|
|
/>
|
|
<!-- <image
|
|
class="itemIcon"
|
|
:src="
|
|
serviceMessage.store
|
|
? 'https://eshangtech.com/ShopICO/discovery/storeSelect.png'
|
|
: 'https://eshangtech.com/ShopICO/discovery/storeNo.png'
|
|
"
|
|
/> -->
|
|
<!-- <span class="itemText">便利店</span> -->
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// currentServiceInfo: {},
|
|
};
|
|
},
|
|
props: ["goDetail", "noIcon", "currentServiceMessage", "NoChange"], // goDetail 是否可以跳转详情 noIcon 为true时不出现 下面的小图标 NoChange 禁止切换服务区
|
|
watch: {
|
|
currentServiceMessage(newVal, oldVal) {
|
|
console.log("newVal", newVal);
|
|
console.log("oldVal", oldVal);
|
|
// this.currentServiceInfo = newVal;
|
|
this.$forceUpdate();
|
|
},
|
|
},
|
|
methods: {
|
|
// 跳转去地图
|
|
handleToMap(obj) {
|
|
uni.openLocation({
|
|
latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
|
|
longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
|
|
scale: 16, // 缩放比例
|
|
name: obj.SERVERPART_NAME,
|
|
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
|
success(data) {
|
|
console.log(data);
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
},
|
|
});
|
|
},
|
|
handleGoDetail() {
|
|
if (this.NoChange) {
|
|
return;
|
|
} else {
|
|
if (this.goDetail) {
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/serviceDetail/index?id=" +
|
|
this.currentServiceMessage.SERVERPART_ID,
|
|
});
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.main {
|
|
background: #fff;
|
|
|
|
.serviceMessage {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 8rpx 0;
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.leftMessage {
|
|
width: calc(100% - 178rpx);
|
|
margin-right: 16rpx;
|
|
box-sizing: border-box;
|
|
|
|
.leftTop {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.leftIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.massageNameBox {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #282622;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.state {
|
|
display: inline-block;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #1ba74d;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding: 2rpx 8rpx;
|
|
background: #e9f8ee;
|
|
border-radius: 4rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.leftBottom {
|
|
width: 100%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 16rpx;
|
|
.pointIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.distanceText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #130f05;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.line {
|
|
display: inline-block;
|
|
width: 2rpx;
|
|
height: 24rpx;
|
|
background: #e7e7e6;
|
|
margin: 0 12rpx;
|
|
}
|
|
|
|
.address {
|
|
width: 300rpx;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #5f5b52;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
// margin-left: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightMessage {
|
|
border-radius: 16px;
|
|
// border: 1px solid #ae8d3e;
|
|
padding: 14rpx 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #ba922f;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
.navigationIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.serviceTypeTabs {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 16rpx;
|
|
.serviceTypeItem {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 16rpx;
|
|
.itemIcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |