提交demo
This commit is contained in:
浅念
@@ -0,0 +1,291 @@
|
||||
<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"
|
||||
@search="onSearch"
|
||||
@clear="onSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<uni-swipe-action-item
|
||||
v-for="(item, idx) in list"
|
||||
:key="item.id "
|
||||
:right-options="options1"
|
||||
@click="swipeClick($event, item)"
|
||||
>
|
||||
<view class="car-card" @click="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>
|
||||
</uni-swipe-action-item>
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from '@/api/apiT.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
text: '编辑',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#F56C6C'
|
||||
}
|
||||
}
|
||||
],
|
||||
keyword: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
loading: false,
|
||||
finished: false,
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
ym(dateStr) {
|
||||
return String(dateStr || '').slice(0, 7) // "2026-01"
|
||||
},
|
||||
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.scene = 'self';
|
||||
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 || item.car_id || item.product_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`
|
||||
},
|
||||
swipeClick(e,item){
|
||||
let {
|
||||
content
|
||||
} = e;
|
||||
if (content.text === '删除') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否删除',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
request({
|
||||
url:'common/usedcar/destroy',
|
||||
method:'post',
|
||||
data: {id:item.id}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
this.queryList()
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const id = item.id
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/publishedit?id=${id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.uni-swipe{
|
||||
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>
|
||||
Reference in New Issue
Block a user