217 lines
5.2 KiB
Vue
217 lines
5.2 KiB
Vue
<template>
|
|
<tpx-layout>
|
|
<template v-slot:header></template>
|
|
<template v-slot:body>
|
|
<div style="min-height: 100%;display: flex;flex-direction: column;">
|
|
<view style="position: relative;">
|
|
<map :markers="map.markers" :latitude="map.latitude" :longitude="map.longitude"
|
|
style="width: 750rpx;height: 600rpx;"
|
|
></map>
|
|
|
|
<view class="mp-address-mask">
|
|
<u-row justify="between">
|
|
<u-row @click="setClipboardData(`T7080304038`)">
|
|
<view>
|
|
<u-text :text="'运单号：'+ 'T7080304038'" size="26"></u-text>
|
|
</view>
|
|
<view class="pl-10">
|
|
<u-icon name="file-text" size="32" custom-style=""></u-icon>
|
|
</view>
|
|
</u-row>
|
|
<view @click="goto(`post/detail?id={${22}}`)" class="com-tag-grey">
|
|
运单信息
|
|
</view>
|
|
</u-row>
|
|
|
|
<u-row @click="handleDealItem(orItem, { type: 1 })" custom-style="margin-top: 30rpx;" justify="center">
|
|
<u-col span="4">
|
|
<u-text :text="'中国上海'" size="30" :bold="true" align="center"></u-text>
|
|
<u-text :text="'张三'" size="26" color="#999" margin="20rpx 0 0 0"
|
|
align="center"></u-text>
|
|
</u-col>
|
|
<u-col span="4" justify="center" align="center" custom-style="text-align: center;">
|
|
<image style="width: 70rpx;height: 14rpx;" :src="getCdnUrl('search/toline.png')">
|
|
</image>
|
|
<!-- getCdnUrl('search/toline-grey.png') -->
|
|
<u-text :text="'待付款'" align="center" size="22" margin="10rpx 0 0 0"></u-text>
|
|
</u-col>
|
|
<u-col span="4">
|
|
<u-text :text="'越南'" size="30" :bold="true" align="center"></u-text>
|
|
<u-text :text="'李四'" size="26" color="#999" margin="20rpx 0 0 0"
|
|
align="center"></u-text>
|
|
</u-col>
|
|
</u-row>
|
|
|
|
<u-text :text="'下单时间：' + '2022-04-30 15:25'" color="#999" size="24"
|
|
margin="30rpx 0 0 0"></u-text>
|
|
</view>
|
|
<view class="mp-kuadiyuan-mask" @click="handleCallTel">
|
|
<u-row justify="between">
|
|
<u-row>
|
|
<tpx-image :src="getCdnUrl('post/run.png')" width="30" height="30"></tpx-image>
|
|
<view class="ml-20">探路小哥 - 黎明</view>
|
|
</u-row>
|
|
<tpx-image :src="getCdnUrl('post/call.png')" width="60" height="60"></tpx-image>
|
|
</u-row>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="dt-block">
|
|
<view class="dt-item">
|
|
<buns-locus-pos :list="[{},{},{},{},{}]"></buns-locus-pos>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</template>
|
|
<template v-slot:footer>
|
|
<view class="blcok-white-noradius" style="margin-top: 0;">
|
|
<u-row justify="space-around">
|
|
<u-button @click="goBack()" :plain="true" size="large" shape="circle"
|
|
custom-style="margin: 0 10rpx;height:80rpx;font-size: 30rpx;">
|
|
返回
|
|
</u-button>
|
|
<u-button @click="goto(`post/post?id=${222}`)" type="primary" size="large" shape="circle"
|
|
custom-style="margin: 0 10rpx;height:80rpx;font-size: 30rpx;">再来一单
|
|
</u-button>
|
|
</u-row>
|
|
</view>
|
|
</template>
|
|
</tpx-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import getCdnUrl from "@/common/getCdnUrl"
|
|
|
|
import {
|
|
goto,
|
|
goBack,
|
|
setClipboardData,
|
|
confirmModal,
|
|
makePhoneCall,
|
|
showLoading
|
|
} from "@/common/untool"
|
|
|
|
export default {
|
|
props: {
|
|
// hasLeftWin: {
|
|
// type: Boolean
|
|
// }
|
|
},
|
|
computed: {},
|
|
data() {
|
|
return {
|
|
map: {
|
|
latitude: 23.106574, //纬度
|
|
longitude: 113.324587, //经度
|
|
scale: 13, //缩放级别
|
|
markers: [{
|
|
latitude: 23.106574, //纬度
|
|
longitude: 113.324587, //经度
|
|
title: '出发地',
|
|
iconPath: getCdnUrl('mine/tousu.png'),
|
|
width: 50,
|
|
height: 50,
|
|
label: {
|
|
content: '发货地址',
|
|
color: '#fff',
|
|
borderRadius: '10',
|
|
bgColor: '#B12D29',
|
|
padding: '10'
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
// title: '',
|
|
// path: 'TODO'
|
|
}
|
|
},
|
|
onLoad(queryOption) {
|
|
this.queryOption = queryOption
|
|
this.initData();
|
|
},
|
|
onUnload() {},
|
|
methods: {
|
|
setClipboardData,
|
|
goBack,
|
|
goto,
|
|
getCdnUrl,
|
|
initData() {
|
|
// showLoading()
|
|
},
|
|
handleCallTel() {
|
|
makePhoneCall("114")
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/uni-nvue.scss';
|
|
|
|
page {
|
|
background-color: #F6F6F6;
|
|
height: 100% !important;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.mp-address-mask, .mp-kuadiyuan-mask{
|
|
z-index: 1000;
|
|
position: absolute;
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
}
|
|
.mp-address-mask{
|
|
padding: 20rpx 30rpx;
|
|
top: 30rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
}
|
|
.mp-kuadiyuan-mask{
|
|
padding: 12rpx 10rpx 12rpx 30rpx;
|
|
bottom: 20rpx;
|
|
color: #fff;
|
|
&::after{
|
|
border-radius: 36rpx;
|
|
content: ' ';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: #0E0708;
|
|
opacity: 0.5;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.dt-block {
|
|
flex: 1;
|
|
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
|
padding: 30rpx;
|
|
background-color: #FFF;
|
|
position: relative;
|
|
}
|
|
|
|
.dt-tle {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.t1 {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.t2 {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.dt-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 20rpx;
|
|
justify-content: space-between;
|
|
}
|
|
</style> |