欠费代收

pages/index/Immediatecollection/Immediatecollection.vue

@@ -1,22 +1,494 @@
 <template>
-	<view>
+	<view class="billall">
+		<u-cell-group>
+			<u-cell :title="mytitle" value="修改" :isLink="true" @click="floorchange">
+				<u-icon slot="icon" size="40" name="map"></u-icon>
+			</u-cell>
+		</u-cell-group>
+		<view class="topbill">
+			<view class="topbilledit">
+				<view class="changetime1">
+					<picker mode="date" :value="myday" fields="month" @change="dateChange">
+						<view class="selestDate">{{myday}}</view>
+					</picker>
+				</view>
+				<view class="changetime2">
+					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
+				</view>
+			</view>
+			<view class="topbilledit" @click="typechange">
+				<view class="changetime1">
+					{{mytype}}
+				</view>
+				<view class="changetime2">
+					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
+				</view>
+			</view>
+			<view class="topbilledit" @click="typechanges">
+				<view class="changetime1">
+					{{mytypes}}
+				</view>
+				<view class="changetime2">
+					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
+				</view>
+			</view>
+		</view>
+		<!-- 列表 -->
+		<!-- <t-table>
+			<t-tr>
+				<t-th>序号</t-th>
+				<t-th>姓名</t-th>
+				<t-th>年龄</t-th>
+				<t-th>爱好</t-th>
+				<t-th>操作</t-th>
+			</t-tr>
+			<t-tr v-for="item in tableList" :key="item.id">
+				<t-td>{{ item.id + 1 }}</t-td>
+				<t-td>{{ item.name }}</t-td>
+				<t-td>{{ item.age }}</t-td>
+				<t-td>{{ item.hobby }}</t-td>
+				  <t-td align="left"> <u-button @click="edit(item)"  size="small" type="primary" :plain="true" text="编辑"></u-button></t-td>
+				
+			</t-tr>
+		</t-table> -->
+
+		<view class="u-listdata">
+
+
+			<u-list @scrolltolower="scrolltolower" :pagingEnabled='true'>
+				<u-list-item v-for="(item, index) in indexList" :key="index">
+
+					<view class="companylist" @click="seedetail(item)">
+						<view class="settled" v-if="item.status==1">
+							已结清
+						</view>
+						<view class="outstanding" v-if="item.status==0">
+							未结清
+						</view>
+						<h3>{{item.name}}</h3>
+						<view class="Currentamount">
+							本期金额: <span>￥{{item.feeTotal}}</span>
+						</view>
+						<view class="Currentamount">
+							欠费天数: {{item.elecAmount}}
+						</view>
+						<view class="Currentamount">
+							账户余额:￥{{item.balance}}
+						</view>
+						<view class="Currentamount">
+							联系电话: {{item.tel}}
+						</view>
+						<view class="Callfee" v-if="item.status==0" @click.stop="handleClick(item.id)">
+							催费
+						</view>
+					</view>
+
+				</u-list-item>
+			</u-list>
+
+		</view>
+
+
 		
+
+		<u-picker :show="showtype" :columns="columnstype" keyName="label" @confirm="confirmtype" @cancel='canceltype'>
+		</u-picker>
+		<u-picker :show="showtypes" :columns="columnstypes" keyName="labels" @confirm="confirmtypes" @cancel='canceltypes'>
+		</u-picker>
+		<u-picker :show="showfloor" ref="uPicker" :loading="loading" @confirm="confirmfloor" @cancel='cancelfloor'
+			:columns="columns" keyName="orgName" @change="changeHandler"></u-picker>
+		<u-notify ref="uNotify" :show="showdct" message="服务器请求失败"></u-notify>
 	</view>
 </template>
 
 <script>
+	// import tTable from '@/components/t-table/t-table.vue';
+	// import tTh from '@/components/t-table/t-th.vue';
+	// import tTr from '@/components/t-table/t-tr.vue';
+	// import tTd from '@/components/t-table/t-td.vue';
 	export default {
+		components: {
+			// tTable,
+			// tTh,
+			// tTr,
+			// tTd
+		},
 		data() {
+			const currentDate = this.getDate({
+				format: 'yyyy-mm'
+			})
 			return {
-				
+				setyesno: true,
+				// tableList: [{
+				// 		id: 0,
+				// 		name: '张三',
+				// 		age: '19',
+				// 		hobby: '游泳'
+				// 	},
+				// 	{
+				// 		id: 1,
+				// 		name: '李四',
+				// 		age: '21',
+				// 		hobby: '绘画'
+				// 	},				
+				// ],
+				indexList: [],
+				dataList: [],
+				dataForm: {
+					projectId: "",
+					buildingId: "",
+					storeyId: "",
+					cycle: "",
+					status: "",
+					page: 1,
+					limit: 10,
+				},
+				showtypes:false,
+				showtype: false,
+				showdct: false,
+				mytitle: '',
+				alldata: [],
+				showfloor: false,
+				loading: false,
+				columns: [],
+				pd: true,
+				columnData: [],
+				myday: '',
+				mytype: '全部',
+				mytypes:"全部",
+				showPicker: false,
+				myday: currentDate,
+				columnstype: [
+					[{
+							label: '全部',
+							id: ''
+						}, {
+							label: '水费',
+							id: 0
+						},
+						{
+							label: '电费',
+							id: 1
+						},
+						{
+							label: '物业费',
+							id: 2
+						}
+					]
+				],
+				columnstypes: [
+					[{
+							labels: '全部',
+							ids: ''
+						}, {
+							labels: '30天以内',
+							ids: 0
+						},
+						{
+							labels: '30天以上',
+							ids: 1
+						}
+					]
+				],
+
+
 			}
 		},
+		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
+		onLoad() {
+			this.getfloor();
+			//	this.loadmore();
+		},
+		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
+		onReady() {
+			// 微信小程序需要用此写法
+		},
+
+		//监听页面隐藏
+		onHide() {},
+		//监听窗口尺寸变化
+		onResize() {},
+		//监听页面卸载
+		onUnload() {},
+		//监听用户下拉动作，一般用于下拉刷新
+		onPullDownRefresh() {},
+
+
 		methods: {
-			
+			seedetail(e) {
+				//  console.log('222',e)
+				let faltesdata = {
+					name: e.name,
+					id: e.id,
+					cycle: e.cycle
+				}
+				// console.log('111111111111111111',faltesdata)
+				uni.navigateTo({
+					url: "/pages/Workorder/Tenantbill/companybill/companybill?para=" + encodeURIComponent(JSON
+						.stringify(faltesdata))
+				})
+			},
+			handleClick(e) {
+				console.log('111111111111111111', e)
+				this.$api.post('/expeditrecord/charge', {
+						data: e
+					})
+					.then(res => {
+						if (res.data.code == 0) {
+							uni.showToast({
+								title: '催费成功',
+								icon: 'none',
+								duration: 1500
+							})
+						} else {
+							uni.showToast({
+								title: res.data.msg,
+								icon: 'none',
+								duration: 1500
+							})
+						}
+
+					})
+			},
+			scrolltolower() {
+				if (this.pd) {
+					this.getalldata();
+				} else {
+					return
+				}
+			},
+			typechanges(){
+				this.showtypes = true;
+			},
+			getalldata() {
+
+				this.$api.get('/billinfo/paypage', this.dataForm)
+					.then(res => {
+
+						if (res.data.data.list.length != 0) {
+							this.indexList.push(...res.data.data.list);
+							this.dataForm.page = this.dataForm.page + 1;
+							this.pd = true;
+						} else {
+							uni.showToast({
+								title: '暂无更多数据了',
+								icon: 'none',
+								duration: 1500
+							})
+							this.pd = false;
+						}
+
+					})
+			},
+
+			loadmore() {
+				// for (let i = 0; i < 30; i++) {
+				// 	this.indexList.push({
+				// 		url: this.urls[uni.$u.random(0, this.urls.length - 1)]
+				// 	})
+				// }
+			},
+
+
+			// edit(item) {
+			// 	console.log('111111111111111111', item)
+			// },
+			canceltype() {
+				this.showtype = false;
+			},
+			confirmtype(e) {
+				//	console.log('111111111111111111', e.value[0])
+				this.showtype = false;
+				this.mytype = e.value[0].label;
+				this.dataForm.cycle = e.value[0].id;
+				this.dataForm.page = 1;
+				this.getalldata();
+			},
+			confirmtypes(e) {
+				// console.log('111111111111111111', e.value[0])
+				this.showtypes = false;
+				this.mytypes = e.value[0].labels;
+				this.dataForm.cycle = e.value[0].id;
+				this.dataForm.page = 1;
+				this.getalldata();
+			},
+			canceltypes() {
+				this.showtypes = false;
+			},
+			typechange() {
+				this.showtype = true;
+			},
+			dateChange(e) {
+				this.myday = e.target.value;
+				this.dataForm.cycle = e.target.value;
+				this.dataForm.page = 1;
+				this.getalldata();
+			},
+			getDate(type) {
+				const date = new Date();
+				let year = date.getFullYear();
+				let month = date.getMonth() + 1;
+				if (type === 'start') {
+					year = year - 60;
+				} else if (type === 'end') {
+					year = year + 2;
+				}
+				month = month > 9 ? month : '0' + month;
+				// day = day > 9 ? day : '0' + day;
+				return `${year}-${month}`;
+			},
+			getfloor() {
+				this.$api.get('/control/getOrgStructureTree/', {})
+					.then(res => {
+
+						if (res.data.code == 0) {
+							this.dataForm.projectId = res.data.data[0].orgId;
+
+							this.mytitle = res.data.data[0].orgName;
+							this.alldata = res.data.data[0].childrenList;
+							//console.log('111111111111111111',  res.data.data[0].childrenList)			
+							this.columns = [
+								res.data.data[0].childrenList,
+								res.data.data[0].childrenList[0].childrenList
+							]
+							let allfloor = [];
+							for (let i = 0; i < res.data.data[0].childrenList.length; i++) {
+								allfloor.push(res.data.data[0].childrenList[i].childrenList)
+							}
+							//  console.log('111111111111111111',allfloor)
+							this.columnData = allfloor;
+							this.dataForm.page = 1;
+							this.getalldata();
+						} else {
+							this.showdct = true
+						}
+					})
+			},
+
+			floorchange() {
+				this.showfloor = true;
+			},
+			changeHandler(e) {
+				const {
+					columnIndex,
+					index,
+					// 微信小程序无法将picker实例传出来，只能通过ref操作
+					picker = this.$refs.uPicker
+				} = e
+				if (columnIndex === 0) {
+					this.loading = true
+					picker.setColumnValues(1, this.columnData[index])
+					this.loading = false
+				}
+				this.getalldata();
+			},
+			confirmfloor(e) {
+				console.log('222222', e.value)
+				this.mytitle = e.value[0].orgName + e.value[1].orgName;
+				this.dataForm.buildingId = e.value[0].orgId;
+				this.dataForm.storeyId = e.value[1].orgId;
+				this.showfloor = false;
+				this.getalldata();
+			},
+			cancelfloor() {
+				this.showfloor = false;
+			},
+
+
 		}
 	}
 </script>
 
-<style>
+<style lang="scss">
+	.Currentamount {
+		padding-left: 30rpx;
+		height: 50rpx;
+		line-height: 50rpx;
+		color: #BCB3A7;
+
+		span {
+			color: #FA5555;
+			padding-left: 9rpx;
+		}
+	}
+
+	.Callfee {
+		width: 100rpx;
+		height: 45rpx;
+		text-align: center;
+		line-height: 45rpx;
+		color: #5C8FFF;
+		border: 1px solid #5C8FFF;
+		font-size: 22rpx;
+		position: absolute;
+		bottom: 10rpx;
+		right: 10px;
+		font-weight: bold;
+	}
+
+	.companylist {
+		margin: 20rpx 30rpx;
+		background: #fff;
+		height: 280rpx;
+		border-radius: 10px;
+		position: relative;
+
+		h3 {
+			height: 70rpx;
+			line-height: 70rpx;
+			padding-left: 30rpx;
+		}
+	}
+
+	.settled {
+		background-color: #09C700;
+		width: 100rpx;
+		height: 40rpx;
+		text-align: center;
+		line-height: 40rpx;
+		color: #fff;
+		font-size: 14rpx;
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		border-top-right-radius: 10rpx;
+		border-bottom-left-radius: 10rpx;
+	}
+
+	.outstanding {
+		background-color: #FA5555;
+		width: 100rpx;
+		height: 40rpx;
+		text-align: center;
+		line-height: 40rpx;
+		color: #fff;
+		font-size: 14rpx;
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		border-top-right-radius: 10rpx;
+		border-bottom-left-radius: 10rpx;
+	}
+
+
 
+	.billall {}
+
+	.topbill {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		height: 100rpx;
+		background-color: #e6e6e6;
+	}
+
+	.topbilledit {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+	}
+
+	.changetime1 {
+		padding-right: 10rpx;
+	}
 </style>