emis-app/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" 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'" class="blcok-white-noradius">
					<u-button @click="shareToWeixin()" type="primary" size="large" shape="circle" open-type="share"
						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(){
				// let res = await apiService.getWxPayQrCode({settleBillNo: this.queryOption.blNo, _loading: true })
				// this.payQrImageUrl = res.data
			},
			shareToWeixin(){
				this.shareTo('weixin', 'WXSceneSession')
			},
			shareTo(platform, scene = '') {
			  uni.share({
				provider: platform,
				scene: scene,
				type: 0,
				title: "请使用微信支付探路速运账单费用:"+this.queryOption.blNo,
				summary: "请使用微信付款",
				href: 'https://oms.tanex56.com/onlinePay?bid='+this.queryOption.blNo, 
				imageUrl: 'https://oms.tanex56.com/shorticon.png', 
				success: (res) => {
				  uni.showToast({
					title: '分享成功',
					icon: 'none'
				  })
				},
				fail: (err) => {
				  console.error('分享失败:', JSON.stringify(err))
				  uni.showToast({
					title: '分享失败:'+JSON.stringify(err),
					icon: 'none'
				  })
				}
			  })
				 //  var weixinShare = null;
				 //  plus.share.getServices(function(services) {
				 //  	for (var i in services) {
				 //  		var service = services[i];
				 //  		// 获取微信分享对象
				 //  		if (service.id == 'weixin') {
				 //  			weixinShare = service;
				 //  			break;
				 //  		}
				 //  	}
					
					// if(weixinShare==null){
					// 	uni.showToast({
					// 	  title: '分享失败:获取微信分享服务失败',
					// 	  icon: 'none'
					// 	})
						
					// 	return;
					// }
					
				 //  	weixinShare.send( {
				 //  		content: '我正在使用HBuilderX开发App，赶紧跟我一起来体验！'
				 //  	}, function(){
				 //  		// 分享成功
				 //  	}, function(err) {
				 //      // 分享操作失败
					//   uni.showToast({
					// 	title: '分享失败1:'+JSON.stringify(err),
					// 	icon: 'none'
					//   })
				 //  	})
				 //  }, function(err) {
				 //  	// 获取 services 失败
					// uni.showToast({
					//   title: '分享失败2:'+JSON.stringify(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>