generated from php/site_back
136 lines
3.1 KiB
Vue
136 lines
3.1 KiB
Vue
<template>
|
|
<!-- 面包屑 -->
|
|
<el-breadcrumb>
|
|
<el-breadcrumb-item>联系我们</el-breadcrumb-item>
|
|
<el-breadcrumb-item to="/ContactUs'">联系我们</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<el-form ref="formRef" :model="formData" :rules="rules">
|
|
<el-row>
|
|
|
|
<el-col :span="24" style="display: none;">
|
|
<el-form-item :label-width="labelWidth" label="地址" prop="contact_us_address">
|
|
<el-input v-model='formData.contact_us_address' type="textarea" :rows="5" placeholder='请输入地址'></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<el-form-item :label-width="labelWidth" label="座机电话" prop="contact_us_phone">
|
|
<el-input v-model='formData.contact_us_phone' type="text" placeholder='请输入座机电话'></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label-width="labelWidth" label="邮箱" prop="contact_us_mail">
|
|
<el-input v-model='formData.contact_us_mail' type="text" placeholder='请输入邮箱'></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label-width="labelWidth" label="手机号码" prop="contact_us_mobile_phone">
|
|
<el-input v-model='formData.contact_us_mobile_phone' type="text" placeholder='请输入手机号码'></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<el-row>
|
|
<el-button type="primary" class="sus_button" @click="save(formRef)">
|
|
保存
|
|
</el-button>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive } from "vue";
|
|
import { getContactUs, editContactUs } from "~/service/contact_us";
|
|
import { useLoginStore } from "~/store";
|
|
|
|
const store = useLoginStore();
|
|
const headers = {
|
|
Accept: "application/json",
|
|
...store.headers,
|
|
};
|
|
|
|
let formData = ref({
|
|
contact_us_address: "",
|
|
contact_us_phone: "",
|
|
contact_us_mail: "",
|
|
contact_us_mobile_phone: "",
|
|
});
|
|
|
|
|
|
|
|
const uoloadData = ref({
|
|
dirName: "ContactUs"
|
|
})
|
|
|
|
//验证规则
|
|
const rules = reactive({
|
|
contact_us_address: [
|
|
{
|
|
required: true,
|
|
message: '地址不能为空'
|
|
}
|
|
],
|
|
contact_us_phone: [
|
|
{
|
|
required: true,
|
|
message: '座机电话不能为空'
|
|
}
|
|
],
|
|
contact_us_mail: [
|
|
{
|
|
required: true,
|
|
message: '邮箱不能为空'
|
|
}
|
|
],
|
|
contact_us_mobile_phone: [
|
|
{
|
|
required: true,
|
|
message: '手机号码不能为空'
|
|
}
|
|
],
|
|
|
|
});
|
|
|
|
const labelWidth = 200;
|
|
const formRef = ref();
|
|
|
|
//获取
|
|
const getContent = async () => {
|
|
const { code, data } = await getContactUs();
|
|
if (code == 0) {
|
|
formData.value = data;
|
|
}
|
|
};
|
|
|
|
getContent()
|
|
|
|
//保存
|
|
const save = async (formEl) => {
|
|
if (!formEl) return;
|
|
formEl.validate(async (valid) => {
|
|
if (!valid) {
|
|
return;
|
|
}
|
|
|
|
const { code } = await editContactUs(formData.value);
|
|
});
|
|
};
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.sus_button {
|
|
width: 300px;
|
|
height: 50px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.upLoadEl {
|
|
:deep(.el-upload-list__item) {
|
|
height: 200px;
|
|
width: 300px;
|
|
}
|
|
|
|
:deep(.el-upload-list__item-thumbnail) {
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
</style> |