yd_qycpfb/jp-mobile/pages/revenue/RevenueList.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">企业税收</block>
		</cu-custom>
		<view :style="[{top:CustomBar + 'px'}]">
			<view class="cu-bar search">
				<view class="search-form bg-white round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="搜索" v-model="curWord" confirm-type="search"
						@input="inputWord"></input>
				</view>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
					v-for="(row, index) in dataList" :key="index" @touchstart="ListTouchStart"
					@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="cuIcon-titles text-orange "></text># {{index + 1}}
						</view>
						<view class="action">
							<button class="uni-button" size="mini" @click="edit(row.id)" type="primary">修改</button>
							<button class="uni-button" size="mini" @click="del(row.id)" type="warn">删除</button>
						</view>
					</view>
					<view class="cu-card dynamic no-card">
						<view class="cu-item shadow">
							<view class="cu-list menu-avatar comment solids-top">
								<view class="cu-item">
									<view class="content">
										<view class=" margin-top-sm  text-sm">
											<view class="flex">
												<view> 企业:</view>
												<view class="flex-sub">
													{{row.qyName}}
												</view>
											</view>
										</view>
										<view class=" margin-top-sm  text-sm">
											<view class="flex">
												<view> 类别:</view>
												<view class="flex-sub">
													{{ $dictUtils.getDictLabel("s_lb", row.lb, '-') }}
												</view>
											</view>
										</view>
										<view class=" margin-top-sm  text-sm">
											<view class="flex">
												<view> 税源办:</view>
												<view class="flex-sub">
													{{ $dictUtils.getDictLabel("yes_no", row.des3, '-') }}
												</view>
											</view>
										</view>
										<view class=" margin-top-sm  text-sm" v-if="row.des3 !=='1'">
											<view class="flex">
												<view> 月份:</view>
												<view class="flex-sub">
													{{ row.des1 }}
												</view>
											</view>
										</view>
										<view class=" margin-top-sm  text-sm" v-if="row.des3 ==='1'">
											<view class="flex">
												<view> 开始月份:</view>
												<view class="flex-sub">
													{{ row.des1 }}
												</view>
											</view>
										</view>
										<view class=" margin-top-sm  text-sm" v-if="row.des3 ==='1'">
											<view class="flex">
												<view> 结束月份:</view>
												<view class="flex-sub">
													{{ row.des2 }}
												</view>
											</view>
										</view>
										<view class=" margin-top-sm  text-sm">
											<view class="flex">
												<view> 金额(万元):</view>
												<view class="flex-sub">
													{{ row.amount }}
												</view>
											</view>
										</view>
										<view class=" margin-top-sm  text-sm">
											<view class="flex">
												<view> 备注:</view>
												<view class="flex-sub">
													{{ row.remark }}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
			<uni-fab :pattern=" {
							color: '#7A7E83',
							backgroundColor: '#fff',
							selectedColor: '#007AFF',
							buttonColor: '#007AFF'
						}" horizontal="right" vertical="bottom" @fabClick="add"></uni-fab>
		</view>
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	import revenueListService from '@/api/revenue/revenueListService'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)
		onShow(option) {
			this.$auth.checkLogin()
		},
		components: {
			uniFab
		},
		data() {
			return {
				searchForm: {},
				curWord: "", //当前搜索关键词
				dataList: [], // 数据列表
				modalName: null,
				tablePage: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					orders: []
				},
				loading: false
			}
		},
		methods: {
			// 新增
			add() {
				uni.navigateTo({
					url: '/pages/revenue/RevenueForm'
				})
			},
			// 修改
			edit(id) {
				uni.navigateTo({
					url: '/pages/revenue/RevenueForm?id=' + id
				})
			},
			// 删除
			del(id) {
				uni.showModal({
					title: '提示',
					content: '您确认要删除数据吗',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							revenueListService.delete(id).then(({
								data
							}) => {
								uni.showToast({
									title: data,
									icon: "success"
								})
								this.doSearch()
							})
						}
					}
				});
			},
			/*获取数据列表 */
			upCallback(page) {
				this.loading = true
				revenueListService.list({
					current: page.num,
					size: page.size,
					...this.searchForm
				}).then(({
					data
				}) => {
					let curPageData = data.records
					this.mescroll.endBySize(curPageData.length, data.total);
					//如果是第一页需手动制空列表
					if (page.num == 1)
						this.dataList = [];
					//追加新数据
					this.dataList = this.dataList.concat(curPageData);
				}).catch(e => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})

			},
			// 输入监听
			inputWord(e) {
				// this.curWord = e.detail.value // 已使用v-model,无需再次赋值
				// 节流,避免输入过快多次请求
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.doSearch(this.curWord)
				}, 300)
			},
			// 搜索
			doSearch(word) {
				this.curWord = word
				this.dataList = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > -60 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	.ellipsis-description {
		font-size: 12px;
		line-height: $line-height-base;
		display: -webkit-box;
		/*作为弹性伸缩盒子模型显示*/
		-webkit-line-clamp: 1;
		/*显示的行数；如果要设置2行加...则设置为2*/
		overflow: hidden;
		/*超出的文本隐藏*/
		text-overflow: ellipsis;
		/* 溢出用省略号*/
		-webkit-box-orient: vertical;
		/*伸缩盒子的子元素排列：从上到下*/
	}

	.cu-bar .search-form {
		background-color: white;
	}
</style>