upp

Code/src/App.tsx

@@ -6,8 +6,12 @@ import history from './utils/history'
 import SpinLoding from './components/SpinLoding'
 
 import NotFound from '@/components/NotFound'
-import store from './store'
+import store, { RootState } from './store'
 import { baseURL, isLoc, myData } from './utils/http'
+import AsyncSpinLoding from './components/AsyncSpinLoding'
+import { useSelector } from 'react-redux'
+import Zshare from './components/ZshareOrMsg/Zshare'
+import Zmsg from './components/ZshareOrMsg/Zmsg'
 
 // import Vconsole from 'vconsole'
 // new Vconsole()
@@ -158,6 +162,9 @@ export default function App() {
     if (myData.isLdong && !isLoc) rootRef.current.addEventListener('click', audioPlayFu)
   }, [audioPlayFu, pageFullChangeFu])
 
+  // 分享和点赞
+  const { shareShow, msgShow } = useSelector((state: RootState) => state.A0Layout)
+
   return (
     <>
       {/* 关于路由 */}
@@ -189,6 +196,13 @@ export default function App() {
 
       {/* 背景音乐 */}
       <audio id='bgMp3' loop style={{ display: 'none' }} src={baseURL + 'home/bg.mp3'}></audio>
+
+      {/* 发送请求的加载组件 */}
+      <AsyncSpinLoding />
+
+      {/* 分享、点赞 */}
+      {shareShow ? <Zshare /> : null}
+      {msgShow ? <Zmsg /> : null}
     </>
   )
 }

Code/src/assets/styles/base.css

@@ -99,6 +99,7 @@ textarea {
   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;
+  text-align: center;
 }
 .hoverD {
   transition: all 0.3s;
@@ -182,6 +183,9 @@ textarea {
   .adm-image-viewer-image-wrapper img {
     transform: rotate(90deg) !important;
   }
+  .adm-toast-wrap {
+    transform: rotate(90deg) !important;
+  }
 }
 #myIframe {
   position: fixed;
@@ -207,7 +211,7 @@ textarea {
   }
 }
 .likeImg2 {
-  animation: likeImg2 1.5s linear;
+  animation: likeImg2 1.5s linear forwards;
 }
 @keyframes likeImg2 {
   0% {

Code/src/assets/styles/base.less

@@ -122,6 +122,7 @@ textarea {
     'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
   font-size: 16px;
   letter-spacing: 3px;
+  text-align: center;
 }
 
 .hoverD {
@@ -222,6 +223,9 @@ textarea {
   .adm-image-viewer-image-wrapper img {
     transform: rotate(90deg) !important;
   }
+  .adm-toast-wrap {
+    transform: rotate(90deg) !important;
+  }
 }
 
 // 嵌套unity
@@ -255,7 +259,7 @@ textarea {
 
 // 点赞的+1
 .likeImg2 {
-  animation: likeImg2 1.5s linear;
+  animation: likeImg2 1.5s linear forwards;
 }
 @keyframes likeImg2 {
   0% {

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

@@ -0,0 +1,21 @@
+.AsyncSpinLoding {
+  opacity: 0;
+  pointer-events: none;
+  transition: all .5s;
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  // background-color: rgba(0, 0, 0, .6);
+  background-color: transparent;
+  :global{
+    .ant-spin-spinning{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+    }
+  }
+}

Code/src/components/AsyncSpinLoding/index.tsx

@@ -0,0 +1,15 @@
+import styles from "./index.module.scss";
+import { Spin } from "antd";
+import React from "react";
+
+function AsyncSpinLoding() {
+  return (
+    <div id="AsyncSpinLoding" className={styles.AsyncSpinLoding}>
+      <Spin size="large" />
+    </div>
+  );
+}
+
+const MemoAsyncSpinLoding = React.memo(AsyncSpinLoding);
+
+export default MemoAsyncSpinLoding;

Code/src/components/FloorBtn/index.tsx

@@ -14,9 +14,11 @@ type Props = {
   gameFu?: () => void
   plowFu?: () => void
   unityEnd?: () => void
+  // 左上角的3个按钮是否显示,为true表示显示，默认为true
+  leftBtnShow?: boolean
 }
 
-function FloorBtn({ unityId, gameFu, plowFu, unityEnd }: Props) {
+function FloorBtn({ unityId, gameFu, plowFu, unityEnd, leftBtnShow = true }: Props) {
   // 获取点赞数量
   const { likeNum } = useSelector((state: RootState) => state.A0Layout)
 
@@ -94,7 +96,7 @@ function FloorBtn({ unityId, gameFu, plowFu, unityEnd }: Props) {
       ></div>
 
       {/* 新加的左上角3个按钮 */}
-      <div className='leftBtn'>
+      <div className='leftBtn' hidden={!leftBtnShow}>
         <div
           title='分享'
           className='shareImg'

Code/src/components/ZshareOrMsg/Zmsg/index.module.scss

@@ -0,0 +1,153 @@
+.Zmsg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background: rgba(85, 55, 47, 0.7);
+  backdrop-filter: blur(4px);
+  padding: 4% 10%;
+  :global {
+    .ZmMain {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      .ZmMainll {
+        width: 60%;
+        & > h1 {
+          color: #ffdf89;
+          font-size: 20px;
+          font-weight: 400;
+          margin-bottom: 5px;
+        }
+        .ZmMainll1 {
+          width: 100%;
+          height: calc(100% - 30px);
+          overflow: auto;
+          padding-right: 10px;
+          &::-webkit-scrollbar {
+            width: 3px;
+          }
+          &::-webkit-scrollbar-thumb {
+            background: #eacf60;
+          }
+          .ZmRow {
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #fffddc;
+            color: #fffddc;
+            & > p {
+              text-align: justify;
+              font-size: 11px;
+              margin-bottom: 5px;
+              line-height: 20px;
+              word-break: break-all;
+              white-space: pre-wrap;
+              font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
+                'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
+                sans-serif !important;
+            }
+            .ZmRow1 {
+              font-size: 10px;
+            }
+          }
+        }
+        // 没有留言信息的时候
+        .ZmNull {
+          width: 100%;
+          height: 80%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #fffddc;
+          font-size: 24px;
+        }
+      }
+      .ZmMainrr {
+        width: 36%;
+        background-size: 100% 100%;
+        padding: 6px 10px;
+        & > h1 {
+          font-weight: 400;
+          color: #932b19;
+          font-size: 20px;
+          margin-bottom: 3px;
+        }
+        .adm-text-area {
+          height: 170px;
+          border: 1px solid #932b19;
+          background-color: rgba(255, 255, 255, 0.6);
+          border-radius: 2px;
+          .adm-text-area-element {
+            height: calc(100% - 26px);
+            padding: 5px;
+            font-size: 12px;
+            &::-webkit-scrollbar {
+              width: 3px;
+            }
+            &::-webkit-scrollbar-thumb {
+              background: transparent;
+            }
+          }
+          .adm-text-area-count {
+            font-size: 12px;
+            font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+              'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+          }
+        }
+
+        .adm-input {
+          margin: 15px 0 10px;
+          border: 1px solid #932b19;
+          background-color: rgba(255, 255, 255, 0.6);
+          border-radius: 2px;
+          padding: 0 5px;
+          .adm-input-element {
+            font-size: 12px;
+            font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+              'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+          }
+        }
+        .ZmMainrrCode {
+          display: flex;
+          align-items: center;
+          .adm-input {
+            margin: 0;
+          }
+          & > img {
+            display: inline-block;
+            margin: 0 8px;
+            height: 30px;
+          }
+          .anticon-reload {
+            font-size: 20px;
+            cursor: pointer;
+            color: #932b19;
+          }
+        }
+        // 按钮
+        .Zmbtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 15px;
+          & > div {
+            cursor: pointer;
+            width: 85px;
+            height: 30px;
+            background-size: 100% 100%;
+            background-image: url('../../../assets/img/btn.png');
+            color: #fffddc;
+            transition: all 0.3s;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &:hover {
+              background-image: url('../../../assets/img/btnAc.png');
+              color: #b67150;
+            }
+          }
+        }
+      }
+    }
+  }
+}

Code/src/components/ZshareOrMsg/Zmsg/index.tsx

@@ -0,0 +1,158 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import BtnRight from '@/components/BtnRight'
+import store from '@/store'
+import { baseURL } from '@/utils/http'
+import { API_getCode, API_getMsgList, API_msgSave } from '@/store/action/all'
+import { Input, TextArea, Toast } from 'antd-mobile'
+import { ReloadOutlined } from '@ant-design/icons'
+
+type ListType = {
+  content: string
+  createTime: string
+  creatorId?: any
+  creatorName: string
+  id: number
+  name: string
+  status: number
+  updateTime: string
+}
+
+function Zmsg() {
+  const [list, setList] = useState<ListType[]>([])
+  const [loding, setLoding] = useState(false)
+
+  const getListFu = useCallback(async () => {
+    const res = await API_getMsgList()
+    if (res.code === 0) {
+      setLoding(true)
+      setList(res.data.records || [])
+    }
+  }, [])
+
+  // 获取验证码
+  const getCodeFu = useCallback(async () => {
+    const res: any = await API_getCode()
+    const reader = new FileReader()
+    reader.readAsDataURL(res)
+    reader.onload = () => {
+      setCodeImg(reader.result)
+    }
+  }, [])
+
+  useEffect(() => {
+    getListFu()
+    getCodeFu()
+  }, [getCodeFu, getListFu])
+
+  // 文本信息
+  const [content, setContent] = useState('')
+  const [name, setName] = useState('')
+  const [randCode, setRandCode] = useState('')
+  const [codeImg, setCodeImg] = useState<any>('')
+
+  // 消息提示
+  const msgTit = useCallback((val: string) => {
+    Toast.show({
+      icon: 'fail',
+      content: val
+    })
+  }, [])
+
+  // 点击提交
+  const btnOk = useCallback(async () => {
+    const contentRes = content.trim()
+    if (!contentRes) return msgTit('请输入内容')
+    if (contentRes.length < 5) return msgTit('内容最少5个字符')
+    if (!name) return msgTit('请输入称呼')
+    if (!randCode || randCode.length < 5) return msgTit('请输入5位验证码')
+
+    const obj = {
+      content,
+      name,
+      randCode
+    }
+    const res: any = await API_msgSave(obj)
+
+    if (res.code === 0) {
+      Toast.show({
+        icon: 'success',
+        content: '提交成功,等待管理员审核'
+      })
+      setContent('')
+      setName('')
+      setRandCode('')
+      getCodeFu()
+    }
+  }, [content, getCodeFu, msgTit, name, randCode])
+
+  return (
+    <div id='HotOpCss' className={styles.Zmsg}>
+      <div className='ZmMain'>
+        <div className='ZmMainll'>
+          <h1>留言板</h1>
+          {list.length ? (
+            <div className='ZmMainll1 mySorrl'>
+              {list.map(item => (
+                <div className='ZmRow' key={item.id}>
+                  <p className='ZmRow1'>{item.createTime}</p>
+                  <p>{item.name}：</p>
+                  <p>{item.content}</p>
+                </div>
+              ))}
+            </div>
+          ) : null}
+
+          {list.length <= 0 && loding ? <div className='ZmNull'>暂无留言</div> : null}
+        </div>
+        <div
+          className='ZmMainrr'
+          style={{ backgroundImage: `url(${baseURL}home/leftBtn/msgBj.png)` }}
+        >
+          <h1>评论</h1>
+          <TextArea
+            value={content}
+            onChange={val => setContent(val)}
+            maxLength={500}
+            showCount
+            placeholder='请输入内容，5-500字'
+          />
+
+          <Input
+            placeholder='请输入称呼（必填，1-6个字）'
+            maxLength={6}
+            value={name}
+            onChange={val => setName(val.trim())}
+          />
+          <div className='ZmMainrrCode'>
+            <Input
+              placeholder='请输入图形验证码'
+              maxLength={5}
+              value={randCode}
+              onChange={val => setRandCode(val.trim())}
+            />
+
+            <img src={codeImg} alt='' />
+
+            <ReloadOutlined rev={undefined} onClick={getCodeFu} />
+          </div>
+
+          <div className='Zmbtn'>
+            <div onClick={btnOk}>提交</div>
+          </div>
+        </div>
+      </div>
+
+      {/* 右下角的返回按钮 */}
+      <BtnRight
+        imgName='back'
+        clickSon={() => store.dispatch({ type: 'layout/msgShow', payload: false })}
+        title='返回'
+      />
+    </div>
+  )
+}
+
+const MemoZmsg = React.memo(Zmsg)
+
+export default MemoZmsg

Code/src/components/ZshareOrMsg/Zshare/index.module.scss

@@ -0,0 +1,28 @@
+.Zshare {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background: rgba(85, 55, 47, 0.7);
+  backdrop-filter: blur(4px);
+  padding: 10% 20%;
+  :global {
+    .Zsmain {
+      width: 100%;
+      height: 100%;
+      background-size: 100% 100%;
+      position: relative;
+      .ZsCode {
+        width: 100%;
+        height: 100%;
+        object-fit: contain !important;
+      }
+      p {
+        margin-top: 3%;
+        color: #f8f0dd;
+        text-align: center;
+        font-size: 16px;
+      }
+    }
+  }
+}

Code/src/components/ZshareOrMsg/Zshare/index.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react'
+import styles from './index.module.scss'
+import store from '@/store'
+import BtnRight from '@/components/BtnRight'
+import { Toast } from 'antd-mobile'
+import { baseURL, isPc } from '@/utils/http'
+
+function Zshare() {
+  useEffect(() => {
+    const href = window.location.href
+    const hash = window.location.hash
+    const urlRes = href.replace(hash, '')
+
+    let newInput = document.createElement('input')
+    newInput.value = urlRes
+    document.body.appendChild(newInput)
+    newInput.select()
+    document.execCommand('Copy')
+    newInput.remove()
+
+    Toast.show({
+      content: '链接已复制'
+    })
+  }, [])
+
+  return (
+    <div id='HotOpCss' className={styles.Zshare}>
+      <div className='Zsmain'>
+        <img className='ZsCode' src={baseURL + 'home/leftBtn/bj.jpg'} alt='' />
+        <p>{isPc ? '点击鼠标右键、图片另存为,保存图片' : '长按保存图片'}</p>
+      </div>
+
+      {/* 右下角的返回按钮 */}
+      <BtnRight
+        imgName='back'
+        clickSon={() => store.dispatch({ type: 'layout/shareShow', payload: false })}
+        title='返回'
+      />
+    </div>
+  )
+}
+
+const MemoZshare = React.memo(Zshare)
+
+export default MemoZshare

Code/src/index.tsx

@@ -32,7 +32,7 @@ root.render(
     locale={locale}
     theme={{
       token: {
-        colorPrimary: '#733c00'
+        colorPrimary: '#ead98f'
       }
     }}
   >

Code/src/pages/A6plow/index.tsx

@@ -259,7 +259,11 @@ function A6plow() {
             txt={staCut === '蔬菜' ? '庄 稼' : '结束饮宴'}
           />
           {/* 右下角按钮 */}
-          <FloorBtn plowFu={() => setCode(true)} unityEnd={() => history.push('unend/end')} />
+          <FloorBtn
+            leftBtnShow={staCut === '庄稼' ? false : true}
+            plowFu={() => setCode(true)}
+            unityEnd={() => history.push('unend/end')}
+          />
         </div>
       ) : null}
 

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

@@ -70,7 +70,7 @@
               position: absolute;
               right: 0;
               bottom: 15px;
-              height: 60px;
+              height: 50px;
               width: 60%;
               overflow: hidden;
               & > img {

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

@@ -106,6 +106,12 @@ function S3goods({ hidden }: Props) {
   // 打开详情
   const [openInfo, setOpenInfo] = useState({} as GoodsType)
 
+  const nmaeResFu = useCallback((name: string) => {
+    const name1 = name.replaceAll('&', '')
+    const nameRes = name1.length > 10 ? name1.slice(0, 10) + '...' : name1
+    return nameRes
+  }, [])
+
   return (
     <div
       hidden={hidden}
@@ -147,7 +153,7 @@ function S3goods({ hidden }: Props) {
                     key={index2}
                     style={{ backgroundImage: `url(${row2Bac(index2)})` }}
                   >
-                    {item2.name}
+                    {nmaeResFu(item2.name)}
                     {item2.type === 'model' ? <img className='tDbiao' src={tDimg} alt='' /> : ''}
 
                     {/* 上下的线 */}

Code/src/store/action/all.ts

@@ -16,8 +16,26 @@ export const API_getLike = () => {
 }
 
 /**
- * 获取馆藏列表
+ * 获取留言列表
  */
-// export const getGoodsList = (data: any) => {
-//   return http.post('show/goods/pageList', data)
-// }
+export const API_getMsgList = () => {
+  const data = {
+    pageNum: 1,
+    pageSize: 99999
+  }
+  return http.post('show/message/pageList', data)
+}
+
+/**
+ * 获取验证码
+ */
+export const API_getCode = () => {
+  return http.get('admin/getRandCode', { responseType: 'blob' })
+}
+
+/**
+ * 留言列表新增
+ */
+export const API_msgSave = (data: any) => {
+  return http.post('show/message/save', data)
+}

Code/src/utils/axios.ts

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { Toast } from 'antd-mobile'
 import { apiUrl } from './http'
+import { domShowFu } from './domShow'
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module 'axios' {
@@ -16,9 +17,15 @@ const http = axios.create({
   timeout: 10000
 })
 
+let axajInd = 0
+
 // 请求拦截器
 http.interceptors.request.use(
   function (config: any) {
+    // 发请求前打开加载提示
+    domShowFu('#AsyncSpinLoding', true)
+
+    axajInd++
     return config
   },
   function (err) {
@@ -31,20 +38,24 @@ let timeId = -1
 // 响应拦截器
 http.interceptors.response.use(
   function (response) {
-    if (response.data.code === 0) {
-      // MessageFu.success(response.data.msg);
-    } else {
+    // 请求回来的关闭加载提示
+    axajInd--
+    if (axajInd === 0) {
+      domShowFu('#AsyncSpinLoding', false)
+    }
+    if (response.data.code !== 0 && response.data.msg) {
       Toast.show({
         icon: 'fail',
         content: response.data.msg
       })
     }
-
     return response.data
   },
   async function (err) {
     clearTimeout(timeId)
     timeId = window.setTimeout(() => {
+      axajInd = 0
+      domShowFu('#AsyncSpinLoding', false)
       // 如果因为网络原因，response没有，给提示消息
       if (!err.response) {
         Toast.show({

Code/src/utils/domShow.ts

@@ -0,0 +1,13 @@
+// 加载和上传的盒子的显示隐藏
+export const domShowFu = (ele: string, val: boolean) => {
+  const dom: HTMLDivElement = document.querySelector(ele)!
+  if (dom) {
+    if (val) {
+      dom.style.opacity = '1'
+      dom.style.pointerEvents = 'auto'
+    } else {
+      dom.style.opacity = '0'
+      dom.style.pointerEvents = 'none'
+    }
+  }
+}