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

<template>
	<view class="page">
		<!-- 列表 -->
		<z-paging
			ref="paging"
			v-model="list"
			@query="queryList"
			empty-view-text="暂无发布数据！"
		>
			<!-- 顶部：标题 + 搜索 -->
			<template #top>
				<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 class="statussearch" @click="show=true">
							<text class="year-text">{{status_name || '状态'}}</text>
							<u-icon name="arrow-down" size="14" color="#999"></u-icon>
						</view>
					</view>
					<u-picker
						:show="show"
						:columns="columns"
						keyName="label"
						@confirm="onstatus"
						@cancel="show = false"
					></u-picker>
				</view>
			</template>

			<!-- 列表内容 -->
			<view class="list-wrap">
				<uni-swipe-action-item
					v-for="item in list"
					:key="item.id"
					:right-options="options1"
				>
					<CarCardPro
						:item="item"
						:ismy="true"
						@pdfchange="onSearch"
						@restchange="onSearch"
					/>
				</uni-swipe-action-item>
			</view>
		</z-paging>
	</view>
</template>

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

	export default {
		components: {
			CarCardPro
		},
		data() {
			return {
				show: false,
				status_id: '',
				status_name: '',
				keyword: '',
				page: 1,
				pageSize: 10,
				list: [],
				columns: [
					{ label: '全部', id: '' },
					{ label: '正常', id: 1 },
					{ label: '已售出', id: 2 },
					{ label: '已归档', id: 3 }
				],
				options1: [
					{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		onLoad(options) {
			// 接收从其他页面传来的参数
			if (options.keyword) {
				this.keyword = options.keyword
			}
			// 首次加载数据
			this.$nextTick(() => {
				this.onSearch()
			})
		},
		methods: {
			// 获取列表数据
			queryList(pageNo, pageSize) {
				// 调用专业发布列表接口
				request({
					url: 'common/usedcardetail/list',
					method: 'get',
					data: {
						scene: 'self',      // 只看自己的发布
						page: pageNo,
						limit: pageSize,
						keyword: this.keyword || '',
						status: this.status_id || ''
					}
				}).then(res => {
					if (res.data.code === 200) {
						const data = res.data.data || {}
						this.$refs.paging.complete(data.records || [])
					} else {
						this.$refs.paging.complete([])
						uni.showToast({
							title: res.data.message || '获取数据失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.error('[list error]', err)
					this.$refs.paging.complete([])
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				})
			},

			// 搜索
			onSearch() {
				this.$refs.paging.reload()
			},

			// 关键词变化（防抖）
			onKeywordChange() {
				// 防抖处理
				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.onSearch()
				}, 500)
			},

			// 状态筛选
			onstatus(e) {
				const item = e.value[0]
				this.status_id = item.id
				this.status_name = item.label
				this.show = false
				this.onSearch()
			},

			// 滑动操作
			swipeClick(e, item) {
				if (e.content.text === '编辑') {
					// 跳转到供应商发布编辑页面
					uni.navigateTo({
						url: '/pages/index/publisheditPro?id=' + item.id
					})
				} else if (e.content.text === '删除') {
					// 删除确认
					uni.showModal({
						title: '提示',
						content: '确定要删除这条发布吗？',
						success: (res) => {
							if (res.confirm) {
								this.deleteItem(item)
							}
						}
					})
				}
			},

			// 删除发布
			deleteItem(item) {
				uni.showLoading({ title: '删除中...' })

				request({
					url: 'common/usedcardetail/delete',
					method: 'post',
					data: { id: item.id }
				}).then(res => {
					uni.hideLoading()
					if (res.data.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						// 刷新列表
						this.onSearch()
					} else {
						uni.showToast({
							title: res.data.message || '删除失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					console.error('[delete error]', err)
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

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

		/* #ifdef H5 */
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		/* #endif */
	}

	.page-head {
		position: sticky;
		top: 0;
		z-index: 10;
		background: #fff;
		padding: 20rpx 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	.head-search {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.statussearch {
		display: flex;
		align-items: center;
		padding: 12rpx 20rpx;
		background: #F5F6F8;
		border-radius: 24rpx;
		white-space: nowrap;

		.year-text {
			font-size: 26rpx;
			color: #333;
			margin-right: 4rpx;
		}
	}

	.list-wrap {
		padding: 20rpx 24rpx;
	}

	/* 列表项过渡动画 */
	.list-wrap >>> .uni-swipe {
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background: #fff;
	}

	.list-wrap >>> .uni-swipe_button_group {
		display: flex;
	}

	.list-wrap >>> .uni-swipe_box {
		background: #fff;
	}

	/* 空状态样式 */
	:deep(.z-paging-empty-view) {
		padding-top: 200rpx !important;
	}

	:deep(.z-paging-empty-view-text) {
		font-size: 28rpx;
		color: #999;
		margin-top: 20rpx;
	}

	/* 加载更多样式 */
	:deep(.z-paging-loading-more-text) {
		font-size: 26rpx;
		color: #999;
		padding: 20rpx 0;
	}
</style>