ehsan vaseghi 7 个月前
父节点
当前提交
45cb5f470c
共有 2 个文件被更改,包括 50 次插入195 次删除
  1. +24
    -54
      src/pages/web/[name]/[id].vue
  2. +26
    -141
      src/pages/web/[name]/index.vue

+ 24
- 54
src/pages/web/[name]/[id].vue 查看文件

@@ -12,8 +12,6 @@ const site_id = ref<any>();
const site_logo = ref<any>();
const site_name = ref<any>();
const pages = ref<any>([]);
const pallete_id = ref<any>();
const pallete = ref<any>([]);
const loading = ref<boolean>(true);
onBeforeMount(() => {
console.log(id);
@@ -23,70 +21,42 @@ const loading = ref<boolean>(true);
async function initialize() {
getSite();
layout.value = "left";
(await get)<any>(`/create_site/pages/${id}`).then((res:any) => {
(await get)<any>(`/sitepages/${id}`).then((res:any) => {
console.log(res.data);
if (res.data) {
page_title.value = res.data.page_name;
page_content.value = res.data.content;
site_id.value = res.data.site;
images.value = res.data.image
layout.value=res.data.layout;
getPages();
console.log(page_content.value);
getLayout();
loading.value = false;
}
});
}
const getSite = async () =>{
(await get)<any>(`/create_site/sites/show/${route.params.name}`).then((res) => {
(await get)<any>(`/site/name/${route.params.name}`).then((res) => {
console.log(res.data);
site_id.value = res.data.id;
layout.value = res.data.layout;
site_logo.value = res.data.logo_path;
site_name.value = res.data.site_name;
});
}
async function getPages() {
try {
(await get)<any>("/create_site/pages/", { site: id }).then((res:any) => {
(await get)<any>("/pages/site", { site: site_id.value }).then((res:any) => {
console.log("pages:");
console.log(res.data);
res.data.forEach((element: any) => {
if (element.site == site_id.value) {
pages.value.push(element);
}
});
pages.value = pages.value.reverse();

pages.value=res.data;
pages.value = pages.value.reverse();
});
} catch (error) {
// Handle errors here
console.error(error);
}
}
async function getLayout() {
(await get)<any>(`/create_site/sites/${site_id.value}`).then((res:any) => {
console.log(res.data);
if (res.data) {
layout.value = res.data.layout;
site_logo.value = res.data.logo_path;
site_name.value = res.data.site_name;
pallete_id.value = res.data.color_swatch;
get<any>(`/create_site/company/${res.data.company}`).then((res:any) => {
console.log(res.data);
if (res.data) {
site_logo.value = res.data.logo_path;
get<any>(`/color_swatches/`).then((res) => {
res.data.forEach((element: any) => {
if (element.id == pallete_id.value) {
loading.value = false;
pallete.value = element;
console.log(pallete.value);
}
});
});
}
});

console.log(page_content.value);
}
});
}

const unescapedPageContent = computed(() => {
const parser = new DOMParser();
@@ -127,7 +97,7 @@ const unescapedPageContent = computed(() => {
<li class="nav-item d-none d-lg-block">
<a href="./" class="text-nowrap nav-link">
<img
:src="`https://api.drawise.net${site_logo}`"
:src="`${site_logo}`"
class="light-logo"
width="50"
alt=""
@@ -142,7 +112,7 @@ const unescapedPageContent = computed(() => {
>
<RouterLink
:to="`./${page.id}`"
><h3 :style="`color:${pallete['color4']}`">
><h3>
{{ page.page_name }}
</h3></RouterLink
>
@@ -153,7 +123,7 @@ const unescapedPageContent = computed(() => {

<div class="container">
<div v-if="images[0] != null" class="page-image">
<img :src="`https://api.drawise.net${images[0].image}`" alt="" />
<img :src="`${images[0]}`" alt="" />
<h1>{{ page_title }}</h1>
</div>
<div class="row">
@@ -162,7 +132,7 @@ const unescapedPageContent = computed(() => {
</div>
<div class="col-4 mt-5">
<div class="page-content-images">
<img v-for="image in images" :src="`https://api.drawise.net${image.image}`" alt="" />
<img :src="`${images[0]}`" alt="" />

</div>
</div>
@@ -176,12 +146,12 @@ const unescapedPageContent = computed(() => {

<template v-if="layout == 'left'">
<div class="layout-2">
<div class="sidebar" :style="`background:${pallete['color1']}`">
<div class="sidebar" >
<div class="top">
<div class="logo">
<a href="./" class="text-nowrap nav-link">
<img
:src="`https://api.drawise.net${site_logo}`"
:src="`${site_logo}`"
class="light-logo"
width="50"
alt=""
@@ -192,7 +162,7 @@ const unescapedPageContent = computed(() => {
<div v-for="page in pages" class="li">
<RouterLink
:to="`./${page.id}`"
><h3 :style="`color:${pallete['color4']}`">
><h3>
{{ page.page_name }}
</h3></RouterLink
>
@@ -213,7 +183,7 @@ const unescapedPageContent = computed(() => {
<div class="content mt-4">
<div class="container">
<div v-if="images[0] != null" class="page-image">
<img :src="`https://api.drawise.net${images[0].image}`" alt="" />
<img :src="`${images[0]}`" alt="" />
<h1>{{ page_title }}</h1>
</div>
<div class="row">
@@ -222,7 +192,7 @@ const unescapedPageContent = computed(() => {
</div>
<div class="col-4 mt-5">
<div class="page-content-images mb-5">
<img v-for="image in images" :src="`https://api.drawise.net${image.image}`" alt="" />
<img :src="`${images[0]}`" alt="" />

</div>
</div>
@@ -237,12 +207,12 @@ const unescapedPageContent = computed(() => {
<div class="wrapper">
<input id="collapser" type="checkbox" />
<label id="clickable" for="collapser">
<div class="left" :style="`background:${pallete['color3']}`">
<div class="left">
<RouterLink
v-for="page in pages"
class="text-black"
:to="`./${page.id}`"
><h3 :style="`color:${pallete['color6']}`">
><h3>
{{ page.page_name }}
</h3></RouterLink
>
@@ -253,7 +223,7 @@ const unescapedPageContent = computed(() => {
</div>
<div class="container mt-5">
<div v-if="images[0] != null" class="page-image">
<img :src="`https://api.drawise.net${images[0].image}`" alt="" />
<img :src="`${images[0]}`" alt="" />
<h1>{{ page_title }}</h1>
</div>
<div class="row">
@@ -262,7 +232,7 @@ const unescapedPageContent = computed(() => {
</div>
<div class="col-4 mt-5">
<div class="page-content-images">
<img v-for="image in images" :src="`https://api.drawise.net${image.image}`" alt="" />
<img :src="`${images[0]}`" alt="" />
</div>
</div>
<div class="col-12 p-4 layout1-footer">


+ 26
- 141
src/pages/web/[name]/index.vue 查看文件

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onBeforeMount, computed } from "vue";
import { ref, onBeforeMount } from "vue";
import { get } from "../../../utils/apifree";
import { useRoute } from "vue-router";
import "../../vendor/css/bundle.min.css";
@@ -33,9 +33,7 @@ const site_id = ref<any>();
const site_logo = ref<any>();
const site_name = ref<any>();
const pages = ref<any>([]);
const pallete_id = ref<any>();
const home_id = ref<any>();
const pallete = ref<any>([]);
const loading = ref<boolean>(true);
onBeforeMount(() => {
console.log(id);
@@ -46,13 +44,15 @@ async function initialize() {
layout.value = "left";

try {
(await get)<any>(`/create_site/sites/show/${name}`).then((res) => {
(await get)<any>(`/site/name/${name}`).then((res) => {
console.log(res.data);
id.value = res.data.id;
layout.value = res.data.layout;
site_logo.value = res.data.logo_path;
site_name.value = res.data.site_name;
home_id.value = res.data.home_id;
console.log(id.value);
getPages();

getLayout();
console.log(res.data);
});
} catch (error) {
@@ -63,66 +63,32 @@ async function initialize() {

async function getHomePage() {
console.log("Home page", home_id.value);
get<any>(`/create_site/pages/${home_id.value}`).then((res) => {
get<any>(`/sitePages/${home_id.value}`).then((res) => {
console.log(res.data);
page_title.value = res.data.page_name;
page_content.value = res.data.content;
site_id.value = res.data.site;
images.value = res.data.image;
loading.value=false;

});
}

async function getPages() {
console.log(id.value);
(await get)<any>("/create_site/pages/", { site: id.value }).then((res) => {
(await get)<any>("/pages/site/", { site: id.value }).then((res) => {
console.log("Pages: ");
console.log(res.data);
res.data.forEach((element: any) => {
if (element.site == id.value) {
pages.value.push(element);
if (element.page_name == "Home") {
home_id.value = element.id;
}
}
});
pages.value=res.data;
pages.value = pages.value.reverse();
console.log(pages.value);

getHomePage();
});
}
async function getLayout() {
(await get)<any>(`/create_site/sites/${parseInt(id.value)}`).then((res) => {
console.log(res.data);
if (res.data) {
layout.value = res.data.layout;
site_logo.value = res.data.logo_path;
site_name.value = res.data.site_name;
pallete_id.value = res.data.color_swatch;
get<any>(`/create_site/company/${res.data.company}`).then((res) => {
console.log(res.data);
if (res.data) {
site_logo.value = res.data.logo_path;
get<any>(`/color_swatches/`).then((res) => {
res.data.forEach((element: any) => {
if (element.id == pallete_id.value) {
loading.value = false;
pallete.value = element;
console.log(pallete.value);
loading.value = false;
}
});
});
}
});
}
});
}

const unescapedPageContent = computed(() => {
const parser = new DOMParser();
const doc = parser.parseFromString(page_content.value, "text/html");
return doc.body.innerHTML;
});


</script>
<template :key="route.params.id">
<template v-if="loading">
@@ -139,7 +105,7 @@ const unescapedPageContent = computed(() => {
<nav class="navbar navbar-expand-lg fixed-top navbar-fixed-top">
<a class="navbar-brand scroll" href="index-celebrity.html#home">
<img
:src="`https://api.drawise.net${site_logo}`"
:src="`${site_logo}`"
width="80"
alt="logo"
/>
@@ -166,7 +132,7 @@ const unescapedPageContent = computed(() => {
<div class="inner-wrapper">
<div class="sidemenu-image">
<a class="scroll" href="index-celebrity.html#home">
<img :src="`https://api.drawise.net${site_logo}`" alt="image"
<img :src="`${site_logo}`" alt="image"
/></a>
</div>
<span class="btn-close" id="btn_sideNavClose"><i></i><i></i></span>
@@ -249,7 +215,7 @@ const unescapedPageContent = computed(() => {
<section
class="banner-section"
id="home"
:style="`background-image:url(https://api.drawise.net${images[0].image}) ;`"
:style="`background-image:url(${images[0]}) ;`"
>
<div class="container">
<div class="rectangle wow slideInDown" data-wow-delay="1500ms">
@@ -298,37 +264,7 @@ const unescapedPageContent = computed(() => {
</section>
<!-- End Banner -->

<!-- Start About -->
<section class="about-section" id="about">
<div class="container">
<div class="row no-gutters">
<div
class="col-lg-12 col-md-12 col-sm-12 wow fadeInDown"
data-wow-delay="300ms"
>
<h2 class="heading font">{{ page_title }}</h2>
</div>
</div>

<div class="row no-gutters">
<div
class="col-lg-6 col-md-12 col-sm-12 text-section wow fadeInLeft"
data-wow-delay="300ms"
>
<div v-html="unescapedPageContent"></div>
</div>

<div class="col-lg-6 col-md-12 col-sm-12 img-section">
<img
:src="`https://api.drawise.net${images[1].image}`"
alt="img"
/>
</div>
</div>
</div>
<div class="rectangle"></div>
</section>
<!-- End About -->

<!-- Footer starts -->
<footer class="p-half bg-white">
@@ -387,7 +323,7 @@ const unescapedPageContent = computed(() => {
<div class="container radius nav-box-shadow">
<a class="logo link" href="javascript:void(0)">
<img
:src="`https://api.drawise.net${site_logo}`"
:src="`${site_logo}`"
width="50"
alt="logo"
title="Logo"
@@ -416,7 +352,7 @@ const unescapedPageContent = computed(() => {
<div
id="particles-js"
class="particle2 parallax-setting bg-img-1 bg-img-setting not-full"
:style="`background-image:linear-gradient(60deg, rgba(220, 207, 53, 0.76) 0%, rgba(220, 53, 69, 0.67) 70%), url(https://api.drawise.net${images[0].image}) ;`"
:style="`background-image:linear-gradient(60deg, rgba(220, 207, 53, 0.76) 0%, rgba(220, 53, 69, 0.67) 70%), url(${images[0]}) ;`"
>
<div class="bg-overlay bg-gradient"></div>
<div class="not-fullscreen">
@@ -424,7 +360,7 @@ const unescapedPageContent = computed(() => {
<div class="personal-box">
<div class="myphoto">
<img
:src="`https://api.drawise.net${images[1].image}`"
:src="`${images[1]}`"
alt="image"
/>
</div>
@@ -438,36 +374,6 @@ const unescapedPageContent = computed(() => {
</section>
<!-- Main Section end -->

<!-- About start -->
<section class="half-section p-0">
<h2 class="d-none">heading</h2>
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12 p-0 order-lg-2">
<div class="hover-effect">
<img
alt="about"
:src="`https://api.drawise.net${images[2].image}`"
class="about-img w-100"
/>
</div>
</div>

<div class="col-lg-6 col-md-12 pt-5">
<div class="skill-box">
<div
class="main-title mb-5 text-md-left wow fadeIn"
data-wow-delay="300ms"
>
<h2>{{ page_title }}</h2>
<div v-html="unescapedPageContent"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About ends -->

<!-- Footer starts -->
<footer class="p-half bg-white">
@@ -528,13 +434,13 @@ const unescapedPageContent = computed(() => {
<a href="index-cycling.html#home" title="Logo" class="logo scroll">
<!--Logo Default-->
<img
:src="`https://api.drawise.net${site_logo}`"
:src="`${site_logo}`"
alt="logo"
width="60"
class="m-0 logo-img"
/>
<img
:src="`https://api.drawise.net${site_logo}`"
:src="`${site_logo}`"
alt="logo"
class="m-0 logo-dark"
/>
@@ -567,12 +473,7 @@ const unescapedPageContent = computed(() => {
<a class="nav-link scroll" href="index-cycling.html#home"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="index-cycling.html#about"
>About Us</a
>
</li>
</li>
<li class="nav-item">
<a
class="nav-link scroll"
@@ -628,7 +529,7 @@ const unescapedPageContent = computed(() => {
<!-- Header end -->

<!-- banner start -->
<section class="banner-see bg-banner" id="banner" :style="`background-image:url(https://api.drawise.net${images[1].image});`">
<section class="banner-see bg-banner" id="banner" :style="`background-image:url(${images[1]});`">
<div class="container">
<div class="row height">
<div class="col-lg-6 d-flex align-items-center">
@@ -640,23 +541,7 @@ const unescapedPageContent = computed(() => {
</div>
</section>
<!-- banner end -->

<!-- about-feature start -->
<section class="about-feature bg-orange">
<div class="container">
<div class="row">
<div class=" col-sm-12 col-md-12 col-lg-6 img-sec wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s">
<div class="about_img margin_aboutimg">
<img :src="`https://api.drawise.net${images[0].image}`" alt="about">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div v-html="unescapedPageContent"></div>
</div>
</div>
</div>
</section>
<!-- about-feature ends -->
<!--Footer Start-->
<footer class="footer-sec bg-blue text-center">
<div class="container">


正在加载...
取消
保存