forked from gxwebsoft/websoft-cms
14 changed files with 447 additions and 39 deletions
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<!-- <div class="text-center flex flex-col items-center pb-10">--> |
|||
<!-- <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl lg:text-5xl">--> |
|||
<!-- {{ title }}--> |
|||
<!-- </h2>--> |
|||
<!-- <div class="sub-title">--> |
|||
<!-- <p class="text-gray-500 dark:text-gray-400 py-3">--> |
|||
<!-- {{ comments }}--> |
|||
<!-- </p>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<div class="xl:w-screen-xl sm:flex xl:p-0 p-4 m-auto relative"> |
|||
<el-row :gutter="24" class="flex"> |
|||
<template v-for="(item,index) in list" :key="index"> |
|||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-5 min-w-xs"> |
|||
<el-card shadow="hover" :body-style="{ padding: '0px' }" class="hover:bg-gray-50 cursor-pointer" @click="openSpmUrl(`/form`, item,item.formId)"> |
|||
<el-image |
|||
:src="`${item.photo}`" |
|||
fit="fill" :lazy="true" class="w-full md:h-[150px] h-[199px] cursor-pointer"/> |
|||
<div class="flex-1 px-4 py-5 sm:p-6 !p-4"> |
|||
<div class="text-gray-700 dark:text-white text-base font-semibold flex flex-col gap-1.5"> |
|||
<div class="flex-1 text-xl cursor-pointer">{{ item.name }}</div> |
|||
<!-- <div class="text-red-500">￥{{ item.price }}</div>--> |
|||
</div> |
|||
<!-- <div v-if="item.price && item.price > 0" class="flex items-center gap-1.5 py-2 text-gray-500 justify-between">--> |
|||
<!-- <div class="text-gray-500">{{ item.comments }}</div>--> |
|||
<!-- </div>--> |
|||
<div class="button-group flex justify-center mt-3"> |
|||
<el-button class="w-full" size="large" :icon="ElIconView" @click="openSpmUrl('/form', item,item.formId)"> |
|||
查看详情 |
|||
</el-button> |
|||
<el-button class="w-full" size="large" :icon="ElIconEdit" @click="openSpmUrl('/form', item,item.formId)">立即预约</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</template> |
|||
</el-row> |
|||
</div> |
|||
<div v-if="disabled" class="px-1 text-center text-gray-500 min-h-xs"> |
|||
没有更多了 |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import {openSpmUrl} from "~/utils/common"; |
|||
import dayjs from "dayjs"; |
|||
import {useServerRequest} from "~/composables/useServerRequest"; |
|||
import type {ApiResult, PageResult} from "~/api"; |
|||
import type {Product} from "~/api/oa/product/model"; |
|||
import type {Form} from "~/api/cms/form/model"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
disabled?: boolean; |
|||
title?: string; |
|||
comments?: string; |
|||
}>(), |
|||
{ |
|||
title: '卡片标题', |
|||
comments: '卡片描述' |
|||
} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
}>(); |
|||
|
|||
const runtimeConfig = useRuntimeConfig(); |
|||
const list = ref<Form[]>([]); |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
const {data: response} = await useServerRequest<ApiResult<PageResult<Product>>>('/cms/form/page', { |
|||
baseURL: runtimeConfig.public.apiServer, params: { |
|||
limit: 8 |
|||
} |
|||
}) |
|||
if (response.value?.data) { |
|||
if (response.value?.data.list) { |
|||
list.value = response.value?.data.list; |
|||
} |
|||
} |
|||
} |
|||
reload(); |
|||
</script> |
|||
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<div class="page-main md:w-screen-xl m-auto p-3" v-if="form"> |
|||
<el-row :gutter="24"> |
|||
<el-col :span="18" :xs="24"> |
|||
<el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5"> |
|||
<template #header> |
|||
<div class="card-header font-bold text-xl"> |
|||
<span>{{ data?.name }}</span> |
|||
</div> |
|||
</template> |
|||
<p v-html="data?.comments"></p> |
|||
</el-card> |
|||
<el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5"> |
|||
<template #header> |
|||
<div class="card-header font-bold text-xl"> |
|||
<span>预约报名</span> |
|||
</div> |
|||
</template> |
|||
<el-form ref="formRef" :model="form" label-position="top" class="w-full sm:py-2" size="large" status-icon> |
|||
<el-form-item label="您的姓名" prop="name"> |
|||
<el-input |
|||
v-model="form.name" |
|||
placeholder="张三" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="您的年龄(岁)" prop="age"> |
|||
<el-input-number |
|||
v-model="form.age" |
|||
placeholder="24" |
|||
:min="6" |
|||
:max="99" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="联系电话" prop="phone"> |
|||
<el-input |
|||
v-model="form.phone" |
|||
:maxlength="11" |
|||
placeholder="13800138000" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="您预约的疫苗" prop="age"> |
|||
<el-radio-group v-model="form.type"> |
|||
<el-radio value="九阶" size="large" border>九阶</el-radio> |
|||
<el-radio value="四阶" size="large" border>四阶</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="本次接种的剂次" prop="number"> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox label="第一剂" value="第一剂" /> |
|||
<el-checkbox label="第二剂" value="第二剂" /> |
|||
<el-checkbox label="第三剂" value="第三剂" /> |
|||
</el-checkbox-group> |
|||
</el-form-item> |
|||
<el-form-item label="备注信息" prop="comments"> |
|||
<el-input |
|||
v-model="form.comments" |
|||
:rows="5" |
|||
type="textarea" |
|||
placeholder="请输入备注信息，最多300字" |
|||
/> |
|||
</el-form-item> |
|||
<div class="dialog-footer w-full"> |
|||
<el-button type="primary" size="large" class="w-full" @click="submitForm(formRef)"> 提交 </el-button> |
|||
</div> |
|||
</el-form> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import {FullScreen} from '@element-plus/icons-vue' |
|||
import type {ApiResult} from "~/api"; |
|||
import type {FormInstance, FormRules} from "element-plus"; |
|||
import {useClientRequest} from "~/composables/useClientRequest"; |
|||
import {reactive, ref} from "vue"; |
|||
import useFormData from "~/utils/use-form-data"; |
|||
import type {FormRecord} from "~/api/cms/form-record/model"; |
|||
import type {Form} from "~/api/cms/form/model"; |
|||
|
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
title?: string; |
|||
data?: Form; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
const visible = ref<boolean>(false); |
|||
const visible2 = ref<boolean>(false); |
|||
const checkList = ref<string[]>([]); |
|||
const loading = ref<boolean>(true) |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done', page: number): void |
|||
}>() |
|||
|
|||
const { form, resetFields } = useFormData<FormRecord>({ |
|||
formRecordId: undefined, |
|||
formId: undefined, |
|||
name: undefined, |
|||
age: undefined, |
|||
type: undefined, |
|||
extra: undefined, |
|||
formData: undefined, |
|||
formObj: undefined, |
|||
userId: undefined, |
|||
phone: undefined, |
|||
sortNumber: undefined, |
|||
comments: undefined, |
|||
status: undefined, |
|||
createTime: undefined, |
|||
layout: undefined |
|||
}); |
|||
|
|||
|
|||
const onComments = () => { |
|||
visible.value = true; |
|||
} |
|||
|
|||
const onComplaint = () => { |
|||
visible2.value = true; |
|||
} |
|||
|
|||
const onPageChange = (page: number) => { |
|||
emit('done', page) |
|||
} |
|||
|
|||
const submitForm = async (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
form.formId = props.data?.formId; |
|||
form.extra = checkList.value.join(',') |
|||
useClientRequest<ApiResult<any>>(`/cms/form-record`, { |
|||
method: 'POST', |
|||
body: form |
|||
}).then(res => { |
|||
if (res.code == 0) { |
|||
ElMessage.success(res.message) |
|||
visible.value = false |
|||
resetFields(); |
|||
emit('done',1) |
|||
} else { |
|||
return ElMessage.error(res.message) |
|||
} |
|||
}) |
|||
} |
|||
</script> |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<div class="banner m-auto relative sm:flex"> |
|||
<svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg" |
|||
class="pointer-events-none absolute w-full top-[-2px] transition-all text-green-5 flex-shrink-0 opacity-100 duration-[400ms] opacity-80 -z-10"> |
|||
<mask id="path-1-inside-1_414_5526" fill="white"> |
|||
<path d="M0 0H1440V181H0V0Z"></path> |
|||
</mask> |
|||
<path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22"></path> |
|||
<path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)"></path> |
|||
<defs> |
|||
<linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse"> |
|||
<stop stop-color="currentColor"></stop> |
|||
<stop offset="1" stop-color="currentColor" stop-opacity="0"></stop> |
|||
</linearGradient> |
|||
<linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse"> |
|||
<stop stop-color="currentColor" stop-opacity="0"></stop> |
|||
<stop offset="0.395" stop-color="currentColor"></stop> |
|||
<stop offset="1" stop-color="currentColor" stop-opacity="0"></stop> |
|||
</linearGradient> |
|||
</defs> |
|||
</svg> |
|||
<div class="md:w-screen-xl m-auto"> |
|||
<div class="sm:py-4 sm:px-0 mx-3 py-2"> |
|||
<el-breadcrumb :separator-icon="ArrowRight"> |
|||
<el-breadcrumb-item :to="{ path: '/' }"> |
|||
<el-icon class="cursor-pointer"> |
|||
<ElIconHouse/> |
|||
</el-icon> |
|||
</el-breadcrumb-item> |
|||
<el-breadcrumb-item>项目详情</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
<div class="py-1 sm:py-16 px-3" _path="/templates" _dir="" _draft="false" _partial="false" _locale="" |
|||
_id="content:4.templates.yml" _type="yaml" _source="content" _file="4.templates.yml" _stem="4.templates" |
|||
_extension="yml"> |
|||
<div id="mse"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import {ArrowRight} from '@element-plus/icons-vue' |
|||
import Player from "xgplayer"; |
|||
import 'xgplayer/dist/index.min.css'; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
title?: string; |
|||
desc?: string; |
|||
buyUrl?: string; |
|||
form?: any; |
|||
value?: number; |
|||
}>(), |
|||
{ |
|||
title: 'Templates', |
|||
desc: 'Explore community templates to get up and running in a few seconds.', |
|||
demoUrl: '/product/website', |
|||
buyUrl: 'https://github.com/websoft9/ansible-templates', |
|||
value: 4.2 |
|||
} |
|||
); |
|||
|
|||
const url = ref<string>(''); |
|||
const poster = ref<string>(''); |
|||
|
|||
onMounted(() => { |
|||
new Player({ |
|||
id: "mse", //元素id |
|||
lang: "zh", //设置中文 |
|||
volume: 0, // 默认静音 |
|||
autoplay: false, //自动播放 |
|||
screenShot: false, // 开启截图功能 |
|||
//视频地址 |
|||
url: url.value, |
|||
//封面图 |
|||
poster: poster.value, |
|||
fluid: true, // 填满屏幕 （流式布局） |
|||
playbackRate: [0.5, 1, 2] //传入倍速可选数组 |
|||
}); |
|||
}); |
|||
|
|||
watch( |
|||
() => props.form.video, |
|||
(video) => { |
|||
console.log(video,'=>video') |
|||
url.value = 'https://oss.wsdns.cn/20240417/9339681f3bc14999bfb2d26491f1c96e.mp4'; |
|||
poster.value = props.form.photo; |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
<style scoped lang="less"> |
|||
.rounded-avatar{ |
|||
border-radius: 30px; |
|||
} |
|||
.rounded-avatar-xs{ |
|||
border-radius: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,65 @@ |
|||
<!-- 文章详情 --> |
|||
<template> |
|||
<PageBanner :form="form" /> |
|||
|
|||
<Comments :data="form" /> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import type { ApiResult } from '~/api'; |
|||
import { useServerRequest } from '~/composables/useServerRequest'; |
|||
import { useWebsite } from '~/composables/configState'; |
|||
import { getIdBySpm } from '~/utils/common'; |
|||
import useFormData from '~/utils/use-form-data'; |
|||
import PageBanner from './components/PageBanner.vue'; |
|||
import type { Form } from '~/api/cms/form/model'; |
|||
import Comments from "~/pages/form/components/Comments.vue"; |
|||
|
|||
// 引入状态管理 |
|||
const route = useRoute(); |
|||
const website = useWebsite(); |
|||
|
|||
// 配置信息 |
|||
const { form, assignFields } = useFormData<Form>({ |
|||
formId: undefined, |
|||
name: '', |
|||
photo: '', |
|||
background: '', |
|||
video: '', |
|||
layout: '', |
|||
comments: '', |
|||
status: undefined, |
|||
createTime: '' |
|||
}); |
|||
|
|||
// 请求数据 |
|||
const reload = async () => { |
|||
// 要求登录 |
|||
// if (!token.value || token.value == '') { |
|||
// openSpmUrl('/passport/login'); |
|||
// return; |
|||
// } |
|||
// 存在spm(优先级高) |
|||
const { data: item } = await useServerRequest<ApiResult<Form>>('/cms/form/' + getIdBySpm(5)); |
|||
if (item.value?.data) { |
|||
assignFields(item.value.data); |
|||
form.comments = item.value?.data?.comments; |
|||
} |
|||
|
|||
// seo |
|||
useHead({ |
|||
title: `${form.name} - ${website.value.websiteName}`, |
|||
bodyAttrs: { |
|||
class: 'page-container' |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
watch( |
|||
() => route.path, |
|||
path => { |
|||
console.log(path, '=>Path'); |
|||
reload(); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
Loading…
Reference in new issue