wangluohuoyun-app/pages/mine/often/oftenRoute.vue

<template>
	<view class="center">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="route">
			<view v-for="(item,index) in routeData" class="route_css">
				<view class="route_site flex">
					<span class="blueDot dot"></span>
					<view class="site_text">
						{{item.sendProvince}}{{item.sendCity }}
						{{item.sendArea}}
					</view>
					<!-- {{item.sendCity ? item.sendCity: item.sendProvince}} {{item.sendArea}} -->
					<image class="jt_css" src="@/static/images/goodSource/jt.png" mode='widthFix'></image>
					<span class="redDot dot"></span>
					<view class="site_text">
						{{item.unloadProvince}}{{item.unloadCity }}
						{{item.unloadArea}}
					</view>
				</view>
				<view class="flex btns">
					<view class="btn_css" @click="addRoute(item)">修改</view>
					<view class="btn_css" @click="del(item.id)">删除</view>
					<view class="btn_css" @click="showChane(item)">{{item.displayFlag == 1?"显示中":"已隐藏"}}</view>
				</view>
			</view>
			<!-- <u-loadmore :status="status" :nomore-text="nomoreText" /> -->
		</view>
		</mescroll-body>
		<u-toast ref="uToast"></u-toast>
		<view class="bottom_add">
			<view class="add_btn" @click="addRoute(1)">添加常用路线</view>
			<span class="tips">最多可创建50条</span>
		</view>
		<u-modal :show="tipsShow" :title="tipsText" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#2772FB' @confirm="delSubmit" @close="cancelClick" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				routeData: [],
				status: 'loadmore',
				nomoreText: '实在没有了~',
				tipsShow: false,
				tipsText: "",
				delId: "",
				mescroll:{}
			}
		},
		onShow() {},
		onLoad() {},
		onNavigationBarButtonTap(e) {
			this.addRoute(1)
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback() {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
				// 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )     
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log(page)
				// 此处可以继续请求其他接口
				// if (page.num == 1) {
				// 	this.routeData = []
				// 	// 请求其他接口...
				// }
				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.isInitxx){
				// 	apiGetxx().then(res=>{
				// 		this.isInitxx = true
				// 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// 	}).catch(()=>{
				// 		this.mescroll.endErr()
				// 	})
				// 	return // 此处return,先获取xx
				// }
			
				//联网加载数据
				this.status = 'loading';
				let commonNo =  uni.getStorageSync("firstAuthentication").commonId
				if(!commonNo){
					this.mescroll.endBySize(0, 0);
					return
				}
				this.$request.baseRequest('get', '/commonRoute/select', {
						commonId: commonNo,
						pageSize: page.size,
						currentPage: page.num
					}).then(res => {
						if (res.code == 200) {
							if (page.num == 1) {
								this.routeData = []
							}
							if(res.data.records>0){
								for (let i = 0; i < res.data.records.length; i++) {
									if(res.data.records[i].sendProvince=='北京'
									||res.data.records[i].sendProvince=='天津'
									||res.data.records[i].sendProvince=='上海'
									||res.data.records[i].sendProvince=='重庆'
									||res.data.records[i].sendProvince=='台湾'
									||res.data.records[i].sendProvince=='澳门'
									||res.data.records[i].sendProvince=='香港'
									||res.data.records[i].sendProvince=='钓鱼岛'){
										res.data.records[i].sendProvince=''
									}
									if(res.data.records[i].sendCity=='钓鱼岛'){
										res.data.records[i].sendArea=''
									}
									if(res.data.records[i].unloadProvince=='北京'
									||res.data.records[i].unloadProvince=='天津'
									||res.data.records[i].unloadProvince=='上海'
									||res.data.records[i].unloadProvince=='重庆'
									||res.data.records[i].unloadProvince=='台湾'
									||res.data.records[i].unloadProvince=='澳门'
									||res.data.records[i].unloadProvince=='香港'
									||res.data.records[i].unloadProvince=='钓鱼岛'){
										res.data.records[i].unloadProvince=''
									}
									if(res.data.records[i].unloadCity=='钓鱼岛'){
										res.data.records[i].unloadArea=''
									}
								}
							}
							console.log(res.data.records)
							this.routeData = this.routeData.concat(res.data.records); //追加新数据
							this.$forceUpdate()
							this.mescroll.endBySize(res.data.records.length, res.data.total);
							console.log(this.routeData)
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			delSubmit() {
				this.$request.baseRequest('post', '/commonRoute/api/delete', {
						id: this.delId
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除成功！",
							})
							this.tipsShow = false
							this.getList()
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			del(ids) {
				this.tipsText = "确定删除改常用路线？"
				this.tipsShow = true
				this.delId = ids
			},
			cancelClick() {
				this.tipsShow = false
			},
			getList() {
				this.status = 'loading';
				this.$request.baseRequest('get', '/commonRoute/select', {
						commonId: uni.getStorageSync("firstAuthentication").commonId,
						pageSize: 10,
						currentPage: 1
					}).then(res => {
						if (res.code == 200) {
							this.routeData = res.data.records
							if (res.data.total == 0) {
								this.status = 'nomore'
							} else {
								this.status = 'loadmore'
							}
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			showChane(item) {
				if (item.displayFlag == 1) {
					item.displayFlag = 2
				} else {
					item.displayFlag = 1
				}
				this.$request.baseRequest('post', '/commonRoute/api/edit', item).then(res => {
						if (res.code == 200) {
							if (item.displayFlag == 1) {
								this.$refs.uToast.show({
									type: 'success',
									message: "路线展示中！",
								})
							} else {
								this.$refs.uToast.show({
									type: 'success',
									message: "路线已隐藏！",
								})
							}
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			addRoute(item) {
				if (item == 1 && this.routeData.length == 50) {
					this.$refs.uToast.show({
						type: 'success',
						message: "最多可创建50条常用路线！",
					})
				} else {
					uni.$u.route("pages/mine/often/addRoute", {
						id: item.id
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 30rpx 30rpx 200rpx;
		background: #F2F4F7;
		position: flex;
		position: relative;
	}

	.route {
		// margin-bottom: 40rpx;
		.route_css {
			background: #FFFFFF;
			margin-bottom: 40rpx;
			padding: 30rpx 50rpx;
			border-radius: 20rpx;

			.route_site {
				border-bottom: 1px solid #E6E6E6;
				height: 120rpx;

				.site_text {
					max-width: 200rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
				}
			}

			.jt_css {
				width: 60rpx;
				height: 20rpx;
				margin: 0 23rpx;
			}

			.dot {
				display: inline-block;
				width: 12rpx;
				height: 12rpx;
				border-radius: 6rpx;
				margin: 20rpx 20rpx 0 0;
			}

			.blueDot {
				background: #2772FB;
			}

			.redDot {
				background: #FE6300;
			}

			.btns {
				width: 100%;
				justify-content: flex-end;
				margin-top: 40rpx;

			}

			.btn_css {
				margin-left: 30rpx;
				width: 120rpx;
				height: 66rpx;
				border-radius: 33px;
				border: 1px solid #CDCDCD;
				line-height: 66rpx;
				text-align: center;
			}
		}
	}

	.bottom_add {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 160rpx;
		padding-top: 30rpx;
		background: #FFFFFF;
		text-align: center;

		.add_btn {
			width: 90%;
			height: 92rpx;
			line-height: 92rpx;
			background: #2772FB;
			text-align: center;
			border-radius: 46rpx;
			color: #FFFFFF;
			margin-top: 30rpx;
			// height: 60rpx;
			margin: 0 auto;
		}

		.tips {
			text-align: center;
			color: #ABABAB;
			font-size: 24rpx;
		}

	}
</style>