loadingbar

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

-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { View, Image, ScrollView } from '@tarojs/components'
 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'
 
 function GoodsList(props) {
     const {
@@ -16,10 +17,12 @@ function GoodsList(props) {
             no_collect: '//yun.dui88.com/taobaomini/clientCTest/collection_no_collect@2x.png',
             img: '//yun.dui88.com/taobaomini/clientCTest/goods_img@2x.png'
           },
-          color: '#181818'
+          color: '#181818',
+          loadFlag:"DEFAULT"
         },
         onOpenDetail,
-        onCompleteTask
+        onCompleteTask,
+        count
       } = props
 
     const goToGoodsDetail = async(item) => {
@@ -69,6 +72,25 @@ 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>
+            }
           </View>
         </ScrollView>
     )

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

@@ -6,6 +6,7 @@
     display: flex;
     flex-wrap: wrap;
   }
+  
   .content-item {
     width: 340px;
     height: 510px;
@@ -78,3 +79,35 @@
     background: #eee;
   }
 
+  .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;
+  }
+  
\ No newline at end of file

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'
+const LoadingBar = (props) => {
+    const {
+        bg='https://yun.duiba.com.cn/spark/assets/5a725b9e4ebf436a0a92c6317a5a4e47d87c8c1f.png',
+        bgTop='https://yun.duiba.com.cn/spark/assets/ccc405e28a5140d3aff9dff27b97fa5fb6bd7ff5.png'
+    } = props;
+
+    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>
+        </View>
+    )
+}
+export default LoadingBar
\ No newline at end of file

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

+.load_container{
+
+    .load_content{
+        width: 200px;
+        height: 80px;
+        margin: 0 auto;
+        overflow: hidden;
+      }
+      .load_bg,
+      .load_top{
+        width: 200px;
+        height: 60px;
+        position: absolute;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .load_top{
+        animation: move 15s linear forwards;
+      }
+}
+
+@keyframes move {
+    0%{
+      clip-path: inset(0% 0% 0% 0%);
+    }
+    99%{
+      opacity: 1;
+    }
+    100%{
+      clip-path: inset(0% 100% 0% 0%);
+      opacity: 0;
+    }
+  }
\ No newline at end of file

c_client/src/const.js

@@ -97,7 +97,7 @@ export const TASK_CONFIG = {
   },
   jumpLinkType: 1, // 1 跳转浏览15s 才算完成   2  跳转即算完成
   browseTime: 15, // 浏览时间
-  browseGoodType: 3,  // 1 浏览15s 才算完成 2 点击就算完成任务 3 浏览指定商品详情页 15s
+  browseGoodType: 1,  // 1 浏览15s 才算完成 2 点击就算完成任务 3 浏览指定商品详情页 15s
   showTaskType: 1,// 1 弹窗 2 列表
   orderGoodType: 1, // 1 集合页下单 2 跳转店铺 
 }