From 2383b1a6129a98ea731893d2ea7705d996736c2c Mon Sep 17 00:00:00 2001 From: hot777zz <912275990@qq.com> Date: Sat, 18 Nov 2023 20:46:43 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A2=81=E8=88=AA=EF=BC=9A=E5=8F=91=E5=B8=83?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E7=BB=91=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../publish/publishAddress/publishAddress.vue | 263 ++++++++---- .../publishInvestment/publishInvestment.vue | 276 +++++++------ pages/publish/publishRent/publishRent.vue | 385 ++++++++++++------ .../publishTransfer/publishTransfer.vue | 6 +- service/request.js | 21 + 5 files changed, 626 insertions(+), 325 deletions(-) diff --git a/pages/publish/publishAddress/publishAddress.vue b/pages/publish/publishAddress/publishAddress.vue index 309985f..99f694b 100644 --- a/pages/publish/publishAddress/publishAddress.vue +++ b/pages/publish/publishAddress/publishAddress.vue @@ -2,53 +2,58 @@ - + - + {{form.region}} 请选择所属区域 - + - - {{form.trade}} + + + + + {{form.business}} 请选择行业 - + - - {{form.karma}} + + {{form.commercial}} 请选择业态 - + - - + + - + - - + + - - + + - - - - - + + @@ -62,31 +67,31 @@ export default { data() { return { + imageLength: '0', + fileList1: [], regionColumns: [JSON.parse(uni.getStorageSync('regionList'))] || [], - ShopInfomation: { - city: '', - area: '', - count: 0, - - }, form: { title: '', region: '', - place: '', - trade: '', - karma: '', - size: '', + address: '', + business: '', + commercial: '', + transferFee:'', rent: '', - sell: '', - name: '', - call: '', - introduce: '' + contact:'', + mobile: '', + content: '', + // images: [], + longitude: '', + latitude: '', + id: '', + }, Classcolumns: [], - ClassCheckId:'', + ClassCheckId: '', Karmacolumns: [], - pid:[], + pid: [], show1: false, show2: false, show3: false, @@ -96,37 +101,37 @@ message: '请输入标题', trigger: ['change', 'blur'] }], - 'trade': [{ + 'business': [{ required: true, message: '请选择行业', - trigger: ['change', 'blur'] + trigger: ['change'] }], 'region': [{ required: true, message: '请选择地区', - trigger: ['change', 'blur'] + trigger: ['change'] }], - 'karma': [{ + 'commercial': [{ required: true, message: '请选择业态', - trigger: ['change', 'blur'] + trigger: ['change'] }], - 'name': [{ - required: true, - message: '请输入姓名', - trigger: ['change', 'blur'] - }], - 'sell': [{ + 'transferFee': [{ required: true, message: '请输入转让金', trigger: ['change', 'blur'] }], - 'introduce': [{ + 'contact': [{ + required: true, + message: '请输入姓名', + trigger: ['change', 'blur'] + }], + 'content': [{ required: true, message: '请输入介绍', trigger: ['change', 'blur'] }], - 'size': [{ + 'area': [{ required: true, message: '请输入面积', trigger: ['change', 'blur'] @@ -136,72 +141,154 @@ message: '请输入租金', trigger: ['change', 'blur'] }], - 'place': [{ + 'address': [{ required: true, message: '请输入地址', trigger: ['change', 'blur'] }], - 'call':[{ - required: true, - message: '请输入电话号码', - }, - { - validator: (rule, value, callback) => { - if(value) { - return this.$u.test.mobile(value); - } else { - return true - } + 'mobile': [{ + required: true, + message: '请输入电话号码', }, - message: '号码不正确', - trigger: ['change','blur'], - }] + { + validator: (rule, value, callback) => { + if (value) { + return this.$u.test.mobile(value); + } else { + return true + } + }, + message: '号码不正确', + trigger: ['change', 'blur'], + } + ] }, } }, methods: { + // 删除图片 + deletePic(event) { + this[`fileList${event.name}`].splice(event.index, 1) + }, + preview(e) { + console.log('预览', e); + }, + // 新增图片 + async afterRead(event) { + // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 + let lists = [].concat(event.file) + let fileListLen = this[`fileList${event.name}`].length + lists.map((item) => { + this[`fileList${event.name}`].push({ + ...item, + status: 'uploading', + message: '上传中' + }) + }) + for (let i = 0; i < lists.length; i++) { + console.log('lists[i].url', lists[i].url); + const result = await this.uploadFilePromise(lists[i].url) + console.log('result', result); + let item = this[`fileList${event.name}`][fileListLen] + this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { + status: 'success', + message: '', + url: result + })) + fileListLen++ + this.imageLength = fileListLen + } + }, + uploadFilePromise(filePath) { + return new Promise((resolve, reject) => { + const token = uni.getStorageSync('loginToken') + const a = uni.uploadFile({ + url: this.$api.uploadImgUrl, + filePath: filePath, + name: 'file', + header: { + "Content-Type": "multipart/form-data", + 'Authorization': token + }, + success: (res) => { + resolve(JSON.parse(res.data).data.url) + } + }); + }) + }, handleSearchAddress() { uni.navigateTo({ url: '/pages/publish/chooseAddress/chooseAddress' }) }, submit() { + const temp = [] + if (this.fileList1.length > 0) { + this.fileList1.map(item => { + const url = item.url + temp.push(url.replace(this.imgUrl + '/', '')) + }) + } + console.log('images---', temp.join(',')); this.$refs.uForm.validate().then(res => { console.log("提交表单信息:" + JSON.stringify(this.form)) uni.$u.toast('发布成功') - // 调用服务端入表接口W + this.$api.publishRent(this.form).then(res => { + console.log(res); + }) }).catch(errors => { console.log("失败信息:" + JSON.stringify(errors)) // uni.$u.toast('校验失败') }) }, - tradeConfirm(e){ + changeAddress(e) { + // console.log('changeAddress', e); + this.getAddressList(e) + }, + getAddressList(value) { + var that = this + uni.request({ + url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=' + value + '&key=' + + that.$api.key, + success(res) { + console.log('diz', res.data.result.location); + // console.log('lat', res.data.result.location.lat); + that.form.latitude = res.data.result.location.lat + // console.log('lng', res.data.result.location.lng); + that.form.longitude = res.data.result.location.lng + }, + fail(err) { + console.log('请求区域失败：', err); + } + }) + }, + tradeConfirm(e) { this.show2 = false - this.form.trade = e.value[0] + this.form.business = e.value[0] this.ClassCheckId = this.pid[e.indexs[0]] this.$api.getClassList(this.ClassCheckId).then(res => { // console.log(res); this.Karmacolumns = res.data.data.map((item) => { - return item = item.name - }) + return item = item.name + }) }) }, - karmaConfirm(e){ + karmaConfirm(e) { this.show3 = false - this.form.karma = e.value[0] + this.form.commercial = e.value[0] }, - regionConfirm(e){ + regionConfirm(e) { this.show1 = false this.form.region = e.value[0] }, }, onReady() { this.$refs.uForm.setRules(this.rules) - + }, onLoad() { - this.$api.getClassList().then(res =>{ + this.$api.getClassList().then(res => { // console.log(res.data.data.length); this.Classcolumns = res.data.data.map((item) => { return item = item.name @@ -209,15 +296,15 @@ this.pid = res.data.data.map((item) => { return item = item.id }) - + }) }, - computed:{ - isChecked(index){ - if(index.length > 0) - return true; + computed: { + isChecked(index) { + if (index.length > 0) + return true; else - return false; + return false; } } } @@ -244,7 +331,11 @@ justify-content: center; align-items: center; background-color: #F8F8F8; - height: 300rpx; + + // height: 300rpx; + .count { + margin-bottom: 30px; + } // margin-right: 20px; } @@ -267,12 +358,14 @@ font-weight: 1px; color: #c1c4c7; } - .checkedtext{ + + .checkedtext { margin-top: 5rpx; font-size: 28rpx; font-weight: 1px; border-style: none; } + .picker { display: flex; justify-content: space-between; diff --git a/pages/publish/publishInvestment/publishInvestment.vue b/pages/publish/publishInvestment/publishInvestment.vue index 6160647..f648351 100644 --- a/pages/publish/publishInvestment/publishInvestment.vue +++ b/pages/publish/publishInvestment/publishInvestment.vue @@ -2,52 +2,50 @@ - - 发布房源图片({{ShopInfomation.count}}/5) + + + + + 发布房源图片({{imageLength}}/5) - - + + - - - - + {{form.region}} 请选择所属区域 - + - - {{form.trade}} - 请选择行业 + + + + + {{form.business}} + 请选择项目行业 - + - - {{form.karma}} - 请选择业态 - - - - + + - - + + - - - - - + + @@ -61,31 +59,28 @@ export default { data() { return { + imageLength: '0', + fileList1: [], regionColumns: [JSON.parse(uni.getStorageSync('regionList'))] || [], - ShopInfomation: { - city: '', - area: '', - count: 0, - - }, form: { title: '', region: '', - place: '', - trade: '', - karma: '', - size: '', - rent: '', - sell: '', - name: '', - call: '', - introduce: '' + address: '', + business: '', + mobile: '', + contact:'', + content: '', + images: [], + longitude: '', + latitude: '', + id: '', + }, Classcolumns: [], - ClassCheckId:'', + ClassCheckId: '', Karmacolumns: [], - pid:[], + pid: [], show1: false, show2: false, show3: false, @@ -95,76 +90,127 @@ message: '请输入标题', trigger: ['change', 'blur'] }], - 'trade': [{ + 'business': [{ required: true, message: '请选择行业', - trigger: ['change', 'blur'] + trigger: ['change'] }], 'region': [{ required: true, message: '请选择地区', - trigger: ['change', 'blur'] + trigger: ['change'] }], - 'karma': [{ - required: true, - message: '请选择业态', - trigger: ['change', 'blur'] - }], - 'name': [{ + 'contact': [{ required: true, message: '请输入姓名', trigger: ['change', 'blur'] }], - 'sell': [{ - required: true, - message: '请输入转让金', - trigger: ['change', 'blur'] - }], - 'introduce': [{ + 'content': [{ required: true, message: '请输入介绍', trigger: ['change', 'blur'] }], - 'size': [{ - required: true, - message: '请输入面积', - trigger: ['change', 'blur'] - }], - 'rent': [{ - required: true, - message: '请输入租金', - trigger: ['change', 'blur'] - }], - 'place': [{ + 'address': [{ required: true, message: '请输入地址', trigger: ['change', 'blur'] }], - 'call':[{ - required: true, - message: '请输入电话号码', - }, - { - validator: (rule, value, callback) => { - if(value) { - return this.$u.test.mobile(value); - } else { - return true - } + 'mobile': [{ + required: true, + message: '请输入电话号码', }, - message: '号码不正确', - trigger: ['change','blur'], - }] + { + validator: (rule, value, callback) => { + if (value) { + return this.$u.test.mobile(value); + } else { + return true + } + }, + message: '号码不正确', + trigger: ['change', 'blur'], + } + ] }, } }, methods: { + // 删除图片 + deletePic(event) { + this[`fileList${event.name}`].splice(event.index, 1) + }, + preview(e) { + console.log('预览', e); + }, + // 新增图片 + async afterRead(event) { + // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 + let lists = [].concat(event.file) + let fileListLen = this[`fileList${event.name}`].length + lists.map((item) => { + this[`fileList${event.name}`].push({ + ...item, + status: 'uploading', + message: '上传中' + }) + }) + for (let i = 0; i < lists.length; i++) { + console.log('lists[i].url', lists[i].url); + const result = await this.uploadFilePromise(lists[i].url) + console.log('result', result); + let item = this[`fileList${event.name}`][fileListLen] + this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { + status: 'success', + message: '', + url: result + })) + fileListLen++ + this.imageLength = fileListLen + } + }, + uploadFilePromise(filePath) { + return new Promise((resolve, reject) => { + const token = uni.getStorageSync('loginToken') + const a = uni.uploadFile({ + url: this.$api.uploadImgUrl, + filePath: filePath, + name: 'file', + header: { + "Content-Type": "multipart/form-data", + 'Authorization': token + }, + success: (res) => { + resolve(JSON.parse(res.data).data.url) + } + }); + }) + }, handleSearchAddress() { uni.navigateTo({ url: '/pages/publish/chooseAddress/chooseAddress' }) }, + submit() { + const temp = [] + if (this.fileList1.length > 0) { + this.fileList1.map(item => { + const url = item.url + temp.push(url.replace(this.imgUrl + '/', '')) + }) + } + console.log('images---', temp.join(',')); + this.$refs.uForm.validate().then(res => { + console.log("提交表单信息:" + JSON.stringify(this.form)) + uni.$u.toast('发布成功') + this.$api.publishRent(this.form).then(res => { + console.log(res); + }) + }).catch(errors => { + console.log("失败信息:" + JSON.stringify(errors)) + // uni.$u.toast('校验失败') + }) + }, changeAddress(e) { // console.log('changeAddress', e); this.getAddressList(e) @@ -176,50 +222,42 @@ that.$api.key, success(res) { console.log('diz', res.data.result.location); - console.log('lat', res.data.result.location.lat); - console.log('lng', res.data.result.location.lng); + // console.log('lat', res.data.result.location.lat); + that.form.latitude = res.data.result.location.lat + // console.log('lng', res.data.result.location.lng); + that.form.longitude = res.data.result.location.lng }, fail(err) { console.log('请求区域失败：', err); } }) }, - submit() { - this.$refs.uForm.validate().then(res => { - console.log("提交表单信息:" + JSON.stringify(this.form)) - uni.$u.toast('发布成功') - // 调用服务端入表接口W - }).catch(errors => { - console.log("失败信息:" + JSON.stringify(errors)) - // uni.$u.toast('校验失败') - }) - }, - tradeConfirm(e){ + tradeConfirm(e) { this.show2 = false - this.form.trade = e.value[0] + this.form.business = e.value[0] this.ClassCheckId = this.pid[e.indexs[0]] this.$api.getClassList(this.ClassCheckId).then(res => { // console.log(res); this.Karmacolumns = res.data.data.map((item) => { - return item = item.name - }) + return item = item.name + }) }) }, - karmaConfirm(e){ + karmaConfirm(e) { this.show3 = false - this.form.karma = e.value[0] + this.form.commercial = e.value[0] }, - regionConfirm(e){ + regionConfirm(e) { this.show1 = false this.form.region = e.value[0] }, }, onReady() { this.$refs.uForm.setRules(this.rules) - + }, onLoad() { - this.$api.getClassList().then(res =>{ + this.$api.getClassList().then(res => { // console.log(res.data.data.length); this.Classcolumns = res.data.data.map((item) => { return item = item.name @@ -227,15 +265,15 @@ this.pid = res.data.data.map((item) => { return item = item.id }) - + }) }, - computed:{ - isChecked(index){ - if(index.length > 0) - return true; + computed: { + isChecked(index) { + if (index.length > 0) + return true; else - return false; + return false; } } } @@ -262,7 +300,11 @@ justify-content: center; align-items: center; background-color: #F8F8F8; - height: 300rpx; + + // height: 300rpx; + .count { + margin-bottom: 30px; + } // margin-right: 20px; } @@ -285,12 +327,14 @@ font-weight: 1px; color: #c1c4c7; } - .checkedtext{ + + .checkedtext { margin-top: 5rpx; font-size: 28rpx; font-weight: 1px; border-style: none; } + .picker { display: flex; justify-content: space-between; diff --git a/pages/publish/publishRent/publishRent.vue b/pages/publish/publishRent/publishRent.vue index 6670fde..fd4ed8d 100644 --- a/pages/publish/publishRent/publishRent.vue +++ b/pages/publish/publishRent/publishRent.vue @@ -2,54 +2,71 @@ - - 发布店铺图片({{ShopInfomation.count}}/5) + + + + + 发布房源图片({{imageLength}}/5) - - - - - - {{form.region}} - 请选择所属区域 - - - - - - - - - - - {{form.trade}} - 请选择店铺行业 - - - - - - - - - - - - - - - - - - - - - - - 发布 - + + + + + {{form.region}} + 请选择所属区域 + + + + + + + + + + + {{form.business}} + 请选择店铺行业 + + + + + + + {{form.commercial}} + 请选择店铺业态 + + + + + + + + + + + + + + + + + + + + + + + 发布 + @@ -57,56 +74,66 @@ export default { data() { return { - regionColumns:[JSON.parse(uni.getStorageSync('regionList'))]||[], - ShopInfomation:{ - city:'', - area:'', - count:0, - - }, - + imageLength: '0', + fileList1: [], + regionColumns: [JSON.parse(uni.getStorageSync('regionList'))] || [], + form: { title: '', region: '', - place: '', - trade: '', - size: '', + address: '', + business: '', + commercial: '', + area: '', rent: '', - name: '', - call: '', - introduce: '' + contact:'', + mobile: '', + content: '', + images: [], + longitude: '', + latitude: '', + id: '', + }, - Classcolumns:[], - show1:false, - show2:false, - show3:false, + Classcolumns: [], + ClassCheckId: '', + Karmacolumns: [], + pid: [], + show1: false, + show2: false, + show3: false, rules: { 'title': [{ required: true, message: '请输入标题', trigger: ['change', 'blur'] }], - 'trade': [{ + 'business': [{ required: true, message: '请选择行业', - trigger: ['change', 'blur'] + trigger: ['change'] }], 'region': [{ required: true, message: '请选择地区', - trigger: ['change', 'blur'] + trigger: ['change'] }], - 'name': [{ + 'commercial': [{ + required: true, + message: '请选择业态', + trigger: ['change'] + }], + 'contact': [{ required: true, message: '请输入姓名', trigger: ['change', 'blur'] }], - 'introduce': [{ + 'content': [{ required: true, message: '请输入介绍', trigger: ['change', 'blur'] }], - 'size': [{ + 'area': [{ required: true, message: '请输入面积', trigger: ['change', 'blur'] @@ -116,123 +143,239 @@ message: '请输入租金', trigger: ['change', 'blur'] }], - 'place': [{ + 'address': [{ required: true, message: '请输入地址', trigger: ['change', 'blur'] }], - 'call':[{ - required: true, - message: '请输入电话号码', - }, - { - validator: (rule, value, callback) => { - if(value) { - return this.$u.test.mobile(value); - } else { - return true - } + 'mobile': [{ + required: true, + message: '请输入电话号码', }, - message: '号码不正确', - trigger: ['change','blur'], - }] - + { + validator: (rule, value, callback) => { + if (value) { + return this.$u.test.mobile(value); + } else { + return true + } + }, + message: '号码不正确', + trigger: ['change', 'blur'], + } + ] + }, } - }, methods: { - confirmArea(e) { - this.ShopInfomation.city = e.value[0] - this.ShopInfomation.area = e.value[1] - this.show1 = false + // 删除图片 + deletePic(event) { + this[`fileList${event.name}`].splice(event.index, 1) + }, + preview(e) { + console.log('预览', e); + }, + // 新增图片 + async afterRead(event) { + // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 + let lists = [].concat(event.file) + let fileListLen = this[`fileList${event.name}`].length + lists.map((item) => { + this[`fileList${event.name}`].push({ + ...item, + status: 'uploading', + message: '上传中' + }) + }) + for (let i = 0; i < lists.length; i++) { + console.log('lists[i].url', lists[i].url); + const result = await this.uploadFilePromise(lists[i].url) + console.log('result', result); + let item = this[`fileList${event.name}`][fileListLen] + this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { + status: 'success', + message: '', + url: result + })) + fileListLen++ + this.imageLength = fileListLen + } + }, + uploadFilePromise(filePath) { + return new Promise((resolve, reject) => { + const token = uni.getStorageSync('loginToken') + const a = uni.uploadFile({ + url: this.$api.uploadImgUrl, + filePath: filePath, + name: 'file', + header: { + "Content-Type": "multipart/form-data", + 'Authorization': token }, + success: (res) => { + resolve(JSON.parse(res.data).data.url) + } + }); + }) + }, + handleSearchAddress() { + uni.navigateTo({ + url: '/pages/publish/chooseAddress/chooseAddress' + }) + }, submit() { + const temp = [] + if (this.fileList1.length > 0) { + this.fileList1.map(item => { + const url = item.url + temp.push(url.replace(this.imgUrl + '/', '')) + }) + } + console.log('images---', temp.join(',')); this.$refs.uForm.validate().then(res => { console.log("提交表单信息:" + JSON.stringify(this.form)) uni.$u.toast('发布成功') - // 调用服务端入表接口W + this.$api.publishRent(this.form).then(res => { + console.log(res); + }) }).catch(errors => { console.log("失败信息:" + JSON.stringify(errors)) // uni.$u.toast('校验失败') }) }, - tradeConfirm(e){ - this.show2 = false - this.form.trade = e.value[0] + changeAddress(e) { + // console.log('changeAddress', e); + this.getAddressList(e) }, - regionConfirm(e){ + getAddressList(value) { + var that = this + uni.request({ + url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=' + value + '&key=' + + that.$api.key, + success(res) { + console.log('diz', res.data.result.location); + // console.log('lat', res.data.result.location.lat); + that.form.latitude = res.data.result.location.lat + // console.log('lng', res.data.result.location.lng); + that.form.longitude = res.data.result.location.lng + }, + fail(err) { + console.log('请求区域失败：', err); + } + }) + }, + tradeConfirm(e) { + this.show2 = false + this.form.business = e.value[0] + this.ClassCheckId = this.pid[e.indexs[0]] + this.$api.getClassList(this.ClassCheckId).then(res => { + // console.log(res); + this.Karmacolumns = res.data.data.map((item) => { + return item = item.name + }) + }) + }, + karmaConfirm(e) { + this.show3 = false + this.form.commercial = e.value[0] + }, + regionConfirm(e) { this.show1 = false this.form.region = e.value[0] - } + }, + }, + onReady() { + this.$refs.uForm.setRules(this.rules) + }, onLoad() { - this.$api.getClassList().then(res =>{ + this.$api.getClassList().then(res => { // console.log(res.data.data.length); this.Classcolumns = res.data.data.map((item) => { return item = item.name }) + this.pid = res.data.data.map((item) => { + return item = item.id + }) + }) }, - onReady() { - this.$refs.uForm.setRules(this.rules) - - }, + computed: { + isChecked(index) { + if (index.length > 0) + return true; + else + return false; + } + } } + \ No newline at end of file diff --git a/pages/publish/publishTransfer/publishTransfer.vue b/pages/publish/publishTransfer/publishTransfer.vue index 2e5a307..3f21567 100644 --- a/pages/publish/publishTransfer/publishTransfer.vue +++ b/pages/publish/publishTransfer/publishTransfer.vue @@ -7,9 +7,8 @@ multiple :maxCount="5" :on-preview="preview"> - 发布房源图片({{imageLength}}/5}) + 发布房源图片({{imageLength}}/5) - @@ -92,13 +91,14 @@ area: '', rent: '', transferFee: '', + contact:'', mobile: '', content: '', images: [], longitude: '', latitude: '', id: '', - + }, Classcolumns: [], ClassCheckId: '', diff --git a/service/request.js b/service/request.js index d122fbb..fc49d84 100644 --- a/service/request.js +++ b/service/request.js @@ -260,6 +260,27 @@ const apiService = { resolve(service.post(url, data)) }) }, + //发布店铺出租 + publishRent(data){ + const url = `/shop/rent/` + return new Promise((resolve, reject) => { + resolve(service.post(url, data)) + }) + }, + //发布找店地址 + publishAddress(data){ + const url = `/shop/selection/` + return new Promise((resolve, reject) => { + resolve(service.post(url, data)) + }) + }, + //发布项目招商 + publishInvestment(data){ + const url = `/shop/investment/` + return new Promise((resolve, reject) => { + resolve(service.post(url, data)) + }) + }, } export { apiService,