wangluohuoyun-huozhuapp/pages/release/record.vue

<template>
	<view class="content">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" class="mescroll"
			:up="upOption">
			<view class="top">
				<u-icon class="back" name="arrow-left" color="" size="20" @click="back"></u-icon>
				<u-search placeholder="可按编号、货主、收发地查找" v-model="searchKeyWord" @search="search" @custom="search"
					bgColor='#F5F6FA'></u-search>
			</view>
			<!-- <u-tabs
			        :list="list1"
			        lineWidth="30"
			        lineColor="#f56c6c"
			        :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }"
			        :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }"
			        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			    >
			    </u-tabs> -->
			<view class='tab-nav'>
				<view class='tab-item' v-for='item in list1' @click='statuschange(item)'
					:class='{active:item.status==searchType}'>
					{{item.name}}
					<!-- {{item.num}} -->
				</view>
			</view>

			<!-- <u-tabs  :list="list1" @click="click"></u-tabs> -->
			<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">
							{{good.taskNo}}
							<!-- {{good.goodsName}} -->
						</view>
						<view class="item2 ytg-color" v-if="good.status=='已通过'">{{good.status}}</view>
						<view class="item2 wtg-color" v-if="good.status=='未通过'">{{good.status}}</view>
						<view class="item2 shz-color" v-if="good.status=='审核中'">{{good.status}}</view>
						<view class="item2 ygq-color" v-if="good.status=='已过期'">{{good.status}}</view>
					</view>
					<view class="flex row2">
						<view class="left flex">
							<view class="flex">
								<view class="ssx">
									{{$helper.getProvinceAbbreviation(good.sendPrivate?good.sendPrivate:good.sendCity)}}
								</view>
								<view class="level2-title">{{good.sendCity}}</view>
							</view>
							<view class="level2-title">{{good.sendArea}}</view>
						</view>
						<image class="jt-icon" src="@/static/images/goodSource/jt.png" mode='widthFix'></image>
						<view class="right flex">
							<view class="flex">
								<view class="ssx">
									{{$helper.getProvinceAbbreviation(good.unloadPrivate?good.unloadPrivate:good.unloadCity)}}
								</view>
								<view class="level2-title">{{good.unloadCity}} </view>
							</view>
							<view class="level2-title">{{good.unloadArea}}</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 row">
								<view class="flex">
									<!-- <image class="hz-good" src="@/static/images/order/good-img.png"></image> -->
									<view>{{good.goodsName}}</view>
								</view>
								<view class="sline" v-if="good.carLengthSmall&&good.carLength"></view>
								<view class="cc" v-if="good.carLengthSmall&&good.carLength">{{good.carLengthSmall}} -
									{{good.carLength}} 米
								</view>
								<view class="sline" v-if="carType(good)"></view>
								<view>{{carType(good)}}</view>
							</view>
							<view class="flex align-center">
								<view class="">运距约 {{good.distance}}km</view>
								<view v-if='good.weight' class="sline"></view>
								<view v-if='good.weight' class="">{{good.weight}}吨</view>
							</view>
						</view>
					</view>
					<view class="row4 flex flex-end align-center">
						<view class="time">{{good.updateDate}}</view>
						<!-- <view class="car">{{good.freight}}{{good.illingMethod==0?'元/吨':'元/车'}}</view> -->
					</view>
					<view class="row5 flex flex-end">
						<view class="normal" @click.stop="edit(good)" v-if="good.status =='未通过'">编辑</view>
						<!-- 只有已驳回的任务有编辑-->
						<view class="normal" @click.stop="del(good)">删除</view>
						<!-- v-if="good.status!='已通过'" -->
						<view class="normal" @click.stop="Refresh(good)" v-if="good.status=='已通过'">刷新</view>
						<view class="normal" @click.stop="hideShow(good)" v-if="good.showHide=='1'&&good.status=='已通过'">
							隐藏</view>
						<view class="normal" @click.stop="hideShow(good)" v-if="good.showHide=='2'&&good.status=='已通过'">
							显示</view>
					</view>
				</view>
			</view>
		</mescroll-body>

		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :confirmText='confirmText'
			:closeOnClickOverlay='true' :showCancelButton='true' @confirm="$u.throttle(confirmClick, 1000)"
			@close="cancelClick" @cancel="cancelClick" class="modal">
		</u-modal>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	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 {
				keyword: '',
				// isShowStopBtn: false,
				// isConfirmLoadingBtn:false,
				// isShowCustomerServiceBtn:false,
				// isConfirmUnLoadingBtn:false,
				// isClosedBtn:false,
				searchKeyWord: '',
				mescroll: null,
				id: '',
				confirmText: '确定',
				searchType: '',
				alertTitle: '',
				alertContent: "",
				isShowAlert: false,
				goods: [], // 数据列表
				delOrShowHidden: '',
				rowObj: {},
				list1: [{
					name: '全部',
					status: '',
					num: 0,
				}, {
					name: '审核中',
					status: '1',
					num: 0,
				}, {
					name: '已通过',
					status: '3',
					num: 0,
				}, {
					name: '未通过',
					status: '2',
					num: 0,
				}, {
					name: '已过期',
					status: '4',
					num: 0,
				}],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 0, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: ''
					}
				},
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		onTabItemTap(e) {
			// tab 点击时执行，此处直接接收单击事件
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		created() {
			//#ifdef APP-PLUS
			// this.getLngLat();
			//#endif
		},
		onLoad() {

			// let _isHave = this.$utils.getRoles('aaa')
			// console.log(_isHave)

		},
		onShow() {
			this.upCallback({
				size: 10,
				num: 1
			})
		},
		// 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: {
			statuschange(item) {
				this.searchType = item.status
				this.upCallback({
					size: 10,
					num: 1
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			search() {

				this.mescroll.resetUpScroll()
			},
			back() {
				uni.navigateBack()
			},
			carType(good) {
				let _val = '';
				if (good.carModel == 1) {
					_val = ''
				} else {
					if (good.carModel && good.carModel.includes(2)) {
						_val += '高栏'
					}
					if (good.carModel && good.carModel.includes(3)) {
						_val += '/集装箱'
					}
					if (good.carModel && good.carModel.includes(4)) {
						_val += '/自卸车'
					}
				}
				return _val
			},
			confirmDel() {
				let that = this
				that.isShowAlert = false
				this.$request.baseRequest('post', '/publishTaskInfo/deleteTask', {
						id: this.rowObj.id,
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除成功!",
								complete() {

									that.mescroll.resetUpScroll()
								}
							})
						} else {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除失败!",
								complete() {
									that.isShowAlert = false
								}
							})
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			del(val) {
				this.alertTitle = '确定删除任务？'
				this.isShowAlert = true
				this.rowObj = val
				this.delOrShowHidden = 2

			},
			edit(item) {
				uni.$u.route('/pages/release/editRelease', item);
			},
			Refresh(val) {
				let that = this
				this.$request.baseRequest('post', '/publishTaskInfo/api/refresh', {
						id: val.id,
						commonId: this.userInfo.id
					}).then(res => {

						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "刷新成功"
							})

						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: "刷新失败",
							})
						}
						this.isShowAlert = false
						this.mescroll.resetUpScroll()
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			back() {
				uni.navigateBack(-1)
			},

			radioChange(n) {
				console.log('radioChange', n);

			},
			confirmHideShow() {
				let that = this
				this.$request.baseRequest('post', '/publishTaskInfo/api/showHidden', {
						id: this.rowObj.id,
					}).then(res => {

						console.log(this.rowObj)
						if (res.code == 200) {
							if (this.rowObj.showHide == 2) {
								this.$refs.uToast.show({
									type: 'success',
									message: "显示成功"
								})
							}
							this.isShowAlert = false
							this.mescroll.resetUpScroll()
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: "显示失败",
							})
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			hideShow(val) {
				//隐藏 显示
				// =1为点击隐藏
				this.rowObj = val
				if (val.showHide == '1') {
					this.alertTitle = '确定隐藏任务？'
					this.isShowAlert = true

					this.delOrShowHidden = 1
				} else {
					this.confirmHideShow()
				}
			},
			confirmClick() {
				if (this.delOrShowHidden == 1) {
					this.confirmHideShow();
				} else if (this.delOrShowHidden == 2) {
					this.confirmDel()
				}
			},
			cancelClick() {
				this.isShowAlert = false
			},
			toDetail(id) {
				uni.$u.route('/pages/release/lookRelease', {
					id: id,
				});
			},
			upCallback(page) {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				this.$request.baseRequest('get', '/publishTaskInfo/selectNum', {
						commonId: this.userInfo.id,
					}).then(res => {
						this.list1[0].num = res.data.allNum
						this.list1[1].num = res.data.examieNum
						this.list1[2].num = res.data.passNum
						this.list1[3].num = res.data.noNum
						this.list1[4].num = res.data.overdueNum
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
				this.$request.baseRequest('get', '/publishTaskInfo/selectTask', {
						commonId: this.userInfo.id,
						searchKeyWord: this.searchKeyWord,
						searchType: this.searchType,
						pageSize: page.size,
						currentPage: page.num
					}).then(res => {
						this.mescroll.endBySize(res.data.records.length, res.data.total);
						if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
						this.goods = this.goods.concat(res.data.records); //追加新数据
						uni.hideLoading()
					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
					});
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding-top: var(--status-bar-height);
		// background: white;

		.top {
			display: flex;
			background: white;
			padding: 20rpx;

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

	// .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;
	// }
	.hz-good {
		width: 44rpx;
		height: 44rpx;
		margin: 0 30rpx;
	}

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

		.row1 {
			font-size: 26rpx;

			.item1 {

				color: #333333;
			}
		}

		.row2 {
			margin: 30rpx 0;

			.left {
				width: calc(50% - 25rpx);
				align-items: center;
				flex-direction: column;
				justify-content: center;
			}

			.right {
				width: calc(50% - 25rpx);
				align-items: center;
				justify-content: flex-end;
				flex-direction: column;
			}
		}

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

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

			.cc {
				margin-left: 10rpx;
			}

			.yj {
				margin-left: 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;
				margin-left: 20rpx;
			}
		}
	}

	.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;
	}

	/deep/.u-modal__content {
		flex-direction: column;
	}

	.tab-nav {
		width: 100%;
		background: white;
		display: flex;
	}

	.tab-item {
		width: 25%;
		display: block;
		position: relative;
		text-align: center;
		padding: 10px 0;
		box-sizing: border-box;
		color: #7D8087;
		font-size: 14px;
	}

	.tab-item.active {
		color: #000;
		font-size: 16px;
	}

	.tab-item.active:after {
		position: absolute;
		content: '';
		display: block;
		width: 50%;
		left: 50%;
		transform: translate(-50%);
		height: 4px;
		bottom: 0;
		background: #2772FB;
		border-radius: 2px;
	}
</style>