generated from Leo_Ding/web-template
214 lines
7.9 KiB
Vue
214 lines
7.9 KiB
Vue
<template>
|
||
<x-search-bar class="mb-8-2">
|
||
<template #default="{ gutter, colSpan }">
|
||
<a-form-item :label="'零容忍'" name="reportContent">
|
||
<a-textarea :placeholder="'请输入零容忍内容'" v-model:value="reportContent"></a-textarea>
|
||
</a-form-item>
|
||
<a-form-item :label="'零容忍图片'" name="reportImage">
|
||
<!-- <x-upload-image v-model="reportImage" @imgChange="imgChange" />-->
|
||
<gx-upload v-model="reportImage" :fileNumber="1" />
|
||
<p class="hint">750*500px，图片大小不超过150kb</p>
|
||
</a-form-item>
|
||
<a-form-item :label="'举报邮箱'" name="email">
|
||
<a-input :placeholder="'请输入举报邮箱'" v-model:value="email"></a-input>
|
||
</a-form-item>
|
||
<a-form-item :label="'经度'" name="lat">
|
||
<a-input-number :placeholder="'请输入经度'" v-model:value="lat"></a-input-number>
|
||
</a-form-item>
|
||
<a-form-item :label="'纬度'" name="lon">
|
||
<a-input-number :placeholder="'请输入经度'" v-model:value="lon"></a-input-number>
|
||
</a-form-item>
|
||
<a-form-item :label="'地址'" name="address">
|
||
<a-input :placeholder="'请输入地址'" v-model:value="address"></a-input>
|
||
</a-form-item>
|
||
<a-form-item :label="'电话'" name="phone">
|
||
<a-input :placeholder="'请输入电话'" v-model:value="phone"></a-input>
|
||
</a-form-item>
|
||
<a-form-item :label="'编码'" name="reportNum">
|
||
<a-input :placeholder="'请输入编码'" v-model:value="reportNum"></a-input>
|
||
</a-form-item>
|
||
<template v-if="Array.isArray(socialMedia)">
|
||
<a-form-item
|
||
v-for="(itemImg, index) in socialMedia"
|
||
:key="index"
|
||
:label="itemImg.name || `社交媒体${index + 1}`">
|
||
<a-input
|
||
class="inputPhone"
|
||
v-model:value="itemImg.name"
|
||
placeholder="请输入图片名称"
|
||
/>
|
||
<gx-upload
|
||
v-model="itemImg.image"
|
||
:fileNumber="1"
|
||
/>
|
||
<p class="hint">106*106px，图片大小不超过50kb</p>
|
||
<a-input
|
||
class="inputPhone"
|
||
v-model:value="itemImg.link"
|
||
placeholder="请输入跳转链接"
|
||
/>
|
||
<a-button
|
||
danger
|
||
@click="removeSocialMedia(index)"
|
||
size="small"
|
||
style="margin-bottom: 20px">删除
|
||
</a-button>
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-button
|
||
type="dashed"
|
||
block
|
||
@click="addSocialMedia">新增社交媒体
|
||
</a-button>
|
||
</a-form-item>
|
||
|
||
</template>
|
||
<x-editor :modelValue="affirm" @update:modelValue="affirm = $event" placeholder="请输入声明内容"></x-editor>
|
||
<a-button ghost type="primary" @click="handleSearch" style="margin-top: 20px">保存</a-button>
|
||
</template>
|
||
</x-search-bar>
|
||
</template>
|
||
<script setup>
|
||
import { message } from 'ant-design-vue'
|
||
import { ref } from 'vue'
|
||
import apis from '@/apis' // 假设这里包含 saveAffirm 接口
|
||
import { usePagination } from '@/hooks'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { spliceUrl } from '@/utils/util'
|
||
import { getWebData,updateWebData} from '@/apis/modules/webSite'
|
||
import XSearchBar from '@/components/SearchBar/SearchBar.vue'
|
||
import GxUpload from '@/components/GxUpload/index.vue' // 获取声明接口
|
||
import { config } from '@/config'
|
||
import { getCompanies } from '@/apis/modules/companies'
|
||
defineOptions({
|
||
name: 'contactUs',
|
||
})
|
||
const { t } = useI18n()
|
||
const { showLoading, hideLoading } = usePagination()
|
||
const affirm = ref(null)
|
||
const id = ref(null)
|
||
const reportContent = ref(null)
|
||
const reportImage = ref(null)
|
||
const email = ref(null)
|
||
const lat = ref(null)
|
||
const lon = ref(null)
|
||
const address = ref(null)
|
||
const phone = ref(null)
|
||
const reportNum = ref(null)
|
||
const socialMedia = ref([{ name: '', image: '', link: '' }])
|
||
const imgChange = (index, value) => {
|
||
socialMedia.value[index].image = value
|
||
reportImage.value = value
|
||
}
|
||
// 页面加载时获取声明内容
|
||
getPageList()
|
||
/**
|
||
* 获取声明内容
|
||
*/
|
||
async function getPageList() {
|
||
try {
|
||
showLoading()
|
||
const res = await getCompanies() // 假设返回格式为 { data: { affirm: '内容' } }
|
||
if (res?.data) {
|
||
id.value = res.data.id
|
||
affirm.value = res.data.affirm
|
||
reportContent.value = res.data.reportContent
|
||
reportImage.value = [config('http.apiBasic')+res.data.reportImage]
|
||
email.value = res.data.email
|
||
lat.value = res.data.lat
|
||
lon.value = res.data.lon
|
||
address.value = res.data.address
|
||
phone.value = res.data.phone
|
||
reportNum.value = res.data.reportNum
|
||
socialMedia.value = Array.isArray(res.data.socialMedia) ? res.data.socialMedia.map(item=>({link:item.link,name:item.name,image:[config('http.apiBasic')+item.image]})) : []
|
||
}
|
||
} catch (e) {
|
||
message.error('获取声明内容失败')
|
||
} finally {
|
||
hideLoading()
|
||
}
|
||
}
|
||
/**
|
||
* 提交声明内容
|
||
*/
|
||
async function handleSearch() {
|
||
try {
|
||
showLoading()
|
||
// 转换 socialMedia.image 为字符串
|
||
// const formattedSocialMedia = Array.isArray(socialMedia.value)
|
||
// ? socialMedia.value.map(item => ({
|
||
// ...item,
|
||
// image: Array.isArray(item.image) ? item.image[0] : item.image
|
||
// }))
|
||
// : []
|
||
const formattedSocialMedia = Array.isArray(socialMedia?.value)
|
||
? socialMedia.value.map(item => {
|
||
const imageRaw = Array.isArray(item?.image)
|
||
? item.image[0]
|
||
: item?.image;
|
||
|
||
return {
|
||
...item,
|
||
image: spliceUrl(imageRaw)
|
||
};
|
||
})
|
||
: [];
|
||
|
||
const reportImageRaw = Array.isArray(reportImage?.value)
|
||
? reportImage.value[0]
|
||
: reportImage?.value;
|
||
const reportImageFormatted = {
|
||
reportImage: spliceUrl(reportImageRaw)};
|
||
|
||
await apis.webSite.updateWebData(id.value, {
|
||
affirm: affirm.value,
|
||
reportContent: reportContent.value,
|
||
reportImage: reportImageFormatted.reportImage,
|
||
//reportImage:Array.isArray(reportImage.value) ? reportImage.value[0] : reportImage.value,
|
||
email: email.value,
|
||
lat: lat.value,
|
||
lon: lon.value,
|
||
address: address.value,
|
||
phone: phone.value,
|
||
reportNum: reportNum.value,
|
||
socialMedia: formattedSocialMedia,
|
||
})
|
||
// await apis.webSite.updateWebData(id.value, {
|
||
// affirm: affirm.value,
|
||
// reportContent: reportContent.value,
|
||
//
|
||
// reportImage: reportImage.value,
|
||
//
|
||
// email: email.value,
|
||
// lat: lat.value,
|
||
// lon: lon.value,
|
||
// address: address.value,
|
||
// phone: phone.value,
|
||
// reportNum: reportNum.value,
|
||
//
|
||
// socialMedia: socialMedia.value,
|
||
// })
|
||
message.success('保存成功')
|
||
} catch (e) {
|
||
message.error('保存失败，请重试')
|
||
} finally {
|
||
hideLoading()
|
||
}
|
||
}
|
||
|
||
function addSocialMedia() {
|
||
socialMedia.value.push({ name: '', image: '', link: '' })
|
||
}
|
||
|
||
function removeSocialMedia(index) {
|
||
socialMedia.value.splice(index, 1)
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.hint {
|
||
color: red;
|
||
margin: 10px 0;
|
||
}
|
||
</style>
|