MiniScm/subpkg/selectRoomType/selectRoomType.vue

<template>
	<view class="page-container">
		<view class="room-type-item" v-for="item in roomTypeList">
			<view class="room-type-item-left">
				<u-image :src="item.src" width="200rpx" height="200rpx" radius="10"></u-image>
			</view>
			<view class="room-type-item-middle">
				<view class="room-type-item-middle-text">
					<text>{{roomTypeMap.get(item.roomType)}}</text>
				</view>
				<view class="room-type-item-middle-bottom">
					<text>{{item.breakfirst}} </text>
					<text>{{item.area}}㎡ </text>
					<!-- <text>剩余{{item.remaining}}间</text> -->
				</view>

			</view>
			<view class="room-type-item-right">
				<view class="room-type-item-right-text">
					<text>￥{{item.price}}</text>
				</view>
				<u-button text="选房" @click="gotoSelectRoom(item.roomType)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				roomTypeList: [{
					src: '/static/room_type.png',
					roomType: 1,
					star: 4,
					breakfirst: '双早',
					area: 10,
					remaining: 4,
					price: 699,
				}, {
					src: '/static/room_type.png',
					roomType: 2,
					star: 4,
					breakfirst: '双早',
					area: 10,
					remaining: 4,
					price: 699,
				}, {
					src: '/static/room_type.png',
					roomType: 3,
					star: 4,
					breakfirst: '双早',
					area: 10,
					remaining: 4,
					price: 699,
				}, {
					src: '/static/room_type.png',
					roomType: 4,
					star: 4,
					breakfirst: '双早',
					area: 10,
					remaining: 4,
					price: 699,
				}],
				roomTypeMap: {}
			};
		},
		computed: {
			...mapState('m_business', ['roomType']),
		},
		methods: {
			...mapMutations('m_business', ['updateRoomType']),
			gotoSelectRoom(roomType) {
				this.updateRoomType(roomType)
				uni.navigateTo({
					url: '/subpkg/selectRoom/selectRoom'
				});
			}
		},
		created() {
			this.roomTypeMap = new Map();
			this.roomTypeMap.set(1, "豪华大床房");
			this.roomTypeMap.set(2, "商务标间");
			this.roomTypeMap.set(3, "行政套房");
			this.roomTypeMap.set(4, "特价房");
		}
	}
</script>

<style lang="scss">
	.page-container {
		background-color: #F5F5F5;

		.room-type-item {
			border-radius: 30rpx;
			background-color: #FFFFFF;
			margin: 20rpx 20rpx;
			padding: 40rpx 20rpx;
			display: flex;

			.room-type-item-middle {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				width: 200rpx;

				.room-type-item-middle-text {
					font-size: 40rpx;
					font-weight: bold;
					color: #333333;
				}

				.room-type-item-middle-bottom {
					margin-top: 40rpx;
					font-size: 25rpx;

					text {
						margin-right: 20rpx;
						color: #666666
					}
				}
			}

			.room-type-item-right {
				width: 25%;
				margin-left: 20rpx;

				.room-type-item-right-text {
					margin-top: 30rpx;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 40rpx;
					font-weight: bold;
					color: #FF5C58
				}

				button {
					background-color: #F69B49;
					height: 60rpx;
					width: 100%;

					text {
						color: white
					}
				}

			}
		}
	}
</style>