OpenDoorManageMini/pages/point/point.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" title="点位管理"></u-navbar>
		<view class="total">
			<view class="total-item">
				<view class="num">
					{{total.regionNum||'0'}}
				</view>
				<view class="name">
					区域总数
				</view>
			</view>
			<view class="total-item">
				<view class="num">
					{{total.lineNum||'0'}}
				</view>
				<view class="name">
					线路总数
				</view>
			</view>
			<view class="total-item">
				<view class="num">
					{{total.placeNum||'0'}}
				</view>
				<view class="name">
					点位总数
				</view>
			</view>
		</view>
		<!-- 		<view class="search">
			<u-search animation placeholder="请输入区域/线路搜索" :showAction="false">
			</u-search>
		</view> -->
		<view class="content">
			<view class="xy-card" v-for="(item,index) in list" :key="item.mercRegionId">
				<view class="flex justify-between">
					<view class="eq-line-title">
						{{item.mergename}}
					</view>
					<xbutton size="mini" @click="addLine(item.name)">新增线路</xbutton>
				</view>
				<view v-if="item.lineList&&item.lineList.length>0">
					<block v-for="(item1,index1) in item.lineList" :key="item1.id">
						<view class="eq-wrap eq-item"
							@click="$tab.navigateTo(`/pages/point/lineDetail?id=${item1.id}&lineName=${item1.lineName}`)">
							<view class="eq-name flex justify-between">
								<view class="eq-title" v-if="item1.lineName">{{item1.lineName}}<text
										style="color: #666;">({{item1.id}})</text></view>
								<view class="eq-title" v-else>{{item1.lineName}}</view>
							</view>
							<view class="eqeq-type">
								<view>
									线路管理员：
								</view>
								<view>
									{{item1.userInfoName||'/'}}
								</view>
							</view>

							<view class="arrow-right">
								<u-icon name="arrow-right" size="14"></u-icon>
							</view>
						</view>
					</block>
				</view>
				<view class="none" v-else>
					<u-empty text="当前区域没有线路" mode="search"></u-empty>
				</view>
				<!-- <view class="more" @click="$tab.navigateTo('/pages/equipment/search')">
					查看全部
				</view> -->
			</view>

			<view class="empty" v-if="list.length==0">
				<u-empty></u-empty>
			</view>
		</view>

		<view class="btn safe-bottom">
			<xbutton size="large" @click="lotusAddressData.visible=true">新增区域</xbutton>
		</view>

		<!-- 级联地址 -->
		<lotus-address v-on:choseVal="addressConfirm" @close="addressClose" :lotusAddressData="lotusAddressData">
		</lotus-address>

		<!-- 弹框 -->
		<xpopup :show="popShow" @close="close" @confirm="submit" showBtn title="新增线路">
			<!-- 线路新增 -->
			<view class="popup-content">
				<view>线路名称：</view>
				<view>
					<u--input placeholder="请输入内容" border="surround" v-model="lineName"></u--input>
				</view>
			</view>
		</xpopup>
	</view>
</template>

<script>
	import {
		allLineWithRegion,
		areaSave
	} from "@/api/point/area.js"
	import {
		lineSave,
	} from "@/api/point/line"
	import lotusAddress from "./components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	export default {
		components: {
			lotusAddress
		},
		data() {
			return {
				list: [],
				total: {
					lineNum: 0,
					placeNum: 0,
					regionNum: 0,
				},

				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},

				popShow: false,
				lineName: '',
				regionName: ''
			}
		},

		created() {
			// this.getTotalData()
			this.getList()
		},

		methods: {
			onshow() {
				this.getList()
			},

			search() {

			},

			getList() {
				allLineWithRegion({}).then(res => {
					this.list = res.data.data;
					this.total = {
						lineNum: res.data.lineNum,
						placeNum: res.data.placeNum,
						regionNum: res.data.regionNum,
					}
				})
			},

			//级联地址选择确认
			addressConfirm(res) {
				if (res.id === null) {
					this.$modal.msg('请选择区域!');
					return
				}
				this.addArea(res.id)
				this.addressClose() //关闭弹框
			},

			// 级联地址取消
			addressClose() {
				this.lotusAddressData.visible = false;
			},

			//新增区域
			addArea(id) {
				areaSave({
					ids: [id]
				}).then(res => {
					this.$modal.msg('新增成功~')
					this.getList()
				})
			},

			addLine(e) {
				this.regionName = e
				this.popShow = true
			},

			//弹框关闭
			close() {
				this.popShow = false
			},

			//弹框提交
			submit() {
				lineSave({
					regionName: this.regionName,
					lineName: this.lineName
				}).then(res => {
					this.$modal.msg('新增成功~')
					this.lineName = '';
					this.getList();
				})
				this.close()
			},
		}
	}
</script>

<style lang="scss">
	.container {
		.nav-style {
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
		}

		.search {
			padding: 24rpx 24rpx;
			background-color: #fff;
		}

		.total {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			color: #fff;
			background-color: #2C6FF3;
			padding: 40rpx 24rpx;

			.total-item {
				.num {
					font-weight: bold;
					font-size: 52rpx;
				}

				.name {
					font-size: 26rpx;
				}
			}
		}

		.content {
			padding: 24rpx;
			padding-bottom: calc(106rpx + env(safe-area-inset-bottom) / 2);

			.xy-card {
				margin-bottom: 24rpx;
			}

			.eq-line-title {
				font-size: 32rpx;
				padding-bottom: 24rpx;
				position: relative;
			}

			.eq-item {
				&+.eq-item {
					margin-top: 12rpx;
				}
			}

			.eq-wrap {
				border-radius: 8rpx;
				background-color: rgb(245, 248, 251);
				box-sizing: border-box;
				padding: 24rpx 12rpx;
				font-size: 26rpx;
				position: relative;

				.arrow-right {
					position: absolute;
					right: 12rpx;
					top: 24rpx;
				}


				.eq-name {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 24rpx;
					position: relative;

					>.eq-title {
						width: 420rpx;

						>text {
							font-size: 30rpx;
							color: #666;
							font-weight: normal;
						}
					}

					.eq-status-box {
						float: right;
						position: absolute;
						right: 0;
						top: 0;
					}

					.eq-status {
						font-size: 28rpx;
						color: #666;
						font-weight: normal;
						margin-left: 12rpx;

						>text {
							display: inline-block;
							background-color: #666;
							width: 16rpx;
							height: 16rpx;
							border-radius: 16rpx;
							margin-right: 12rpx;

						}

						&.online {
							color: #f56c6c;

							>text {
								background-color: green;
							}
						}
					}
				}
			}

			.eqeq-type {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;

				>view:nth-child(1) {
					color: #000;
					width: 200rpx;
				}

				>view:nth-child(2) {
					color: #666;
					padding-left: 6rpx;
				}
			}

			.eqeq-type+.eqeq-type {
				margin-top: 16rpx;
			}

			.status {
				width: 130rpx;
				height: 120rpx;
				box-sizing: border-box;
				border-radius: 120rpx;
				// border: 6rpx solid #2C6FF3;
				text-align: center;
				display: flex;
				flex-flow: column;
				justify-content: space-around;
				align-items: center;
				position: absolute;
				right: 12rpx;
				bottom: 24rpx;

				.s-name {
					font-size: 28rpx;
					padding-top: 20rpx;
					font-weight: bold;
				}

				.s-num {
					font-size: 32rpx;
					padding-bottom: 20rpx;
				}
			}
		}

		.empty {
			margin: 40% auto 0;
		}

		.btn {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 24rpx;
			padding: 0 24rpx;
		}

		.popup-content {
			padding: 36rpx 24rpx;
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: center;
			>view:nth-child(1){
				width:150rpx;
			}
			>view:nth-child(2){
				width: 600rpx;
			}
		}
	}
</style>