realty/virgo.wzfrontend/yui_wx/pages/bill/bill.vue

<template>
	<view>
		<mescroll-body top="30" bottom="40" @init="mescrollInit" @down="downCallback" @up="upCallback" :option="{}">
			<view class="common-list">
				<view class="common-item" v-for="(item,index) in list" :key="item.id"
					@click="$navigateTo('/pages/billDetail/billDetail?billId='+item.id+'&type='+type)">
					<view class="title" v-if="type === 1">{{'第' + item.phase + '期'}}</view>
					<view class="title" v-else>{{ item.name}}</view>
					<view class="date" v-if="type === 1">{{item.startDate}}至{{item.endDate}}</view>
					<view class="date" v-else>{{item.reminderDate}}</view>
					<view class="other">
						<view class="item">
							<view class="label">收款方</view>
							<view class="value">{{item.organizationName}}</view>
						</view>
						<view class="item">
							<view class="label">付款方</view>
							<view class="value">{{item.payMerchantName || item.payClientName}}</view>
						</view>
					</view>
					<view class="state">
						<view></view>
						<view class="tag" v-if="type === 1">
							<div class="status-tag info" v-if="!item.status">待付款</div>
							<div class="status-tag warning" v-else-if="item.status === 1">付款中</div>
							<div class="status-tag success" v-else-if="item.status === 2">已付款</div>
						</view>
						<view class="tag" v-else>
							<div class="status-tag info" v-if="!item.status">待发送</div>
							<div class="status-tag warning" v-else-if="item.status === 1">付款中</div>
							<div class="status-tag success" v-else-if="item.status === 2">已付款</div>
							<div class="status-tag info" v-else-if="item.status === 3">待付款</div>
						</view>
					</view>
					<view class="icon">
						<uni-icons custom-prefix="iconfont" :type="menu.iconClass" color="#08979c" size="30">
						</uni-icons>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getPaymentListByPage,
		getCommonPaymentListByPage
	} from '@/request/api/bill.js'
	import {
		bindProjectDetail
	} from '@/request/api/organization.js'

	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: [],
				type: '',
				menu: {},
				payClientId: '',
				payMerchantId: '',
				contractId: ''
			}
		},
		onLoad(body) {
			this.type = parseInt(body.type);
			this.menu = this.title();
			this.contractId = body.contractId;
			uni.setNavigationBarTitle({
				title: this.menu.title
			});
			uni.$on('reloadBill', () => {
				this.mescroll.resetUpScroll(false);
			})
		},
		methods: {
			title() {
				let str = {
					title: '',
					iconClass: 'icon-jiesuanguanli'
				};
				switch (this.type) {
					case 1:
						str = {
							title: '合同账单',
							iconClass: 'icon-jiesuanguanli'
						};
						break;
					case 2:
						str = {
							title: '常规账单',
							iconClass: 'icon-yuemingxi'
						};
						break;
					default:
						break;
				}
				return str;
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let postData = {
					currPage: page.num,
					pageSize: 10,
					projectId: this.$store.getters.project.id
				}
				if (this.contractId) {
					postData['contractId'] = this.contractId;
					return this.getBillList(postData);
				}
				if (this.$store.getters.identity.id === 3 || this.$store.getters.identity.id === 6) {
					postData['organizationId'] = this.$store.getters.organization.id;
					this.getBillList(postData);
				} else if (this.$store.getters.identity.id === 4) {
					if (this.payMerchantId) {
						postData['payMerchantId'] = this.payMerchantId;
						this.getBillList(postData);
						return;
					}
					bindProjectDetail({
						bindOrganizationId: this.$store.getters.organization.id,
						projectId: this.$store.getters.project.id,
						identityId: 4
					}).then(res => {
						if (res.code === 200) {
							if (res.data.length == 0) return this.mescroll.endBySize(0, 0);
							this.payMerchantId = res.data[0].merchantId;
							postData['payMerchantId'] = this.payMerchantId;
							this.getBillList(postData);
						} else {
							this.mescroll.endErr();
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				} else if (this.$store.getters.identity.id === 1) {
					if (this.payClientId) {
						postData['payClientId'] = this.payClientId;
						this.getBillList(postData);
						return;
					}
					bindProjectDetail({
						userId: this.$store.getters.user.userId,
						projectId: this.$store.getters.project.id,
						identityId: 1
					}).then(res => {
						if (res.code === 200) {
							if (res.data.length == 0) return this.mescroll.endBySize(0, 0);
							this.payClientId = res.data[0].clientId;
							postData['payClientId'] = this.payClientId;
							this.getBillList(postData);
						} else {
							this.mescroll.endErr();
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}
			},
			getBillList(postData) {
				if (this.type === 1) {
					getPaymentListByPage(postData).then(res => {
						if (res.code === 200) {
							this.mescroll.endBySize(res.data.dataList.length, res.data.totalCount);
							if (postData.currPage == 1) this.list = []; //如果是第一页需手动制空列表
							let data = res.data.dataList;
							this.list = this.list.concat(data); //追加新数据
						} else {
							this.mescroll.endErr();
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				} else {
					if (this.$store.getters.identity.id === 1 || this.$store.getters.identity.id === 4) {
						postData['statusList'] = [1, 2, 3];
					}
					getCommonPaymentListByPage(postData).then(res => {
						if (res.code === 200) {
							this.mescroll.endBySize(res.data.dataList.length, res.data.totalCount);
							if (postData.currPage == 1) this.list = []; //如果是第一页需手动制空列表
							let data = res.data.dataList;
							this.list = this.list.concat(data); //追加新数据
						} else {
							this.mescroll.endErr();
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}
			}
		}
	}
</script>

<style>

</style>