smart-tourism/smart-ui-app/pages/index/index.vue

<template>
	<view class="page">
		<view class="top"><image src="../../static/dt.jpg" mode="widthFix"></image></view>
		<view class="flex">
			<view class="f">
				<view class="ic" style="background-color: #FF5722;"><text class="icon">&#xe60e;</text></view>
				<view class="">50+</view>
				<view>农机农技</view>
			</view>
			<view class="f">
				<view class="ic" style="background-color: #4CAF50;"><text class="icon">&#xe604;</text></view>
				<view class="">2000+</view>
				<view>提供服务</view>
			</view>
		</view>
		<u-divider>最新服务</u-divider>
		<view class="list">
			<view class="goods_item" v-for="(item, index) in goods_list" :key="index" @click="detail(item)">
				<image :src="ip + item.pic" mode="aspectFill"></image>
				<view class="title omit">
					<text>{{ item.title }}</text>
				</view>
				<view class="price">
					<text>¥{{ item.price }}</text>
					<text class="day">/天</text>
					<text class="icon" v-show="item.mType == 0">&#xe61e;</text>
					<text class="icon" v-show="item.mType == 1">&#xe61c;</text>
				</view>
			</view>
			<view class="clear"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			goods_list: []
		};
	},
	onLoad(e) {
		this.init();
	},
	methods: {
		init() {
			this.$http.request({
				url: this.$http.urls.home,
				success: res => {
					this.goods_list = res.data.data.goods_list;
				}
			});
			//let user={id:35,nickName:'微信用户',openId:'oD2_E4sMkz3zF_0xjhX_C4vaI_xo',sex:0,phone:'13097850972',token:'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6Ijc2NTVmOGM0LWY3YTAtNGU0Mi04MDU3LTdkNTA4NGY5NjE2NyJ9.f6xqQVYkm6zlfhZFbCOyj1-iOZtpkHJbUyCB2MNtTW-jgz1_9zcKKOdnw9uX_WJ_2VNrgOn6R5hmQAIm79YIZw'}
			// uni.setStorageSync('user',user);
		},
		click(typeId) {
			if (typeId === 0) {
				uni.navigateTo({
					url: '../product/product'
				});
			}
			if (typeId === 1) {
				uni.navigateTo({ url: '../service/list' });
			}
			if (typeId === 2) {
				uni.navigateTo({ url: '../park/cemetery/cemetery' });
			}
		},
		detail(item) {
			uni.navigateTo({ url: '/pages/goods/detail?id=' + item.id });
		}
	}
};
</script>

<style lang="scss">
.page {
	padding: 15px;
}
.top {
	image {
		width: 100%;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
}
.flex {
	text-align: center;
	.f {
		padding: 15px 12px 15px 12px;
		border-radius: 5px;
		margin: 10px;
		font-size: 15px;
		text-align: left;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.ic {
			float: left;
			background-color: $theme-color;
			width: 45px;
			height: 45px;
			border-radius: 50%;
			text-align: center;
			color: white;
			line-height: 45px;
			margin-right: 5px;
			.icon {
				font-size: 30px;
			}
		}
	}
}
.list {
	.goods_item {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
}
</style>