yiliangyiyun-app/pages/grain_pulse/dynamic.vue

<template>
	<view class="center">
		<view class='search'>
			<u-search placeholder="请输入关键字" bg-color='#F5F6F9' v-model="keyword" @clear="searchClear"
				style="width: 96%; margin: 0 auto;" @search="getData" @custom="getData"></u-search>
		</view>

		<view class="bottom flex">
			<view class="bottonCss" @click="release">
				<image src="../../static/img/liangmai/fabu-2-check@3x.png" mode="" style="width: 40rpx; height: 40rpx;">
				</image>
				<view>发布</view>
			</view>
			<view class="bottonCss" @click="record">
				<image src="../../static/img/liangmai/jilu-2@3x.png" mode="" style="width: 40rpx; height: 40rpx;">
				</image>
				<view style="color: #656765;">记录</view>
			</view>
		</view>
		<view v-for="(item,index) in releaseList">
			<view class="modular">
				<view class="flex">
					<view class="touxiang">
						<image v-if='item.avatarUrl' :src="item.avatarUrl" mode=""
							style="height: 76rpx;border-radius: 8rpx;"></image>
						<image v-else src="../../static/img/myimg/YongHu@3x.png" 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>
				<view class="title">{{item.title}}</view>
				<view class="titleText">
					<!-- {{item.content}} -->
					<u-read-more color='#22C572' show-height="140" :index="index" :shadow-style="shadowStyle" :toggle="true" close-text="展开阅读更多内容" @open='open' @close='close'>
						<rich-text :nodes="item.content" class="rich-item"></rich-text>
						<!-- @load="parseLoaded" -->
						<!-- <u-parse :html="item.content" ></u-parse> -->
					</u-read-more>
				</view>
				<view class="imgList flex" v-if="item.address != ''">
					<view v-for="(items,count) in item.imgList" style="width: 30%;margin-left: 20rpx;">
						<image @click="preview(item.imgList,count)" :src="items"
							style="height: 220rpx;border-radius: 16rpx;"></image>
					</view>
				</view>
				<view class="flex">
					<view class="address flex" style="margin: 30rpx;">
						<image src='../../static/img/location.png'
							style="width: 30rpx;height: 30rpx;top: 8rpx;margin: 0 10rpx;"></image>
						{{item.city}}
					</view>
				</view>
			</view>
		</view>
		<view v-show="isLoadMore">
			<!-- <uni-load-more :status="loadStatus" icon icon-type></uni-load-more> -->
			<u-loadmore :status="loadStatus" icon icon-type="circle" margin-bottom="200" />
		</view>
		<u-back-top :scroll-top="scrollTop" mode="circle" icon="arrow-upward"></u-back-top>
		<u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
			showCancelButton='false' :content="content" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isShowAlert: false,
				content: '您尚未登录，是否立即登录？',
				keyword: "",
				releaseList: [],
				releaseInfo: [],
				currentPage: 1,
				pageSize: 10,
				isLoadMore: false,
				loadStatus: "loading",
				getCompany: {},
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx",
				},
				scrollTop: 0,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getData()
			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);

			}
		},
		onShow() {
			this.userName = this.userInfo.userName
			this.portraits = this.userInfo.avatarUrl
			this.getData()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			open(e){
				console.log(e)
			},
			close(e){
				console.log(e)
			},
			preview(img, index) {
				uni.previewImage({
					urls: img,
					current: index
				});
			},
			getData() {
				this.$api.doRequest('get', '/settledCompanyDynamics/selectSettledCompanyDynamicsPage', {
						currentPage: 1,
						pageSize: 10,
						searchKeyWord: this.keyword,
						searchType: 2
					})
					.then(res => {
						if (res.data.code == 200) {
							this.releaseList = res.data.data.records
							console.log("releaseList", this.releaseList)
							for (let i = 0; i < this.releaseList.length; i++) {
								if (this.releaseList[i].address != null) {
									if (this.releaseList[i].address.indexOf(',') != -1) {
										this.releaseList[i].imgList = this.releaseList[i].address.split(",")
									} else {
										this.releaseList[i].imgList = [this.releaseList[i].address]
									}
								}
							}

						}
					})
			},
			getrelease() {
				this.$api.doRequest('get', '/settledCompanyDynamics/selectSettledCompanyDynamicsPage', {
						currentPage: this.currentPage,
						pageSize: this.pageSize,
						searchKeyWord: this.keyword,
						searchType: 2
					})
					.then(res => {
						if (res.data.code == 200) {
							this.releaseInfo = res.data.data.records
							if (this.releaseInfo.length > 0) {
								this.releaseList = this.releaseList.concat(this.releaseInfo)
								this.isLoadMore = false
								for (let i = 0; i < this.releaseList.length; i++) {
									if (this.releaseList[i].address != null) {
										if (this.releaseList[i].address.indexOf(',') != -1) {
											this.releaseList[i].imgList = this.releaseList[i].address.split(",")
										} else {
											this.releaseList[i].imgList = [this.releaseList[i].address]
										}

									}

								}
							} else {
								this.loadStatus = 'nomore'
							}

						}
					})
			},
			searchClear() {
				this.keyword = ""
			},
			alertBtn() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			cancelClick() {
				this.isShowAlert = false
			},
			release() {
				if (!this.hasLogin) {
					this.isShowAlert = true;
					// uni.showModal({
					// 	title: '提示',
					// 	content: '您尚未登录，是否立即登录？',
					// 	showCancel: true,
					// 	confirmText: '登录',
					// 	success: (e) => {
					// 		if (e.confirm) {
					// 			uni.navigateTo({
					// 				url: '/pages/public/login'
					// 			})
					// 		}
					// 	},
					// 	fail: () => {},
					// 	complete: () => {}
					// })
				} else {
					this.getCompany.loginPhone = this.userInfo.phone
					this.$api.doRequest('get', '/settledCompanyInfo/companyList', this.getCompany)
						.then(res => {
							if (res.data.code == 200) {
								console.log("companyList", res)
								if (res.data.data.length > 0) {
									uni.navigateTo({
										url: `/pages/grain_pulse/release`
									})
								} else {
									uni.showModal({
										content: "您还没有入驻粮脉，不能发布，是否前去完善入驻信息！",
										showCancel: true,
										confirmText: '前往',
										success: function(res) {
											if (res.confirm) {
												uni.navigateTo({
													url: `/pages/grain_pulse/enter`
												})
											}
										}
									})
								}
							}
						})
				}
			},
			alertBtn() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			cancelClick() {
				this.isShowAlert = false
			},
			record() {
				if (!this.hasLogin) {
					this.isShowAlert = true;
					// uni.showModal({
					// 	title: '提示',
					// 	content: '您尚未登录，是否立即登录？',
					// 	showCancel: true,
					// 	confirmText: '登录',
					// 	success: (e) => {
					// 		if (e.confirm) {
					// 			uni.navigateTo({
					// 				url: '/pages/public/login'
					// 			})
					// 		}
					// 	},
					// 	fail: () => {},
					// 	complete: () => {}
					// })
				} else {
					uni.navigateTo({
						url: `/pages/grain_pulse/record`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F6FA;
	}

	.center {
		padding: 0 4rpx;
	}

	.bottom {
		width: 100%;
		height: 160rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		z-index: 9999;
	}

	.bottonCss {
		width: 50%;
		height: 40rpx;
		margin-top: 40rpx;
		text-align: center;
		font-size: 20rpx;
	}

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

	.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 {
		height: 48rpx;
		background-color: #F5F6FA;
		border-radius: 20rpx;
		margin-left: 30rpx;
		text-align: center;
		line-height: 48rpx;
		padding: 0px 13px 0 5px;
	}

	/deep/.u-content {
		text-indent: 0 !important;
	}

	.search {
		background: #fff;
		padding: 10px;
	}
	.rich-item{
		line-height: 44rpx;
	}
</style>