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

<template>
	<view class="center">
		<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.sendCity: item.sendProvince}}
						{{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.unloadCity: item.unloadProvince}}
						{{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>
			</view>
			<u-loadmore :status="status"  :nomore-text="nomoreText" />
		</view>


		<u-toast ref="uToast"></u-toast>
		<view class="bottom_add">
			<view class="add_btn" @click="addRoute(1)">添加常用路线</view>
			<span class="tips">最多可创建50条</span>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				routeData: [],
				status: 'loadmore',
				 nomoreText: '实在没有了'
			}
		},
		onShow() {},
		onLoad() {
			this.getList()
		},
		onNavigationBarButtonTap(e) {
			this.addRoute(1)
		},
		methods: {
			del(ids) {
				this.$request.baseRequest('post', '/commonRoute/api/delete', {
						id: ids
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除成功！",
							})
							this.getList()
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			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);
					});
			},
			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 {

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

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

				.site_text {
					// width: 180rpx;
					max-width: 200rpx;
					overflow: hidden;
					// height: 60rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
					// font-weight: 500;
					// margin: 0 20rpx;
				}
			}

			.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: 70rpx;
			line-height: 70rpx;
			background: #2772FB;
			text-align: center;
			border-radius: 35rpx;
			color: #FFFFFF;
			margin-top: 30rpx;
			// height: 60rpx;
			margin: 0 auto;
		}
		.tips{
			text-align: center;
			color: #ABABAB;
			font-size: 24rpx;
		}
		
	}
</style>