首页搜索
This commit is contained in:
@ -96,7 +96,7 @@ function handleCurrentChange(val) {
|
||||
|
||||
<style scoped>
|
||||
.pagination-container {
|
||||
background: #fff;
|
||||
/* background: #fff; */
|
||||
padding: 32px 16px;
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
|
||||
109
src/components/webContact/index.vue
Normal file
109
src/components/webContact/index.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<div style="margin-bottom: 15px">
|
||||
<span
|
||||
class="x_bg_blue"
|
||||
style="
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin: 0 5px;
|
||||
vertical-align: middle;
|
||||
"
|
||||
></span>
|
||||
联系我
|
||||
</div>
|
||||
<el-form-item label="" prop="content">
|
||||
<el-input
|
||||
v-model="form.content"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 6 }"
|
||||
placeholder="请输入需求"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="company">
|
||||
<el-input v-model="form.company" placeholder="请输入所在单位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="mobile">
|
||||
<el-input
|
||||
v-model="form.mobile"
|
||||
maxlength="11"
|
||||
placeholder="请输入联系电话"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="x_btns" @click="submitForm">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script setup>
|
||||
import { launch } from "@/api/config";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const data = reactive({
|
||||
form: {},
|
||||
rules: {
|
||||
content: [{ required: true, message: "需求内容不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
company: [{ required: true, message: "单位不能为空", trigger: "blur" }],
|
||||
mobile: [
|
||||
{ required: true, message: "联系电话不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
const { form, rules } = toRefs(data);
|
||||
/** 表单重置 */
|
||||
function reset() {
|
||||
form.value = {
|
||||
content: undefined,
|
||||
name: undefined,
|
||||
company: undefined,
|
||||
mobile: undefined,
|
||||
email: undefined,
|
||||
};
|
||||
proxy.resetForm("formRef");
|
||||
}
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["formRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
launch(form.value).then((res) => {
|
||||
proxy.$modal.msgSuccess(res.message);
|
||||
reset();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-form {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
::deep(.el-form-item--medium .el-form-item__label) {
|
||||
line-height: 22px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.x_btns {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -2,12 +2,12 @@
|
||||
<div class="webFooter">
|
||||
<div class="wrap">
|
||||
<el-row>
|
||||
<!-- <el-col :span="4" v-for="(item, index) in state.list" :key="index">
|
||||
<el-col :span="4" v-for="(item, index) in state.list" :key="index">
|
||||
<div class="tit">{{ item.title }}</div>
|
||||
<p v-for="(item2, index2) in item.children" :key="index2">
|
||||
<a :href="item2.link" target="_black">{{ item2.title }}</a>
|
||||
</p>
|
||||
</el-col> -->
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="tit">联系我们</div>
|
||||
<p>
|
||||
@ -20,6 +20,14 @@
|
||||
<a href="">地址：{{ state.address }}</a>
|
||||
</p>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4" style="text-align: center;">
|
||||
<div class="tit">二维码</div>
|
||||
<p><img class="qrcode" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F53%2F71573cc4a35de96.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849770&t=80c12feeca42dad377bbdde1d6e78f33" alt=""></p>
|
||||
</el-col>
|
||||
<el-col :span="4" style="text-align: center;">
|
||||
<div class="tit">二维码</div>
|
||||
<p><img class="qrcode" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F53%2F71573cc4a35de96.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849770&t=80c12feeca42dad377bbdde1d6e78f33" alt=""></p>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<div class="icp-beian">
|
||||
<el-link type="primary" href="https://beian.miit.gov.cn/"
|
||||
@ -30,56 +38,130 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import request from "@/utils/request";
|
||||
// import { onMounted, reactive, watch } from "vue";
|
||||
<script setup>
|
||||
import request from "@/utils/request";
|
||||
import { onMounted, reactive, watch } from "vue";
|
||||
|
||||
import { reactive } from "vue";
|
||||
|
||||
// function navigation() {
|
||||
// return request({
|
||||
// url: "/v1/sys/navigation",
|
||||
// });
|
||||
// }
|
||||
// function config(params) {
|
||||
// return request({
|
||||
// url: "/v1/config",
|
||||
// params,
|
||||
// });
|
||||
// }
|
||||
function navigation() {
|
||||
return request({
|
||||
url: "/v1/sys/navigation",
|
||||
});
|
||||
}
|
||||
function config(params) {
|
||||
return request({
|
||||
url: "/v1/config",
|
||||
params,
|
||||
});
|
||||
}
|
||||
const state = reactive({
|
||||
list: [],
|
||||
mobile: "",
|
||||
email: "",
|
||||
address: "",
|
||||
});
|
||||
// function getNavigation() {
|
||||
// navigation().then((res) => {
|
||||
// if (200 == res.code) {
|
||||
// state.list = res.data;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// async function getConfig() {
|
||||
// const mobileData = await config({ key: "mobile" });
|
||||
// state.mobile = mobileData.data.mobile.value;
|
||||
// const emailData = await config({ key: "email" });
|
||||
// state.email = emailData.data.email.value;
|
||||
// const addressData = await config({ key: "address" });
|
||||
// state.address = addressData.data.address.value;
|
||||
function getNavigation() {
|
||||
// navigation().then((res) => {
|
||||
// if (200 == res.code) {
|
||||
// state.list = res.data;
|
||||
// }
|
||||
// });
|
||||
const res = {
|
||||
code: 200,
|
||||
message: "ok",
|
||||
data: [
|
||||
{
|
||||
title: "解决方案",
|
||||
link: "/",
|
||||
is_target: false,
|
||||
children: [
|
||||
{
|
||||
title: "大型企业方服务",
|
||||
link: "/",
|
||||
is_target: false,
|
||||
children: [],
|
||||
},
|
||||
{ title: "科研院所服务", link: "/", is_target: false, children: [] },
|
||||
{ title: "政府区域服务", link: "/", is_target: false, children: [] },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "创新服务",
|
||||
link: "/",
|
||||
is_target: false,
|
||||
children: [
|
||||
{
|
||||
title: "中科院设备共享平台",
|
||||
link: "http://samp.cas.cn",
|
||||
is_target: false,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: "中科院文献情报中心",
|
||||
link: "https://www.las.ac.cn",
|
||||
is_target: false,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: "中科院重庆院",
|
||||
link: "http://www.cigit.cas.cn/loading",
|
||||
is_target: false,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: "中国科学院",
|
||||
link: "https://www.cas.cn",
|
||||
is_target: false,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: "中科院重庆院合肥分院",
|
||||
link: "http://www.caszl.cn",
|
||||
is_target: false,
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
state.list = res.data;
|
||||
}
|
||||
async function getConfig() {
|
||||
// const mobileData = await config({ key: "mobile" });
|
||||
const mobileData = {
|
||||
code: 200,
|
||||
message: "ok",
|
||||
data: { mobile: { name: "联系电话", value: "18156053255" } },
|
||||
};
|
||||
state.mobile = mobileData.data.mobile.value;
|
||||
// const emailData = await config({ key: "email" });
|
||||
const emailData = {
|
||||
code: 200,
|
||||
message: "ok",
|
||||
data: { email: { name: "网站邮箱", value: "zky@gmail.com" } },
|
||||
};
|
||||
state.email = emailData.data.email.value;
|
||||
// const addressData = await config({ key: "address" });
|
||||
const addressData = {
|
||||
code: 200,
|
||||
message: "ok",
|
||||
data: {
|
||||
address: { name: "地址", value: "安徽省合肥市高新区创新产业园D1南楼" },
|
||||
},
|
||||
};
|
||||
state.address = addressData.data.address.value;
|
||||
|
||||
// // 无法同时传多个key
|
||||
// 无法同时传多个key
|
||||
|
||||
// // config({ key: "mobile,email,address" }).then((res) => {
|
||||
// // console.log(res);
|
||||
// config({ key: "mobile,email,address" }).then((res) => {
|
||||
// console.log(res);
|
||||
|
||||
// // state.mobile = res.data.mobile.value;
|
||||
// // state.email = res.data.email.value;
|
||||
// // state.address = res.data.address.value;
|
||||
// // });
|
||||
// }
|
||||
// getNavigation();
|
||||
// getConfig();
|
||||
// state.mobile = res.data.mobile.value;
|
||||
// state.email = res.data.email.value;
|
||||
// state.address = res.data.address.value;
|
||||
// });
|
||||
}
|
||||
getNavigation();
|
||||
getConfig();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user