375 lines
9.3 KiB
Vue
375 lines
9.3 KiB
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">
|
|||
|
|
<CarCard
|
|||
|
|
v-for="item in list"
|
|||
|
|
:key="item.id"
|
|||
|
|
:item="item"
|
|||
|
|
@pdfchange="onSearch"
|
|||
|
|
@request-price="onRequestPrice"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</z-paging>
|
|||
|
|
<uni-popup ref="inputDialog" type="dialog">
|
|||
|
|
<uni-popup-dialog
|
|||
|
|
mode="input"
|
|||
|
|
title="请输入价格"
|
|||
|
|
:value="priceDialogValue"
|
|||
|
|
placeholder="请输入车辆价格"
|
|||
|
|
@confirm="dialogInputConfirm"
|
|||
|
|
/>
|
|||
|
|
</uni-popup>
|
|||
|
|
<!-- <uni-popup ref="inputDialog" type="dialog">
|
|||
|
|
<view class="popup-dialog">
|
|||
|
|
<view class="popup-title">请输入价格</view>
|
|||
|
|
<view class="popup-input-wrap">
|
|||
|
|
<input
|
|||
|
|
class="popup-input"
|
|||
|
|
type="number"
|
|||
|
|
v-model="priceDialogValue"
|
|||
|
|
placeholder="请输入车辆价格"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-btns">
|
|||
|
|
<view class="popup-btn cancel" @click="close">取消</view>
|
|||
|
|
<view class="popup-btn confirm" @click="dialogInputConfirm">确定</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</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: '',
|
|||
|
|
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)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
close() {
|
|||
|
|
this.$refs.inputDialog.close()
|
|||
|
|
},
|
|||
|
|
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;
|
|||
|
|
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();
|
|||
|
|
//
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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: 9px 9px 0px 0px;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
.popup-dialog {
|
|||
|
|
width: 620rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-title {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
// font-weight: 600;
|
|||
|
|
color: #656565;
|
|||
|
|
padding: 32rpx 20rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-input-wrap {
|
|||
|
|
padding: 0 40rpx 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-input {
|
|||
|
|
height: 88rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
border: 1px solid #dfdfdf;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-btns {
|
|||
|
|
display: flex;
|
|||
|
|
border-top: 1rpx solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 96rpx;
|
|||
|
|
line-height: 96rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-btn.cancel {
|
|||
|
|
color: #666;
|
|||
|
|
border-right: 1rpx solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-btn.confirm {
|
|||
|
|
color: #007aff; /* uni 主色 */
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|