🐞 fix(色卡剪样): 限制提交订单按钮

project.config.json

@@ -31,7 +31,8 @@
     },
     "disableUseStrict": false,
     "useCompilerPlugins": false,
-    "minifyWXML": true
+    "minifyWXML": true,
+    "condition": false
   },
   "compileType": "miniprogram",
   "libVersion": "2.24.5",

project.private.config.json

@@ -135,6 +135,13 @@
           "query": "purchaser_id=1873&sale_mode=0&shopping_cart_product_color_list=%5B75484%2C75485%5D&purchaser_name=%E5%AD%9C%E7%84%B6%E7%83%A4%E9%B1%BF%E9%B1%BC",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/getColorCard/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }

src/common/constant.ts

@@ -4,8 +4,8 @@
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
 // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
-// export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
+export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
-export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
+// export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
 // export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发

src/components/loading/index.tsx

@@ -2,7 +2,12 @@ import { View } from '@tarojs/components'
 import { memo, useMemo } from 'react'
 import style from './index.module.scss'
 
-const Loading = ({ width = 60, color = '#6190e8' }: { width?: number; color?: string }) => {
+interface LoadingProps {
+  width?: number
+  color?: string
+}
+const Loading = (props: LoadingProps) => {
+  const { width = 60, color = '#6190e8' } = props
   const styleObj = useMemo(() => {
     let obj = {}
     if (width > 0) { obj = { width: `${width}rpx`, height: `${width}rpx` } }

src/components/normalButton/index.module.scss

@@ -10,7 +10,7 @@
   text-align: center;
   color: #fff;
   box-sizing: border-box;
-  
+
   &--normal {
     height: 72px;
     font-size: $font_size_medium;
@@ -76,12 +76,9 @@
     align-items: center;
     color: currentColor;
     .loading {
-      position: absolute;
+      display: inline-block;
+      margin-right: 20px;
       pointer-events: none;
-      left: -40px;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: 1;
     }
   }
   // active 伪类

src/components/normalButton/index.tsx

@@ -49,6 +49,13 @@ const NormalButton: FC<NormalButtonPropsType> = (props) => {
     return classObject
   }
 
+  const loadingColor = type === 'primary' ? '#fff' : ''
+  let loadingComponent: JSX.Element | null = null
+  if (loading) {
+    loadingComponent = <View className={styles.loading}>
+      <Loading width={30} color={loadingColor} />
+    </View>
+  }
   const handleClick = (event) => {
     if (disabled) {
       return
@@ -59,7 +66,7 @@ const NormalButton: FC<NormalButtonPropsType> = (props) => {
   return (
     <View className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
       <View className={classnames(styles['button--text'], customTextClassName)}>
-        <View className={styles.loading}>{loading && <Loading width={30} />}</View>
+        {loadingComponent}
         {children}</View>
     </View>
   )

src/pages/getColorCard/addColorCard/index.tsx

@@ -15,6 +15,7 @@ import Remark from '@/pages/orderDetails/components/remark'
 import { SubmitColorCardOrder } from '@/api/colorCard'
 import NavBar from '@/pages/order/components/NavBar'
 import { MpPurchaserAddressList } from '@/api/addressList'
+import { debounce } from '@/common/util'
 
 const AddColorCard = () => {
   // 获取选择的客户
@@ -92,9 +93,9 @@ const AddColorCard = () => {
     // Taro.setStorageSync('colorCardCache', JSON.stringify(order))
   }
 
-  const { fetchData } = SubmitColorCardOrder()
+  const { fetchData, state } = SubmitColorCardOrder()
   // 提交订单
-  const handleSubmitOrder = async() => {
+  const handleSubmitOrder = debounce(async() => {
     if (!addressInfo.address_id) {
       return alert.none('请选择地址')
     }
@@ -102,6 +103,7 @@ const AddColorCard = () => {
       return alert.none('请选择客户')
     }
     if (order.length === 0) { return alert.none('请选择色卡') }
+
     // 请求数据
     const res = await fetchData({
       address_id: addressInfo.address_id,
@@ -116,11 +118,9 @@ const AddColorCard = () => {
         duration: 2000,
       })
       Taro.removeStorageSync('colorCardCache')
-      setTimeout(() => {
+      goLink('/pages/getColorCard/colorCardDetail/index', { id: res.data.id }, 'redirectTo')
-        goLink('/pages/getColorCard/colorCardDetail/index', { id: res.data.id }, 'redirectTo')
-      }, 2000)
     }
-  }
+  }, 300)
 
   const deleteColorCard = (id) => {
     setOrder((prev) => {
@@ -372,7 +372,9 @@ const AddColorCard = () => {
       <NormalButton
         customClassName={styles.bottomBar__button}
         type="primary"
+        disabled={state.loading! || state.success!}
         round
+        loading={state.loading!}
         onClick={handleSubmitOrder}
       >
         提交订单

src/pages/sampleCutting/addSampleCutting/index.tsx

@@ -18,6 +18,7 @@ import { formatRemoveHashTag } from '@/common/format'
 import { SubmitCutSampleOrder } from '@/api/sampleCutting'
 import NavBar from '@/pages/order/components/NavBar'
 import { MpPurchaserAddressList } from '@/api/addressList'
+import { debounce } from '@/common/util'
 
 const AddColorCard = () => {
   // 获取选择的客户
@@ -87,9 +88,9 @@ const AddColorCard = () => {
     goLink('/pages/sampleCutting/sampleCuttingList/index', { isGoBack: true, isAddSampleCutIdList: order.map(item => item.product_id) })
   }
 
-  const { fetchData } = SubmitCutSampleOrder()
+  const { fetchData, state } = SubmitCutSampleOrder()
   // 提交订单
-  const handleSubmitOrder = async() => {
+  const handleSubmitOrder = debounce(async() => {
     if (!addressInfo.address_id) {
       return alert.none('请选择地址')
     }
@@ -120,11 +121,9 @@ const AddColorCard = () => {
         duration: 2000,
       })
       Taro.removeStorageSync('sampleCuttingCache')
-      setTimeout(() => {
+      goLink('/pages/sampleCutting/sampleCuttingDetail/index', { id: res.data.id }, 'redirectTo')
-        goLink('/pages/sampleCutting/sampleCuttingDetail/index', { id: res.data.id }, 'redirectTo')
-      }, 2000)
     }
-  }
+  }, 300)
 
   const labAndImgObj = useCallback((item) => {
     return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
@@ -441,7 +440,9 @@ const AddColorCard = () => {
       <NormalButton
         customClassName={styles.bottomBar__button}
         type="primary"
+        disabled={state.loading! || state.success!}
         round
+        loading={state.loading!}
         onClick={handleSubmitOrder}
       >
         提交订单