jy-safe-app/pages/apply/subPages/FM/snapshotList.vue

<template>
	<view class="page-wrap">
		<u-subsection class="sub-section" :list="sections" :current="currentSection" @change="handleChangeSection"></u-subsection>
		<view class="list-wrap">
			<view v-for="(item, key) in snapshotList" :key="key">
				<view class="album">
					<view class="album-avatar">
						<template>
							<u-avatar
								:text="item.CREATER_NAME ? item.CREATER_NAME.slice(0, 1) : ''"
								fontSize="18"
								randomBgColor
							></u-avatar>
						</template>
					</view>
					<view class="album-content">
						<u--text
							:text="`上报人：${item.CREATER_NAME || ''}`"
							type="primary"
							bold
							size="17"
						></u--text>
						<u--text
							margin="0 0 8px 0"
							:text="item.DESCRIPTION || ''"
						></u--text>
						<view class="field">
							<text class="label">上报时间：</text>
							<text class="value">{{item.CREATE_TIME}}</text>
						</view>
						<u-album :urls="item.urls"></u-album>
						<view class="ok-bar-wrap" v-if="item.STATUS === 10">
							<u-button type="primary" @click="handleOk(item)" size="small" :plain="true" :hairline="true" text="确认" style="width: 100px; margin: 0;"></u-button>
						</view>
					</view>
				</view>
				<u-gap height="20" bgColor="#fff"></u-gap>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		initFilter,
		extendRule,
		extendInclude
	} from '../../../../utils/common'

	import { handleOkSnapshot, getSnapshotList } from '../../../../services/apply/FMServices/FMServices'
	import config from '../../../../config/common'

	export default {
		data() {
			return {
				currentStatus: 0,
				currentSection: 0,
				sourceUrl: config.uni_app_web_source_url,
				sections: [{ name: '全部', id: 0 }, { name: '确认中', id: 10 }, { name: '已归档', id: 30 }],
				snapshotList: [],
				lists: [],
			}
		},
		onShow() {
			this.loadData()
		},
		methods: {
			loadData() {
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId, '', 'CREATE_TIME', '1')
				if (this.currentStatus !== 0) {
					extendRule(json, 'STATUS', 1, this.currentStatus)
				}
				extendInclude(json, "Nav_User")
				extendInclude(json, "Nav_Files.Nav_ImgFile")
				getSnapshotList(json).then(res => {
					if (res) {
						this.snapshotList = res.map(item => {
							return {
								...item,
								urls: item.Nav_Files.map(e => {
									return {
										src: e.Nav_ImgFile?.FILE_PATH ? this.sourceUrl + e.Nav_ImgFile?.FILE_PATH : ''
									}
								}).filter(o => o.src)
							}
						})
					}
				})
			},
			handleOk(item) {
				handleOkSnapshot(item).then(res => {
					if (res) {
						this.loadData()
					}
				})
			},
			handleChangeSection(e) {
				const s = {
					0: 0,
					1: 10,
					2: 30
				}
				this.currentSection = e;
				this.currentStatus = s[e];
				this.loadData()
			},
		},
		onReachBottom() {
			// 页码 +1
			if (this.total > 10 * this.pageIndex)
				this.pageIndex++
		},
		watch: {
			pageIndex(n, o) {
				this.loadData()
			},
			keyword(n, o) {
				this.pageIndex = 1
				this.keyword = n
				this.loadData()
			},
			searchStartTime(n, o) {
				this.pageIndex = 1
				this.searchStartTime = n
				this.loadData()
			},
			filterStatus(n, o) {
				this.pageIndex = 1
				this.filterStatus = n
				this.loadData()
			}
		},
		computed: {}
	}
</script>


<style scoped>
	@import url("../../../../style/css/editTemplate.css");

	.sub-section {
		margin-bottom: 16px;
	}

	.album {
		display: flex;
		align-items: flex-start;
	}

	.album-avatar {
		 /*background-color: $u-bg-color;*/
		 padding: 5px;
		 border-radius: 3px;
	 }

	.album-content {
		margin-left: 10px;
		flex: 1;
		padding-bottom: 10px;
		border-bottom: 1px solid #e5e5e5;
	}

	.ok-bar-wrap {
		padding-top: 10px;
	}

	.btn-groups button {
		width: 48%;
	}

	.content .field {
		font-size: 14px;
		line-height: 18px;
		margin-bottom: 4px;
	}

	.content .field .label {
		color: #666;
	}

	.content .field .value {
		color: #333333;
	}

	.card-title {
		margin-bottom: 6px;
		display: flex;
		font-weight: bold;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font-size: 16px;
	}

	.card-title .left {
		display: flex;
		align-items: center;
	}

	.card-title .title-icon {
		margin-right: 4px;
	}
</style>