赵忠林
1bf7caf34e
- 在房源添加页面添加卖价(元/平)和总价(万)输入字段 - 实现卖价变动时总价自动计算功能 - 在房源详情页显示卖价和总价信息 - 调整物业费显示位置提升界面布局合理性 - 更新服务器配置地址从gxwebsoft.com到websoft.top - 替换必看好房标签为特价好房标签统一显示 - 修复房源详情页分享功能和海报生成流程 - 添加跟进记录页面和相应跳转功能 - 优化房源管理页面删除按钮显示逻辑 - 实现闪屏页跳过功能和登录状态记忆 - 添加房源海报生成组件支持分享推广 - 修复分享路径参数传递和用户信息存储
1190 lines
27 KiB
Vue
1190 lines
27 KiB
Vue
<template>
|
||
<view class="page">
|
||
|
||
<!-- 幻灯片 -->
|
||
<view class="swiper">
|
||
<view v-show="swiperType == 'image'">
|
||
<u-swiper :list="swiperList" height="500rpx" :radius="0" @change="e => currentNum = e.current"
|
||
indicatorStyle="right: 20px; bottom: 50px" @click="onSwiper" @longpress="onImageLongPress">
|
||
<view slot="indicator" class="indicator-num">
|
||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
|
||
</view>
|
||
</u-swiper>
|
||
<!-- 图片下载按钮 -->
|
||
<view class="download-btn" @click="downloadCurrentImage" v-if="swiperList.length > 0">
|
||
<u-icon name="download" color="#ffffff" size="20"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="video-box" v-show="swiperType == 'video'">
|
||
<video loop class="swiper-video" muted :autoplay="true" :src="form.videoUrl" @longpress="onVideoLongPress"></video>
|
||
<!-- 视频下载按钮 -->
|
||
<view class="download-btn2" @click="downloadCurrentVideo" v-if="form.videoUrl">
|
||
<u-icon name="download" color="#ffffff" size="20"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="swiper-switch">
|
||
<view @click="swiperType = 'image'" :class="{active: swiperType == 'image'}" class="swiper-switch-item">
|
||
图片</view>
|
||
<view @click="swiperType = 'video'" :class="{active: swiperType == 'video'}" class="swiper-switch-item">
|
||
视频</view>
|
||
</view>
|
||
|
||
|
||
<!-- 房源参数 -->
|
||
<view class="house-info">
|
||
<view class="title">
|
||
{{ form.houseTitle || '' }}
|
||
<!-- 五象航洋城三室一厅采光好新房精装修三房一厅 采光好，乘诚意出售 -->
|
||
</view>
|
||
<scroll-view scroll-x class="">
|
||
<view class="label">
|
||
<view class="u-page__tag-item" :key="index" v-for="(tag, index) in form.houseLabel">
|
||
<u-tag :text="tag" type="primary" plain size="mini"></u-tag>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="dict">
|
||
<view class="dict-item">
|
||
<text class="title">{{ form.monthlyRent || 0 }}元/月</text>
|
||
<text class="desc">月租</text>
|
||
</view>
|
||
<view class="dict-item">
|
||
<text class="title">{{ form.extent || 0 }}m²</text>
|
||
<text class="desc">建筑面积</text>
|
||
</view>
|
||
<view class="dict-item">
|
||
<text class="title">{{ form.houseType || '' }}</text>
|
||
<text class="desc">户型</text>
|
||
</view>
|
||
<view class="dict-item">
|
||
<text class="title">{{ form.floor || '' }}</text>
|
||
<text class="desc">楼层</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 房源介绍 -->
|
||
<u-gap height="124"></u-gap>
|
||
<view class="house-card">
|
||
<view class="title">
|
||
房源介绍
|
||
</view>
|
||
<view class="field-list">
|
||
<view class="item col-2">
|
||
城市：{{ form.city || '' }}
|
||
</view>
|
||
<view class="item col-2">
|
||
区/县：{{ form.region || '' }}
|
||
</view>
|
||
<view class="item col-1">
|
||
物业地址：{{ form.address || '' }}
|
||
</view>
|
||
<view class="item col-2">
|
||
租金(元/m²)：{{ form.rent || '' }}
|
||
</view>
|
||
<view class="item col-2">
|
||
楼层：{{ form.floor || '' }}
|
||
</view>
|
||
<view class="item col-2">
|
||
朝向：{{ form.toward || '' }}
|
||
</view>
|
||
<view class="item col-2">
|
||
押付方式：{{ form.leaseMethod || '' }}
|
||
</view>
|
||
<view v-if="isManager" class="item col-2">
|
||
房号：{{ form.roomNumber || '' }}
|
||
</view>
|
||
<view v-if="isManager" class="item col-2">
|
||
如何看房：{{ form.password || '' }}
|
||
</view>
|
||
<view v-if="isManager" class="item col-2" @click="makePhoneCall">业主电话：{{ form.phone || '' }}</view>
|
||
<view class="item col-2">物业费(元/m²)：{{ form.propertyFees || '' }}</view>
|
||
<!-- <view v-if="isManager" class="item col-2">租期：{{ form.tenancy || '' }}</view> -->
|
||
<view class="item col-2" v-if="isManager">
|
||
佣金：{{ form.commission || '' }}
|
||
</view>
|
||
<!-- <view class="item col-2" v-if="isManager">
|
||
是否可溢价：{{ form.premium || '' }}
|
||
</view> -->
|
||
<view v-if="form.salePrice" class="item col-2">卖价：{{ form.salePrice || '' }}元/m²</view>
|
||
<view v-if="form.totalPrice" class="item col-2">总价：{{ form.totalPrice || '' }}万元</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 办公室配套 -->
|
||
<u-gap v-if="form.supporting"></u-gap>
|
||
<view v-if="form.supporting" class="house-card">
|
||
<view class="title">
|
||
办公室配套
|
||
</view>
|
||
<view class="about">
|
||
{{form.supporting}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 房源介绍 -->
|
||
<u-gap></u-gap>
|
||
<view class="house-card">
|
||
<view class="title">
|
||
房源介绍
|
||
</view>
|
||
<view class="about">
|
||
<mp-html :content="form.content" />
|
||
</view>
|
||
</view>
|
||
|
||
<template v-if="isManager">
|
||
<u-gap></u-gap>
|
||
<view class="house-card" style="background-color:azure;">
|
||
<view class="title" style="display: flex; flex-direction: row; justify-content: space-between; width: 100%;">
|
||
<view class="title">管理员备注</view>
|
||
<view><button size="mini" type="primary" @click="$push('sub_pages/house/record?houseId=' + form.houseId)">跟进记录</button></view>
|
||
</view>
|
||
<view class="about">
|
||
<mp-html :content="form.comments" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 房源位置 -->
|
||
<u-gap></u-gap>
|
||
<view class="house-card">
|
||
<view class="title">
|
||
房源位置
|
||
</view>
|
||
<view class="position">
|
||
<map style="width: 100%; height: 200px;" :latitude="form.latitude" :longitude="form.longitude"
|
||
:markers="covers">
|
||
</map>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 房产经纪人 -->
|
||
<u-gap></u-gap>
|
||
<view class="user-card">
|
||
<u-cell :title="`${form.nickname}`" :label="`发布房源10套`" :border="false">
|
||
<u-avatar slot="icon" size="50" :src="form.avatar" customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||
<!-- <view solt="label">
|
||
<text class="desc-text">{{ `ID：${item.userId}` }}</text>
|
||
<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
|
||
</view> -->
|
||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||
<text style="color: #666666;">******</text>
|
||
<!-- <text style="color: #666666;">{{ mobile || form.userPhone }}</text> -->
|
||
</view>
|
||
</u-cell>
|
||
</view>
|
||
|
||
|
||
<!-- 操作栏 -->
|
||
<u-gap height="100"></u-gap>
|
||
<view class="pay-tools">
|
||
<view class="item" @click="onHeart">
|
||
<u-icon name="heart-fill" size="28" color="#ff0000" v-if="form.liked"></u-icon>
|
||
<u-icon name="heart" size="28" v-else></u-icon>
|
||
<text v-if="form.liked">已收藏</text>
|
||
<text v-else>收藏</text>
|
||
</view>
|
||
<!-- <view class="item" @click="onShare">
|
||
<u-icon name="share" size="28" color="#666666"></u-icon>
|
||
<text>分享</text>
|
||
</view> -->
|
||
<!-- <view class="item">
|
||
<u-button icon="map" type="error" text="预约看房" disabled
|
||
@click="$push('sub_pages/checkout/checkout?id=' + form.houseId)"></u-button>
|
||
</view> -->
|
||
<view class="item">
|
||
<u-button icon="phone" type="primary" text="电话咨询"></u-button>
|
||
<!-- <u-button icon="phone" type="primary" text="电话咨询" @click="makePhoneCall()"></u-button> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分享弹窗 -->
|
||
<ShareSheet
|
||
v-model="showShareSheet"
|
||
:shareTitle="shareTitle"
|
||
:shareImageUrl="shareImageUrl"
|
||
:posterApiCall="handleGenerateHousePoster"
|
||
:posterApiParam="posterApiParam"
|
||
/>
|
||
|
||
<!-- 房源海报生成器 -->
|
||
<HousePosterGenerator
|
||
ref="housePosterGenerator"
|
||
:houseData="form"
|
||
:swiperList="swiperList"
|
||
@posterGenerated="onPosterGenerated"
|
||
/>
|
||
|
||
<!-- 海报预览弹窗 -->
|
||
<GoodsPosterPopup
|
||
v-model="showPosterPreview"
|
||
:apiCall="posterPreviewApiCall"
|
||
:apiParam="{}"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as Util from '@/utils/util.js'
|
||
import * as HouseInfoApi from '@/api/house-info.js'
|
||
import * as DictApi from '@/api/dict.js'
|
||
import {
|
||
getAgentUser,
|
||
getUser
|
||
} from '@/api/user.js'
|
||
import ShareSheet from '@/components/share-sheet'
|
||
import HousePosterGenerator from '@/components/house-poster-generator'
|
||
import GoodsPosterPopup from '@/components/goods-poster-popup'
|
||
|
||
const menu = [{
|
||
name: '推荐',
|
||
reset: true
|
||
},
|
||
{
|
||
name: '特价好房',
|
||
reset: false
|
||
}
|
||
];
|
||
const region = [{
|
||
value: 0,
|
||
text: "青秀区"
|
||
},
|
||
{
|
||
value: 1,
|
||
text: "兴宁区"
|
||
}
|
||
];
|
||
const price = [{
|
||
value: 0,
|
||
text: "3000"
|
||
},
|
||
{
|
||
value: 1,
|
||
text: "4000"
|
||
}
|
||
];
|
||
const extent = [{
|
||
value: 0,
|
||
text: "200平"
|
||
},
|
||
{
|
||
value: 1,
|
||
text: "300平"
|
||
}
|
||
];
|
||
const sort = [{
|
||
value: 0,
|
||
text: "升序"
|
||
},
|
||
{
|
||
value: 1,
|
||
text: "降序"
|
||
}
|
||
];
|
||
const baseList = [{
|
||
name: 'star',
|
||
title: '价格低'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '间隔'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '工区大'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '朝向东'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '朝向西'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '朝向南'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '朝向北'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '中间楼层'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '高楼层'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '低楼层'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '落地窗'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '通上下水'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '可做厨房'
|
||
},
|
||
{
|
||
name: 'star',
|
||
title: '中央空调'
|
||
},
|
||
]
|
||
const loginUserId = uni.getStorageSync('userId')
|
||
|
||
export default {
|
||
components: {
|
||
ShareSheet,
|
||
HousePosterGenerator,
|
||
GoodsPosterPopup
|
||
},
|
||
data() {
|
||
return {
|
||
houseId: 0,
|
||
form: {
|
||
|
||
},
|
||
swiperList: [],
|
||
menu,
|
||
region,
|
||
price,
|
||
extent,
|
||
sort,
|
||
baseList,
|
||
currentNum: 0,
|
||
scrollTop: 0,
|
||
old: {
|
||
scrollTop: 0
|
||
},
|
||
actionStyle: {
|
||
background: '#3f72f4',
|
||
color: '#ffffff',
|
||
padding: '12rpx 0',
|
||
borderRadius: '12rpx'
|
||
},
|
||
swiperType: 'image',
|
||
latitude: 39.909,
|
||
longitude: 116.39742,
|
||
covers: [{
|
||
latitude: 39.909,
|
||
longitude: 116.39742,
|
||
iconPath: 'https://oss.wsdns.cn/20230803/49fe9c001370488caf29c3decb34f6c7.png?x-oss-process=image/resize,w_750/quality,Q_90'
|
||
}],
|
||
agentUser: {},
|
||
isManager: false,
|
||
phone: '',
|
||
// 分享相关数据
|
||
showShareSheet: false,
|
||
shareTitle: '',
|
||
shareImageUrl: '',
|
||
posterApiParam: {},
|
||
// 海报预览相关
|
||
showPosterPreview: false,
|
||
currentPosterUrl: '',
|
||
dealerId: 0,
|
||
mobile: ''
|
||
};
|
||
|
||
},
|
||
onLoad(options) {
|
||
this.houseId = options.houseId
|
||
this.getHouseInfo()
|
||
|
||
if (options.user_id) {
|
||
getAgentUser(options.user_id).then(res => {
|
||
this.agentUser = res.data
|
||
})
|
||
} else {
|
||
DictApi.getDictionaryOptions({
|
||
dictCode: 'service'
|
||
}).then(res => {
|
||
this.phone = res.data[0].dictDataCode
|
||
})
|
||
}
|
||
getUser().then(res => {
|
||
this.isManager = res.data.gradeId == 16
|
||
}).catch((err) => {
|
||
console.log(err);
|
||
})
|
||
if(options.dealerId){
|
||
this.dealerId = options.dealerId
|
||
}
|
||
if(options.mobile){
|
||
this.mobile = options.phone
|
||
}
|
||
|
||
|
||
},
|
||
onShow() {},
|
||
onBackPress() {},
|
||
onUnload() {
|
||
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: this.form.houseTitle,
|
||
path: `/sub_pages/house/detail?houseId=${this.form.houseId}&dealerId=${uni.setStorageSync('userId')}&mobile=${uni.getStorageInfoSync('Phone')}`
|
||
}
|
||
},
|
||
onShareTimeline() {
|
||
return {
|
||
title: this.form.houseTitle,
|
||
query: this.form.houseId
|
||
}
|
||
},
|
||
methods: {
|
||
onSwiper(e) {
|
||
console.log(e,'deeeeee')
|
||
},
|
||
// 图片长按事件
|
||
onImageLongPress() {
|
||
if (this.swiperList.length > 0) {
|
||
uni.showActionSheet({
|
||
itemList: ['下载当前图片', '下载所有图片'],
|
||
success: (res) => {
|
||
if (res.tapIndex === 0) {
|
||
this.downloadCurrentImage();
|
||
} else if (res.tapIndex === 1) {
|
||
this.downloadAllImages();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 视频长按事件
|
||
onVideoLongPress() {
|
||
if (this.form.videoUrl) {
|
||
uni.showActionSheet({
|
||
itemList: ['下载视频'],
|
||
success: (res) => {
|
||
if (res.tapIndex === 0) {
|
||
this.downloadCurrentVideo();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 下载当前图片
|
||
downloadCurrentImage() {
|
||
if (this.swiperList.length === 0) {
|
||
uni.showToast({
|
||
title: '暂无图片',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
const currentImage = this.swiperList[this.currentNum];
|
||
const imageUrl = currentImage.image || currentImage.src || currentImage;
|
||
console.log(imageUrl,'imageUrl')
|
||
if (!imageUrl.url) {
|
||
uni.showToast({
|
||
title: '图片地址无效',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
Util.downloadImage(imageUrl.url);
|
||
},
|
||
// 下载所有图片
|
||
downloadAllImages() {
|
||
if (this.swiperList.length === 0) {
|
||
uni.showToast({
|
||
title: '暂无图片',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.showModal({
|
||
title: '确认下载',
|
||
content: `确定要下载所有 ${this.swiperList.length} 张图片吗？`,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.batchDownloadImages();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 批量下载图片
|
||
batchDownloadImages() {
|
||
let downloadCount = 0;
|
||
let successCount = 0;
|
||
let failCount = 0;
|
||
const totalCount = this.swiperList.length;
|
||
|
||
uni.showLoading({
|
||
title: `下载中 0/${totalCount}`,
|
||
mask: true
|
||
});
|
||
|
||
this.swiperList.forEach((item, index) => {
|
||
const imageUrl = item.image || item.src || item;
|
||
|
||
if (!imageUrl) {
|
||
downloadCount++;
|
||
failCount++;
|
||
this.updateBatchProgress(downloadCount, successCount, failCount, totalCount);
|
||
return;
|
||
}
|
||
|
||
setTimeout(() => {
|
||
Util.downloadImage(
|
||
imageUrl,
|
||
() => {
|
||
downloadCount++;
|
||
successCount++;
|
||
this.updateBatchProgress(downloadCount, successCount, failCount, totalCount);
|
||
},
|
||
() => {
|
||
downloadCount++;
|
||
failCount++;
|
||
this.updateBatchProgress(downloadCount, successCount, failCount, totalCount);
|
||
}
|
||
);
|
||
}, index * 1000); // 每张图片间隔1秒下载，避免并发过多
|
||
});
|
||
},
|
||
// 更新批量下载进度
|
||
updateBatchProgress(downloadCount, successCount, failCount, totalCount) {
|
||
if (downloadCount < totalCount) {
|
||
uni.showLoading({
|
||
title: `下载中 ${downloadCount}/${totalCount}`,
|
||
mask: true
|
||
});
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: '下载完成',
|
||
content: `成功：${successCount}张，失败：${failCount}张`,
|
||
showCancel: false
|
||
});
|
||
}
|
||
},
|
||
// 下载当前视频
|
||
downloadCurrentVideo() {
|
||
if (!this.form.videoUrl) {
|
||
uni.showToast({
|
||
title: '暂无视频',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
Util.downloadVideo(this.form.videoUrl);
|
||
},
|
||
getHouseInfo() {
|
||
const app = this
|
||
const {
|
||
houseId
|
||
} = this
|
||
HouseInfoApi.getHouseInfo(houseId).then(res => {
|
||
app.form = res.data
|
||
app.form.files = JSON.parse(res.data.files) || []
|
||
app.swiperList = app.form.files
|
||
app.form.houseLabel = JSON.parse(res.data.houseLabel) || []
|
||
// app.form.supporting = JSON.parse(res.data.supporting) || []
|
||
|
||
try {
|
||
app.form.supporting = JSON.parse(app.form.supporting)
|
||
console.log('app.form.supporting: ', app.form.supporting);
|
||
} catch (e) {
|
||
console.log(e);
|
||
//TODO handle the exception
|
||
}
|
||
|
||
uni.$u.mpShare = {
|
||
title: `${app.form.houseTitle} ${app.form.monthlyRent}元/月 ${app.form.houseType} ${app.form.extent}m²`,
|
||
path: `sub_pages/house/detail?houseId=${app.form.houseId}&user_id=${uni.getStorageSync('userId')}`
|
||
// path: '' + app.form.houseId + app.form.monthlyRent + '&user_id=' + uni.getStorageSync('userId')
|
||
}
|
||
}).catch(err => {
|
||
app.$error(err.message)
|
||
})
|
||
},
|
||
onHeart() {
|
||
const app = this;
|
||
HouseInfoApi.likeHouse({
|
||
houseId: this.form.houseId,
|
||
houseUserId: this.form.userId
|
||
}).then(res => {
|
||
app.form.liked = res.data
|
||
})
|
||
},
|
||
// 分享功能
|
||
onShare() {
|
||
// 检查是否有房源信息
|
||
if (!this.form.houseTitle) {
|
||
uni.showToast({
|
||
title: '房源信息加载中...',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
|
||
HouseInfoApi.getGeneratePoster(this.form.houseId).then(res => {
|
||
console.log(res.data,'12312312...');
|
||
|
||
// 点击后下载海报图片 res.data
|
||
this.downloadPosterImage(res.data);
|
||
|
||
})
|
||
|
||
|
||
},
|
||
// 处理海报生成（确保this上下文正确）
|
||
handleGenerateHousePoster(params) {
|
||
console.log('handleGenerateHousePoster 被调用，参数:', params);
|
||
console.log('当前房源图片列表:', this.swiperList);
|
||
console.log('房源信息:', this.form);
|
||
|
||
return new Promise(async (resolve, reject) => {
|
||
try {
|
||
// 检查房源信息是否完整
|
||
if (!this.form || !this.form.houseTitle) {
|
||
throw new Error('房源信息不完整');
|
||
}
|
||
|
||
// 显示加载提示
|
||
uni.showLoading({
|
||
title: '生成海报中...',
|
||
mask: true
|
||
});
|
||
|
||
// 使用新的海报生成器
|
||
const posterUrl = await this.$refs.housePosterGenerator.generatePoster();
|
||
|
||
console.log('海报生成成功:', posterUrl);
|
||
|
||
// 隐藏加载提示
|
||
uni.hideLoading();
|
||
|
||
// 保存海报URL并显示预览弹窗
|
||
this.currentPosterUrl = posterUrl;
|
||
this.showPosterPreview = true;
|
||
|
||
resolve({
|
||
data: {
|
||
imageUrl: posterUrl
|
||
}
|
||
});
|
||
|
||
} catch (error) {
|
||
console.error('handleGenerateHousePoster 执行出错:', error);
|
||
|
||
// 隐藏加载提示
|
||
uni.hideLoading();
|
||
|
||
// 如果新海报生成失败，回退到原有逻辑
|
||
this.handleFallbackPoster()
|
||
.then(imageUrl => {
|
||
console.log('回退海报生成成功:', imageUrl);
|
||
|
||
// 保存海报URL并显示预览弹窗
|
||
this.currentPosterUrl = imageUrl;
|
||
this.showPosterPreview = true;
|
||
|
||
resolve({
|
||
data: {
|
||
imageUrl: imageUrl
|
||
}
|
||
});
|
||
})
|
||
.catch(err => {
|
||
console.log('回退海报生成也失败:', err);
|
||
reject(err);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 回退海报生成逻辑（当新海报生成失败时使用）
|
||
handleFallbackPoster() {
|
||
return new Promise((resolve) => {
|
||
try {
|
||
// 优先使用房源的第一张图片作为海报
|
||
if (this.swiperList && this.swiperList.length > 0) {
|
||
const firstImage = this.swiperList[0];
|
||
// 支持多种图片URL格式
|
||
const imageUrl = firstImage.url || firstImage.image || firstImage.src || firstImage;
|
||
|
||
console.log('第一张图片对象:', firstImage);
|
||
console.log('提取的图片URL:', imageUrl);
|
||
|
||
if (imageUrl && typeof imageUrl === 'string' && imageUrl.trim() !== '') {
|
||
console.log('使用房源图片作为回退海报:', imageUrl);
|
||
resolve(imageUrl.trim());
|
||
return;
|
||
}
|
||
}
|
||
|
||
console.log('没有可用的房源图片，生成文字海报');
|
||
// 如果没有房源图片，生成一个包含房源信息的文字海报
|
||
const houseTitle = (this.form && this.form.houseTitle) || '房源信息';
|
||
const monthlyRent = (this.form && this.form.monthlyRent) || 0;
|
||
const houseType = (this.form && this.form.houseType) || '';
|
||
const extent = (this.form && this.form.extent) || 0;
|
||
|
||
// 使用一个简单的占位图片服务
|
||
const defaultPosterUrl = 'https://dummyimage.com/400x600/4a90e2/ffffff&text=' +
|
||
encodeURIComponent(`${houseTitle}\n${monthlyRent}元/月\n${houseType}\n${extent}m²`);
|
||
|
||
console.log('生成的回退海报URL:', defaultPosterUrl);
|
||
resolve(defaultPosterUrl);
|
||
} catch (error) {
|
||
console.error('handleFallbackPoster 执行出错:', error);
|
||
// 如果生成回退海报也失败，使用一个简单的占位图
|
||
resolve('https://dummyimage.com/400x600/cccccc/666666&text=房源海报');
|
||
}
|
||
});
|
||
},
|
||
|
||
// 海报生成完成回调
|
||
onPosterGenerated(posterUrl) {
|
||
console.log('海报生成完成:', posterUrl);
|
||
// 可以在这里添加额外的处理逻辑
|
||
},
|
||
|
||
// 海报预览API调用（用于GoodsPosterPopup组件）
|
||
posterPreviewApiCall() {
|
||
return Promise.resolve({
|
||
data: {
|
||
imageUrl: this.currentPosterUrl
|
||
}
|
||
});
|
||
},
|
||
|
||
onCall() {
|
||
if (this.agentUser && this.agentUser.phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.agentUser.phone
|
||
})
|
||
} else if (this.phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.phone
|
||
})
|
||
}
|
||
},
|
||
makePhoneCall() {
|
||
if (!this.form.phone) {
|
||
uni.showToast({
|
||
title: '暂无电话号码',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.form.phone,
|
||
success: () => {
|
||
console.log('拨打电话成功')
|
||
},
|
||
fail: (err) => {
|
||
console.log('拨打电话失败', err)
|
||
uni.showToast({
|
||
title: '拨打电话失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 下载海报图片
|
||
downloadPosterImage(imageUrl) {
|
||
if (!imageUrl) {
|
||
uni.showToast({
|
||
title: '图片地址无效',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 显示加载提示
|
||
uni.showLoading({
|
||
title: '下载中...',
|
||
mask: true
|
||
});
|
||
|
||
// 下载图片
|
||
uni.downloadFile({
|
||
url: imageUrl,
|
||
success: (downloadResult) => {
|
||
if (downloadResult.statusCode === 200) {
|
||
// 保存图片到相册
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: downloadResult.tempFilePath,
|
||
success: () => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: (saveError) => {
|
||
uni.hideLoading();
|
||
console.error('保存图片失败:', saveError);
|
||
|
||
// 如果是权限问题，提示用户
|
||
if (saveError.errMsg && saveError.errMsg.includes('auth')) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '需要相册权限才能保存图片，请在设置中开启相册权限',
|
||
showCancel: false
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '保存失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '下载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
fail: (downloadError) => {
|
||
uni.hideLoading();
|
||
console.error('下载图片失败:', downloadError);
|
||
uni.showToast({
|
||
title: '下载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
watch: {
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
.search-fix {
|
||
width: 750rpx;
|
||
margin: auto;
|
||
display: flex;
|
||
|
||
.search {
|
||
width: 690rpx;
|
||
margin: 15rpx auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.search-tools {
|
||
width: 700rpx;
|
||
margin: auto;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.region {
|
||
width: 170rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.fixed {
|
||
position: fixed;
|
||
top: 300rpx;
|
||
left: 125rpx;
|
||
}
|
||
|
||
.no-fixed {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: 125rpx;
|
||
}
|
||
|
||
.tabs {
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.swiper {
|
||
position: relative;
|
||
|
||
.house-info {
|
||
width: 660rpx;
|
||
height: 240rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 15rpx;
|
||
margin: auto;
|
||
padding: 20rpx;
|
||
position: absolute;
|
||
bottom: -200rpx;
|
||
left: 25rpx;
|
||
z-index: 100;
|
||
|
||
.label {
|
||
margin: 10rpx 0;
|
||
display: flex;
|
||
|
||
.u-page__tag-item {
|
||
margin-bottom: 10rpx;
|
||
margin-right: 10rpx;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.dict {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.dict-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 26rpx;
|
||
|
||
.title {
|
||
color: #ff0000;
|
||
}
|
||
|
||
.desc {
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-card {
|
||
width: 660rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 15rpx;
|
||
margin: auto;
|
||
padding: 20rpx;
|
||
z-index: 100;
|
||
}
|
||
|
||
.house-card {
|
||
width: 660rpx;
|
||
min-height: 240rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 15rpx;
|
||
margin: auto;
|
||
padding: 20rpx;
|
||
z-index: 100;
|
||
|
||
.title2 {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
padding-bottom: 10rpx;
|
||
}
|
||
|
||
.field-list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.item {
|
||
width: 320rpx;
|
||
font-weight: 350;
|
||
font-size: 28rpx;
|
||
line-height: 1.7rem;
|
||
color: #4b4b4b;
|
||
}
|
||
|
||
.col-1 {
|
||
width: 640rpx !important;
|
||
}
|
||
|
||
.col-2 {
|
||
width: 320rpx;
|
||
}
|
||
|
||
.grid-text {
|
||
font-weight: 350;
|
||
font-size: 28rpx;
|
||
color: #4b4b4b;
|
||
}
|
||
|
||
.about {
|
||
color: #4b4b4b;
|
||
font-weight: 350;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.house-list {
|
||
width: 700rpx;
|
||
margin: 20rpx auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
margin-bottom: 40rpx;
|
||
border-radius: 20rpx;
|
||
// box-shadow: 0 3rpx 10rpx 0px #cccccc;
|
||
background-color: #ffffff;
|
||
width: 338rpx;
|
||
|
||
image {
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
height: 420rpx;
|
||
width: 338rpx;
|
||
}
|
||
|
||
.info {
|
||
padding: 20rpx 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
//text-overflow: -o-ellipsis-lastline;
|
||
overflow: hidden; //溢出内容隐藏
|
||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||
display: -webkit-box; //特别显示模式
|
||
-webkit-line-clamp: 2; //行数
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||
}
|
||
|
||
.desc {
|
||
color: #999999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.price {
|
||
color: #ff0000;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-tools {
|
||
position: fixed;
|
||
bottom: 0;
|
||
height: 120rpx;
|
||
width: 750rpx;
|
||
border-top: 1rpx solid #f3f3f3;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.indicator-num {
|
||
padding: 2px 0;
|
||
background-color: rgba(0, 0, 0, 0.35);
|
||
border-radius: 100px;
|
||
width: 35px;
|
||
@include flex;
|
||
justify-content: center;
|
||
|
||
&__text {
|
||
color: #FFFFFF;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.demo-layout {
|
||
color: #ff0000;
|
||
}
|
||
|
||
.video-box {
|
||
width: 750rpx;
|
||
height: 500rpx;
|
||
text-align: center;
|
||
|
||
.swiper-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: auto;
|
||
}
|
||
}
|
||
|
||
.swiper-switch {
|
||
position: absolute;
|
||
display: flex;
|
||
border-radius: 20rpx;
|
||
height: 40rpx;
|
||
width: 200rpx;
|
||
background-color: rgba(0, 0, 0, 0.35);
|
||
left: 30rpx;
|
||
bottom: 100rpx;
|
||
|
||
&-item {
|
||
color: #FFFFFF;
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 20rpx;
|
||
|
||
&.active {
|
||
background-color: #FFFFFF;
|
||
color: #333333;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.download-btn {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
border-radius: 40rpx;
|
||
color: #FFFFFF;
|
||
font-size: 20rpx;
|
||
}
|
||
.download-btn2 {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
bottom: 95rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
border-radius: 40rpx;
|
||
color: #FFFFFF;
|
||
font-size: 20rpx;
|
||
}
|
||
</style>
|