emis-sapp/pages/post/locus.vue

<template>
	<view>
		<view class="dt-head">
			<u-text :text="'账单信息'" size="30" :bold="true"></u-text>
			<u-line margin="20rpx 0 20rpx"></u-line>
			<view class="dt-item">
				<view class="lb1">账单编号</view>
				<view class="lb2">{{'T7080123982301'}}</view>
			</view>
			<view class="dt-item">
				<view class="lb1">出账日期</view>
				<view class="lb2">{{'2023-11-20 13:28:56'}}</view>
			</view>
			<view class="dt-item">
				<view class="lb1">总票数</view>
				<view class="lb2">{{'1'}}</view>
			</view>
			<view class="dt-item">
				<view class="lb1">总件数</view>
				<view class="lb2">{{'20'}}</view>
			</view>
			<view class="dt-item">
				<view class="lb1">总重量</view>
				<view class="lb2">{{'120.00 kg'}}</view>
			</view>
			<view class="dt-item">
				<view class="lb1">应付金额</view>
				<view class="lb2">{{'1225.00 CNY'}}</view>
			</view>
			<view class="dt-item">
				<view class="lb1">已付金额</view>
				<view class="lb2">{{'0.00 CNY'}}</view>
			</view>
			<view class="dt-item">
				<view class="lb1">开票状态</view>
				<view class="lb2">{{'未开票'}}</view>
			</view>
			
			<view class="dt-item mt-30">
				<view class="lb1">收款账户</view>
				<view class="lb2">
					<u-row >
						<u-avatar size="80" shape="square"></u-avatar>
						<view class="pl-10">
							<u-text :text="'江苏探路者国际物流有限公司'" size="28" :bold="true" ></u-text>
							<u-text :text="'介绍'" size="26" color="#666" margin="10rpx 0 0 0"></u-text>
						</view>
					</u-row>
				</view>
			</view>
			<view class="dt-item mt-30">
				<view class="lb1">支付金额</view>
				<view class="zhfxin">
					<view style="text-align: center;width: 300rpx;">
						<u-image height="300" width="300" radius="10"></u-image>
						<view class="mt-10" style="display: inline-block;">
							<u-text :text="'￥1225.00'" size="32" :bold="true" color="#B12D29" align="center"></u-text>
						</view>
					</view>
					<u-text margin="20rpx 0 0 0" :text="'请使用微信或支付宝扫以上码支付'" size="28" :bold="true"></u-text>
				</view>
			</view>
			
		</view>
		
		<view class="dt-body">
			<u-text :text="'运单列表'" size="30" :bold="true"></u-text>
			<u-line margin="20rpx 0 20rpx"></u-line>
			<view v-for="(item) in ydList" class="yditem">
				<view class="ydi-lab">
					<view>
						<u-text :text="'运单号'" size="28" color="#999"></u-text>
					</view>
					<view>
						<u-text :text="'T81823778123'" size="28" :bold="true" align="right"></u-text>
					</view>
				</view>
				<view class="ydi-lab mt-10">
					<view>
						<u-text :text="'应付金额'" size="28" color="#999"></u-text>
					</view>
					<view>
						<u-text :text="'￥30.00'" size="28" :bold="true" color="#B12D29" align="right"></u-text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getCdnUrl from "@/common/getCdnUrl"
	import { goto, goBack, setClipboardData, confirmModal, showLoading } from "@/common/untool"

	export default {
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		computed: {
		},
		data() {
			return {
				ydList: [
					{},{},{}
				]
			}
		},
		onShareAppMessage() {
			return {
				// title: '',
				// path: 'TODO'
			}
		},
		onLoad(queryOption) {
			this.queryOption = queryOption
			this.searchParam.tabType = queryOption.tab || tabList[0].val
			this.initData();
		},
		onUnload() {
		},
		methods: {
			getCdnUrl,
			initData(){
				// showLoading()
			},
			
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
	
</style>
<style scoped lang="scss">
	.dt-head {
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #FFF;
		position: relative;
	}
	.dt-body{
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #FFF;
		position: relative;
	}
	.dt-item {
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
		.lb1 {
			width: 160rpx;
			font-size: 26rpx;
			color: #999;
		}
		.lb2{
			font-size: 26rpx;
		}
	}
	.zhfxin{
	}
	.yditem{
		padding: 20rpx 20rpx;
		background-color: #F6F6F6;
		border-radius: 6rpx;
		margin-bottom: 20rpx;
	}
	.ydi-lab{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>