提交
This commit is contained in:
浅念
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="个人信息"></uni-nav-bar>
|
||||
<view class="content">
|
||||
<view class="topimg">
|
||||
<uni-file-picker fileMediatype="image" limit="1" :list-styles="imageStyles" :del-icon="false" disable-preview @select="select" @delete="delfn('picture')">
|
||||
<image class="user" :src="userinfo.avatar_pull"mode=""></image>
|
||||
</uni-file-picker>
|
||||
<view>点击更换头像</view>
|
||||
</view>
|
||||
<view class="cell1">
|
||||
<view class="item">英文名</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入英文名" type="text" v-model="userinfo.name_en"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell1">
|
||||
<view class="item">手机号</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入手机号" type="number" v-model="userinfo.phone"></input>
|
||||
</view>
|
||||
</view>
|
||||
<u-divider text=""></u-divider>
|
||||
<view class="cell1">
|
||||
<view class="item">邮箱</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入邮箱" type="text" v-model="userinfo.email"></input>
|
||||
</view>
|
||||
</view>
|
||||
<u-divider text=""></u-divider>
|
||||
<view class="cell1">
|
||||
<view class="item">whatsapp</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入whatsapp" type="text" v-model="userinfo.whatsapp"></input>
|
||||
</view>
|
||||
</view>
|
||||
<u-divider text=""></u-divider>
|
||||
<view class="cell1">
|
||||
<view class="item">二维码</view>
|
||||
<view class="right">
|
||||
<u-radio-group v-model="userinfo.social">
|
||||
<u-radio name="微信" class="m-r-10">微信</u-radio>
|
||||
<u-radio name="WhatsApp">WhatsApp</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<view class="item">上传二维码</view>
|
||||
<view class="right">
|
||||
<uni-file-picker style="margin: 10px 0px;" fileMediatype="image" limit="1" :list-styles="imageStyles" :del-icon="false" disable-preview @select="selectewm" >
|
||||
<image class="user" :src="userinfo.social_code_pull==null?'/static/image/mine/erwm.png':userinfo.social_code_pull " mode=""></image>
|
||||
</uni-file-picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foot">
|
||||
<button class="btn" @click="bcFn">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { nextTick } from "vue"
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageStyles: {
|
||||
border: true,
|
||||
},
|
||||
userinfo:{},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getinfo()
|
||||
},
|
||||
methods: {
|
||||
getinfo(){
|
||||
var that= this;
|
||||
request({
|
||||
url:'common/user/info',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
that.userinfo = res.data.data;
|
||||
})
|
||||
},
|
||||
uploadfn(imgUrl,name,name1){
|
||||
const that = this
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
uni.uploadFile({
|
||||
url: 'https://userdcar-server.hnxinyouhe.com/upload?scene=usedCarimg',
|
||||
filePath: imgUrl,
|
||||
name: 'file',
|
||||
header:{'Fdesk-Auth-Token': uni.getStorageSync('token'),'Fdesk-Login-Type': 'feishu','Fdesk-System-Code':'fdesk'},
|
||||
success: (uploadFileRes) => {
|
||||
const res = JSON.parse(uploadFileRes.data || '{}')
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title:res.message,
|
||||
icon:'none'
|
||||
})
|
||||
if(res && res.data && res.data.file_name){
|
||||
that.userinfo[name1] = res.data.file_url
|
||||
that.userinfo[name] = res.data.file_name
|
||||
}
|
||||
},
|
||||
fail: (err) => reject(err)
|
||||
});
|
||||
},
|
||||
selectewm(e){
|
||||
const tempFilePaths = e.tempFilePaths;
|
||||
const imgUrl=tempFilePaths[0]
|
||||
this.uploadfn(imgUrl,'social_code','social_code_pull')
|
||||
},
|
||||
select(e){
|
||||
const tempFilePaths = e.tempFilePaths;
|
||||
const imgUrl=tempFilePaths[0]
|
||||
this.uploadfn(imgUrl,'avatar','avatar_url')
|
||||
},
|
||||
leftClick(){
|
||||
uni.navigateBack({})
|
||||
},
|
||||
bcFn(){
|
||||
request({
|
||||
url:'common/user/edit',
|
||||
method:'POST',
|
||||
data:{
|
||||
avatar:this.userinfo.avatar,
|
||||
phone:this.userinfo.phone,
|
||||
email:this.userinfo.email,
|
||||
whatsapp:this.userinfo.whatsapp,
|
||||
social:this.userinfo.social,
|
||||
social_code:this.userinfo.social_code,
|
||||
name_en:this.userinfo.name_en
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
if(res.data.code ==0||res.data.code ==200){
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/mine',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-file-picker {
|
||||
margin-left: 33.3%;
|
||||
}
|
||||
.m-r-10{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.uniui-right{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
.u-divider{
|
||||
margin: 0px 0px !important;
|
||||
}
|
||||
.arrowright{
|
||||
margin-right: -15px;
|
||||
}
|
||||
.content{
|
||||
background: #FFFFFF;
|
||||
padding-bottom: 100px;
|
||||
.topimg{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 20px 0px;
|
||||
color: #999999;
|
||||
}
|
||||
.user{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.xj{
|
||||
width: 60rpx;
|
||||
height: 52rpx;
|
||||
position: absolute;
|
||||
right: 46%;
|
||||
top: 33%;
|
||||
}
|
||||
}
|
||||
.cell1{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding: 18px 20px;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
.item{
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
.cell{
|
||||
padding: 18px 20px;
|
||||
font-weight: 500;
|
||||
.item{
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
text-align: right;
|
||||
}
|
||||
.select{
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.foot{
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.btn{
|
||||
background: #3F435B;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 84%;
|
||||
margin: 20px 8%;
|
||||
}
|
||||
.addimg{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
.actives{
|
||||
background-color: #dfdfdf;
|
||||
}
|
||||
.text{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 30px;
|
||||
padding: 10px 15px 0px;
|
||||
.qd{
|
||||
color: #3471FF;
|
||||
}
|
||||
}
|
||||
.popup-content {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.option-list {
|
||||
max-height: 400rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.option-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,720 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 自定义导航（pages.json 里已设置 navigationStyle: custom） -->
|
||||
<!-- <uni-nav-bar leftText=" " @clickLeft="goBack" leftIcon="back" :fixed="true" :border="false" color="#fff" backgroundColor="#3F435B" :statusBar="true" title="车辆详情"></uni-nav-bar> -->
|
||||
<view class="content">
|
||||
<!-- 基础信息卡片 -->
|
||||
<view class="card">
|
||||
<view class="heard">
|
||||
<view class="">
|
||||
编号：{{detail.code?detail.code:'~'}}
|
||||
</view>
|
||||
<view>
|
||||
<u-icon @click="openPriceDialog()" name="download" size="25" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="title-row">
|
||||
<text class="name">{{ detail.product_name }}</text>
|
||||
</view>
|
||||
<view class="kv">
|
||||
<!-- <view class="kv-item" @click="copyIfHas('车辆识别码', detail.vin)">
|
||||
<text class="k">车辆识别码</text>
|
||||
<text class="v ellipsis">{{ detail.vin }}</text>
|
||||
<text class="copy" v-if="detail.vin">复制</text>
|
||||
</view> -->
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">车价(￥)</text>
|
||||
<text class="v">{{ detail.price }}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">车源地</text>
|
||||
<text class="v">{{ detail.source_place}}</text>
|
||||
</view>
|
||||
|
||||
<!-- <view class="kv-item">
|
||||
<text class="k">上牌地</text>
|
||||
<text class="v">{{ detail.plate_place }}</text>
|
||||
</view> -->
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">上牌时间</text>
|
||||
<text class="v">{{ detail.plate_time }}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">排量</text>
|
||||
<text class="v">{{ detail.displacement }}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">里程</text>
|
||||
<text class="v">{{ detail.mileage }}<text v-if="detail.mileage">Km</text></text>
|
||||
</view>
|
||||
<view class="kv-item">
|
||||
<text class="k">马力</text>
|
||||
<text class="v">{{ detail.power }}</text>
|
||||
</view>
|
||||
<view class="kv-item">
|
||||
<text class="k">车身颜色</text>
|
||||
<text class="v">{{ detail.body_color }}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">创建时间</text>
|
||||
<text class="v">{{ detail.created_at }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 车况介绍 -->
|
||||
<view class="card">
|
||||
<view class="section-title">车况介绍</view>
|
||||
<text class="desc" v-if="detail.condition_desc!=''">{{ detail.condition_desc }}</text>
|
||||
<view class="noneview" v-else>
|
||||
<img src="/static/image/none.png" alt="">
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="hero">
|
||||
<view class="section-title">产品图</view>
|
||||
<!-- 有图：九宫格/多行平铺；无图：占位 -->
|
||||
<view class="img-grid">
|
||||
<image
|
||||
v-for="(src, i) in detail.images_pull"
|
||||
:key="i"
|
||||
class="grid-img"
|
||||
:src="src"
|
||||
mode="aspectFill"
|
||||
@click="previewImages(i)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hero">
|
||||
<view class="section-title">附件</view>
|
||||
<view v-if="detail.attachment_pull.length>0">
|
||||
<view v-for="(file, i) in detail.attachment_pull" :key="i" class="fujian" @click="reviewFile(file)">
|
||||
<p>{{file.name}}</p>
|
||||
<view>查看</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="noneview" v-else>
|
||||
<img src="/static/image/none.png" alt="">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<view class="price-dialog">
|
||||
<view class="pd-title">设置价格</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">贸易条款</view>
|
||||
<view class="pd-price-line">
|
||||
<uni-data-select
|
||||
v-model="priceForm.trade_term"
|
||||
class="tradeTerm"
|
||||
:localdata="tradeTermOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">价格</view>
|
||||
<view class="pd-price-line">
|
||||
<view class="pd-input-suffix-wrap">
|
||||
<input
|
||||
class="pd-input pd-input-price pd-input-with-suffix"
|
||||
v-model="priceForm.price"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
placeholder="请输入数字"
|
||||
@input="onPriceInput"
|
||||
/>
|
||||
<!-- 币种下拉：放在输入框内部右侧（无边框） -->
|
||||
<view class="pd-currency-suffix">
|
||||
<uni-data-select
|
||||
v-model="priceForm.currency"
|
||||
:localdata="currencyOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 语言单选 -->
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">语言</view>
|
||||
<radio-group class="pd-radio-group" @change="onLangChange">
|
||||
<label class="pd-radio" v-for="l in langOptions" :key="l.value">
|
||||
<radio :value="l.value" :checked="priceForm.lang === l.value" />
|
||||
<text class="pd-radio-text">{{ l.text }}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="pd-actions">
|
||||
<view class="pd-btn pd-cancel" @tap="closePriceDialog">取消</view>
|
||||
<view class="pd-btn pd-confirm" @tap="confirmPriceDialog">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
appid: '',
|
||||
detail: {},
|
||||
currentImageIndex: 0,
|
||||
priceForm: {
|
||||
price: "", // 只存数字字符串
|
||||
currency: "USD", // USD | RUB | AED | EUR
|
||||
lang: "en" // en | ru | es | ar
|
||||
},
|
||||
currencyOptions: [
|
||||
{ value: "USD", text: "美元" },
|
||||
{ value: "CNY", text: "人民币" },
|
||||
{ value: "RUB", text: "卢布" },
|
||||
{ value: "AED", text: "迪拉姆" },
|
||||
{ value: "EUR", text: "欧元" }
|
||||
],
|
||||
langOptions: [
|
||||
{ text: "英语", value: "en" },
|
||||
{ text: "俄语", value: "ru" },
|
||||
{ text: "西班牙语", value: "es" },
|
||||
{ text: "阿拉伯语", value: "ar" }
|
||||
],
|
||||
tradeTermOptions: [
|
||||
{ value: "FOB", text: "FOB" },
|
||||
{ value: "CIF", text: "CIF" },
|
||||
{ value: "EXW", text: "EXW" },
|
||||
{ value: "DDP", text: "DDP" },
|
||||
{ value: "CIP", text: "CIP" },
|
||||
{ value: "FCA", text: "FCA" },
|
||||
{ value: "CFR", text: "CFR" }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
images() {
|
||||
// 兼容：images 可能是数组、逗号字符串、或后端不同字段
|
||||
const raw =
|
||||
this.detail.images_pull ||[]
|
||||
|
||||
if (Array.isArray(raw)) {
|
||||
return raw.filter(Boolean)
|
||||
}
|
||||
if (typeof raw === 'string') {
|
||||
return raw
|
||||
.split(',')
|
||||
.map(s => (s || '').trim())
|
||||
.filter(Boolean)
|
||||
}
|
||||
return []
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 1) 支持通过 id 打开：/pages/index/detils?id=123
|
||||
this.id = options?.id || ''
|
||||
// 2) 分享链接里会带 appid，用于未登录时拉起飞书免登
|
||||
const appid = options?.appid || uni.getStorageSync('fsappid') || ''
|
||||
if (appid) uni.setStorageSync('fsappid', appid)
|
||||
// 3) 如果未登录：先去登录页，登录成功后再回到当前详情页
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
const redirect = `/pages/index/detils?id=${this.id}${appid ? `&appid=${encodeURIComponent(appid)}` : ''}`
|
||||
uni.setStorageSync('post_login_redirect', redirect)
|
||||
// 使用 reLaunch，避免用户打开分享链接后历史栈混乱
|
||||
uni.reLaunch({
|
||||
url: `/pages/login/index?appid=${encodeURIComponent(appid)}&redirect=${encodeURIComponent(redirect)}`
|
||||
})
|
||||
return
|
||||
}
|
||||
this.getshows()
|
||||
},
|
||||
methods: {
|
||||
//获取详情
|
||||
getshows(){
|
||||
|
||||
let that = this;
|
||||
request({
|
||||
url:'common/usedcar/show',
|
||||
method:'GET',
|
||||
data:{
|
||||
id:that.id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.detail = res.data.data
|
||||
}
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
fail: () => {
|
||||
// 某些环境下没有历史栈，兜底回首页
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
})
|
||||
},
|
||||
previewImages(startIndex) {
|
||||
if (!this.images || this.images.length === 0) return
|
||||
this.currentImageIndex = startIndex || 0
|
||||
uni.previewImage({
|
||||
current: this.images[this.currentImageIndex],
|
||||
urls: this.images
|
||||
})
|
||||
},
|
||||
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')
|
||||
}
|
||||
},
|
||||
reviewFile(file){
|
||||
this.downloadByAnchor(file.src_pull, file.name)
|
||||
},
|
||||
// 打开弹框时调用：可传默认值（可选）
|
||||
openPriceDialog() {
|
||||
this.priceForm = {
|
||||
trade_term:'',
|
||||
price: "",
|
||||
currency: "USD",
|
||||
lang: "en"
|
||||
}
|
||||
this.$refs.inputDialog.open()
|
||||
},
|
||||
|
||||
closePriceDialog() {
|
||||
this.$refs.inputDialog.close()
|
||||
},
|
||||
|
||||
// 只允许数字 + 可选1个小数点（你要“纯整数”也行，我后面给你一行改法）
|
||||
onPriceInput(e) {
|
||||
let v = (e.detail && e.detail.value) ? String(e.detail.value) : String(this.priceForm.price || "")
|
||||
|
||||
// 过滤掉非数字和点
|
||||
v = v.replace(/[^\d.]/g, "")
|
||||
|
||||
// 只保留第一个小数点
|
||||
const parts = v.split(".")
|
||||
if (parts.length > 2) {
|
||||
v = parts[0] + "." + parts.slice(1).join("")
|
||||
}
|
||||
|
||||
// 去掉开头多余 0（保留 0.xxx）
|
||||
v = v.replace(/^0+(\d)/, "$1")
|
||||
if (v.startsWith(".")) v = "0" + v
|
||||
|
||||
this.priceForm.price = v
|
||||
},
|
||||
|
||||
onCurrencyPickerChange(e) {
|
||||
const idx = Number(e.detail.value || 0)
|
||||
this.currencyIndex = idx
|
||||
this.priceForm.currency = this.currencyOptions[idx]?.value || "USD"
|
||||
},
|
||||
|
||||
onLangChange(e) {
|
||||
this.priceForm.lang = e.detail.value
|
||||
},
|
||||
|
||||
confirmPriceDialog() {
|
||||
// 校验
|
||||
if (!this.priceForm.trade_term) {
|
||||
return uni.showToast({ title: "请选择贸易条款", icon: "none" })
|
||||
}
|
||||
if (!this.priceForm.price) {
|
||||
return uni.showToast({ title: "请输入价格", icon: "none" })
|
||||
}
|
||||
const payload = {
|
||||
trade_term:this.priceForm.trade_term,
|
||||
price: this.priceForm.price, // 数字字符串
|
||||
currency: this.priceForm.currency, // USD/RUB/AED/EUR
|
||||
lang: this.priceForm.lang // en/ru/es/ar
|
||||
}
|
||||
console.log(payload)
|
||||
this.closePriceDialog()
|
||||
this.dialogInputConfirm(payload)
|
||||
},
|
||||
dialogInputConfirm(val) {
|
||||
if (!val.price) {
|
||||
uni.showToast({ title: '请输入价格', icon: 'none' })
|
||||
return
|
||||
}
|
||||
request({
|
||||
url: 'common/usedcar/produce/pdf',
|
||||
method: 'get',
|
||||
data: { id: this.id, price:val.price,currency:val.currency,lang:val.lang,trade_term:val.trade_term }
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.downloadpdf(this.id)
|
||||
} else {
|
||||
uni.showToast({ title: res.data.msg || '生成失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
},
|
||||
// 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 }
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.downloadByAnchor(res.data.data.pdf_url, res.data.data.file_name)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tradeTerm{
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.heard{
|
||||
padding: 5px 0px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f6f7fb;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 18rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
border-radius: 18rpx;
|
||||
overflow: hidden;
|
||||
margin-top: 16rpx;
|
||||
background: #fff;
|
||||
padding: 18rpx 18rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.img-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid-img {
|
||||
width: calc((100% - 20rpx) / 3);
|
||||
height: 220rpx;
|
||||
border-radius: 14rpx;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.grid-img-single {
|
||||
width: 100%;
|
||||
height: 420rpx;
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
|
||||
.hero-badges {
|
||||
position: absolute;
|
||||
left: 14rpx;
|
||||
bottom: 14rpx;
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 10rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: rgba(255, 151, 47, 0.95);
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 16rpx;
|
||||
background: #fff;
|
||||
border-radius: 18rpx;
|
||||
padding: 18rpx 18rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.sub-row {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.kv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.kv-item {
|
||||
padding: 16rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #f1f5f9;
|
||||
}
|
||||
|
||||
.kv-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.k {
|
||||
width: 180rpx;
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.v {
|
||||
font-size: 26rpx;
|
||||
color: #111827;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.copy {
|
||||
margin-left: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: #ff972f;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 28rpx 0 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.retry {
|
||||
padding: 14rpx 26rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 151, 47, 0.12);
|
||||
color: #ff972f;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.fujian{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #ebebeb;
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.noneview{
|
||||
text-align: center;
|
||||
}
|
||||
.price-dialog{
|
||||
width: 640rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.pd-title{
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pd-row{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-row-col{
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.pd-label{
|
||||
width: 120rpx;
|
||||
font-size: 28rpx;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-input{
|
||||
flex:1;
|
||||
height: 66rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 18rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.pd-input-suffix-wrap{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pd-input-with-suffix{
|
||||
padding-right: 180rpx; /* 给右侧币种留空间 */
|
||||
}
|
||||
|
||||
.pd-currency-suffix{
|
||||
position: absolute;
|
||||
right: 14rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 140rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
::v-deep .uni-select{
|
||||
border: none !important;
|
||||
}
|
||||
.pd-radio-group{
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx 22rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.pd-radio{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.pd-radio-text{
|
||||
margin-left: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-actions{
|
||||
display:flex;
|
||||
gap: 18rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-btn{
|
||||
flex:1;
|
||||
height: 84rpx;
|
||||
border-radius: 18rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.pd-cancel{
|
||||
background:#f5f5f5;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-confirm{
|
||||
background:#3F435B; /* 你喜欢绿色风格 */
|
||||
color:#fff;
|
||||
font-weight:600;
|
||||
}
|
||||
.pd-price-line{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.pd-input-price{
|
||||
flex: 1;
|
||||
min-width: 240rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,839 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="content">
|
||||
<!-- 基础信息卡片 -->
|
||||
<view class="card pro-card">
|
||||
<view class="heard">
|
||||
<view class="">
|
||||
编号：{{detail.code?detail.code:'~'}}
|
||||
</view>
|
||||
<!-- <view class="pro-mark">
|
||||
<text class="pro-mark-text">专业发布</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon @click="openPriceDialog()" name="download" size="25" />
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="title-row">
|
||||
<text class="name">{{ detail.product_name }}</text>
|
||||
</view>
|
||||
<view class="kv">
|
||||
<view class="kv-item">
|
||||
<text class="k">车价(￥)</text>
|
||||
<text class="v">{{ detail.price }}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">车源地</text>
|
||||
<text class="v">{{ detail.source_place}}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">上牌时间</text>
|
||||
<text class="v">{{ detail.plate_time }}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">排量</text>
|
||||
<text class="v">{{ detail.displacement }}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">里程</text>
|
||||
<text class="v">{{ detail.mileage }}<text v-if="detail.mileage">Km</text></text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">马力</text>
|
||||
<text class="v">{{ detail.power }}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">车身颜色</text>
|
||||
<text class="v">{{ detail.body_color }}</text>
|
||||
</view>
|
||||
|
||||
<view class="kv-item">
|
||||
<text class="k">创建时间</text>
|
||||
<text class="v">{{ detail.created_at }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 车况介绍 -->
|
||||
<view class="card">
|
||||
<view class="section-title">车况介绍</view>
|
||||
<text class="desc" v-if="detail.condition_desc!=''">{{ detail.condition_desc }}</text>
|
||||
<view class="noneview" v-else>
|
||||
<img src="/static/image/none.png" alt="">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 视频区域（专业发布特有） -->
|
||||
<view class="card video-card" v-if="videoList.length > 0">
|
||||
<view class="section-title">
|
||||
<u-icon name="video" size="18" color="#2E6CF6"></u-icon>
|
||||
<text class="title-text">产品视频</text>
|
||||
<text class="video-count">({{ videoList.length }}个)</text>
|
||||
</view>
|
||||
<view class="video-grid">
|
||||
<view
|
||||
class="video-item"
|
||||
v-for="(video, index) in videoList"
|
||||
:key="index"
|
||||
@click="playVideo(video)"
|
||||
>
|
||||
<video
|
||||
class="video-player"
|
||||
:src="video"
|
||||
:poster="video + '?vframe/jpg/offset/1'"
|
||||
controls
|
||||
show-center-play-btn
|
||||
object-fit="cover"
|
||||
></video>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- FAQ 问答区域（专业发布特有） -->
|
||||
<view class="card faq-card" v-if="faqList.length > 0">
|
||||
<view class="section-title">
|
||||
<u-icon name="question-circle" size="18" color="#FF972F"></u-icon>
|
||||
<text class="title-text">常见问题 FAQ</text>
|
||||
<text class="faq-count">({{ faqList.length }}组)</text>
|
||||
</view>
|
||||
<view class="faq-list">
|
||||
<view class="faq-item" v-for="(faq, index) in faqList" :key="index">
|
||||
<view class="faq-question">
|
||||
<text class="faq-label">问：</text>
|
||||
<text class="faq-text">{{ faq.question }}</text>
|
||||
</view>
|
||||
<view class="faq-answer">
|
||||
<text class="faq-label">答：</text>
|
||||
<text class="faq-text">{{ faq.answer }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 产品图 -->
|
||||
<view class="hero">
|
||||
<view class="section-title">产品图</view>
|
||||
<view class="img-grid">
|
||||
<image
|
||||
v-for="(src, i) in detail.images_pull"
|
||||
:key="i"
|
||||
class="grid-img"
|
||||
:src="src"
|
||||
mode="aspectFill"
|
||||
@click="previewImages(i)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 附件 -->
|
||||
<view class="hero">
|
||||
<view class="section-title">附件</view>
|
||||
<view v-if="detail.attachment_pull.length>0">
|
||||
<view v-for="(file, i) in detail.attachment_pull" :key="i" class="fujian" @click="reviewFile(file)">
|
||||
<p>{{file.name}}</p>
|
||||
<view>查看</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="noneview" v-else>
|
||||
<img src="/static/image/none.png" alt="">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格设置弹框 -->
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<view class="price-dialog">
|
||||
<view class="pd-title">设置价格</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">贸易条款</view>
|
||||
<view class="pd-price-line">
|
||||
<uni-data-select
|
||||
v-model="priceForm.trade_term"
|
||||
class="tradeTerm"
|
||||
:localdata="tradeTermOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">价格</view>
|
||||
<view class="pd-price-line">
|
||||
<view class="pd-input-suffix-wrap">
|
||||
<input
|
||||
class="pd-input pd-input-price pd-input-with-suffix"
|
||||
v-model="priceForm.price"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
placeholder="请输入数字"
|
||||
@input="onPriceInput"
|
||||
/>
|
||||
<view class="pd-currency-suffix">
|
||||
<uni-data-select
|
||||
v-model="priceForm.currency"
|
||||
:localdata="currencyOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 语言单选 -->
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">语言</view>
|
||||
<radio-group class="pd-radio-group" @change="onLangChange">
|
||||
<label class="pd-radio" v-for="l in langOptions" :key="l.value">
|
||||
<radio :value="l.value" :checked="priceForm.lang === l.value" />
|
||||
<text class="pd-radio-text">{{ l.text }}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="pd-actions">
|
||||
<view class="pd-btn pd-cancel" @tap="closePriceDialog">取消</view>
|
||||
<view class="pd-btn pd-confirm" @tap="confirmPriceDialog">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 视频播放弹窗 -->
|
||||
<uni-popup ref="videoPopup" type="center">
|
||||
<view class="video-popup">
|
||||
<view class="video-popup-close" @click="closeVideoPopup">
|
||||
<u-icon name="close" size="24" color="#fff"></u-icon>
|
||||
</view>
|
||||
<video
|
||||
class="popup-video-player"
|
||||
:src="currentVideoUrl"
|
||||
controls
|
||||
autoplay
|
||||
object-fit="contain"
|
||||
></video>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
appid: '',
|
||||
detail: {},
|
||||
currentImageIndex: 0,
|
||||
currentVideoUrl: '',
|
||||
priceForm: {
|
||||
price: "",
|
||||
currency: "USD",
|
||||
lang: "en"
|
||||
},
|
||||
currencyOptions: [
|
||||
{ value: "USD", text: "美元" },
|
||||
{ value: "CNY", text: "人民币" },
|
||||
{ value: "RUB", text: "卢布" },
|
||||
{ value: "AED", text: "迪拉姆" },
|
||||
{ value: "EUR", text: "欧元" }
|
||||
],
|
||||
langOptions: [
|
||||
{ text: "英语", value: "en" },
|
||||
{ text: "俄语", value: "ru" },
|
||||
{ text: "西班牙语", value: "es" },
|
||||
{ text: "阿拉伯语", value: "ar" }
|
||||
],
|
||||
tradeTermOptions: [
|
||||
{ value: "FOB", text: "FOB" },
|
||||
{ value: "CIF", text: "CIF" },
|
||||
{ value: "EXW", text: "EXW" },
|
||||
{ value: "DDP", text: "DDP" },
|
||||
{ value: "CIP", text: "CIP" },
|
||||
{ value: "FCA", text: "FCA" },
|
||||
{ value: "CFR", text: "CFR" }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 处理图片列表
|
||||
images() {
|
||||
const raw = this.detail.images_pull || []
|
||||
if (Array.isArray(raw)) {
|
||||
return raw.filter(Boolean)
|
||||
}
|
||||
if (typeof raw === 'string') {
|
||||
return raw.split(',').map(s => (s || '').trim()).filter(Boolean)
|
||||
}
|
||||
return []
|
||||
},
|
||||
// 处理视频列表
|
||||
videoList() {
|
||||
// 优先使用 video_pull（完整URL）
|
||||
if (Array.isArray(this.detail.video_pull) && this.detail.video_pull.length) {
|
||||
return this.detail.video_pull.filter(Boolean)
|
||||
}
|
||||
// 兼容 intro_video 字段
|
||||
if (!this.detail.intro_video) return []
|
||||
if (Array.isArray(this.detail.intro_video)) {
|
||||
return this.detail.intro_video.filter(Boolean)
|
||||
}
|
||||
if (typeof this.detail.intro_video === 'string') {
|
||||
return this.detail.intro_video.split(',').map(s => (s || '').trim()).filter(Boolean)
|
||||
}
|
||||
return []
|
||||
},
|
||||
// 处理FAQ列表
|
||||
faqList() {
|
||||
if (!this.detail.faqs) return []
|
||||
if (Array.isArray(this.detail.faqs)) {
|
||||
return this.detail.faqs.filter(f => f.question && f.answer)
|
||||
}
|
||||
return []
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = options?.id || ''
|
||||
const appid = options?.appid || uni.getStorageSync('fsappid') || ''
|
||||
if (appid) uni.setStorageSync('fsappid', appid)
|
||||
|
||||
// 登录检查
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
const redirect = `/pages/index/detilsPro?id=${this.id}${appid ? `&appid=${encodeURIComponent(appid)}` : ''}`
|
||||
uni.setStorageSync('post_login_redirect', redirect)
|
||||
uni.reLaunch({
|
||||
url: `/pages/login/index?appid=${encodeURIComponent(appid)}&redirect=${encodeURIComponent(redirect)}`
|
||||
})
|
||||
return
|
||||
}
|
||||
this.getshows()
|
||||
},
|
||||
methods: {
|
||||
// 获取专业发布详情
|
||||
getshows() {
|
||||
const that = this
|
||||
request({
|
||||
url: 'common/usedcardetail/show',
|
||||
method: 'GET',
|
||||
data: { id: that.id }
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.detail = res.data.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 预览图片
|
||||
previewImages(startIndex) {
|
||||
if (!this.images || this.images.length === 0) return
|
||||
this.currentImageIndex = startIndex || 0
|
||||
uni.previewImage({
|
||||
current: this.images[this.currentImageIndex],
|
||||
urls: this.images
|
||||
})
|
||||
},
|
||||
// 播放视频
|
||||
playVideo(videoUrl) {
|
||||
this.currentVideoUrl = videoUrl
|
||||
this.$refs.videoPopup.open()
|
||||
},
|
||||
// 关闭视频弹窗
|
||||
closeVideoPopup() {
|
||||
this.$refs.videoPopup.close()
|
||||
this.currentVideoUrl = ''
|
||||
},
|
||||
// 下载文件
|
||||
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')
|
||||
}
|
||||
},
|
||||
// 查看附件
|
||||
reviewFile(file) {
|
||||
this.downloadByAnchor(file.src_pull, file.name)
|
||||
},
|
||||
// 打开价格弹框
|
||||
openPriceDialog() {
|
||||
this.priceForm = {
|
||||
trade_term: '',
|
||||
price: "",
|
||||
currency: "USD",
|
||||
lang: "en"
|
||||
}
|
||||
this.$refs.inputDialog.open()
|
||||
},
|
||||
// 关闭价格弹框
|
||||
closePriceDialog() {
|
||||
this.$refs.inputDialog.close()
|
||||
},
|
||||
// 价格输入处理
|
||||
onPriceInput(e) {
|
||||
let v = (e.detail && e.detail.value) ? String(e.detail.value) : String(this.priceForm.price || "")
|
||||
v = v.replace(/[^\d.]/g, "")
|
||||
const parts = v.split(".")
|
||||
if (parts.length > 2) {
|
||||
v = parts[0] + "." + parts.slice(1).join("")
|
||||
}
|
||||
v = v.replace(/^0+(\d)/, "$1")
|
||||
if (v.startsWith(".")) v = "0" + v
|
||||
this.priceForm.price = v
|
||||
},
|
||||
// 语言切换
|
||||
onLangChange(e) {
|
||||
this.priceForm.lang = e.detail.value
|
||||
},
|
||||
// 确认价格弹框
|
||||
confirmPriceDialog() {
|
||||
if (!this.priceForm.trade_term) {
|
||||
return uni.showToast({ title: "请选择贸易条款", icon: "none" })
|
||||
}
|
||||
if (!this.priceForm.price) {
|
||||
return uni.showToast({ title: "请输入价格", icon: "none" })
|
||||
}
|
||||
const payload = {
|
||||
trade_term: this.priceForm.trade_term,
|
||||
price: this.priceForm.price,
|
||||
currency: this.priceForm.currency,
|
||||
lang: this.priceForm.lang
|
||||
}
|
||||
this.closePriceDialog()
|
||||
this.dialogInputConfirm(payload)
|
||||
},
|
||||
// 生成PDF
|
||||
dialogInputConfirm(val) {
|
||||
if (!val.price) {
|
||||
uni.showToast({ title: '请输入价格', icon: 'none' })
|
||||
return
|
||||
}
|
||||
request({
|
||||
url: 'common/usedcardetail/produce/pdf',
|
||||
method: 'get',
|
||||
data: {
|
||||
id: this.id,
|
||||
price: val.price,
|
||||
currency: val.currency,
|
||||
lang: val.lang,
|
||||
trade_term: val.trade_term
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.downloadpdf(this.id)
|
||||
} else {
|
||||
uni.showToast({ title: res.data.msg || '生成失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
},
|
||||
// 下载PDF
|
||||
downloadpdf(item) {
|
||||
request({
|
||||
url: 'common/usedcardetail/pdf',
|
||||
method: 'get',
|
||||
data: { id: item }
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.downloadByAnchor(res.data.data.pdf_url, res.data.data.file_name)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f6f7fb;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 18rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 专业发布卡片样式
|
||||
.pro-card {
|
||||
background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
|
||||
border: 1px solid rgba(46, 108, 246, 0.1);
|
||||
}
|
||||
|
||||
.heard {
|
||||
padding: 5px 0px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
// 专业发布标记
|
||||
.pro-mark {
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(135deg, #2E6CF6 0%, #1a5dd9 100%);
|
||||
box-shadow: 0 4rpx 12rpx rgba(46, 108, 246, 0.3);
|
||||
|
||||
.pro-mark-text {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 16rpx;
|
||||
background: #fff;
|
||||
border-radius: 18rpx;
|
||||
padding: 18rpx 18rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 视频卡片样式
|
||||
.video-card {
|
||||
border: 1px solid rgba(46, 108, 246, 0.15);
|
||||
}
|
||||
|
||||
// FAQ卡片样式
|
||||
.faq-card {
|
||||
border: 1px solid rgba(255, 151, 47, 0.15);
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.kv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.kv-item {
|
||||
padding: 16rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #f1f5f9;
|
||||
}
|
||||
|
||||
.kv-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.k {
|
||||
width: 180rpx;
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.v {
|
||||
font-size: 26rpx;
|
||||
color: #111827;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
|
||||
.title-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.video-count,
|
||||
.faq-count {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
border-radius: 18rpx;
|
||||
overflow: hidden;
|
||||
margin-top: 16rpx;
|
||||
background: #fff;
|
||||
padding: 18rpx 18rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.img-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid-img {
|
||||
width: calc((100% - 20rpx) / 3);
|
||||
height: 220rpx;
|
||||
border-radius: 14rpx;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
// 视频网格样式
|
||||
.video-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.video-item {
|
||||
width: calc((100% - 16rpx) / 2);
|
||||
height: 240rpx;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// FAQ列表样式
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
padding: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(135deg, rgba(255, 151, 47, 0.05) 0%, rgba(255, 151, 47, 0.02) 100%);
|
||||
border: 1px solid rgba(255, 151, 47, 0.1);
|
||||
}
|
||||
|
||||
.faq-question,
|
||||
.faq-answer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-label {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #FF972F;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.faq-text {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #374151;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.fujian {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #ebebeb;
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.noneview {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 价格弹框样式
|
||||
.tradeTerm {
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.price-dialog {
|
||||
width: 640rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.pd-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pd-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-label {
|
||||
width: 120rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pd-input {
|
||||
flex: 1;
|
||||
height: 66rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 18rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.pd-input-suffix-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pd-input-with-suffix {
|
||||
padding-right: 180rpx;
|
||||
}
|
||||
|
||||
.pd-currency-suffix {
|
||||
position: absolute;
|
||||
right: 14rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 140rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
::v-deep .uni-select {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.pd-radio-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx 22rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.pd-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pd-radio-text {
|
||||
margin-left: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pd-actions {
|
||||
display: flex;
|
||||
gap: 18rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-btn {
|
||||
flex: 1;
|
||||
height: 84rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.pd-cancel {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pd-confirm {
|
||||
background: #3F435B;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pd-price-line {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.pd-input-price {
|
||||
flex: 1;
|
||||
min-width: 240rpx;
|
||||
}
|
||||
|
||||
// 视频弹窗样式
|
||||
.video-popup {
|
||||
position: relative;
|
||||
width: 680rpx;
|
||||
height: 480rpx;
|
||||
background: #000;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-popup-close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.popup-video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,617 @@
|
||||
<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 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>
|
||||
<view class="list-wrap">
|
||||
<CarCard
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@pdfchange="onSearch"
|
||||
@request-price="onRequestPrice"
|
||||
@restchange="onSearch"
|
||||
/>
|
||||
</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="price-dialog">
|
||||
<view class="pd-title">设置价格</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">贸易条款</view>
|
||||
<view class="pd-price-line">
|
||||
<uni-data-select
|
||||
v-model="priceForm.trade_term"
|
||||
class="tradeTerm"
|
||||
:localdata="tradeTermOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">价格</view>
|
||||
<view class="pd-price-line">
|
||||
<view class="pd-input-suffix-wrap">
|
||||
<input
|
||||
class="pd-input pd-input-price pd-input-with-suffix"
|
||||
v-model="priceForm.price"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
placeholder="请输入数字"
|
||||
@input="onPriceInput"
|
||||
/>
|
||||
<!-- 币种下拉：放在输入框内部右侧（无边框） -->
|
||||
<view class="pd-currency-suffix">
|
||||
<uni-data-select
|
||||
class="pd-currency-select-suffix"
|
||||
v-model="priceForm.currency"
|
||||
:localdata="currencyOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 语言单选 -->
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">语言</view>
|
||||
<radio-group class="pd-radio-group" @change="onLangChange">
|
||||
<label class="pd-radio" v-for="l in langOptions" :key="l.value">
|
||||
<radio :value="l.value" :checked="priceForm.lang === l.value" />
|
||||
<text class="pd-radio-text">{{ l.text }}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="pd-actions">
|
||||
<view class="pd-btn pd-cancel" @tap="closePriceDialog">取消</view>
|
||||
<view class="pd-btn pd-confirm" @tap="confirmPriceDialog">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<CustomTabBar class="h5-custom-tabbar" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from '@/api/apiT.js'
|
||||
import CarCard from '@/components/CarCard/CarCard.vue'
|
||||
import CustomTabBar from '@/custom-tab-bar/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
CarCard,
|
||||
CustomTabBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
status_id:1,
|
||||
status_name:'',
|
||||
columns: [
|
||||
[{
|
||||
label: '正常',
|
||||
id: 1
|
||||
}, {
|
||||
label: '已售出',
|
||||
id: 2
|
||||
}, {
|
||||
label: '已归档',
|
||||
id: 3
|
||||
}]
|
||||
],
|
||||
priceDialogItem: null,
|
||||
priceDialogIndex: -1,
|
||||
priceDialogValue: '',
|
||||
keyword: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
loading: false,
|
||||
finished: false,
|
||||
list: [],
|
||||
priceForm: {
|
||||
trade_term:'',
|
||||
price: "", // 只存数字字符串
|
||||
currency: "USD", // USD | RUB | AED | EUR
|
||||
lang: "en" // en | ru | es | ar
|
||||
},
|
||||
currencyOptions: [
|
||||
{ value: "USD", text: "美元" },
|
||||
{ value: "CNY", text: "人民币" },
|
||||
{ value: "RUB", text: "卢布" },
|
||||
{ value: "AED", text: "迪拉姆" },
|
||||
{ value: "EUR", text: "欧元" }
|
||||
],
|
||||
langOptions: [
|
||||
{ text: "英语", value: "en" },
|
||||
{ text: "俄语", value: "ru" },
|
||||
{ text: "西班牙语", value: "es" },
|
||||
{ text: "阿拉伯语", value: "ar" }
|
||||
],
|
||||
tradeTermOptions: [
|
||||
{ value: "FOB", text: "FOB" },
|
||||
{ value: "CIF", text: "CIF" },
|
||||
{ value: "EXW", text: "EXW" },
|
||||
{ value: "DDP", text: "DDP" },
|
||||
{ value: "CIP", text: "CIP" },
|
||||
{ value: "FCA", text: "FCA" },
|
||||
{ value: "CFR", text: "CFR" }
|
||||
]
|
||||
}
|
||||
},
|
||||
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.priceForm = {
|
||||
trade_term:'',
|
||||
price:"",
|
||||
currency: "USD",
|
||||
lang: "en"
|
||||
}
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
closePriceDialog() {
|
||||
this.$refs.inputDialog.close()
|
||||
},
|
||||
|
||||
// 只允许数字 + 可选1个小数点（你要“纯整数”也行，我后面给你一行改法）
|
||||
onPriceInput(e) {
|
||||
let v = (e.detail && e.detail.value) ? String(e.detail.value) : String(this.priceForm.price || "")
|
||||
|
||||
// 过滤掉非数字和点
|
||||
v = v.replace(/[^\d.]/g, "")
|
||||
|
||||
// 只保留第一个小数点
|
||||
const parts = v.split(".")
|
||||
if (parts.length > 2) {
|
||||
v = parts[0] + "." + parts.slice(1).join("")
|
||||
}
|
||||
|
||||
// 去掉开头多余 0（保留 0.xxx）
|
||||
v = v.replace(/^0+(\d)/, "$1")
|
||||
if (v.startsWith(".")) v = "0" + v
|
||||
|
||||
this.priceForm.price = v
|
||||
},
|
||||
|
||||
onCurrencyPickerChange(e) {
|
||||
const idx = Number(e.detail.value || 0)
|
||||
this.currencyIndex = idx
|
||||
this.priceForm.currency = this.currencyOptions[idx]?.value || "USD"
|
||||
},
|
||||
|
||||
onLangChange(e) {
|
||||
this.priceForm.lang = e.detail.value
|
||||
},
|
||||
|
||||
confirmPriceDialog() {
|
||||
if (!this.priceForm.trade_term) {
|
||||
return uni.showToast({ title: "请选择贸易条款", icon: "none" })
|
||||
}
|
||||
// 校验
|
||||
if (!this.priceForm.price) {
|
||||
return uni.showToast({ title: "请输入价格", icon: "none" })
|
||||
}
|
||||
|
||||
const payload = {
|
||||
trade_term:this.priceForm.trade_term,
|
||||
price: this.priceForm.price, // 数字字符串
|
||||
currency: this.priceForm.currency, // USD/RUB/AED/EUR
|
||||
lang: this.priceForm.lang // en/ru/es/ar
|
||||
}
|
||||
console.log(payload)
|
||||
this.closePriceDialog()
|
||||
this.dialogInputConfirm(payload)
|
||||
},
|
||||
dialogInputConfirm(val) {
|
||||
const item = this.priceDialogItem
|
||||
const index = this.priceDialogIndex
|
||||
|
||||
if (!item) return
|
||||
if (!val.price) {
|
||||
uni.showToast({ title: '请输入价格', icon: 'none' })
|
||||
return
|
||||
}
|
||||
request({
|
||||
url: 'common/usedcar/produce/pdf',
|
||||
method: 'get',
|
||||
data: { id: item.id, price:val.price,currency:val.currency,lang:val.lang,trade_term:val.trade_term }
|
||||
}).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.$refs.paging && this.$refs.paging.reload()
|
||||
},
|
||||
queryList(pageNo, pageSize, from) {
|
||||
this.loading = true;
|
||||
var that = this;
|
||||
const params = {
|
||||
current:pageNo,
|
||||
status:this.status_id,
|
||||
size:pageSize
|
||||
};
|
||||
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();
|
||||
//
|
||||
})
|
||||
},
|
||||
onstatus(e){
|
||||
if (e.value && e.value[0]) {
|
||||
const selectedItem = typeof e.value[0] === 'object' ? e.value[0] : { value: e.value[0], label: e.value[0].toString() };
|
||||
this.status_name = selectedItem.label;
|
||||
this.status_id = selectedItem.id;
|
||||
this.show = false;
|
||||
this.$refs.paging && this.$refs.paging.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tradeTerm{
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f4f6f8;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.page {
|
||||
/* 给自定义 TabBar 预留空间，避免内容被遮挡 */
|
||||
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
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);
|
||||
}
|
||||
.statussearch{
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: 18rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.loadmore {
|
||||
padding: 18rpx 0 6rpx;
|
||||
}
|
||||
.price-dialog{
|
||||
width: 640rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.pd-title{
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pd-row{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-row-col{
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.pd-label{
|
||||
width: 120rpx;
|
||||
font-size: 28rpx;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-input{
|
||||
flex:1;
|
||||
height: 66rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 18rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.pd-input-suffix-wrap{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pd-input-with-suffix{
|
||||
padding-right: 180rpx; /* 给右侧币种留空间 */
|
||||
}
|
||||
|
||||
.pd-currency-suffix{
|
||||
position: absolute;
|
||||
right: 14rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 140rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
::v-deep .uni-select{
|
||||
border: none !important;
|
||||
}
|
||||
.pd-radio-group{
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx 22rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.pd-radio{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.pd-radio-text{
|
||||
margin-left: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-actions{
|
||||
display:flex;
|
||||
gap: 18rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-btn{
|
||||
flex:1;
|
||||
height: 84rpx;
|
||||
border-radius: 18rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.pd-cancel{
|
||||
background:#f5f5f5;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-confirm{
|
||||
background:#3F435B; /* 你喜欢绿色风格 */
|
||||
color:#fff;
|
||||
font-weight:600;
|
||||
}
|
||||
.pd-price-line{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.pd-input-price{
|
||||
flex: 1;
|
||||
min-width: 240rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-card" @click="goToChanginfo">
|
||||
<view class="user-info">
|
||||
<image
|
||||
class="avatar"
|
||||
:src="userInfo.avatar_url || '/static/image/car.png'"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="user-details">
|
||||
<text class="nickname">{{ userInfo.name || '未设置昵称' }}</text>
|
||||
<text class="phone">{{ userInfo.mobile || '未绑定手机号' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能入口 -->
|
||||
<view class="menu-section">
|
||||
<view class="menu-item" @tap="goToMyPublish">
|
||||
<view class="menu-icon">
|
||||
<u-icon name="list" size="24" color="#3F435B"></u-icon>
|
||||
</view>
|
||||
<text class="menu-text">我的发布</text>
|
||||
<view class="menu-arrow">
|
||||
<u-icon name="arrow-right" size="18" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from '@/api/apiT.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: {
|
||||
avatar_url: '',
|
||||
name: '',
|
||||
mobile: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUserInfo()
|
||||
},
|
||||
onShow() {
|
||||
// 页面显示时刷新用户信息
|
||||
this.getUserInfo()
|
||||
},
|
||||
methods: {
|
||||
// 获取用户信息
|
||||
getUserInfo() {
|
||||
request({
|
||||
url: 'user/getInfo',
|
||||
method: 'get'
|
||||
}).then(res => {
|
||||
if (res.data.code == 0 || res.data.code == 200) {
|
||||
this.userInfo = {
|
||||
avatar_url: res.data.data.avatar_url || '',
|
||||
name: res.data.data.name || '',
|
||||
mobile: res.data.data.mobile || ''
|
||||
}
|
||||
}
|
||||
}).catch(() => {
|
||||
// 获取失败时使用默认值
|
||||
})
|
||||
},
|
||||
// 跳转到我的发布列表
|
||||
goToMyPublish() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/myPublish'
|
||||
})
|
||||
},
|
||||
// 跳转到个人信息
|
||||
goToChanginfo() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/changinfo'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f4f6f8;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 18rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: #eef2f7;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.menu-section {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 18rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
background: #f3f4f6;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #111827;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,615 @@
|
||||
<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"
|
||||
:ismy="true"
|
||||
@pdfchange="onSearch"
|
||||
@request-price="onRequestPrice"
|
||||
/>
|
||||
</uni-swipe-action-item>
|
||||
</view>
|
||||
</z-paging>
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<view class="price-dialog">
|
||||
<view class="pd-title">设置价格</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">贸易条款</view>
|
||||
<view class="pd-price-line">
|
||||
<uni-data-select
|
||||
v-model="priceForm.trade_term"
|
||||
class="tradeTerm"
|
||||
:localdata="tradeTermOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">价格</view>
|
||||
<view class="pd-price-line">
|
||||
<view class="pd-input-suffix-wrap">
|
||||
<input
|
||||
class="pd-input pd-input-price pd-input-with-suffix"
|
||||
v-model="priceForm.price"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
placeholder="请输入数字"
|
||||
@input="onPriceInput"
|
||||
/>
|
||||
<!-- 币种下拉：放在输入框内部右侧（无边框） -->
|
||||
<view class="pd-currency-suffix">
|
||||
<uni-data-select
|
||||
class="pd-currency-select-suffix"
|
||||
v-model="priceForm.currency"
|
||||
:localdata="currencyOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 语言单选 -->
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">语言</view>
|
||||
<radio-group class="pd-radio-group" @change="onLangChange">
|
||||
<label class="pd-radio" v-for="l in langOptions" :key="l.value">
|
||||
<radio :value="l.value" :checked="priceForm.lang === l.value" />
|
||||
<text class="pd-radio-text">{{ l.text }}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="pd-actions">
|
||||
<view class="pd-btn pd-cancel" @tap="closePriceDialog">取消</view>
|
||||
<view class="pd-btn pd-confirm" @tap="confirmPriceDialog">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<CustomTabBar class="h5-custom-tabbar" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from '@/api/apiT.js'
|
||||
import CarCard from '@/components/CarCard/CarCard.vue'
|
||||
import CustomTabBar from '@/custom-tab-bar/index.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CarCard,
|
||||
CustomTabBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
priceDialogItem: null,
|
||||
priceDialogIndex: -1,
|
||||
priceDialogValue: '',
|
||||
options1: [{
|
||||
text: '编辑',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
}
|
||||
],
|
||||
keyword: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
loading: false,
|
||||
finished: false,
|
||||
list: [],
|
||||
priceForm: {
|
||||
trade_term:'',
|
||||
price: "", // 只存数字字符串
|
||||
currency: "USD", // USD | RUB | AED | EUR
|
||||
lang: "en" // en | ru | es | ar
|
||||
},
|
||||
currencyOptions: [
|
||||
{ value: "USD", text: "美元" },
|
||||
{ value: "CNY", text: "人民币" },
|
||||
{ value: "RUB", text: "卢布" },
|
||||
{ value: "AED", text: "迪拉姆" },
|
||||
{ value: "EUR", text: "欧元" }
|
||||
],
|
||||
langOptions: [
|
||||
{ text: "英语", value: "en" },
|
||||
{ text: "俄语", value: "ru" },
|
||||
{ text: "西班牙语", value: "es" },
|
||||
{ text: "阿拉伯语", value: "ar" }
|
||||
],
|
||||
tradeTermOptions: [
|
||||
{ value: "FOB", text: "FOB" },
|
||||
{ value: "CIF", text: "CIF" },
|
||||
{ value: "EXW", text: "EXW" },
|
||||
{ value: "DDP", text: "DDP" },
|
||||
{ value: "CIP", text: "CIP" },
|
||||
{ value: "FCA", text: "FCA" },
|
||||
{ value: "CFR", text: "CFR" }
|
||||
]
|
||||
}
|
||||
},
|
||||
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.priceForm = {
|
||||
trade_term:'',
|
||||
price:"",
|
||||
currency: "USD",
|
||||
lang: "en"
|
||||
}
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
closePriceDialog() {
|
||||
this.$refs.inputDialog.close()
|
||||
},
|
||||
|
||||
// 只允许数字 + 可选1个小数点（你要“纯整数”也行，我后面给你一行改法）
|
||||
onPriceInput(e) {
|
||||
let v = (e.detail && e.detail.value) ? String(e.detail.value) : String(this.priceForm.price || "")
|
||||
|
||||
// 过滤掉非数字和点
|
||||
v = v.replace(/[^\d.]/g, "")
|
||||
|
||||
// 只保留第一个小数点
|
||||
const parts = v.split(".")
|
||||
if (parts.length > 2) {
|
||||
v = parts[0] + "." + parts.slice(1).join("")
|
||||
}
|
||||
|
||||
// 去掉开头多余 0（保留 0.xxx）
|
||||
v = v.replace(/^0+(\d)/, "$1")
|
||||
if (v.startsWith(".")) v = "0" + v
|
||||
|
||||
this.priceForm.price = v
|
||||
},
|
||||
|
||||
onCurrencyPickerChange(e) {
|
||||
const idx = Number(e.detail.value || 0)
|
||||
this.currencyIndex = idx
|
||||
this.priceForm.currency = this.currencyOptions[idx]?.value || "USD"
|
||||
},
|
||||
|
||||
onLangChange(e) {
|
||||
this.priceForm.lang = e.detail.value
|
||||
},
|
||||
|
||||
confirmPriceDialog() {
|
||||
if (!this.priceForm.trade_term) {
|
||||
return uni.showToast({ title: "请选择贸易条款", icon: "none" })
|
||||
}
|
||||
// 校验
|
||||
if (!this.priceForm.price) {
|
||||
return uni.showToast({ title: "请输入价格", icon: "none" })
|
||||
}
|
||||
|
||||
const payload = {
|
||||
trade_term:this.priceForm.trade_term,
|
||||
price: this.priceForm.price, // 数字字符串
|
||||
currency: this.priceForm.currency, // USD/RUB/AED/EUR
|
||||
lang: this.priceForm.lang // en/ru/es/ar
|
||||
}
|
||||
console.log(payload)
|
||||
this.closePriceDialog()
|
||||
this.dialogInputConfirm(payload)
|
||||
},
|
||||
dialogInputConfirm(val) {
|
||||
const item = this.priceDialogItem
|
||||
const index = this.priceDialogIndex
|
||||
|
||||
if (!item) return
|
||||
if (!val.price) {
|
||||
uni.showToast({ title: '请输入价格', icon: 'none' })
|
||||
return
|
||||
}
|
||||
request({
|
||||
url: 'common/usedcar/produce/pdf',
|
||||
method: 'get',
|
||||
data: { id: item.id, price:val.price,currency:val.currency,lang:val.lang,trade_term:val.trade_term }
|
||||
}).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;
|
||||
const id = item.id
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/publishedit?id=${id}`
|
||||
})
|
||||
// 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>
|
||||
.tradeTerm{
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f4f6f8;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.page {
|
||||
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.loadmore {
|
||||
padding: 18rpx 0 6rpx;
|
||||
}
|
||||
.price-dialog{
|
||||
width: 640rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.pd-title{
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pd-row{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-row-col{
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.pd-label{
|
||||
width: 120rpx;
|
||||
font-size: 28rpx;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-input{
|
||||
flex:1;
|
||||
height: 66rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 18rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.pd-input-suffix-wrap{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pd-input-with-suffix{
|
||||
padding-right: 180rpx; /* 给右侧币种留空间 */
|
||||
}
|
||||
|
||||
.pd-currency-suffix{
|
||||
position: absolute;
|
||||
right: 14rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 140rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
::v-deep .uni-select{
|
||||
border: none !important;
|
||||
}
|
||||
.pd-radio-group{
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx 22rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.pd-radio{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.pd-radio-text{
|
||||
margin-left: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-actions{
|
||||
display:flex;
|
||||
gap: 18rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-btn{
|
||||
flex:1;
|
||||
height: 84rpx;
|
||||
border-radius: 18rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.pd-cancel{
|
||||
background:#f5f5f5;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-confirm{
|
||||
background:#3F435B; /* 你喜欢绿色风格 */
|
||||
color:#fff;
|
||||
font-weight:600;
|
||||
}
|
||||
.pd-price-line{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.pd-input-price{
|
||||
flex: 1;
|
||||
min-width: 240rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-card" @click="goToChanginfo">
|
||||
<view class="user-info">
|
||||
<image
|
||||
class="avatar"
|
||||
:src="userInfo.avatar_pull || '/static/image/user.png'"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="user-details">
|
||||
<text class="nickname">{{ userInfo.name}}</text>
|
||||
<text class="phone">{{ userInfo.name_en}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能入口 -->
|
||||
<view class="menu-section">
|
||||
<view class="menu-item" @tap="goToMyPublish" v-if="this.userInfo.role==2">
|
||||
<view class="menu-icon">
|
||||
<u-icon name="list-dot" size="24" color="#3F435B"></u-icon>
|
||||
</view>
|
||||
<text class="menu-text">我的发布</text>
|
||||
<view class="menu-arrow">
|
||||
<u-icon name="arrow-right" size="18" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item" @tap="goToMyPublish" v-if="this.userInfo.role==1">
|
||||
<view class="menu-icon">
|
||||
<u-icon name="list-dot" size="24" color="#3F435B"></u-icon>
|
||||
</view>
|
||||
<text class="menu-text">我的车库</text>
|
||||
<view class="menu-arrow">
|
||||
<u-icon name="arrow-right" size="18" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item" @tap="goToMyPublishpro" v-if="this.userInfo.role_wp==1||this.userInfo.role_wp==2||this.userInfo.role_wp==3">
|
||||
<view class="menu-icon">
|
||||
<u-icon name="list-dot" size="24" color="#3F435B"></u-icon>
|
||||
</view>
|
||||
<text class="menu-text">我的发布</text>
|
||||
<view class="menu-arrow">
|
||||
<u-icon name="arrow-right" size="18" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<CustomTabBar class="h5-custom-tabbar" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from '@/api/apiT.js'
|
||||
import CustomTabBar from '@/custom-tab-bar/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
CustomTabBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
onShow() {
|
||||
// 页面显示时刷新用户信息
|
||||
this.getUserInfo()
|
||||
},
|
||||
methods: {
|
||||
// 获取用户信息
|
||||
getUserInfo() {
|
||||
request({
|
||||
url: 'common/user/info',
|
||||
method: 'get'
|
||||
}).then(res => {
|
||||
if (res.data.code == 0 || res.data.code == 200) {
|
||||
this.userInfo = res.data.data
|
||||
}
|
||||
}).catch(() => {
|
||||
// 获取失败时使用默认值
|
||||
})
|
||||
},
|
||||
// 跳转到我的发布列表
|
||||
goToMyPublish() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/myPublishpro'
|
||||
})
|
||||
},
|
||||
goToMyPublishpro() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/myPublishpro'
|
||||
})
|
||||
},
|
||||
// 跳转到个人信息
|
||||
goToChanginfo() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/changinfo'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f4f6f8;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 18rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: #eef2f7;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.menu-section {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 18rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
// background: #f3f4f6;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #111827;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,907 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 列表 -->
|
||||
<z-paging ref="paging" v-model="list" @query="queryList" empty-view-text="暂无数据！">
|
||||
<template #top>
|
||||
<!-- 搜索抓取懂车帝 -->
|
||||
<view class="dcd-search">
|
||||
<u-search v-model="urls" placeholder="请输入抓取链接" :show-action="false" shape="round"></u-search>
|
||||
<view class="bind-btn" @tap.stop="onBindByName">抓取</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- <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 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>
|
||||
<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"
|
||||
:ismy="true"
|
||||
@pdfchange="onSearch"
|
||||
@request-price="onRequestPrice"
|
||||
@restchange="onSearch"
|
||||
/>
|
||||
</uni-swipe-action-item>
|
||||
</view>
|
||||
</z-paging>
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<view class="price-dialog">
|
||||
<view class="pd-title">设置价格</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">贸易条款</view>
|
||||
<view class="pd-price-line">
|
||||
<uni-data-select
|
||||
v-model="priceForm.trade_term"
|
||||
class="tradeTerm"
|
||||
:localdata="tradeTermOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">价格</view>
|
||||
<view class="pd-price-line">
|
||||
<view class="pd-input-suffix-wrap">
|
||||
<input
|
||||
class="pd-input pd-input-price pd-input-with-suffix"
|
||||
v-model="priceForm.price"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
placeholder="请输入数字"
|
||||
@input="onPriceInput"
|
||||
/>
|
||||
<!-- 币种下拉：放在输入框内部右侧（无边框） -->
|
||||
<view class="pd-currency-suffix">
|
||||
<uni-data-select
|
||||
class="pd-currency-select-suffix"
|
||||
v-model="priceForm.currency"
|
||||
:localdata="currencyOptions"
|
||||
:clear="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 语言单选 -->
|
||||
<view class="pd-row">
|
||||
<view class="pd-label">语言</view>
|
||||
<radio-group class="pd-radio-group" @change="onLangChange">
|
||||
<label class="pd-radio" v-for="l in langOptions" :key="l.value">
|
||||
<radio :value="l.value" :checked="priceForm.lang === l.value" />
|
||||
<text class="pd-radio-text">{{ l.text }}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="pd-actions">
|
||||
<view class="pd-btn pd-cancel" @tap="closePriceDialog">取消</view>
|
||||
<view class="pd-btn pd-confirm" @tap="confirmPriceDialog">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 抓取信息弹出层 -->
|
||||
<uni-popup ref="crawlDialog" type="dialog">
|
||||
<view class="crawl-dialog">
|
||||
<view class="crawl-title">抓取信息</view>
|
||||
<view class="crawl-content" v-if="crawlLoading">
|
||||
<view class="crawl-loading">正在抓取中...</view>
|
||||
</view>
|
||||
<view class="crawl-content" v-else-if="crawlData">
|
||||
<view class="crawl-item" v-if="crawlData.product_name">
|
||||
<view class="crawl-label">车辆名称</view>
|
||||
<view class="crawl-value">{{ crawlData.product_name }}</view>
|
||||
</view>
|
||||
<view class="crawl-item" v-if="crawlData.source_place">
|
||||
<view class="crawl-label">车源地</view>
|
||||
<view class="crawl-value">{{ crawlData.source_place }}</view>
|
||||
</view>
|
||||
<view class="crawl-item" v-if="crawlData.body_color">
|
||||
<view class="crawl-label">车身颜色</view>
|
||||
<view class="crawl-value">{{ crawlData.body_color }}</view>
|
||||
</view>
|
||||
<view class="crawl-item" v-if="crawlData.plate_time">
|
||||
<view class="crawl-label">上牌时间</view>
|
||||
<view class="crawl-value">{{ crawlData.plate_time }}</view>
|
||||
</view>
|
||||
<view class="crawl-item" v-if="crawlData.mileage">
|
||||
<view class="crawl-label">里程</view>
|
||||
<view class="crawl-value">{{ crawlData.mileage }}</view>
|
||||
</view>
|
||||
<view class="crawl-item" v-if="crawlData.price">
|
||||
<view class="crawl-label">价格</view>
|
||||
<view class="crawl-value">{{ crawlData.price }}</view>
|
||||
</view>
|
||||
<view class="crawl-item" v-if="crawlData.image_pull && crawlData.image_pull.length > 0">
|
||||
<view class="crawl-label">图片</view>
|
||||
<view class="crawl-images">
|
||||
<image
|
||||
v-for="(img, idx) in crawlData.image_pull"
|
||||
:key="idx"
|
||||
:src="img"
|
||||
mode="aspectFill"
|
||||
class="crawl-image"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="crawl-actions">
|
||||
<view class="crawl-btn crawl-confirm1" @tap="closeCrawlDialog">关闭</view>
|
||||
<view class="crawl-btn crawl-confirm" @tap="saveCrawlDialog">保存</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 {
|
||||
urls:'',
|
||||
show: false,
|
||||
status_id:1,
|
||||
status_name:'',
|
||||
crawlData: null,
|
||||
crawlLoading: false,
|
||||
columns: [
|
||||
[{
|
||||
label: '正常',
|
||||
id: 1
|
||||
}, {
|
||||
label: '已售出',
|
||||
id: 2
|
||||
}, {
|
||||
label: '已归档',
|
||||
id: 3
|
||||
}]
|
||||
],
|
||||
priceDialogItem: null,
|
||||
priceDialogIndex: -1,
|
||||
priceDialogValue: '',
|
||||
options1: [{
|
||||
text: '编辑',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
}
|
||||
],
|
||||
keyword: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
loading: false,
|
||||
finished: false,
|
||||
list: [],
|
||||
priceForm: {
|
||||
trade_term:'',
|
||||
price: "", // 只存数字字符串
|
||||
currency: "USD", // USD | RUB | AED | EUR
|
||||
lang: "en" // en | ru | es | ar
|
||||
},
|
||||
currencyOptions: [
|
||||
{ value: "USD", text: "美元" },
|
||||
{ value: "CNY", text: "人民币" },
|
||||
{ value: "RUB", text: "卢布" },
|
||||
{ value: "AED", text: "迪拉姆" },
|
||||
{ value: "EUR", text: "欧元" }
|
||||
],
|
||||
langOptions: [
|
||||
{ text: "英语", value: "en" },
|
||||
{ text: "俄语", value: "ru" },
|
||||
{ text: "西班牙语", value: "es" },
|
||||
{ text: "阿拉伯语", value: "ar" }
|
||||
],
|
||||
tradeTermOptions: [
|
||||
{ value: "FOB", text: "FOB" },
|
||||
{ value: "CIF", text: "CIF" },
|
||||
{ value: "EXW", text: "EXW" },
|
||||
{ value: "DDP", text: "DDP" },
|
||||
{ value: "CIP", text: "CIP" },
|
||||
{ value: "FCA", text: "FCA" },
|
||||
{ value: "CFR", text: "CFR" }
|
||||
]
|
||||
}
|
||||
},
|
||||
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.priceForm = {
|
||||
trade_term:'',
|
||||
price:"",
|
||||
currency: "USD",
|
||||
lang: "en"
|
||||
}
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
closePriceDialog() {
|
||||
this.$refs.inputDialog.close()
|
||||
},
|
||||
|
||||
// 只允许数字 + 可选1个小数点（你要“纯整数”也行，我后面给你一行改法）
|
||||
onPriceInput(e) {
|
||||
let v = (e.detail && e.detail.value) ? String(e.detail.value) : String(this.priceForm.price || "")
|
||||
|
||||
// 过滤掉非数字和点
|
||||
v = v.replace(/[^\d.]/g, "")
|
||||
|
||||
// 只保留第一个小数点
|
||||
const parts = v.split(".")
|
||||
if (parts.length > 2) {
|
||||
v = parts[0] + "." + parts.slice(1).join("")
|
||||
}
|
||||
|
||||
// 去掉开头多余 0（保留 0.xxx）
|
||||
v = v.replace(/^0+(\d)/, "$1")
|
||||
if (v.startsWith(".")) v = "0" + v
|
||||
|
||||
this.priceForm.price = v
|
||||
},
|
||||
|
||||
onCurrencyPickerChange(e) {
|
||||
const idx = Number(e.detail.value || 0)
|
||||
this.currencyIndex = idx
|
||||
this.priceForm.currency = this.currencyOptions[idx]?.value || "USD"
|
||||
},
|
||||
|
||||
onLangChange(e) {
|
||||
this.priceForm.lang = e.detail.value
|
||||
},
|
||||
|
||||
confirmPriceDialog() {
|
||||
if (!this.priceForm.trade_term) {
|
||||
return uni.showToast({ title: "请选择贸易条款", icon: "none" })
|
||||
}
|
||||
// 校验
|
||||
if (!this.priceForm.price) {
|
||||
return uni.showToast({ title: "请输入价格", icon: "none" })
|
||||
}
|
||||
|
||||
const payload = {
|
||||
trade_term:this.priceForm.trade_term,
|
||||
price: this.priceForm.price, // 数字字符串
|
||||
currency: this.priceForm.currency, // USD/RUB/AED/EUR
|
||||
lang: this.priceForm.lang // en/ru/es/ar
|
||||
}
|
||||
console.log(payload)
|
||||
this.closePriceDialog()
|
||||
this.dialogInputConfirm(payload)
|
||||
},
|
||||
dialogInputConfirm(val) {
|
||||
const item = this.priceDialogItem
|
||||
const index = this.priceDialogIndex
|
||||
|
||||
if (!item) return
|
||||
if (!val.price) {
|
||||
uni.showToast({ title: '请输入价格', icon: 'none' })
|
||||
return
|
||||
}
|
||||
request({
|
||||
url: 'common/usedcar/produce/pdf',
|
||||
method: 'get',
|
||||
data: { id: item.id, price:val.price,currency:val.currency,lang:val.lang,trade_term:val.trade_term }
|
||||
}).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.$refs.paging && this.$refs.paging.reload()
|
||||
},
|
||||
queryList(pageNo, pageSize, from) {
|
||||
this.loading = true;
|
||||
var that = this;
|
||||
const params = {
|
||||
current:pageNo,
|
||||
status:this.status_id,
|
||||
size:pageSize
|
||||
};
|
||||
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();
|
||||
//
|
||||
})
|
||||
},
|
||||
onstatus(e){
|
||||
if (e.value && e.value[0]) {
|
||||
const selectedItem = typeof e.value[0] === 'object' ? e.value[0] : { value: e.value[0], label: e.value[0].toString() };
|
||||
this.status_name = selectedItem.label;
|
||||
this.status_id = selectedItem.id;
|
||||
this.show = false;
|
||||
this.$refs.paging && this.$refs.paging.reload()
|
||||
}
|
||||
},
|
||||
swipeClick(e,item){
|
||||
let {
|
||||
content
|
||||
} = e;
|
||||
const id = item.id
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/publishedit?id=${id}`
|
||||
})
|
||||
// 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}`
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onBindByName(){
|
||||
if (!this.urls || !this.urls.trim()) {
|
||||
uni.showToast({ title: '请输入抓取链接', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
this.crawlLoading = true
|
||||
this.crawlData = null
|
||||
this.$nextTick(() => {
|
||||
this.$refs.crawlDialog && this.$refs.crawlDialog.open()
|
||||
})
|
||||
|
||||
request({
|
||||
url:'common/usedcar/url_crawl',
|
||||
method:'get',
|
||||
data: {url:this.urls}
|
||||
}).then(res => {
|
||||
this.crawlLoading = false
|
||||
if (res.data.code == 200) {
|
||||
this.crawlData = res.data.data || res.data
|
||||
uni.showToast({ title: '抓取成功', icon: 'success' })
|
||||
} else {
|
||||
uni.showToast({ title: res.data.msg || '抓取失败', icon: 'none' })
|
||||
this.crawlData = null
|
||||
}
|
||||
}).catch(err => {
|
||||
this.crawlLoading = false
|
||||
this.crawlData = null
|
||||
console.error('抓取失败', err)
|
||||
uni.showToast({ title: '抓取失败', icon: 'none' })
|
||||
})
|
||||
},
|
||||
closeCrawlDialog() {
|
||||
this.$refs.crawlDialog && this.$refs.crawlDialog.close()
|
||||
this.crawlData = null
|
||||
this.crawlLoading = false
|
||||
},
|
||||
saveCrawlDialog(){
|
||||
function formatCnYearMonth(str) {
|
||||
const match = str.match(/(\d{4})年(\d{1,2})月/)
|
||||
if (!match) return str
|
||||
|
||||
const year = match[1]
|
||||
const month = match[2].padStart(2, '0')
|
||||
|
||||
return `${year}-${month}-01`
|
||||
}
|
||||
const payload = {
|
||||
...this.crawlData,
|
||||
plate_time:formatCnYearMonth(this.crawlData.plate_time),
|
||||
// images 数组 => "url1,url2,url3"
|
||||
images: (this.crawlData.images || [])
|
||||
.map(s => String(s || '').trim())
|
||||
.filter(Boolean)
|
||||
.join(',')
|
||||
}
|
||||
request({
|
||||
url:'common/usedcar/store',
|
||||
method:'post',
|
||||
data:payload
|
||||
}).then(res => {
|
||||
this.$refs.crawlDialog && this.$refs.crawlDialog.close()
|
||||
this.crawlData = null
|
||||
this.crawlLoading = false
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$refs.paging && this.$refs.paging.reload()
|
||||
}, 1000);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tradeTerm{
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f4f6f8;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.page {
|
||||
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
/* #endif */
|
||||
.dcd-search{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.bind-btn {
|
||||
padding: 8px 24px;
|
||||
background: #3F435B;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 28rpx;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bind-btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 18rpx;
|
||||
padding: 20rpx 10px;
|
||||
box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.statussearch{
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.list-wrap {
|
||||
padding: 18rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.loadmore {
|
||||
padding: 18rpx 0 6rpx;
|
||||
}
|
||||
.price-dialog{
|
||||
width: 640rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.pd-title{
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pd-row{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-row-col{
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.pd-label{
|
||||
width: 120rpx;
|
||||
font-size: 28rpx;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-input{
|
||||
flex:1;
|
||||
height: 66rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 18rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.pd-input-suffix-wrap{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pd-input-with-suffix{
|
||||
padding-right: 180rpx; /* 给右侧币种留空间 */
|
||||
}
|
||||
|
||||
.pd-currency-suffix{
|
||||
position: absolute;
|
||||
right: 14rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 140rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
::v-deep .uni-select{
|
||||
border: none !important;
|
||||
}
|
||||
.pd-radio-group{
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx 22rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.pd-radio{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.pd-radio-text{
|
||||
margin-left: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-actions{
|
||||
display:flex;
|
||||
gap: 18rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.pd-btn{
|
||||
flex:1;
|
||||
height: 84rpx;
|
||||
border-radius: 18rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.pd-cancel{
|
||||
background:#f5f5f5;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.pd-confirm{
|
||||
background:#3F435B; /* 你喜欢绿色风格 */
|
||||
color:#fff;
|
||||
font-weight:600;
|
||||
}
|
||||
.pd-price-line{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.pd-input-price{
|
||||
flex: 1;
|
||||
min-width: 240rpx;
|
||||
}
|
||||
|
||||
/* 抓取信息弹出层样式 */
|
||||
.crawl-dialog {
|
||||
width: 680rpx;
|
||||
max-height: 80vh;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.crawl-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
margin-bottom: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.crawl-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.crawl-loading {
|
||||
text-align: center;
|
||||
padding: 60rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.crawl-item {
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.crawl-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.crawl-label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.crawl-value {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.crawl-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.crawl-image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.crawl-actions {
|
||||
display: flex;
|
||||
gap: 18rpx;
|
||||
margin-top: 30rpx;
|
||||
padding-top: 30rpx;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.crawl-btn {
|
||||
flex: 1;
|
||||
height: 84rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.crawl-confirm1 {
|
||||
border:1px solid #3F435B;
|
||||
font-weight: 600;
|
||||
}
|
||||
.crawl-confirm {
|
||||
background: #3F435B;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,298 @@
|
||||
<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>
|
||||
@@ -0,0 +1,883 @@
|
||||
<template>
|
||||
|
||||
<view class="pages">
|
||||
<!-- <uni-nav-bar leftText=" " :fixed="true" :border="false" color="#fff" backgroundColor="#3F435B" :statusBar="true" title="二手车录入"></uni-nav-bar> -->
|
||||
<view class="content">
|
||||
<view class="cell">
|
||||
<view>产品名称 <text class="red">*</text></view>
|
||||
<view class="right right-bind">
|
||||
<input class="inp" placeholder="请输入车辆的品牌 系列查找车型" v-model="carinfo.product_name" />
|
||||
<view class="bind-btn" @tap.stop="onBindByName">绑定</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 绑定结果提示（已绑定时显示） -->
|
||||
<view v-if="bindState.boundProduct" class="bind-tip">
|
||||
<text class="bind-tip-text">已绑定：{{ bindState.boundProduct.name || bindState.boundProduct.product_name || bindState.boundProduct.title || '-' }}</text>
|
||||
<text class="bind-tip-clear" @tap.stop="clearBind">清除</text>
|
||||
</view>
|
||||
<view v-else class="bind-tip">
|
||||
<text>例：比亚迪海狮07DM</text>
|
||||
</view>
|
||||
<!-- <view class="cell">
|
||||
<view>车辆识别码</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入车架号/VIN码" v-model="carinfo.vin" />
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="cell">
|
||||
<view>车价(￥)</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入车价" v-model="carinfo.price" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<view>车源地</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入车源地" v-model="carinfo.source_place" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="cell">
|
||||
<view>上牌地</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入上牌地" v-model="carinfo.plate_place" />
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="cell">
|
||||
<view>上牌时间</view>
|
||||
<view class="right">
|
||||
<uni-datetime-picker
|
||||
ref="borrowTimePicker"
|
||||
type="date"
|
||||
v-model="carinfo.plate_time"
|
||||
placeholder="请选择时间"
|
||||
:border="false"
|
||||
:clear-icon="false"
|
||||
@change="onBorrowTimeChange"
|
||||
>
|
||||
<view class="custom-datetime-input">
|
||||
<text class="custom-datetime-text" :class="{ 'placeholder': !carinfo.plate_time }">
|
||||
{{ carinfo.plate_time || '请选择时间' }}
|
||||
</text>
|
||||
<uni-icons type="calendar" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</uni-datetime-picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<view>排量</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入排量" v-model="carinfo.displacement" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<view>马力</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入马力" v-model="carinfo.power" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<view>里程(Km)</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入里程" v-model="carinfo.mileage" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<view>车身颜色</view>
|
||||
<view class="right">
|
||||
<input placeholder="请输入车身颜色" v-model="carinfo.body_color" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="conts">产品图</view>
|
||||
<view class="media-upload-wrapper">
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="h5-picker-grid">
|
||||
<view class="h5-thumb" v-for="(u, idx) in imagesurl" :key="idx">
|
||||
<image :src="u" mode="aspectFill" class="h5-thumb-img"></image>
|
||||
<view class="h5-thumb-del" @tap.stop="delfn({ index: idx })">删除</view>
|
||||
</view>
|
||||
<view class="upload-icon-wrapper" @tap="pickImagesH5">
|
||||
<image src="/static/image/img.png" class="addimg"></image>
|
||||
<!-- <view class="h5-count">{{ carinfo.images.length }}/{{ maxMedia }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<uni-file-picker ref="mediaPicker" :limit="maxMedia" fileMediatype="image" @select="selectMedia" @delete="delfn" >
|
||||
<view class="upload-icon-wrapper">
|
||||
<image src="/static/image/img.png" class="addimg"></image>
|
||||
</view>
|
||||
</uni-file-picker>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="conts">车况介绍</view>
|
||||
<view class="">
|
||||
<textarea auto-height v-model="carinfo.condition_desc" placeholder="请输入车况介绍"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="conts">附件</view>
|
||||
<view class="media-upload-wrapper">
|
||||
<uni-file-picker ref="mediaPicker1" limit="20" fileMediatype="all" @select="selectMedia1" @delete="delfn1" >
|
||||
<view class="upload-icon-wrapper">
|
||||
<image src="/static/image/photo.png" mode="" class="addimg"></image>
|
||||
</view>
|
||||
</uni-file-picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zw">
|
||||
<button class="btn" @click="draftadd">提交</button>
|
||||
</view>
|
||||
|
||||
<!-- 绑定产品弹框 -->
|
||||
<view v-if="bindState.showDialog" class="bind-mask" @tap="closeBindDialog">
|
||||
<view class="bind-dialog" @tap.stop>
|
||||
<view class="bind-dialog-head">
|
||||
<text class="bind-dialog-title">选择要绑定的产品</text>
|
||||
<text class="bind-dialog-close" @tap="closeBindDialog">×</text>
|
||||
</view>
|
||||
|
||||
<!-- 弹框内搜索（仅过滤接口返回列表） -->
|
||||
<view class="bind-search" v-if="bindState.list && bindState.list.length">
|
||||
<input class="bind-search-input" v-model="bindState.keyword" placeholder="搜索产品名称" placeholder-class="bind-search-placeholder" />
|
||||
<text v-if="bindState.keyword" class="bind-search-clear" @tap.stop="bindState.keyword = ''">清除</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="bind-dialog-body">
|
||||
<view v-if="bindState.loading" class="bind-loading">加载中…</view>
|
||||
<view v-else-if="!bindState.list.length" class="bind-empty">未找到匹配的产品</view>
|
||||
<view v-else-if="!filteredBindList.length" class="bind-empty">未找到匹配结果</view>
|
||||
<view v-else>
|
||||
<view
|
||||
class="bind-item"
|
||||
:class="{ active: bindState.selectedId === getBindItemId(it, idx) }"
|
||||
v-for="(it, idx) in filteredBindList"
|
||||
:key="getBindItemId(it, idx)"
|
||||
@tap="selectBind(it, idx)"
|
||||
>
|
||||
<view class="bind-item-main">
|
||||
<text class="bind-item-title">{{ it.name || it.product_name || it.title || ('产品 ' + (idx + 1)) }}</text>
|
||||
<text class="bind-item-sub">{{ formatBindSub(it) }}</text>
|
||||
</view>
|
||||
<view class="bind-item-check">
|
||||
<view class="check-dot" v-if="bindState.selectedId === getBindItemId(it, idx)"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="bind-dialog-foot">
|
||||
<view class="btn btn-ghost" @tap="closeBindDialog">取消</view>
|
||||
<view class="btn btn-primary" :class="{ disabled: !bindState.selectedId }" @tap="confirmBind">确认绑定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<CustomTabBar class="h5-custom-tabbar" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
import CustomTabBar from '@/custom-tab-bar/index.vue'
|
||||
export default {
|
||||
components:{
|
||||
CustomTabBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maxMedia:20,
|
||||
bindState:{
|
||||
showDialog:false,
|
||||
loading:false,
|
||||
list:[],
|
||||
selectedId:'',
|
||||
boundProduct:null,
|
||||
keyword:''
|
||||
},
|
||||
imagesurl:[],
|
||||
carinfo:{
|
||||
product_name:'',
|
||||
vin:'',
|
||||
price:'',
|
||||
source_place:'',
|
||||
plate_place:'',
|
||||
plate_time:'',
|
||||
displacement:'',
|
||||
power:'',
|
||||
body_color:'',
|
||||
images:[],
|
||||
condition_desc:'',
|
||||
mileage:'',
|
||||
attachment:[],
|
||||
crawl_title:'',
|
||||
crawl_brand:'',
|
||||
crawl_series:'',
|
||||
crawl_year:'',
|
||||
crawl_msrp:'',
|
||||
crawl_car_id:'',
|
||||
crawl_brand_id:'',
|
||||
crawl_series_id:''
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
computed: {
|
||||
// 弹框内搜索过滤（仅前端过滤接口返回结果，不重复请求）
|
||||
filteredBindList() {
|
||||
const list = Array.isArray(this.bindState.list) ? this.bindState.list : []
|
||||
const kw = String(this.bindState.keyword || '').trim().toLowerCase()
|
||||
if (!kw) return list
|
||||
return list.filter((it, idx) => {
|
||||
const id = String(it.id || it.product_id || it.code || idx).toLowerCase()
|
||||
const name = String(it.name || it.product_name || it.title || '').toLowerCase()
|
||||
const sub = String(this.formatBindSub(it) || '').toLowerCase()
|
||||
return id.includes(kw) || name.includes(kw) || sub.includes(kw)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onBorrowTimeChange(e) {
|
||||
this.carinfo.plate_time = e
|
||||
},
|
||||
// 绑定：根据输入的“产品名称”拉取候选产品
|
||||
onBindByName() {
|
||||
const name = String(this.carinfo.product_name || '').trim()
|
||||
if (!name) {
|
||||
return uni.showToast({ title: '请先输入产品名称', icon: 'none' })
|
||||
}
|
||||
|
||||
// 打开弹框 + loading
|
||||
this.bindState.showDialog = true
|
||||
this.bindState.loading = true
|
||||
this.bindState.list = []
|
||||
this.bindState.selectedId = ''
|
||||
this.bindState.keyword = ''
|
||||
|
||||
/**
|
||||
* TODO：把这里的接口地址换成你真实的“按名称搜索产品”接口
|
||||
* - 传参：name（产品名称）
|
||||
* - 返回：数组（可能多个匹配）
|
||||
*/
|
||||
request({
|
||||
url: 'common/usedcar/crawl', // <== 这里改成你的真实接口
|
||||
method: 'get',
|
||||
data: { keyword:name }
|
||||
}).then(res => {
|
||||
if(res.data.code ==200){
|
||||
this.bindState.list = res.data.data.model
|
||||
}else{
|
||||
uni.showToast({ title: res.data.message, icon: 'none' })
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '拉取产品失败，请稍后重试', icon: 'none' })
|
||||
}).finally(() => {
|
||||
this.bindState.loading = false
|
||||
})
|
||||
},
|
||||
closeBindDialog() {
|
||||
this.bindState.showDialog = false
|
||||
this.bindState.keyword = ''
|
||||
},
|
||||
getBindItemId(it, idx) {
|
||||
return String(it.id || it.product_id || it.requisition_item_id || it.code || idx)
|
||||
},
|
||||
selectBind(it, idx) {
|
||||
this.bindState.selectedId = this.getBindItemId(it, idx)
|
||||
this.bindState._selected = it
|
||||
},
|
||||
formatBindSub(it) {
|
||||
// 按你接口字段自行补充展示：编码/规格/分类/库存等
|
||||
const parts = []
|
||||
if (it.sku || it.code) parts.push('编码：' + (it.sku || it.code))
|
||||
if (it.category_name) parts.push('分类：' + it.category_name)
|
||||
if (it.price) parts.push('价格：' + it.price)
|
||||
return parts.join(' · ')
|
||||
},
|
||||
confirmBind() {
|
||||
if (!this.bindState.selectedId || !this.bindState._selected) return
|
||||
|
||||
const it = this.bindState._selected
|
||||
|
||||
// 写入“已绑定”状态（你后续提交表单时可直接带上 bound_product_id）
|
||||
this.bindState.boundProduct = it
|
||||
this.carinfo.crawl_title = it.title
|
||||
this.carinfo.crawl_brand = it.brand_name
|
||||
this.carinfo.crawl_series = it.series_name
|
||||
this.carinfo.crawl_year = it.year
|
||||
this.carinfo.crawl_msrp = it.msrp
|
||||
this.carinfo.crawl_car_id = it.car_id
|
||||
this.carinfo.crawl_brand_id = it.brand_id
|
||||
this.carinfo.crawl_series_id = it.series_id
|
||||
console.log(it)
|
||||
this.closeBindDialog()
|
||||
uni.showToast({ title: '绑定成功', icon: 'none' })
|
||||
},
|
||||
clearBind() {
|
||||
this.carinfo.crawl_title = ''
|
||||
this.carinfo.crawl_brand = ''
|
||||
this.carinfo.crawl_series = ''
|
||||
this.carinfo.crawl_year = ''
|
||||
this.carinfo.crawl_msrp = ''
|
||||
this.carinfo.crawl_car_id = ''
|
||||
this.carinfo.crawl_brand_id = ''
|
||||
this.carinfo.crawl_series_id = ''
|
||||
this.bindState.boundProduct = null
|
||||
uni.showToast({ title: '已清除绑定', icon: 'none' })
|
||||
},
|
||||
|
||||
uploadfn(imgUrl,scene){
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: 'https://userdcar-server.hnxinyouhe.com/upload?scene='+scene,
|
||||
filePath: imgUrl,
|
||||
name: 'file',
|
||||
header:{'Fdesk-Auth-Token': uni.getStorageSync('token'),'Fdesk-Login-Type': 'feishu','Fdesk-System-Code':'fdesk'},
|
||||
success: (uploadFileRes) => {
|
||||
const res = JSON.parse(uploadFileRes.data || '{}')
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title:res.message,
|
||||
icon:'none'
|
||||
})
|
||||
if(res && res.data && res.data.file_name){
|
||||
resolve(res.data.file_name)
|
||||
}else{
|
||||
reject('上传失败')
|
||||
}
|
||||
},
|
||||
fail: (err) => reject(err)
|
||||
});
|
||||
})
|
||||
},
|
||||
uploadfndile(imgUrl,scene){
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: 'https://userdcar-server.hnxinyouhe.com/upload?scene='+scene,
|
||||
filePath: imgUrl,
|
||||
name: 'file',
|
||||
header:{'Fdesk-Auth-Token': uni.getStorageSync('token'),'Fdesk-Login-Type': 'feishu','Fdesk-System-Code':'fdesk'},
|
||||
success: (uploadFileRes) => {
|
||||
const res = JSON.parse(uploadFileRes.data || '{}')
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title:res.message,
|
||||
icon:'none'
|
||||
})
|
||||
if(res && res.data && res.data.file_name){
|
||||
resolve(res.data)
|
||||
}else{
|
||||
reject(res)
|
||||
}
|
||||
},
|
||||
fail: (err) => reject(err)
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
// H5 专用：绕过 uni.chooseImage/chooseMedia 的 9 张限制，使用 uni.chooseFile 支持最多 20 个
|
||||
pickImagesH5() {
|
||||
// const remain = this.maxMedia - this.carinfo.images.length
|
||||
// if (remain <= 0) {
|
||||
// return uni.showToast({ title: `最多只能上传${this.maxMedia}张`, icon: 'none' })
|
||||
// }
|
||||
uni.chooseFile({
|
||||
count: 100,
|
||||
type: 'image',
|
||||
success: (res) => {
|
||||
const paths = (res.tempFilePaths || (res.tempFiles || []).map(it => it.path)).filter(Boolean)
|
||||
if (!paths.length) return
|
||||
Promise.all(paths.map(p => this.uploadfndile(p, 'usedcarimg'))).then(urls => {
|
||||
urls.forEach(url => {
|
||||
this.imagesurl.push(url.file_url)
|
||||
this.carinfo.images.push(url.file_name)
|
||||
})
|
||||
}).catch((e) => {
|
||||
uni.showToast({ title: e.message, icon: 'none' })
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
pickAttachmentH5() {
|
||||
const remain = this.maxMedia - this.carinfo.attachment.length
|
||||
if (remain <= 0) {
|
||||
return uni.showToast({ title: `最多只能上传${this.maxMedia}个`, icon: 'none' })
|
||||
}
|
||||
uni.chooseFile({
|
||||
count: remain,
|
||||
type: 'all',
|
||||
success: (res) => {
|
||||
const files = res.tempFiles || []
|
||||
const paths = (res.tempFilePaths || files.map(it => it.path)).filter(Boolean)
|
||||
if (!paths.length) return
|
||||
Promise.all(paths.map(p => this.uploadfndile(p, 'usedcarfile'))).then(urls => {
|
||||
urls.forEach((url, idx) => {
|
||||
const obj = {}
|
||||
obj.name = url.original_name || files[idx]?.name || '附件'
|
||||
obj.src = url.file_name
|
||||
this.carinfo.attachment.push(obj)
|
||||
})
|
||||
}).catch(() => {
|
||||
uni.showToast({ title:e.message, icon: 'none' })
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
selectMedia(e){
|
||||
const allowCount = this.maxMedia - this.carinfo.images.length
|
||||
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
|
||||
const paths = tempFilePaths.slice(0, allowCount)
|
||||
if(paths.length === 0){
|
||||
return
|
||||
}
|
||||
Promise.all(paths.map(p => this.uploadfn(p,'usedcarimg'))).then(urls => {
|
||||
urls.forEach(url => {
|
||||
this.carinfo.images.push(url)
|
||||
})
|
||||
}).catch(() => {
|
||||
uni.showToast({
|
||||
title:'图片上传失败，请重试',
|
||||
icon:'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
delfn(e){
|
||||
this.imagesurl.splice(e.index, 1)
|
||||
this.carinfo.images.splice(e.index, 1)
|
||||
},
|
||||
selectMedia1(e){
|
||||
const allowCount = this.maxMedia - this.carinfo.attachment.length
|
||||
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
|
||||
const paths = tempFilePaths.slice(0, allowCount)
|
||||
if(paths.length === 0){
|
||||
return
|
||||
}
|
||||
Promise.all(paths.map(p => this.uploadfndile(p,'usedcarfile'))).then(urls => {
|
||||
urls.forEach(url => {
|
||||
const obj={}
|
||||
obj.name =url.original_name
|
||||
obj.src =url.file_name
|
||||
this.carinfo.attachment.push(obj)
|
||||
})
|
||||
}).catch(() => {
|
||||
uni.showToast({
|
||||
title:'图片上传失败，请重试',
|
||||
icon:'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
delfn1(e){
|
||||
this.carinfo.attachment.splice(e.index, 1)
|
||||
},
|
||||
draftadd(){
|
||||
const payload = {
|
||||
...this.carinfo,
|
||||
// images 数组 => "url1,url2,url3"
|
||||
images: (this.carinfo.images || [])
|
||||
.map(s => String(s || '').trim())
|
||||
.filter(Boolean)
|
||||
.join(',')
|
||||
}
|
||||
request({
|
||||
url:'common/usedcar/store',
|
||||
method:'post',
|
||||
data:payload
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',// 替换为你要跳 转的页面路径
|
||||
});
|
||||
}, 1000);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pages{
|
||||
max-width: 650px;
|
||||
}
|
||||
/* #ifdef H5 */
|
||||
.pages{
|
||||
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
/* #endif */
|
||||
.uniui-right{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
.red{
|
||||
color: red;
|
||||
}
|
||||
.content{
|
||||
// margin: 20px 12px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.zw{
|
||||
height: 120px;
|
||||
}
|
||||
.cont{
|
||||
position: relative;
|
||||
padding: 18px 20px;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.conts{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.media-upload-wrapper{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.cell{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding: 14px 10px;
|
||||
/* border-bottom: 1px solid #C3C3C3; */
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.cont::after,.cell::after{
|
||||
content : '';
|
||||
position : absolute;
|
||||
width : 200%;
|
||||
height : 200%;
|
||||
top : 0;
|
||||
left : 0;
|
||||
transform-origin: 0 0;
|
||||
border-width: 0;
|
||||
border-bottom-width:1px;
|
||||
border-style : solid;
|
||||
transform : scale(0.5, 0.5);
|
||||
border-radius : 1px;
|
||||
box-sizing : border-box;
|
||||
pointer-events : none;
|
||||
border-color:#C3C3C3;
|
||||
}
|
||||
.cell1{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding: 18px 20px;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.right{
|
||||
text-align: right;
|
||||
}
|
||||
.select{
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.foot{
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #FFFFFF;
|
||||
z-index: 2;
|
||||
}
|
||||
.btn{
|
||||
background-color: #3F435B;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 92%;
|
||||
margin-bottom: 40px;
|
||||
margin: 15px 4%;
|
||||
}
|
||||
|
||||
.actives{
|
||||
background-color: #dfdfdf;
|
||||
}
|
||||
.text{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 30px;
|
||||
padding: 10px 15px 0px;
|
||||
.qd{
|
||||
color: #3471FF;
|
||||
}
|
||||
}
|
||||
.popup-content {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.option-list {
|
||||
max-height: 400rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.option-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
.addimg{
|
||||
width: 215rpx;
|
||||
height: 215rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 产品名称 + 绑定按钮 */
|
||||
.right-bind{
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 74%;
|
||||
}
|
||||
.right-bind .inp{
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.bind-btn{
|
||||
margin-left: 16rpx;
|
||||
padding: 0 18rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #2E6CF6;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.bind-tip{
|
||||
// margin: 0 24rpx 16rpx;
|
||||
padding: 12rpx 18rpx;
|
||||
// border-radius: 12rpx;
|
||||
background: #F3F6FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bind-tip-text{
|
||||
color: #2B3A55;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.bind-tip-clear{
|
||||
color: #2E6CF6;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 弹框搜索 */
|
||||
.bind-search{
|
||||
margin: 5px 24rpx 16rpx;
|
||||
padding: 12rpx 18rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #F3F6FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bind-search-input{
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
.bind-search-placeholder{
|
||||
color: #9AA6BF;
|
||||
}
|
||||
.bind-search-clear{
|
||||
margin-left: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #2E6CF6;
|
||||
}
|
||||
|
||||
/* 绑定弹框 */
|
||||
.bind-mask{
|
||||
position: fixed;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.45);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
}
|
||||
.bind-dialog{
|
||||
width: 100%;
|
||||
max-width: 680rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bind-dialog-head{
|
||||
height: 96rpx;
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.bind-dialog-title{
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
}
|
||||
.bind-dialog-close{
|
||||
font-size: 40rpx;
|
||||
color: #999;
|
||||
line-height: 1;
|
||||
}
|
||||
.bind-dialog-body{
|
||||
max-height: 720rpx;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
.bind-loading,.bind-empty{
|
||||
padding: 40rpx 24rpx;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.bind-item{
|
||||
padding: 18rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bind-item.active{
|
||||
background: #F3F6FF;
|
||||
}
|
||||
.bind-item-main{
|
||||
flex: 1;
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
.bind-item-title{
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
display: block;
|
||||
}
|
||||
.bind-item-sub{
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #777;
|
||||
display: block;
|
||||
}
|
||||
.bind-item-check{
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #2E6CF6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.check-dot{
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
background: #2E6CF6;
|
||||
}
|
||||
.bind-dialog-foot{
|
||||
padding: 16rpx 24rpx 22rpx;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.btn{
|
||||
flex: 1;
|
||||
height: 76rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.btn-ghost{
|
||||
background: #F5F6F8;
|
||||
color: #333;
|
||||
}
|
||||
.btn-primary{
|
||||
background: #2E6CF6;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary.disabled{
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* H5 自定义选择器：用于突破 9 个限制（H5 最多 20） */
|
||||
.h5-picker-grid{
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap: 16rpx;
|
||||
align-items:flex-start;
|
||||
}
|
||||
.h5-thumb{
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow:hidden;
|
||||
position: relative;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
.h5-thumb-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.h5-thumb-del{
|
||||
position:absolute;
|
||||
right: 8rpx;
|
||||
top: 8rpx;
|
||||
background: rgba(0,0,0,0.45);
|
||||
color:#fff;
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 10rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
.h5-count{
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color:#999;
|
||||
text-align:center;
|
||||
}
|
||||
.h5-attach-grid .h5-attach{
|
||||
width: 210rpx;
|
||||
min-height: 120rpx;
|
||||
padding: 16rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 12rpx;
|
||||
background: #fafafa;
|
||||
position: relative;
|
||||
}
|
||||
.h5-attach-name{
|
||||
font-size: 24rpx;
|
||||
color:#333;
|
||||
word-break: break-all;
|
||||
padding-right: 60rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<view class="auth-page">
|
||||
<view class="auth-card">
|
||||
<view v-if="status === 'loading'">
|
||||
<view class="spinner"></view>
|
||||
<view class="text-wrap">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="desc">{{ desc }}<text class="dots">{{ dots }}</text></text>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class="bar"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="error-wrap">
|
||||
<uni-icons type="clear" size="44" color="#ff4d4f"></uni-icons>
|
||||
<text class="title">登录失败</text>
|
||||
<text class="desc">{{ errorMsg }}</text>
|
||||
<button class="retry-btn" @click="retry">重试</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from '@/api/apiT.js'
|
||||
import { saveRoles } from '@/common/role.js'
|
||||
import { getVisibleTabBar } from '@/common/tabbar.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: 'loading',
|
||||
title: '正在完成登录',
|
||||
desc: '处理中',
|
||||
dots: '',
|
||||
errorMsg: '请稍后重试',
|
||||
_dotTimer: null,
|
||||
minStayMs: 600,
|
||||
_startedAt: 0,
|
||||
_code: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this._startedAt = Date.now()
|
||||
this.startDots()
|
||||
// #ifdef H5
|
||||
this._code = options.code || ''
|
||||
// 支持从回调参数里带 redirect（有些场景会拼到回调地址上）
|
||||
const redirect = options.redirect || options.r || ''
|
||||
if (redirect) {
|
||||
try {
|
||||
uni.setStorageSync('post_login_redirect', decodeURIComponent(redirect))
|
||||
} catch (e) {
|
||||
uni.setStorageSync('post_login_redirect', redirect)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
if (!this._code) {
|
||||
this.fail('缺少 code 参数')
|
||||
return
|
||||
}
|
||||
this.logins(this._code)
|
||||
},
|
||||
onUnload() {
|
||||
this.stopDots()
|
||||
},
|
||||
methods: {
|
||||
startDots() {
|
||||
this.stopDots()
|
||||
let n = 0
|
||||
this._dotTimer = setInterval(() => {
|
||||
n = (n + 1) % 4
|
||||
this.dots = '.'.repeat(n)
|
||||
}, 350)
|
||||
},
|
||||
stopDots() {
|
||||
if (this._dotTimer) {
|
||||
clearInterval(this._dotTimer)
|
||||
this._dotTimer = null
|
||||
}
|
||||
},
|
||||
fail(msg) {
|
||||
this.status = 'error'
|
||||
this.errorMsg = msg || '请稍后重试'
|
||||
uni.showToast({ title: msg || '登录失败', icon: 'none' })
|
||||
},
|
||||
async logins(code) {
|
||||
try {
|
||||
this.title = '正在交换登录凭证'
|
||||
this.desc = '请稍候'
|
||||
|
||||
const res = await request({
|
||||
url: 'common/auth/login',
|
||||
method: 'POST',
|
||||
loginType: 'feishu', // 飞书登录
|
||||
data: { feishu_code: code, app_id: uni.getStorageSync('fsappid'), is_pc: 0 }
|
||||
})
|
||||
|
||||
if (res.data.code !== 200) {
|
||||
throw new Error(res.data.message || '登录失败')
|
||||
}
|
||||
|
||||
const data = res.data.data
|
||||
|
||||
// 保存登录类型
|
||||
uni.setStorageSync('loginType', 'feishu')
|
||||
|
||||
// 统一使用 union_id 作为 token（与PC端保持一致）
|
||||
const token = data.union_id || data.token
|
||||
if (!token) {
|
||||
throw new Error('未获取到 token')
|
||||
}
|
||||
|
||||
uni.setStorageSync('token', token)
|
||||
|
||||
// 保存用户信息
|
||||
const userInfo = {
|
||||
...data,
|
||||
token: token
|
||||
}
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
|
||||
// 处理角色信息（统一使用 role.js 工具）
|
||||
if (data.role) {
|
||||
saveRoles(data.role, data.role_wp)
|
||||
|
||||
// 通知自定义 TabBar 刷新
|
||||
uni.$emit && uni.$emit('userRoleChanged')
|
||||
}
|
||||
|
||||
this.title = '登录成功'
|
||||
this.desc = '正在进入页面'
|
||||
|
||||
this.goRedirectSmooth()
|
||||
} catch (err) {
|
||||
console.error('[feishu callback] error:', err)
|
||||
this.fail(err?.message || '登录失败')
|
||||
}
|
||||
},
|
||||
goRedirectSmooth() {
|
||||
const elapsed = Date.now() - this._startedAt
|
||||
const wait = Math.max(0, this.minStayMs - elapsed)
|
||||
setTimeout(() => {
|
||||
// 获取用户可见的TabBar列表
|
||||
const visibleTabs = getVisibleTabBar()
|
||||
// 检查是否包含首页Tab
|
||||
const hasIndexTab = visibleTabs.some(tab => tab.pagePath === 'pages/index/index')
|
||||
// 默认跳转目标：有首页进入首页，否则进入我的页面
|
||||
const defaultTarget = hasIndexTab ? '/pages/index/index' : '/pages/index/mine'
|
||||
// 优先使用存储的跳转地址
|
||||
const target = uni.getStorageSync('post_login_redirect') || defaultTarget
|
||||
uni.removeStorageSync('post_login_redirect')
|
||||
uni.reLaunch({ url: target })
|
||||
}, wait)
|
||||
},
|
||||
retry() {
|
||||
this.status = 'loading'
|
||||
this.title = '正在完成登录'
|
||||
this.desc = '处理中'
|
||||
this.startDots()
|
||||
if (this._code) this.logins(this._code)
|
||||
else this.fail('缺少 code 参数')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.auth-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, #FF972F 0%, #F4F6F8 38%, #F4F6F8 100%);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 640rpx;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-radius: 20rpx;
|
||||
padding: 44rpx 36rpx 32rpx;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
border: 8rpx solid rgba(255,151,47, 0.18);
|
||||
border-top-color: #FF972F;
|
||||
animation: spin 0.9s linear infinite;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: inline-block;
|
||||
width: 40rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 10rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255,151,47, 0.10);
|
||||
overflow: hidden;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.progress .bar {
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255,151,47, 0.55);
|
||||
animation: move 1.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.error-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 24rpx;
|
||||
width: 240rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #FF972F;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% { transform: translateX(-60%); }
|
||||
50% { transform: translateX(140%); }
|
||||
100% { transform: translateX(-60%); }
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user