hldy_xcx/pages/addjigou/where.vue

843 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

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

<template>
<div class="container">
<!-- <u-modal v-model="show" :content="content"></u-modal> -->
<model :show="show" @close="show=false" :content="content" />
<u-popup v-model="popupshow" mode="bottom" border-radius="40" height="600px">
<view class="popup-father">
<view class="popup-title">
<view class="all-bgc"
style="display: flex; justify-content: center;align-items: center;height: 180rpx;width: 100%;position: relative;">
<view class="title-font">
请选择所在地区
</view>
<image class="title-imge-title" src="https://www.focusnu.com/media/directive/index/mark.png" />
</view>
<view style="display: flex;">
<view class="button-father" v-for="(item,index) in address"
:style="index==address.length-1?{backgroundColor:`#ffeedd`,color:`#ff5d00`}:{}">
<view>
{{item.name}}
</view>
<image class="title-imge"
:src="`https://www.focusnu.com/media/directive/index/workjoin/${index==address.length-1?`redcha`:`x`}.png`"
@click="deleteUP(index)" />
</view>
</view>
</view>
<view style="height: 180rpx;width: 100%;">
</view>
<view style="height: 80rpx;width: 100%;" v-if="address.length">
</view>
<view class="other-title">
选择地区
</view>
<view v-for="(item,index) in list" :key="index" @click="clickcard(item)">
<view class="cards">
<view class="zimu">
{{item.firstLetter}}
</view>
<view class="font">
{{item.name}}
</view>
</view>
</view>
</view>
</u-popup>
<view class="title-back">
<view class="left-father" @click="goBack">
<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
<view style="font-size: 30rpx;">机构信息</view>
</view>
</view>
<view class="white-content">
<view class="content-title">
<view class="shu"></view>
<view class="content-weight">机构信息</view>
</view>
<view class="white-message">
<view @click="openpopupshow">
<view class="one" style="position: relative;">
<view class="one-left">机构位置</view>
<input disabled style="cursor: not-allowed;pointer-events: none;" class="one-right" type="text"
placeholder="请选择机构位置" v-model="form.address" />
<image class="triangle-down" src="https://www.focusnu.com/media/directive/login/xia.png" />
</view>
</view>
<view>
<view class="one" style="overflow: hidden;">
<view class="one-left">详细地址</view>
<input class="one-right" placeholder="请输入详细地址" v-model="form.orgAddress" />
</view>
</view>
<view>
<view class="one">
<view class="one-left">机构负责人</view>
<input class="one-right" type="text" placeholder="请输入机构负责人姓名" v-model="form.orgLeader" />
</view>
</view>
<view>
<view class="one">
<view class="one-left">机构负责人电话</view>
<input class="one-right" type="number" maxlength="11" placeholder="请输入机构负责人电话"
v-model="form.orgLeaderPhone" />
</view>
</view>
<view>
<view class="one" style="position: relative;" @click="showselect = true">
<view class="one-left">房屋性质</view>
<!-- <input class="one-right-select" type="select" placeholder="请输入房屋性质" v-model="form.orgPropertyType"
@click="showselect=true" /> -->
<input disabled style="cursor: not-allowed;pointer-events: none;" class="one-right" type="text"
placeholder="请选择房屋性质" v-model="form.orgPropertyType" />
<image class="triangle-down" src="https://www.focusnu.com/media/directive/login/xia.png" />
</view>
</view>
<u-select style="font-size: 35rpx;" v-model="showselect" :list="showlist"
@confirm="onSelect1"></u-select>
<view style="margin-bottom: 20rpx;">
<view class="one" style="position: relative;">
<view class="one-left">建筑面积</view>
<input class="one-right" type="digit" placeholder="请输入建筑面积" v-model="form.orgBuildingArea"
@input="formatArea" />
<view class="triangle-down-mi">
平方米
</view>
</view>
</view>
</view>
</view>
<view style="display: flex;width: 100%;margin-top: 10rpx;padding: 0 20rpx;">
<view class="back-button" @click="goBack">
返回上一步
</view>
<view class="finish-button" @click="next">
确认并提交
</view>
</view>
</div>
</template>
<script setup>
import {
ref,
reactive,
nextTick
} from 'vue'
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
import {
base_url
} from '@/request/index.js'
import {
changemessage,
getdate
} from './api/addjigou.js'
import model from "@/compontent/public/model.vue"
const address = ref([])
const show = ref(false);
const content = ref("");
const jigouweizhi = ref("");
const popupshow = ref(false);
const list = ref([]);
const showselect = ref(false);
const showlist = reactive(
// [{
// value: `租赁`,
// },
// {
// value: `自由产权`,
// },
// {
// value: `合作使用`,
// } ,{
// value: `其它`,
// }
// ]
[{
value: 1,
label: '租赁'
},
{
value: 2,
label: '自由产权'
},
{
value: 3,
label: '合作使用'
},
{
value: 4,
label: '其它'
}
]
)
function onSelect1(arr) {
form.orgPropertyType = arr[0].label
}
const form = reactive({
orgLeader: "",
orgLeaderPhone: "",
orgAddress: "",
orgPropertyType: "",
orgBuildingArea: "",
// orgAddress: "",
orgCoordinateLo: "",
orgCoordinateLa: "",
id: uni.getStorageSync('specicalid') || "",
tel: uni.getStorageSync('tel'),
status: "1"
})
// 本地保存的临时文件路径
const tempImagePath = ref('')
const headImge = ref("");
const backImge = ref("");
function isAtLeastEightChars(str) {
return typeof str === 'string' && str.length >= 8;
}
const openLook = (res) => {
if (isAtLeastEightChars(res)) {
content.value = res;
show.value = true
}
}
//配置删除逻辑
function takeFirst(arr, num) {
// 1. 安全裁剪:确保 num 在 [0, arr.length] 范围内
const count = Math.max(0, Math.min(num, arr.length));
// 2. slice(0, count) 会返回前 count 项count=0 时即返回 []
return arr.slice(0, count);
}
const deleteUP = (index) => {
address.value = takeFirst(address.value, index);
if (index) {
// clickcard(address.value[0])
list.value = [];
getdate(address.value[0].id).then(res => {
list.value = dedupeFirstLetter(res.result)
})
} else {
list.value = [];
getdate(`xzqhdm`).then(res => {
list.value = dedupeFirstLetter(res.result)
})
}
console.log("删除了", index)
}
function isValid11DigitNumber(val) {
return /^(\d{11})$/.test(val);
}
const next = () => {
if (!form.address) {
uni.showToast({
title: '请选择机构位置',
icon: 'error'
})
return
} else if (!form.orgAddress) {
uni.showToast({
title: '请填写详细地址',
icon: 'error'
})
return
} else if (!form.orgLeader) {
uni.showToast({
title: '请填写机构负责人',
icon: 'error'
})
return
} else if (!form.orgLeaderPhone) {
uni.showToast({
title: '请填写手机号',
icon: 'error'
})
return
} else if (!isValid11DigitNumber(form.orgLeaderPhone)) {
uni.showToast({
title: '手机号格式错误',
icon: 'error'
})
return
} else if (!form.orgPropertyType) {
uni.showToast({
title: '请填写房屋性质',
icon: 'error'
})
return
} else if (!form.orgBuildingArea) {
uni.showToast({
title: '请填写建筑面积',
icon: 'error'
})
return
}
const allNonEmpty = form.orgLeader && form.orgLeaderPhone && form.orgAddress && form.orgPropertyType &&
form.orgBuildingArea && form.address
let data = uni.getStorageSync('backhuancun')
data.openId = uni.getStorageSync('openid')
data.address = form.address
data.orgProvince = form.orgProvince
data.orgCity = form.orgCity
data.orgDistrict = form.orgDistrict
data.orgAddress = form.orgAddress
data.orgLeader = form.orgLeader
data.orgLeaderPhone = form.orgLeaderPhone
data.orgPropertyType = form.orgPropertyType
data.orgBuildingArea = form.orgBuildingArea
if (data.id === null) {
data.status = `4`
} else {
data.status = form.status
}
uni.setStorageSync("backhuancun", data)
if (allNonEmpty) {
// if(!isValid11DigitNumber(form.orgLeaderPhone)){
// uni.showToast({
// title: '手机号格式错误',
// icon: 'error'
// })
// return
// }
// console.log("????",uni.getStorageSync('backhuancun'))
changemessage(uni.getStorageSync('backhuancun')).then(res => {
if (res.success) {
console.log("????", uni.getStorageSync('backhuancun').id)
if (res.message == `保存成功!`) {
uni.setStorageSync('specicalid', "");
if (uni.getStorageSync('backhuancun').id === null) {}
uni.reLaunch({
url: `/pages/login/specialsmall?type=1&special=${uni.getStorageSync('backhuancun').id===null}`
});
} else {
uni.setStorageSync('specicalid', res.result.id);
uni.reLaunch({
url: `/pages/login/specialsmall?type=1&special=${uni.getStorageSync('backhuancun').id===null}`
});
}
} else {
uni.showToast({
title: res.message,
icon: 'error'
})
}
})
} else {
uni.showToast({
title: '请完善信息',
icon: 'error'
})
}
}
const goBack = () => {
if (form.address) {
let data = uni.getStorageSync('backhuancun')
data.address = form.address
data.orgProvince = form.orgProvince
data.orgCity = form.orgCity
data.orgDistrict = form.orgDistrict
data.orgAddress = form.orgAddress
data.orgLeader = form.orgLeader
data.orgLeaderPhone = form.orgLeaderPhone
data.orgPropertyType = form.orgPropertyType
data.orgBuildingArea = form.orgBuildingArea
uni.setStorageSync("backhuancun", data)
}
uni.navigateBack()
}
const jumpToMap = () => {
uni.navigateTo({
url: "/pages/map/index"
});
}
const clickcard = (element) => {
if (address.value.length < 3) {
list.value = [];
address.value.push(element)
getdate(element.id).then(res => {
if (res.result.length) {
list.value = dedupeFirstLetter(res.result)
} else {
popupshow.value = false;
form.address = "";
address.value.forEach(res => {
form.address += res.name
})
const keys = ['orgProvince', 'orgCity', 'orgDistrict'];
keys.forEach((key, idx) => {
// 如果 address.value[idx] 存在就取它的 id否则用空字符串
form[key] = address.value[idx]?.id ? address.value[idx]?.id : "";
});
address.value = [];
list.value = [];
getdate(`xzqhdm`).then(res => {
list.value = dedupeFirstLetter(res.result)
})
}
})
}
}
const openpopupshow = () => {
popupshow.value = true;
}
onShow(() => {
// 读取并立即清除,避免下次重复拿到
const data = uni.getStorageSync('dingwei')
if (data) {
console.log("data", data)
jigouweizhi.value = data.name
form.orgAddress = data.name
form.orgCoordinateLo = data.lng
form.orgCoordinateLa = data.lat
uni.removeStorageSync('dingwei')
}
})
//处理首字母
function dedupeFirstLetter(arr) {
const seen = new Set();
return arr.map(item => {
const letter = item.firstLetter;
if (!letter || seen.has(letter)) {
// 如果没 letter 或者已经出现过,则清空
return {
...item,
firstLetter: ''
};
} else {
// 第一次出现,保留并记录
seen.add(letter);
return item;
}
});
}
function formatArea() {
const value = form.orgBuildingArea;
const firstDot = value.indexOf('.');
const lastDot = value.lastIndexOf('.');
let cleaned = value;
// 如果出现多个小数点,则去掉最后一个后面的
if (firstDot !== lastDot) {
cleaned = value.slice(0, lastDot);
}
// 限制小数点后只能有最多 4 位
if (cleaned.includes('.')) {
const [intPart, decimalPart] = cleaned.split('.');
cleaned = intPart + '.' + decimalPart.slice(0, 4);
}
// 如果格式有变动,则更新
if (cleaned !== value) {
nextTick(() => {
form.orgBuildingArea = cleaned;
});
}
}
onLoad(() => {
getdate(`xzqhdm`).then(res => {
list.value = dedupeFirstLetter(res.result)
})
// form.orgAddress
if (uni.getStorageSync('backhuancun').address) {
let data = uni.getStorageSync('backhuancun');
// if (data.orgProvince_dictText) {
form.address = data.address
// }
form.orgProvince = data.orgProvince;
form.orgCity = data.orgCity;
form.orgDistrict = data.orgDistrict;
form.orgAddress = data.orgAddress;
form.orgLeader = data.orgLeader;
form.orgLeaderPhone = data.orgLeaderPhone;
form.orgPropertyType = data.orgPropertyType;
form.orgBuildingArea = data.orgBuildingArea;
} else if (uni.getStorageSync('baddata')) {
let data = uni.getStorageSync('baddata');
if (data.orgProvince_dictText) {
form.address = data.orgProvince_dictText + (data.orgCity_dictText != null ? data.orgCity_dictText :
``) + (data.orgDistrict_dictText != null ? data.orgDistrict_dictText : ``)
// textArray1[0] = (data.orgProvince_dictText || "") + (data.orgCity_dictText!=null?data.orgCity_dictText:``) + (data.orgDistrict_dictText!=null?data.orgDistrict_dictText:``);
}
form.orgProvince = data.orgProvince;
form.orgCity = data.orgCity;
form.orgDistrict = data.orgDistrict;
form.orgAddress = data.orgAddress;
form.orgLeader = data.orgLeader;
form.orgLeaderPhone = data.orgLeaderPhone;
form.orgPropertyType = data.orgPropertyType;
form.orgBuildingArea = data.orgBuildingArea;
}
})
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #F7F7F7;
position: relative;
// box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
.white-content {
width: 100%;
// margin-left: 5%;
margin-top: 20rpx;
// height: 1200rpx;
border-radius: 35rpx;
// background-color: rgb(245, 251, 254);
.content-title {
display: flex;
align-items: center;
height: 70rpx;
position: relative;
.content-weight {
font-size: 32rpx;
font-weight: 600;
margin-left: 20rpx;
// margin-top: 20rpx;
}
.content-img {
position: absolute;
right: 0;
top: 0;
width: 400rpx;
height: 100%;
}
}
}
.white-photo {
width: 90%;
margin-left: 5%;
// margin-top: 30rpx;
height: 300rpx;
border-radius: 35rpx;
background-color: #fff;
// box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
justify-content: space-around;
align-items: center;
display: flex;
.photo {
width: 300rpx;
height: 200rpx;
}
}
.white-message {
width: 90%;
margin-left: 5%;
margin-top: 10rpx;
margin-bottom: 30rpx;
padding: 30rpx 0;
// height: 800rpx;
border-radius: 35rpx;
background-color: #fff;
// box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
justify-content: space-around;
// align-items: center;
display: flex;
flex-direction: column;
.message-title {
width: 100%;
height: 100rpx;
align-items: center;
display: flex;
.message-weight {
font-size: 30rpx;
// font-weight: 600;
}
}
.one {
width: 90%;
margin-left: 5%;
// border-bottom: 1rpx solid #F7F7F7;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
.one-left {
margin-left: 10rpx;
font-size: 30rpx;
}
.one-right {
font-size: 30rpx;
height: 100%;
color: #999999;
overflow: hidden;
/* 隐藏超出内容 */
white-space: nowrap;
/* 不换行 */
font-size: 25rpx;
text-overflow: ellipsis;
width: 350rpx;
display: flex;
}
}
}
}
.photo-left {
.photo-weight {
font-size: 26rpx;
font-weight: 600;
}
.photo-font {
font-size: 23rpx;
margin-top: 10rpx;
}
}
.finish-button {
display: flex;
justify-content: center;
align-items: center;
width: 44%;
height: 90rpx;
margin: 0rpx auto;
margin-bottom: 80rpx;
color: #fff;
background: linear-gradient(to right, #00C9FF, #0076FF);
border-radius: 37rpx;
font-size: 35rpx;
}
.one-img {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10rpx;
width: 60rpx;
height: 50rpx;
// margin-right: 10rpx;
// margin-left: 35rpx;
}
.pingfangmi {
position: absolute;
top: 50%;
right: 5rpx;
transform: translateY(-50%);
}
.special {
display: flex;
align-items: center;
width: 280rpx;
position: relative;
}
.popup-father {
width: 100%;
// height: 100%;
position: relative;
.popup-title {
position: fixed;
top: 0;
left: 0;
// background-color: red;
display: flex;
flex-direction: column;
width: 100%;
.title-font {
font-size: 38rpx;
font-weight: 600;
}
.title-imge {
width: 20rpx;
height: 20rpx;
margin-left: 10rpx;
margin-top: 5rpx;
}
background-color: #fff;
z-index: 1;
}
.other-title {
font-size: 32rpx;
font-weight: 600;
margin-left: 30rpx;
margin-top: 50rpx;
}
}
.cards {
width: 100%;
display: flex;
// justify-content: center;
align-items: center;
height: 100rpx;
.zimu {
margin: 0 30rpx;
color: #d7d7d7;
width: 28rpx;
}
.font {
font-size: 30rpx;
}
}
.title-back {
margin-top: 100rpx;
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
.left-father {
display: flex;
align-items: center;
.back-img {
width: 45rpx;
height: 40rpx;
margin-left: 40rpx;
margin-right: 15rpx;
}
}
}
.back-button {
display: flex;
justify-content: center;
align-items: center;
width: 44%;
height: 90rpx;
margin: 0rpx auto;
margin-bottom: 80rpx;
border: 2rpx solid #c3cacd;
background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
border-radius: 37rpx;
font-size: 35rpx;
}
.shu {
width: 14rpx;
height: 36rpx;
background-color: #0097FF;
border-radius: 10rpx;
margin: 3rpx 5rpx 0 60rpx;
}
.triangle-down {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 26rpx;
width: 20rpx;
height: 20rpx;
}
.triangle-down-mi {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 26rpx;
font-size: 30rpx;
color: #999999;
}
.all-bgc {
background-image: url('https://www.focusnu.com/media/directive/index/where.png');
background-size: 100% auto;
/* 宽度占满,高度自动 */
background-position: top center;
background-repeat: no-repeat;
}
.title-imge-title {
width: 100rpx;
height: 120rpx;
position: absolute;
// top: 50%;
top: 10rpx;
right: 80rpx;
// transform: translateY(-50%);
}
.button-father {
height: 60rpx;
width: 23%;
display: flex;
align-items: center;
justify-content: center;
// justify-content: space-between;
position: relative;
background-color: #F5F5F5;
color: #666666;
border-radius: 30rpx;
margin-left: 30rpx;
}
</style>
<style>
.uni-scroll-view {
height: auto;
}
</style>