emis-sapp/pages/bill/detail.vue

<template>
	<tpx-page>
		<tpx-layout>
			<template v-slot:header>
				<view >
					<view class="dt-head">
						<view class="dt-item">
							<view class="lb1">账单编号：</view>
							<view class="lb2" style="font-weight: bold;">{{info.settleBillNo}}</view>
						</view>
						<view class="dt-item">
							<view class="lb1">账单日期：</view>
							<view class="lb2">{{info.createTime}}</view>
						</view>
						<view class="dt-item">
							<u-row justify="between" align="top">
								<u-col span="12">
									<!-- <u-text :text="`账单月份：${info.billMonth}`"  size="26"
										margin="14rpx 0 0 0"></u-text> -->
									<u-text :text="`总票数：${info.sendPieceSum}`"  size="26"
										margin="14rpx 0 0 0"></u-text>
									<u-text :text="`结算重量：${info.feeWeight}KG`"  size="26"
										margin="14rpx 0 0 0"></u-text>
										
									<u-text :text="`总费用：${info.recMoney}CNY`"  size="26"
										margin="14rpx 0 0 0"></u-text>
										
								</u-col>
								<u-col span="12">
									<u-text :text="`总件数：${info.pieceNumber}`"  size="26"
											margin="14rpx 0 0 0"></u-text>
									<view >
										<u-text v-if="info.openBillStatus == '0'" :text="`开票状态：未开票`"  size="26"margin="14rpx 0 0 0"></u-text>
										<u-text v-if="info.openBillStatus == '1'" :text="`开票状态：已开票`"  size="26"margin="14rpx 0 0 0"></u-text>
										<u-text v-if="info.openBillStatus == '2'" :text="`开票状态：部分开票`"  size="26"margin="14rpx 0 0 0"></u-text>
										<u-text v-if="info.openBillStatus == '3'" :text="`开票状态：不开票`"  size="26"margin="14rpx 0 0 0"></u-text>
									</view>
									<u-text :text="`已付费用：${info.recedMoney}CNY`"  size="26"
										margin="14rpx 0 0 0"></u-text>
								</u-col>
							</u-row>
						</view>
						<view class="dt-item" >
							<view class="">支付状态：</view>
							<view class="lb2">
								<text v-if="info.paymentStatus == '0'">未付款</text>
								<text v-if="info.paymentStatus == '1'">已付款</text>
								<text v-if="info.paymentStatus == '2'">部分付款</text>
							</view>
							<!-- <view class="lb2 clr-prm font-weight">已付款</view> -->
						</view>
						<view v-if="info.paymentStatus!=1&&info.thisPayMoney>0" class="dt-item mt-30">
							<view class="">待支付：</view>
							<view class="zhfxin">
								<view  style="display: inline-block;">
									<u-text :text="`￥${info.thisPayMoney}`" size="42" :bold="true" color="red" align="center"></u-text>
								</view>
							</view>
						</view>
						<view v-if="info.paymentStatus!=1" class="dt-item mt-30">
							<view style="width: 50px;">备注：</view>
							<view >
								<view  v-if="info.blLockOnlinePay=='T'" style="display: inline-block;">
									<u-text :text="`${info.lockOnlinePayReason}`" size="42" color="red" align="left"></u-text>
								</view>
								<view  v-if="info.blLockOnlinePay!='T'" style="display: inline-block;">
									<u-text :text="`账单支持在线支付,收款和开票：探路供应链（江苏）有限公司`" size="26"  color="black" align="left"></u-text>
								</view>
							</view>
						</view>
					</view>
					<view style="background: #fff;padding-left: 10px;">
						<u-text :text="'运单列表:'" size="30" :bold="true"></u-text>
						<u-line margin="20rpx 0 20rpx"></u-line>
					</view>
				</view>
			</template>
			
			<template v-slot:body>
				
				<view class="pos-abt-all">
					<tpx-scroll-view v-model:resObject="resData" :pageSize="5" :searchParam="searchParam" :getListFun="getListFun"
						ref="listRef"
					>
						<view class="">
							<!-- 列表数据 -->
							<view v-for="(item) in resData.list" class="ord-list-item" >
								
								<u-row justify="between" align="top">
									<u-col span="6">
										
										<u-text :text="`运单号：${item.billCode}`"  size="26" :bold="true"
											margin="14rpx 0 0 0"></u-text>	
										<!-- <view style="display: inline-flex;">
											<u-text :text="`运单号：`"  size="26"
											margin="14rpx 0 0 0"></u-text>
											<u-text :text="`${item.billCode}`" :bold="true"  size="26"
												margin="0rpx 0 0 0"></u-text>
										</view> -->
										
										<u-text :text="`发件人：${item.waybillDetail.sendName}`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
									
										<u-text :text="`总运费：${item.waybillDetail.freight}CNY`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
										
										<u-text :text="`实际重量：${item.waybillDetail.billWeight}KG`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
											
										<u-text :text="`体积：${item.waybillDetail.totalVolume}m³`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
										
										<u-text :text="`产品类型：${item.waybillDetail.productTypeName}`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
									</u-col>
									<u-col span="6">
										<u-text :text="`寄件日期：${this.formatSendDay(item.waybillDetail.sendDate)}`"  size="26"
											margin="14rpx 0 0 0"></u-text>
										
										<u-text :text="`快件类型：${item.waybillDetail.sendSiteName}--${item.waybillDetail.dispatchUnderlingSiteName}`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
											
										<u-text :text="`件数：${item.waybillDetail.parcelQty}`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
											
										<u-text :text="`结算重量：${item.waybillDetail.settlementWeight}KG`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
											
										<u-text :text="`寄件公司：${item.waybillDetail.sendCompany}`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
									</u-col>
									
								</u-row>
								<u-row >
									<u-col span="12">
										<u-text :text="`费用备注：${item.waybillDetail.feeRemark}`"  size="26"
											margin="14rpx 0 0 0"></u-text>	
									</u-col>
								</u-row>
								
							</view>
							
						</view>
					</tpx-scroll-view>
				</view>
			</template>
			
			<template #footer>
				<view v-if="info.paymentStatus!=1&&info.blLockOnlinePay!='T'&&info.thisPayMoney>0" 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 dayjs from "dayjs"
	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,
				searchParam: {
					settleBillNo: '',
				},
				resData: { list: [] }
			}
		},
		onLoad(queryOption) {
			this.queryOption = queryOption
			this.initData();
		},
		onUnload() {
		
		},
		methods: {
			getSendSiteList: apiService.getSendSiteList,
			async initData() {
				await this.getDetailData()
				this.pageLoading = false
				this.triggerListReload();
			},
			async getDetailData(){
				let res = await apiService.getSimpleInfoBySettleBillNo({settleBillNo: this.queryOption.blNo, _loading: true })
				this.info = res.data || {}
				this.searchParam.settleBillNo=this.queryOption.blNo;
				
			},
			triggerListReload(){
				this?.$refs?.listRef?.getDataList?.(true) // 重置到第一页数据
			},
			async getListFun(param){
				console.log("===>getListFun===>",param);
				param.settleBillNo=this.queryOption.blNo;
				let res = await apiService.getSubBillListBySettleBillNo(param)
				return res
			},
			async getPayQrcode(){
			},
			async handleCallPay(){
				let info = this.$store.getters.userInfo
				let openId = info.openId;
				let res = await apiService.sumbitWxPay({settleBillNo: this.queryOption.blNo,openId:openId,_loading: true })
				// 调起微信支付
				let weChatPayData = res.data;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: weChatPayData.timeStamp,
					nonceStr: weChatPayData.nonceStr,
					package: weChatPayData.package,
					signType: weChatPayData.signType,
					paySign: weChatPayData.paySign,
					success: function(res) {
						uni.showToast({
						  title: '支付成功',
						  icon: 'none'
						});
					},
					fail: function(err) {
						uni.showToast({
						  title: '支付失败:'+err,
						  icon: 'none'
						});
					}
				});
			},
			formatSendDay(sendDate){
			  return dayjs(sendDate).format('YYYY-MM-DD');
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
	.customer_nav_bar {
		padding-top: 30rpx;
		background-color: #FFF;
		position: relative;
	}
</style>
<style scoped lang="scss">
	.pgb-cont{
		padding: 30rpx;
	}
	.pgb-header {
		// padding-top: --status-bar-height;
		padding-top: 30rpx;
		background-color: #FFF;
		position: relative;
	}
	
	.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: #000;
		}
		.lb2{
			font-size: 26rpx;
			font-weight: bold;
		}
	}
	
	.ord-list-item{
		box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(139,139,139,0.06);
		border-radius: 20rpx;
		padding: 22rpx 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
	}
	.search-more-panel{
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		height: calc(70vh);
		z-index: 200;
	}
	.smp-body{
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #FFF;
		border-radius: 0 0 30rpx 30rpx;
		box-sizing: border-box;
	}
	.smp-content{
		flex: 1;
		position: relative;
	}
</style>