app-grassland/pages/sjgl/sjgl.vue

<template>
	<view class="sjgl">
		<view style="padding: 0 5px;border-bottom: 1px solid #ddd;">
			<uni-search-bar v-if="searchVisible" bg-color="#fff" placeholder="请输入上报内容进行搜索" :focus="true"
				@cancel="searchVisible=false" @confirm="search" v-model="searchValue"></uni-search-bar>
		</view>
		<view v-for="item in datas">
			<uni-card style="padding: 0;">
				<view style="padding: 10px;">
					<custom-attr label="上报人" :value="item.reportUser"></custom-attr>
					<custom-attr label="上报时间" :value="item.reportTime"></custom-attr>
					<custom-attr label="上报内容" :value="item.reason"></custom-attr>
					<custom-attr label="状态" :value="item.status"></custom-attr>
				</view>
				<view style="margin-top: 10px;">
					<uni-row>
						<uni-col :span="12">
							<button style="color: #e64340;" @click="delItem(item.id)">
								<image class="img-btn" src="../../static/del-btn.png"></image>
								删除
							</button>
						</uni-col>
						<uni-col :span="12">
							<button type="primary" @click="toEdit(item.id)">
								<image class="img-btn" src="../../static/edit-btn.png"></image>
								编辑
							</button>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>
		</view>
		<uni-load-more :status="loadStatus" @clickLoadMore="loadMore" :content-text="contentText" />
	</view>
</template>

<script>
	import helper from '../../common/helper'
	export default {
		data() {
			return {
				datas: [],
				token: '',
				loadStatus: 'loading',
				pageNum: 1,
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				searchVisible: false,
				searchValue: ''
			}
		},
		onLoad() {},
		onShow(e) {
			console.log('onshow', e)
			uni.getStorage({
				key: 'token',
				success: (token) => {
					this.token = token.data;
					this.datas = [];
					this.requestData(this.pageNum);
				},
				fail(err) {},
				complete: () => {}
			})
		},
		onNavigationBarButtonTap(e) {
			this.searchVisible = true
		},
		methods: {
			search(value) {
				this.pageNum = 1;
				this.datas = []
				this.requestData();
			},
			toEdit(id) {
				uni.navigateTo({
					url: `/pages/sjsb/sjsb?id=${id}`
				})
			},
			delItem(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该条数据？',
					success: (e) => {
						if (e.confirm) {
							uni.showToast({
								duration: 20000,
								title: '删除中...',
								icon: "loading",
								mask: true
							})
							uni.request({
								url: `${helper.serverUrl}/ffzy/ffzy/${id}`,
								method: 'DELETE',
								header: {
									Authorization: `Bearer ${this.token}`
								},
								success: (resp) => {
									if (resp.data.code === 200) {
										uni.showToast({
											title: '删除成功',
											icon: "success"
										})
										this.pageNum = 1;
										this.datas = [];
										this.requestData();
									} else {
										uni.showToast({
											title: '删除失败',
											icon: "fail"
										})
									}
								},
								fail: () => {
									uni.showToast({
										title: '删除失败',
										icon: "fail"
									})
								}
							})
						}
					}
				})
			},
			loadMore(e) {
				if (e.detail.status !== 'no-more') {
					this.pageNum = this.pageNum + 1;
					this.requestData();
				}
			},
			requestData() {
				this.loadStatus = 'loading';
				uni.request({
					url: `${helper.serverUrl}/ffzy/ffzy/list`,
					data: {
						pageNum: this.pageNum,
						pageSize: 10,
						searchValue: this.searchValue
					},
					header: {
						Authorization: `Bearer ${this.token}`
					},
					success: (resp) => {
						console.log(resp)
						if (resp.data.rows) {
							this.datas = [...this.datas, ...resp.data.rows];
							if (this.datas.length >= resp.data.totalCount) {
								this.loadStatus = 'no-more'
							} else {
								this.loadStatus = 'more'
							}
						}
					}
				})
			}
		}
	}
</script>

<style>
	.img-btn {
		width: 16px;
		height: 16px;
		margin-right: 2px;
	}

	.sjgl>>>.uni-card__content {
		padding: 0 !important;
	}

	.sjgl>>>.uni-card {
		padding: 0 !important;
	}

	.sjgl>>>uni-button {
		border-radius: 0 !important;
	}

	.sjgl>>>uni-button::after {
		border-radius: 0 !important;
	}
</style>