wangluohuoyun-app/pages/order/index.vue

<!-- 货源 -->
<template>
	<view class="content">
		<view class="fixed1"></view>
		<view v-if="!isSearch">
			<view class="fixed">
				<view class='title flex flex-center'>
					<view>订单</view>
					<u-icon class="search" name="search" color="" size="28" @click="search"></u-icon>
				</view>
				<u-tabs :list="tabList" @click="clickTab" lineColor='#2772FB' :current='tabIndex' :activeStyle="{
								color: '#2772FB',
								fontWeight: 'bold',
								transform: 'scale(1.05)'
							}"></u-tabs>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				class="mescroll">
				<view :id="'good'+good.id" class="good-list" v-for="good in goods" :key="good.id"
					@click="toDetail(good.id)">
					<view style="padding: 0 35rpx 20rpx 35rpx;">
						<view class="flex flex-space-between row1">
							<view class="item1">
								CY20220210666666 玉米
							</view>
							<view class="item2">
								待签约
							</view>
						</view>
						<view class="flex row2">
							<view class="left flex flex-space-between">
								<view class="ssx">辽</view>
								<view class="level2-title">营口 鲅鱼圈</view>
								<view>
									<image class="jt-icon" src="@/static/images/goodSource/jt.png" mode='widthFix'>
									</image>
								</view>
								<view class="ssx">
									京
								</view>
								<view class="level2-title">北京 通州</view>
							</view>
						</view>
						<view class="flex row3">
							<view class="left">
								<image class="hz" src="@/static/images/news/hz.png"></image>
							</view>
							<view class="right">
								<view class="flex fontsize-26 row">
									<view>中天昊元贸易有限公司</view>
									<view class="sline"></view>
									<view>李振华</view>
								</view>
								<view class="flex align-center">
									<view class="fontsize-26">货距 10km</view>
									<view class="sline"></view>
									<view class="fontsize-26 ">运距 35km</view>
								</view>
							</view>
						</view>
						<view class="row4 flex flex-end align-center">
							<view class="time">2022-02-10 10:08</view>
							<view class="car">1000元/车</view>
						</view>
						<view class="row5 flex flex-end">
							<view class="stop active">终止</view>
							<view class="start normal">确认装车</view>
							<!-- 	<view class="start">联系客服</view>
							<view class="start">确认卸车</view>
							<view class="start">评价</view>
							<view class="start">完结</view> -->
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<view v-else class="search-view">
			<view class="flex">
				<u-icon name="arrow-left" color="" size="20" class="back-icon"></u-icon>
				<u-search placeholder="可按编号、货主、收发地查找" placeholderColor="#AFB3BF" :actionStyle="textColor"
					bgColor="#F5F6FA" v-model="keyword" actionText='取消' @custom="cancel" @search="getSearch"></u-search>
			</view>
			<view class="near-search">
				<view class="flex flex-space-between">
					<view class="near-search-text">最近搜索</view>
					<u-icon name="trash-fill" color="#AFB3BF" size="20" class="back-icon" @click="del"></u-icon>
				</view>
				<view class="">
					<view v-for="(item,index) in 3" :key="index" class="item-style inline-block">
						中天好远
					</view>
				</view>

			</view>
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
			:showCancelButton='true' @confirm="confirmClick" @close="cancelClick"
			@cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGoods
	} from "@/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				alertTitle:'',
				alertContent:"确定删除全部历史记录?",
				isShowAlert:false,
				textColor: {
					"color": "#AFB3BF"
				},
				keyword: '',
				isSearch: false,
				startPlace: '齐齐哈尔齐齐哈尔',
				endPlace: '全国',
				goods: [], // 数据列表
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				height: "", // 需要固定swiper的高度
				tabList: [{
						name: '全部'
					}, {
						name: '未发运'
					}, {
						name: '运输中'
					}, {
						name: '待收货'
					}, {
						name: '待结算'
					},
					{
						name: '已完结'
					},
					{
						name: '评价'
					},
				],
				tabIndex: 0,
				scrollTop: 0
			}
		},
		onTabItemTap(e) {
			// tab 点击时执行，此处直接接收单击事件
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			console.log(e)
		},
		created() {
			//#ifdef APP-PLUS
			// this.getLngLat();
			//#endif
		},
		onLoad() {
			let _isHave = this.$utils.getRoles('aaa')
			console.log(_isHave)
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
			console.log("页面滚动了", res.scrollTop)
			if (this.scrollTop > 1200) {
				uni.setTabBarItem({
					index: 1,
					text: '返回顶部',
					iconPath: 'static/images/common/top@2x.png',
					selectedIconPath: 'static/images/common/top@2x.png'
				})
			} else {
				uni.setTabBarItem({
					index: 1,
					text: '订单',
					iconPath: 'static/images/common/dingdan@2x(1).png',
					selectedIconPath: 'static/images/common/dingdan@2x.png'
				})
			}

		},
		methods: {
			del(){
				this.isShowAlert= true
			},
			confirmClick(){},
			cancelClick(){
				this.isShowAlert = false
			},
			getSearch() {
				console.log("点击搜索")
			},
			cancel() {
				this.isSearch = false
			},
			toDetail(id) {
				uni.$u.route('/pages/order/orderDetails', {
					id: id,
				});
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }

				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.isInitxx){
				// 	apiGetxx().then(res=>{
				// 		this.isInitxx = true
				// 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// 	}).catch(()=>{
				// 		this.mescroll.endErr()
				// 	})
				// 	return // 此处return,先获取xx
				// }

				//联网加载数据
				apiGoods(page.num, page.size).then(res => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					//this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)

					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					this.mescroll.endSuccess(res.list.length);

					//设置列表数据
					if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods = this.goods.concat(res.list); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			clickTab(val) {
				console.log(val)
			},
			search() {
				this.isSearch = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.banner {
		width: 100%;
		position: relative;
	}

	.fixed,
	.fixed1 {
		background: white;
		position: fixed;
		top: var(--status-bar-height);
		z-index: 999;
		width: 100%;
	}

	.fixed {
		.title {
			background: white;
			position: relative;
			font-size: 36rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.85);

			.search {
				position: absolute;
				right: 20rpx;
			}
		}
	}

	.fixed1 {
		top: 0;
		height: var(--status-bar-height);
		background: white;
	}

	.banner-img {
		width: 100%;
	}

	.head {
		position: absolute;
		width: calc(100% - 108rpx);
		bottom: 0;
		background: white;
		margin: 0 20rpx;
		border-radius: 20rpx;

		.item1,
		.item3 {
			width: 40%;

			.text {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

		}

		.item1 .text {
			text-align: left;
		}

		.item3 .text {
			text-align: right;
		}
	}

	.change-btn {
		width: 86rpx;
		height: 86rpx;
	}

	.good-list {
		background-color: white;
		margin: 20rpx;
		padding: 20rpx 0rpx 0 0;
		border-radius: 20rpx;

		.row1 {
			font-size: 26rpx;

			.item1 {

				color: #333333;
			}

			.item2 {
				color: #FE6300;
			}
		}

		.row2 {
			margin: 30rpx 0;
		}

		.row3 {
			background: #F5F6FA;
			padding: 20rpx;
			border-radius: 10rpx;
			color: #333333;

			.hz {
				width: 74rpx;
				height: 74rpx;
				margin-right: 30rpx;
			}
		}

		.row4 {
			margin: 20rpx 0;

			.time {
				font-size: 26rpx;
				color: #999999;
				margin-right: 20rpx;
			}

			.car {
				font-size: 28rpx;
				color: #000000;
			}
		}

		.row5 {
			margin: 20rpx 0;
font-size: 28rpx;
			.stop {
				border-radius: 33px;
				border: 1px solid #FE6300;
				padding: 13rpx 31rpx;
				margin-right: 20rpx;
				color: #FE6300;
			}

			.normal {
				border: 1px solid #CDCDCD;
				border-radius: 33px;
				padding: 13rpx 31rpx;
			}
		}
	}

	.jt-icon {
		position: relative;
		top: 6rpx;
		width: 60rpx;
		margin: 0 20rpx;

	}

	.row {
		margin: 10rpx 0;
		align-items: center;
	}

	// .item-bottom {
	// 	background: #F0F5FF;
	// 	padding: 0 30rpx;

	// 	.name {
	// 		font-size: 26rpx;
	// 		font-weight: 700;
	// 		color: #000000;
	// 		margin-left: 30rpx;
	// 	}

	// 	.hp {
	// 		margin: 30rpx;
	// 	}

	// 	.number-color {
	// 		margin: 0 10rpx;
	// 	}

	// 	.qd {
	// 		background: linear-gradient(97deg, #4FABFD 0%, #2772FB 100%);
	// 		border-radius: 13px;
	// 		font-size: 29rpx;
	// 		font-weight: 400;
	// 		color: #FFFFFF;
	// 		padding: 10rpx 35rpx;
	// 	}
	// }

	.dw {
		align-items: center;
	}

	.mescroll {
		margin-top: calc(var(--status-bar-height) + 140rpx);
	}

	.sline {
		height: 28rpx;
		width: 1px;
		background: black;
		margin: 0 20rpx;
	}

	.search-view {
		margin-top: var(--status-bar-height);
		background: white;
		padding: 0 20rpx;
	}

	.back-icon {
		margin-right: 20rpx;
	}

	.near-search-text {
		margin: 20rpx 0;
	}

	.item-style {

		background: #F5F6FA;
		padding: 11rpx 24rpx;
		margin-right: 20rpx;
		border-radius: 10px;
		font-size: 26rpx;
		color: #333333;
	}
</style>