chore: 切换ui组件

babel.config.js

@@ -2,21 +2,23 @@
 // https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
 module.exports = {
   presets: [
-    ['taro', {
-      framework: 'react',
-      ts: false
-    }]
+    [
+      'taro',
+      {
+        framework: 'react',
+        ts: false,
+      },
+    ],
   ],
   plugins: [
     [
-      "import",
+      'import',
       {
-        "libraryName": "@nutui/nutui-react-taro",
-        "libraryDirectory": "dist/esm",
-        "style": true,
-        "camel2DashComponentName": false
+        libraryName: '@antmjs/vantui',
+        libraryDirectory: 'es',
+        style: true,
       },
-      'nutui-react-taro'
-    ]
-  ]
-}
+      '@antmjs/vantui',
+    ],
+  ],
+};

config/index.js

@@ -22,7 +22,7 @@ const config = {
   framework: 'react',
   compiler: 'webpack5',
   cache: {
-    enable: false, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+    enable: true, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
   },
   alias: {
     '@styles': resolve(__dirname, '..', 'src/styles'),
@@ -36,10 +36,10 @@ const config = {
     '@utils': resolve(__dirname, '..', 'src/utils'),
     '@models': resolve(__dirname, '..', 'src/models'),
   },
-  sass: {
-    data: `@import "@nutui/nutui-react-taro/dist/styles/variables.scss";`,
-  },
   mini: {
+    miniCssExtractPluginOption: {
+      ignoreOrder: true,
+    },
     hot: true,
     optimizeMainPackage: {
       enable: true,

package.json

@@ -86,8 +86,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@antmjs/vantui": "^2.5.6",
     "@babel/runtime": "^7.21.0",
-    "@nutui/nutui-react-taro": "^1.5.0",
     "@tanstack/react-query": "^4.29.3",
     "@tarojs/components": "3.6.5",
     "@tarojs/helper": "3.6.5",

pnpm-lock.yaml

@@ -1,12 +1,12 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  '@antmjs/vantui':
+    specifier: ^2.5.6
+    version: 2.5.6(react-dom@18.2.0)(react@18.2.0)
   '@babel/runtime':
     specifier: ^7.21.0
     version: 7.21.0
-  '@nutui/nutui-react-taro':
-    specifier: ^1.5.0
-    version: 1.5.0(react-dom@18.2.0)(react@18.2.0)
   '@tanstack/react-query':
     specifier: ^4.29.3
     version: 4.29.3(react-dom@18.2.0)(react@18.2.0)
@@ -208,6 +208,22 @@ packages:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.18
 
+  /@antmjs/vantui@2.5.6(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-eKKDiCZHg3AAtHmGxwTqcBl0XJp8lp3Omo3HiLr0hSAxTAmJxmosJZvYH/0Y8AvZX2bzoi3H2Z8BYK4Xd4+M4Q==}
+    engines: {node: '>=12', npm: '>=6.4', yarn: '>=1.22'}
+    dependencies:
+      '@swc/helpers': 0.4.14
+      '@vant/icons': 1.8.0
+      classnames: 2.3.2
+      dayjs: 1.11.7
+      raf: 3.4.1
+      rc-util: 5.30.0(react-dom@18.2.0)(react@18.2.0)
+      use-deep-compare-effect: 1.8.1(react@18.2.0)
+    transitivePeerDependencies:
+      - react
+      - react-dom
+    dev: false
+
   /@babel/code-frame@7.21.4:
     resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==}
     engines: {node: '>=6.9.0'}
@@ -1490,10 +1506,6 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
 
-  /@bem-react/classname@1.6.0:
-    resolution: {integrity: sha512-SFBwUHMcb7TFFK5ld88+JhecoEun3/kHZ6KvLDjj3w5hv/tfRV8mtGHA8N42uMctXLF4bPEcr96xwXXcRFuweg==}
-    dev: false
-
   /@commitlint/cli@17.6.1(@swc/core@1.3.42):
     resolution: {integrity: sha512-kCnDD9LE2ySiTnj/VPaxy4/oRayRcdv4aCuVxtoum8SxIU7OADHc0nJPQfheE8bHcs3zZdWzDMWltRosuT13bg==}
     engines: {node: '>=v14'}
@@ -1855,24 +1867,6 @@ packages:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.15.0
 
-  /@nutui/nutui-react-taro@1.5.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Wvl+o2P+yLlGVqQNs8CZ0lQ2NRxjSknG8hNTHcf5hkGFB3COAo24KSp9RxA4d0Jl+RJ3y+Cejskd7jyqiHws4Q==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@babel/runtime': 7.21.0
-      '@bem-react/classname': 1.6.0
-      '@react-spring/web': 9.6.1(react-dom@18.2.0)(react@18.2.0)
-      '@use-gesture/react': 10.2.20(react@18.2.0)
-      async-validator: 4.2.5
-      classnames: 2.3.2
-      lodash.kebabcase: 4.1.1
-      react: 18.2.0
-      react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
-    transitivePeerDependencies:
-      - react-dom
-    dev: false
-
   /@parcel/css@1.14.0:
     resolution: {integrity: sha512-r5tJWe6NF6lesfPw1N3g7N7WUKpHqi2ONnw9wl5ccSGGIxkmgcPaPQxfvmhdjXvQnktSuIOR0HjQXVXu+/en/w==}
     engines: {node: '>= 12.0.0'}
@@ -1918,60 +1912,6 @@ packages:
       source-map: 0.7.4
       webpack: 5.79.0(@swc/core@1.3.42)
 
-  /@react-spring/animated@9.6.1(react@18.2.0):
-    resolution: {integrity: sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@react-spring/shared': 9.6.1(react@18.2.0)
-      '@react-spring/types': 9.6.1
-      react: 18.2.0
-    dev: false
-
-  /@react-spring/core@9.6.1(react@18.2.0):
-    resolution: {integrity: sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@react-spring/animated': 9.6.1(react@18.2.0)
-      '@react-spring/rafz': 9.6.1
-      '@react-spring/shared': 9.6.1(react@18.2.0)
-      '@react-spring/types': 9.6.1
-      react: 18.2.0
-    dev: false
-
-  /@react-spring/rafz@9.6.1:
-    resolution: {integrity: sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ==}
-    dev: false
-
-  /@react-spring/shared@9.6.1(react@18.2.0):
-    resolution: {integrity: sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@react-spring/rafz': 9.6.1
-      '@react-spring/types': 9.6.1
-      react: 18.2.0
-    dev: false
-
-  /@react-spring/types@9.6.1:
-    resolution: {integrity: sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q==}
-    dev: false
-
-  /@react-spring/web@9.6.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-X2zR6q2Z+FjsWfGAmAXlQaoUHbPmfuCaXpuM6TcwXPpLE1ZD4A1eys/wpXboFQmDkjnrlTmKvpVna1MjWpZ5Hw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@react-spring/animated': 9.6.1(react@18.2.0)
-      '@react-spring/core': 9.6.1(react@18.2.0)
-      '@react-spring/shared': 9.6.1(react@18.2.0)
-      '@react-spring/types': 9.6.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@sideway/address@4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -2214,6 +2154,12 @@ packages:
       '@swc/core-win32-x64-msvc': 1.3.51
     dev: true
 
+  /@swc/helpers@0.4.14:
+    resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
+    dependencies:
+      tslib: 2.5.0
+    dev: false
+
   /@swc/register@0.1.10(@swc/core@1.3.42):
     resolution: {integrity: sha512-6STwH/q4dc3pitXLVkV7sP0Hiy+zBsU2wOF1aXpXR95pnH3RYHKIsDC+gvesfyB7jxNT9OOZgcqOp9RPxVTx9A==}
     hasBin: true
@@ -3232,17 +3178,8 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
-  /@use-gesture/core@10.2.20:
-    resolution: {integrity: sha512-4lFhHc8so4yIHkBEs641DnEsBxPyhJ5GEjB4PURFDH4p/FcZriH6w99knZgI63zN/MBFfylMyb8+PDuj6RIXKQ==}
-    dev: false
-
-  /@use-gesture/react@10.2.20(react@18.2.0):
-    resolution: {integrity: sha512-KnJq9ZSqprWA6uNhWTUHZqTCh+rfa0j8ehTzqeBhktUPrmTj7yVOBvEQ/vSFU/7d72cGgWSsJ0f5T6GQCHXnvg==}
-    peerDependencies:
-      react: '>= 16.8.0'
-    dependencies:
-      '@use-gesture/core': 10.2.20
-      react: 18.2.0
+  /@vant/icons@1.8.0:
+    resolution: {integrity: sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg==}
     dev: false
 
   /@vue/compiler-core@3.2.47:
@@ -3734,10 +3671,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /async-validator@4.2.5:
-    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
-    dev: false
-
   /async@2.6.4:
     resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
     dependencies:
@@ -5253,6 +5186,11 @@ packages:
     resolution: {integrity: sha512-3tzwGYogSJi8HoG93R5x9NrdefZQOXgHgGih/7eivloOq6yC6O+yoFxZnkgP661twvfILONfoKRdF9GQOGx2RA==}
     dev: true
 
+  /dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -5349,13 +5287,6 @@ packages:
       utila: 0.4.0
     dev: true
 
-  /dom-helpers@5.2.1:
-    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
-    dependencies:
-      '@babel/runtime': 7.21.0
-      csstype: 3.1.2
-    dev: false
-
   /dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
     dependencies:
@@ -8191,6 +8122,7 @@ packages:
 
   /lodash.kebabcase@4.1.1:
     resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
+    dev: true
 
   /lodash.map@4.6.0:
     resolution: {integrity: sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==}
@@ -9271,7 +9203,6 @@ packages:
 
   /performance-now@2.1.0:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
-    dev: true
 
   /picocolors@0.2.1:
     resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
@@ -9918,6 +9849,7 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
+    dev: true
 
   /proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
@@ -10017,6 +9949,12 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /raf@3.4.1:
+    resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==}
+    dependencies:
+      performance-now: 2.1.0
+    dev: false
+
   /randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
     dependencies:
@@ -10048,6 +9986,18 @@ packages:
       - supports-color
     dev: true
 
+  /rc-util@5.30.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-uaWpF/CZGyXuhQG71MWxkU+0bWkPEgqZUxEv251Cu7p3kpHDNm5+Ygu/U8ux0a/zbfGW8PsKcJL0XVBOMrlIZg==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.21.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 16.13.1
+    dev: false
+
   /rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
@@ -10100,20 +10050,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
-    peerDependencies:
-      react: '>=16.6.0'
-      react-dom: '>=16.6.0'
-    dependencies:
-      '@babel/runtime': 7.21.0
-      dom-helpers: 5.2.1
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -11874,6 +11810,17 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /use-deep-compare-effect@1.8.1(react@18.2.0):
+    resolution: {integrity: sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==}
+    engines: {node: '>=10', npm: '>=6'}
+    peerDependencies:
+      react: '>=16.13'
+    dependencies:
+      '@babel/runtime': 7.21.0
+      dequal: 2.0.3
+      react: 18.2.0
+    dev: false
+
   /use-sync-external-store@1.2.0(react@18.2.0):
     resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
     peerDependencies:

src/app.config.js

@@ -1,7 +1,7 @@
 export default defineAppConfig({
   pages: [
-    'pages/index/index',
     'pages/list/index',
+    'pages/index/index',
     'pages/receive/index',
     'pages/deliver/index',
   ],

src/assets/filter.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L20.4 25.8178V38.4444L27.6 42V25.8178L42 9H6Z" fill="none" stroke="#58C6EA" stroke-width="4" stroke-linejoin="round"/></svg>

src/pages/deliver/index.jsx

@@ -1,6 +1,6 @@
 import {Image, Text, View, Picker} from '@tarojs/components';
 import icon from '@assets/goods/sending.svg';
-import {Button} from '@nutui/nutui-react-taro';
+import {Button} from '@antmjs/vantui';
 import {TextGroup as Item} from '@components';
 import {useDate} from './hooks';
 import dayjs from 'dayjs';
@@ -54,10 +54,10 @@ export default function DeliverGoods() {
       ) : null}
 
       <View className='flex mt-auto justify-around pb-12'>
-        <Button className='w-36' onClick={onScan}>
+        <Button className='w-36' onClick={onScan} round>
           扫码
         </Button>
-        <Button type='primary' className='w-36' color='#58C6EA'>
+        <Button type='primary' className='w-36' color='#58C6EA' round>
           发货
         </Button>
       </View>

src/pages/index/login/index.jsx

@@ -1,23 +1,22 @@
-import {Popup, Button} from '@nutui/nutui-react-taro';
+import {Popup, Button} from '@antmjs/vantui';
 import {Input, View} from '@tarojs/components';
 import classNames from 'classnames';
 
 export default function Login({visible, onClose}) {
   return (
     <Popup
-      visible={visible}
+      show={visible}
       position='bottom'
       closeable
       round
-      className='px-4 py-5 pb-10'
+      className='px-4 py-5 !pb-10'
       onClose={onClose}
-      closeOnClickOverlay={false}
     >
       <View className='pt-9'>
         <Input
           className={classNames(
             'border border-gray-300 border-solid rounded-lg',
-            'p-2',
+            'p-2 text-sm',
           )}
           placeholder='请输入用户名'
         />
@@ -25,14 +24,14 @@ export default function Login({visible, onClose}) {
         <Input
           className={classNames(
             'border border-gray-300 border-solid rounded-lg',
-            'p-2 mt-4',
+            'p-2 mt-4 text-sm',
           )}
           placeholder='请输入密码'
           password
         />
         <View className='mt-12'>
           <Button
-            className='py-4 !border-none !text-base'
+            className='py-4 !border-none !text-base !h-12 !rounded-md'
             block
             color='#58C6EA'
           >

src/pages/list/index.jsx

@@ -1,78 +1,95 @@
 import {TextGroup} from '@components';
-import {Text, View} from '@tarojs/components';
+import {Image, Text, View} from '@tarojs/components';
 import classNames from 'classnames';
-import {Button} from '@nutui/nutui-react-taro';
+import {Button} from '@antmjs/vantui';
 import {usePreview} from './hooks';
+import filterIcon from '@assets/filter.svg';
 
 export default function List() {
   const onClick = usePreview();
 
   return (
-    <View className='h-screen overflow-auto bg-gray-200 py-4'>
-      <View className='bg-white mx-4 rounded-lg px-3 py-4'>
-        <View
-          className={classNames(
-            'flex items-center overflow-hidden border-0 border-b border-gray-200 border-solid',
-            'pb-3',
-          )}
-        >
-          <Text className='flex-1 text-over text-[#333] mr-2 text-sm'>
-            TSDFSDFTSDF
-          </Text>
-          <View className='text-center w-16 h-7 leading-7 text-sm text-white bg-primary rounded-md'>
-            已送达
+    <>
+      <View className='h-screen overflow-auto bg-gray-200 py-4'>
+        <View className='bg-white mx-4 rounded-lg px-3 py-4'>
+          <View
+            className={classNames(
+              'flex items-center overflow-hidden border-0 border-b border-gray-200 border-solid',
+              'pb-3',
+            )}
+          >
+            <Text className='flex-1 text-over text-[#333] mr-2 text-sm'>
+              TSDFSDFTSDF
+            </Text>
+            <View className='text-center w-16 h-7 leading-7 text-sm text-white bg-primary rounded-md'>
+              已送达
+            </View>
           </View>
-        </View>
 
-        <View className='mt-4 overflow-hidden border-0 border-b border-dashed border-gray-200 pb-4'>
-          <View className='flex overflow-hidden text-sm text-gray-500'>
-            <Text className='flex-1 block text-over mr-2'>品号</Text>
-            <Text className='w-[7em]'>数量</Text>
-          </View>
-          <View className='flex overflow-hidden text-sm mt-2'>
-            <Text className='flex-1 block text-over mr-2'>12312</Text>
-            <Text className='w-[7em]'>9871876</Text>
+          <View className='mt-4 overflow-hidden border-0 border-b border-dashed border-gray-200 pb-4'>
+            <View className='flex overflow-hidden text-sm text-gray-500'>
+              <Text className='flex-1 block text-over mr-2'>品号</Text>
+              <Text className='w-[7em]'>数量</Text>
+            </View>
+            <View className='flex overflow-hidden text-sm mt-2'>
+              <Text className='flex-1 block text-over mr-2'>12312</Text>
+              <Text className='w-[7em]'>9871876</Text>
+            </View>
+            <View className='flex overflow-hidden text-sm mt-2'>
+              <Text className='flex-1 block text-over mr-2'>12312</Text>
+              <Text className='w-[7em]'>9871876</Text>
+            </View>
+            <View className='flex overflow-hidden text-sm mt-2'>
+              <Text className='flex-1 block text-over mr-2'>12312</Text>
+              <Text className='w-[7em]'>9871876</Text>
+            </View>
           </View>
-          <View className='flex overflow-hidden text-sm mt-2'>
-            <Text className='flex-1 block text-over mr-2'>12312</Text>
-            <Text className='w-[7em]'>9871876</Text>
-          </View>
-          <View className='flex overflow-hidden text-sm mt-2'>
-            <Text className='flex-1 block text-over mr-2'>12312</Text>
-            <Text className='w-[7em]'>9871876</Text>
+
+          <View className='mt-4'>
+            <TextGroup title='卡车号' content='123' className='!py-0' />
+            <TextGroup
+              title='客户编号'
+              content='123555'
+              className='!py-0 mt-2'
+            />
+            <TextGroup
+              title='发货时间'
+              content='2020-12-22'
+              className='!py-0 mt-2'
+            />
+            <TextGroup
+              title='送达时间'
+              content='2020-12-23'
+              className='!py-0 mt-2'
+            />
           </View>
-        </View>
 
-        <View className='mt-4'>
-          <TextGroup title='卡车号' content='123' className='!py-0' />
-          <TextGroup title='客户编号' content='123555' className='!py-0 mt-2' />
-          <TextGroup
-            title='发货时间'
-            content='2020-12-22'
-            className='!py-0 mt-2'
-          />
-          <TextGroup
-            title='送达时间'
-            content='2020-12-23'
-            className='!py-0 mt-2'
-          />
+          <View className='flex justify-end mt-2'>
+            <Button
+              round
+              className='!m-0 border border-solid border-gray-200'
+              onClick={onClick([
+                'https://picsum.photos/id/1/800/600',
+                'https://picsum.photos/id/2/800/600',
+                'https://picsum.photos/id/3/800/600',
+                'https://picsum.photos/id/4/800/600',
+                'https://picsum.photos/id/5/800/600',
+              ])}
+            >
+              查看图片
+            </Button>
+          </View>
         </View>
+      </View>
 
-        <View className='flex justify-end mt-2'>
-          <Button
-            className='!h-9 !text-sm'
-            onClick={onClick([
-              'https://picsum.photos/id/1/800/600',
-              'https://picsum.photos/id/2/800/600',
-              'https://picsum.photos/id/3/800/600',
-              'https://picsum.photos/id/4/800/600',
-              'https://picsum.photos/id/5/800/600',
-            ])}
-          >
-            查看图片
-          </Button>
-        </View>
+      <View
+        className={classNames(
+          'fixed right-3 bottom-8 flex items-center justify-center bg-white rounded-3xl',
+          'w-10 h-10 shadow-lg z-10',
+        )}
+      >
+        <Image src={filterIcon} mode='widthFix' className='w-5' />
       </View>
-    </View>
+    </>
   );
 }

src/pages/receive/exception/index.jsx

@@ -1,5 +1,5 @@
 import {View, Text, Textarea} from '@tarojs/components';
-import {Switch} from '@nutui/nutui-react-taro';
+import {Switch} from '@antmjs/vantui';
 import classNames from 'classnames';
 
 export default function Exception({checked, onChange}) {
@@ -11,14 +11,15 @@ export default function Exception({checked, onChange}) {
           activeText='是'
           inactiveText='否'
           checked={checked}
-          onChange={onChange}
+          onChange={e => onChange(e.detail)}
+          size='16px'
         />
         <Text className='text-sm text-[#999] ml-2'>是否异常</Text>
       </View>
 
       <Textarea
         className={classNames(
-          'border border-solid border-gray-200 rounded-md mt-3 w-[calc(100%-32px)] p-4',
+          'border border-solid border-gray-200 rounded-md mt-3 w-[calc(100%-32px)] p-4 text-sm',
           {hidden: !checked},
         )}
         placeholder='请输入异常原因'

src/pages/receive/index.jsx

@@ -2,7 +2,7 @@ import {View, Image, Text} from '@tarojs/components';
 import icon from '@assets/goods/complate.svg';
 import {TextGroup} from '@components';
 import {useScanOrder} from '@hooks';
-import {Button} from '@nutui/nutui-react-taro';
+import {Button} from '@antmjs/vantui';
 import {useUpload} from './hooks';
 import Upload from './upload';
 import Exception from './exception';
@@ -57,10 +57,10 @@ export default function Receive() {
       </View>
 
       <View className='flex mt-auto justify-around pb-12'>
-        <Button className='w-36' onClick={onScan}>
+        <Button className='w-36' onClick={onScan} round>
           扫码
         </Button>
-        <Button type='primary' className='w-36' color='#58C6EA'>
+        <Button type='primary' className='w-36' color='#58C6EA' round>
           确认收货
         </Button>
       </View>

src/styles/app.css

@@ -44,3 +44,11 @@ button {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+page {
+  --popup-close-icon-size: 20px;
+  --button-normal-height: 40px;
+  --button-normal-font-size: 14px;
+  --button-normal-border-radius: 6px;
+}