Hai_Lin_admin/src/views/websiteRelated/contactUs/index.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" />
            </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="请输入图片名称"
                    />
                    <x-upload-image
                        v-model="itemImg.image"
                        @imgChange="(value) => imgChange(index, value)"
                    />
                    <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 { getWebData,updateWebData} from '@/apis/modules/webSite'
import XSearchBar from '@/components/SearchBar/SearchBar.vue' // 获取声明接口
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
}
// 页面加载时获取声明内容
getPageList()
/**
 * 获取声明内容
 */
async function getPageList() {
    try {
        showLoading()
        const res = await getWebData() // 假设返回格式为 { data: { affirm: '内容' } }
        if (res?.data) {
            id.value = res.data.id
            affirm.value = res.data.affirm
            reportContent.value = res.data.reportContent
            reportImage.value = 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 : []
            //console.log(affirm.value)
            console.log("web-Id:",id.value)
            console.log('webData',res.data)
        }
    } catch (e) {
        message.error('获取声明内容失败')
    } finally {
        hideLoading()
    }
}
/**
 * 提交声明内容
 */
async function handleSearch() {
    try {
        showLoading()
        console.log("id.value:", id.value)

        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>
</style>