手机端打包和选择语言

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "homepage": "/h5/",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -10,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vitejs/plugin-legacy": "^4.1.1",
     "antd-mobile": "^5.38.1",
     "axios": "^1.7.8",
     "china-area-data": "^5.0.1",
@@ -17,12 +19,12 @@
     "china-region": "^1.4.1",
     "js-cookie": "^3.0.5",
     "less": "^4.2.1",
-    "less-loader": "^12.2.0",
     "rc-picker": "^4.8.3",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.28.0"
+    "react-router-dom": "^6.28.0",
+    "vite-plugin-commonjs": "^0.10.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -32,6 +34,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "less-loader": "^7.3.0",
     "postcss-px-to-viewport": "^1.1.1",
     "vite": "^4.4.5"
   }

src/main.jsx

@@ -8,6 +8,8 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 // 判断设备类型并进行相应的跳转
 if (isMobile) {
   // 如果是移动设备，不进行任何操作，继续渲染当前路由
+  // window.location.href = 'https://www.aimzhu.com/h5/'
+  // window.location.href = 'http://192.168.0.112:3000'
 } else {
   // 如果是PC设备，跳转到其他网址
   window.location.href = 'https://www.aimzhu.com/';

src/router/index.jsx

@@ -6,9 +6,10 @@ import List from '@/views/List/List'
 import Use from '@/views/Use/Use'
 import Detail from '@/views/Detail/Detail'
 const router = (
-  <Router>
+  // <Router basename="/car-shop3">
+  <Router basename="/h5">
     <Routes>
-      <Route path="/" element={<App></App>}>
+      <Route path="/" element={<App></App>}> 
         <Route path="/" element={<Home />} />
         <Route path="/login" element={<Login />} />
         <Route path="/list" element={<List />} />

src/views/List/List.jsx

@@ -150,7 +150,7 @@ export default function List() {
   //   },
   // ]
   const getList = async (status) => {
-
+    setProjList([])
     const res = await GetList({
       page,
       rows: 10,
@@ -162,14 +162,16 @@ export default function List() {
     // setProjList([...projList, ...res.rows])
   }
   const getPageList = async (status) => {
-
+    // console.log(status);
+    
     const res = await GetList({
       page: page + 1,
       rows: 10,
-      generateStatus: status  //ALL全部 PROCESSING 生成中 COMPLETE已完成
+      status: status  //ALL全部 PROCESSING 生成中 COMPLETE已完成
     })
     setPage(page + 1)
-    setProjList([...projList, ...res.rows])
+    // setProjList([...projList, ...res.rows])
+    setProjList(prevProjList => [...prevProjList, ...res.rows]);
   }
 
   const nav = useNavigate()
@@ -185,7 +187,7 @@ export default function List() {
   useEffect(() => {
     getList(select)
     // getPageList(select)
-  }, [page])
+  }, [])
   useEffect(() => {
     // 获取token
     let token = sessionStorage.getItem('token')

src/views/Login/Login.jsx

@@ -52,6 +52,9 @@ export default function Login() {
 
       return
     } else {
+      setShowBtn(false)
+      // 开始倒计时 
+      startCountdown();
       var res = await GetCode(phoneNum)
       console.log(res);
 
@@ -61,9 +64,7 @@ export default function Login() {
       icon: 'success',
       content: '验证码已发送',
     })
-    setShowBtn(false)
+ 
-    // 开始倒计时 
-    startCountdown();
   }
   // 开始倒计时的函数
   const startCountdown = () => {

src/views/Use/Use.jsx

@@ -14,8 +14,7 @@ import {
   Toast,
   CheckList,
   Empty,
-  // Picker,
+  Cascader,
-  Cascader
 
 } from 'antd-mobile'
 import { CreateProj, CreateContact, CreateOwner, GetCsa, GetOwnerList, GetContactList } from '../../request/api'
@@ -36,11 +35,11 @@ export default function Use() {
   const [cascaberShow, setCascaberShow] = useState(false)
   const onFinish = (values) => {
     // console.log(values);
-    
+
     createNewOwner(values.name, values.idCardNo, values.provinceCity);
 
   };
-  
+
 
   const nav = useNavigate()
   const [name, setName] = useState('') //系统全称
@@ -86,10 +85,10 @@ export default function Use() {
   const [applyContactCsaNo, setApplyContactCsaNo] = useState('') //联系人客服编号
 
   const [visible, setVisible] = useState(false); //时间弹窗是否显示
+  const [languageModal, setLanguageModal] = useState(false)//选择语言弹窗是否显示
   const [time, setTime] = useState('') //开发完成时间
   const [timeToast, setTimeToast] = useState(false) //开发完成时间提示
-
+  const [programmingLanguage, setProgrammingLanguage] = useState('JAVA') //选择得语言
-
 
 
   // const [loading, setLoading] = useState(false);//是否有加载中
@@ -147,7 +146,8 @@ export default function Use() {
           projDevCompleteDate: time,
           projName: name,
           projVersion: 'v1.0',
-          projChargeType: 'FREE'
+          projChargeType: 'FREE',
+          backendCodeLang:programmingLanguage
         })
         // setLoading(false)
         nav('/list')
@@ -393,7 +393,8 @@ export default function Use() {
             请选择知识产权联系人
           </div>
         </div>
-        <div className='formItem'>
+
+        <div className='formItem' >
           <div className='itemName'>开发完成时间</div>
           <div style={{ position: 'relative' }}>
             <Input className='formInput' value={time}
@@ -409,16 +410,30 @@ export default function Use() {
             请选择开发完成时间
           </div>
         </div>
+
         <DatePicker
           visible={visible}
           onClose={() => setVisible(false)}
           onConfirm={handleDateChange}
           title="选择日期"
         />
+        <div className='formItem'>
+          <div className='itemName'>系统语言</div>
+          <div style={{ position: 'relative' }}>
+            <Input className='formInput disableIn' value={programmingLanguage} >
+            </Input>
+            <div className='datePick' onClick={() => {
+              setLanguageModal(true)
+            }}>
+            </div>
+
+          </div>
+        </div>
 
 
 
       </div>
+
       <Button className='useBtn'
         // disabled={loading}
         onClick={
@@ -617,14 +632,14 @@ export default function Use() {
                   }}
                   onConfirm={(value) => {
                     // console.log(value);
-                    if(value.length == 0){
+                    if (value.length == 0) {
                       Toast.show({
                         icon: 'fail',
                         content: '请选择省市',
                       })
-                     return
+                      return
                     }
-                    if(value.length < 2){
+                    if (value.length < 2) {
                       Toast.show({
                         icon: 'fail',
                         content: '请选择市',
@@ -834,7 +849,53 @@ export default function Use() {
         }}
 
       />
+      {/* 选择开发语言弹窗 */}
+      <Modal
+        destroyOnClose
+        closeOnMaskClick
+        visible={languageModal}
+        content={
+          (
+            <div className='modalBox'>
+              <div className='createModalTitle'>
+                选择开发语言
+              </div>
+              <CheckList
+                onChange={(value) => {
+                  setProgrammingLanguage(value[0])
+                }
+                }
 
+              >
+
+                <CheckList.Item
+                  value={'JAVA'}
+                >
+                  JAVA
+                </CheckList.Item>
+                <CheckList.Item
+                  value={'NODE'}
+                >
+                  NODE(JAVASCRIPT)
+                </CheckList.Item> <CheckList.Item
+                  value={'PYTHON'}
+                >
+                  PYTHON
+                </CheckList.Item> <CheckList.Item
+                  value={'GO'}
+                >
+                  GO
+                </CheckList.Item>
+              </CheckList>
+            </div>
+          )
+        }
+        closeOnAction
+        onClose={() => {
+          setLanguageModal(false)
+        }}
+
+      />
     </div>
   )
 }

src/views/Use/use.less

@@ -14,7 +14,7 @@
     .formBox {
         margin-top: 60px;
         width: 291px;
-        height: 410px;
+        height: 450px;
         background-color: rgb(255, 255, 255);
         position: relative;
         padding: 0 24px;

src/views/css/use.css

@@ -11,7 +11,7 @@
 .useBox .formBox {
   margin-top: 60px;
   width: 291px;
-  height: 410px;
+  height: 450px;
   background-color: #ffffff;
   position: relative;
   padding: 0 24px;

vite.config.js

@@ -1,9 +1,36 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import postcssPxToViewport from 'postcss-px-to-viewport';
-// https://vitejs.dev/config/
+import legacy from "@vitejs/plugin-legacy";
+// import commonjs from 'vite-plugin-commonjs';
 export default defineConfig({
-  plugins: [react()],
+  // base:'/car-shop3/', // 设置为相对路径
+  base:'/h5/', // 设置为相对路径
+  plugins: [
+   react(),
+    legacy({
+      targets: ["ie>=11"],
+      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
+    }),
+  ],
+  // server: {
+  //   proxy: {
+  //     '/api': {
+  //       target: 'http://localhost:3000', // 目标服务器的地址
+  //       changeOrigin: true, // 是否改变源地址
+  //       rewrite: (path) => path.replace(/^\/api/, '') // 路径重写，将/api替换为空
+  //     }
+  //   }
+  // },
+  // build: {
+	// commonjsOptions: {
+	// transformMixedEsModules: true
+	// }
+  // },
+  build: {
+    // outDir: 'dist/h5',// 输出目录设置为 dist/h5
+    assetsDir: 'assets',
+  },
   server: {
     host: '0.0.0.0', // 允许外部网络访问
     port: 3000, // 更改此处的端口号
@@ -32,6 +59,6 @@ export default defineConfig({
       ],
     },
   },
-  
+
-  
+
 })