chenrui 4 years ago
parent
commit
e393218a19

+ 12 - 7
pages.json

@@ -4,9 +4,15 @@
 	},
 	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
 		{
-			"path": "pages/cleared/chooseNetwork",
+			"path": "pages/login/login",
 			"style": {
-				"navigationBarTitleText": "待清运网点"
+				"navigationBarTitleText": "登录"
+			}
+		},
+		{
+			"path": "pages/login/pwLogin",
+			"style": {
+				"navigationBarTitleText": "密码登录"
 			}
 		},
 		{
@@ -24,18 +30,17 @@
 			}
 		},
 		{
-			"path": "pages/login/login",
+			"path": "pages/cleared/chooseNetwork",
 			"style": {
-				"navigationBarTitleText": "登录"
+				"navigationBarTitleText": "待清运网点"
 			}
 		},
 		{
-			"path": "pages/login/pwLogin",
+			"path": "pages/cleared/network",
 			"style": {
-				"navigationBarTitleText": "密码登录"
+				"navigationBarTitleText": "网点详情"
 			}
 		},
-		
 		{
 			"path": "pages/cleared/index", // 已清运
 			"style": {

+ 81 - 28
pages/cleared/chooseNetwork.vue

@@ -1,24 +1,32 @@
 <template>
 	<view class="choose-network-container">
+		<!-- 筛选弹框 -->
+		<search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal>
 		<view class="choose-network-header">
 			<view class="checked-all">
-				<u-checkbox 
+				<u-checkbox
+					class="checked-all-c"
 					@change="checkedAll" 
-					v-model="isCheckedAll" 
+					v-model="isCheckedAll"
+					label-size="26"
 					name="checkedAll"
 				>全选</u-checkbox>
 			</view>
-			<view class="">已选:<text>10</text></view>
+			<view class="choose-checked" @tap="openScreen=true">
+				已选:<text>{{checkedNum}}</text>
+				<image class="filter-icon" src="@/static/filter.png"></image>
+			</view>
 		</view>
 		<scroll-view class="scroll-con" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom">
 			<!-- 列表数据 -->
-			<u-checkbox-group class="cell-item-con" @change="checkboxGroupChange">
-				<u-checkbox
-					class="cell-item"
-					@change="checkboxChange" 
-					v-model="item.checked" 
-					v-for="(item, index) in listdata" :key="index" 
-					:name="item.name">
+			<u-checkbox-group class="cell-item-con">
+				<view class="cell-item" v-for="(item, index) in listdata" :key="index">
+					<u-checkbox
+						class="cell-item-checkbox"
+						@change="checkboxChange($event, index)"
+						v-model="item.checked"
+						:name="item.id">
+					</u-checkbox>
 					<view class="cell-item-c" @tap="goPage(item)">
 						<view class="cell-item-info">
 							<view class="cell-item-info-network">
@@ -38,7 +46,7 @@
 						</view>
 						<u-icon name="arrow-right" class="arrow-right" :size="28" color="#999"></u-icon>
 					</view>
-				</u-checkbox>
+				</view>
 			</u-checkbox-group>
 			<u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
 			<view class="loadmore">
@@ -54,8 +62,10 @@
 </template>
 
 <script>
+	import searchModal from '@/pages/cleared/searchModal.vue'
 	import { getGoldLogList, GoldLogCancel, GoldLogTotal } from '@/api/officialPartnerGoldLog.js'
 	export default{
+		components: { searchModal },
 		data(){
 			return{
 				listdata: [],
@@ -65,6 +75,14 @@
 				noDataText: '暂无数据',  //  列表请求状态提示语
 				status: 'loadmore',  //  加载中状态
 				scrollTop: 0,  //  滚动条位置
+				isCheckedAll: false,  //  全选状态
+				checkedNum: 0,  //  已选个数
+				openScreen: false, //  是否打开筛选
+				searchForm: {
+					//  查询条件
+					bundleName: '',  //  网点名称
+					custMobile: '', // 排序方式
+				},
 			}
 		},
 		onShow() {
@@ -72,18 +90,27 @@
 		},
 		methods: {
 			// 选中某个复选框时,由checkbox时触发
-			checkboxChange(e) {
-				console.log(e)
-			},
-			// 选中任一checkbox时,由checkbox-group触发
-			checkboxGroupChange(e) {
-				console.log(e)
+			checkboxChange(e,ind) {
+				this.listdata[ind].checked = e.value
+				let len = 0
+				this.listdata.map(item => {
+					if(item.checked){
+						len++
+					}
+				})
+				this.checkedNum = len
 			},
 			// 全选
-			checkedAll() {
+			checkedAll(e) {
+				this.isCheckedAll = e
+				let len = 0
 				this.listdata.map(val => {
-					val.checked = true
+					val.checked = e.value ? true : false
+					if(val.checked){
+						len++
+					}
 				})
+				this.checkedNum = len
 			},
 			// 获取查询参数 刷新列表
 			refresh(params){
@@ -100,6 +127,9 @@
 					pageSize: this.pageSize
 				}).then(res => {
 					if (res.status == 200) {
+						res.data.list.map(item => {
+							item.checked = false
+						})
 						if(this.pageNo>1){
 							this.listdata = this.listdata.concat(res.data.list || [])
 						}else{
@@ -113,16 +143,13 @@
 						this.listdata = []
 						this.total = 0
 					}
-					this.listdata.map(item => {
-						item.checked = false
-					})
 					this.status = "loadmore"
 				})
 			},
 			//  查看详情
 			goPage(row){
 				uni.navigateTo({
-				    url: '/pages/cleared/details'
+				    url: '/pages/cleared/network'
 				})
 			},
 			// scroll-view到底部加载更多
@@ -148,14 +175,39 @@
 		height: 100%;
 		display: flex;
 		flex-direction: column;
-		padding-top: 100rpx;
+		padding-top: 80rpx;
 		padding-bottom: 102rpx;
 		position: relative;
+		// 顶部固定
 		.choose-network-header{
 			position: fixed;
 			top: 0;
 			left: 0;
 			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 $uni-spacing-row-base;
+			box-sizing: border-box;
+			background-color: #fff;
+			line-height: 80rpx;
+			font-size: 26rpx;
+			.checked-all{
+				.checked-all-c{
+					font-size: 26rpx;
+				}
+			}
+			.choose-checked{
+				text{
+					color: red;
+				}
+				.filter-icon{
+					width: 36rpx;
+					height: 36rpx;
+					padding-left: 30rpx;
+					vertical-align: text-top;
+				}
+			}
 		}
 		//  列表
 		.scroll-con{
@@ -174,14 +226,15 @@
 				display: flex;
 				align-items: center;
 				padding: $uni-spacing-col-base $uni-spacing-row-base;
-				position: relative;
+				// 多选框
+				.cell-item-checkbox{
+					flex-shrink: 0;
+				}
 				.cell-item-c{
-					// flex-grow: 1;
+					flex-grow: 1;
 					display: flex;
 					justify-content: space-around;
 					align-items: center;
-					display: block;
-					width: 100%;
 					.cell-item-info{
 						flex-grow: 1;
 						.cell-item-info-network{

+ 236 - 0
pages/cleared/network.vue

@@ -0,0 +1,236 @@
+<template>
+	<view class="content">
+		<map 
+		id="map" 
+		:latitude="lat" 
+		:longitude="lng" 
+		scale="18" 
+		show-compass 
+		show-location 
+		:markers="markers"
+		style="width: 100%; height:500rpx;">
+		</map>
+		<!-- 网点信息及设备 -->
+		<view class="details" v-if="stationData">
+			<view class="details-address">
+				<image src="/static/md-big-pic.png" class="store-pic"></image>
+				<view class="store-info">
+					<view>{{ stationData.name }}</view>
+					<view>{{ stationData.provinceName||'' }}{{ stationData.cityName||'' }}{{ stationData.districtName||'' }}{{ stationData.address||'' }}</view>
+					<view>
+						营业时间:
+						<text v-for="(tItem, tInd) in stationData.deliveryTimeRuleItemList" :key="tInd">
+							{{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == stationData.deliveryTimeRuleItemList.length - 1 ? '' : ',' }}
+						</text>
+					</view>
+				</view>
+			</view>
+			<!-- 设备列表 -->
+			<view class="details-dev">
+				<view class="details-dev-box" v-for="item in deviceData">
+					<view class="details-dev-title">设备编号:<text>{{ item.srcDeviceCode }}</text></view>
+					<view class="details-dev-cons">
+						<view class="dev-item" v-for="boxItem in item.deviceTypeBoxList">
+							<view class="item-pic-con">
+								<text v-if="boxItem.flag==1" class="full-sign">已满</text>
+								<u-image mode="aspectFit" height="80" width="80" :src="`/static/${boxItem.rubbishType}.png`" class="type-sign"></u-image>
+							</view>
+							<view class="dev-main">
+								<view>
+									{{ boxItem.rubbishTypeDictValue }}
+								</view>
+								<view class="rule-con">
+									{{ getRule(boxItem.rubbishType).rubbishWeight }}g/
+									<text class="goleNum">{{ getRule(boxItem.rubbishType).goleNum }}</text>
+									<image src="/static/ledou.png" class="ld-pic"></image>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<u-empty v-if="deviceData.length==0" icon-size="60" text="暂无设备" mode="list" margin-top="120"></u-empty>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// import { stationDetail, stationDevice } from '@/api/station.js'
+	export default {
+		data() {
+			return {
+				stationId: '',  //  网点id
+				stationNo: '',  //  网点编号
+				lat: '',
+				lng: '',
+				mapCtx: null, // 地图对象
+				markers: [], // 标注点
+				stationData: null,  //  网点信息
+				deviceData: [],  //  设备信息
+			};
+		},
+		onLoad(options) {
+			this.stationId = options.id
+			this.stationNo = options.stationNo
+			this.getStation()  //  网点信息
+			this.getDevice()  //  设备信息
+			// 开启分享
+			uni.showShareMenu({
+				withShareTicket: true,
+				menus: ['shareAppMessage', 'shareTimeline']
+			})
+		},
+		methods: {
+			//  网点信息
+			getStation(){
+				// stationDetail({ id: this.stationId }).then(res => {
+				// 	if(res.status == 200){
+				// 		this.stationData = res.data
+				// 		this.markers = []
+				// 		this.markers.push({
+				// 			latitude: res.data.lat,
+				// 			longitude: res.data.lng,
+				// 			width: 30,
+				// 			height: 30,
+				// 			iconPath: "/static/store.png"
+				// 		})
+				// 		this.lng = res.data.lng
+				// 		this.lat = res.data.lat
+				// 	}else{
+				// 		this.stationData = null
+				// 		this.markers = []
+				// 		this.lng = ''
+				// 		this.lat = ''
+				// 	}
+				// })
+			},
+			//  设备信息
+			getDevice(){
+				// stationDevice({ stationNo: this.stationNo }).then(res => {
+				// 	if(res.status == 200){
+				// 		this.deviceData = res.data
+				// 	}else{
+				// 		this.deviceData = []
+				// 	}
+				// })
+			},
+			//  根据垃圾类型获取兑换规则
+			getRule(type){
+				let row = null
+				if(this.stationData.goldExRuleItemList){
+					row = this.stationData.goldExRuleItemList.find(item => item.rubbishType == type)
+				}
+				return { rubbishWeight: row.rubbishWeight || 0, goleNum: row.goleNum || 0 }
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+.content{
+	width: 100%;
+	padding: 0;
+	.details{
+		margin: 20upx;
+		.details-address{
+			display: flex;
+			align-items: center;
+			padding: 20upx;
+			background: #FFFFFF;
+			border-radius: 15upx;
+			box-shadow: 0upx 3upx 6upx #eee;
+			margin-bottom: 20upx;
+			.store-pic{
+				width: 120rpx;
+				height:120rpx;
+				margin-right: 20rpx;
+			}
+			.store-info{
+				>view{
+					font-size: 24upx;
+					padding: 5upx 0;
+					color: #666;
+					&:first-child{
+						font-weight: bold;
+						font-size: 30upx;
+						color: #333;
+					}
+				}
+			}
+		}
+		.details-dev{
+			.details-dev-box{
+				padding: 20upx 20upx 5upx;
+				background: #FFFFFF;
+				border-radius: 15upx;
+				box-shadow: 0upx 3upx 6upx #eee;
+				margin-bottom: 20upx;
+				.details-dev-title{
+					border-bottom: 1px solid #F8F8F8;
+					padding: 10upx 0 20upx;
+					text{
+						color: #666;
+					}
+				}
+				.details-dev-cons{
+					padding: 10upx 0;
+					display: flex;
+					flex-wrap: wrap;
+					.dev-item{
+						width: 50%;
+						display: flex;
+						align-items: center;
+						> view{
+							padding: 25upx 10upx 15upx 0;
+							&:last-child{
+								view{
+									display: flex;
+									align-items: center;
+									.u-tag{
+										margin-left: 10upx;
+									}
+								}
+							}
+						}
+						.item-pic-con{
+							position: relative;
+							padding-left: 30rpx;
+							.full-sign{
+								font-size: 24rpx;
+								padding: 4rpx 10rpx 14rpx;
+								color: #fff;
+								background: url('/static/full-bg.png') no-repeat;
+								background-size: 100% 100%;
+								transform: scale(0.8);
+								position: absolute;
+								left: 0;
+								top: 0;
+								width: 68rpx;
+								height: 55rpx;
+								z-index: 9;
+							}
+						}
+						.dev-main{
+							.rule-con{
+								color: #666;
+								font-size: 24upx;
+								.goleNum{
+									color: #eb0000;
+									font-size: 26rpx;
+									font-weight: bold;
+									margin-left: 4rpx;
+								}
+								.ld-pic{
+									width: 30rpx;
+									height: 30rpx;
+									margin-left: 6rpx;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>

+ 174 - 0
pages/cleared/searchModal.vue

@@ -0,0 +1,174 @@
+<template>
+	<!-- 待办单查询 -->
+	<div class="modal-content">
+		<u-popup v-model="isShow" class="search-popup" mode="right" @close="handleClose" length="85%">
+			<view class="search-title">筛选</view>
+			<u-form class="form-content" :model="form" ref="uForm" label-width="150">
+				<u-form-item label="网点名称:" prop="bundleName" class="form-item"><u-input v-model="form.bundleName" :maxlength="30" placeholder="请输入网点名称" /></u-form-item>
+				<u-form-item label="排序方式:" prop="custMobile" class="form-item">
+					<view @tap="openSort=true" :style="{color: form.custMobile?null:'#c0c4cc'}">{{custMobileName}}</view>
+				</u-form-item>
+			</u-form>
+			<view class="uni-list-btns">
+				<u-button class="handle-btn search-btn" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
+				<u-button class="handle-btn" size="medium" hover-class="none" @click="resetForm">重置</u-button>
+			</view>
+		</u-popup>
+		<u-picker mode="selector" v-model="openSort" :default-selector="selectDefault" :range="list" range-key="label" @confirm="confirm"></u-picker>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		defaultParams: {  //  默认筛选条件
+			type: Object,
+			default: () => {
+				return {}
+			}
+		}
+	},
+	watch: {
+		visible(newValue, oldValue) {
+			if (newValue) {
+				this.isShow = newValue
+			}
+		},
+		isShow(newValue, oldValue) {
+			if (newValue) {
+			} else {
+				this.init()
+				this.$emit('close')
+			}
+		}
+	},
+	data() {
+		return {
+			customBtnStyle: {  //  自定义按钮样式
+				borderColor: '#e84131',
+				backgroundColor: '#e84131',
+				color: '#fff'
+			},
+			isShow: this.visible, // 显示隐藏
+			form: {
+				bundleName: '',  //  套餐名称
+				custMobile: '', // 客户手机
+			},
+			list: [
+				{ label: '风', value: '11' },
+				{ label: '花', value: '22' },
+				{ label: '雪', value: '33' },
+				{ label: '月', value: '44' },
+			],
+			openSort: false,  //  选择
+			custMobileName: '请选择',
+			selectDefault: [0],  //  下拉默认选中项
+		};
+	},
+	mounted() {
+		this.init()
+	},
+	methods: {
+		//  初始化数据
+		init(){
+			this.form.bundleName = this.defaultParams.bundleName ? this.defaultParams.bundleName : ''
+			this.form.custMobile = this.defaultParams.custMobile ? this.defaultParams.custMobile : ''
+		},
+		// 关闭弹窗
+		handleClose() {
+			this.isShow = false
+		},
+		// 查询
+		handleSearch() {
+			let params = {
+				bundleName: this.form.bundleName,
+				custMobile: this.form.custMobile,
+			};
+			this.$emit('refresh', params)
+			this.isShow = false
+		},
+		// 重置
+		resetForm() {
+			this.$refs.uForm.resetFields()
+			this.$emit('refresh', {})
+			this.isShow = false
+		},
+		//  确定
+		confirm(v){
+			this.selectDefault = v
+			this.form.custMobile = this.list[v[0]].value
+			this.custMobileName = this.list[v[0]].label
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.modal-content {
+	position: relative;
+}
+.search-popup {
+	.search-title {
+		text-align: center;
+		padding: 18rpx 22rpx;
+		color: #333;
+		border-bottom: 1px solid #eee;
+	}
+	.form-content {
+		display: block;
+		padding: 0 20rpx;
+		box-sizing: content-box;
+		.status-item {
+			width: 30%;
+			text-align: center;
+			line-height: 60rpx;
+			background-color: #F8F8F8;
+			color: #333;
+			border-radius: 6rpx;
+			font-size: 24rpx;
+			margin: 0 10rpx;
+		}
+		.active {
+			background-color: #ffaa00;
+			color: #fff;
+		}
+		.form-item-inp{
+			display: inline-block;
+			width: 88%;
+			vertical-align: top;
+		}
+	}
+	.uni-list {
+		margin: 20rpx;
+		.uni-list-cell {
+			display: flex;
+			align-items: center;
+			border-bottom: 1px dashed #eeeeee;
+			.uni-list-cell-db {
+				flex: 1;
+			}
+			.uni-input {
+				height: 2.5em;
+				line-height: 2.5em;
+			}
+		}
+	}
+	.uni-list-btns {
+		display: flex;
+		padding: 20rpx;
+		margin-top: 200rpx;
+		.handle-btn {
+			font-size: 28rpx;
+			margin: 0 30rpx;
+			width: 100%;
+			flex: 1;
+		}
+	}
+}
+.date-picker {
+}
+</style>

BIN
static/CLOTHES.png


BIN
static/GLASS.png


BIN
static/HARM.png


BIN
static/METAL.png


BIN
static/MET_PLA.png


BIN
static/PAPER.png


BIN
static/PLASTIC.png


BIN
static/RECYCLING.png


BIN
static/full-bg.png


BIN
static/md-big-pic.png