<template>
<view class="">
<view class="map">
<map id="map" ref="map" class='map_view' latitude="22.274848" longitude="114.187981" :markers="markers" ></map>
<view class="tips">
<view class="return" @click="returnTap">
<u-icon name="arrow-left" bold></u-icon>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: 5,
// 时间
now: '',
// 地址数据
markers: [],
// 预约弹出层
bookingtimeShow: false,
includepoints: [],
circles: [],
// 数模数据
touch: {
// 开始y
startY: '',
// 结束y
endY: ''
},
// 上下滑动开关
touchSwitch: false,
// 统计数据
// 统计数据
list: [{
id: 0,
name: '待接單',
text: '待接單',
}, {
id: 1,
name: '進行中',
text: '進行中',
}, {
id: 2,
name: '進行中',
text: '進行中',
}, {
id: 3,
name: '已完成',
text: '去評價',
}, {
id: 4,
name: '待付款',
text: '去支付',
}, {
id: 5,
name: '超過預約',
text: '重新預約',
}],
// 数据
data: '',
// oss域名
ossUrl: uni.$ossUrl,
// 更改预约时间订单id
bookingtimeId: '',
}
},
onLoad() {
},
onShow() {
this.mapMarkers()
},
methods: {
// 地图标记
mapMarkers() {
this.markers = [{
id: 1,
latitude: 22.274848,
longitude: 114.187981,
width: 30,
height: 30,
iconPath: '/static/position.png',
callout: {
color: '#ffffff',
content: this.data.type == 1 ? '排隊目的地' : '現場拍照目的地',
fontSize: 12,
borderRadius: 5,
bgColor: '#FDA655',
padding: 5,
textAlign: 'center',
display: "ALWAYS" //'BYCLICK':点击显示; 'ALWAYS':常显
}
}]
}
},
}
}
</script>
<style lang="scss" scoped>
// 总div
.u-backgroundColor {
flex: 1;
}
// 地图
.map,
.map_view {
// width: 750rpx;
// height: 500rpx;
flex: 1;
}
.tips {
position: fixed;
left: 30rpx;
top: 80rpx;
flex-direction: row;
}
.return {
width: 50rpx;
height: 50rpx;
background-color: #FFFFFF;
justify-content: center;
align-items: center;
border-radius: 50rpx;
}
.tips_view {
flex: 1;
flex-direction: row;
margin-left: 20rpx;
background-color: rgba($color: #FB9D45, $alpha: 0.9);
padding: 10rpx 20rpx;
border-radius: 50rpx;
}
.tips_view-b {
margin-left: 20rpx;
}
// 地图结束
// 快递信息
.function {
top: -50rpx;
left: 30rpx;
align-items: center;
padding-bottom: 80rpx;
background-color: #FFFFFF;
border-radius: 10rpx 10rpx 0 0;
.function_view {
padding: 0 20rpx;
}
}
.height {
// height: 850rpx;
}
// 时间和价格
.top {
margin: 20rpx 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
.top_l {
flex-direction: row;
align-items: center;
.top_l-view {
flex: 1;
flex-direction: row;
align-items: center;
box-sizing: border-box;
// background-color: #FB9D45;
.top_l-view-time {
flex-direction: row;
align-items: center;
}
}
}
.top_r {
flex-direction: row;
}
}
// 地址
.address {
flex-direction: row;
justify-content: space-between;
padding: 20rpx 0;
// 地址左边
.address_l {
justify-content: space-between;
.address_l-view {
width: 40rpx;
height: 40rpx;
border-radius: 10rpx;
background-color: $u-auxiliaryColor;
justify-content: center;
align-items: center;
}
.address_l-in {
align-items: center;
justify-content: center;
}
}
// 地址右边
.address_r {
flex: 1;
margin-left: 20rpx;
justify-content: space-between;
.address_r-t {
flex-direction: row;
align-items: center;
.address_r-t-l {
flex: 1;
// 个人信息
// .information {
// margin-bottom: 20rpx;
// }
}
.address_r-t-r {
margin-left: 20rpx;
}
}
.address_r-b {
flex-direction: row;
align-items: center;
.address_r-b-l {
flex: 1;
}
.address_r-b-r {
margin-left: 20rpx;
}
}
// 个人信息
.information {
flex-direction: row;
}
}
}
// 地址结束
// 详情物品信息
.details {}
.alert {
margin-bottom: 20rpx;
.u-alert {}
}
// 详情物品信息結束
// 收入
.income {}
// 收入结束
// 快递结束
// 底部定位栏
.bottom {
position: fixed;
bottom: 0;
left: 0;
background-color: #FFFFFF;
flex-direction: row;
width: 750rpx;
justify-content: center;
border-top: 1rpx solid #909399;
}
.bottom_view {
margin: 20rpx 0;
}
.bottom_l {
flex-direction: row;
.bottom_l-l {
flex-direction: row;
margin-right: 20rpx;
}
}
.bottom_l-view {
justify-content: center;
align-items: center;
margin: 0 20rpx;
}
.u-button {
flex: 1;
margin-left: 20rpx;
}
</style>