weliam-smartcity/components/template/journey.vue

<template>
	<view class="journey" :style="{padding: boxPadding?'30rpx 0':'0'}" @click="HitchRideDetails">
		<view class="title">
			<view >
				<view class="dot">
					
				</view>
				<view class="name">
					{{hitchItem.start_address}}
				</view>
			</view>
			<view >
				<view class="dot-t">
					
				</view>
				<view class="name-t">
				{{hitchItem.end_address}}
				</view>
			</view>
			
		</view>
		<view class="carNavigation" v-if="flag" @click.stop="goMap">
			<image :src="imgfixUrls + 'carNavigation.png'" mode=""></image>
		</view>
		<view class="carPhone" v-if="phones" @click.stop="callPlay">
			拨打电话
		</view>
		<view class="sign dis-flex">
			<view class="catClass">
				{{hitchItem.transport_type_text}}
			</view>
			<view class="f-24 col-9 p-left-right-20">
				{{hitchItem.start_time_text}}
			</view>
		</view>
		<view class="tags">
			<view class="tag-item" v-for="(items,indexs) in hitchItem.label_id" :key="indexs">
				{{items}}
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import Map from '@/common/js/ms-openMap/openMap.js'
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	export default{
		data(){
			return{
				
			}
		},
		props:{
			hitchItem:{
				type:Object,
				default:{}
			},
			lastIndex:{
				type:Boolean,
				default:false
			},
			flag:{
				type:Boolean,
				default:false
			},
			boxPadding:{
				type:Boolean,
				default:true
			},
			phones:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			callPlay(){
				let _this = this
				uni.makePhoneCall({
					phoneNumber:_this.hitchItem.contacts_phone //仅为示例
				});
			},
			goMap(){
				let _this = this;
				// #ifdef MP-WEIXIN

						uni.openLocation({
						    latitude: Number(_this.hitchItem.end_lat),
						    longitude: Number(_this.hitchItem.end_lng),
							success: function () {
								console.log('success');
							},
							fail: function () {
								console.log('success');
							},
						})
				
				//#endif
				//#ifdef H5
				wxApi.WxopenLocation(Number(_this.hitchItem.end_lat), Number(_this.hitchItem.end_lng), '', _this.hitchItem.end_address);
				//#endif
				//#ifdef APP-PLUS
				Map.openMap(Number(_this.hitchItem.end_lat),Number(_this.hitchItem.end_lng),_this.hitchItem.end_address,'gcj02')
				//#endif
			},
			HitchRideDetails(){
				if(this.flag) return
				App.navigationTo({
					url: "pages/subPages2/hitchRide/hitchRideDetails/hitchRideDetails?id=" + this.hitchItem.id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.journey{
		// padding: 30upx 0;
		position: relative;
		.carNavigation{
			position: absolute;
			top: 30upx;
			right: 0upx;
			width: 120upx;
			height: 120upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.carPhone{
			width: 160upx;
			height: 70upx;
			line-height: 70upx;
			text-align: center;
			background: linear-gradient(180deg, #3383FF 0%, #185DE9 100%);
			border-radius: 10upx;
			color: #FFFFFF;
			font-size: 28upx;
			font-weight: bold;
			position: absolute;
			top: -20upx;
			right: 0upx;
		}
		.title{
			position: relative;
			margin-top: 20upx;
			border-left: 1upx dashed #EEEEEE;
			
			.dot{
				width: 12upx;
				height: 12upx;
				background-color: #00C095;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 0%;
				transform: translate(-50%);
				
			}
			.dot-t{
				width: 12upx;
				height: 12upx;
				background-color: #FF4444;
				border-radius: 50%;
				position: absolute;
				left: 0;
				bottom: 0;;
				transform: translate(-50%);
			}
			.name{
				padding: 0 0 0upx 30upx;
				color: #333333;
				font-weight: 700;
				font-size: 36upx;
				position: relative;
				top: -16upx;
				z-index: 1;
				width:400upx;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
			.name-t{
				padding: 0 0 0upx 30upx;
				color: #333333;
				font-weight: 700;
				font-size: 36upx;
				position: relative;
				bottom: -16upx;
				z-index: 1;
				width:400upx;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
		}
		.sign{
			padding-top: 50upx;
			line-height: 40upx;
			.catClass{
				width: 90upx;
				height: 40upx;
				line-height: 40upx;
				background: linear-gradient(180deg, #6DA5FD 0%, #6094FD 100%);
				border-radius: 10upx;
				text-align: center;
				font-size: 24upx;
				color: #FFFFFF;
			}
		}
		.tags{
			padding-top: 30upx;
			font-size: 10upx;
			.tag-item{
				padding: 4upx 10upx;
				border: 1upx solid #CCCCCC;
				color: #999999;
				height: 32upx;
				line-height: 28upx;
				font-size: 24upx;
				text-align: center;
				display: inline-block;
				border-radius: 10upx;
				margin-right: 20upx;
			}
		}
	}
</style>