yiliangyiyun-app/pages/grain_pulse/record.vue

<template>
	<view class="center">
		<view class="topCss">
			<view class="back-btn cuIcon-back" @click="navBack"></view>
			<view class="introduce">
				<view class="portrait">
					<image :src="portraits" mode="" style="height: 120rpx;border-radius: 14rpx;"></image>
				</view>
				<view class="name">{{userName}}</view>
				<view class="dongtai">
					{{count}}
					<text style="color: #AFB3BF;">条动态</text>
				</view>
				<view class="flex">
					<view v-for="(item,index) in choices" class="labels">
						<view :class="item.changeCss" @click="querys(item)">{{item.name}}</view>
						<view style="width: 40rpx;height: 6rpx;background-color: #22C572;margin: 16rpx auto 0;"
							v-if="item.check == true"></view>
					</view>
				</view>
			</view>
		</view>
		<view v-for="(item,index) in release">
			<view class="modular">
				<view class="flex">
					<view class="touxiang">
						<image :src="portraits" mode="" style="height: 76rpx;border-radius: 8rpx;"></image>
					</view>
					<view class="" style="margin: 20rpx 30rpx;">
						<view style="color: #333333;font-weight: 600;font-size: 34rpx;">{{item.compName}}</view>
						<view style="color: #AFB3BF; margin-top: 4rpx;">{{item.updateDate}}</view>
					</view>
					<view class="flex" style="width: 40%; justify-content: flex-end;margin: 40rpx;">
						<view style="color: #FE6430;"
							v-if="item.status == '审核中' || item.status == '未审核'|| item.status == '待审核'">{{item.status}}
						</view>
						<view style="color: #22C572;" v-if="item.status == '已通过'">{{item.status}}</view>
						<view style="color: #FB1E1E;" v-if="item.status == '已驳回'">{{item.status}}</view>

					</view>
				</view>
				<view class="title">{{item.title}}</view>
				<view class="titleText">
					{{item.content}}
				</view>
				<view class="imgList flex" v-if="item.address != ''">
					<view v-for="(items,count) in item.imgList" style="width: 30%;margin-left: 20rpx;">
						<image :src="items" style="height: 220rpx;border-radius: 16rpx;"></image>
					</view>
				</view>
				<view class="flex">
					<view class="address flex">
						<image src='../../static/img/location.png'
							style="width: 26rpx;height: 30rpx;top: 8rpx;margin: 0 10rpx;"></image>
						{{item.city}}
					</view>
					<view style="width: 30%;justify-content: flex-end;margin: 30rpx;" class="flex">
						<view @click="delRecord(item)">
							<image src='../../static/img/jiaoyi/shanchu@3x.png'
								style="width: 32rpx;height: 32rpx;margin-right: 20rpx;top: 4rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="isLoadMore">
			<!-- <uni-load-more :status="loadStatus"></uni-load-more> -->
			<!-- <u-loadmore :status="status" /> -->
			<u-loadmore :status="loadStatus" icon icon-type="circle" margin-bottom="80" margin-top="60rpx" />
		</view>
		<view style='height:12vh;background:#F5F6FA;line-height:12vh;text-align:center;' v-if='release.length == 0'>
			当前暂无结果
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				count: 0,
				portraits: "",
				choices: [{
						name: "全部",
						check: true,
						changeCss: "label2",
					},
					{
						name: "审核中",
						check: false,
						changeCss: "label",
					},
					{
						name: "已通过",
						check: false,
						changeCss: "label",
					},
					{
						name: "未通过",
						check: false,
						changeCss: "label",
					},
					{
						name: "已过期",
						check: false,
						changeCss: "label",
					}
				],
				release: [],
				releaseInfo: [],
				currentPage: 1,
				pageSize: 10,
				imgList: [],
				userName: "",
				searchType: "",
				searchTypeInfo: "",
				isLoadMore: false,
				loadStatus: "loading",

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onShow() {
			this.userName = this.userInfo.userName
			this.portraits = this.userInfo.avatarUrl
			this.getRelease()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getRelease()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() { //上拉触底函数
			var that = this
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.currentPage += 1
				setTimeout(function() {
					uni.stopPullDownRefresh();
					that.getRelease()
				}, 1000);
				// this.getRelease()
			}
		},
		methods: {
			navBack() {
				uni.navigateBack(1)
			},
			querys(item) {
				for (var i = 0; i < this.choices.length; i++) {
					if (this.choices[i].name == item.name) {
						this.choices[i].check = true
						this.choices[i].changeCss = "label2"
					} else {
						this.choices[i].check = false
						this.choices[i].changeCss = "label"
					}
				}
				if (item.name == "审核中") {
					this.searchType = "1"
				} else if (item.name == "已通过") {
					this.searchType = "2"
				} else if (item.name == "未通过") {
					this.searchType = "3"
				} else {
					this.searchType = ""
				}
				this.getRelease()
			},
			getRelease() {
				this.$api.doRequest('get', '/settledCompanyDynamics/selectSettledCompanyDynamicsPage', {
						currentPage: this.currentPage,
						pageSize: this.pageSize,
						loginPhone: this.userInfo.phone,
						searchType: this.searchType
					})
					.then(res => {
						if (res.data.code == 200) {
							if (!this.searchType) {
								this.releaseInfo = res.data.data.records
								if (this.releaseInfo.length > 0) {
									this.release = this.release.concat(this.releaseInfo)
									this.count = this.release.length
									this.isLoadMore = false
									for (let i = 0; i < this.release.length; i++) {
										this.release[i].imgList = this.release[i].address.split(",")
									}
								} else {
									this.loadStatus = 'nomore'
								}
							} else {
								debugger
								if (this.searchTypeInfo == this.searchType) {
									this.releaseInfo = res.data.data.records
									if (this.releaseInfo.length > 0) {
										this.release = this.release.concat(this.releaseInfo)
										this.count = this.release.length
										this.isLoadMore = false
										for (let i = 0; i < this.release.length; i++) {
											this.release[i].imgList = this.release[i].address.split(",")
										}
									} else {
										this.loadStatus = 'nomore'
									}
								}else{
										this.release = []
										this.releaseInfo = res.data.data.records
										if (this.releaseInfo.length > 0) {
											this.release = this.release.concat(this.releaseInfo)
											this.count = this.release.length
											this.isLoadMore = false
											for (let i = 0; i < this.release.length; i++) {
												this.release[i].imgList = this.release[i].address.split(",")
											}
										} else {
											this.loadStatus = 'nomore'
										}
								}
								this.searchTypeInfo = this.searchType

							}




						}
					})
			},
			delRecord(item) {
				var that = this
				uni.showModal({
					content: "确定删除该动态？",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							that.$api.doRequest('post',
									'/settledCompanyDynamics/api/deleteSettledCompanyInfo', {
										id: item.id,
										phone: item.phone
									})
								.then(res => {
									if (res.data.code == 200) {
										uni.showToast({
											title: '删除成功！',
											icon: 'none',
											duration: 2000,
											success() {
												setTimeout(function() {
													that.getRelease()
												}, 1000);
											}
										})

									}
								})
						}
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.center {
		overflow: scroll;
	}

	.topCss {
		overflow: scroll;
		background: url(../../static/img/liangmai/record@3x.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: #fff;
	}

	.modular {
		width: 94%;
		margin: 40rpx auto;
		background-color: #FFFFFF;
		border-radius: 40rpx;
		// margin-top: 40rpx;
	}

	.modular {
		width: 94%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 40rpx;
		margin-top: 40rpx;
	}

	.introduce {
		// height: 300rpx;
		background-color: #FFFFFF;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		margin-top: 250rpx;
	}

	.portrait {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto 0;
		position: relative;
		top: -70rpx;
	}

	.name {
		text-align: center;
		color: #333333;
		font-size: 40rpx;
		margin-top: -30rpx;
	}

	.dongtai {
		text-align: center;
	}

	.labels {
		width: 140rpx;
		text-align: center;
		margin-top: 60rpx;
	}

	.label {
		color: #333333;
		font-size: 32rpx;
	}

	.label2 {
		color: #333333;
		font-size: 36rpx;
		font-weight: 600;
	}

	.touxiang {
		width: 76rpx;
		height: 76rpx;
		margin: 20rpx 0 0 34rpx;
	}

	.title {
		font-size: 38rpx;
		font-weight: 600;
		margin-left: 30rpx;
	}

	.titleText {
		font-size: 30rpx;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}

	.imgList {
		width: 100%;
		margin-top: 30rpx;
		flex-wrap: wrap;
	}

	.address {
		width: 60%;
		height: 48rpx;
		background-color: #F5F6FA;
		border-radius: 24rpx;
		margin-left: 30rpx;
		line-height: 48rpx;
		margin: 30rpx;
	}
</style>