upp

Code/package.json

@@ -15,6 +15,7 @@
     "@types/react-dom": "^18.0.8",
     "antd": "^5.8.3",
     "antd-mobile": "^5.30.0",
+    "axios": "^1.7.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",

Code/public/myData/myData.js

@@ -5,6 +5,9 @@ const isPcTemp = document.documentElement.clientWidth >= 1200
 // 本地开发静态资源目录
 const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
 
+// 发送请求基地址
+const apiUrlTemp = 'https://sit-handaizy.4dage.com/api/'
+
 const myBaseUrl = 'https://houseoss.4dkankan.com/project/henan/'
 
 // Build开发资源目录
@@ -2634,14 +2637,6 @@ const myDataTemp = {
           name: '车骑拜谒',
           info: [
             {
-              name: '拥彗门吏',
-
-              type: 'img',
-              inSrc: 'Zhot/cheQi/YinBin/ww_menli.png',
-              inTxt: `<p>123</p><p>456</p>`
-            },
-
-            {
               name: '陶庄园',
               suoSrc: 'more/visit/suo1.png',
               type: 'video',
@@ -3013,13 +3008,6 @@ const myDataTemp = {
               inTxt: ``
             },
             {
-              name: '绿釉陶龟座博山炉',
-              suoSrc: 'more/banquet/suo54.png',
-              type: 'video',
-              inSrc: 'more/banquet/054.mp4',
-              inTxt: ``
-            },
-            {
               name: '“君幸食”小漆盘',
               suoSrc: 'more/banquet/suo55.png',
               type: 'img',

Code/src/assets/styles/base.css

@@ -95,6 +95,11 @@ textarea {
 .sizeNo {
   font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
 }
+.adm-auto-center-content {
+  font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+  font-size: 16px;
+  letter-spacing: 3px;
+}
 .hoverD {
   transition: all 0.3s;
 }
@@ -201,3 +206,14 @@ textarea {
     opacity: 1;
   }
 }
+.likeImg2 {
+  animation: likeImg2 1.5s linear;
+}
+@keyframes likeImg2 {
+  0% {
+    transform: scale(0.1);
+  }
+  100% {
+    transform: scale(1.5);
+  }
+}

Code/src/assets/styles/base.less

@@ -117,6 +117,12 @@ textarea {
   font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
     'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
 }
+.adm-auto-center-content {
+  font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
+    'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+  font-size: 16px;
+  letter-spacing: 3px;
+}
 
 .hoverD {
   transition: all 0.3s;
@@ -246,3 +252,17 @@ textarea {
     opacity: 1;
   }
 }
+
+// 点赞的+1
+.likeImg2 {
+  animation: likeImg2 1.5s linear;
+}
+@keyframes likeImg2 {
+  0% {
+    transform: scale(0.1);
+  }
+
+  100% {
+    transform: scale(1.5);
+  }
+}

Code/src/components/FloorBtn/index.module.scss

@@ -49,11 +49,80 @@
       }
     }
 
+    // 新加的3个按钮
+    .leftBtn {
+      width: auto;
+      height: auto;
+      position: fixed;
+      top: 15px;
+      left: 15px;
+      cursor: default;
+      & > div {
+        width: 40px;
+        height: 40px;
+        background-size: 100% 100%;
+        transition: all 0.3s;
+        margin-bottom: 10px;
+      }
+      .shareImg {
+        background-image: url('../../assets/img/leftBtn/share.png');
+        &:hover {
+          background-image: url('../../assets/img/leftBtn/shareAc.png');
+        }
+      }
+      .msgImg {
+        background-image: url('../../assets/img/leftBtn/msg.png');
+        &:hover {
+          background-image: url('../../assets/img/leftBtn/msgAc.png');
+        }
+      }
+      .likeImg {
+        background-image: url('../../assets/img/leftBtn/like.png');
+        position: relative;
+        &:hover {
+          background-image: url('../../assets/img/leftBtn/likeAc.png');
+        }
+        .likeImg1 {
+          position: absolute;
+          bottom: -18px;
+          left: 50%;
+          transform: translateX(-50%);
+          color: #83605a;
+          text-shadow: #eed879 0.5px 0.5px;
+          font-size: 14px;
+          pointer-events: none;
+        }
+        .likeImg2 {
+          position: absolute;
+          right: -10px;
+          top: -6px;
+          font-size: 10px;
+          color: #eed879;
+          text-shadow: #83605a 0.5px 0.5px;
+        }
+      }
+      .likeImgAc {
+        background-image: url('../../assets/img/leftBtn/likeAc.png');
+      }
+    }
+
     @media screen and (min-width: 1200px) {
       div {
         width: 35px;
         height: 35px;
       }
+      .leftBtn {
+        & > div {
+          width: 25px;
+          height: 25px;
+        }
+        .likeImg {
+          .likeImg1 {
+            font-size: 12px;
+            bottom: -15px;
+          }
+        }
+      }
     }
   }
 }

Code/src/components/FloorBtn/index.tsx

@@ -1,7 +1,13 @@
-import React from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import history from '@/utils/history'
 import { renClickPageFu } from '@/pages/B1more/data'
+import { locSetTimeFu, locTimeFlagFu } from '@/utils/storage'
+import { useSelector } from 'react-redux'
+import store, { RootState } from '@/store'
+import classNames from 'classnames'
+import { API_setLike } from '@/store/action/all'
+import { Toast } from 'antd-mobile'
 
 type Props = {
   unityId?: '1' | '2'
@@ -11,6 +17,55 @@ type Props = {
 }
 
 function FloorBtn({ unityId, gameFu, plowFu, unityEnd }: Props) {
+  // 获取点赞数量
+  const { likeNum } = useSelector((state: RootState) => state.A0Layout)
+
+  // 进页面看下是否已经点赞过了
+  const [likeSta, setLikeSta] = useState(false)
+  useEffect(() => {
+    const likeFlag = locTimeFlagFu()
+    if (likeFlag) setLikeSta(true)
+  }, [])
+
+  // 点赞的+1动画
+  const [likeMove, setLikeMove] = useState(false)
+
+  // 点击点赞
+  const likeFu = useCallback(async () => {
+    if (!likeSta) {
+      // 今天已经赞过了
+      Toast.show({
+        content: '您今天已经赞过了!'
+      })
+      return
+    }
+
+    // 发送请求
+    const res = await API_setLike('star')
+    if (res.code === 0) {
+      // 存当天0点时间戳
+      locSetTimeFu()
+
+      // +1动画显示
+      setLikeMove(true)
+      if (likeMove) return
+
+      // 点赞图标变高亮
+      setLikeSta(false)
+      setTimeout(() => {
+        // +1动画隐藏
+        setLikeMove(false)
+        // num++
+        store.dispatch({ type: 'layout/likeNum', payload: res.data.pcsStar })
+      }, 1400)
+    }
+  }, [likeMove, likeSta])
+
+  // 点击留言板/分享
+  const openAPPpageComFu = useCallback((val: 'layout/shareShow' | 'layout/msgShow') => {
+    store.dispatch({ type: val, payload: true })
+  }, [])
+
   return (
     <div className={styles.FloorBtn} id='FloorBtn'>
       {gameFu ? <div title='游戏' className='FloorBtn0' onClick={gameFu}></div> : null}
@@ -37,6 +92,28 @@ function FloorBtn({ unityId, gameFu, plowFu, unityEnd }: Props) {
           } else history.push('/more')
         }}
       ></div>
+
+      {/* 新加的左上角3个按钮 */}
+      <div className='leftBtn'>
+        <div
+          title='分享'
+          className='shareImg'
+          onClick={() => openAPPpageComFu('layout/shareShow')}
+        ></div>
+        <div
+          title='留言板'
+          className='msgImg'
+          onClick={() => openAPPpageComFu('layout/msgShow')}
+        ></div>
+        <div
+          onClick={likeFu}
+          title='点赞'
+          className={classNames('likeImg', likeSta ? '' : 'likeImgAc')}
+        >
+          <span className='likeImg1'>{likeNum}</span>
+          {likeMove ? <span className='likeImg2'>+1</span> : null}
+        </div>
+      </div>
     </div>
   )
 }

Code/src/index.tsx

@@ -13,10 +13,20 @@ import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/c
 
 import 'dayjs/locale/zh-cn'
 import locale from 'antd/locale/zh_CN'
+import { API_getLike } from './store/action/all'
 
 const container = document.getElementById('root') as HTMLElement
 const root = createRoot(container)
 
+// 获取点赞数量
+const getLikeFu = async () => {
+  const res = await API_getLike()
+  if (res.code === 0) {
+    store.dispatch({ type: 'layout/likeNum', payload: res.data.pcsStar || 0 })
+  }
+}
+getLikeFu()
+
 root.render(
   <ConfigProvider
     locale={locale}

Code/src/pages/B1more/S3goods/index.module.scss

@@ -62,14 +62,24 @@
             letter-spacing: 4px;
             line-height: 38px;
             position: relative;
+
+            // 右下角图片
             .S3zRimg {
               pointer-events: none;
               position: absolute;
+              position: absolute;
               right: 0;
               bottom: 15px;
-              height: 70px;
-              width: auto;
-              object-fit: fill !important;
+              height: 60px;
+              width: 60%;
+              overflow: hidden;
+              & > img {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                height: 100%;
+                width: auto;
+              }
             }
             // 3d标识
             .tDbiao {

Code/src/pages/B1more/S3goods/index.tsx

@@ -163,7 +163,14 @@ function S3goods({ hidden }: Props) {
                     ) : null}
 
                     {/* 右下角图片 */}
-                    <img className='S3zRimg' src={baseURL + item2.suoSrc} alt='' />
+
+                    <div className='S3zRimg'>
+                      {item2.type === 'img' ? (
+                        <img src={baseURL + item2.inSrc} alt='' />
+                      ) : (
+                        <img src={baseURL + item2.suoSrc} alt='' />
+                      )}
+                    </div>
                   </div>
                 ))}
               </div>

Code/src/store/action/all.ts

@@ -0,0 +1,23 @@
+import http from '@/utils/axios'
+
+/**
+ * 点赞
+ */
+export const API_setLike = (type: 'star' | 'visit') => {
+  // 这个项目暂时没有 visit 访问量
+  return http.get(`show/visit/add/${type}`)
+}
+
+/**
+ * 获取点赞详情
+ */
+export const API_getLike = () => {
+  return http.get('show/visit/detail')
+}
+
+/**
+ * 获取馆藏列表
+ */
+// export const getGoodsList = (data: any) => {
+//   return http.post('show/goods/pageList', data)
+// }

Code/src/store/reducer/layout.ts

@@ -1,11 +1,22 @@
 // 初始化状态
 const initState = {
   isHH: false,
-  style: {}
+  style: {},
+  // 点赞数量
+  likeNum: 0,
+  // 打开分享
+  shareShow: false,
+  // 打开留言板
+  msgShow: false
 }
 
 // 定义 action 类型
-type LayoutActionType = { type: string; payload: any }
+type LayoutActionType =
+  | { type: 'layout/isHH'; payload: boolean }
+  | { type: 'layout/style'; payload: any }
+  | { type: 'layout/likeNum'; payload: number }
+  | { type: 'layout/shareShow'; payload: boolean }
+  | { type: 'layout/msgShow'; payload: boolean }
 
 // 频道 reducer
 export default function layoutReducer(state = initState, action: LayoutActionType) {
@@ -15,6 +26,12 @@ export default function layoutReducer(state = initState, action: LayoutActionTyp
       return { ...state, isHH: action.payload }
     case 'layout/style':
       return { ...state, style: action.payload }
+    case 'layout/likeNum':
+      return { ...state, likeNum: action.payload }
+    case 'layout/shareShow':
+      return { ...state, shareShow: action.payload }
+    case 'layout/msgShow':
+      return { ...state, msgShow: action.payload }
     default:
       return state
   }

Code/src/types/declaration.d.ts

@@ -14,6 +14,7 @@ declare const isPcTemp: boolean
 declare const myDataTemp: MyDataType
 declare const otherUrlTemp: string
 declare const myHotInfo: any
+declare const apiUrlTemp: string
 
 type MyDataType = {
   isLdong: boolean

Code/src/utils/axios.ts

@@ -0,0 +1,67 @@
+import axios from 'axios'
+import { Toast } from 'antd-mobile'
+import { apiUrl } from './http'
+
+// 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
+declare module 'axios' {
+  interface AxiosResponse {
+    code: number
+    // 这里追加你的参数
+  }
+}
+
+// 创建 axios 实例
+const http = axios.create({
+  baseURL: apiUrl,
+  timeout: 10000
+})
+
+// 请求拦截器
+http.interceptors.request.use(
+  function (config: any) {
+    return config
+  },
+  function (err) {
+    return Promise.reject(err)
+  }
+)
+
+let timeId = -1
+
+// 响应拦截器
+http.interceptors.response.use(
+  function (response) {
+    if (response.data.code === 0) {
+      // MessageFu.success(response.data.msg);
+    } else {
+      Toast.show({
+        icon: 'fail',
+        content: response.data.msg
+      })
+    }
+
+    return response.data
+  },
+  async function (err) {
+    clearTimeout(timeId)
+    timeId = window.setTimeout(() => {
+      // 如果因为网络原因，response没有，给提示消息
+      if (!err.response) {
+        Toast.show({
+          icon: 'fail',
+          content: '网络繁忙，请稍后重试!'
+        })
+      } else {
+        Toast.show({
+          icon: 'fail',
+          content: '响应错误，请联系管理员!'
+        })
+      }
+    }, 100)
+
+    return Promise.reject(err)
+  }
+)
+
+// 导出 axios 实例
+export default http

Code/src/utils/http.ts

@@ -15,3 +15,6 @@ export const otherUrl = otherUrlTemp
 
 // 重新梳理的热点信息
 export const hotInfo: HotInfoType = myHotInfo
+
+// 发送请求基地址
+export const apiUrl: string = apiUrlTemp

Code/src/utils/storage.ts

@@ -1,40 +1,44 @@
 // ------------------------------------token的本地存储------------------------------------
 
-// 用户 Token 的本地缓存键名，自己定义
-const TOKEN_KEY = "BJSDBWG_HT_USER_INFO";
+// 点赞的本时间戳
+const TIME_KEY = 'HNBWY_WEB_TIME_NUM'
 
 /**
- * 从本地缓存中获取 用户 信息
+ * 从本地缓存中获取时间戳
  */
-export const getTokenInfo = (): any => {
-  return JSON.parse(localStorage.getItem(TOKEN_KEY) || "{}");
-};
+const locGetTimeFu = (): string => {
+  return localStorage.getItem(TIME_KEY) || ''
+}
 
 /**
- * 将 用户 信息存入缓存
- * @param {Object} tokenInfo 从后端获取到的 Token 信息
+ * 存入时间戳
  */
-export const setTokenInfo = (tokenInfo: any): void => {
-  localStorage.setItem(TOKEN_KEY, JSON.stringify(tokenInfo));
-};
+export const locSetTimeFu = (): void => {
+  // 获取当天0点时间戳
+  const timestamp = new Date().setHours(0, 0, 0, 0)
+  localStorage.setItem(TIME_KEY, timestamp + '')
+}
 
 /**
- * 删除本地缓存中的 用户 信息
+ * true:表示没有时间戳/超过22小时（可以点赞）
+ * 获取本地缓存中的时间戳是不是存在/有没有超过22小时
  */
-export const removeTokenInfo = (): void => {
-  localStorage.removeItem(TOKEN_KEY);
-};
+export const locTimeFlagFu = (): boolean => {
+  let flag = false
+  const time = locGetTimeFu()
 
-/**
- * 判断本地缓存中是否存在 Token 信息
- */
-export const hasToken = (): boolean => {
-  return Boolean(getTokenInfo().token);
-};
+  if (time) {
+    const timeNum = Number(time)
+    // 获取当天0点时间戳
+    const nowTime = new Date().setHours(0, 0, 0, 0)
+    if (nowTime !== timeNum) {
+      // 过了0点了
+      flag = true
+    }
+  } else {
+    // 还没有存入时间戳，可以点赞
+    flag = true
+  }
 
-/**
- * 获取本地缓存中是否存在 Token 信息
- */
-export const getTokenFu = (): string => {
-  return getTokenInfo().token;
-};
+  return flag
+}

Code/yarn.lock

@@ -3007,6 +3007,15 @@ axe-core@^4.4.3:
   resolved "https://registry.npmmirror.com/axe-core/-/axe-core-4.5.0.tgz"
   integrity sha512-4+rr8eQ7+XXS5nZrKcMO/AikHL0hVqy+lHWAnE3xdHl+aguag8SOQ6eEqLexwLNWgXIMfunGuD3ON1/6Kyet0A==
 
+axios@^1.7.9:
+  version "1.7.9"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz#d7d071380c132a24accda1b2cfc1535b79ec650a"
+  integrity sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/axobject-query/-/axobject-query-2.2.0.tgz"
@@ -4839,6 +4848,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmmirror.com/for-each/-/for-each-0.3.3.tgz"
@@ -4874,6 +4888,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48"
+  integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz"
@@ -7711,6 +7734,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz"