Files
aishangjia-uniapp/sub_pages/house/house.vue
赵忠林 1bf7caf34e feat(house): 添加房源卖价和总价功能并优化分享流程
- 在房源添加页面添加卖价(元/平)和总价(万)输入字段
- 实现卖价变动时总价自动计算功能
- 在房源详情页显示卖价和总价信息
- 调整物业费显示位置提升界面布局合理性
- 更新服务器配置地址从gxwebsoft.com到websoft.top
- 替换必看好房标签为特价好房标签统一显示
- 修复房源详情页分享功能和海报生成流程
- 添加跟进记录页面和相应跳转功能
- 优化房源管理页面删除按钮显示逻辑
- 实现闪屏页跳过功能和登录状态记忆
- 添加房源海报生成组件支持分享推广
- 修复分享路径参数传递和用户信息存储
2026-02-13 19:37:24 +08:00

408 lines
8.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="search">
<u-sticky>
<view class="search-wrapper">
<u-search color="#333333" border-color="#E8E8E8" :showAction="true" actionText="搜索" :animation="false"
v-model="where.keywords" @search="onSearch" @custom="onSearch"
:actionStyle="actionStyle"></u-search>
</view>
</u-sticky>
<view class="order-total">
<view class="pay-btn">
<view class="btn">
<u-button text="上架" plain size="small" @click="onStatus(0)"></u-button>
</view>
<view class="btn">
<u-button text="下架" plain size="small" @click="onStatus(10)"></u-button>
</view>
<!-- <view class="btn">
<u-button text="删除" plain size="small" @click="onDel()"></u-button>
</view> -->
<view class="btn">
<u-button text="编辑" plain size="small" @click="onEdit()"></u-button>
</view>
<!-- <view class="btn">
<u-button text="分享" plain size="small" @click="onPay(item.logId)"></u-button>
</view> -->
<!-- <view class="btn" v-if="item.payStatus == 10">
<u-button text="取消订单" size="small" @click="onRemove(item.logId)"></u-button>
</view> -->
</view>
</view>
<view class="house">
<view class="btn" @click="onRadio">
<label class="radio"><radio value="r1" color="#ff0000" :checked="checked" />全选</label>
<!-- <u-radio activeColor="red" v-model="select" label="全选" @change="onRadio"></u-radio> -->
<!-- <u-radio label="取消" @change="onRadio"></u-radio> -->
</view>
<view class="list">
<block v-for="(item,index) in list" :key="index">
<view class="item" @click="addHouseInfo(item.houseId)">
<view class="badge" @click.stop="onBadge(item,index)"><u-badge :isDot="true" type="info"
:bgColor="item.selected ? bgColor : ''"></u-badge></view>
<view class="status">
<u-tag :text="item.status == 0 ? '上架' : '下架'" plain
:type="item.status == 0 ? 'success' : 'error'"></u-tag>
</view>
<image class="image" :src="item.files[0].url" mode="aspectFill"></image>
<view class="info">
<view class="title">{{ item.houseTitle }}</view>
<view class="desc"><text>{{ item.extent }}|{{ item.toward }}</text></view>
<view class="price">{{ item.rent }}/</view>
</view>
</view>
</block>
<u-empty mode="data" icon="https://file.wsdns.cn/empty/data.png" v-if="list.length == 0">
</u-empty>
</view>
</view>
<u-gap></u-gap>
<view class="float">
<view class="release">
<u-button text="添加房源" type="primary" shape="circle" @click="addHouseInfo"></u-button>
</view>
</view>
</view>
</template>
<script>
import store from '@/store'
import {
fileUrl
} from '@/config.js'
import {
dateFormat
} from '@/utils/util.js'
import * as UserApi from '@/api/user'
import * as UserProfileApi from '@/api/love-user-profile.js'
import * as UploadApi from '@/api/upload'
import * as DictApi from '@/api/dict.js'
import * as HouseInfoApi from '@/api/house-info.js'
export default {
data() {
return {
list: [],
loadMore: true,
status: '加载更多',
page: 1,
where: {},
select: [],
checked: false,
bgColor: '#ff0000',
selectId: 0
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
this.onSearch()
// this.getDict()
},
// 必须要在onReady生命周期因为onLoad生命周期组件可能尚未创建完毕
onReady() {
// this.$refs.uForm.setRules(this.rules)
// 微信小程序需要用此写法
// this.$refs.datetimePicker.setFormatter(this.formatter)
},
// 触底函数
onReachBottom() {
console.log("触底函数: ");
const app = this
if (app.loadMore) {
app.page = ++app.page;
app.onRefreshList()
}
},
methods: {
onRefreshList() {
const app = this
// const userId = uni.getStorageSync('userId')
app.where.page = app.page
// app.where.userId = userId
return new Promise((resolve, reject) => {
HouseInfoApi.pageHouseInfo(app.where)
.then(result => {
const list = result.data.list.map(d => {
d.files = JSON.parse(d.files) || []
return d
})
// 合并新数据
app.list = app.list.concat(list)
if (result.data.count > app.list.length) {
app.canReset = true
} else {
app.canReset = false
}
console.log("app.list: ", app.list);
resolve(list)
})
})
},
onEdit() {
const {
selectId
} = this
if(selectId == 0){
this.$error('请选择房源')
return false
}
if (selectId > 0) {
this.$push('sub_pages/house/add?id=' + selectId)
}
},
onDel() {
const app = this
app.list.map(d => {
if (d.selected == true) {
HouseInfoApi.removeHouseInfo(d.houseId).then(res => {
app.$success(res.message)
})
}
})
app.onSearch()
},
onStatus(status) {
const app = this
app.list.map(d => {
if (d.selected == true) {
HouseInfoApi.updateHouseInfo({
houseId: d.houseId,
status
})
}
})
app.onSearch()
},
onSearch() {
this.list = []
this.page = 1
this.checked = false
this.onRefreshList()
},
onBadge(item, index) {
this.list[index].selected = true
this.selectId = item.houseId
},
addHouseInfo(id) {
const app = this
uni.navigateTo({
url: `/sub_pages/house/add?id=` + id,
events: {
reload: ({
status // false
}) => {
app.onSearch()
}
}
})
},
onRadio(e) {
const { list } = this
this.list = list.map((d) => {
d.selected = true
return d
})
}
}
}
</script>
<style>
page {
background: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.container {}
.search-wrapper {
display: flex;
height: 64rpx;
padding: 20rpx;
background-color: #FFFFFF;
}
// 搜索输入框
.search-input {
width: 80%;
background: #fff;
height: 72rpx;
line-height: 72rpx;
border-radius: 10rpx 0 0 10rpx;
box-sizing: border-box;
overflow: hidden;
.search-input-wrapper {
display: flex;
.left {
display: flex;
width: 60rpx;
justify-content: center;
align-items: center;
.search-icon {
display: block;
color: #b4b4b4;
font-size: 28rpx;
}
}
.right {
flex: 1;
input {
font-size: 28rpx;
height: 72rpx;
line-height: 72rpx;
display: flex;
align-items: center;
.input-placeholder {
color: #aba9a9;
}
}
}
}
}
// 搜索按钮
.search-button {
width: 20%;
box-sizing: border-box;
.button {
height: 64rpx;
font-size: 28rpx;
border-radius: 0 10rpx 10rpx 0;
background: $main-bg;
color: $main-text;
display: flex;
justify-content: center;
align-items: center;
}
}
// 订单合计
.order-total {
margin: 10rpx auto;
font-size: 26rpx;
vertical-align: bottom;
text-align: right;
height: 50rpx;
padding-top: 10rpx;
display: flex;
justify-content: center;
.pay-btn {
display: flex;
.btn {
margin-right: 16rpx;
}
}
.total-price {
display: flex;
align-items: center;
}
.unit {
margin-left: 8rpx;
margin-right: -2rpx;
font-size: 26rpx;
}
.money {
font-size: 28rpx;
color: #ff0000;
}
}
.house {
margin: 30rpx auto;
width: 680rpx;
.btn {
width: 150rpx;
margin: 40rpx 0;
}
.list {
width: 680rpx;
margin: auto;
.item {
border-radius: 30rpx 30rpx 0 0;
box-shadow: 0 3rpx 10rpx 0px #999999;
background-color: #FFFFFF;
margin: 50rpx auto;
position: relative;
.badge {
scale: 3;
position: absolute;
left: 30rpx;
top: 30rpx;
}
.status {
position: absolute;
right: 30rpx;
top: 30rpx;
}
.image {
width: 680rpx;
height: 360rpx;
border-radius: 30rpx 30rpx 0 0;
}
.info {
padding: 20rpx 20rpx;
display: flex;
flex-direction: column;
.title {
font-size: 40rpx;
}
.desc {
color: #999999;
font-size: 28rpx;
}
.price {
color: #ff0000;
font-size: 30rpx;
}
}
}
}
}
.float {
width: 750rpx;
display: flex;
justify-content: center;
position: fixed;
bottom: 100rpx;
.release {
width: 500rpx;
opacity: 0.9;
}
}
</style>