fix

package.json

@@ -38,45 +38,45 @@
     "@babel/runtime": "^7.7.7",
     "@tarojs/components": "3.6.26",
     "@tarojs/helper": "3.6.26",
-    "@tarojs/plugin-platform-weapp": "3.6.26",
+    "@tarojs/plugin-framework-react": "3.6.26",
     "@tarojs/plugin-platform-alipay": "3.6.26",
-    "@tarojs/plugin-platform-tt": "3.6.26",
-    "@tarojs/plugin-platform-swan": "3.6.26",
+    "@tarojs/plugin-platform-h5": "3.6.26",
     "@tarojs/plugin-platform-jd": "3.6.26",
     "@tarojs/plugin-platform-qq": "3.6.26",
-    "@tarojs/plugin-platform-h5": "3.6.26",
+    "@tarojs/plugin-platform-swan": "3.6.26",
+    "@tarojs/plugin-platform-tt": "3.6.26",
+    "@tarojs/plugin-platform-weapp": "3.6.26",
+    "@tarojs/react": "3.6.26",
     "@tarojs/runtime": "3.6.26",
     "@tarojs/shared": "3.6.26",
     "@tarojs/taro": "3.6.26",
-    "@tarojs/plugin-framework-react": "3.6.26",
     "mobx": "^4.8.0",
     "mobx-react": "^6.1.4",
-    "react-dom": "^18.0.0",
-    "@tarojs/react": "3.6.26",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@tarojs/cli": "3.6.26",
-    "@types/webpack-env": "^1.13.6",
-    "@types/react": "^18.0.0",
-    "postcss": "^8.4.18",
-    "webpack": "^5.78.0",
     "@tarojs/taro-loader": "3.6.26",
     "@tarojs/webpack5-runner": "3.6.26",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "react-refresh": "^0.11.0",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "babel-preset-taro": "3.6.26",
-    "eslint-config-taro": "3.6.26",
     "eslint": "^8.12.0",
-    "eslint-plugin-react": "^7.8.2",
+    "eslint-config-taro": "3.6.26",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "postcss": "^8.4.18",
+    "react-refresh": "^0.11.0",
     "stylelint": "9.3.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "typescript": "^4.1.0",
     "ts-node": "^10.9.1",
-    "@types/node": "^18.15.11"
+    "typescript": "^4.1.0",
+    "webpack": "^5.78.0"
   }
 }

src/app.config.ts

@@ -6,9 +6,7 @@ export default {
     'pages/classify/index',//分类
     'pages/my/index',//我的
     'pages/book/bookDetails/index',//书籍详情
-    // 'pages/task/index',//福利中心
     'pages/vipCore/index',//会员中心
-    // 'pages/bookCatalog/index',//书籍目录
     'pages/my/aboutUs/index',//关于我们
     'pages/my/contactService/index',//联系客服
     'pages/book/bookArticle/index',//书籍内容 阅读页

src/components/PupPetry/BookBox/BookboxRowSmall.tsx

@@ -24,7 +24,7 @@ function BookboxRowSmall(props: BookboxRowSmallProps) {
             setReadLog({ [bookId]: readLogId })
         }
     }
-    return <View className='book_box_row_small' onClick={click}>
+    return <View className='book_box_row_small' onClick={click} style={{ margin: 0 }}>
         <Navigator url={`/pages/book/bookArticle/index?bookId=${bookId}}`} hoverClass="none">
             <Image src={picUrl} className='img'></Image>
             <View className='right'>

src/components/SwipeAction/index.less

@@ -0,0 +1,37 @@
+.swipe-action {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+  
+  .swipe-action-content {
+    position: relative;
+    background-color: #fff;
+    z-index: 10;
+    transition: transform 0.3s ease;
+  }
+  
+  .swipe-action-buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .swipe-action-button {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 28px;
+    cursor: pointer;
+  }
+  .swipe-action-button-2{
+    width: 50%;
+  }
+  .swipe-action-button-1{
+    width: 100%;
+  }

src/components/SwipeAction/index.tsx

@@ -0,0 +1,92 @@
+import { View, Text } from '@tarojs/components';
+import './index.less';
+import { Component } from 'react';
+interface Props {
+    actions: {
+        onClick: (id: any) => void,//按钮事件
+        backgroundColor: string,//按钮自义定背景色
+        text: string,//按钮自定义文本
+        id: string | number,//要操作的数据ID
+    }[],//按钮目前最多两个配置 需配置更多按钮需要修改maxOffsetX的值swipe-action-button-1对应的宽度样式
+    children: any
+}
+/**
+ * 滑动操作参考书架
+ * */
+class SwipeAction extends Component<Props> {
+    state = {
+        offsetX: 0, // 用于控制滑动的偏移
+    };
+
+    startX = 0; // 触摸开始的 X 坐标
+    maxOffsetX = this.props?.actions?.length != 1 ? -150 : -75; // 操作按钮显示的最大偏移量
+
+    handleTouchStart = (e) => {
+        e.stopPropagation()
+        // 记录触摸起始位置
+        this.startX = e.touches[0].clientX;
+    };
+
+    handleTouchMove = (e) => {
+        e.stopPropagation()
+        // 计算滑动的距离
+        const moveX = e.touches[0].clientX - this.startX;
+        let offsetX = moveX;
+
+        // 限制滑动的范围
+        if (offsetX > 0) {
+            offsetX = 0;
+        } else if (offsetX < this.maxOffsetX) {
+            offsetX = this.maxOffsetX;
+        }
+
+        this.setState({ offsetX });
+    };
+
+    handleTouchEnd = (e) => {
+        e.stopPropagation()
+        // 判断滑动的距离，决定是否显示操作按钮
+        if (this.state.offsetX < this.maxOffsetX / 2) {
+            this.setState({ offsetX: this.maxOffsetX });
+        } else {
+            this.setState({ offsetX: 0 });
+        }
+    };
+    handlelongPress = () => {
+        this.setState({
+            offsetX: this.maxOffsetX
+        })
+    }
+    render() {
+        const { offsetX } = this.state;
+        const { actions, children } = this.props;
+        return (
+            <View className="swipe-action">
+                <View
+                    className="swipe-action-content"
+                    style={{ transform: `translateX(${offsetX}px)` }}
+                    onTouchStart={this.handleTouchStart}
+                    onTouchMove={this.handleTouchMove}
+                    onTouchEnd={this.handleTouchEnd}
+                    onLongPress={this.handlelongPress}
+                >
+                    {children}
+                </View>
+                <View className="swipe-action-buttons" style={offsetX != 0 ? { width: `${-this.maxOffsetX}px` } : { opacity: 0 }}>
+                    {actions.map((action, index) => (
+                        <View
+                            key={index}
+                            className={`swipe-action-button ${actions.length === 1 ? "swipe-action-button-1" : "swipe-action-button-2"}`}
+                            onClick={() => action.onClick && action.onClick(action.id)}
+                            style={{ backgroundColor: action.backgroundColor || '#ccc' }}
+                        >
+                            <Text>{action.text}</Text>
+                        </View>
+                    ))}
+                </View>
+            </View>
+        );
+    }
+}
+
+export default SwipeAction;

src/interceptor.ts

@@ -12,6 +12,8 @@ export interface ResData {
 }
 //拦截器
 let isOpne = false //弹窗是否开启
+// 因没有权限等待的请求
+let pendingRequests: any[] = [];
 // 请求拦截器
 const requestInterceptor = (chain) => {
     // 展示loding弹窗逻辑
@@ -23,11 +25,12 @@ const requestInterceptor = (chain) => {
     requestParams.url = requestParams.url?.match(/^http[s]?:\/\//ig) ? requestParams.url : app.apiUrl + requestParams.url
     // 是登录接口token换成inittoken
     let token = requestParams.url.match(/(\/jsCodeLogin)|(\/appComponent\/list)/ig) ? app.initToken : app.token
-    log("请求前拦截", token)
     // 不存在token并且不是init和login接口关闭请求
     if (!token && !requestParams.url.match(/(\/jsCodeLogin)|(\/loginInitialize)/ig)) {
         // 打印日志或执行一些清理操作
-        console.log("Token 无效，取消请求");
+        console.log("Token 无效，取消请求,并存入待请求列表，授权后重新请求");
+        // 存入待请求列表
+        pendingRequests.push(chain);
         // 返回一个被拒绝的Promise以中断请求
         return new Promise(() => { });
     }
@@ -70,9 +73,15 @@ const responseInterceptor = (chain) => {
                     setApp({ initToken: data.data.token })
                     // appInfoStore.actionAppInfo(data.data.appInfo)
                     let res: any = await api.getAppComponent()
-                    let user:any = await api.login()
-                    setApp({appName:data?.data?.appInfo?.appName})
-                    appInfoStore.setData({ appInfo: data.data.appInfo, appComponent: res.data.data,token:user.token})
+                    let user: any = await api.login()
+                    setApp({ appName: data?.data?.appInfo?.appName })
+                    appInfoStore.setData({ appInfo: data.data.appInfo, appComponent: res.data.data, token: user.token })
+                    // 检测待请求列表中是否存在请求，存在就执行请求
+                    while (pendingRequests.length > 0) {
+                        console.log("存在待请求")
+                        const pendingChain = pendingRequests.shift();
+                        Taro.request(pendingChain.requestParams);
+                    }
                 }
                 break;
             case 300:
@@ -80,6 +89,7 @@ const responseInterceptor = (chain) => {
                 setApp({ token: "" })
                 await api.loginInit(app.appId)
                 // 重新执行当前请求
+                console.log("登录后重新请求===>")
                 const newRequestParams = chain.requestParams;
                 return Taro.request(newRequestParams).then(newResponse => newResponse.data);
                 break;

src/pages/bookrack/index.tsx

@@ -1,17 +1,14 @@
 import { useEffect, useState } from 'react'
-import { ScrollView, View } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import Taro, { useDidHide, useDidShow } from '@tarojs/taro'
-import { eventCenter, getCurrentInstance } from '@tarojs/taro'
 import { observer, inject } from 'mobx-react'
-// import { getlikebooks, readLog, pushAdLog } from '../../api'
-import styles from './index.module.less'
-
 //==========components组件引用========================
 import TopNavBar from '@src/components/TopNavBar/index'
 import ScrollViewHoc from '@src/components/ScrollView'
 import BookboxRowSmall from '@src/components/PupPetry/BookBox/BookboxRowSmall'
 import { Store } from '@src/app'
 import useApi from '@src/Hook/useApi'
+import SwipeAction from '@src/components/SwipeAction'
 
 
 interface Props {
@@ -23,6 +20,7 @@ interface ContentData {
     size: number,
     records: any[]
 }
+
 const Index: React.FC<Props> = ({ store }) => {
     const { indexStore } = store
     const { bookrackList } = useApi(store.appInfoStore)
@@ -33,6 +31,15 @@ const Index: React.FC<Props> = ({ store }) => {
         records: []
     })
     const [pageShow, setPageShow] = useState(false)
+    const actions = (id) => {
+        return [
+            {
+                text: '删除', backgroundColor: '#f44336', id, onClick: (id) => {
+                    console.log("删除", id)
+                }
+            },
+        ]
+    };
     useEffect(() => {
         if (pageShow) {
             getList({ pageNum: 1, pageSize: 20 })
@@ -84,12 +91,14 @@ const Index: React.FC<Props> = ({ store }) => {
             navHeight={indexStore.navHeight}
 
         >
-            <View className={styles.index}>
+            <View className={"index"}>
                 {
                     readData?.records?.map((item: any, index: number) => {
-                        return <>
-                            <View key={index} > <BookboxRowSmall {...item} /></View>
-                        </>
+                        return <View key={item.bookId} style={{ margin: '30rpx' }}>
+                            <SwipeAction actions={actions(item.bookId)}>
+                                <BookboxRowSmall {...item} />
+                            </SwipeAction>
+                        </View>
                     })
                 }
             </View>