emis-app/components/buns-order-templates/bo-detail-tmp.vue

<template>
	<view class="dt-block" style="margin-top: 0;">
		<view class="dt-tle">
			<view class="t1">订单号: Tw891823727001</view>
			<view class="t2">
				<text class="clr-prm">{{'待遗收'}}</text>
			</view>
		</view>
		<u-line margin="20rpx 0 20rpx"></u-line>
		<view>
			<bpe-addressjiami-tmp v-model:value="submitParam"></bpe-addressjiami-tmp>
		</view>
		
	</view>
	
	<view class="dt-block">
		<view class="dt-tle">
			<view class="t1">托寄货物描述</view>
			<view class="t2">
				<text class="clr-prm">{{'待确认'}}</text>
			</view>
		</view>
		<u-line margin="20rpx 0 20rpx"></u-line>
		<view v-for="(item) in ydList" class="yditem">
			<view class="ydi-lab">
				<text class="font-weight">女士针织棉上衣</text>
				<text>预报: 300</text>
			</view>
			<view class="ydi-lab mt-10">
				<text class="clr-sub">无 12L 中国内地</text>
				<text>实入仓: 0</text>
			</view>
			<view class="ydi-lab mt-10">
				<text class="clr-prm">12 CNY</text>
			</view>
		</view>
		
		<view class="dt-item">
			<view class="font-weight">
				<text>总重量:50kg</text>
				<text class="pl-20">总体积:50m</text>
			</view>
		</view>
		
		<u-row justify="end">
			<view style="display: inline-block;white-space: nowrap;" class="mt-10">
				<u-row>
					<u-button @click="goto(`warehousing/detail?id=${211}`)" shape="circle" type="primary"
						custom-style="height: 54rpx;margin-left: 20rpx;">入仓单</u-button>
					<u-button shape="circle" type="primary" :plain="true"
						custom-style="height: 54rpx;margin-left: 20rpx;">单证</u-button>
				</u-row>					
			</view>
		</u-row>
	</view>
	
	
	<view class="dt-block">
		<view class="dt-tle">
			<view class="t1">产品类型及费用</view>
			<view class="t2">
				<text class="clr-prm">{{'已付款/待付款月结'}}</text>
			</view>
		</view>
		<u-line margin="20rpx 0 20rpx"></u-line>
		<view class="blcok-grey-sm">
			<view class="dt-item">
				<view>
					<text class="clr-sub pr-10">目的国家:</text>
					<text class="">柬埔寨</text>
				</view>
				<view>
					<text class="clr-sub pr-10">线路:</text>
					<text class="">柬埔寨快递</text>
				</view>
			</view>
			<view class="dt-item">
				<view>
					<text class="clr-sub pr-10">产品类型:</text>
					<text class="">柬埔寨国际特快</text>
				</view>
				<view>
					<text class="clr-sub pr-10">时效:</text>
					<text class="">23天</text>
				</view>
			</view>
			<view class="dt-item">
				<view>
					<text class="clr-sub pr-10">基础运费:</text>
					<text class="">￥80.00</text>
				</view>
				<view>
					<text class="clr-sub pr-10">付款方式:</text>
					<text class="">寄付现结</text>
				</view>
			</view>
			<view class="dt-item">
				<view>
					<text class="clr-sub pr-10">报关方式:</text>
					<text class="">快递报关</text>
				</view>
				<view>
					<text class="clr-sub pr-10">清关方式:</text>
					<text class="">快递清关</text>
				</view>
			</view>
			<view class="dt-item">
				<view>
					<text class="clr-sub pr-10">运费:</text>
					<text class="clr-prm font-32">￥ 80.00</text>
				</view>
			</view>
		</view>
	</view>
	
	<view class="dt-block">
		<view class="dt-tle">
			<view class="t1">取件信息</view>
			<view class="t2">
				<text class="clr-prm">{{'已付款/待付款月结'}}</text>
			</view>
		</view>
		<u-line margin="20rpx 0 20rpx"></u-line>
		<view class="blcok-grey-sm">
			<view class="dt-item">
				<view>
					<text class="clr-sub pr-10">取货方式:</text>
					<text class="">上门取件 整柜提货</text>
				</view>
			</view>
			<view class="dt-item">
				<view>
					<text class="clr-sub pr-10">预约上门:</text>
					<text class=""> 2023 11-22 09:00 - 10:00</text>
				</view>
			</view>
			<view class="dt-item">
				<view>
					<text class="clr-sub pr-10">安排信息:</text>
					<text >已安排快递员上门取货</text>
				</view>
			</view>
		</view>
		
		<u-line margin="20rpx 0 10rpx 0"></u-line>
		<u-row justify="between">
			<u-text text="快递员" size="28" :bold="true"></u-text>
			<u-row>
				<u-text text="李晓" size="28" :bold="true" margin="0 30rpx 0 0"></u-text>
				<view>
					<u-avatar size="50" :src="''"></u-avatar>
				</view>
			</u-row>
		</u-row>
	</view>
	
	<view class="dt-block">
		<view class="dt-tle">
			<view class="t1">物流动态</view>
			<view class="t2">
				<u-button @click="goto(`post/locus?id=${222}`)" shape="circle" :plain="true" custom-style="height: 50rpx;font-size:28rpx;">查看轨迹</u-button>
			</view>
		</view>
		<u-line margin="20rpx 0 20rpx"></u-line>
		<view class="dt-item">
			<buns-locus-pos :list="[{},{},{}]"></buns-locus-pos>
		</view>
	</view>
	
	<view class="dt-block">
		<view class="dt-tle">
			<view class="t1">底单图片</view>
			<view class="t2"></view>
		</view>
		<u-line margin="20rpx 0 20rpx"></u-line>
		<view class="blcok-grey-sm" style="margin-top: 0;">
			<view>收件进仓单图片</view>
			<u-image @click="handlePreviewDiDan()" :src="getCdnUrl(`mine/kjcha.png`)" width="100" height="100" mode="aspectFill"
				custom-style="margin: 20rpx 20rpx 0 0;"
			></u-image>
		</view>
		<view class="blcok-grey-sm mt-20">
			<view>签收货物图片</view>
			<u-image @click="handlePreviewDiDan()" :src="getCdnUrl(`mine/kjcha.png`)" width="100" height="100" mode="aspectFill"
				custom-style="margin: 20rpx 20rpx 0 0;"
			></u-image>
		</view>
		<view class="blcok-grey-sm mt-20">
			<view>签收签名图片</view>
			<u-image @click="handlePreviewDiDan()" :src="getCdnUrl(`mine/kjcha.png`)" width="100" height="100" mode="aspectFill"
				custom-style="margin: 20rpx 20rpx 0 0;"
			></u-image>
		</view>
	</view>
	<view style="height: 30rpx;"></view>
</template>

<script>
	import getCdnUrl from "@/common/getCdnUrl"
	import { goto, goBack, setClipboardData, confirmModal, showLoading } from "@/common/untool"
	import BpeAddressjiamiTmp from "@/components/buns-post-edit-templates/bpe-addressjiami-tmp"
	
	export default {
		components: { BpeAddressjiamiTmp },
		computed: {
			submitInfo: {
				get(){
					return this.value
				}
			}
		},
		props: {
			value: {
				default () {
					return { }
				}
			}
		},
		data() {
			return {
				ydList: [
					{},{},{}
				]
			}
		},
		created() {
		},
		onHide() {
		
		},
		unmounted() {
			
		},
		methods: {
			goto,
			getCdnUrl,
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
	
</style>
<style scoped lang="scss">
	.dt-block {
		margin-top: 30rpx;
		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;
	}
	
	.yditem{
		padding: 20rpx 20rpx;
		background-color: #F6F6F6;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	.ydi-lab{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
</style>