xinelu-applet-ui/pagesB/applicationRecord/applicationRecord.vue

<template>
	<view class="app">
		<u-sticky>
			<view class="">
				<u-tabs :list="tabslist" :is-scroll="false" :current="tabscurrent" @change="tabschange"
					inactive-color='#fff' active-color='#fff'></u-tabs>
				<view class="inputs">
					<view class="inputitem">
						<i class="icon"></i>
						<input type="text" name="" id="" class="input" placeholder="搜索" v-model="query.prizeName">
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="" v-if="list&&list.length>0">
			<view class="content" v-for="(item,index) in list" :key="index">
				<view class="time">
					{{item.applicantTime?item.applicantTime:''}}
					<span>
						{{Number(item.status)==1?'待审批':''}}
						{{Number(item.status)==2?'已批准':''}}
						{{Number(item.status)==3?'已驳回':''}}
						{{Number(item.status)==4?'已撤销':''}}
					</span>
				</view>
				<u-image width="180rpx" height="180rpx" :src="item.src"></u-image>
				<view class="servename">
					{{item.prizeName?item.prizeName:''}}
				</view>
				<view class="prizeScore">
					{{item.prizeScore?item.prizeScore:0}} 积分
				</view>
				<view class="button" @tap="tapitem(item)" v-if="Number(item.status)==1">
					撤销
				</view>
			</view>
		</view>
		<u-empty v-else mode="list" icon-size='220' text='暂无申请记录'></u-empty>
		<u-modal v-model="revokeshow" content="是否确认撤销此次申请记录？" :show-cancel-button='true'
			@confirm='revokeconfirm'></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		approvalList,
		revokeById
	} from '@/api/pagesB/applicationRecord/index.js'
	import {
		getImgById
	} from '@/api/pagesB/getimg/index.js'
	export default {
		data() {
			return {
				revokeshow: false,
				revokeitem: {},
				query: {
					identity: uni.getStorageSync('userinfo').cardNo,
					pageNum: 1,
					pageSize: 10,
					prizeName: '',
					status: '',
				},
				list: [],
				total: 0,
				tabslist: [{
					name: '全部',
					value: '',
				}, {
					name: '待审批',
					value: 1,
				}, {
					name: '已批准',
					value: 2,
				}, {
					name: '已驳回',
					value: 3,
				}, {
					name: '已撤销',
					value: 4,
				}],
				tabscurrent: 0,
			};
		},
		onLoad() {
			this.info()
		},
		watch: {
			"query.prizeName": {
				handler(newvalue, oldvalue) {
					this.info()
				},
			}
		},
		methods: {
			revokeconfirm() {
				revokeById(this.revokeitem.approvalId).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '撤销成功',
							type: 'success',
						})
					}
				})
			},
			tabschange(index) {
				this.tabscurrent = index;
				this.query.status = this.tabslist[index].value
				this.query.pageNum = 1
				this.info();
			},
			tapitem(item) {
				this.revokeshow = true
				this.revokeitem = item
			},
			async getimg(id) {
				try {
					const res = await getImgById(id);
					return res.data
				} catch (error) {
					return null;
				}
			},
			info() {
				approvalList(this.query).then(res => {
					if (this.query.pageNum == 1) {
						this.list = []
					}
					res.rows.forEach(e => {
						e.src = ''
					})
					this.list = [
						...this.list,
						...res.rows
					]
					this.list.forEach(async (e) => {
						if (e.src == '') {
							e.src = await this.getimg(e.prizeId);
						}
					});
					this.total = res.total
				})
			},
		},
		onReachBottom() { //下滑加载
			if (this.list.length >= this.total) {} else {
				this.query.pageNum++
				this.info();
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.query.pageNum = 1;
			this.info();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		width: 100%;
		text-align: justify;
		padding: 0 0 30rpx 0;

		::v-deep .u-tabs {
			background-color: #26A888 !important;
		}

		::v-deep .u-empty {
			margin-top: 25vh !important;
		}

		.inputs {
			background-color: #fff;
			background-color: #ffffff;
			z-index: 999;
			position: relative;
			top: 50%;
			width: 96%;
			height: 80rpx;
			padding: 10rpx 0 0;
			transform: none;
			margin: 0 auto;

			.inputitem {
				background: #F6F6F6;
				width: 100%;
				height: 60rpx;
				border-radius: 10rpx;
			}

			.input {
				margin: 0 auto;
				position: absolute;
				height: 60rpx;
				// top: 8%;
				left: 13%;
				width: 80%;
				font-size: 26rpx;
				color: #000000;
			}

			.icon {
				background: url(@/static/pagesB/sousuo.png) no-repeat;
				width: 30rpx;
				height: 28rpx;
				background-size: cover;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 3%;
			}
		}

		.content {
			width: 94%;
			height: 321rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			margin: 20rpx auto;
			position: relative;

			.prizeScore {
				color: #333333;
				position: absolute;
				left: 35%;
				bottom: 90rpx;
			}

			.button {
				width: 110rpx;
				height: 45rpx;
				line-height: 45rpx;
				background-color: #26A888;
				border-radius: 5rpx;
				text-align: center;
				color: #fff;
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}

			.servename {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 38rpx;
				position: absolute;
				top: 38%;
				left: 35%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			::v-deep .u-image {
				position: absolute;
				left: 3%;
				top: 28%;
				width: 180rpx;
				height: 180rpx;
			}

			.time {
				text-align: justify;
				padding: 25rpx 0 0 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
				line-height: 38rpx;
				position: relative;

				span {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
					position: absolute;
					font-weight: 500;
					color: #26A888;
					line-height: 38rpx;
					right: 3%;
				}
			}
		}
	}
</style>