Browse Source
feat: 新增房源类型选择页面和会员中心功能
refactor: 重构房源发布表单输入类型和验证规则 feat(house): 新增经营性建设用地和其他农村资源录入页面 style: 优化首页位置显示和搜索框布局 refactor(user): 重构用户信息展示和会员状态显示 feat(detail): 优化房源详情页字段显示逻辑 refactor(store): 合并data和user模块到主store fix(config): 修复uvUI初始化顺序和HTTP实例检查 docs: 更新README和注释说明 chore: 更新依赖和配置文件master
25 changed files with 2790 additions and 329 deletions
Unified View
Diff Options
-
+5 -0.cursor/rules/index.mdc
-
+4 -2App.vue
-
+6 -1common/api.js
-
+2 -1common/config.js
-
+11 -12config.js
-
+27 -20main.js
-
+1 -1manifest.json
-
+1 -1mixins/configList.js
-
+36 -10pages.json
-
+26 -6pages/home/index.vue
-
+2 -1pages/login/index.vue
-
+404 -84pages/tourGuide/tourGuide.vue
-
+48 -61pages/user/index.vue
-
+35 -28pages_subpack/detail/index.vue
-
+450 -0pages_subpack/house/commercial.vue
-
+623 -0pages_subpack/house/farmhouse.vue
-
+23 -10pages_subpack/house/index.vue
-
+479 -0pages_subpack/house/other.vue
-
+254 -0pages_subpack/house/select.vue
-
+311 -0pages_subpack/member/index.vue
-
+10 -5pages_subpack/version/index.vue
-
BINstatic/image/tourGuide/2.png
-
+32 -12store/index.js
-
+0 -21store/modules/data.js
-
+0 -53store/modules/user.js
+ 5
- 0
.cursor/rules/index.mdc
View File
| @ -0,0 +1,5 @@ | |||||
| --- | |||||
| description: | |||||
| globs: | |||||
| alwaysApply: true | |||||
| --- | |||||
+ 4
- 2
App.vue
View File
+ 6
- 1
common/api.js
View File
+ 2
- 1
common/config.js
View File
| @ -1,7 +1,8 @@ | |||||
| export default { | export default { | ||||
| // baseUrl : 'http://127.0.0.1:8000', | // baseUrl : 'http://127.0.0.1:8000', | ||||
| // baseUrl: 'https://api.book118.com', | // baseUrl: 'https://api.book118.com', | ||||
| baseUrl:'https://houserent-admin.hhlm1688.com' | |||||
| baseUrl:'https://houserent-admin.hhlm1688.com', | |||||
| // baseUrl:'http://augcl.natapp1.cc', | |||||
| // baseUrl:'http://h5.xzaiyp.top' | // baseUrl:'http://h5.xzaiyp.top' | ||||
| // baseUrl:'https://houserent-admin.hhlm1688.com' | // baseUrl:'https://houserent-admin.hhlm1688.com' | ||||
| // baseUrl:'http://h5.xzaiyp.top' | // baseUrl:'http://h5.xzaiyp.top' | ||||
+ 11
- 12
config.js
View File
+ 27
- 20
main.js
View File
+ 1
- 1
manifest.json
View File
+ 1
- 1
mixins/configList.js
View File
+ 36
- 10
pages.json
View File
+ 26
- 6
pages/home/index.vue
View File
+ 2
- 1
pages/login/index.vue
View File
+ 404
- 84
pages/tourGuide/tourGuide.vue
View File
+ 48
- 61
pages/user/index.vue
View File
+ 35
- 28
pages_subpack/detail/index.vue
View File
+ 450
- 0
pages_subpack/house/commercial.vue
View File
| @ -0,0 +1,450 @@ | |||||
| <template> | |||||
| <view class="container"> | |||||
| <view class="header"> | |||||
| <view class="title">经营性建设用地录入</view> | |||||
| </view> | |||||
| <view class="form-container"> | |||||
| <uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="80" labelStyle="font-size:28rpx;"> | |||||
| <!-- 必填项 --> | |||||
| <view class="section-title">基本信息（必填）</view> | |||||
| <!-- 1. 出租/出让 --> | |||||
| <uv-form-item label="类型" prop="type" required> | |||||
| <uv-radio-group v-model="form.type" placement="row"> | |||||
| <uv-radio name="rent" label="出租"></uv-radio> | |||||
| <uv-radio name="transfer" customStyle="margin-left:30rpx;" label="出让"></uv-radio> | |||||
| </uv-radio-group> | |||||
| </uv-form-item> | |||||
| <!-- 2. 地址 --> | |||||
| <uv-form-item label="地址" prop="address" required @click="handleAddressSelect()"> | |||||
| <uv-input v-model="form.address" @click="handleAddressSelect()" disabled disabledColor="#ffffff" placeholder="请选择地块位置" border="none"> | |||||
| </uv-input> | |||||
| <template v-slot:right> | |||||
| <uv-icon name="arrow-right"></uv-icon> | |||||
| </template> | |||||
| </uv-form-item> | |||||
| <!-- 3. 联系人和电话 --> | |||||
| <uv-form-item label="联系人" prop="contactName" required> | |||||
| <uv-input v-model="form.contactName" type="text" placeholder="请输入联系人姓名" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="联系电话" prop="contactPhone" required> | |||||
| <uv-input v-model="form.contactPhone" type="number" placeholder="请输入联系电话" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| </uv-form-item> | |||||
| <!-- 4. 产权证照片 --> | |||||
| <uv-form-item label="产权证照片" labelWidth="250" prop="propertyImages" labelPosition="top" required> | |||||
| <view class="upload-tip">请上传房产证、土地证或不动产权证照片</view> | |||||
| <uv-upload customStyle="margin-top:20rpx;" :fileList="form.propertyImages" @afterRead="afterPropertyRead" @delete="deletePropertyPic" name="1" | |||||
| multiple :maxCount="5"></uv-upload> | |||||
| </uv-form-item> | |||||
| <!-- 5. 土地面积 --> | |||||
| <uv-form-item label="土地面积" prop="landArea" required> | |||||
| <view class="input-with-unit"> | |||||
| <uv-input v-model="form.landArea" type="digit" placeholder="请输入土地面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| <text class="unit">亩</text> | |||||
| </view> | |||||
| <view class="input-tip">请录入土地使用证或不动产权证面积，仅输入数字</view> | |||||
| </uv-form-item> | |||||
| <!-- 6. 地块视频 --> | |||||
| <uv-form-item label="地块视频" labelWidth="250" prop="videos" labelPosition="top" required> | |||||
| <view class="upload-tip">请上传地块视频（1分钟内）</view> | |||||
| <uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1" | |||||
| multiple :maxCount="2"></uv-upload> | |||||
| </uv-form-item> | |||||
| <!-- 7. 价格 --> | |||||
| <uv-form-item label="价格" prop="price" required> | |||||
| <view class="price-container"> | |||||
| <uv-input v-model="form.price" type="digit" placeholder="请输入价格" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;flex:1;"></uv-input> | |||||
| <text class="price-unit" v-if="form.type === 'rent'">元/亩/年</text> | |||||
| <text class="price-unit" v-else-if="form.type === 'transfer'">万元/亩</text> | |||||
| <text class="price-unit" v-else>元</text> | |||||
| </view> | |||||
| <view class="input-tip">请输入数字，支持小数点后两位</view> | |||||
| </uv-form-item> | |||||
| <!-- 分类标识 --> | |||||
| <uv-form-item label="分类标识" prop="classId" @click="handleClass()"> | |||||
| <uv-input v-model="form.className" @click="handleClass()" disabled disabledColor="#ffffff" placeholder="选择分类标识" border="none"> | |||||
| </uv-input> | |||||
| <template v-slot:right> | |||||
| <uv-icon name="arrow-right"></uv-icon> | |||||
| </template> | |||||
| </uv-form-item> | |||||
| <!-- 选填项 --> | |||||
| <view class="section-title">详细信息（选填）</view> | |||||
| <!-- 8. 地块介绍 --> | |||||
| <uv-form-item label="地块介绍" prop="description" labelPosition="top"> | |||||
| <uv-input | |||||
| v-model="form.description" | |||||
| type="textarea" | |||||
| placeholder="请详细介绍地块情况、用途规划、周边环境等" | |||||
| customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:10px;" | |||||
| :autoHeight="true" | |||||
| :maxlength="500" | |||||
| ></uv-input> | |||||
| </uv-form-item> | |||||
| <uv-form-item> | |||||
| <uv-button type="primary" text="提交信息" customStyle="margin-top: 30px;background-color: #1EC77A;border-radius: 30px;" @click="submit"></uv-button> | |||||
| </uv-form-item> | |||||
| </uv-form> | |||||
| </view> | |||||
| <!-- 分类选择器 --> | |||||
| <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import { saveOrUpdateHouse, houseType } from "@/common/api.js" | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| commonClass: '', // 所属分类ID | |||||
| form: { | |||||
| type: '', // 出租/出让 | |||||
| address: '', // 地址 | |||||
| contactName: '', // 联系人 | |||||
| contactPhone: '', // 联系电话 | |||||
| propertyImages: [], // 产权证照片 | |||||
| landArea: '', // 土地面积 | |||||
| videos: [], // 地块视频 | |||||
| price: '', // 价格 | |||||
| description: '', // 地块介绍 | |||||
| longitude: '', // 经度 | |||||
| latitude: '', // 纬度 | |||||
| classId: '', // 分类标识 | |||||
| className: '' // 分类名称 | |||||
| }, | |||||
| columns: [], // 分类选择器数据 | |||||
| houseTypeList: [], // 分类列表 | |||||
| rules: { | |||||
| type: [ | |||||
| { required: true, message: '请选择出租或出让', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| address: [ | |||||
| { required: true, message: '请选择地块地址', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| contactName: [ | |||||
| { required: true, message: '请输入联系人姓名', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| contactPhone: [ | |||||
| { required: true, message: '请输入联系电话', trigger: ['blur', 'change'] }, | |||||
| { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| landArea: [ | |||||
| { required: true, message: '请输入土地面积', trigger: ['blur', 'change'] }, | |||||
| { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| price: [ | |||||
| { required: true, message: '请输入价格', trigger: ['blur', 'change'] }, | |||||
| { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的价格格式', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| classId: [ | |||||
| { required: true, message: '请选择分类标识', trigger: ['blur', 'change'] } | |||||
| ] | |||||
| } | |||||
| } | |||||
| }, | |||||
| onReady() { | |||||
| this.$refs.form.setRules(this.rules) | |||||
| }, | |||||
| onLoad(options) { | |||||
| // 设置页面标题 | |||||
| uni.setNavigationBarTitle({ | |||||
| title: '经营性建设用地录入' | |||||
| }) | |||||
| // 接收传递的commonClass参数 | |||||
| if(options.commonClass) { | |||||
| this.commonClass = options.commonClass | |||||
| } | |||||
| // 如果是编辑模式，设置classId用于回显 | |||||
| if(options.classId) { | |||||
| this.form.classId = options.classId | |||||
| } | |||||
| // 初始化分类数据 | |||||
| this.onHouseType() | |||||
| }, | |||||
| methods: { | |||||
| // 获取分类数据 | |||||
| onHouseType(){ | |||||
| let that = this | |||||
| houseType({}).then(response=>{ | |||||
| let arr=[] | |||||
| that.houseTypeList = response.result | |||||
| response.result.forEach(items=>{ | |||||
| arr.push(items.title) | |||||
| // 数据回显：如果当前classId匹配，设置className | |||||
| if(items.id == that.form.classId){ | |||||
| that.form.className = items.title | |||||
| } | |||||
| }) | |||||
| that.columns[0]=arr | |||||
| }).catch(error=>{ | |||||
| }) | |||||
| }, | |||||
| // 地址选择 | |||||
| handleAddressSelect() { | |||||
| const that = this; | |||||
| wx.chooseLocation({ | |||||
| success: function (res) { | |||||
| console.log('选择的位置：', res); | |||||
| that.form.longitude = res.longitude | |||||
| that.form.latitude = res.latitude | |||||
| that.form.address = res.address | |||||
| } | |||||
| }) | |||||
| }, | |||||
| // 分类选择 | |||||
| handleClass() { | |||||
| this.$refs.picker.open(); | |||||
| }, | |||||
| confirm(e) { | |||||
| let that = this | |||||
| let {indexs,value,values} = e | |||||
| that.form.classId = that.houseTypeList[indexs[0]].id; | |||||
| that.form.className = that.houseTypeList[indexs[0]].title; | |||||
| }, | |||||
| // 产权证照片上传 | |||||
| async afterPropertyRead(e) { | |||||
| let self = this | |||||
| e.file.forEach(file => { | |||||
| self.$Oss.ossUpload(file.url).then(url => { | |||||
| self.form.propertyImages.push({ | |||||
| url | |||||
| }) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| deletePropertyPic(event) { | |||||
| this.form.propertyImages.splice(event.index, 1) | |||||
| }, | |||||
| // 视频上传 | |||||
| async afterVideoRead(e) { | |||||
| let self = this | |||||
| e.file.forEach(file => { | |||||
| self.$Oss.ossUpload(file.url).then(url => { | |||||
| self.form.videos.push({ | |||||
| url | |||||
| }) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| deleteVideoPic(event) { | |||||
| this.form.videos.splice(event.index, 1) | |||||
| }, | |||||
| // 提交表单 | |||||
| submit() { | |||||
| this.$refs.form.validate().then(res => { | |||||
| // 验证必填的图片和视频 | |||||
| if (this.form.propertyImages.length === 0) { | |||||
| uni.showToast({ | |||||
| title: '请上传产权证照片', | |||||
| icon: 'none' | |||||
| }); | |||||
| return; | |||||
| } | |||||
| if (this.form.videos.length === 0) { | |||||
| uni.showToast({ | |||||
| title: '请上传地块视频', | |||||
| icon: 'none' | |||||
| }); | |||||
| return; | |||||
| } | |||||
| // 构建与index.vue兼容的提交参数 | |||||
| const params = { | |||||
| userId: uni.getStorageSync('userInfo')?.id || "", | |||||
| id: "", // 新增数据，无ID | |||||
| classId: this.form.classId, // 使用固定分类标识 | |||||
| commonClass: this.commonClass, // 所属分类 | |||||
| address: this.form.address, // 地址 | |||||
| homeAge: "", // 户主年龄 - 经营性用地无此字段 | |||||
| homeAz: "", // 是否经过安置 - 默认否 | |||||
| homeBian: "", // 房屋周边 - 经营性用地无此字段 | |||||
| homeBjsx: "", // 报建手续 - 经营性用地无此字段 | |||||
| homeCai: "", // 菜地 - 经营性用地无此字段 | |||||
| homeCat: "", // 停车 - 经营性用地无此字段 | |||||
| homeGz: "", // 房屋主体是否改造 - 默认否 | |||||
| homeHb: "", // 房屋朝向及海拔 - 经营性用地无此字段 | |||||
| homeBz: this.form.description, // 备注 - 使用地块介绍 | |||||
| homeJg: "经营性建设用地", // 房屋结构 - 使用固定值 | |||||
| homeJl: "", // 距离场镇距离 - 经营性用地无此字段 | |||||
| homeJt: "", // 交通 - 经营性用地无此字段 | |||||
| homeJtzy: "", // 户主家庭职业 - 经营性用地无此字段 | |||||
| homeMi: this.form.landArea, // 面积 - 使用土地面积 | |||||
| homeMj: this.form.landArea, // 房屋面积 - 使用土地面积 | |||||
| homeMoney: "", // 佣金 - 经营性用地无此字段 | |||||
| homeNo: "", // 房屋编号 - 经营性用地无此字段 | |||||
| homeNum: "", // 房间数量 - 经营性用地无此字段 | |||||
| homePay: "", // 付款方式及押金 - 经营性用地无此字段 | |||||
| homePj: "", // 邻居对房东评价 - 经营性用地无此字段 | |||||
| homeSd: "", // 水电气网 - 经营性用地无此字段 | |||||
| homeShjl: "", // 距离成都西三环 - 经营性用地无此字段 | |||||
| homeSw: "", // 非正常死亡 - 默认无 | |||||
| homeTf: "", // 府市民云房屋信息档案查询 - 经营性用地无此字段 | |||||
| homeTime: "", // 租期 - 经营性用地无此字段 | |||||
| homeType: this.form.type === 'rent' ? '出租' : '出让', // 户型 - 使用类型 | |||||
| homeYs: "", // 钥匙 - 默认无 | |||||
| homeYzmj: this.form.landArea, // 院子总面积 - 使用土地面积 | |||||
| homeZy: "", // 坟包及电塔 工厂噪音 - 经营性用地无此字段 | |||||
| iconName: "经营性建设用地", // 热点名称 | |||||
| iconTitle: "经营性用地", // 标签 | |||||
| num: "0", // 浏览量 - 默认0 | |||||
| price: this.form.price, // 价格 | |||||
| timeGo: "", // 年限 - 经营性用地无此字段 | |||||
| title: `${this.form.type === 'rent' ? '出租' : '出让'}-经营性建设用地-${this.form.address.split('市')[1] || this.form.address}`, // 标题 - 自动生成 | |||||
| unit: this.form.type === 'rent' ? '元/亩/年' : '万元/亩', // 单位 | |||||
| image: "", // 图片 - 经营性用地无房屋照片 | |||||
| iconImage: "", // 左上角图标 | |||||
| homeImage: this.form.propertyImages.map(item => item.url).join(','), // 产权证照片 | |||||
| homeMp4: this.form.videos.map(item => item.url).join(','), // 视频 | |||||
| latitude: this.form.latitude, | |||||
| longitude: this.form.longitude, | |||||
| // 新增字段用于标识经营性用地 | |||||
| category: 'commercial', | |||||
| contactName: this.form.contactName, | |||||
| contactPhone: this.form.contactPhone | |||||
| }; | |||||
| console.log('经营性用地提交参数：', params); | |||||
| uni.showLoading({ | |||||
| title: '提交中...' | |||||
| }); | |||||
| // 调用统一API | |||||
| saveOrUpdateHouse(params).then(response => { | |||||
| uni.hideLoading(); | |||||
| uni.showToast({ | |||||
| title: response.message || '提交成功', | |||||
| icon: 'success' | |||||
| }); | |||||
| setTimeout(() => { | |||||
| uni.redirectTo({ | |||||
| url: "/pages_subpack/successful-apply/index" | |||||
| }); | |||||
| }, 2000); | |||||
| }).catch(error => { | |||||
| uni.hideLoading(); | |||||
| uni.showToast({ | |||||
| title: error.message || '提交失败', | |||||
| icon: 'none' | |||||
| }); | |||||
| console.error('经营性用地提交失败：', error); | |||||
| }); | |||||
| }).catch(errors => { | |||||
| console.log('表单验证失败：', errors); | |||||
| uni.showToast({ | |||||
| title: '请补全必填项', | |||||
| icon: 'none' | |||||
| }); | |||||
| }); | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped> | |||||
| .container { | |||||
| min-height: 100vh; | |||||
| background-color: #f5f5f5; | |||||
| } | |||||
| .header { | |||||
| background: linear-gradient(135deg, #1EC77A 0%, #4CAF50 100%); | |||||
| padding: 40rpx 40rpx 60rpx; | |||||
| color: white; | |||||
| } | |||||
| .title { | |||||
| font-size: 36rpx; | |||||
| font-weight: bold; | |||||
| text-align: center; | |||||
| } | |||||
| .form-container { | |||||
| background: white; | |||||
| margin: -30rpx 20rpx 20rpx; | |||||
| border-radius: 20rpx; | |||||
| padding: 40rpx; | |||||
| box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1); | |||||
| } | |||||
| .section-title { | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| color: #333; | |||||
| margin: 40rpx 0 30rpx; | |||||
| padding-left: 20rpx; | |||||
| border-left: 6rpx solid #1EC77A; | |||||
| } | |||||
| .section-title:first-child { | |||||
| margin-top: 0; | |||||
| } | |||||
| .input-with-unit { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| gap: 10rpx; | |||||
| } | |||||
| .unit { | |||||
| font-size: 26rpx; | |||||
| color: #666; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| .input-tip { | |||||
| font-size: 22rpx; | |||||
| color: #999; | |||||
| margin-top: 10rpx; | |||||
| line-height: 1.4; | |||||
| } | |||||
| .upload-tip { | |||||
| font-size: 24rpx; | |||||
| color: #666; | |||||
| margin-bottom: 10rpx; | |||||
| line-height: 1.5; | |||||
| } | |||||
| .price-container { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| gap: 10rpx; | |||||
| } | |||||
| .price-unit { | |||||
| font-size: 26rpx; | |||||
| color: #FF6B35; | |||||
| font-weight: bold; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| </style> | |||||
+ 623
- 0
pages_subpack/house/farmhouse.vue
View File
| @ -0,0 +1,623 @@ | |||||
| <template> | |||||
| <view class="container"> | |||||
| <view class="header"> | |||||
| <view class="title">闲置农房信息录入</view> | |||||
| </view> | |||||
| <view class="form-container"> | |||||
| <uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="80" labelStyle="font-size:28rpx;"> | |||||
| <!-- 必填项 --> | |||||
| <view class="section-title">基本信息（必填）</view> | |||||
| <!-- 1. 出租/流转 --> | |||||
| <uv-form-item label="类型" prop="type" required> | |||||
| <uv-radio-group v-model="form.type" placement="row"> | |||||
| <uv-radio name="rent" label="出租"></uv-radio> | |||||
| <uv-radio name="transfer" customStyle="margin-left:30rpx;" label="流转"></uv-radio> | |||||
| </uv-radio-group> | |||||
| </uv-form-item> | |||||
| <!-- 2. 地址 --> | |||||
| <uv-form-item label="地址" prop="address" required @click="handleAddressSelect()"> | |||||
| <uv-input v-model="form.address" @click="handleAddressSelect()" disabled disabledColor="#ffffff" placeholder="请选择房屋位置" border="none"> | |||||
| </uv-input> | |||||
| <template v-slot:right> | |||||
| <uv-icon name="arrow-right"></uv-icon> | |||||
| </template> | |||||
| </uv-form-item> | |||||
| <!-- 3. 联系人和电话 --> | |||||
| <uv-form-item label="联系人" prop="contactName" required> | |||||
| <uv-input v-model="form.contactName" type="text" placeholder="请输入联系人姓名" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="联系电话" prop="contactPhone" required> | |||||
| <uv-input v-model="form.contactPhone" type="number" placeholder="请输入联系电话" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| </uv-form-item> | |||||
| <!-- 4. 房屋状况 --> | |||||
| <uv-form-item label="房屋状况" prop="houseCondition" required @click="handleHouseConditionSelect()"> | |||||
| <uv-input v-model="form.houseConditionName" @click="handleHouseConditionSelect()" disabled disabledColor="#ffffff" placeholder="请选择房屋状况" border="none"> | |||||
| </uv-input> | |||||
| <template v-slot:right> | |||||
| <uv-icon name="arrow-right"></uv-icon> | |||||
| </template> | |||||
| </uv-form-item> | |||||
| <!-- 5. 产权证照片 --> | |||||
| <uv-form-item label="产权证照片" labelWidth="250" prop="propertyImages" labelPosition="top" required> | |||||
| <view class="upload-tip">请上传房产证、土地证或不动产权证照片</view> | |||||
| <uv-upload customStyle="margin-top:20rpx;" :fileList="form.propertyImages" @afterRead="afterPropertyRead" @delete="deletePropertyPic" name="1" | |||||
| multiple :maxCount="5"></uv-upload> | |||||
| </uv-form-item> | |||||
| <!-- 6. 产权面积 --> | |||||
| <uv-form-item label="房屋面积" prop="houseArea" required> | |||||
| <view class="input-with-unit"> | |||||
| <uv-input v-model="form.houseArea" type="digit" placeholder="请输入房屋面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| <text class="unit">平米</text> | |||||
| </view> | |||||
| <view class="input-tip">请录入房屋证或不动产权证登记面积</view> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="土地面积" prop="landArea" required> | |||||
| <view class="input-with-unit"> | |||||
| <uv-input v-model="form.landArea" type="digit" placeholder="请输入土地面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| <text class="unit">平米</text> | |||||
| </view> | |||||
| <view class="input-tip">请录入土地使用证或不动产权证面积</view> | |||||
| </uv-form-item> | |||||
| <!-- 7. 房屋正面照片 --> | |||||
| <uv-form-item label="房屋正面照片" labelWidth="250" prop="frontImages" labelPosition="top" required> | |||||
| <view class="upload-tip">作为封面展示，建议拍摄房屋正面全貌</view> | |||||
| <uv-upload customStyle="margin-top:20rpx;" :fileList="form.frontImages" @afterRead="afterFrontRead" @delete="deleteFrontPic" name="1" | |||||
| multiple :maxCount="3"></uv-upload> | |||||
| </uv-form-item> | |||||
| <!-- 8. 房屋视频 --> | |||||
| <uv-form-item label="房屋视频" labelWidth="250" prop="videos" labelPosition="top" required> | |||||
| <view class="upload-tip">请上传房屋内部和外部视频（1分钟内）</view> | |||||
| <uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1" | |||||
| multiple :maxCount="2"></uv-upload> | |||||
| </uv-form-item> | |||||
| <!-- 9. 价格 --> | |||||
| <uv-form-item label="价格" prop="price" required> | |||||
| <view class="price-container"> | |||||
| <uv-input v-model="form.price" type="digit" placeholder="请输入价格" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;flex:1;"></uv-input> | |||||
| <text class="price-unit" v-if="form.type === 'rent'">元/年</text> | |||||
| <text class="price-unit" v-else-if="form.type === 'transfer'">万元</text> | |||||
| <text class="price-unit" v-else>元</text> | |||||
| </view> | |||||
| <view class="input-tip">请输入数字，支持小数点后两位</view> | |||||
| </uv-form-item> | |||||
| <!-- 分类标识 --> | |||||
| <uv-form-item label="分类标识" prop="classId" @click="handleClass()"> | |||||
| <uv-input v-model="form.className" @click="handleClass()" disabled disabledColor="#ffffff" placeholder="选择分类标识" border="none"> | |||||
| </uv-input> | |||||
| <template v-slot:right> | |||||
| <uv-icon name="arrow-right"></uv-icon> | |||||
| </template> | |||||
| </uv-form-item> | |||||
| <!-- 选填项 --> | |||||
| <view class="section-title">详细信息（选填）</view> | |||||
| <!-- 10. 可用菜地 --> | |||||
| <uv-form-item label="可用菜地" prop="vegetableGarden"> | |||||
| <view class="input-with-unit"> | |||||
| <uv-input v-model="form.vegetableGarden" type="digit" placeholder="请输入菜地面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| <text class="unit">平米</text> | |||||
| </view> | |||||
| </uv-form-item> | |||||
| <!-- 11. 房屋亮点 --> | |||||
| <uv-form-item label="房屋亮点" prop="highlights" labelPosition="top"> | |||||
| <view class="tags-container"> | |||||
| <view | |||||
| class="tag-item" | |||||
| :class="{ 'tag-selected': form.highlights.includes(item) }" | |||||
| v-for="item in highlightOptions" | |||||
| :key="item" | |||||
| @click="toggleHighlight(item)" | |||||
| > | |||||
| {{item}} | |||||
| </view> | |||||
| </view> | |||||
| </uv-form-item> | |||||
| <!-- 12. 不利因素 --> | |||||
| <uv-form-item label="不利因素" prop="disadvantages" labelPosition="top"> | |||||
| <view class="tags-container"> | |||||
| <view | |||||
| class="tag-item disadvantage-tag" | |||||
| :class="{ 'tag-selected': form.disadvantages.includes(item) }" | |||||
| v-for="item in disadvantageOptions" | |||||
| :key="item" | |||||
| @click="toggleDisadvantage(item)" | |||||
| > | |||||
| {{item}} | |||||
| </view> | |||||
| </view> | |||||
| </uv-form-item> | |||||
| <!-- 13. 房屋介绍 --> | |||||
| <uv-form-item label="房屋介绍" prop="description" labelPosition="top"> | |||||
| <uv-input | |||||
| v-model="form.description" | |||||
| type="textarea" | |||||
| placeholder="请详细介绍房屋情况、周边环境等" | |||||
| customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:10px;" | |||||
| :autoHeight="true" | |||||
| :maxlength="500" | |||||
| ></uv-input> | |||||
| </uv-form-item> | |||||
| <uv-form-item> | |||||
| <uv-button type="primary" text="提交信息" customStyle="margin-top: 30px;background-color: #1EC77A;border-radius: 30px;" @click="submit"></uv-button> | |||||
| </uv-form-item> | |||||
| </uv-form> | |||||
| </view> | |||||
| <!-- 房屋状况选择器 --> | |||||
| <uv-picker ref="houseConditionPicker" :columns="houseConditionColumns" @confirm="confirmHouseCondition"></uv-picker> | |||||
| <!-- 分类选择器 --> | |||||
| <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import { saveOrUpdateHouse, houseType } from "@/common/api.js" | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| commonClass: '', // 所属分类ID | |||||
| form: { | |||||
| type: '', // 出租/流转 | |||||
| address: '', // 地址 | |||||
| contactName: '', // 联系人 | |||||
| contactPhone: '', // 联系电话 | |||||
| houseCondition: '', // 房屋状况ID | |||||
| houseConditionName: '', // 房屋状况名称 | |||||
| propertyImages: [], // 产权证照片 | |||||
| houseArea: '', // 房屋面积 | |||||
| landArea: '', // 土地面积 | |||||
| frontImages: [], // 房屋正面照片 | |||||
| videos: [], // 房屋视频 | |||||
| price: '', // 价格 | |||||
| longitude: '', // 经度 | |||||
| latitude: '', // 纬度 | |||||
| vegetableGarden: '', // 可用菜地 | |||||
| highlights: [], // 房屋亮点 | |||||
| disadvantages: [], // 不利因素 | |||||
| description: '', // 房屋介绍 | |||||
| classId: '', // 分类标识 | |||||
| className: '' // 分类名称 | |||||
| }, | |||||
| houseConditionColumns: [ | |||||
| ['老旧房屋', '装修较好可拎包入住', '新房'] | |||||
| ], | |||||
| highlightOptions: [ | |||||
| '靠河', '靠山', '通自来水', '通天然气', '近场镇或城市', | |||||
| '双车道到家', '精装修', '四合院', '周边无坟墓', '周边无电线塔' | |||||
| ], | |||||
| disadvantageOptions: [ | |||||
| '可见坟墓', '周边有电塔', '非正常死亡' | |||||
| ], | |||||
| columns: [], // 分类选择器数据 | |||||
| houseTypeList: [], // 分类列表 | |||||
| rules: { | |||||
| type: [ | |||||
| { required: true, message: '请选择出租或流转', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| address: [ | |||||
| { required: true, message: '请选择房屋地址', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| contactName: [ | |||||
| { required: true, message: '请输入联系人姓名', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| contactPhone: [ | |||||
| { required: true, message: '请输入联系电话', trigger: ['blur', 'change'] }, | |||||
| { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| houseCondition: [ | |||||
| { required: true, message: '请选择房屋状况', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| houseArea: [ | |||||
| { required: true, message: '请输入房屋面积', trigger: ['blur', 'change'] }, | |||||
| { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| landArea: [ | |||||
| { required: true, message: '请输入土地面积', trigger: ['blur', 'change'] }, | |||||
| { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| price: [ | |||||
| { required: true, message: '请输入价格', trigger: ['blur', 'change'] }, | |||||
| { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的价格格式', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| classId: [ | |||||
| { required: true, message: '请选择分类标识', trigger: ['blur', 'change'] } | |||||
| ] | |||||
| } | |||||
| } | |||||
| }, | |||||
| onReady() { | |||||
| this.$refs.form.setRules(this.rules) | |||||
| }, | |||||
| onLoad(options) { | |||||
| // 设置页面标题 | |||||
| uni.setNavigationBarTitle({ | |||||
| title: '闲置农房录入' | |||||
| }) | |||||
| // 接收传递的commonClass参数 | |||||
| if(options.commonClass) { | |||||
| this.commonClass = options.commonClass | |||||
| } | |||||
| // 如果是编辑模式，设置classId用于回显 | |||||
| if(options.classId) { | |||||
| this.form.classId = options.classId | |||||
| } | |||||
| // 初始化分类数据 | |||||
| this.onHouseType() | |||||
| }, | |||||
| methods: { | |||||
| // 获取分类数据 | |||||
| onHouseType(){ | |||||
| let that = this | |||||
| houseType({}).then(response=>{ | |||||
| let arr=[] | |||||
| that.houseTypeList = response.result | |||||
| response.result.forEach(items=>{ | |||||
| arr.push(items.title) | |||||
| // 数据回显：如果当前classId匹配，设置className | |||||
| if(items.id == that.form.classId){ | |||||
| that.form.className = items.title | |||||
| } | |||||
| }) | |||||
| that.columns[0]=arr | |||||
| }).catch(error=>{ | |||||
| }) | |||||
| }, | |||||
| // 地址选择 | |||||
| handleAddressSelect() { | |||||
| const that = this; | |||||
| wx.chooseLocation({ | |||||
| success: function (res) { | |||||
| console.log('选择的位置：', res); | |||||
| that.form.longitude = res.longitude | |||||
| that.form.latitude = res.latitude | |||||
| that.form.address = res.address | |||||
| } | |||||
| }) | |||||
| }, | |||||
| // 房屋状况选择 | |||||
| handleHouseConditionSelect() { | |||||
| this.$refs.houseConditionPicker.open(); | |||||
| }, | |||||
| confirmHouseCondition(e) { | |||||
| const { indexs, value } = e; | |||||
| this.form.houseCondition = value[0]; // 修改：直接使用选择的值而不是索引 | |||||
| this.form.houseConditionName = value[0]; | |||||
| }, | |||||
| // 分类标识选择 | |||||
| handleClass() { | |||||
| this.$refs.picker.open(); | |||||
| }, | |||||
| confirm(e) { | |||||
| let that = this | |||||
| let {indexs,value,values} = e | |||||
| that.form.classId = that.houseTypeList[indexs[0]].id; | |||||
| that.form.className = that.houseTypeList[indexs[0]].title; | |||||
| }, | |||||
| // 产权证照片上传 | |||||
| async afterPropertyRead(e) { | |||||
| let self = this | |||||
| e.file.forEach(file => { | |||||
| self.$Oss.ossUpload(file.url).then(url => { | |||||
| self.form.propertyImages.push({ | |||||
| url | |||||
| }) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| deletePropertyPic(event) { | |||||
| this.form.propertyImages.splice(event.index, 1) | |||||
| }, | |||||
| // 房屋正面照片上传 | |||||
| async afterFrontRead(e) { | |||||
| let self = this | |||||
| e.file.forEach(file => { | |||||
| self.$Oss.ossUpload(file.url).then(url => { | |||||
| self.form.frontImages.push({ | |||||
| url | |||||
| }) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| deleteFrontPic(event) { | |||||
| this.form.frontImages.splice(event.index, 1) | |||||
| }, | |||||
| // 视频上传 | |||||
| async afterVideoRead(e) { | |||||
| let self = this | |||||
| e.file.forEach(file => { | |||||
| self.$Oss.ossUpload(file.url).then(url => { | |||||
| self.form.videos.push({ | |||||
| url | |||||
| }) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| deleteVideoPic(event) { | |||||
| this.form.videos.splice(event.index, 1) | |||||
| }, | |||||
| // 切换房屋亮点 | |||||
| toggleHighlight(item) { | |||||
| const index = this.form.highlights.indexOf(item); | |||||
| if (index > -1) { | |||||
| this.form.highlights.splice(index, 1); | |||||
| } else { | |||||
| this.form.highlights.push(item); | |||||
| } | |||||
| }, | |||||
| // 切换不利因素 | |||||
| toggleDisadvantage(item) { | |||||
| const index = this.form.disadvantages.indexOf(item); | |||||
| if (index > -1) { | |||||
| this.form.disadvantages.splice(index, 1); | |||||
| } else { | |||||
| this.form.disadvantages.push(item); | |||||
| } | |||||
| }, | |||||
| // 提交表单 | |||||
| submit() { | |||||
| this.$refs.form.validate().then(res => { | |||||
| // 验证必填的图片和视频 | |||||
| if (this.form.propertyImages.length === 0) { | |||||
| uni.showToast({ | |||||
| title: '请上传产权证照片', | |||||
| icon: 'none' | |||||
| }); | |||||
| return; | |||||
| } | |||||
| if (this.form.frontImages.length === 0) { | |||||
| uni.showToast({ | |||||
| title: '请上传房屋正面照片', | |||||
| icon: 'none' | |||||
| }); | |||||
| return; | |||||
| } | |||||
| if (this.form.videos.length === 0) { | |||||
| uni.showToast({ | |||||
| title: '请上传房屋视频', | |||||
| icon: 'none' | |||||
| }); | |||||
| return; | |||||
| } | |||||
| // 构建与index.vue兼容的提交参数 | |||||
| const params = { | |||||
| userId: uni.getStorageSync('userInfo')?.id || "", | |||||
| id: "", // 新增数据，无ID | |||||
| classId: this.form.classId, // 使用分类标识 | |||||
| commonClass: this.commonClass, // 所属分类 | |||||
| address: this.form.address, // 地址 | |||||
| homeAge: "", // 户主年龄 - 农房录入无此字段 | |||||
| homeAz: "", // 是否经过安置 - 默认否 | |||||
| homeBian: this.form.highlights.join(','), // 房屋周边 - 使用亮点代替 | |||||
| homeBjsx: "", // 报建手续 - 农房录入无此字段 | |||||
| homeCai: this.form.vegetableGarden || "", // 菜地面积 | |||||
| homeCat: "", // 停车 - 农房录入无此字段 | |||||
| homeGz: "", // 房屋主体是否改造 - 农房录入无此字段 | |||||
| homeHb: "", // 房屋朝向及海拔 - 农房录入无此字段 | |||||
| homeBz: this.form.description, // 备注 - 使用房屋介绍 | |||||
| homeJg: this.form.houseCondition, // 房屋结构 - 使用房屋状况 | |||||
| homeJl: "", // 距离场镇距离 - 农房录入无此字段 | |||||
| homeJt: "", // 交通 - 农房录入无此字段 | |||||
| homeJtzy: "", // 户主家庭职业 - 农房录入无此字段 | |||||
| homeMi: "", // 面积 - 使用房屋面积 | |||||
| homeMj: this.form.houseArea, // 房屋面积 | |||||
| homeMoney: "", // 佣金 - 农房录入无此字段 | |||||
| homeNo: "", // 房屋编号 - 农房录入无此字段 | |||||
| homeNum: "1", // 房间数量 - 农房录入无此字段 | |||||
| homePay: "", // 付款方式及押金 - 农房录入无此字段 | |||||
| homePj: "", // 邻居对房东评价 - 农房录入无此字段 | |||||
| homeSd: "", // 水电气网 - 农房录入无此字段 | |||||
| homeShjl: "", // 距离成都西三环 - 农房录入无此字段 | |||||
| homeSw: this.form.disadvantages.join(','), // 非正常死亡 - 显示不利因素信息 | |||||
| homeTf: "", // 府市民云房屋信息档案查询 - 农房录入无此字段 | |||||
| homeTime: "", // 租期 - 农房录入无此字段 | |||||
| homeType: this.form.type === 'rent' ? '出租' : '流转', // 户型 - 使用类型 | |||||
| homeYs: "", // 钥匙 - 默认无 | |||||
| homeYzmj: this.form.landArea, // 院子总面积 - 使用土地面积 | |||||
| homeZy: this.form.disadvantages.join(','), // 坟包及电塔 工厂噪音 - 使用不利因素 | |||||
| iconName: "闲置农房", // 热点名称 | |||||
| iconTitle: this.form.highlights.join(','), // 标签 - 使用亮点 | |||||
| num: "0", // 浏览量 - 默认0 | |||||
| price: this.form.price, // 价格 | |||||
| timeGo: "", // 年限 - 农房录入无此字段 | |||||
| title: `${this.form.type === 'rent' ? '出租' : '流转'}-${this.form.address.split('市')[1] || this.form.address}`, // 标题 - 自动生成 | |||||
| unit: this.form.type === 'rent' ? '元/年' : '万元', // 单位 | |||||
| image: this.form.frontImages.map(item => item.url).join(','), // 图片 - 使用正面照片 | |||||
| iconImage: "", // 左上角图标 | |||||
| homeImage: this.form.propertyImages.map(item => item.url).join(','), // 产权证照片 | |||||
| homeMp4: this.form.videos.map(item => item.url).join(','), // 视频 | |||||
| latitude: this.form.latitude, | |||||
| longitude: this.form.longitude, | |||||
| // 新增字段用于标识农房 | |||||
| category: 'farmhouse', | |||||
| contactName: this.form.contactName, | |||||
| contactPhone: this.form.contactPhone | |||||
| }; | |||||
| console.log('农房提交参数：', params); | |||||
| uni.showLoading({ | |||||
| title: '提交中...' | |||||
| }); | |||||
| // 调用统一API | |||||
| saveOrUpdateHouse(params).then(response => { | |||||
| uni.hideLoading(); | |||||
| uni.showToast({ | |||||
| title: response.message || '提交成功', | |||||
| icon: 'success' | |||||
| }); | |||||
| setTimeout(() => { | |||||
| uni.redirectTo({ | |||||
| url: "/pages_subpack/successful-apply/index" | |||||
| }); | |||||
| }, 2000); | |||||
| }).catch(error => { | |||||
| uni.hideLoading(); | |||||
| uni.showToast({ | |||||
| title: error.message || '提交失败', | |||||
| icon: 'none' | |||||
| }); | |||||
| console.error('农房提交失败：', error); | |||||
| }); | |||||
| }).catch(errors => { | |||||
| console.log('表单验证失败：', errors); | |||||
| uni.showToast({ | |||||
| title: '请补全必填项', | |||||
| icon: 'none' | |||||
| }); | |||||
| }); | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped> | |||||
| .container { | |||||
| min-height: 100vh; | |||||
| background-color: #f5f5f5; | |||||
| } | |||||
| .header { | |||||
| background: linear-gradient(135deg, #1EC77A 0%, #4CAF50 100%); | |||||
| padding: 40rpx 40rpx 60rpx; | |||||
| color: white; | |||||
| } | |||||
| .title { | |||||
| font-size: 36rpx; | |||||
| font-weight: bold; | |||||
| text-align: center; | |||||
| } | |||||
| .form-container { | |||||
| background: white; | |||||
| margin: -30rpx 20rpx 20rpx; | |||||
| border-radius: 20rpx; | |||||
| padding: 40rpx; | |||||
| box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1); | |||||
| } | |||||
| .section-title { | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| color: #333; | |||||
| margin: 40rpx 0 30rpx; | |||||
| padding-left: 20rpx; | |||||
| border-left: 6rpx solid #1EC77A; | |||||
| } | |||||
| .section-title:first-child { | |||||
| margin-top: 0; | |||||
| } | |||||
| .input-with-unit { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| gap: 10rpx; | |||||
| } | |||||
| .unit { | |||||
| font-size: 26rpx; | |||||
| color: #666; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| .input-tip { | |||||
| font-size: 22rpx; | |||||
| color: #999; | |||||
| margin-top: 10rpx; | |||||
| line-height: 1.4; | |||||
| } | |||||
| .upload-tip { | |||||
| font-size: 24rpx; | |||||
| color: #666; | |||||
| margin-bottom: 10rpx; | |||||
| line-height: 1.5; | |||||
| } | |||||
| .price-container { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| gap: 10rpx; | |||||
| } | |||||
| .price-unit { | |||||
| font-size: 26rpx; | |||||
| color: #1EC77A; | |||||
| font-weight: bold; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| .tags-container { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| gap: 15rpx; | |||||
| margin-top: 20rpx; | |||||
| } | |||||
| .tag-item { | |||||
| padding: 15rpx 25rpx; | |||||
| border: 2rpx solid #e0e0e0; | |||||
| border-radius: 25rpx; | |||||
| font-size: 24rpx; | |||||
| color: #666; | |||||
| background: #f9f9f9; | |||||
| transition: all 0.3s ease; | |||||
| } | |||||
| .tag-item.tag-selected { | |||||
| border-color: #1EC77A; | |||||
| background: #1EC77A; | |||||
| color: white; | |||||
| } | |||||
| .disadvantage-tag.tag-selected { | |||||
| border-color: #ff4757; | |||||
| background: #ff4757; | |||||
| color: white; | |||||
| } | |||||
| </style> | |||||
+ 23
- 10
pages_subpack/house/index.vue
View File
+ 479
- 0
pages_subpack/house/other.vue
View File
| @ -0,0 +1,479 @@ | |||||
| <template> | |||||
| <view class="container"> | |||||
| <view class="header"> | |||||
| <view class="title">其他农村资源录入</view> | |||||
| </view> | |||||
| <view class="form-container"> | |||||
| <uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="80" labelStyle="font-size:28rpx;"> | |||||
| <!-- 必填项 --> | |||||
| <view class="section-title">基本信息（必填）</view> | |||||
| <!-- 1. 出租/流转 --> | |||||
| <uv-form-item label="类型" prop="type" required> | |||||
| <uv-radio-group v-model="form.type" placement="row"> | |||||
| <uv-radio name="rent" label="出租"></uv-radio> | |||||
| <uv-radio name="transfer" customStyle="margin-left:30rpx;" label="流转"></uv-radio> | |||||
| </uv-radio-group> | |||||
| </uv-form-item> | |||||
| <!-- 2. 地址 --> | |||||
| <uv-form-item label="地址" prop="address" required @click="handleAddressSelect()"> | |||||
| <uv-input v-model="form.address" @click="handleAddressSelect()" disabled disabledColor="#ffffff" placeholder="请选择资源位置" border="none"> | |||||
| </uv-input> | |||||
| <template v-slot:right> | |||||
| <uv-icon name="arrow-right"></uv-icon> | |||||
| </template> | |||||
| </uv-form-item> | |||||
| <!-- 3. 联系人和电话 --> | |||||
| <uv-form-item label="联系人" prop="contactName" required> | |||||
| <uv-input v-model="form.contactName" type="text" placeholder="请输入联系人姓名" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="联系电话" prop="contactPhone" required> | |||||
| <uv-input v-model="form.contactPhone" type="number" placeholder="请输入联系电话" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> | |||||
| </uv-form-item> | |||||
| <!-- 4. 照片和视频 --> | |||||
| <uv-form-item label="资源照片" labelWidth="250" prop="images" labelPosition="top" required> | |||||
| <view class="upload-tip">请上传资源相关照片</view> | |||||
| <uv-upload customStyle="margin-top:20rpx;" :fileList="form.images" @afterRead="afterImageRead" @delete="deleteImagePic" name="1" | |||||
| multiple :maxCount="10"></uv-upload> | |||||
| </uv-form-item> | |||||
| <uv-form-item label="资源视频" labelWidth="250" prop="videos" labelPosition="top" required> | |||||
| <view class="upload-tip">请上传资源视频（1分钟内）</view> | |||||
| <uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1" | |||||
| multiple :maxCount="3"></uv-upload> | |||||
| </uv-form-item> | |||||
| <!-- 5. 价格 --> | |||||
| <uv-form-item label="价格" prop="price" required> | |||||
| <view class="price-container"> | |||||
| <uv-input v-model="form.price" type="text" placeholder="请描述价格，如：面议、1000元/年等" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;flex:1;"></uv-input> | |||||
| </view> | |||||
| <view class="input-tip">开放式填写，可填写具体价格或"面议"等</view> | |||||
| </uv-form-item> | |||||
| <!-- 6. 资源介绍 --> | |||||
| <uv-form-item label="资源介绍" prop="description" labelPosition="top" required> | |||||
| <uv-input | |||||
| v-model="form.description" | |||||
| type="textarea" | |||||
| placeholder="请详细介绍资源类型、用途、特色、优势等信息" | |||||
| customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:10px;" | |||||
| :autoHeight="true" | |||||
| :maxlength="1000" | |||||
| ></uv-input> | |||||
| <view class="char-count">{{form.description.length}}/1000</view> | |||||
| <view class="input-tip">请详细描述资源的类型、用途、特色、规模、优势等</view> | |||||
| </uv-form-item> | |||||
| <!-- 分类标识 --> | |||||
| <uv-form-item label="分类标识" prop="classId" @click="handleClass()"> | |||||
| <uv-input v-model="form.className" @click="handleClass()" disabled disabledColor="#ffffff" placeholder="选择分类标识" border="none"> | |||||
| </uv-input> | |||||
| <template v-slot:right> | |||||
| <uv-icon name="arrow-right"></uv-icon> | |||||
| </template> | |||||
| </uv-form-item> | |||||
| <!-- 代理协议 --> | |||||
| <view class="section-title">代理协议</view> | |||||
| <view class="agreement-container"> | |||||
| <view class="agreement-content"> | |||||
| <text class="agreement-title">代理协议</text> | |||||
| <text class="agreement-text"> | |||||
| 本人同意授权我平台发布信息、代理销售等。本人承诺所提供的信息真实有效，并同意平台进行相关推广和销售代理。 | |||||
| </text> | |||||
| </view> | |||||
| <uv-checkbox v-model="form.agreeProtocol" shape="circle" activeColor="#1EC77A"> | |||||
| <text class="agreement-label">我已阅读并同意代理协议</text> | |||||
| </uv-checkbox> | |||||
| </view> | |||||
| <uv-form-item> | |||||
| <uv-button type="primary" text="提交信息" customStyle="margin-top: 30px;background-color: #1EC77A;border-radius: 30px;" @click="submit"></uv-button> | |||||
| </uv-form-item> | |||||
| </uv-form> | |||||
| </view> | |||||
| <!-- 分类选择器 --> | |||||
| <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import { saveOrUpdateHouse, houseType } from "@/common/api.js" | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| commonClass: '', // 所属分类ID | |||||
| form: { | |||||
| type: '', // 出租/流转 | |||||
| address: '', // 地址 | |||||
| contactName: '', // 联系人 | |||||
| contactPhone: '', // 联系电话 | |||||
| images: [], // 资源照片 | |||||
| videos: [], // 资源视频 | |||||
| price: '', // 价格（开放式） | |||||
| description: '', // 资源介绍 | |||||
| agreeProtocol: false, // 同意代理协议 | |||||
| longitude: '', // 经度 | |||||
| latitude: '', // 纬度 | |||||
| classId: '', // 分类标识 | |||||
| className: '' // 分类名称 | |||||
| }, | |||||
| columns: [], // 分类选择器数据 | |||||
| houseTypeList: [], // 分类列表 | |||||
| rules: { | |||||
| type: [ | |||||
| { required: true, message: '请选择出租或流转', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| address: [ | |||||
| { required: true, message: '请选择资源地址', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| contactName: [ | |||||
| { required: true, message: '请输入联系人姓名', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| contactPhone: [ | |||||
| { required: true, message: '请输入联系电话', trigger: ['blur', 'change'] }, | |||||
| { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| price: [ | |||||
| { required: true, message: '请输入价格信息', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| description: [ | |||||
| { required: true, message: '请输入资源介绍', trigger: ['blur', 'change'] }, | |||||
| { min: 10, message: '资源介绍至少需要10个字符', trigger: ['blur', 'change'] } | |||||
| ], | |||||
| classId: [ | |||||
| { required: true, message: '请选择分类标识', trigger: ['blur', 'change'] } | |||||
| ] | |||||
| } | |||||
| } | |||||
| }, | |||||
| onReady() { | |||||
| this.$refs.form.setRules(this.rules) | |||||
| }, | |||||
| onLoad(options) { | |||||
| // 设置页面标题 | |||||
| uni.setNavigationBarTitle({ | |||||
| title: '其他农村资源录入' | |||||
| }) | |||||
| // 接收传递的commonClass参数 | |||||
| if(options.commonClass) { | |||||
| this.commonClass = options.commonClass | |||||
| } | |||||
| // 如果是编辑模式，设置classId用于回显 | |||||
| if(options.classId) { | |||||
| this.form.classId = options.classId | |||||
| } | |||||
| // 初始化分类数据 | |||||
| this.onHouseType() | |||||
| }, | |||||
| methods: { | |||||
| // 获取分类数据 | |||||
| onHouseType(){ | |||||
| let that = this | |||||
| houseType({}).then(response=>{ | |||||
| let arr=[] | |||||
| that.houseTypeList = response.result | |||||
| response.result.forEach(items=>{ | |||||
| arr.push(items.title) | |||||
| // 数据回显：如果当前classId匹配，设置className | |||||
| if(items.id == that.form.classId){ | |||||
| that.form.className = items.title | |||||
| } | |||||
| }) | |||||
| that.columns[0]=arr | |||||
| }).catch(error=>{ | |||||
| }) | |||||
| }, | |||||
| // 地址选择 | |||||
| handleAddressSelect() { | |||||
| const that = this; | |||||
| wx.chooseLocation({ | |||||
| success: function (res) { | |||||
| console.log('选择的位置：', res); | |||||
| that.form.longitude = res.longitude | |||||
| that.form.latitude = res.latitude | |||||
| that.form.address = res.address | |||||
| } | |||||
| }) | |||||
| }, | |||||
| // 资源照片上传 | |||||
| async afterImageRead(e) { | |||||
| let self = this | |||||
| e.file.forEach(file => { | |||||
| self.$Oss.ossUpload(file.url).then(url => { | |||||
| self.form.images.push({ | |||||
| url | |||||
| }) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| deleteImagePic(event) { | |||||
| this.form.images.splice(event.index, 1) | |||||
| }, | |||||
| // 视频上传 | |||||
| async afterVideoRead(e) { | |||||
| let self = this | |||||
| e.file.forEach(file => { | |||||
| self.$Oss.ossUpload(file.url).then(url => { | |||||
| self.form.videos.push({ | |||||
| url | |||||
| }) | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| deleteVideoPic(event) { | |||||
| this.form.videos.splice(event.index, 1) | |||||
| }, | |||||
| // 分类选择 | |||||
| handleClass() { | |||||
| this.$refs.picker.open(); | |||||
| }, | |||||
| confirm(e) { | |||||
| let that = this | |||||
| let {indexs,value,values} = e | |||||
| that.form.classId = that.houseTypeList[indexs[0]].id; | |||||
| that.form.className = that.houseTypeList[indexs[0]].title; | |||||
| }, | |||||
| // 提交表单 | |||||
| submit() { | |||||
| // 检查是否同意代理协议 | |||||
| if (!this.form.agreeProtocol) { | |||||
| uni.showToast({ | |||||
| title: '请先同意代理协议', | |||||
| icon: 'none' | |||||
| }); | |||||
| return; | |||||
| } | |||||
| this.$refs.form.validate().then(res => { | |||||
| // 验证必填的图片和视频 | |||||
| if (this.form.images.length === 0) { | |||||
| uni.showToast({ | |||||
| title: '请上传资源照片', | |||||
| icon: 'none' | |||||
| }); | |||||
| return; | |||||
| } | |||||
| if (this.form.videos.length === 0) { | |||||
| uni.showToast({ | |||||
| title: '请上传资源视频', | |||||
| icon: 'none' | |||||
| }); | |||||
| return; | |||||
| } | |||||
| // 构建与index.vue兼容的提交参数 | |||||
| const params = { | |||||
| userId: uni.getStorageSync('userInfo')?.id || "", | |||||
| id: "", // 新增数据，无ID | |||||
| classId: this.form.classId, // 使用分类标识 | |||||
| commonClass: this.commonClass, // 所属分类 | |||||
| address: this.form.address, // 地址 | |||||
| homeAge: "", // 户主年龄 - 其他资源无此字段 | |||||
| homeAz: "", // 是否经过安置 - 默认否 | |||||
| homeBian: "", // 房屋周边 - 其他资源无此字段 | |||||
| homeBjsx: "", // 报建手续 - 其他资源无此字段 | |||||
| homeCai: "", // 菜地 - 其他资源无此字段 | |||||
| homeCat: "", // 停车 - 其他资源无此字段 | |||||
| homeGz: "", // 房屋主体是否改造 - 默认否 | |||||
| homeHb: "", // 房屋朝向及海拔 - 其他资源无此字段 | |||||
| homeBz: this.form.description, // 备注 - 使用资源介绍 | |||||
| homeJg: "其他农村资源", // 房屋结构 - 使用固定值 | |||||
| homeJl: "", // 距离场镇距离 - 其他资源无此字段 | |||||
| homeJt: "", // 交通 - 其他资源无此字段 | |||||
| homeJtzy: "", // 户主家庭职业 - 其他资源无此字段 | |||||
| homeMi: "", // 面积 - 其他资源无此字段 | |||||
| homeMj: "", // 房屋面积 - 其他资源无此字段 | |||||
| homeMoney: "", // 佣金 - 其他资源无此字段 | |||||
| homeNo: "", // 房屋编号 - 其他资源无此字段 | |||||
| homeNum: "", // 房间数量 - 其他资源无此字段 | |||||
| homePay: this.form.price, // 付款方式及押金 - 使用价格信息 | |||||
| homePj: "", // 邻居对房东评价 - 其他资源无此字段 | |||||
| homeSd: "", // 水电气网 - 其他资源无此字段 | |||||
| homeShjl: "", // 距离成都西三环 - 其他资源无此字段 | |||||
| homeSw: "", // 非正常死亡 - 默认无 | |||||
| homeTf: "", // 府市民云房屋信息档案查询 - 其他资源无此字段 | |||||
| homeTime: "", // 租期 - 其他资源无此字段 | |||||
| homeType: this.form.type === 'rent' ? '出租' : '流转', // 户型 - 使用类型 | |||||
| homeYs: "", // 钥匙 - 默认无 | |||||
| homeYzmj: "", // 院子总面积 - 其他资源无此字段 | |||||
| homeZy: "", // 坟包及电塔 工厂噪音 - 其他资源无此字段 | |||||
| iconName: "其他农村资源", // 热点名称 | |||||
| iconTitle: "其他资源", // 标签 | |||||
| num: "0", // 浏览量 - 默认0 | |||||
| price: this.form.price, // 价格 | |||||
| timeGo: "", // 年限 - 其他资源无此字段 | |||||
| title: `${this.form.type === 'rent' ? '出租' : '流转'}-其他农村资源-${this.form.address.split('市')[1] || this.form.address}`, // 标题 - 自动生成 | |||||
| unit: "", // 单位 - 其他资源价格单位灵活 | |||||
| image: this.form.images.map(item => item.url).join(','), // 图片 - 使用资源照片 | |||||
| iconImage: "", // 左上角图标 | |||||
| homeImage: "", // 产权证照片 - 其他资源可能无产权证 | |||||
| homeMp4: this.form.videos.map(item => item.url).join(','), // 视频 | |||||
| latitude: this.form.latitude, | |||||
| longitude: this.form.longitude, | |||||
| // 新增字段用于标识其他资源 | |||||
| category: 'other', | |||||
| contactName: this.form.contactName, | |||||
| contactPhone: this.form.contactPhone | |||||
| }; | |||||
| console.log('其他资源提交参数：', params); | |||||
| uni.showLoading({ | |||||
| title: '提交中...' | |||||
| }); | |||||
| // 调用统一API | |||||
| saveOrUpdateHouse(params).then(response => { | |||||
| uni.hideLoading(); | |||||
| uni.showToast({ | |||||
| title: response.message || '提交成功', | |||||
| icon: 'success' | |||||
| }); | |||||
| setTimeout(() => { | |||||
| uni.redirectTo({ | |||||
| url: "/pages_subpack/successful-apply/index" | |||||
| }); | |||||
| }, 2000); | |||||
| }).catch(error => { | |||||
| uni.hideLoading(); | |||||
| uni.showToast({ | |||||
| title: error.message || '提交失败', | |||||
| icon: 'none' | |||||
| }); | |||||
| console.error('其他资源提交失败：', error); | |||||
| }); | |||||
| }).catch(errors => { | |||||
| console.log('表单验证失败：', errors); | |||||
| uni.showToast({ | |||||
| title: '请补全必填项', | |||||
| icon: 'none' | |||||
| }); | |||||
| }); | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped> | |||||
| .container { | |||||
| min-height: 100vh; | |||||
| background-color: #f5f5f5; | |||||
| } | |||||
| .header { | |||||
| background: linear-gradient(135deg, #1EC77A 0%, #4CAF50 100%); | |||||
| padding: 40rpx 40rpx 60rpx; | |||||
| color: white; | |||||
| } | |||||
| .title { | |||||
| font-size: 36rpx; | |||||
| font-weight: bold; | |||||
| text-align: center; | |||||
| } | |||||
| .form-container { | |||||
| background: white; | |||||
| margin: -30rpx 20rpx 20rpx; | |||||
| border-radius: 20rpx; | |||||
| padding: 40rpx; | |||||
| box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1); | |||||
| } | |||||
| .section-title { | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| color: #333; | |||||
| margin: 40rpx 0 30rpx; | |||||
| padding-left: 20rpx; | |||||
| border-left: 6rpx solid #1EC77A; | |||||
| } | |||||
| .section-title:first-child { | |||||
| margin-top: 0; | |||||
| } | |||||
| .input-tip { | |||||
| font-size: 22rpx; | |||||
| color: #999; | |||||
| margin-top: 10rpx; | |||||
| line-height: 1.4; | |||||
| } | |||||
| .upload-tip { | |||||
| font-size: 24rpx; | |||||
| color: #666; | |||||
| margin-bottom: 10rpx; | |||||
| line-height: 1.5; | |||||
| } | |||||
| .price-container { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| gap: 10rpx; | |||||
| } | |||||
| .char-count { | |||||
| font-size: 22rpx; | |||||
| color: #999; | |||||
| text-align: right; | |||||
| margin-top: 10rpx; | |||||
| } | |||||
| .agreement-container { | |||||
| margin: 30rpx 0; | |||||
| padding: 30rpx; | |||||
| background: #f8f9fa; | |||||
| border-radius: 15rpx; | |||||
| border: 2rpx solid #e9ecef; | |||||
| } | |||||
| .agreement-content { | |||||
| margin-bottom: 30rpx; | |||||
| } | |||||
| .agreement-title { | |||||
| display: block; | |||||
| font-size: 28rpx; | |||||
| font-weight: bold; | |||||
| color: #333; | |||||
| margin-bottom: 20rpx; | |||||
| } | |||||
| .agreement-text { | |||||
| display: block; | |||||
| font-size: 24rpx; | |||||
| color: #666; | |||||
| line-height: 1.6; | |||||
| } | |||||
| .agreement-label { | |||||
| font-size: 26rpx; | |||||
| color: #333; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| </style> | |||||
+ 254
- 0
pages_subpack/house/select.vue
View File
| @ -0,0 +1,254 @@ | |||||
| <template> | |||||
| <view class="container"> | |||||
| <view class="header"> | |||||
| <view class="title">选择发布类型</view> | |||||
| <view class="subtitle">请选择您要发布的房源类型</view> | |||||
| </view> | |||||
| <view class="options-container"> | |||||
| <view | |||||
| class="option-item" | |||||
| v-for="(item, index) in optionList" | |||||
| :key="index" | |||||
| @click="onSelectOption(item)" | |||||
| > | |||||
| <view class="option-icon"> | |||||
| <image :src="item.image" v-if="item.image" mode="aspectFill"></image> | |||||
| <text class="icon-emoji" v-if="item.icon">{{item.icon}}</text> | |||||
| </view> | |||||
| <view class="option-content"> | |||||
| <view class="option-title">{{item.title}}</view> | |||||
| <view class="option-desc">{{item.shortTitle}}</view> | |||||
| </view> | |||||
| <view class="option-arrow"> | |||||
| <uv-icon name="arrow-right" color="#999" size="20"></uv-icon> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="tips"> | |||||
| <view class="tips-title">温馨提示</view> | |||||
| <!-- <view class="tips-content"> | |||||
| • 请根据您的实际情况选择对应的发布类型<br/> | |||||
| • 不同类型的房源信息录入内容会有所差异<br/> | |||||
| • 提交后将进入相应的信息录入页面 | |||||
| </view> --> | |||||
| <view class="tips-content" | |||||
| v-html="info"> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import { commonIndexIndexIcon } from "@/common/api.js" | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| optionList: [ | |||||
| // { | |||||
| // code: 'idle_farmhouse', | |||||
| // title: '闲置农房/宅基地', | |||||
| // shortTitle: '农村闲置房屋、宅基地等资源', | |||||
| // icon: '🏡', | |||||
| // type: 1 | |||||
| // }, | |||||
| // { | |||||
| // code: 'commercial_land', | |||||
| // title: '经营性建设用地', | |||||
| // shortTitle: '可用于商业经营的建设用地', | |||||
| // icon: '🏢', | |||||
| // type: 2 | |||||
| // }, | |||||
| // { | |||||
| // code: 'other_resources', | |||||
| // title: '其他农村资源', | |||||
| // shortTitle: '其他类型的农村可利用资源', | |||||
| // icon: '🌾', | |||||
| // type: 3 | |||||
| // }, | |||||
| ], | |||||
| info : '', | |||||
| } | |||||
| }, | |||||
| onLoad() { | |||||
| this.getRlease_home_info() | |||||
| this.onCommonIndexIndexIcon() | |||||
| }, | |||||
| methods: { | |||||
| onCommonIndexIndexIcon(){ | |||||
| let that = this | |||||
| commonIndexIndexIcon({}).then(response=>{ | |||||
| console.info('onCommonIndexIndexIcon',response) | |||||
| that.optionList = response.result | |||||
| }) | |||||
| }, | |||||
| getRlease_home_info(){ | |||||
| console.log(this.$utils.getkeyContent('release_home_info')); | |||||
| let a = this.$utils.getkeyContent('release_home_info') || {} | |||||
| this.info = (a.keyContent || '').replaceAll('\n', '<br>') | |||||
| }, | |||||
| onSelectOption(item) { | |||||
| console.log('选择了:', item); | |||||
| // 根据不同类型跳转到不同的录入页面 | |||||
| let targetUrl = ''; | |||||
| if (item.code === 'idle_farmhouse') { | |||||
| // 闲置农房跳转到专门的录入页面 | |||||
| targetUrl = `/pages_subpack/house/farmhouse?commonClass=${item.id}`; | |||||
| } else if (item.code === 'commercial_land') { | |||||
| // 经营性建设用地跳转到专门的录入页面 | |||||
| targetUrl = `/pages_subpack/house/commercial?commonClass=${item.id}`; | |||||
| } else if (item.code === 'other_resources') { | |||||
| // 其他农村资源跳转到专门的录入页面 | |||||
| targetUrl = `/pages_subpack/house/other?commonClass=${item.id}`; | |||||
| } else { | |||||
| // 其他类型跳转到通用录入页面 | |||||
| targetUrl = `/pages_subpack/house/index?id=${item.id}&title=${item.title}`; | |||||
| } | |||||
| uni.navigateTo({ | |||||
| url: targetUrl | |||||
| }); | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .container { | |||||
| min-height: 100vh; | |||||
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |||||
| padding: 40rpx; | |||||
| } | |||||
| .header { | |||||
| text-align: center; | |||||
| margin-bottom: 80rpx; | |||||
| padding-top: 60rpx; | |||||
| } | |||||
| .title { | |||||
| font-size: 48rpx; | |||||
| font-weight: bold; | |||||
| color: #333; | |||||
| margin-bottom: 20rpx; | |||||
| } | |||||
| .subtitle { | |||||
| font-size: 28rpx; | |||||
| color: #666; | |||||
| line-height: 1.6; | |||||
| } | |||||
| .options-container { | |||||
| margin-bottom: 60rpx; | |||||
| } | |||||
| .option-item { | |||||
| background: #fff; | |||||
| border-radius: 20rpx; | |||||
| padding: 40rpx 30rpx; | |||||
| margin-bottom: 30rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.08); | |||||
| transition: all 0.3s ease; | |||||
| position: relative; | |||||
| overflow: hidden; | |||||
| } | |||||
| .option-item::before { | |||||
| content: ''; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| right: 0; | |||||
| height: 6rpx; | |||||
| background: linear-gradient(90deg, #1EC77A 0%, #4CAF50 100%); | |||||
| transform: scaleX(0); | |||||
| transition: transform 0.3s ease; | |||||
| } | |||||
| .option-item:active { | |||||
| transform: translateY(2rpx); | |||||
| box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.12); | |||||
| } | |||||
| .option-item:active::before { | |||||
| transform: scaleX(1); | |||||
| } | |||||
| .option-icon { | |||||
| width: 120rpx; | |||||
| height: 120rpx; | |||||
| margin-right: 30rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background: #f8f9fa; | |||||
| border-radius: 50%; | |||||
| image{ | |||||
| width: 100rpx; | |||||
| height: 100rpx; | |||||
| border-radius: 50%; | |||||
| } | |||||
| } | |||||
| .icon-emoji { | |||||
| font-size: 60rpx; | |||||
| line-height: 1; | |||||
| } | |||||
| .option-content { | |||||
| flex: 1; | |||||
| } | |||||
| .option-title { | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| color: #333; | |||||
| margin-bottom: 10rpx; | |||||
| } | |||||
| .option-desc { | |||||
| font-size: 26rpx; | |||||
| color: #666; | |||||
| line-height: 1.5; | |||||
| } | |||||
| .option-arrow { | |||||
| margin-left: 20rpx; | |||||
| } | |||||
| .tips { | |||||
| background: #fff; | |||||
| border-radius: 20rpx; | |||||
| padding: 30rpx; | |||||
| box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.06); | |||||
| } | |||||
| .tips-title { | |||||
| font-size: 28rpx; | |||||
| font-weight: bold; | |||||
| color: #1EC77A; | |||||
| margin-bottom: 20rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| } | |||||
| .tips-title::before { | |||||
| content: ''; | |||||
| width: 8rpx; | |||||
| height: 32rpx; | |||||
| background: #1EC77A; | |||||
| border-radius: 4rpx; | |||||
| margin-right: 15rpx; | |||||
| } | |||||
| .tips-content { | |||||
| font-size: 24rpx; | |||||
| color: #666; | |||||
| line-height: 1.8; | |||||
| } | |||||
| </style> | |||||
+ 311
- 0
pages_subpack/member/index.vue
View File
| @ -0,0 +1,311 @@ | |||||
| <template> | |||||
| <view class="u-page"> | |||||
| <!-- 头部会员卡片 --> | |||||
| <view class="member-header"> | |||||
| <view class="member-card"> | |||||
| <view class="card-bg"> | |||||
| <view class="member-title"> | |||||
| <uv-icon name="level" size="60rpx" color="#FFD700"></uv-icon> | |||||
| <text class="title-text">会员中心</text> | |||||
| </view> | |||||
| <view class="member-desc">开通永久会员，享受更多专属权益</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 会员权益 --> | |||||
| <view class="rights-section"> | |||||
| <view class="section-title"> | |||||
| <text>会员专享权益</text> | |||||
| </view> | |||||
| <view class="rights-list"> | |||||
| <view class="right-item"> | |||||
| <view class="right-icon"> | |||||
| <uv-icon name="map-fill" size="40rpx" color="#FF6B6B"></uv-icon> | |||||
| </view> | |||||
| <view class="right-content"> | |||||
| <text class="right-title">查看详细地址</text> | |||||
| <text class="right-desc">查看具体定位和村址，普通用户只能看到乡镇</text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="right-item"> | |||||
| <view class="right-icon"> | |||||
| <uv-icon name="phone-fill" size="40rpx" color="#4ECDC4"></uv-icon> | |||||
| </view> | |||||
| <view class="right-content"> | |||||
| <text class="right-title">查看联系方式</text> | |||||
| <text class="right-desc">查看房主手机号，方便直接联系</text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="right-item"> | |||||
| <view class="right-icon"> | |||||
| <uv-icon name="star-fill" size="40rpx" color="#FFD700"></uv-icon> | |||||
| </view> | |||||
| <view class="right-content"> | |||||
| <text class="right-title">优先查看房源</text> | |||||
| <text class="right-desc">抢先查看最新房源信息</text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="right-item"> | |||||
| <view class="right-icon"> | |||||
| <uv-icon name="heart-fill" size="40rpx" color="#9B59B6"></uv-icon> | |||||
| </view> | |||||
| <view class="right-content"> | |||||
| <text class="right-title">专属客服</text> | |||||
| <text class="right-desc">享受一对一专属客服服务</text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="right-item"> | |||||
| <view class="right-icon"> | |||||
| <uv-icon name="gift-fill" size="40rpx" color="#E74C3C"></uv-icon> | |||||
| </view> | |||||
| <view class="right-content"> | |||||
| <text class="right-title">永久会员标识</text> | |||||
| <text class="right-desc">尊贵的永久会员身份标识</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 永久会员价格 --> | |||||
| <view class="package-section"> | |||||
| <view class="price-card"> | |||||
| <view class="price-header"> | |||||
| <view class="price-tag"> | |||||
| <text class="currency">￥</text> | |||||
| <text class="price">99</text> | |||||
| </view> | |||||
| <text class="price-desc">永久会员</text> | |||||
| </view> | |||||
| <view class="price-benefits"> | |||||
| <text class="benefit-text">• 一次购买，终身享受所有会员权益</text> | |||||
| <text class="benefit-text">• 无需续费，永久有效</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 开通按钮 --> | |||||
| <view class="action-section"> | |||||
| <uv-button type="primary" @click="openMember" | |||||
| style="background: linear-gradient(135deg, #1EC77A 0%, #16A085 100%); border: none; border-radius: 50rpx; height: 100rpx; font-size: 32rpx; font-weight: bold;"> | |||||
| 立即开通永久会员 - ￥99 | |||||
| </uv-button> | |||||
| <view class="agreement"> | |||||
| <text>开通即表示同意</text> | |||||
| <text class="link" @click="showAgreement">《永久会员服务协议》</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| memberPrice: 99 // 永久会员价格 | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| openMember() { | |||||
| uni.showModal({ | |||||
| title: '确认开通', | |||||
| content: `确定开通永久会员吗？\n价格：￥${this.memberPrice}\n终身享受会员权益`, | |||||
| confirmText: '确认开通', | |||||
| cancelText: '取消', | |||||
| success: (res) => { | |||||
| if (res.confirm) { | |||||
| this.processPay() | |||||
| } | |||||
| } | |||||
| }) | |||||
| }, | |||||
| processPay() { | |||||
| // 这里应该调用支付接口 | |||||
| uni.showLoading({ | |||||
| title: '处理中...' | |||||
| }) | |||||
| // 模拟支付处理 | |||||
| setTimeout(() => { | |||||
| uni.hideLoading() | |||||
| uni.showToast({ | |||||
| title: '永久会员开通成功', | |||||
| icon: 'success', | |||||
| duration: 2000 | |||||
| }) | |||||
| // 返回上一页并刷新用户信息 | |||||
| setTimeout(() => { | |||||
| uni.navigateBack() | |||||
| }, 2000) | |||||
| }, 2000) | |||||
| }, | |||||
| showAgreement() { | |||||
| uni.showModal({ | |||||
| title: '永久会员服务协议', | |||||
| content: '1. 永久会员享有查看详细地址和联系方式的权限\n2. 会员权益包括但不限于：查看具体定位、村址信息、房主手机号等\n3. 永久会员权益终身有效，无需续费\n4. 其他会员服务条款...', | |||||
| showCancel: false, | |||||
| confirmText: '我知道了' | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped> | |||||
| .u-page { | |||||
| background: linear-gradient(180deg, #1EC77A 0%, #f5f5f5 30%); | |||||
| min-height: 100vh; | |||||
| } | |||||
| .member-header { | |||||
| padding: 40rpx 30rpx; | |||||
| } | |||||
| .member-card { | |||||
| background: rgba(255, 255, 255, 0.15); | |||||
| border-radius: 20rpx; | |||||
| padding: 40rpx; | |||||
| backdrop-filter: blur(10rpx); | |||||
| } | |||||
| .member-title { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| margin-bottom: 20rpx; | |||||
| } | |||||
| .title-text { | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| color: white; | |||||
| margin-left: 20rpx; | |||||
| } | |||||
| .member-desc { | |||||
| font-size: 28rpx; | |||||
| color: rgba(255, 255, 255, 0.8); | |||||
| } | |||||
| .rights-section, .package-section { | |||||
| margin: 30rpx; | |||||
| background: white; | |||||
| border-radius: 20rpx; | |||||
| padding: 40rpx 30rpx; | |||||
| } | |||||
| .section-title { | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| color: #333; | |||||
| margin-bottom: 30rpx; | |||||
| } | |||||
| .rights-list { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 30rpx; | |||||
| } | |||||
| .right-item { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| } | |||||
| .right-icon { | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .right-content { | |||||
| flex: 1; | |||||
| } | |||||
| .right-title { | |||||
| display: block; | |||||
| font-size: 28rpx; | |||||
| font-weight: bold; | |||||
| color: #333; | |||||
| margin-bottom: 8rpx; | |||||
| } | |||||
| .right-desc { | |||||
| font-size: 24rpx; | |||||
| color: #666; | |||||
| } | |||||
| .price-card { | |||||
| text-align: center; | |||||
| background: linear-gradient(135deg, #1EC77A 0%, #16A085 100%); | |||||
| border-radius: 20rpx; | |||||
| padding: 50rpx 30rpx; | |||||
| color: white; | |||||
| position: relative; | |||||
| overflow: hidden; | |||||
| } | |||||
| .price-card::before { | |||||
| content: ''; | |||||
| position: absolute; | |||||
| top: -50rpx; | |||||
| right: -50rpx; | |||||
| width: 200rpx; | |||||
| height: 200rpx; | |||||
| background: rgba(255, 255, 255, 0.1); | |||||
| border-radius: 50%; | |||||
| } | |||||
| .price-header { | |||||
| margin-bottom: 30rpx; | |||||
| } | |||||
| .price-tag { | |||||
| display: flex; | |||||
| align-items: baseline; | |||||
| justify-content: center; | |||||
| margin-bottom: 10rpx; | |||||
| } | |||||
| .currency { | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| } | |||||
| .price { | |||||
| font-size: 120rpx; | |||||
| font-weight: bold; | |||||
| line-height: 1; | |||||
| } | |||||
| .price-desc { | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| opacity: 0.9; | |||||
| } | |||||
| .price-benefits { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 15rpx; | |||||
| } | |||||
| .benefit-text { | |||||
| font-size: 26rpx; | |||||
| opacity: 0.9; | |||||
| text-align: left; | |||||
| } | |||||
| .action-section { | |||||
| padding: 30rpx; | |||||
| } | |||||
| .agreement { | |||||
| text-align: center; | |||||
| margin-top: 20rpx; | |||||
| font-size: 24rpx; | |||||
| color: #666; | |||||
| } | |||||
| .link { | |||||
| color: #1EC77A; | |||||
| } | |||||
| </style> | |||||
+ 10
- 5
pages_subpack/version/index.vue
View File
BIN
static/image/tourGuide/2.png
View File
| Before | After |
|---|---|
|
|
| Width: 51 | Height: 59 | Size: 3.2 KiB |
+ 32
- 12
store/index.js
View File
+ 0
- 21
store/modules/data.js
View File
| @ -1,21 +0,0 @@ | |||||
| import { getConfig } from "@/common/api.js" | |||||
| export default { | |||||
| state: { | |||||
| }, | |||||
| getters: { | |||||
| }, | |||||
| mutations: { | |||||
| // 初始化配置 | |||||
| initConfig(state){ | |||||
| getConfig({}).then(response=>{ | |||||
| uni.setStorageSync('configList', response.result) | |||||
| }).catch(error=>{ | |||||
| }) | |||||
| }, | |||||
| }, | |||||
| actions: {} | |||||
| } | |||||
+ 0
- 53
store/modules/user.js
View File
| @ -1,53 +0,0 @@ | |||||
| import { getInfo } from "@/common/api.js" | |||||
| export default { | |||||
| state: { | |||||
| token:"", | |||||
| userInfo : {}, //用户信息 | |||||
| }, | |||||
| mutations: { | |||||
| onAuth(state){ | |||||
| }, | |||||
| setUserInfo(state,obj){ | |||||
| state.userInfo = obj.userInfo | |||||
| state.token = obj.token | |||||
| }, | |||||
| getUserInfo(state){ | |||||
| if(!uni.getStorageSync('token')){ | |||||
| return | |||||
| } | |||||
| getInfo({}).then(result=>{ | |||||
| if(result.result.nickName){ | |||||
| state.userInfo = result.result | |||||
| }else{ | |||||
| uni.navigateTo({ | |||||
| url:"/pages/login/index" | |||||
| }) | |||||
| } | |||||
| }) | |||||
| }, | |||||
| logout(state){ | |||||
| uni.showModal({ | |||||
| title: '确认退出登录吗', | |||||
| success(r) { | |||||
| if(r.confirm){ | |||||
| state.userInfo = {} | |||||
| state.token = "" | |||||
| uni.removeStorageSync('token') | |||||
| uni.redirectTo({ | |||||
| url: '/pages/index/index' | |||||
| }) | |||||
| } | |||||
| } | |||||
| }) | |||||
| }, | |||||
| }, | |||||
| actions: {} | |||||
| } | |||||