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.followFlag=='0'?'+关注':'已关注'}}</view>
			</view>
			<view class="row2">
				<view class="time">{{item.createDate}}</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='' @click='naviageToPage("/pages/grain_pulse/position/position")'>
					<!-- <image class='location' src="../../../static/img/liangmai/icon_ditu@2x.png" mode=""></image> -->
					{{item.warehousePrivate}}{{item.warehouseCity}}{{item.warehouseArea}}{{item.detailedAddress}}
				</view>
				<u-button
					@click='naviageToPage("/pages/user/depotAcquisition/grainDeliveryRegistration?itemValue="+JSON.stringify(item))'>
					我要送粮
				</u-button>
			</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) {debugger
			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()
			})
			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,
					pageSize: this.pageSize,
					currentPage: this.currentPage
				}).then(res => {
					if (res.data.code == "200") {
						if (this.currentCityName == '') this.currentCityName = '全国'
						this.dataList = res.data.data.records
						this.isLoadMore = true
						this.loadStatus = 'nomore'
					}
				})
			},
			followClick(val) {
				this.$api.doRequest('post', '/acquisitionInfo/api/editFollowFlag', {
					id: val.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)
			}
		}
	}
</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;
	}
	.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{
			.time{
color: #878C9C;
				margin: 20rpx 0;
			}
			
		}
	}
</style>