feats

src/components/Spin/SpinBox.jsx

+
+import React, { useMemo } from 'react'
+import { View } from '@tarojs/components'
+import Spin from '.'
+import './style.less'
+
+export default (props) => {
+  const { className, style, loading, size = '64rpx', ...leftProps } = props
+
+  const cls = useMemo(() => [className, 'loading-wrapper'].filter(Boolean).join(' '), [className])
+
+  return (
+    <View className={cls} style={style}>
+      {
+        loading && (
+          <View className='loading-box'>
+            <Spin size={size} {...leftProps} />
+          </View>
+        )
+      }
+      {props.children}
+    </View>
+  )
+}

src/components/Spin/style.less

     transform: translate(-50%, -50%);
   }
 }
+
+
+.loading-wrapper {
+  position: relative;
+
+  .loading-box {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 72px;
+    padding-top: 60%;
+    padding-left: 50%;
+    background: rgba(255, 255, 255, .95);
+    box-sizing: border-box;
+  }
+}

src/pages/TobeShop/index.jsx

 import { getVerifyTargetList, putVerifyTarget } from "@/services/payOrder";
 import formatTime from '@/utils/formatTime'
 import Popup from "@/components/Popup";
+import SpinBox from "@/components/Spin/SpinBox";
 import formatPrice from "@/utils/formatPrice";
 
 import LocationBig from "@/assets/icons/UserCenter/LocationBig.png";
   //核销
   const [Consumption, setConsumption] = useState(false);
 
-  const [checked, setChecked] = useState();
+  const [checked, setChecked] = useState([]);
   const [shopContent, setShopContent] = useState([])
 
+  const [loading, setLoading] = useState(false)
   const [list, setList] = useState([]);
 
 
   }
 
   const getList = (params) => {
+    setLoading(true)
     getVerifyTargetList({
       shopId: id,
       isMine: true,
       if (res) {
         setList(res.records)
 
-        setChecked(res?.records.filter(x => x.subOrderId == subOrderId)[0]?.verifyNo)
-
-        // if(item.verifyNo==checked)
+        if (res.records && res.records.length > 0) {
+          if (res.records.length === 1) {
+            setChecked([res.records[0].verifyNo])
+          } else {
+            setChecked([res?.records.filter(x => x.subOrderId == subOrderId)[0]?.verifyNo].filter(Boolean))
+          }
+        } else {
+          Taro.navigateBack({ delta: 1 })
+        }
       }
 
-    });
+      setLoading(false)
+    }).catch(() => setLoading(false));
   };
 
   useEffect(() => {
-    getList();
-    getShop();
-  }, []);
+    if (id) {
+      getList();
+      getShop();
+    }
+  }, [id]);
+
+  const handleCheck = (verifyNo) => {
+    const inx = checked.indexOf(verifyNo)
+    if (inx === -1) {
+      setChecked([...checked, verifyNo])
+    } else {
+      const p1 = checked.slice(0, inx)
+      const p2 = checked.slice(inx + 1)
+      setChecked(p1.concat(p2))
+    }
+  }
 
   const ShowMoldeOn = () => {
     setShowDialog(true);
     setShowDialog(false);
   };
   const ButtonOK = (e) => {
-    if (!checked) return
+    if (!checked || !checked.length) return
     if (showDialog === true) {
       Taro.showLoading({
         title: '核销中'
       })
 
-      putVerifyTarget(checked).then(res => {
+      Promise.all(checked.map(verifyNo => putVerifyTarget(verifyNo)))
+      .then(res => {
         Taro.hideLoading()
         setShowDialog(false);
         setConsumption(true);
-      }).catch(e => {
+      })
+      .catch(e => {
         Taro.hideLoading()
         setShowDialog(false);
+        getList();  // 刷新数据
         Taro.showToast({
           title: '核销失败',
           icon: 'none',
     }
   };
 
+  const btnText = ['确认核销', checked && checked.length > 0  ? `(${checked.length})` : undefined].filter(Boolean).join(' ')
+
   return (
     <view className='shop-Eat'>      
       <view className='index-navbar'>
           />
           <text className='shop-title-title'>请选择你要核销的套餐</text>
         </view>
-        <view>
+        <SpinBox loading={loading}>
           {(list || []).map((item) => {
             return (
-              <view class='wrapper' key={item.verifyNo} onClick={() => setChecked(item.verifyNo)}>
+              <view class='wrapper' key={item.verifyNo} onClick={() => handleCheck(item.verifyNo)}>
                 <view class='left-complete-one'>
                   <image className='left-image-1' src={ProCard_hot}></image>
                   <view className='left-viewText'>返现￥{(item.cashback / 100).toFixed(2)}</view>
                 <view class='right-complete-two'>
                   <view className='right-content'>
                     <view className='Check_OK-box'>
-                      <image className='Check_OK-image' src={item.verifyNo == checked ? Check_OK : Check_NO} />
+                      <image className='Check_OK-image' src={checked.indexOf(item.verifyNo) > -1 ? Check_OK : Check_NO} />
                     </view>
                   </view>
                 </view>
               </view>
             );
           })}
-        </view>
+        </SpinBox>
 
         <view className='button-info'>
-          <Button className='button-box' disabled={!checked} onClick={ShowMoldeOn}>
-            确定核销
+          <Button className='button-box' disabled={!checked.length} onClick={ShowMoldeOn}>
+            {btnText}
           </Button>
         </view>
       </view>

src/pages/details/foodDetails/foodDetails.jsx

 import Star from "@/components/Star/Star.jsx";
 import NoData from '@/components/NoData'
 import Cards from "@/components/foodCards/foodCards.jsx";
+import SpinBox from "@/components/Spin/SpinBox";
 import ax from "@/assets/icons/housemantj/onlove.png";
 import yysj from "@/assets/icons/housemantj/openTime.png";
 import dw from "@/assets/icons/housemantj/loc.png";
   }, [id, scene, subOrderId]);
 
   //商铺基础信息
+  const [loading, setLoading] = useState(false)
   const [detail, setDetail] = useState({});
   //商铺套餐
   const [spackage, setPackage] = useState([]);
 
   useEffect(() => {
     if (id) {
+      setLoading(true)
       getShopDetail(id, { location }).then((res) => {
         setDetail(res);
         log.current = res.locaton.toString().split(",")[0];
         lat.current = res.locaton.toString().split(",")[1];
         setimglist(res.imageList || []);
-      });
+        setLoading(false)
+      }).catch(() => setLoading(false));
       getShopPackage(id).then((res) => {
         setPackage(res.records || []);
         setNewpgNum(res.records.length);
       <view className='index-navbar'>
         <CustomNav title='十公里' />
       </view>
-      <view
-        style={{ overflow: "hidden", padding: "0 30rpx", height: '100%', background: "#F8F8F8" }}
-      >
+      <SpinBox loading={loading} className='index-container' style={{ padding: '0 30rpx' }}>
         <scroll-view
           scrollY
           style={{ height: '100%' }}
               current={index}
               onChange={handchange}
             >
-              {imglist.map((item) => (
-                <SwiperItem>
+              {imglist.map((item, inx) => (
+                <SwiperItem key={inx}>
                   <image src={item.url} mode='aspectFit' className='storeImage'>
                     <view className='tpPage'>
                       <text>
               </>
           }
         </scroll-view>
-      </view>
-      <view className='bottomTab'>
+      </SpinBox>
+      <view className='bottomTab custom-tabbar'>
         <Button openType='share' className='sharebtn'>
           分享
         </Button>