browse,loadbar

c_client/src/components/_tb_comps/BrowserLoading/BrowserLoading.jsx

+import React, { useState, useEffect } from "react";
+import { View, Image, Text } from "@tarojs/components";
+import LoadingBar,{LOAD_TYPE} from "../LoadingBar/LoadingBar";
+import styles from './BrowserLoading.module.less'
+import {LOAD_OBJ} from '@/pages/packageGood/browseGoods/browseGoods'
+const BrowserLoading = (props) => {
+    const {loadFlag,count} = props;
+  return (
+    <View className={styles["browse_loading"]}>
+      {loadFlag == LOAD_OBJ.NUMBER && (
+        <>
+          <View className={styles["count_img"]}>
+            <View className={styles["count_time"]}>{count}s</View>
+          </View>
+        </>
+      )}
+      {loadFlag == LOAD_OBJ.PICTURE && <LoadingBar type={LOAD_TYPE.TASK} />}
+    </View>
+  );
+};
+export default BrowserLoading;

c_client/src/components/_tb_comps/BrowserLoading/BrowserLoading.module.less

+.browse_loading {
+  width: 200px;
+  height: 200px;
+  position: fixed;
+  right: 20px;
+  top: 400px;
+  border: 1px solid cyan;
+  box-sizing: border-box;
+}
+.count_img {
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgb(47, 131, 99);
+  box-sizing: border-box;
+  background-image: url("//yun.dui88.com/7f705da9-5f16-4cf1-a239-3903c5c23995.png");
+  .image-property(contain, center center);
+}
+.count_time {
+  width: 100px;
+  height: 60px;
+  line-height: 60px;
+  margin: 40px auto 0;
+  border: 1px solid cyan;
+  box-sizing: border-box;
+  font-size: 40px;
+  font-weight: 600;
+  color: #000;
+  text-align: center;
+}

c_client/src/components/_tb_comps/GoodsList/GoodsList.jsx

@@ -4,7 +4,9 @@ import classnames from 'classnames'
 import tbccTs from 'tbcc-sdk-ts'
 const { openDetail } = tbccTs.tb
 import styles from './GoodsList.module.less'
-import LoadingBar from '../LoadingBar/LoadingBar'
+import BrowserLoading from '../BrowserLoading/BrowserLoading'
+import {LOAD_OBJ} from '@/pages/packageGood/browseGoods/browseGoods'
+
 
 function GoodsList(props) {
     const {
@@ -18,7 +20,7 @@ function GoodsList(props) {
             img: '//yun.dui88.com/taobaomini/clientCTest/goods_img@2x.png'
           },
           color: '#181818',
-          loadFlag:"DEFAULT"
+          loadFlag:LOAD_OBJ.DEFAULT
         },
         onOpenDetail,
         onCompleteTask,
@@ -74,22 +76,7 @@ function GoodsList(props) {
             }
             {
               task.loadFlag && 
-              <View className={styles['browse_loading']} >
-                {
-                  task.loadFlag == 'NUMBER' &&
-                  <>
-                    <View className={styles['count_img']} >
-                      <View className={styles['count_time']} >
-                        {count}s
-                      </View>
-                    </View>
-                  </>
-                }
-                {
-                  task.loadFlag == 'PICTURE' &&
-                  <LoadingBar />
-                }
-              </View>
+              <BrowserLoading loadFlag={task.loadFlag} count={count} />
             }
           </View>
         </ScrollView>

c_client/src/components/_tb_comps/LoadingBar/LoadingBar.jsx

 import React,{useState, useEffect} from 'react'
 import {View,Image,Text} from '@tarojs/components'
 import styles from './LoadingBar.module.less'
+
+export const LOAD_TYPE = {
+    'TASK':"TASK",
+    'NORMAL':"NORMAL"
+}
+
 const LoadingBar = (props) => {
     const {
         bg='https://yun.duiba.com.cn/spark/assets/5a725b9e4ebf436a0a92c6317a5a4e47d87c8c1f.png',
-        bgTop='https://yun.duiba.com.cn/spark/assets/ccc405e28a5140d3aff9dff27b97fa5fb6bd7ff5.png'
+        bgTop='https://yun.duiba.com.cn/spark/assets/ccc405e28a5140d3aff9dff27b97fa5fb6bd7ff5.png',
+        type='',
+        total=0,
+        current=0
     } = props;
     
+    const [percent,setPercent] = useState(0);
+
+    useEffect(()=>{
+        showCurrentLoading();
+    },[])
+
+    /**
+     * @description 显示当前进度(进度条上没有其他内容)
+     */
+    const showCurrentLoading = () => {
+        if(type == LOAD_TYPE.NORMAL){
+            let cur = current >= total ? toal : current;
+            setPercent((cur / total * 100).toFixed(1))
+        }
+    }
+
+
     return(
         <View className={styles['load_container']} >
             <View className={styles['load_content']} >
                 <View className={styles['load_bg']} style={{backgroundImage:`url(${bg})`}} ></View>
-                <View className={styles['load_top']} style={{backgroundImage:`url(${bgTop})`}} ></View>
+                <View 
+                    className={`${styles['load_top']} ${type == LOAD_TYPE.TASK && 'loadAni'}`} 
+                    style={{
+                        backgroundImage:`url(${bgTop})`,
+                        clipPath:`${type==LOAD_TYPE.NORMAL && `inset(0% 0% 0% ${percent}%)`}`
+                    }} 
+                ></View>
             </View>
         </View>
     )

c_client/src/components/_tb_comps/LoadingBar/LoadingBar.module.less

@@ -14,7 +14,7 @@
         background-size: cover;
         background-repeat: no-repeat;
       }
-      .load_top{
+      .loadAni{
         animation: move 15s linear forwards;
       }
 }

c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx

@@ -2,9 +2,7 @@ import React, { useState, useEffect } from "react";
 import { View, Image, Text, Swiper, SwiperItem } from "@tarojs/components";
 
 import './SwiperView.less'
-import tbcc from 'tbcc-sdk-ts'
-const {navigateTo,commonToast,redirectTo,navigateBack} = tbcc.tb
-
+import Taro,{showToast,redirectTo,navigateTo} from '@tarojs/taro'
 export const EASING_WAYS = {
     'DEFAULT':'default',
     'LINEAR':'linear',
@@ -19,14 +17,14 @@ const SwiperView = (props) => {
      */
   const {
     swiperList=[], 
-    isSpecial=false,
+    isSpecial=true,
     easingFunction=`${EASING_WAYS.LINEAR}`,
     circular=true,
-    autoplay=true,
+    autoplay=false,
     vertical=false,
     duration=1000,
     interval=1500,
-    disableTouch=true
+    disableTouch=false
   } = props;
 
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -52,7 +50,9 @@ const SwiperView = (props) => {
    * @description 获取当前卡片详情之类
    */
   const getCurrentDetail = (item) => {
-    commonToast('111')
+    showToast({
+      title:'111'
+    })
   }
 
   return (
@@ -73,21 +73,32 @@ const SwiperView = (props) => {
           swiperList.map((item, i) => (
             <SwiperItem>
               <View
-                className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}
-                `}
+                className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}`}
               >
-                {i === currentIndex &&  (
+                {/* {i === currentIndex &&  (
                   <Image
                     className="checkPic"
                     src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
                   ></Image>
-                )}
+                )} */}
                 <View className="item_img_content">
                   {/* 单个swiper主要内容 */}
-                  <Image className="img" style={{width:`${400/100}rem`,height:`${240/100}rem`}} src={item.image}></Image>
+                  <Image 
+                    className="img" 
+                    style={{
+                      width:`${400/100}rem`,
+                      height:`${240/100}rem`
+                    }} 
+                    src={item.image}></Image>
                   {
                     item?.content &&
-                    <View className='text_content' >
+                    <View 
+                      className='text_content'
+                      style={{
+                        width:'100%',
+                        height:`${160/100}rem`
+                      }}
+                    >
                       <View className='text' >{item.content}</View>
                     </View>
                   }

c_client/src/components/_tb_comps/SwiperView/SwiperView.less

@@ -20,7 +20,6 @@
           margin: 0 auto;
           position: relative;
           border-radius: 20px;
-          // background-image: url("https://yun.duiba.com.cn/4a45a818-7d3f-4a97-9fb6-a18c9f635520.png");
           .image-property(cover, top center);
           .checkPic {
             width: 60px;
@@ -40,8 +39,7 @@
               background-position: top center;
             }
             .text_content{
-              width: 100%;
-              height: 160px;
+              margin: 0 auto;
               box-sizing: border-box;
               padding: 16px;
               display: flex;
@@ -69,7 +67,7 @@
                 line-height: 65px;
                 font-size: 26px;
 
-                animation: scales 2s infinite;
+                // animation: scales 2s infinite;
               }
             }
           }

c_client/src/components/_tb_comps/SwiperView/SwiperView.md

+##### swiperView 滑动
+
+|    配置项    |   类型   |    描述     |    默认值    |  备注  |
+| :--------   | :-----:  | :--------: |   :-----:   | :---:|
+| swiperList    |   Array   |    滑动数组   |  [...]  | / |
+| disableTouch |   Boolean   |  是否可手动滑动   | false |  true 可滑动  false 不可滑动  |
+| autoplay   |   Boolean   |  是否自动切换   | false |/|
+| circular   |   Boolean   |  是否采用衔接滑动| false |/|
+| vertical   |   Boolean   |  是否垂直切换| false |/|
+| duration   |   Number   |  滑动动画时长| 1000 |/|
+| interval   |   Number   |  自动切换时间间隔| 1500 |/|
+| easingFunction|String   |  缓动动画类型| linear |'default','linear'  'easeInCubic'     'easeOutCubic'  'easeInOutCubic'|
+
+
+#### swiperList
+```json
+    [
+        {
+            "image":"",//图片链接,图片宽高需要在less中修改
+            "content":"",//图片描述
+            "hasBtn":"",//注入数据(是否有按钮)
+        },
+      	// ...
+    ]
+```
\ No newline at end of file

c_client/src/const.js

@@ -149,6 +149,7 @@ export const prizeList = [
       "https://yun.duiba.com.cn/spark/assets/240121a7e7e10a66ad0cfa99a8b3ba9631fc7855.png",
       name:'商品描述商品描述商品描述商品描述商品描述1',
       content:'商品描述商品描述商品描述商品描述商品描述1',
+      hasBtn:true
   },
   {
     image:

c_client/src/pages/index/index.jsx

@@ -189,10 +189,10 @@ function Index() {
       {/* <ScrollXView prizeList={prizeList} /> */}
 
       {/* swiper左右滑动 */}
-      {/* <SwiperView  swiperList={prizeList} vertical={false} disableTouch={true} /> */}
+      {/* <SwiperView  swiperList={prizeList} vertical={false} /> */}
 
       {/* 大转盘 */}
-      <View className={styles['rotate']} 
+      {/* <View className={styles['rotate']} 
         style={{
           width:`${600/100}rem`,
           height:`${600/100}rem`,
@@ -202,7 +202,7 @@ function Index() {
           alignItems:'center'
         }} >
         <RotateWheel {...rotateConfig} />
-      </View>
+      </View> */}
 
       {
         tasksModalVisible &&

c_client/src/pages/packageGood/browseGoods/browseGoods.jsx

@@ -8,7 +8,7 @@ import { TASK_CONFIG, BROSE_GOOD_TYPE } from '@/const'
 import { commonToast } from 'tbcc-sdk-ts/lib/core/tb'
 import styles from './browseGoods.module.less'
 
-const loadObj = {
+export const LOAD_OBJ = {
   PICTURE:'PICTURE',
   NUMBER:"NUMBER",
   DEFAULT:""
@@ -30,7 +30,7 @@ const browseConfig = {
     img: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_img@2x.png'
   },
   color: '#181818',
-  loadFlag: loadObj.PICTURE
+  loadFlag: LOAD_OBJ.PICTURE
 }
 
 const list = [