|
|
<template>
|
|
|
<view class="container">
|
|
|
<HeaderCustom title='企业修改' :showBack="true"></HeaderCustom>
|
|
|
<div class="formBox">
|
|
|
<uv-form labelPosition="left" :model="formField" labelWidth="100" :rules="rules" ref="form">
|
|
|
<uv-form-item required label="企业名称" prop="company_name">
|
|
|
<uv-input v-model="formField.company_name" border="none"
|
|
|
placeholder="请输入企业名称">
|
|
|
</uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item required label="姓名" prop="contact_person">
|
|
|
<uv-input v-model="formField.contact_person" border="none"
|
|
|
placeholder="请输入姓名">
|
|
|
</uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item required label="手机号码" prop="contact_phone">
|
|
|
<uv-input v-model="formField.contact_phone" border="none"
|
|
|
placeholder="请输入手机号码">
|
|
|
</uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item required label="邮箱" prop="contact_email">
|
|
|
<uv-input v-model="formField.contact_email" border="none"
|
|
|
placeholder="请输入邮箱">
|
|
|
</uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item required label="地址" prop="address" @click="openAddressPicker">
|
|
|
<uv-input v-model="formField.address" readonly border="none"
|
|
|
placeholder="请选择地址">
|
|
|
</uv-input>
|
|
|
<uv-picker ref="addressPicker" :columns="addressList" keyName="name" @change="addressChange"
|
|
|
@confirm="confirm">
|
|
|
</uv-picker>
|
|
|
</uv-form-item>
|
|
|
<uv-button type="primary" text="提交" customStyle="margin-top: 10px"
|
|
|
@click="submit"></uv-button>
|
|
|
</uv-form>
|
|
|
</div>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {
|
|
|
computed,
|
|
|
onMounted,
|
|
|
ref
|
|
|
} from "vue";
|
|
|
import {
|
|
|
onShow
|
|
|
} from "@dcloudio/uni-app";
|
|
|
import {
|
|
|
useAuthStore,
|
|
|
useUserStore
|
|
|
} from "@/store";
|
|
|
import {
|
|
|
regions
|
|
|
} from '/static/json/regions.js'
|
|
|
import HeaderCustom from '/components/HeaderCustom/HeaderCustom.vue'
|
|
|
import RPC from "@/utils/request";
|
|
|
|
|
|
const authStore = useAuthStore()
|
|
|
const userStore = useUserStore()
|
|
|
|
|
|
const props = defineProps({
|
|
|
id: [String],
|
|
|
});
|
|
|
|
|
|
if (props.id && props.id !== 'null') {
|
|
|
RPC.post("/enterprise/detail", {
|
|
|
id: Number(props.id),
|
|
|
}).then((res) => {
|
|
|
formField.value = {
|
|
|
...res.enterprise || {}
|
|
|
};
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function copyText(text) {
|
|
|
uni.setClipboardData({
|
|
|
data: text,
|
|
|
success: function() {
|
|
|
uni.showToast({
|
|
|
title: '复制成功',
|
|
|
icon: 'success',
|
|
|
});
|
|
|
},
|
|
|
fail: function() {
|
|
|
uni.showToast({
|
|
|
title: '复制失败',
|
|
|
icon: 'none',
|
|
|
});
|
|
|
},
|
|
|
})
|
|
|
}
|
|
|
|
|
|
onShow(() => {
|
|
|
if (!authStore?.isLoggedIn) {
|
|
|
uni.switchTab({
|
|
|
url: `/pages/index/index`,
|
|
|
});
|
|
|
uni.showToast({
|
|
|
title: "请先登录",
|
|
|
icon: "none",
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
})
|
|
|
|
|
|
const form = ref(null)
|
|
|
const formField = ref({
|
|
|
contact_person: '',
|
|
|
phone: '',
|
|
|
email: '',
|
|
|
address: '',
|
|
|
company_name: '',
|
|
|
})
|
|
|
const pickType = type => {
|
|
|
const index = formField.value.type.findIndex(item => item === type)
|
|
|
if (index >= 0) {
|
|
|
formField.value.type.splice(index, 1)
|
|
|
} else {
|
|
|
formField.value.type.push(type)
|
|
|
}
|
|
|
}
|
|
|
const rules = {
|
|
|
'company_name': {
|
|
|
type: 'string',
|
|
|
required: true,
|
|
|
message: '请填写企业名称',
|
|
|
trigger: ['blur', 'change']
|
|
|
},
|
|
|
'name': {
|
|
|
type: 'string',
|
|
|
required: true,
|
|
|
message: '请填写姓名',
|
|
|
trigger: ['blur', 'change']
|
|
|
},
|
|
|
'contact_phone': {
|
|
|
type: 'string',
|
|
|
required: true,
|
|
|
message: '请填写手机号码',
|
|
|
trigger: ['blur', 'change']
|
|
|
},
|
|
|
'contact_email': {
|
|
|
type: 'string',
|
|
|
required: true,
|
|
|
message: '请填写邮箱',
|
|
|
trigger: ['blur', 'change']
|
|
|
},
|
|
|
'address': {
|
|
|
type: 'string',
|
|
|
required: true,
|
|
|
message: '请选择地址',
|
|
|
trigger: ['blur', 'change']
|
|
|
}
|
|
|
}
|
|
|
const submit = () => {
|
|
|
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
|
|
form.value.validate().then(res => {
|
|
|
// uni.showToast({
|
|
|
// icon: 'success',
|
|
|
// title: '校验通过'
|
|
|
// })
|
|
|
RPC.post('/enterprise/update', formField.value).then(res => {
|
|
|
uni.showToast({
|
|
|
icon: 'success',
|
|
|
title: '操作成功'
|
|
|
})
|
|
|
setTimeout(() => {
|
|
|
uni.navigateBack()
|
|
|
}, 1000)
|
|
|
})
|
|
|
}).catch(errors => {
|
|
|
// uni.showToast({
|
|
|
// icon: 'error',
|
|
|
// title: '校验失败'
|
|
|
// })
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const provinces = ref([])
|
|
|
const citys = ref([])
|
|
|
const areas = ref([])
|
|
|
|
|
|
const addressList = computed(() => [provinces.value, citys.value, areas.value])
|
|
|
|
|
|
const addressPicker = ref(null)
|
|
|
|
|
|
const pickerValue = ref(['0', '0', '0'])
|
|
|
const defaultValue = ref(['3442', '1', '2'])
|
|
|
|
|
|
|
|
|
const addressChange = e => {
|
|
|
const {
|
|
|
columnIndex,
|
|
|
index,
|
|
|
indexs
|
|
|
} = e
|
|
|
// 改变了省
|
|
|
if (columnIndex === 0) {
|
|
|
citys.value = provinces.value[index]?.children || []
|
|
|
areas.value = citys.value[0]?.children || []
|
|
|
addressPicker.value.setIndexs([index, 0, 0], true)
|
|
|
} else if (columnIndex === 1) {
|
|
|
areas.value = citys.value[index]?.children || []
|
|
|
addressPicker.value.setIndexs(indexs, true)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const confirm = e => {
|
|
|
// console.log('确认选择的地区：', e);
|
|
|
// uni.showToast({
|
|
|
// icon: 'none',
|
|
|
// title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
|
|
|
// })
|
|
|
formField.value.address = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
|
|
|
}
|
|
|
|
|
|
const handlePickValueDefault = () => {
|
|
|
pickerValue.value[0] = provinces.value.findIndex(item => Number(item.id) == defaultValue.value[0]);
|
|
|
// 设置市
|
|
|
citys.value = provinces.value[pickerValue.value[0]]?.children || [];
|
|
|
pickerValue.value[1] = citys.value.findIndex(item => Number(item.id) == defaultValue.value[1]);
|
|
|
// 设置区
|
|
|
areas.value = citys.value[pickerValue.value[1]]?.children || [];
|
|
|
pickerValue.value[2] = areas.value.findIndex(item => Number(item.id) == defaultValue.value[2]);
|
|
|
// 重置下位置
|
|
|
addressPicker.value.setIndexs([pickerValue.value[0], pickerValue.value[1], pickerValue.value[2]], true);
|
|
|
}
|
|
|
|
|
|
const openAddressPicker = () => {
|
|
|
addressPicker.value.open()
|
|
|
handlePickValueDefault()
|
|
|
}
|
|
|
|
|
|
const getData = () => {
|
|
|
provinces.value = regions.sort((left, right) => (Number(left.code) > Number(right.code) ?
|
|
|
1 : -1));
|
|
|
handlePickValueDefault()
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
getData()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
font-size: 14px;
|
|
|
min-height: 100vh;
|
|
|
background-color: #f8f8f8;
|
|
|
}
|
|
|
|
|
|
.titleBox {
|
|
|
background-color: #fff;
|
|
|
padding: 20px 4vw;
|
|
|
|
|
|
.title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
width: 5vw;
|
|
|
height: 2px;
|
|
|
background-color: #3F70FF;
|
|
|
margin-top: 4px;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.desc {
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.formBox {
|
|
|
padding: 10px;
|
|
|
|
|
|
:deep(.uv-form) {
|
|
|
background-color: #fff;
|
|
|
padding: 10px;
|
|
|
border-radius: 10px;
|
|
|
|
|
|
.uv-form-item {
|
|
|
background-color: #F4F4F4;
|
|
|
margin-bottom: 10px;
|
|
|
border-radius: 10px;
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.type_select_box {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 15px;
|
|
|
padding-right: 20px;
|
|
|
margin-top: 10px;
|
|
|
|
|
|
.item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-color: #fff;
|
|
|
font-size: 12px;
|
|
|
width: 90px;
|
|
|
height: 70px;
|
|
|
border-radius: 6px;
|
|
|
|
|
|
.img {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
&.selected {
|
|
|
border: 1px solid #3F70FF;
|
|
|
background-color: rgba(63, 112, 255, 0.1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.infoBox {
|
|
|
margin-top: 20px;
|
|
|
padding: 10px 5vw;
|
|
|
background-color: #fff;
|
|
|
border-radius: 10px;
|
|
|
font-size: 16px;
|
|
|
|
|
|
.line {
|
|
|
display: flex;
|
|
|
margin: 10px 0;
|
|
|
|
|
|
.key {
|
|
|
width: 70px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
