<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>