From 1d6a520a984b7c4352bd0fcec520ed21cb9d71c8 Mon Sep 17 00:00:00 2001
From: aihe <961836564@qq.com>
Date: Wed, 13 Dec 2023 00:51:07 +0800
Subject: [PATCH] uu

---
 common/enum.js             |  17 +-
 common/untool.js           |   8 +-
 pages.json                 |  12 ++
 pages/bill/detail.vue      | 177 ++++++++++++++++++++
 pages/bill/list.vue        | 325 +++++++++++++++++++++++++++++++++++++
 pages/tabBar/mine/mine.vue |   6 +-
 6 files changed, 537 insertions(+), 8 deletions(-)
 create mode 100644 pages/bill/detail.vue
 create mode 100644 pages/bill/list.vue

diff --git a/common/enum.js b/common/enum.js
index 07db382..1576560 100644
--- a/common/enum.js
+++ b/common/enum.js
@@ -9,6 +9,7 @@ const ordStatusList = [
 	{ title: '待付款', val: ordStaEnum.unpay }
 ]
 
+
 const payTypeEnum = {
 	postNow: 1,
 	toNow: 2,
@@ -84,6 +85,18 @@ const sendTypeList = [
 	{ title: '整柜提货', val: sendTypeEnum.container }
 ]
 
+const payStatusEnum = {
+	todo: 1,
+	done: 2,
+	other: 3,
+}
+
+const payStatusList = [
+	{ title: '待付款', val: payStatusEnum.todo },
+	{ title: '已付款',  val: payStatusEnum.done },
+	{ title: '其他', val: payStatusEnum.other }
+]
+
 export {
 	ordStaEnum,
 	ordStatusList,
@@ -94,5 +107,7 @@ export {
 	dateTypeEnum,
 	dateTypeList,
 	sendTypeEnum,
-	sendTypeList
+	sendTypeList,
+	payStatusEnum,
+	payStatusList
 }
\ No newline at end of file
diff --git a/common/untool.js b/common/untool.js
index 31038d7..d7927f6 100644
--- a/common/untool.js
+++ b/common/untool.js
@@ -1,7 +1,7 @@
 const tabBarUrls = [
-	'tabBar/sending/sending',
-	'tabBar/search/search',
-	'tabBar/mine/mine'
+	'/pages/tabBar/sending/sending',
+	'/pages/tabBar/search/search',
+	'/pages/tabBar/mine/mine'
 ]
 
 const goto = (url, type = 1)=> {
@@ -35,7 +35,7 @@ const setClipboardData = (val)=> {
 	uni.setClipboardData({
 		data: val,
 		success: () => {
-			showToast({ title: "复制成功", icon: 'none' })
+			showToast('复制成功')
 		},
 	})
 }
diff --git a/pages.json b/pages.json
index 348ab23..2a7f67b 100644
--- a/pages.json
+++ b/pages.json
@@ -91,6 +91,18 @@
 			"style": {
 				"navigationBarTitleText": "实名认证"
 			}
+		},
+		{
+			"path": "pages/bill/list",
+			"style": {
+				"navigationBarTitleText": "我的账单"
+			}
+		},
+		{
+			"path": "pages/bill/detail",
+			"style": {
+				"navigationBarTitleText": "账单明细"
+			}
 		}
 		
 	],
diff --git a/pages/bill/detail.vue b/pages/bill/detail.vue
new file mode 100644
index 0000000..072c624
--- /dev/null
+++ b/pages/bill/detail.vue
@@ -0,0 +1,177 @@
+<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">
+					<view class="zhfxin">
+						<!-- <u-avatar size="100"></u-avatar> -->
+						<u-text  :text="'江苏探路者国际物流有限公司'" size="28" :bold="true" align="center"></u-text>
+					</view>
+				</view>
+			</view>
+			<view class="dt-item mt-30">
+				<view class="lb1">支付金额</view>
+				<view class="zhfxin">
+					<u-image height="300" width="300"></u-image>
+					<view class=""></view>
+					<u-text  margin="20rpx 0 0 0" :text="'￥1225.00'" size="32" :bold="true" color="#B12D29" align="center"></u-text>
+					<u-text margin="20rpx 0 0 0" :text="'请使用微信或支付宝扫以上码支付'" size="28" :bold="true" align="center"></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="30" :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="32" :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 {
+		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{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.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>
\ No newline at end of file
diff --git a/pages/bill/list.vue b/pages/bill/list.vue
new file mode 100644
index 0000000..917b0db
--- /dev/null
+++ b/pages/bill/list.vue
@@ -0,0 +1,325 @@
+<template>
+	<tpx-layout>
+		<template v-slot:body>
+			<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pos-abt-all"
+			>
+				<view class="customer_nav_bar">
+					<view class="com-jianju" >
+						<!-- 关键字搜索框 -->
+						<tpx-search placeholder="请输入运单号/订单号" v-model:value="searchParam.keyword" @change="handleSearchParamChange()" bgColor="#FFF" :timelyTrigger="false"></tpx-search>					
+					</view>
+					
+					<view class="com-jianju" style="padding-top: 40rpx;">
+						<u-row justify="between" align="top">
+							<u-col span="9">
+								<!-- 订单状态 -->
+								<tpx-tabs :list="payStatusList" v-model:value="searchParam.payStatus"
+									@tabchange="(val)=> { handleSearchParamChange() }" v-slot="curOrdTab"
+								>
+									<text slot>
+										(<text>{{curOrdTab.item.val}}</text>)
+									</text>
+								</tpx-tabs>
+							</u-col>
+							<u-col span="2">
+								<!-- 更多查询条件 -->
+								<u-button @click="handleSearchMoreBtn()" :hairline="false" shape="circle" size="mini" custom-style="border-radius: 23rpx;font-size: 26rpx;height: 50rpx;">
+									<u-row justify="center">
+										<view :style="'padding-right: 4rpx;white-space: nowrap;' + (hasExtSchParam?'color: #B12D29;':'color: #666;')">
+											{{hasExtSchParam?'已':''}}筛选
+										</view>
+										<u-icon :name="showSearchMore?'arrow-up-fill':'arrow-down-fill'" 
+											:color="(hasExtSchParam?'#B12D29':'color: #666')" size="18" custom-style="margin-top: 2rpx;"
+										></u-icon>
+									</u-row>
+								</u-button>
+							</u-col>
+						</u-row>
+					</view>
+					
+					<!-- 状态搜索 -->
+					<view v-if="showSearchMore" class="search-more-panel">
+						<view class="smp-body slideInDown animated fast">
+							<view class="smp-content">
+								<view class="pos-abt-all" style="overflow-y: auto;">
+									<view style="padding: 0 0 30rpx 0">
+										<view>
+											<u-text text="快递状态" size="28" :bold="true" margin="0 0 20rpx 0"></u-text>
+											<tpx-tags :list="dlvTypeList" v-model:value="tmpSearchParam.postStatus" ></tpx-tags>
+										</view>
+										
+										<view>
+											<u-text text="付款方式" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>	
+											<tpx-tags :list="payTypeList" v-model:value="tmpSearchParam.payType" ></tpx-tags>
+										</view>
+										
+										<view>
+											<u-text text="时间范围" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>
+											<tpx-tags type="single" :list="dateTypeList" v-model:value="tmpSearchParam.dateType" @onItemClick="handleCheckDate"></tpx-tags>
+											<tpx-tags v-if="tmpSearchParam.date" type='' :list="[{title: tmpSearchParam.date}]" @onItemClick="handleSwitchCladar()" mode="primary"></tpx-tags>
+										</view>
+									</view>
+								</view>
+							</view>
+							<view class="smp-foot">
+								<u-row gutter="20" justify="between">
+									<u-button @click="handleResetTempSearch()" shape="circle">重置</u-button>
+									<view style="width: 40rpx;"></view>
+									<u-button @click="handleConfirmTempSearch()" shape="circle" type="primary">确认</u-button>
+								</u-row>
+							</view>
+						</view>
+					</view>
+				</view>
+				
+				<view class="pgb-cont">
+					<!-- 列表数据 -->
+					<view v-for="(orItem) in dataList" class="ord-list-item" >
+						<u-row justify="between">
+							<text>T7080123982307</text>
+							<view class="kpsat">
+								{{'未开票'}}
+							</view>
+						</u-row>
+						<view class="mt-10" @click="handleGoDetail(orItem)">
+							<u-row justify="between" align="top">
+								<u-col span="6">
+									<u-text :text="`总票数：${'1'}`"  size="26"
+										margin="14rpx 0 0 0"></u-text>
+									<u-text :text="`总重量：${'120'}`"  size="26"
+										margin="14rpx 0 0 0"></u-text>
+									<u-text :text="`总件数：${'20'}`"  size="26"
+										margin="14rpx 0 0 0"></u-text>
+								</u-col>
+								<u-col span="6">
+									<u-text :text="`应付金额：${'80'}CNY`"  size="26"
+										margin="14rpx 0 0 0"></u-text>
+									<u-text :text="`已付金额：${'0'}CNY`"  size="26"
+										margin="14rpx 0 0 0"></u-text>
+								</u-col>
+							</u-row>
+						</view>
+						<u-text :text="`账单时间：${'2023-11-20 13:28:56'}`" color="#999" size="26"
+							margin="30rpx 0 0 0"></u-text>
+						<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
+						<u-row justify="end" custom-style="margin-top:20rpx;">
+							<view style="display: inline-block;">
+								<u-row>
+									<u-button shape="circle" type="primary" :plain="true"
+										@click="handleGoDetail(orItem)" custom-style="height: 54rpx;margin-left: 12rpx;">去付款</u-button>
+								</u-row>
+							</view>
+						</u-row>
+					</view>
+				
+					<!-- 加载更多 -->
+					<u-loadmore icon-size="28" font-size="28" margin-top="30" v-if="showLoadMore || loadedAll"
+						:status="loadedAll ? 'nomore' : 'loading'" />
+				
+					<!-- 空数据页 -->
+					<view v-if="dataList.length == 0" style="padding-top: 100rpx;">
+						<u-empty text="无数据" :icon="getCdnUrl('kong.png')" textSize="28" width="86" height="97">
+						</u-empty>
+					</view>
+				</view>
+			</scroll-view>
+		</template>
+	</tpx-layout>
+	
+	<!-- 日历 -->
+	<!-- @close="handleSwitchCladar()" -->
+	<u-calendar title="请选择日期范围" color="#B12D29" mode="range" rowHeight="90" closeOnClickOverlay :show="showCladar" :defaultDate="tmpSearchParam.date.split('~')" @confirm="handleClaOk" @close="handleSwitchCladar"
+	></u-calendar>
+	
+</template>
+<script>
+	import getCdnUrl from "@/common/getCdnUrl"
+	import { payStatusEnum, payStatusList, payTypeEnum, payTypeList, dlvTypeEnum, dlvTypeList, dateTypeEnum, dateTypeList } from "@/common/enum"
+	import { goto, setClipboardData, confirmModal, showLoading } from "@/common/untool"
+	export default {
+		props: {
+			// hasLeftWin: {
+			// 	type: Boolean
+			// }
+		},
+		computed: {
+			hasExtSchParam() {
+				let hasExt = false
+				const searchParam = this.searchParam
+				if(
+					(searchParam.postStatus && searchParam.postStatus.length > 0)
+					|| (searchParam.payType && searchParam.payType.length > 0)
+					|| (searchParam.date || (searchParam.dateType && searchParam.dateType != dateTypeEnum.custom) )
+				) {
+					hasExt = true
+				}
+				return hasExt
+			},
+		},
+		data() {
+			return {
+				...JSON.parse(JSON.stringify({ payStatusEnum, payStatusList, payTypeEnum, payTypeList, dlvTypeEnum, dlvTypeList, dateTypeEnum, dateTypeList })),
+				searchParam: {
+					keyword: '',
+					payStatus: payStatusList[0].val // 订单状态， 1：寄件； 2：收件； 3：待付款；
+				},
+				showSearchMore: false,
+				showCladar: false,
+				tmpSearchParam: {
+					
+				},
+				dataList: [
+					{}
+					// ,{},{},{},{},{},{},{}
+				],
+				showLoadMore: false,
+				loadedAll: false
+			}
+		},
+		onShareAppMessage() {
+			return {
+				// title: '',
+				// path: 'TODO'
+			}
+		},
+		onLoad() {
+			this.initTmpSrchParam()
+			this.initData();
+		},
+		onUnload() {
+		},
+		methods: {
+			getCdnUrl,
+			
+			initData(){
+				// showLoading()
+				setTimeout(() => {
+					uni.stopPullDownRefresh();
+				}, 300);
+			},
+			initTmpSrchParam(){
+				this.tmpSearchParam = {
+					postStatus: [], // 快递状态
+					payType: [], // 支付类型
+					dateType: '', // 日期类型
+					date: '' // 日期
+				}
+			},
+			loadListData() {
+				// 请求列表数据 TODO
+				console.log('====this.searchParam===', this.searchParam)
+			},
+			
+			onScrollBottom() {
+				console.log("onScrollBottom");
+				if (this.loadedAll) {
+					return;
+				}
+				this.showLoadMore = true;
+				this.handleSearchParamChange();
+			},
+			handleSearchMoreBtn(){
+				if(!this.showLoadMore) {
+					// 回显更多条件
+					Object.keys(this.tmpSearchParam).map(t=> {
+						const val = this.searchParam[t]
+						typeof val != 'undefined' && (this.tmpSearchParam[t] = val)
+					})
+				}
+				this.showSearchMore = !this.showSearchMore
+			},
+			handleSearchParamChange(key, val) {
+				if(key) {
+					this.searchParam[key] = val
+				}
+				this.loadListData()
+			},
+			
+			handleResetTempSearch(){
+				this.initTmpSrchParam()
+			},
+			handleConfirmTempSearch(){
+				Object.assign(this.searchParam, this.tmpSearchParam)
+				this.showSearchMore = false
+				this.handleSearchParamChange();
+			},
+			handleCheckDate(item) {
+				let newVal = item.val
+				if(newVal == dateTypeEnum.custom) {
+					this.handleSwitchCladar()
+				} else {
+					this.tmpSearchParam.date = ''
+				}
+			},
+			handleClaOk(res){
+				const ary = Object.values(res)
+				const val = [ary[0], ary[ary.length-1]].join("~")
+				this.handleSwitchCladar()
+				this.tmpSearchParam.date = val 
+			},
+			handleSwitchCladar() {
+				this.showCladar = !this.showCladar
+				if(!this.showCladar) {
+					!this.tmpSearchParam.date && (this.tmpSearchParam.dateType = '')
+				}
+			},
+			handleGoDetail(item = {}) {
+				goto(`bill/detail?id=${item.id}`)
+			}
+		}
+	}
+</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;
+	}
+	
+	.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;
+	}
+	.kpsat{
+		font-size: 26rpx;
+		background-color: rgb(246, 246, 246);
+		color: rgb(102, 102, 102);
+		border-radius: 10rpx;
+		padding: 12rpx 16rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/mine/mine.vue b/pages/tabBar/mine/mine.vue
index b863d85..b188a42 100644
--- a/pages/tabBar/mine/mine.vue
+++ b/pages/tabBar/mine/mine.vue
@@ -73,10 +73,10 @@
 					{  title: '186单', subTitle: "收件", icon: getCdnUrl(`mine/shjian.png`), url: '' }
 				],
 				toolBtnlist: [
-					{  title: '运单列表', subTitle: "", icon: getCdnUrl(`mine/ydlib.png`), url: '' },
+					{  title: '运单列表', subTitle: "", icon: getCdnUrl(`mine/ydlib.png`), url: 'tabBar/search/search' },
 					{  title: '进仓单', subTitle: "", icon: getCdnUrl(`mine/jcdan.png`), url: '' },
 					{  title: '协议', subTitle: "", icon: getCdnUrl(`mine/xieyi.png`), url: '' },
-					{  title: '账单查询', subTitle: "", icon: getCdnUrl(`mine/zhdancha.png`), url: '' },
+					{  title: '账单查询', subTitle: "", icon: getCdnUrl(`mine/zhdancha.png`), url: 'bill/list' },
 					{  title: '地址簿', subTitle: "", icon: getCdnUrl(`mine/dizhi.png`), url: 'address/list' },
 					{  title: '快件查询', subTitle: "", icon: getCdnUrl(`mine/kjcha.png`), url: '' },
 					{  title: '投诉建议', subTitle: "", icon: getCdnUrl(`mine/tousu.png`), url: 'complaint/complaint' },
@@ -93,7 +93,7 @@
 		methods: {
 			getCdnUrl,
 			handlePageRedirect(item) {
-				goto(item.url)
+				item.url && goto(item.url)
 			}
 		}
 	}