hwnc/pages/land/land.vue

<template>
	<view :class="[AppTheme]" class="all_box container">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="土地租赁" :titleStyle="{color:'#ffffff'}" :bgColor="primary" :autoBack="false" :fixed="true"
			:placeholder="true" :height="45">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-sticky :offset-top="offset" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offset-top="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="head_fixation">
					<view class="stitching_background bg-primary">
						<view class="address_information border-primary">农场土地列表</view>
						<view class="floating_mark"></view>
					</view>
					<view class="data_display">
						<u-tabs ref="uTabs" :list="ubseclist" :activeStyle="{
				        color: primary,
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#606266',
				        transform: 'scale(1)'
				    }" font-size="28rpx" lineWidth="60" :scrollable="false" :lineColor="primary" :current="current"
							@click="casesort">
						</u-tabs>
					</view>
				</view>
			</u-sticky>
			<view style="padding-bottom: 120rpx;padding-top: 15rpx;">
				<view @click="$until.toUrl('/pagesD/pages/product/product?id=' + item2.id)"
					open-type="navigate" hover-class="none" class="base_item" v-for="(item2, index2) in farmlist"
					:key="index2">
					<u--image :src="item2.pic || default_img" radius="8" width="100%" height="26vh"></u--image>
					<view class="case_titleblock">
						<view class="case_title">{{ item2.name }}</view>
					</view>
					<!-- <view class="case_title_sm">{{ item2.soil_desc }}</view> -->
					<view class="price_selection">
						<view class="commodity_price">
							价格:
							<text class="commodity_price_red text-neutral">￥{{ item2.price }}</text>
						</view>
						<view class="choose_land bg-primary">选择土地</view>
					</view>
				</view>
				<u-loadmore :line="true" :status="status" />
				<admyself :opshow="true"></admyself>
			</view>
			<!-- 分享 -->
			<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
			<tabbar :primary="primary"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue';
	import Landapi from '@/api/land/index.js';
	export default {
		components: {
			tabbar
		},
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			const img = siteinfo.root_img + '/static/app/imgs/default-goods.png';
			return {
				default_img: img,
				offset: 45,
				primary: this.$theme.primary,
				status: 'loadmore',
				sortorder: 1,
				promptstatement: '提示语句',
				farmlist: [],
				//顶部距离
				scrollTop: 0,
				customstyle: {
					background: '#F4F6F8'
				},
				nowindex: 1,
				nomorelist: false,
				ubseclist: [{
						name: '综合排序'
					},
					{
						name: '销量优先'
					},
					{
						name: '距离优先'
					},
					{
						name: '人气优先'
					}
				],
				current: 0,
				settingFile: getApp().globalData.siteinfo,
				sharedata: null,
			};
		},
		onShareAppMessage(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		onShareTimeline(res) {
			let that = this
			return {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			console.log("下拉刷新了")
			this.getlandlist(this.current + 1, 1);
		},
		onReachBottom() {
			console.log("上拉加载")
		},
		onLoad(options) {
			let that = this;
			that.$bindid.getbindid(options, that.$store);
			that.getlandlist(1, 1);
			that.$init_config(2, function(res) {
				if (that.$config) {
					that.sharedata = that.$config.sharedata
				}
			})
		},
		onShow: function() {
			let that = this;
			that.$init_config();
			if (that.primary == '' || that.primary != that.$theme.primary) {
				that.primary = that.$theme.primary;
			}
			this.getlandlist(1, 1);
			that.offset = that.offset + uni.$u.sys().statusBarHeight
		},
		methods: {
			// 切换排序视图
			casesort(item) {
				var that = this;
				var index = item.index
				that.current = index;
				if (index !== null && index !== undefined) {
					that.sortorder = index + 1;
					that.nomorelist = false
					this.nowindex = 1;
					if (that.sortorder === 1) {
						//根据综合进行切换数据集操作
						that.getlandlistcase(1, that.nowindex);
					} else if (that.sortorder === 2) {
						//根据销量进行切换数据集操作
						that.getlandlistcase(2, that.nowindex);
					} else if (that.sortorder === 3) {
						//根据距离进行切换数据集操作
						that.getlandlistcase(3, that.nowindex);
					} else if (that.sortorder === 4) {
						//根据人气进行切换数据集操作
						that.getlandlistcase(4, that.nowindex);
					}
				}
			},
			scrolltolower() {

			},
			// 请求land土地信息
			getlandlist(type, p) {
				let data = {
					type: type,
					p: p
				};
				if (!this.nomorelist) {
					this.status = 'loading'
					Landapi.landlist(data).then(res => {
						if (res.status == 1) {
							this.farmlist = []
							if (res.data !== null && res.data !== undefined && res.data.length > 0) {
								// 获取服务套餐详情集合
								res.data.forEach(item => {
									this.farmlist.push(item);
								});
								this.nowindex = p;
								if (res.data.length == 10) {
									this.status = "loadmore"
								} else {
									this.status = "nomore"
								}

							}
						} else {
							this.status = "nomore"
							this.nomorelist = true;
						}
						uni.stopPullDownRefresh()
					});
				}
			},
			// 请求land土地信息
			getlandlistcase(type, p) {
				let data = {
					type: type,
					p: p
				};
				if (!this.nomorelist) {
					Landapi.landlist(data).then(res => {
						if (res.status == 1) {
							if (res.data !== null && res.data !== undefined && res.data.length > 0) {
								// 获取服务套餐详情集合
								this.farmlist = res.data;
								this.nowindex = p;
								if (res.data.length == 10) {
									this.status = "loadmore"
								} else {
									this.status = "nomore"
								}
							}
						} else {
							this.status = "nomore"
							this.nomorelist = true;
						}
					});
				}
			}
		},
		// #ifndef MP-WEIXIN
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {}
		// #endif
	};
</script>

<style lang="scss" scoped>
	.all_box {
		min-height: calc(100vh - 50rpx);
	}

	.nomorelist {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 40rpx;
	}

	.pading_bss {
		height: 140rpx;
		width: 100%;
	}

	.container {
		position: relative;
	}

	.head_fixation {
		width: 100%;
		z-index: 10;
	}

	.stitching_background {
		height: 75rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.address_information {
		font-size: 32rpx;
		color: #ffffff;
		text-indent: 1em;
		width: 100%;
	}

	.floating_mark {
		background-color: #ffffff;
		height: 8rpx;
		width: 50rpx;
		margin-left: 85rpx;
	}

	.swiper-box {
		height: calc(100vh + 30px);
		overflow-y: auto;
	}

	.view_layer {
		height: 100%;
		overflow-y: auto;
		padding-top: 15rpx;
	}

	.data_display {
		width: 100%;
		background-color: #ffffff;
		font-variant: common-ligatures;
		height: 44px;
	}

	.sort_item_selt {
		color: #56ab2f;
	}

	.base_list {
		width: 100%;
		padding-top: 5rpx;
	}

	.base_item {
		padding-bottom: 30rpx;
		border-radius: 30rpx !important;
		background: #ffffff;
		box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.2);
		margin: 0rpx 20rpx 30rpx 20rpx;
		
		u--image{
			height: 26vh;
		}
	}

	.case_titleblock {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
	}

	.case_title {
		font-size: 30rpx;
		height: 55rpx;
		line-height: 55rpx;
		color: #000;
		font-weight: 550;
	}

	.activity_target {
		color: #ffffff;
		font-size: 28rpx;
		background-color: #ff8d0a;
		margin-left: 10rpx;
		padding: 5rpx 8.5rpx;
		border-radius: 10rpx 0 10rpx 0;
	}

	.case_title_sm {
		font-size: 26rpx;
		color: #999;
		padding: 0 20rpx;
		margin: 10rpx 0;
	}

	.price_selection {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
	}

	.commodity_price {
		font-size: 28rpx;
		color: #333;
	}

	.commodity_price_red {
		font-weight: 800;
		margin: 0 10rpx;
	}

	.choose_land {
		font-size: 26rpx;
		color: #ffffff;
		border-radius: 30rpx;
		padding: 15rpx 25rpx;
	}

	.load_window {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 160rpx;
		height: 100rpx;
		flex-wrap: wrap;
		background-color: rgba($color: #000000, $alpha: 0.7);
	}

	.promptstatement {
		width: 100%;
		font-size: 25rpx;
		color: #ffffff;
		text-align: center;
	}

	.aannajn {
		width: 100%;
	}
</style>