Smart-Farm/uniapp/uni-app/land/pages/massif.vue

<template>
	<view class="land-massif" v-if="isLoad">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
			:backgroundColor="scrollTop < 20 ?``:primaryColor" leftIcon="icon-left" title="服务特权">
		</uni-nav-bar>

		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<image mode="aspectFill" lazy-load class="common-bg abs" :style="{height: `${configInfo.navBarHeight + 104}px`}"
			src="https://lbqny.migugu.com/admin/farm/bg-cash.png"></image>
		<view class="common-top-img"></view>
		<view class="common-top-info rel">
			<view class="top-box abs">
				<view @tap.stop="goDetail(index)"
					class="flex-warp fill-base ml-md mr-md pd-lg fill-base box-shadow radius-24">
					<image mode="aspectFill" lazy-load class="avatar big box-shadow-mini radius-34"
						:src="detail.farmer_info.cover">
					</image>
					<view class="flex-1 ml-lg">
						<view class="f-title c-title text-bold ellipsis" style="max-width: 470rpx;">
							{{detail.farmer_info.title}}
						</view>
						<view class="flex-between mt-md max-446">
							<view class="check-btn flex-center fill-body pl-sm pr-sm radius-10"
								:style="{color:primaryColor}">
								<view class="max-446 ellipsis">{{detail.massif[massifInd].title}}</view>
							</view>
							<view></view>
						</view>
					</view>
				</view>

			</view>
		</view>


		<view class="mt-md ml-md mr-md pt-sm pl-lg pr-lg pb-lg fill-base c-title box-shadow radius-24">
			<view @tap.stop="$util.goUrl({url:`/land/pages/massif`})" class="common-nav-title flex-center c-title">
				<view class="f-title text-bold flex-1">服务特点</view>
			</view>
			<scroll-view scroll-x class='cycle-list' :scroll-with-animation="true">
				<view @tap.stop="toChangeItem('massifInd',index)"
					class="cycle-item flex-center flex-column text-center pt-lg pb-lg pl-md pr-md radius-16"
					:class="[{'ml-md':index!= 0},{'cur':massifInd == index}]"
					:style="{background: massifInd == index ? primaryColor: '#f5f5f5'}"
					v-for="(item,index) in detail.massif" :key="index">
					<view class="f-title c-title ellipsis">{{item.title}}</view>
					<view class="flex-center f-caption c-caption mt-sm mb-sm">
						<view class="flex-center c-warning">¥<view class="f-title">{{item.price}}</view>
						</view>/天
					</view>
					<view class="f-caption c-caption ellipsis-2">
						{{item.desc}}
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="mt-md ml-md mr-md pt-sm pb-lg fill-base c-title box-shadow radius-24">
			<view @tap.stop="$util.goUrl({url:`/land/pages/massif`})"
				class="common-nav-title flex-center pl-lg c-title">
				<view class="f-title text-bold flex-1">服务类型</view>
			</view>
			<view class="flex-warp mt-md">
				<view @tap.stop="toMenu(index)" class="menu-item flex-center flex-column"
					v-for="(item,index) in detail.massif[massifInd].service" :key="index">
					<image mode="aspectFill" lazy-load class="menu-img" :src="item.cover">
					</image>
					<view class="f-paragraph c-title mt-sm max-200 ellipsis">{{item.title}}</view>
					<view class="f-caption c-caption max-200 ellipsis">{{item.sub_title}}</view>
				</view>
				<view class="status-line abs"></view>
			</view>
		</view>

		<view class="space-footer"></view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				scrollTop: 0,
				detail: {},
				massifInd: 0
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad() {
			let {
				detail,
				massifInd
			} = this.$util.getPage(-1)
			this.detail = detail
			this.massifInd = massifInd
			this.isLoad = true
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex() {},
			initRefresh() {
				this.initIndex()
			},
			toChangeItem(key, index) {
				this[key] = index
			}
		}
	}
</script>


<style lang="scss">
	.land-massif {
		.check-btn {
			min-width: 88rpx;
			height: 36rpx;
			font-size: 20rpx;
		}

		.cycle-list {
			white-space: nowrap;
			width: 100%;

			.cycle-item {
				display: inline-block;
				vertical-align: top;
				width: 240rpx;
				min-height: 100rpx;
				background: #f5f5f5;

				.ellipsis-2 {
					white-space: normal;
					height: 72rpx;
					line-height: 36rpx;
				}
			}

			.cycle-item.cur {

				.c-title,
				.c-caption,
				.c-warning {
					color: #fff;
				}
			}
		}

		.menu-item {
			width: 33.33%;

			.menu-img {
				width: 110rpx;
				height: 110rpx;
			}
		}
	}
</style>