used-car-h5/pages/index/index.vue

<template>
	<view class="page">
		
		
		<!-- 列表 -->
		<z-paging  ref="paging"  v-model="list" @query="queryList" empty-view-text="暂无数据！">
			<!-- <uni-nav-bar leftText=" " :fixed="true" :border="false" color="#fff" backgroundColor="#3F435B" :statusBar="true" title="首页"></uni-nav-bar> -->
			<!-- 顶部：标题 + 搜索（不想要搜索可直接删除这一块） -->
			<view class="page-head">
				<view class="head-search">
					<u-search
					  v-model="keyword"
					  placeholder="请输入关键词"
					  :show-action="false"
					  shape="round"
					  @change="onKeywordChange"
					  @search="onSearch"
					  @clear="onSearch"
					/>
				</view>
			</view>
			<view class="list-wrap">
				<view
					v-for="(item, idx) in list"
					:key="item.id "
					class="car-card"
					@tap="goDetail(item)"
				>
					<image class="thumb" :src="item.images_pull[0]" mode="aspectFill" />
					<view class="info">
						<view class="row row1">
							<text class="name u-line-1">{{ item.product_name }}</text>
						</view>

						<view class="row row2">
							<view class="kv">
								<text class="k">车源地</text>
								<text class="v u-line-1">{{ item.source_place }}</text>
							</view>
							<view class="kv">
								<text class="k">车身颜色</text>
								<text class="v u-line-1">{{ item.body_color }}</text>
							</view>
						</view>

						<view class="row row3">
							<view class="kv">
								<text class="k">上牌时间</text>
								<text class="v">{{ ym(item.plate_time)  }}</text>
							</view>
							<view class="kv">
								<text class="k">里程</text>
								<text class="v">{{ item.mileage }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import { request } from '@/api/apiT.js'

	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				pageSize: 10,
				loading: false,
				finished: false,
				list: []
			}
		},
		onLoad() {
			
		},
		methods: {
			ym(dateStr) {
			  return String(dateStr || '').slice(0, 7) // "2026-01"
			},
			onKeywordChange(val) {
			    // val 是输入值（uView 通常会传）
			    this.keyword = val
			
			    // 防抖：300ms 内持续输入只触发一次
			    if (this._kwTimer) clearTimeout(this._kwTimer)
			    this._kwTimer = setTimeout(() => {
			      this.onSearch()
			    }, 300)
			},
			onSearch() {
				this.queryList(this.page,this.pageSize)
			},
			queryList(pageNo, pageSize, from) {
				this.loading = true;
				var that = this;
				const params = {
					current:pageNo,
					status:1,
					size:10
				};
				params.keyword = this.keyword;
				request({
					url:'common/usedcar/list',
					method:'get',
					data: params
				}).then(res => {
					if(res.data.code ==200){
						var datas = res.data.data.records;
						this.$refs.paging.complete(datas);
					}else{
					} 
					uni.stopPullDownRefresh();
					//
				})
			},
			goDetail(item) {
				// 你后续详情页如果要接 id，这里按后端字段改一下即可
				const id = item.id
				uni.navigateTo({
					url: `/pages/index/detils?id=${id}`
				})
			},
			formatMileage(v) {
				if (v === '-' || v === undefined || v === null || String(v).trim() === '') return '-'
				const n = Number(v)
				if (isNaN(n)) return String(v)
				// < 10000：直接显示；>= 10000：转万
				if (n >= 10000) {
					return `${(n / 10000).toFixed(1)}万 km`
				}
				return `${Math.round(n)} km`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #f4f6f8;
	}

	.page-head {
		position: fixed;
		width: 100%;
		bottom: 50px;
		z-index: 99;
		// padding: 28rpx 24rpx 18rpx;
		// background: linear-gradient(180deg, rgba(255, 151, 47, 0.22) 0%, rgba(255, 151, 47, 0.06) 55%, #f4f6f8 100%);
	}

	.head-search {
		background: rgba(255, 255, 255, 1);
		border-radius: 18rpx;
		padding: 20rpx 10px;
		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
	}

	.list-wrap {
		padding: 18rpx 24rpx 40rpx;
	}

	.car-card {
		display: flex;
		align-items: stretch;
		padding: 18rpx;
		border-radius: 18rpx;
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 18rpx;
	}

	.thumb {
		width: 190rpx;
		height: 140rpx;
		border-radius: 14rpx;
		background: #eef2f7;
		flex-shrink: 0;
	}

	.info {
		flex: 1;
		margin-left: 18rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.row {
		display: flex;
		align-items: center;
	}

	.row1 {
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 30rpx;
		font-weight: 700;
		color: #111827;
		max-width: 420rpx;
	}

	.tag {
		font-size: 22rpx;
		padding: 6rpx 12rpx;
		border-radius: 999rpx;
		background: rgba(255, 151, 47, 0.14);
		color: #b45309;
		flex-shrink: 0;
	}

	.row2,
	.row3 {
		justify-content: space-between;
		gap: 16rpx;
	}

	.kv {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: baseline;
	}

	.k {
		font-size: 22rpx;
		color: #6b7280;
		margin-right: 10rpx;
		flex-shrink: 0;
	}

	.v {
		font-size: 24rpx;
		color: #374151;
		font-weight: 600;
		min-width: 0;
	}

	.loadmore {
		padding: 18rpx 0 6rpx;
	}
</style>