used-car-h5/pages/index/myPublish.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">
				<uni-swipe-action-item
					v-for="item in list"
					:key="item.id"
					:right-options="options1"
					@click="swipeClick($event, item)"
				>
					<CarCard
						:item="item"
						@pdfchange="onSearch"
						@request-price="onRequestPrice"
					/>
				</uni-swipe-action-item>
			</view>
		</z-paging>
		<uni-popup ref="inputDialog" type="dialog">
		  <uni-popup-dialog
		    mode="input"
		    title="请输入价格"
		    :value="priceDialogValue"
		    placeholder="请输入车辆价格"
		    @confirm="dialogInputConfirm"
		  />
		</uni-popup>
	</view>
</template>

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

	export default {
		components: {
			CarCard
		},
		data() {
			return {
				priceDialogItem: null,
				priceDialogIndex: -1,
				priceDialogValue: '',
				options1: [{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#F56C6C'
						}
					}
				],
				keyword: '',
				page: 1,
				pageSize: 10,
				loading: false,
				finished: false,
				list: []
			}
		},
		onLoad() {
			this.initFeishuShare()
			// H5：处理分享兜底参数 r（如果路由没命中/经历登录回跳，会先落到首页）
			// #ifdef H5
			try {
				const u = new URL(window.location.href)
				const r = u.searchParams.get('r')
				if (r) {
					const target = decodeURIComponent(r)
					// 清理地址栏的 r，避免反复跳转
					u.searchParams.delete('r')
					window.history.replaceState({}, '', u.toString())
					// 让首页加载完再跳
					setTimeout(() => {
						uni.navigateTo({ url: target })
					}, 50)
				}
			} catch (e) {}
			// #endif
		},
		methods: {
			isFeishuEnv() {
				// 飞书/ Lark 客户端内置浏览器 UA 通常包含 Feishu / Lark
				try {
					const ua = (navigator.userAgent || '').toLowerCase()
					return ua.includes('feishu') || ua.includes('lark')
				} catch (e) {
					return false
				}
			},
			
			loadFeishuJSSDK() {
				// 动态加载飞书 H5 JS-SDK（避免你还要改 public/index.html）
				return new Promise((resolve, reject) => {
					try {
						// 已加载
						if (typeof window !== 'undefined' && window.h5sdk && window.tt) return resolve(true)
						// H5 才有 document
						if (typeof document === 'undefined') return reject(new Error('not in h5 environment'))
						// 已插入但未 ready
						const existed = document.querySelector('script[data-feishu-h5sdk="1"]')
						if (existed) {
							existed.addEventListener('load', () => resolve(true))
							existed.addEventListener('error', () => reject(new Error('feishu sdk load error')))
							return
						}
						const s = document.createElement('script')
						s.async = true
						s.src = 'https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.44.js'
						s.onload = () => resolve(true)
						s.onerror = () => reject(new Error('feishu sdk load error'))
						document.head.appendChild(s)
					} catch (e) {
						reject(e)
					}
				})
			},
			getFeishuSignUrl() {
				// 飞书签名通常要求“去掉 hash 的完整 URL”
				try {
					return window.location.href.split('#')[0]
				} catch (e) {
					return ''
				}
			},
			initFeishuShare() {
				try {
					// 确保在飞书环境
					// if (!this.isFeishuEnv()) return
					// 动态加载 SDK
					this.loadFeishuJSSDK()
			
					// 这里需要后端提供签名接口：返回 { appId, timestamp, nonceStr, signature }
					// 你可以按你后端习惯改成：request({ url: 'xxx', ... })
					// const signUrl = encodeURIComponent(this.getFeishuSignUrl())
					const signUrl = this.getFeishuSignUrl()
					
					request({
						url:'common/auth/feishu/signature',
						method:'get',
						data: {url:signUrl,app_id:uni.getStorageSync('fsappid')}
					}).then(res => {
						var cfg = res.data.data;
						window.h5sdk.config({
							appId: cfg.appId || uni.getStorageSync('fsappid'),
							timestamp: cfg.timestamp,
							nonceStr: cfg.nonceStr,
							signature: cfg.signature,
							jsApiList: ['shareWebContent','share']
						})
						
						window.h5sdk.ready(() => {
							this._feishuReady = true
						})
						window.h5sdk.error((err) => {
							this._feishuReady = false
							console.error('Feishu JSSDK error:', err)
						})
					})
				} catch (e) {
					// 不要阻塞页面，失败就走 H5 的兜底分享
					console.error('initFeishuShare failed:', e)
				}
			},
			onRequestPrice(payload) {
				// payload: { item, index }
				this.priceDialogItem = payload && payload.item ? payload.item : null
				this.priceDialogIndex = payload && typeof payload.index === 'number' ? payload.index : -1
				this.priceDialogValue = ''
				this.$nextTick(() => {
					this.$refs.inputDialog && this.$refs.inputDialog.open()
				})
			},
			// H5 下载：用 a 标签触发
			downloadByAnchor(url, filename) {
				try {
					const a = document.createElement('a')
					a.href = url
					a.download = filename || ''
					a.target = '_blank'
					document.body.appendChild(a)
					a.click()
					document.body.removeChild(a)
				} catch (e) {
					// 兜底：直接打开
					if (typeof window !== 'undefined') window.open(url, '_blank')
				}
			},
			downloadpdf(item) {
				request({
					url: 'common/usedcar/pdf',
					method: 'get',
					data: { id: item.id }
				}).then(res => {
					if (res.data.code == 200) {
						this.downloadByAnchor(res.data.data.pdf_url, res.data.data.file_name)
					}
				})
			},
			dialogInputConfirm(val) {
				const item = this.priceDialogItem
				const index = this.priceDialogIndex
				const price = String(val || '').trim()
			
				if (!item) return
				if (!price) {
					uni.showToast({ title: '请输入价格', icon: 'none' })
					return
				}
				if (isNaN(price) || Number(price) <= 0) {
					uni.showToast({ title: '请输入有效的价格', icon: 'none' })
					return
				}
			
				request({
					url: 'common/usedcar/produce/pdf',
					method: 'get',
					data: { id: item.id, price }
				}).then(res => {
					if (res.data.code == 200) {
						// 通知刷新列表（你原来就是靠这个事件刷新）
						this.onSearch()
						this.downloadpdf(item)
					} else {
						uni.showToast({ title: res.data.msg || '生成失败', icon: 'none' })
					}
				})
			},
			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;
				params.scene = 'self';
				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();
					//
				})
			},
			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: 0px;
		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;
	}

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