generated from liutk/owl-admin-base
125 lines
11 KiB
JavaScript
125 lines
11 KiB
JavaScript
import { _ as __nuxt_component_0 } from './HeaderImage-92nFA80c.mjs';
|
|
import { _ as __nuxt_component_1 } from './CustomTitle-2eWUrzRV.mjs';
|
|
import { defineComponent, withAsyncContext, computed, reactive, ref, mergeProps, unref, useSSRContext } from 'vue';
|
|
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderAttr, ssrInterpolate, ssrRenderClass, ssrIncludeBooleanAttr, ssrLooseContain, ssrLooseEqual } from 'vue/server-renderer';
|
|
import { p as publicAssetsURL } from '../routes/renderer.mjs';
|
|
import { u as useRequest } from './useRequest-pSRZvR3u.mjs';
|
|
import { u as useAsyncData } from './asyncData-D5wEK86T.mjs';
|
|
import 'vue-bundle-renderer/runtime';
|
|
import '../nitro/nitro.mjs';
|
|
import 'node:http';
|
|
import 'node:https';
|
|
import 'node:events';
|
|
import 'node:buffer';
|
|
import 'node:fs';
|
|
import 'node:path';
|
|
import 'node:crypto';
|
|
import 'node:url';
|
|
import 'unhead/server';
|
|
import 'devalue';
|
|
import 'unhead/plugins';
|
|
import 'unhead/utils';
|
|
import './server.mjs';
|
|
import 'vue-router';
|
|
import 'axios';
|
|
import 'perfect-debounce';
|
|
|
|
const _imports_0 = publicAssetsURL("/images/联系我们/map.png");
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "index",
|
|
__ssrInlineRender: true,
|
|
async setup(__props) {
|
|
let __temp, __restore;
|
|
const companyInfoList = [
|
|
{
|
|
title: "公司全称",
|
|
content: "广西富琳清洁服务有限公司",
|
|
url: "/images/联系我们/公司-i.png"
|
|
},
|
|
{
|
|
title: "总部地址",
|
|
content: "广西壮族自治区防城港市港口区江山大道海港城CBD1栋20楼",
|
|
url: "/images/联系我们/总部地址-i.png"
|
|
},
|
|
{
|
|
title: "服务热线",
|
|
content: "13907804431",
|
|
url: "/images/联系我们/服务热线-i.png"
|
|
},
|
|
{
|
|
title: "E-MAIL",
|
|
content: "mail@xxxxxxxxxx.com",
|
|
url: "/images/联系我们/图层-i.png"
|
|
}
|
|
];
|
|
const request = useRequest();
|
|
const { data: contactTypesRes } = ([__temp, __restore] = withAsyncContext(async () => useAsyncData(
|
|
"contact-types",
|
|
async () => await request.get("/api/contact_types")
|
|
)), __temp = await __temp, __restore(), __temp);
|
|
const contactTypes = computed(() => {
|
|
const res = contactTypesRes.value;
|
|
return res?.code === 200 && Array.isArray(res.data) ? res.data : [];
|
|
});
|
|
const form = reactive({
|
|
name: "",
|
|
phone: "",
|
|
company: "",
|
|
type: "",
|
|
captcha: "",
|
|
content: ""
|
|
});
|
|
const captcha = reactive({ key: "", img: "" });
|
|
const captchaLoading = ref(false);
|
|
const submitting = ref(false);
|
|
const submitError = ref("");
|
|
const submitSuccess = ref("");
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_HeaderImage = __nuxt_component_0;
|
|
const _component_CustomTitle = __nuxt_component_1;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "w-full pb-[40px] xl:pb-[38px]" }, _attrs))}>`);
|
|
_push(ssrRenderComponent(_component_HeaderImage, {
|
|
title: "联系我们",
|
|
img: "/images/联系我们/联系我们.png"
|
|
}, null, _parent));
|
|
_push(`<div class="layout">`);
|
|
_push(ssrRenderComponent(_component_CustomTitle, {
|
|
class: "xl:hidden mt-[40px] xl:mt-0",
|
|
title: "联系我们"
|
|
}, null, _parent));
|
|
_push(`<div class="mt-[32px] sm:mt-[40px] md:mt-[48px] flex flex-col items-center"><div class="w-full grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-[16px] sm:gap-[20px] md:gap-[24px] lg:gap-[28px] xl:gap-[32px]"><!--[-->`);
|
|
ssrRenderList(companyInfoList, (companyInfo) => {
|
|
_push(`<div class="grid rounded-[8px]"><div class="flex justify-center translate-y-[50%] z-[1]"><img${ssrRenderAttr("src", companyInfo.url)}${ssrRenderAttr("alt", companyInfo.title)} class="w-[44px] h-[44px] sm:w-[56px] sm:h-[56px] md:w-[64px] md:h-[64px] lg:w-[72px] lg:h-[72px] xl:w-[88px] xl:h-[88px] rounded-[6px] sm:rounded-[8px] object-contain"></div><div class="bg-[#FFFFFF] rounded-[8px] shadow-[0_4px_20px_rgba(0,0,0,0.06)] text-center pt-[28px] pb-[16px] px-[12px] sm:pt-[32px] sm:pb-[20px] sm:px-[16px] md:pt-[36px] md:pb-[22px] md:px-[20px] lg:pt-[40px] lg:pb-[24px] lg:px-[24px] xl:pt-[44px] xl:pb-[28px] xl:px-[28px]"><div class="text-[14px] sm:text-[15px] md:text-[16px] lg:text-[17px] xl:text-[18px] font-bold text-[#2E75B5] mt-[12px] sm:mt-[14px] md:mt-[16px] lg:mt-[18px] xl:mt-[20px]">${ssrInterpolate(companyInfo.title)}</div><div class="text-[11px] sm:text-[12px] md:text-[13px] lg:text-[13px] xl:text-[14px] text-[#8A91AC] mt-[4px] sm:mt-[5px] md:mt-[6px] lg:mt-[6px] xl:mt-[8px] leading-relaxed break-words">${ssrInterpolate(companyInfo.content)}</div></div></div>`);
|
|
});
|
|
_push(`<!--]--></div><div class="w-full sm:mt-[34px] mt-[40px] flex flex-col lg:flex-row gap-[24px] sm:gap-[28px] lg:gap-[32px]"><div class="w-full lg:w-1/2 bg-[#FFFFFF] rounded-[8px] shadow-[0_4px_20px_rgba(0,0,0,0.06)] px-[18px] sm:px-[24px] md:px-[30px] lg:px-[34px] xl:px-[38px] py-[20px] sm:py-[24px] md:py-[28px] lg:py-[32px]"><h1 class="text-[20px] sm:text-[22px] md:text-[24px] lg:text-[26px] xl:text-[28px] text-[#031B4E] font-bold"> 在线询价 </h1><p class="mt-[10px] sm:mt-[12px] md:mt-[14px] text-[#031B4E] text-[12px] sm:text-[13px] md:text-[14px] lg:text-[15px]"> 我们会尽快回复您的需求 </p><form class="sm:mt-[18px] mt-[20px] space-y-[12px] sm:space-y-[14px]"><div class="w-full"><input type="text" placeholder="您的姓名"${ssrRenderAttr("value", unref(form).name)} class="w-full text-[12px] sm:text-[13px] md:text-[14px] text-[#333333] px-[12px] sm:px-[14px] md:px-[16px] py-[8px] sm:py-[9px] md:py-[10px] border border-gray-200 rounded-[4px] bg-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/15 focus:border-blue-500 transition-all"></div><div class="w-full"><input type="tel" placeholder="您的电话"${ssrRenderAttr("value", unref(form).phone)} class="w-full text-[12px] sm:text-[13px] md:text-[14px] text-[#333333] px-[12px] sm:px-[14px] md:px-[16px] py-[8px] sm:py-[9px] md:py-[10px] border border-gray-200 rounded-[4px] bg-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/15 focus:border-blue-500 transition-all"></div><div><input type="text" placeholder="公司名称"${ssrRenderAttr("value", unref(form).company)} class="w-full text-[12px] sm:text-[13px] md:text-[14px] text-[#333333] px-[12px] sm:px-[14px] md:px-[16px] py-[8px] sm:py-[9px] md:py-[10px] border border-gray-200 rounded-[4px] bg-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/15 focus:border-blue-500 transition-all"></div><div class="relative"><select class="${ssrRenderClass([unref(form).type ? "text-[#333333]" : "text-gray-400", "w-full text-[12px] sm:text-[13px] md:text-[14px] px-[12px] sm:px-[14px] md:px-[16px] py-[8px] sm:py-[9px] md:py-[10px] border border-gray-200 rounded-[4px] bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/15 focus:border-blue-500 transition-all"])}"><option value="" disabled${ssrIncludeBooleanAttr(Array.isArray(unref(form).type) ? ssrLooseContain(unref(form).type, "") : ssrLooseEqual(unref(form).type, "")) ? " selected" : ""}>业务需求</option><!--[-->`);
|
|
ssrRenderList(unref(contactTypes), (item) => {
|
|
_push(`<option${ssrRenderAttr("value", String(item.id))}${ssrIncludeBooleanAttr(Array.isArray(unref(form).type) ? ssrLooseContain(unref(form).type, String(item.id)) : ssrLooseEqual(unref(form).type, String(item.id))) ? " selected" : ""}>${ssrInterpolate(item.name)}</option>`);
|
|
});
|
|
_push(`<!--]--></select><div class="absolute right-[8px] top-1/2 -translate-y-1/2 pointer-events-none"><svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></div></div><div><textarea placeholder="项目概况与备注" rows="5" class="w-full text-[12px] sm:text-[13px] md:text-[14px] text-[#333333] px-[12px] sm:px-[14px] md:px-[16px] py-[8px] sm:py-[9px] md:py-[10px] border border-gray-200 rounded-[4px] bg-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/15 focus:border-blue-500 transition-all resize-none">${ssrInterpolate(unref(form).content)}</textarea></div><div class="flex items-center gap-[10px] w-full"><input type="text" placeholder="验证码"${ssrRenderAttr("value", unref(form).captcha)} class="flex-1 min-w-0 text-[12px] sm:text-[13px] md:text-[14px] text-[#333333] px-[12px] sm:px-[14px] md:px-[16px] py-[8px] sm:py-[9px] md:py-[10px] border border-gray-200 rounded-[4px] bg-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/15 focus:border-blue-500 transition-all"><button type="button" class="shrink-0 w-[98px] sm:w-[108px] md:w-[118px] h-[34px] sm:h-[36px] md:h-[38px] rounded-[4px] overflow-hidden border border-gray-200 bg-white disabled:opacity-60"${ssrIncludeBooleanAttr(unref(captchaLoading)) ? " disabled" : ""} aria-label="刷新验证码" title="点击刷新验证码">`);
|
|
if (!unref(captcha).img) {
|
|
_push(`<span class="w-full h-full flex items-center justify-center text-[12px] text-[#8A91AC]">${ssrInterpolate(unref(captchaLoading) ? "加载中" : "获取验证码")}</span>`);
|
|
} else {
|
|
_push(`<img${ssrRenderAttr("src", unref(captcha).img)} alt="验证码" class="object-cover w-full h-full" draggable="false">`);
|
|
}
|
|
_push(`</button></div><div><button type="submit"${ssrIncludeBooleanAttr(unref(submitting)) ? " disabled" : ""} class="w-full py-[10px] sm:py-[11px] md:py-[12px] text-[12px] sm:text-[13px] md:text-[14px] text-[#FFFFFF] bg-[#2E75B5] hover:bg-[#0074c2] font-medium transition-colors disabled:opacity-60 disabled:hover:bg-[#0189E8]">${ssrInterpolate(unref(submitting) ? "提交中..." : "提交")}</button></div>`);
|
|
if (unref(submitError)) {
|
|
_push(`<p class="text-[12px] sm:text-[13px] text-[#E55353]">${ssrInterpolate(unref(submitError))}</p>`);
|
|
} else if (unref(submitSuccess)) {
|
|
_push(`<p class="text-[12px] sm:text-[13px] text-[#18A058]">${ssrInterpolate(unref(submitSuccess))}</p>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</form></div><div class="overflow-hidden relative flex-none relative h-[500px] sm:flex-none md:flex-none lg:flex-1 lg:h-auto"><div class="absolute inset-0"><img class="object-cover w-full h-full"${ssrRenderAttr("src", _imports_0)} alt=""></div></div></div></div></div></div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/contact/index.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|
|
//# sourceMappingURL=index-DGcqjns9.mjs.map
|