229 lines
6.9 KiB
Vue
229 lines
6.9 KiB
Vue
<template>
|
||
|
||
<!-- Banner -->
|
||
<Banner :layout="layout" />
|
||
|
||
<!-- 主体部分 -->
|
||
<div class="xl:w-screen-xl m-auto bg-white">
|
||
<el-row :gutter="50" id="container" class="clearfix">
|
||
<el-col :span="5" class="left">
|
||
<!-- 内页左侧组件 -->
|
||
<Left :category="category" />
|
||
</el-col>
|
||
<el-col :span="19" class="right">
|
||
<div class="sitemp h-[32px] flex justify-between pt-5">
|
||
<h2>{{ page.title }}</h2>
|
||
<Breadcrumb :data="page" />
|
||
</div>
|
||
<div class="form-box p-5">
|
||
<el-form
|
||
ref="formRef"
|
||
:model="form"
|
||
:rules="rules"
|
||
label-width="120"
|
||
label-position="left"
|
||
status-icon
|
||
>
|
||
<el-form-item :label="$t('order.title')" prop="title" class="hover:bg-gray-50 p-2">
|
||
<el-input v-model="form.title" :placeholder="$t('order.title')"/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('order.content')" prop="content" class="hover:bg-gray-50 p-2">
|
||
<el-input type="textarea" :rows="5" cols="80" v-model="form.content" :placeholder="$t('order.content')"/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('order.realName')" prop="realName" class="hover:bg-gray-50 p-2">
|
||
<el-input v-model="form.realName" :placeholder="$t('order.realName')"/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('order.phone')" prop="phone" class="hover:bg-gray-50 p-2">
|
||
<el-input v-model="form.phone" :maxlength="11" :placeholder="$t('order.phone')"/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('order.email')" prop="email" class="hover:bg-gray-50 p-2">
|
||
<el-input v-model="form.email" :placeholder="$t('order.email')"/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('order.address')" prop="address" class="hover:bg-gray-50 p-2">
|
||
<el-input v-model="form.address" :placeholder="$t('order.address')"/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('order.code')" prop="code" class="hover:bg-gray-50 p-2">
|
||
<el-space class="flex">
|
||
<el-input size="large" :placeholder="$t('order.imgCode')" maxlength="5" v-model="form.code" />
|
||
<el-image :alt="$t('order.imgCode')" v-if="captcha" :src="captcha" @click="changeCaptcha" />
|
||
</el-space>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<div class="submitForm ml-2">
|
||
<el-button type="primary" size="large" @click.stop="submitForm(formRef)">
|
||
{{ $t('order.submit') }}
|
||
</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-dialog v-model="dialogVisible">
|
||
<div class="flex justify-center">
|
||
<el-image w-full :src="dialogImageUrl" alt="查看证件" />
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import {useLayout, usePage} from "~/composables/configState";
|
||
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
|
||
import {getNavIdByParamsId} from "~/utils/common";
|
||
import type {FormInstance, FormRules} from 'element-plus'
|
||
import type {CmsOrder} from "~/api/cms/cmsOrder/model";
|
||
import useFormData from "~/utils/use-form-data";
|
||
import Left from "~/components/Left.vue";
|
||
import {addCmsOrder} from "~/api/cms/cmsOrder";
|
||
import {getCaptcha} from "~/api/passport/login";
|
||
import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";
|
||
|
||
// 引入状态管理
|
||
const route = useRoute();
|
||
const navId = ref();
|
||
const layout = useLayout();
|
||
const page = usePage();
|
||
const category = ref<CmsNavigation[]>([]);
|
||
const dialogVisible = ref(false)
|
||
const formRef = ref<FormInstance>()
|
||
const dialogImageUrl = ref('')
|
||
// 验证码 base64 数据
|
||
const captcha = ref('');
|
||
const text = ref<string>('');
|
||
|
||
|
||
const {form, resetFields} = useFormData<CmsOrder>({
|
||
// 订单号
|
||
orderId: undefined,
|
||
// 模型名称
|
||
model: 'order',
|
||
// 订单标题
|
||
title: undefined,
|
||
// 订单编号
|
||
orderNo: undefined,
|
||
// 订单类型，0商城 1询价 2留言
|
||
type: undefined,
|
||
// 关联项目ID，配合订单类型使用
|
||
articleId: undefined,
|
||
// 真实姓名
|
||
realName: undefined,
|
||
// 手机号码
|
||
phone: undefined,
|
||
// 电子邮箱
|
||
email: undefined,
|
||
// 收货地址
|
||
address: undefined,
|
||
// 订单内容
|
||
content: undefined,
|
||
// 订单总额
|
||
totalPrice: '0.00',
|
||
// 实际付款
|
||
payPrice: '0.00',
|
||
// 报价询价
|
||
price: '0.00',
|
||
// 购买数量
|
||
totalNum: undefined,
|
||
// 二维码地址，保存订单号，支付成功后才生成
|
||
qrcode: undefined,
|
||
// 下单渠道，0网站 1小程序 2其他
|
||
channel: undefined,
|
||
// 过期时间
|
||
expirationTime: undefined,
|
||
// 订单是否已结算(0未结算 1已结算)
|
||
isSettled: undefined,
|
||
// 用户id
|
||
userId: undefined,
|
||
// 备注
|
||
comments: undefined,
|
||
// 排序号
|
||
sortNumber: undefined,
|
||
// 是否删除, 0否, 1是
|
||
deleted: undefined,
|
||
// 租户id
|
||
tenantId: undefined,
|
||
// 创建时间
|
||
createTime: undefined,
|
||
// 图像验证码
|
||
code: '',
|
||
})
|
||
|
||
const rules = reactive<FormRules<CmsOrder>>({
|
||
title: [
|
||
{required: true, message: '请输入产品名称', trigger: 'blur'},
|
||
],
|
||
phone: [
|
||
{required: true, message: '请输入手机号码', trigger: 'blur'},
|
||
{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
|
||
],
|
||
realName: [
|
||
{required: true, message: '请输入联系人姓名', trigger: 'blur'},
|
||
],
|
||
content: [
|
||
{required: true, message: '请输入留言内容', trigger: 'blur'},
|
||
]
|
||
})
|
||
|
||
/* 获取图形验证码 */
|
||
const changeCaptcha = async () => {
|
||
getCaptcha().then(captchaData => {
|
||
captcha.value = captchaData.base64;
|
||
text.value = captchaData.text;
|
||
})
|
||
};
|
||
|
||
// 请求数据
|
||
const reload = async () => {
|
||
getCmsNavigation(navId.value).then(data => {
|
||
page.value = data
|
||
layout.value.banner = data.banner;
|
||
// 二级栏目分类
|
||
listCmsNavigation({
|
||
parentId: data.parentId == 0 ? data.navigationId : data.parentId
|
||
}).then(categoryData => {
|
||
category.value = categoryData;
|
||
})
|
||
// seo
|
||
useSeoMeta({
|
||
description: data.comments || data.title,
|
||
keywords: data.title,
|
||
titleTemplate: `${data?.title}` + ' - %s',
|
||
})
|
||
changeCaptcha();
|
||
})
|
||
}
|
||
|
||
// 提交表单
|
||
const submitForm = (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return
|
||
if(form.code !== text.value){
|
||
changeCaptcha();
|
||
ElMessage.error('验证码不正确！');
|
||
return false;
|
||
}
|
||
formEl.validate((valid) => {
|
||
if (valid) {
|
||
addCmsOrder(form).then(res => {
|
||
if (res.code == 0) {
|
||
ElMessage.success(res.message)
|
||
resetFields();
|
||
} else {
|
||
return ElMessage.error(res.message)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
watch(
|
||
() => route.params.id,
|
||
(id) => {
|
||
navId.value = getNavIdByParamsId(id);
|
||
reload();
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
</style>
|