订单页

common/uni-nvue.scss

@@ -1,8 +1,6 @@
 .customer_nav_bar {
-	box-sizing: content-box;
+	min-height: var(--status-bar-height);
-	height: var(--status-bar-height);
 	padding-top: 60rpx;
-	width: 100%;
 }
 .com-jianju {
 	margin-left: 28rpx;

pages/tabBar/mine/mine.vue

@@ -27,7 +27,7 @@
 			
 			<view class="com-jianju" style="margin-top: 50rpx;">
 				<u-row justify="between">
-					<u-col v-for="(mbItem, mIndex) in mainBtnlist" span="5.5" 
+					<u-col v-for="(mbItem, mIndex) in mainBtnlist" span="5.8" 
 						customStyle="background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);border-radius: 20rpx;padding: 30rpx;"
 					>
 						<u-row justify="center">

pages/tabBar/search/search.vue

@@ -1,58 +1,94 @@
 <template>
-	<view style="position: relative;">
+	<view class="pg-cont">
 		<view class="customer_nav_bar">
 			<!-- 这里是状态栏 -->
+			<view style="width: 490rpx;">
+				<u-search placeholder="请输入运单号/订单号" v-model="keyword" height="56" search-icon-size="40"
+					:clearabled="true" @change="(e)=> { handleSearchParamChange() }" :show-action="false"></u-search>
 			</view>
-		<image class="hdbg" :src="getCdnUrl(`mine/hdbg.png`)"/>
+			<view>
-		
-		<view class="pg-container">
-			
-			<view class="com-jianju" style="margin-top: 30rpx;">
-				<u-row align="center" >
-					<u-col span="11">
-						<u-row>
-							<u-avatar size="120"></u-avatar>
-							<u-col custom-style="padding-left: 24rpx;">
-								<u-text text="张三" color="#fff" :bold="true" size="36"></u-text>
-								<u-text margin="10rpx 0 0 0" text="13712345678" color="#fff" size="26"></u-text>
-							</u-col>
-						</u-row>
-					</u-col>
-					<u-col span="1" align="end">
-						<image style="height: 32rpx;width: 32rpx;" :src="getCdnUrl(`mine/right.png`)"/>
-					</u-col>
-				</u-row>
-			</view>
-			
-			
-			<view class="com-jianju" style="margin-top: 50rpx;">
 				<u-row justify="between">
-					<u-col v-for="(mbItem, mIndex) in mainBtnlist" span="5.5" 
+					<u-col span="10">
-						customStyle="background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);border-radius: 20rpx;padding: 30rpx;"
+						<u-row>
-					>
+							<view class="sta-item active">我的寄件(2)</view>
+							<view class="sta-item">我的收件(0)</view>
+							<view class="sta-item">未付款(0)</view>
+						</u-row>
+					</u-col>
+					<u-col span="2">
+						<u-button :hairline="false" shape="circle" size="mini" custom-style="border-radius: 23rpx;">
 							<u-row justify="center">
-							<image mode="aspectFit" style="width: 92rpx;height: 76rpx;" :src="mbItem.icon"/>
+								<view style="padding-right: 4rpx;white-space: nowrap;color: #666;">刷新</view>
-							<view style="margin-left: 22rpx;">
+								<u-icon name="arrow-down-fill" color="#666" size="18" custom-style="margin-top: 2rpx;"></u-icon>
-								<u-text size="28rpx" color="#fff" :bold="true" :text="mbItem.title"></u-text>
+							</u-row>
-								<u-text size="24rpx" color="#999"  margin= "15rpx 0 0 0" :text="mbItem.subTitle"></u-text>
+						</u-button>
+					</u-col>
+				</u-row>
+			</view>
+		</view>
+
+		<view class="pg-body">
+			
+			<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pgb-cont"
+			>
+				<view v-for="(orItem) in ordList" class="ord-list-item">
+					<u-row justify="between">
+						<u-col span="11">
+							<u-row @click="handleItem(orItem, { type: 2 })">
+								<u-text :text="'运单号：'+ 'T7080304038'" size="26"></u-text>
+								<view style="flex:1;">
+									<u-icon name="file-text" size="32" custom-style=""></u-icon>
 								</view>
 							</u-row>
 						</u-col>
+						<u-icon @click="handleItem(orItem, { type: 3 })" name="trash"></u-icon>
+					</u-row>
+					
+					<u-row custom-style="margin-top: 30rpx;" justify="center">
+						<u-col span="4">
+							<u-text :text="'中国上海'" size="30" :bold="true" align="center"></u-text>
+							<u-text :text="'张三'" size="26" color="#999" margin="20rpx 0 0 0" align="center"></u-text>
+						</u-col>
+						<u-col span="4"  justify="center" align="center" custom-style="text-align: center;">
+							<image style="width: 70rpx;height: 14rpx;" :src="getCdnUrl('search/toline.png')"></image>
+							<!-- getCdnUrl('search/toline-grey.png') -->
+							<u-text :text="'待付款'" align="center" size="22" margin="10rpx 0 0 0"></u-text>
+						</u-col>
+						<u-col span="4">
+							<u-text :text="'越南'" size="30" :bold="true" align="center"></u-text>
+							<u-text :text="'李四'" size="26" color="#999" margin="20rpx 0 0 0" align="center"></u-text>
+						</u-col>
+					</u-row>
+					
+					<u-text :text="'签收时间：' + '2022-04-30 15:25'" color="#999" size="22" 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" custom-style="height: 54rpx;margin-left: 12rpx;white-space: nowrap;">进仓确认</u-button>
+								<u-button shape="circle" type="primary" custom-style="height: 54rpx;margin-left: 12rpx;white-space: nowrap;">再来一单</u-button>
+								<!-- <u-button shape="circle" type="primary" :plain="true" custom-style="height: 54rpx;margin-left: 16rpx;">单据</u-button> -->
+								<u-button @click="handleItem(orItem, { type: 4 })" shape="circle" type="primary" :plain="true" custom-style="height: 54rpx;margin-left: 12rpx;">取消</u-button>
+								<u-button shape="circle" type="primary" :plain="true" custom-style="height: 54rpx;margin-left: 12rpx;">去付款</u-button>
 							</u-row>
 						</view>
 						
-			<view class="com-jianju pb-block" style="margin-top: 30rpx;padding: 10rpx 0;">
-				<u-row justify="start" custom-style="flex-wrap: wrap;">
-					<u-col span="3" v-for="tlItem in toolBtnlist" align="center">
-						<u-col align="center" justify="center" custom-style="padding: 20rpx 0;display: flex;">
-							<image :src="tlItem.icon" style="height: 66rpx;width: 66rpx" mode="aspectFit"/>
-							<view style="font-size: 24rpx;margin-top: 20rpx;">{{tlItem.title}}</view>
-						</u-col>
-					</u-col>
 					</u-row>
-			</view>
 					
 				</view>
+				<view v-if="false" style="padding-top: 100rpx;">
+					<u-empty
+						text="无数据"
+						:icon="getCdnUrl('kong.png')"
+						textSize="28" 
+						width="86" height="97" 
+					>
+					</u-empty>
+				</view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 <script>
@@ -65,78 +101,136 @@
 		},
 		data() {
 			return {
-				mainBtnlist: [
+				checkedSta: '',
-					{  title: '186单', subTitle: "寄件", icon: getCdnUrl(`mine/jijian.png`), url: '' },
+				searchParam: {
-					{  title: '186单', subTitle: "收件", icon: getCdnUrl(`mine/shjian.png`), url: '' }
+
+				},
+				ordList: [
+					{}
 				],
-				toolBtnlist: [
+				loadMoreText: "加载中...",
-					{  title: '运单列表', subTitle: "", icon: getCdnUrl(`mine/ydlib.png`), url: '' },
+				showLoadMore: false,
-					{  title: '进仓单', subTitle: "", icon: getCdnUrl(`mine/jcdan.png`), url: '' },
+				loadedAll: false
-					{  title: '协议', subTitle: "", icon: getCdnUrl(`mine/xieyi.png`), url: '' },
-					{  title: '账单查询', subTitle: "", icon: getCdnUrl(`mine/zhdancha.png`), url: '' },
-					{  title: '地址簿', subTitle: "", icon: getCdnUrl(`mine/dizhi.png`), url: '' },
-					{  title: '快件查询', subTitle: "", icon: getCdnUrl(`mine/kjcha.png`), url: '' },
-					{  title: '投诉建议', subTitle: "", icon: getCdnUrl(`mine/tousu.png`), url: '' },
-					{  title: '实名填写', subTitle: "", icon: getCdnUrl(`mine/shiming.png`), url: '' }
-				]
 			}
 		},
 		onShareAppMessage() {
 			return {
-				title: '探路物流 速运全球',
+				// title: '',
 				// path: 'TODO'
 			}
 		},
+		onLoad() {
+			this.initData();
+		},
+		onUnload() {
+			this.ordList = [],
+			this.loadMoreText = "加载更多",
+			this.showLoadMore = false;
+		},
 		methods: {
 			getCdnUrl,
+			handleSearchParamChange() {},
+			initData(){
+				setTimeout(() => {
+					
+					uni.stopPullDownRefresh();
+				}, 300);
+			},
+			setListData() {
+				
+			},
+			
+			onScrollBottom() {
+				console.log("onScrollBottom");
+				if (this.loadedAll) {
+					this.loadMoreText = "没有更多数据了!"
+					return;
+				}
+				this.showLoadMore = true;
+				setTimeout(() => {
+					this.setListData();
+				}, 300);
+			},
+			
+			handleItem(item, deal = { type: '1' }) {
+				switch (deal.type){
+					case 1: // 跳转
+						break;
+					case 2: // 复制订单号
+						break;
+					case 3: // 删除
+						break;
+					case 4: // 取消
+						break;
+					default:
+						break;
+				}
+			}
 		}
 	}
 </script>
 
 <style lang="scss">
 	@import '../../../common/uni-nvue.scss';
+
+	page {
+		background-color: #F6F6F6;
+		height: 100% !important;
+	}
+
+	.customer_nav_bar {
+		padding: 50rpx 30rpx 0 30rpx;
+		// padding-top: --status-bar-height;
+		padding-top: 80rpx;
+		background-color: #B12D29;
+	}
 </style>
 <style scoped lang="scss">
-	page{
+	.pg-cont{
-		background-color: #F6F6F6;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
 	}
-	.hdbg{
+	.pg-body{
-		position: absolute;
-		height: 636rpx;
-		top: 0;
-		z-index: 1;
-		width: 100%;
-	}
-	.pg-container{
 		position: relative;
-		z-index: 2;
+		flex: 1;
+	}
+	.pgb-cont{
 		overflow-x: hidden;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		padding: 30rpx;
+		box-sizing: border-box;
 	}
-	
+	.sta-item {
-	.header{
+		padding: 40rpx 0 30rpx 0;
+		margin-right: 30rpx;
+		position: relative;
+		font-size: 28rpx;
 		color: #FFF;
-		.btn-ljyy{
+		opacity: 0.8;
-			margin-left: 0;
+		&.active{
-			width: 144rpx;
+			font-weight: 600;
-			margin-top: 26rpx;
+			opacity: 1;
-			box-sizing: content-box;
+			&::after {
+				content: ' ';
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				margin-left: -32rpx;
+				width: 64rpx;
+				height: 6rpx;
 				background: #FFF;
-			border-radius: 21rpx;
-			font-size: 24rpx;
-			color: #B12D29;
-			padding: 8rpx 0;
-			text-align: center;
-			line-height: normal;
-		}
-		.fjhw{
-			margin-top: 20rpx;
-			height: 162rpx;
-			width: 328rpx;
 			}
 		}
-	
+	}
-	.pb-block{
+	.ord-list-item{
-		background: #FFF;
+		box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(139,139,139,0.06);
-		border-radius: 20px;
+		border-radius: 20rpx;
+		padding: 22rpx 30rpx;
+		background-color: #fff;
 	}
 </style>

pages/tabBar/sending/sending.vue

@@ -124,6 +124,10 @@
 			padding: 8rpx 0;
 			text-align: center;
 			line-height: normal;
+			border: 0;
+			&::after{
+				border: 0;
+			}
 		}
 		
 		.btnlist1 {