nk-shop2.0/pages/nongKe/cloud_entrepot/index.vue

<template>
	<view class="cloud_entrepot" :style="{'min-height': winHeight + 'px'}">
		<view class="head-wrapper">
			<u--image style="position: absolute;" :showLoading="true" src="../../../static/images/tabbar/YCBG.png"
				width="100vw" height="560rpx"></u--image>

			<u--image :showLoading="true" src="../../../static/images/tabbar/YCGG.png" width="100vw"
				height="550rpx"></u--image>

		</view>
		<view class="town-title">{{town}}里海云仓</view>
		<view class="body-wrapper">
			<block v-for="(item,index) in cloudList" :key="index">
				<navigator class="item"
					:url="`/pages/nongKe/goods_list/index?cate_id=${item.category_id}&street=${street_code}&name=${item.category_name}`"
					:style="{'background-image': `url(${item.background})`}">
					<text class="item-title">{{item.category_name}}云仓服务</text>
					<text style="color: #3274F9;">{{item.description}}</text>
					<view class="chakan-btn">查看</view>
				</navigator>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		getCityCloundShop
	} from '@/api/api.js'
	import {
		Toast
	} from '@/libs/uniApi';
	export default {
		data() {
			let src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13';
			return {
				winHeight: 0,
				cloudList: [],
				street_code: '',
				town: ''
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: (res) => {
					this.winHeight = res.windowHeight
				},
			});
			this.street_code = e.street
			this.town = e.town
			this.getCloundShop()
		},
		onShow() {},
		onPullDownRefresh() {
			this.getCloundShop()
			uni.stopPullDownRefresh()
		},
		methods: {
			async getCloundShop() {
				const {
					data
				} = await getCityCloundShop({
					street_code: this.street_code
				})
				this.cloudList = data
				data.length < 1 ? Toast("暂无云仓") : '';
			}
		}
	}
</script>

<style lang="scss">
	.cloud_entrepot {
		// background: url("../../../static/images/tabbar/YCBG.png") no-repeat;
		// background-size: cover;
		// padding-bottom: 92.98rpx;
		background-color: #E3ECFE;
	}

	.head-wrapper {
		height: 550rpx;
		// width: 100vw;
		// background: url("../../../static/images/tabbar/YCBG.png") no-repeat;
		background-size: cover;
		margin-bottom: 49.12rpx;
	}

	.town-title {
		margin: 0 auto;
		width: 100%;
		text-align: center;
		font-size: 50.88rpx;
		color: #3274F9;
		font-weight: bold;
		font-style: italic;
		margin-bottom: 28.07rpx;

		&::after {
			content: '';
			display: inline-block;
			width: 66.67rpx;
			height: 31.58rpx;
			background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/you.png") no-repeat;
			background-size: cover;
			margin-left: 24.56rpx;
		}

		&::before {
			content: '';
			display: inline-block;
			width: 66.67rpx;
			height: 31.58rpx;
			background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/zuo.png") no-repeat;
			background-size: cover;
			margin-right: 24.56rpx;
		}
	}

	.body-wrapper {
		width: 694.74rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;

		.item {
			width: 336.84rpx;
			height: 100%;
			padding: 24.56rpx 28.07rpx;
			margin-bottom: 21.05rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;

			text {
				display: block;
				font-size: 24.56rpx;
				color: #999;
				margin-bottom: 14.04rpx;
			}

			.item-title {
				font-size: 31.58rpx;
				color: #333;
			}

			.chakan-btn {
				width: 114.04rpx;
				height: 49.12rpx;
				font-size: 28.07rpx;
				text-align: center;
				line-height: 49.12rpx;
				color: #3274F9;
				margin-top: auto;
				// background: linear-gradient(90deg, #FE5300 0%, #F84221 100%);
				border: 1px solid #3274F9;
				border-radius: 50px;
			}
		}
	}
</style>