lm-safe-app/pages/my/subPages/feedBackIndex.vue

<template>
	<view class="risk-record-page">
		<view class="main">
			<uni-search-bar class="search-bar" radius="100" v-model="keyword" @confirm="handleSearch"
				@cancel="handleCancelSearch" @clear="handleCancelSearch" placeholder="搜索"></uni-search-bar>
			<!-- <view class="filter-bar">
				<view class="filter filter-date-range" @click="handleShowPicker({title: '时间区间', name: 'dateRange'})">
					<text>时间区间</text>
					<u-icon size="14" style="margin-left: 4px;" name="arrow-down"></u-icon>
				</view>
				<view class="filter filter-status" @click="handleShowPicker({title: '状态', name: 'status'})">
					<text>状态筛选</text>
					<u-icon size="14" style="margin-left: 4px;" name="arrow-down"></u-icon>
				</view>
			</view> -->
			<view class="content-list">
				<common-card :dataSource="item" v-for="item in lists" @click="showDetail(item.ID)" class="badge-rel">
					<view class="content">
						<view class="field">
							<text class="label">反馈时间:</text>
							<text class="value">{{item.CREATE_TIME}}</text>
						</view>

					</view>
					<view class="badge">
						<view class="content-status">
							<text class='status warn' v-if="item.STATUS == 10">未回复</text>
							<text class='status normal' v-if="item.STATUS == 20">已回复</text>
						</view>
					</view>
				</common-card>
			</view>
		</view>
		<u-picker :show="comPickerInfo.showPicker" :columns="comPickerInfo.columns" @confirm="onConfirmPicker"
			@cancel="closePicker"></u-picker>
	</view>
</template>

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

	import {
		feedBackOrderPaged
	} from '../../../services/common'

	export default {
		data() {
			return {
				pageIndex: 0,
				total: 0,
				lists: [],
				keyword: '',
				params: {},
				loginID: '',
				comPickerInfo: {
					showPicker: false,
					columns: [],
					title: '',
					name: ''
				},
			}
		},
		onLoad() {
			const appInfoData = uni.getStorageSync('appInfo')
			this.loginID = appInfoData.User.ID
			this.loadData()
		},

		methods: {
			handleSearch() {
				this.pageIndex = 0
				this.loadData(false)
			},
			loadData(paginate) {
				this.pageIndex++
				const orgId = uni.getStorageSync('orgId')
				let json = initFilter(orgId, "", "CREATE_TIME", 1, this.pageIndex);
				extendRule(json, 'USER_ID', 1, this.loginID);
				if (this.keyword) {
					extendRule(json, 'INFO', 9, this.keyword);
				}
				feedBackOrderPaged(json).then(res => {
					this.total = res.TotalCount
					const newRes = (res.Data || []).map(i => {
						return {
							...i,
							title: i.INFO,
						}
					})
					if (paginate) {
						this.lists = this.lists.concat(newRes)
					} else {
						this.lists = newRes
					}
				})
			},

			showDetail(id) {
				uni.navigateTo({
					url: 'feedBack?ID=' + id + '&isAdd=false'
				})
			},

			handleShowPicker(p) {
				let column = []
				if (p.name === 'dateRange') {
					column = ['当天', '最近三天', '最近一周', '最近一月']
				}
				if (p.name === 'status') {
					column = ['正常', '未处理']
				}
				this.comPickerInfo = {
					showPicker: true,
					title: p.title,
					name: p.name,
					columns: [column]
				}
			},
			onConfirmPicker(e) {
				console.log(e)
			},
			closePicker() {
				this.comPickerInfo = {
					showPicker: false,
					columns: [],
					title: '',
					name: ''
				}
			},
		},
		computed: {

		},

		onReachBottom() {
			if (this.total > 10 * this.pageIndex)
				this.loadData(true)
		}
	}
</script>

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

	.badge-rel {
		position: relative;
	}

	.badge {
		position: absolute;
		right: 0px;
		top: 0;
	}

	.status {
		background: rgba(255, 87, 51, 0.2);
		color: rgba(255, 87, 51, 1);
		text-align: center;
		font-size: 12px;
		border-radius: 0px 8px 0px 8px;
		padding: 2px 10px;
	}

	.normal {
		background: rgba(70, 188, 170, 1.0);
		color: #fff;
	}

	.warn {
		background: rgba(243, 121, 95, 1.0);
		color: #fff;
	}
</style>