347 lines
7.3 KiB
Vue
347 lines
7.3 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<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"
|
|||
|
|
@search="onSearch"
|
|||
|
|
@clear="onSearch"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 列表 -->
|
|||
|
|
<view class="list-wrap">
|
|||
|
|
<uni-swipe-action-item
|
|||
|
|
:threshold="0"
|
|||
|
|
:right-options="options1"
|
|||
|
|
@click="bindClick"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-for="(item, idx) in list"
|
|||
|
|
:key="item.id || item.car_id || item.product_id || idx"
|
|||
|
|
class="car-card"
|
|||
|
|
@tap="goDetail(item)"
|
|||
|
|
>
|
|||
|
|
<image class="thumb" src="/static/image/car.png" mode="aspectFill" />
|
|||
|
|
<view class="info">
|
|||
|
|
<view class="row row1">
|
|||
|
|
<text class="name u-line-1">{{ item.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="row row2">
|
|||
|
|
<view class="kv">
|
|||
|
|
<text class="k">车源地</text>
|
|||
|
|
<text class="v u-line-1">{{ item.source }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="kv">
|
|||
|
|
<text class="k">车身颜色</text>
|
|||
|
|
<text class="v u-line-1">{{ item.color }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="row row3">
|
|||
|
|
<view class="kv">
|
|||
|
|
<text class="k">上牌时间</text>
|
|||
|
|
<text class="v">{{ item.plate_time }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="kv">
|
|||
|
|
<text class="k">里程</text>
|
|||
|
|
<text class="v">{{ item.mileage }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-swipe-action-item>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<u-empty v-if="!loading && list.length === 0" text="暂无数据" mode="data" />
|
|||
|
|
|
|||
|
|
<!-- 底部加载状态 -->
|
|||
|
|
<view v-if="list.length > 0" class="loadmore">
|
|||
|
|
<u-loadmore :status="loadStatus" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { request } from '@/api/apiT.js'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 首页列表接口（你如果后端接口不是这个路径，改这里即可）
|
|||
|
|
* 兼容分页：page/per_page（或 page/page_size）
|
|||
|
|
*/
|
|||
|
|
const LIST_API = 'car/list'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
options1: [{
|
|||
|
|
text: '编辑',
|
|||
|
|
style: {
|
|||
|
|
backgroundColor: '#007aff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '删除',
|
|||
|
|
style: {
|
|||
|
|
backgroundColor: '#F56C6C'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
keyword: '',
|
|||
|
|
page: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
loading: false,
|
|||
|
|
finished: false,
|
|||
|
|
list: [
|
|||
|
|
{
|
|||
|
|
name:'奥迪Q3 2013款 35 TFSI 舒适型',
|
|||
|
|
source:'北京',
|
|||
|
|
color:'黑色',
|
|||
|
|
plate_time:'2013-07',
|
|||
|
|
mileage:'11万公里'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
loadStatus() {
|
|||
|
|
if (this.loading && this.page === 1) return 'loading'
|
|||
|
|
if (this.loading) return 'loading'
|
|||
|
|
if (this.finished) return 'nomore'
|
|||
|
|
return 'loadmore'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.fetchList(true)
|
|||
|
|
},
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
this.fetchList(true).finally(() => {
|
|||
|
|
uni.stopPullDownRefresh()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (!this.loading && !this.finished) {
|
|||
|
|
this.fetchList(false)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onSearch() {
|
|||
|
|
this.fetchList(true)
|
|||
|
|
},
|
|||
|
|
async fetchList(reset = false) {
|
|||
|
|
if (this.loading) return
|
|||
|
|
this.loading = true
|
|||
|
|
try {
|
|||
|
|
if (reset) {
|
|||
|
|
this.page = 1
|
|||
|
|
this.finished = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const res = await request({
|
|||
|
|
url: LIST_API,
|
|||
|
|
method: 'GET',
|
|||
|
|
data: {
|
|||
|
|
page: this.page,
|
|||
|
|
per_page: this.pageSize,
|
|||
|
|
keyword: this.keyword || ''
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const payload = (res && res.data) ? res.data : {}
|
|||
|
|
const data = payload.data || payload || {}
|
|||
|
|
|
|||
|
|
// 兼容不同后端结构：list / data / items / rows / records
|
|||
|
|
let rows =
|
|||
|
|
data.list ||
|
|||
|
|
data.data ||
|
|||
|
|
data.items ||
|
|||
|
|
data.rows ||
|
|||
|
|
data.records ||
|
|||
|
|
[]
|
|||
|
|
|
|||
|
|
if (!Array.isArray(rows)) {
|
|||
|
|
rows = []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (reset) this.list = []
|
|||
|
|
this.list = this.list.concat(rows)
|
|||
|
|
|
|||
|
|
// 兼容 total / last_page / has_more 等字段
|
|||
|
|
const hasMore =
|
|||
|
|
(data.has_more === true) ||
|
|||
|
|
(data.next_page_url ? true : false) ||
|
|||
|
|
(false)
|
|||
|
|
|
|||
|
|
if (rows.length < this.pageSize && !hasMore) {
|
|||
|
|
this.finished = true
|
|||
|
|
} else {
|
|||
|
|
this.page += 1
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('[home fetchList] error:', e)
|
|||
|
|
uni.showToast({ title: e?.message || '加载失败', icon: 'none' })
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goDetail(item) {
|
|||
|
|
// 你后续详情页如果要接 id，这里按后端字段改一下即可
|
|||
|
|
const id = item.id || item.car_id || item.product_id || ''
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/index/detils?id=${encodeURIComponent(id)}`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
formatPlate(v) {
|
|||
|
|
if (!v || v === '-') return '-'
|
|||
|
|
// 允许：时间戳 / yyyy-mm-dd / yyyy/mm/dd / yyyyMMdd
|
|||
|
|
let d
|
|||
|
|
if (typeof v === 'number' || /^\d+$/.test(String(v))) {
|
|||
|
|
const n = Number(v)
|
|||
|
|
// 秒/毫秒都兼容
|
|||
|
|
d = new Date(n < 1e12 ? n * 1000 : n)
|
|||
|
|
} else {
|
|||
|
|
const s = String(v)
|
|||
|
|
const s2 = s.replace(/\//g, '-').trim()
|
|||
|
|
if (/^\d{8}$/.test(s2)) {
|
|||
|
|
const y = s2.slice(0, 4)
|
|||
|
|
const m = s2.slice(4, 6)
|
|||
|
|
const dd = s2.slice(6, 8)
|
|||
|
|
d = new Date(`${y}-${m}-${dd}T00:00:00`)
|
|||
|
|
} else {
|
|||
|
|
d = new Date(s2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (isNaN(d.getTime())) return String(v)
|
|||
|
|
const y = d.getFullYear()
|
|||
|
|
const m = String(d.getMonth() + 1).padStart(2, '0')
|
|||
|
|
return `${y}-${m}`
|
|||
|
|
},
|
|||
|
|
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%;
|
|||
|
|
}
|
|||
|
|
.head-search {
|
|||
|
|
background: rgba(255, 255, 255, 0.9);
|
|||
|
|
// border-radius: 18rpx;
|
|||
|
|
padding: 6rpx;
|
|||
|
|
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>
|