feat: 增加留言功能

src/api/home.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+//  获取友情链接
+export const getAmityList = () => request({
+  url: '/user/amity/list2',
+  method: 'post',
+  params: {
+    type: 'MALL'
+  }
+})

src/api/user.js

@@ -33,3 +33,10 @@ export const userLoginData = (params) => request({
   method: 'get',
   params: params
 })
+
+// 留言
+export const userLeaveMessage = params => request({
+  url: '/user/leave/message',
+  method: 'get',
+  params: params
+})

src/components/logo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <img class="logo-image" :src="Logo" alt="logo" />
+  <img class="logo-image" :src="Logo" alt="logo" :style="{width: size, height: size}" />
 </template>
 
 <script setup lang="js">

src/main.js

@@ -3,46 +3,21 @@ import './reset.css'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-// import Antd from 'ant-design-vue'
-// import 'ant-design-vue/dist/reset.css'
-import { ConfigProvider } from 'ant-design-vue'
 import {
   GlobalTextProcessor,
-  translaBeforeRegistration,
-  setupAntdLocale 
+  translaBeforeRegistration
 } from './utils/init-processor'
 
-// 使用 Ant Design
-// app.use(Antd)
-
-// 初始化翻译
+// 初始化翻译-多语言
 translaBeforeRegistration(() => {
-  const language = window.Vue_Translation_Of_Text_Type || 'zh'
-  
-  // 设置 Ant Design 国际化
-  // const locale = setupAntdLocale(app, language)
-  
-  // // 使用 ConfigProvider 包装应用
-  // const AppWithConfig = {
-  //   components: { App },
-  //   setup() {
-  //     provide('antdLocale', locale)
-  //     return () => h(ConfigProvider, { locale }, () => h(App))
-  //   }
-  // }
   const app = createApp(App)
-  // 注册全局文本处理器
   app.use(GlobalTextProcessor)
   app.use(store)
   app.use(router)
-  
-  
   app.mount('#app')
-  
-  // 初始处理一次
-  // setTimeout(() => {
-  //   if (app.config.globalProperties.$processAntdComponents) {
-  //     app.config.globalProperties.$processAntdComponents()
-  //   }
-  // }, 100)
-})
+})
+
+// const app = createApp(App)
+// app.use(store)
+// app.use(router)
+// app.mount('#app')

src/pages/category/components/Right.vue

@@ -13,16 +13,18 @@
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'goodsName'">
             <div class="goods-name" @click="viewDetail(record)">
-              <a-flex align="center">
+              <a-flex>
                 <img :src="record.imgUrl" width="60" height="60" style="margin-right: 10px;" />
-                <span>{{ record.goodsName }}</span>
-              </a-flex>
-              <a-flex v-if="foramtTagData(record).length > 0" gutter="small" style="margin-top: 10px; margin-left: 70px;">
-                <a-tag
-                  v-for="(tag, tIndex) in foramtTagData(record)"
-                  :key="tIndex"
-                  color="red"
-                >{{ tag }}</a-tag>
+                <div>
+                  <div>{{ record.goodsName }}</div>
+                  <a-flex v-if="foramtTagData(record).length > 0" gutter="small" style="margin-top: 10px;">
+                    <a-tag
+                      v-for="(tag, tIndex) in foramtTagData(record)"
+                      :key="tIndex"
+                      color="red"
+                    >{{ tag }}</a-tag>
+                  </a-flex>
+                </div>
               </a-flex>
             </div>
           </template>

src/pages/goods/index.vue

@@ -169,11 +169,14 @@ const onFinish = () => {}
 const onFailed = () => {}
 
 const fetchDetail = async () => {
-  const res = await getDetail({
+  const params = {
     goodsId: route.query.id,
-    userId: userStore.userInfo?.userId || '',
-    storageId: homeStore.storageId,
-  });
+    storageId: homeStore.storageId
+  }
+  if (userStore.userInfo?.userId) {
+    params.userId = userStore.userInfo?.userId
+  }
+  const res = await getDetail(params);
   mainForm.detail = res.data || {};
   // mainForm.detail = goodsDetailData;
 }

src/pages/home/components/LinkList.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="link-box">
+    <div class="link-group__title">友情链接</div>
+    <div class="link-list">
+      <a
+        v-for="(item, index) in data"
+        :key="index"
+        :href="item.amityUrl"
+        class="link-item"
+        target="_blank"
+      >{{ item.amityUrlName }}</a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="js">
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.link-box {
+  padding: 20px;
+  background: #ffff;
+  .link-group__title {
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+  .link-list {
+    .link-item {
+      display: block;
+      color: @theme-color;
+      font-size: 16px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

src/pages/home/index.vue

@@ -14,9 +14,68 @@
     <main class="app-main__content">
       <RouterView />
     </main>
+    <LinkList v-if="mainData.linkList" :data="mainData.linkList" />
     <div v-if="showBackIcon" class="back-icon__box">
       <a-button type="primary" shape="round" @click="router.back()">back</a-button>
     </div>
+    <div class="back-icon__box msg-icon__box" @click="handleMessage">
+      <MessageOutlined :style="{fontSize: '42px', color: '#666', cursor: 'pointer'}" />
+    </div>
+    <a-modal
+      v-model:open="msgForm.open"
+      title="留言板"
+      :footer="null"
+    >
+      <div style="text-align: center;">
+        <Logo size="120px" />
+      </div>
+      <a-form
+        ref="msgFormRef"
+        :model="msgForm"
+        name="msgForm"
+        layout="vertical"
+        @finish="submitMessage"
+      >
+        <a-form-item
+          label="姓"
+          name="firstName"
+          :rules="[{ required: true, message: '不能为空' }]"
+        >
+          <a-input v-model:value="msgForm.firstName" placeholder="请输入" allowClear />
+        </a-form-item>
+        <a-form-item
+          label="名"
+          name="lastName"
+          :rules="[{ required: true, message: '不能为空' }]"
+        >
+          <a-input v-model:value="msgForm.lastName" placeholder="请输入" allowClear />
+        </a-form-item>
+        <a-form-item
+          label="公司名称"
+          name="companyName"
+          :rules="[{ required: true, message: '不能为空' }]"
+        >
+          <a-input v-model:value="msgForm.companyName" placeholder="请输入" allowClear />
+        </a-form-item>
+        <a-form-item
+          label="手机号码"
+          name="mobile"
+          :rules="[{ required: true, validator: checkMobile }]"
+        >
+          <a-input v-model:value="msgForm.mobile" placeholder="请输入" allowClear />
+        </a-form-item>
+        <a-form-item
+          label="留言内容"
+          name="message"
+          :rules="[{ required: true, message: '不能为空' }]"
+        >
+          <a-input v-model:value="msgForm.message" placeholder="请输入" allowClear />
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary" html-type="submit" block :disabled="mainData.disabled">发 送</a-button>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
@@ -25,7 +84,11 @@ import Notice from './components/Notice.vue';
 import Toolbar from './components/Toolbar.vue';
 import HandleBar from './components/HandleBar.vue';
 import Category from './components/Category.vue';
-import { onMounted, computed, reactive } from 'vue';
+import LinkList from './components/LinkList.vue';
+import Logo from '@/components/logo/index.vue'
+import { message } from 'ant-design-vue';
+import { MessageOutlined } from '@ant-design/icons-vue';
+import { onMounted, computed, ref, reactive, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useUserStore } from '@/store/user';
 import { useHomeStore } from '@/store/home';
@@ -33,6 +96,9 @@ import { useGoodsStore } from '@/store/goods';
 import { useCategoryStore } from '@/store/category';
 import { getStoreList, getNotice } from '@/api/common';
 import * as storeUtil from '@/utils/storeUtil';
+import { getAmityList } from '@/api/home';
+import { userLeaveMessage } from '@/api/user';
+import { validPhone } from '@/utils/validate';
 import { storeList } from '@/utils/mock';
 
 const route = useRoute();
@@ -50,11 +116,57 @@ const isLogin = computed(() => {
 });
 const showBackIcon = computed(() => route.path !== '/category');
 
+const msgFormRef = ref()
 const mainData = reactive({
   storeList: [],
-  noticeContent: ''
+  linkList: [],
+  noticeContent: '',
+  disabled: false
+})
+
+const msgForm = reactive({
+  open: false,
+  firstName: '',
+  lastName: '',
+  companyName: '',
+  mobile: '',
+  message: ''
 })
 
+const handleMessage = () => {
+  msgForm.open = true
+  msgForm.firstName = ''
+  msgForm.lastName = ''
+  msgForm.companyName = ''
+  msgForm.mobile = ''
+  msgForm.message = ''
+  nextTick(() => {
+    msgFormRef.value?.clearValidate()
+  })
+}
+
+const submitMessage = () => {
+  mainData.disabled = true
+  userLeaveMessage({
+    firstName: msgForm.firstName,
+    lastName: msgForm.lastName,
+    companyName: msgForm.companyName,
+    mobile: msgForm.mobile,
+    message: msgForm.message
+  }).then(() => {
+    msgForm.open = false
+    message.success('留言成功')
+  }).finally(() => {
+    mainData.disabled = false
+  })
+}
+
+const checkMobile = (rule, value) => {
+  if (value === '') return Promise.reject('不能为空')
+  if (!validPhone(value)) return Promise.reject('格式有误')
+  return Promise.resolve()
+}
+
 const resetGoodsDataAndFetch = () => {
   goodsStore.resetParams();
   goodsStore.resetListData();
@@ -120,6 +232,12 @@ const fetchNoticeData = async () => {
   mainData.noticeContent = res.data || '';
 }
 
+//  获取友情链接
+const fetchgetAmityList = async () => {
+  const res = await getAmityList()
+  mainData.linkList = res.data || []
+}
+
 onMounted(async () => {
   homeStore.updateStorageId(storeUtil.getId());
   await fetchStoreListData();
@@ -133,6 +251,7 @@ onMounted(async () => {
     }
   });
   resetGoodsDataAndFetch();
+  fetchgetAmityList();
   if (isLogin.value) {
     fetchNoticeData();
     userStore.fetchUserDetail()
@@ -146,10 +265,14 @@ onMounted(async () => {
   padding: 20px;
 }
 
-.back-icon__box {
+.back-icon__box,
+.msg-icon__box {
   position: fixed;
-  bottom: 30px;
+  bottom: 50px;
   right: 30px;
   z-index: 9999;
 }
+.msg-icon__box {
+  bottom: 0;
+}
 </style>

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import Home from '@/pages/home/index.vue'
 import Category from '@/pages/category/index.vue'
 import Login from '@/pages/login/index.vue'
@@ -46,7 +46,7 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes
 })