1

pages/order/[id].vue

@@ -0,0 +1,374 @@
+<template>
+
+  <!-- Banner -->
+  <Banner :layout="layout"/>
+  <!-- 主体部分 -->
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
+    <el-page-header :icon="ArrowLeft" @back="goBack">
+      <template #content>
+        <span class="text-large font-600"> {{ page.title }} </span>
+      </template>
+      <template #extra>
+      </template>
+      <el-card shadow="hover" class="my-5 sm:my-10 sm:px-2">
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
+          <div class="col-span-2">
+            <div class="my-2">
+              <el-alert title="填写您的需求，为您量身定制." type="warning"/>
+            </div>
+            <el-form
+              ref="formRef"
+              :model="form"
+              :rules="rules"
+              label-width="80"
+              label-position="left"
+              status-icon
+            >
+              <el-form-item :label="$t('order.title')" prop="title" class="hover:bg-gray-50 p-2">
+                <el-select
+                  v-model="form.title"
+                  filterable
+                  placeholder="选择产品"
+                  @change="onWebsite"
+                >
+                  <el-option
+                    v-for="item in siteList"
+                    :key="item.websiteId"
+                    :label="item.websiteName"
+                    :value="item.websiteId"
+                  >
+                    <div class="flex justify-between">
+                      <span>{{ item.websiteName }}</span>
+                      <span class="text-gray-300">
+                      {{ `${item.websiteCode}.websoft.top` }}
+                    </span>
+                    </div>
+                  </el-option>
+                </el-select>
+              </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="请填写您的项目需求"/>
+              </el-form-item>
+              <el-form-item :label="$t('order.reference')" class="hover:bg-gray-50 p-2" prop="reference">
+                <el-input v-model="form.reference" :placeholder="$t('order.reference')"/>
+              </el-form-item>
+              <el-form-item :label="$t('order.files')" class="hover:bg-gray-50 p-2" prop="reference">
+                <el-upload
+                  v-model:file-list="files"
+                  :headers="{
+                  Authorization: token,
+                  TenantId: 5,
+              }"
+                  :limit="2"
+                  :on-preview="handlePictureCardPreview"
+                  :on-remove="filesRemove"
+                  :on-success="filesOnSuccess"
+                  action="https://server.gxwebsoft.com/api/oss/upload"
+                  list-type="picture-card"
+                >
+                  <el-icon>
+                    <Plus/>
+                  </el-icon>
+                </el-upload>
+              </el-form-item>
+              <template v-if="token">
+
+              </template>
+              <template v-if="!token">
+                <el-form-item :label="$t('order.realName')" class="hover:bg-gray-50 p-2" prop="realName">
+                  <el-input v-model="form.realName" :placeholder="$t('order.realName')"/>
+                </el-form-item>
+                <el-form-item :label="$t('order.phone')" class="hover:bg-gray-50 p-2" prop="phone">
+                  <el-input v-model="form.phone" :maxlength="11" :placeholder="$t('order.phone')"/>
+                </el-form-item>
+                <el-form-item :label="$t('order.email')" class="hover:bg-gray-50 p-2" prop="email">
+                  <el-input v-model="form.email" :placeholder="$t('order.email')"/>
+                </el-form-item>
+              </template>
+              <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
+                    :loading="loading"
+                    size="large"
+                    type="primary"
+                    @click="submitForm(formRef)"
+                  >
+                    {{ $t('order.submit') }}
+                  </el-button>
+                </div>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="hidden-sm-and-down">
+            <el-image class="py-2" v-if="page.icon" :src="page.icon"/>
+          </div>
+        </div>
+      </el-card>
+    </el-page-header>
+  </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 {ArrowLeft, View, Search, Plus} from '@element-plus/icons-vue'
+import type {FormInstance, FormRules, UploadProps, UploadUserFile} from 'element-plus'
+import {useLayout, usePage, useUser} from "~/composables/configState";
+import {getNavIdByParamsId} from "~/utils/common";
+import type {CmsOrder} from "~/api/cms/cmsOrder/model";
+import useFormData from "~/utils/use-form-data";
+import {addCmsOrder} from "~/api/cms/cmsOrder";
+import {getCaptcha} from "~/api/passport/login";
+import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";
+import {listCmsWebsite, pageCmsWebsiteAll} from "~/api/cms/cmsWebsite";
+import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
+import {useHead} from "nuxt/app";
+
+// 在最顶部添加
+definePageMeta({
+  title: '订单页面'
+})
+
+// 引入状态管理
+const route = useRoute();
+const router = useRouter();
+const token = useToken();
+const navId = ref();
+const layout = useLayout();
+const user = useUser();
+const page = usePage();
+const siteList = ref<CmsWebsite[]>([]);
+const dialogVisible = ref(false)
+const formRef = ref<FormInstance>()
+const dialogImageUrl = ref('')
+const files = ref<UploadUserFile[]>([])
+const filesStr = ref<string[]>([])
+// 验证码 base64 数据
+const captcha = ref('');
+const text = ref<string>('');
+const loading = ref(false)
+
+
+const {form, resetFields} = useFormData<CmsOrder>({
+  // 订单号
+  orderId: undefined,
+  // 模型名称
+  model: 'order',
+  // 订单标题
+  title: undefined,
+  // 订单编号
+  orderNo: undefined,
+  // 订单类型，0商城 1询价 2留言
+  type: undefined,
+  // 关联项目ID，配合订单类型使用
+  articleId: undefined,
+  // 关联网站ID
+  websiteId: undefined,
+  // 真实姓名
+  realName: undefined,
+  // 手机号码
+  phone: undefined,
+  // 电子邮箱
+  email: undefined,
+  // 收货地址
+  address: undefined,
+  // 订单内容
+  content: undefined,
+  // 附件
+  files: 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;
+  })
+};
+
+// 将 SEO 相关的逻辑修改为
+const updateSeo = (data: any) => {
+  const title = data?.title || '';
+  const description = data?.comments || data?.title || '';
+  const appName = useRuntimeConfig().public.appName;
+
+  // 使用 definePageMeta 设置页面元数据
+  useHead({
+    title,
+    meta: [
+      { name: 'description', content: description },
+      { name: 'keywords', content: title },
+      { property: 'og:title', content: title },
+      { property: 'og:description', content: description }
+    ]
+  })
+}
+
+// 请求数据
+const reload = async () => {
+  try {
+    const data = await getCmsNavigation(navId.value)
+    if (!data) return
+
+    page.value = data
+    layout.value.banner = data.banner
+
+    // 更新 SEO
+    updateSeo(data)
+
+    // 二级栏目分类
+    const res = await pageCmsWebsiteAll({
+      official: true,
+      sort: 'websiteId',
+      order: 'asc'
+    })
+    siteList.value = res?.list || []
+
+    // 用户信息
+    if (user.value) {
+      form.realName = user.value.realName
+      form.phone = user.value.phone
+      form.email = user.value.email
+    }
+
+    changeCaptcha()
+  } catch (error) {
+    console.error('Failed to load page data:', error)
+  }
+}
+
+
+const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+  dialogImageUrl.value = uploadFile.url!
+  dialogVisible.value = true
+}
+
+const filesRemove: UploadProps['onRemove'] = (uploadFile) => {
+  const index = filesStr.value.findIndex(f => f == uploadFile.url);
+  filesStr.value.splice(index, 1)
+}
+
+const filesOnSuccess = (e: any) => {
+  filesStr.value.push(e.data.downloadUrl)
+}
+
+
+const onWebsite = (item: CmsWebsite) => {
+  form.articleId = item.websiteId;
+  form.websiteId = item.websiteId;
+}
+
+// 提交表单
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  if (loading.value) return // 防止重复提交
+
+  if (form.code !== text.value) {
+    changeCaptcha();
+    ElMessage.error('验证码不正确！');
+    return false;
+  }
+
+  if(process.server){
+    return false;
+  }
+
+  loading.value = true
+  try {
+    const valid = await formEl.validate()
+    if (valid) {
+      // 如果reference不为空，将其添加到content前面
+      if (form.reference) {
+        form.content = `参考网站：${form.reference}\n\n${form.content}`
+      }
+
+      if (filesStr.value.length > 0) {
+        form.files = JSON.stringify(filesStr.value);
+      }
+      const res = await addCmsOrder(form)
+      if (res.code == 0) {
+        ElMessage.success(res.message)
+        resetFields();
+      } else {
+        ElMessage.error(res.message)
+      }
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const goBack = () => {
+  router.back();
+}
+
+watch(
+  () => route.params.id,
+  (id) => {
+    navId.value = getNavIdByParamsId(id);
+    reload();
+  },
+  {immediate: true}
+);
+</script>
+
+<style lang="scss">
+</style>