high-mini/pages/wuliu/wuliu.vue

<template>
	<view class="container-circle"
	  :style="{'height':windowHeight+'px'}"
	  >
	 
	  	<map class="width100" :style="{height:windowHeight+'px'}" :latitude="latitude" :longitude="longitude" >
	  				
		</map>
	  
	
	 
	 
		<view class="" style="  width: 100%; height: 50%;position: fixed;bottom: 0;z-index:2;background-color: antiquewhite;">
			
	
			<scroll-view  scroll-y="true" class="height100">
				
				<view class="pd-main backcolorfff border-8r height100">
				<view class="dis-flex flex-sp mart10 marb10  paddbotm10  border-b">
					 <view class="dis-flex">
					 	<image class="wuliu-img" src="https://pic.616pic.com/ys_bnew_img/00/07/04/1ZtrvD1AMY.jpg" mode="aspectFill"></image>
						<text class="paddleft5">顺丰速运</text>
						<text class="paddleft5">SF1662013492192</text>
					 </view>
					 <view class="dis-flex ">
					 		<text @click="copyText('SF1662013492192')">复制</text>
							<text class="paddleft5 paddtright5 fcor666">|</text>
					 		<text @click="callPhone">打电话</text>
					 </view>
				 </view>
				
				<block v-for="(item, index) in tracesData" :key="index">
				  
				  <trackNode  :is-first="index===tracesData.length-1" :is-newest="index===0" :is-main-node="item.isMainNode" :node-data="item"></trackNode>
				</block>
			</view>
			</scroll-view>
			
		</view>
	 
		
		<wuliuPopup ref="wuliuPopup"></wuliuPopup>
		
	</view>
</template>
<!--
		isNewest	Boolean	是否是最新（时间）节点
		isFirst	Boolean	是否是第一项（第一项不展示竖线）
		isMainNode	Boolean	是否是每种状态下的主节点（主节点显示图标，非主节点显示圆点）
		nodeData	Object	每项数据 
		 -->  
<script>
	// import touchUpDown from '@/components/touchUpDown/touchUpDown.vue'
	import trackNode from '@/components/trackNode/trackNode.vue'
	import wuliuPopup from '@/components/wuliuPupup/wuliuPupup.vue'
	
	export default {
		data(){
			return{
				
				windowHeight:null,
				// 地图参数
				id:1, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					// iconPath: '../../'
					}, {
					latitude: 39.90,
					longitude: 116.39,
					// iconPath: '../../../static/location.png'
				}],
				
				tracesData: [
				  {
				    acceptStation: '包裹已被吴亦发同学签收', // 节点描述
				    createTime: '2019-10-24 15: 27: 16',
				    status: 'COMPLETE', // 节点状态
				    phone: '', // 电话
				    statusName: '已签收', // 节点标题
				    isMainNode: true // 是否主节点，主节点前方展示icon
				  },
				]
						 
			}
		},
		onReady() {
		  this.windowHeight = uni.getSystemInfoSync().windowHeight;
		 
		},
		mounted(){
			
		},
		components:{
			wuliuPopup,
			trackNode,
		},
		methods:{
			
			setScrollViewHeight(){
				
			},
			setScrollHeight(){
				
			},
			// 查看物流
			checkWuliu(){
				
			},
			// 复制
			copyText(text){	
				// #ifdef H5
				this.$copyText(text).then(
					res => {
						uni.showToast({
							title: '复制成功'
						})
					}
				)
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
				// #endif
				
				
			},
			// 打电话
			callPhone(){
					uni.showModal({
						title: '客服',
						content: '85655525652',
						success: function(res) {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '85655525652', //电话号码
									success: function(e) {
										console.log(e);
									},
									fail: function(e) {
										console.log(e);
				
									}
								})
							}
						}
					})
			},
			
			
		},
		destroyed() {
			
		}
	}
</script>

<style scoped>
.container-circle{
	box-sizing: border-box;
}

.wuliu-img{
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.border-b{
	border-bottom: 2px solid #f6f6f6;
}
	
.wuliupop{
	padding: 50px 10px 10px;
}
.pop-title{
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		background-color: #f6f6f6;
	}
</style>