yiliangyiyun-app/pages/user/depotAcquisition/depotAcquisition.vue

<template>
	<view class="">
		<view class="header">
			<view class='locationwrap' @click='naviageToPage("/pages/user/depotAcquisition/selectCity")'>
				{{currentCityName}}
				<u-icon name="arrow-down" size="28" class="icon-jt"></u-icon>
			</view>
			<u-search class="search" bg-color="#F5F6F9" placeholder="请输入仓库名" v-model="searchKeyWord"
				:show-action="false" @change="searchChange"></u-search>
			<!-- <view @click='naviageToPage("/pages/user/depotAcquisition/grainDeliveryRecord")'
				class='Regular flex align-item-center distribution justify-center'>
				<image class='cangku' src="../../../static/img/liangmai/cangku.png" mode=""></image>
			</view> -->
		</view>

		<view class="content1" v-for="(item,index) in dataList" :key="index">
			<view class="row row1">
				<view class="title">{{item.warehouseName}}</view>
				<view class='follow' @click="followClick(item)">{{item.follow=='未关注'?'+关注':'已关注'}}</view>
			</view>
			<view class="row2">
				<view class='position'>
					<image class='location' src="../../../static/img/liangmai/icon_ditu.png" mode=""></image>
					{{item.warehousePrivate}}{{item.warehouseCity}}{{item.warehouseArea}}{{item.detailedAddress}}
				</view>
			</view>
			<view class="row3">
				<view class="row3-item">
					<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.acquisitionInformation" class="rich-item"></rich-text>
						<!-- @load="parseLoaded" -->
						<!-- <u-parse :html="item.content" ></u-parse> -->
					</u-read-more>
				</view>
			</view>
			<view class="row4">
				<view class="time">{{item.updateDate}}</view>
				<view class="btn"
					@click='naviageToPage("/pages/user/depotAcquisition/grainDeliveryRegistration?warehouseName="+item.warehouseName+"&warehouseId="+item.warehouseId+"&warehousePrivate="+item.warehousePrivate+"&warehouseCity="+item.warehouseCity+"&warehouseArea="+item.warehouseArea+"&detailedAddress="+item.detailedAddress)'>
					我要送粮
				</view>
			</view>
		</view>
		<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 {
		components: {

		},
		data() {
			return {
				isShowAlert: false,
				content: '当前登入信息验证失败，是否重新登录？',
				currentCityName: '',
				searchKeyWord: '',
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx",
				},
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				loadStatus: 'loading',
				isLoadMore: false,
			}
		},

		onLoad() {

		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index == 1) {
				uni.navigateBack()
			} else {

				this.naviageToPage("/pages/user/depotAcquisition/grainDeliveryRecord")
			}
		},
		// #endif
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.currentPage += 1
				this.getListData()
			}
		},
		onPullDownRefresh() {
			this.currentPage = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.dataList = []
			this.getListData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			let _city = uni.getStorageSync("depotAcquisition_selectCity")
			this.currentCityName = _city ? _city.positionName.cityName : ''
			// this.$api.doRequest('get', '/commonUser/api/checkSession').then(res => {
			// 	console.log("checkSession", res)
			// 	if (res.data.data == "INVALID") {
			// 		this.isShowAlert = true;
			// 	}
			// 	this.currentPage = 1
			// 	this.isLoadMore = false
			// 	this.loadStatus = 'more'
			// 	this.getListData()
			// })
			this.currentPage = 1
			this.isLoadMore = false
			this.loadStatus = 'more'
			this.getListData()
			console.log("hasLogin", this.hasLogin)
		},
		methods: {
			getListData() {
				if (this.currentCityName == '全国') this.currentCityName = ''
				this.$api.doRequest('get', '/acquisitionInfo/selectAcquisitionPage', {
					searchKeyWord: this.searchKeyWord,
					city: this.currentCityName,
					compId: uni.getStorageSync('pcUserInfo').compId,
					loginPhone:uni.getStorageSync("userInfo").phone,
					
				}).then(res => {
					if (res.data.code == "200") {
						if (this.currentCityName == '') this.currentCityName = '全国'
						this.dataList = res.data.data
						this.isLoadMore = true
						this.loadStatus = 'nomore'
					}
				})
			},
			followClick(val) {
				console.log(val)
				let _url = ''
				if(val.follow=='已关注'){
					_url = '/acquisitionInfo/api/followNot'
				}else{
					_url = '/acquisitionInfo/api/follow'
				}
				this.$api.doRequest('post', _url, {
					id: val.id,
					commonId: uni.getStorageSync("userInfo").id,
					loginPhone:uni.getStorageSync("userInfo").phone,
					warehouseName:val.warehouseName,
				}).then(res => {
					if (res.data.code == "200") {
						if (val.follow == '未关注') {
							val.follow = '已关注'
							this.$api.msg('关注成功')
						} else {
							val.follow = '未关注'
							this.$api.msg('取消关注成功')
						}
						this.$forceUpdate()
					}
				})
				
				
				
				// this.$api.doRequest('post', '/acquisitionInfo/api/editFollowFlag', {
				// 	id: val.id,
				// 	commonId: uni.getStorageSync("userInfo").id,
				// }).then(res => {
				// 	if (res.data.code == "200") {
				// 		if (res.data.data == '1') {
				// 			val.followFlag = '1'
				// 			this.$api.msg('关注成功')
				// 		} else {
				// 			val.followFlag = '0'
				// 			this.$api.msg('取消关注成功')
				// 		}
				// 		this.$forceUpdate()
				// 	}
				// })

			},
			open(e) {
				console.log(e)
			},
			close(e) {
				console.log(e)
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			naviageToPage(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			alertBtn() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			cancelClick() {
				this.isShowAlert = false
			},
			searchChange(e) {
				console.log(e)
				this.getListData()
			}
		}
	}
</script>
<style lang='scss' scoped>
	page {
		background: #F5F6FA;
	}

	.wrap {
		background: #fff;
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		/* position: relative; */
		top: 20rpx;
	}

	.header {
		padding: 25rpx;
		background: #fff;
		border-radius: 0 0 10px 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		/deep/.u-content {
			padding-left: 180rpx;
		}
	}

	.location {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.locationwrap {
		font-size: 16px;
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		/* height: 100%; */
		left: 60rpx
	}

	.cangku {
		width: 16.5px;
		height: 16.5px;
		margin-right: 5px;
	}

	.search {}



	.rich-item {
		line-height: 46rpx;
	}

	.row1 {
		display: flex;
		justify-content: space-between;
	}

	.row4 {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			background: #22C572;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding: 10rpx 30rpx;
		}

		.time {
			color: #878C9C;
			margin: 20rpx 0;
		}
	}

	.icon-jt {
		margin-left: 20rpx;
	}

	.content1 {
		background: white;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;

		.row1 {
			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.follow {
				border: 1px solid #EEEEEE;
				font-weight: 400;
				color: #878C9C;
				padding: 9rpx 28rpx;
				border-radius: 40rpx;
			}
		}

		.row2 {
			.position {
				margin: 20rpx 0;
				font-size: 12px;
				color: #676E80;
				background: #F5F6FA;
				padding: 0rpx 20rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				border-radius: 50rpx;
			}
		}
	}
</style>