emis-sapp/pages/bill/detail.vue

<template>
	<tpx-page>
		<tpx-layout>
			<template #body>
				<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">{{info.settleBillNo}}</view>
						</view>
						<view class="dt-item">
							<view class="lb1">出账日期</view>
							<view class="lb2">{{info.settleStartDate}}</view>
						</view>
						<view class="dt-item">
							<view class="lb1">总票数</view>
							<view class="lb2">{{info.sendPieceSum}}</view>
						</view>
						<view class="dt-item">
							<view class="lb1">总件数</view>
							<view class="lb2">{{info.pieceNumber}}</view>
						</view>
						<view class="dt-item">
							<view class="lb1">总重量</view>
							<view class="lb2">{{info.feeWeight}}</view>
						</view>
						<view class="dt-item">
							<view class="lb1">应付金额</view>
							<view class="lb2 clr-prm">￥{{info.recMoney}}</view>
						</view>
						<view class="dt-item">
							<view class="lb1">已付金额</view>
							<view class="lb2 clr-prm">￥{{info.recedMoney}}</view>
						</view>
						<view class="dt-item">
							<view class="lb1">开票状态</view>
							<view class="lb2">
								<tetx v-if="info.openBillStatus == 0">未开票</tetx>
								<tetx v-if="info.openBillStatus == 1">已开票</tetx>
								<tetx v-if="info.openBillStatus == 2">部分开票</tetx>
							</view>
						</view>
						<view v-if="info.paymentStatus==1" class="dt-item">
							<view class="lb1">支付状态</view>
							<view class="lb2 clr-prm font-weight">已支付</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 v-if="info.paymentStatus!=1" class="dt-item mt-30">
							<view class="lb1">支付金额</view>
							<view class="zhfxin">
								<view style="text-align: center;width: 300rpx;">
									<u-image :src="payQrImageUrl" height="300" width="300" radius="10"></u-image>
									<view class="mt-10" style="display: inline-block;">
										<u-text :text="`￥${info.thisPayMoney}`" 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 info.subBillList" class="yditem">
							<view class="ydi-lab">
								<view>
									<u-text :text="'运单号'" size="26" color="#999"></u-text>
								</view>
								<view>
									<u-text :text="item.billCode" size="28" :bold="true" align="right"></u-text>
								</view>
							</view>
							<view class="ydi-lab mt-10">
								<view>
									<u-text :text="'应付金额'" size="26" color="#999"></u-text>
								</view>
								<view>
									<u-text :text="`￥${item.billFee}`" size="28" :bold="true" color="#B12D29" align="right"></u-text>
								</view>
							</view>
						</view>
						<tpx-empty v-if="!(info.subBillList && info.subBillList.length > 0)" size="sm"></tpx-empty>
					</view>
				</view>
			</template>
			
			<template #footer>
				<view v-if="info.paymentStatus!=1" class="blcok-white-noradius">
					<u-button @click="handleCallPay()" type="primary" size="large" shape="circle" 
						custom-style="height:80rpx;font-size: 30rpx;"
					>支付</u-button>
				</view>
			</template>
			
		</tpx-layout>
	</tpx-page>
	
</template>

<script>
	import * as apiService from "@/common/api"
	import { checkParams } from "@/common/validate"
	
	export default {
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		computed: {
			dicData() {
			  return this.$store.getters.dicData
			},
			siteSearchParam() {
				return {}
			}
		},
		data() {
			return {
				queryOption: {
					blNo: ''
				},
				info: {},
				payQrImageUrl: '',
				pageLoading: true,
			}
		},
		onLoad(queryOption) {
			this.queryOption = queryOption
			this.initData();
		},
		onUnload() {
		
		},
		methods: {
			getSendSiteList: apiService.getSendSiteList,
			async initData() {
				await this.getDetailData()
				if(this.info.paymentStatus != 1) {
					await this.getPayQrcode()	
				}
				this.pageLoading = false
			},
			async getDetailData(){
				let res = await apiService.getInfoBySettleBillNo({settleBillNo: this.queryOption.blNo, _loading: true })
				this.info = res.data || {}
			},
			async getPayQrcode(){
				let res = await apiService.getWxPayQrCode({settleBillNo: this.queryOption.blNo, _loading: true })
				this.payQrImageUrl = res.data
			},
			async handleCallPay(){
				let res = await apiService.sumbitWxPay({settleBillNo: this.queryOption.blNo, _loading: true })
				console.log(res)
				debugger
			},
		}
	}
</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>