ddcWechat/pages/renttab/index.vue

<template>
	<view class="bg" :style="colorStyle">
		<headerSerch v-if="headerData" :dataConfig="headerData"></headerSerch>
		<view class="navTitle">
			<view class="left_tab" @click="navTabIndex==0">租车</view>
			<view class="right_tab">
				<tabNav v-if="tabNavData" :dataConfig="tabNavData" @bindSortId="bindSortId"></tabNav>
			</view>
		</view>
		<view v-if="navTabIndex==0">
			<swiperBg v-if="swiperBgData" :dataConfig="swiperBgData"></swiperBg>
		</view>
		<view v-if="navTabIndex==1">

		</view>
		<view class="acea-row item row-between row-middle">
			<view class="acea-row left">
				<image class="icon" src="../../static/images/homeLeftIcon.png" mode="scaleToFill"></image>
				<view>
					火热租车
				</view>
			</view>
			<!-- <view class="right">
				更多>
			</view> -->
		</view>
		<view class="list acea-row row-between ">
			<view class="ls" v-for="(item,ind) in carList" :key='ind' @click="navTo(item)">
				<image class="img" :src="item.image" mode="scaleToFill"></image>
				<view class="content">
					<view class="line1 title">
						{{item.title}}
					</view>
					<view class="info line1">
						{{item.info}}
					</view>
					<view class="acea-row row-middle">
						<text class="price">
							￥{{+item.price}}
						</text>
						<text class="tip">
							/月
						</text>
					</view>
				</view>
			</view>
		</view>
		<pageFoot></pageFoot>
	</view>
</template>

<script>
	import pageFoot from '@/components/pageFooter/index.vue';
	import headerSerch from '../index/diy/components/headerSerch.vue';
	import swiperBg from '../index/diy/components/swiperBg';
	import tabNav from '../index/diy/components/tabNav';
	import colors from '@/mixins/color';
	import {
		getDiy
	} from '@/api/api.js';
	import {
		getCarList
	} from '@/api/rent.js';
	export default {
		data() {
			return {
				headerData: '', //搜索栏设置数据
				tabNavData: '', //分类设置数据
				swiperBgData: '', //轮播图设置数据
				navTabIndex: 0, //0租车1为商品
				carList: [],
				page: 1,
				limit: 10,
				loading: 'more', //加载状态more/loding/nomore
			}
		},
		components: {
			pageFoot,
			headerSerch,
			tabNav,
			swiperBg
		},
		mixins: [colors],
		onShow() {
			uni.hideTabBar()

			this.getSearch();
			this.getCarList();
		},
		onReachBottom() {
			this.getCarList();
		},
		methods: {
			navTo(item){
				uni.navigateTo({
					url: `/pages/rent/carDetail?id=${item.id}`
				});
			},
			bindSortId(data) {
				console.log(data)
			},
			// 获取车辆列表
			getCarList() {
				const that = this;
				if (that.loading == 'loding' || that.loading == 'nomore') {
					return
				}
				that.loading = 'loding'
				getCarList({
					page: that.page,
					limit: that.limit,
				}).then((res) => {
					that.carList = that.carList.concat(res.data.list);
					that.page++
					if (res.data.list.length == that.limit) {
						that.loading = 'more'
					} else {
						that.loading = 'nomore'
					}
				}).catch((res) => {
					console.log(res);
					that.loading = 'more'
				})
			},
			getSearch() {
				const that = this;
				getDiy(0).then(res => {
					let lastArr = that.objToArr(res.data.value);
					for (var i = 0; i < lastArr.length; i++) {
						if (lastArr[i].name == 'headerSerch') {
							that.headerData = lastArr[i]
						}
						if (lastArr[i].name == 'tabNav') {
							that.tabNavData = lastArr[i]
						}
						if (lastArr[i].name == 'swiperBg') {
							that.swiperBgData = lastArr[i]
						}
					}
				})
			},
			// 对象转数组
			objToArr(data) {
				let obj = Object.keys(data);
				let m = obj.map(key => data[key]);
				return m;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.navTitle {
		display: flex;
		align-items: center;
		background-color: rgb(31, 33, 52);
		line-height: 0;
		padding-left: 30rpx;
		padding-bottom: 20rpx;

		.left_tab {
			background-image: url('../../static/images/hometext.png');
			background-size: 100%;
			width: 120rpx;
			text-align: center;
			color: #75EFFA;
			line-height: 1;
			font-size: 34rpx;
			font-weight: bold;
			padding: 10rpx 0;
		}

		.right_tab {
			width: 600rpx;
		}
	}

	.bg {
		background-color: rgb(31, 33, 52);
	}

	.item {
		line-height: 1;
		padding: 30rpx 20rpx;

		.left {
			font-size: $uni-font-size-lg;
			color: #FFFFFF;

			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
	
	.right {
			color: #999999;
			font-size: $uni-font-size-sm;
		}
	}

	.list {
		padding: 0rpx 20rpx;
		padding-bottom: 128rpx;

		.ls {
			width: 344rpx;
			border-radius: 10rpx;
			background-color: #161726;
			color: #989898;
			margin-bottom: 20rpx;

			.content {
				padding: 20rpx 10rpx;

				.title {
					font-size: $uni-font-size-base;
					color: #FFFFFF;
					font-weight: bold;
				}

				.info {
					padding: 10rpx 0;
				}

				.price {
					font-weight: bold;
					color: #75EFFA;
					font-size: 36rpx;
				}

				.tip {
					color: #FFFFFF;
					font-size: $uni-font-size-sm;
				}
			}

			.img {
				width: 344rpx;
				height: 344rpx;
				border-radius: 10rpx;
				background-color: #FFFFFF;
			}
		}
	}
</style>