fix

src/app.tsx

@@ -8,6 +8,8 @@ import indexStore, { IndexStore } from './store/index'
 import Book, { BookStore } from './store/book'
 import appInfoStore, { AppInfoStore } from './store/appInfo'
 import classifyStore, { ClassifyStore } from './store/classIfy'
+import modalStore from './store/modalStore'
+
 // ======引入全局配置======
 import { initApp, setApp } from './config'
 // ======引入拦截器=========
@@ -22,18 +24,24 @@ export interface Store {
   indexStore: IndexStore,
   bookStore: BookStore,
   classifyStore: ClassifyStore,
+  modalStore:{
+    visible: boolean,    // 弹窗开关
+    showModal:()=>void,
+    hideModal:()=>void
+  }
 }
 const store: Store = {
   userInfoStore,
   indexStore,
   appInfoStore,
   bookStore: Book,
-  classifyStore
+  classifyStore,
+  modalStore
 }
 class App extends Component {
 
   //每次打开小程序触发，后台切入不算
-  async onLaunch(options) {
+   onLaunch(options) {
   }
   componentDidMount() {
     console.log("APPcomponentDidMount")
@@ -64,9 +72,10 @@ class App extends Component {
   componentDidCatchError() { }
 
   render() {
+    console.log("1111",1111)
     return <Provider store={store}>
       {(this.props as ProviderProps).children}
-    </Provider>
+    </Provider >
   }
 }
 

src/components/PupPetry/BannerBox/index.tsx

@@ -1,13 +1,10 @@
 import { Swiper, SwiperItem, Image, Navigator } from "@tarojs/components";
 import React from "react";
 import './index.less'
+import { IndexStore } from "@src/store";
 /**轮播图 */
-interface Item {
-    picUrl: string,
-    bookId: string
-}
 interface BannerBoxProps {
-    data?: Item[]
+    data?: IndexStore["indexBanners"]
 }
 function BannerBox(props: BannerBoxProps) {
     const { data } = props
@@ -21,11 +18,11 @@ function BannerBox(props: BannerBoxProps) {
         autoplay
     >
         {
-            data?.map((item: Item, index: number) => {
-                let {bookId,picUrl} = item
+            data?.map((item, index: number) => {
+                let { bookId,bannerType, bannerImage,activityPagePath } = item
                 return <SwiperItem key={index}>
-                    <Navigator url={'/pages/book/bookDetails/index?book_id='+bookId} hoverClass="none">
-                        <Image src={picUrl} className='img' />
+                    <Navigator url={bannerType === 0 ?'/pages/book/bookDetails/index?bookId=' + bookId : activityPagePath} hoverClass="none">
+                        <Image src={bannerImage} className='img' />
                     </Navigator>
                 </SwiperItem>
             })

src/components/PupPetry/BookBox/BookboxRowSmall.tsx

@@ -35,7 +35,7 @@ function BookboxRowSmall(props: BookboxRowSmallProps) {
                         <View className='bottom'>
                             {
                                 true ? <>
-                                    <Text className='time'>{123}</Text>
+                                    <Text className='time'>{new Date().toLocaleDateString()}</Text>
                                     {/* <Text className='section'>{chapter_name}</Text> */}
                                 </>
                                     :

src/components/PupPetry/BookHead/index.tsx

@@ -15,21 +15,22 @@ type props = {
     imgUrl?: string,         // 副标题的图片url
     fontSize?: number,       // 标题字体大小
     imgWidth?: number        // 图标宽度
+    showBtn?: boolean,
 }
 
 const BookHead = (props: props) => {
-    let { title, fitTitle, fitOnBack, fitIsOnBack = true, imgUrl, fontSize, imgWidth } = props
+    let { title, fitTitle, fitOnBack, fitIsOnBack = true, imgUrl, fontSize, imgWidth, showBtn = true } = props
     return <View className="Bookheader">
-        <View className="title" style={{fontSize: fontSize ? Taro.pxTransform(fontSize) : Taro.pxTransform(40)}}>{title}</View>
-        <View className="fitTitle" onClick={fitIsOnBack ? fitOnBack : ()=>{}}>
+        <View className="title" style={{ fontSize: fontSize ? Taro.pxTransform(fontSize) : Taro.pxTransform(40) }}>{title}</View>
+        {showBtn && <View className="fitTitle" onClick={fitIsOnBack ? fitOnBack : () => { }}>
             {
                 fitTitle && <Text>{fitTitle}</Text>
             }
             {
-                imgUrl && <Image src={imgUrl} mode="widthFix" style={imgWidth ? {width: Taro.pxTransform(imgWidth)} : {}}/>
+                imgUrl && <Image src={imgUrl} mode="widthFix" style={imgWidth ? { width: Taro.pxTransform(imgWidth) } : {}} />
             }
-        </View>
-        
+        </View>}
+
     </View>
 }
 

src/components/PupPetry/BookHotTabs/index.tsx

@@ -9,12 +9,12 @@ import './index.less'
 type props = {
     hotValue: {
         name: string,
-        id: string,
+        id: number,
         color?: string,     // 选中字体颜色
         backColor?: string  // 选中背景颜色
     }[],
     hotTabIndex?: number,  // tab选中第几个  默认1
-    onBack?: (value: string) => void,     // 切换回调函数
+    onBack?: (value: number) => void,     // 切换回调函数
     scroll?: boolean
 }
 
@@ -22,7 +22,7 @@ const BookHotTabs = (props: props) => {
     let { hotValue, hotTabIndex = 1, onBack, scroll = true } = props
 
     let [stateIndex, setStateIndex] = useState<number>(hotTabIndex)
-    let selectHandle = useCallback((value: string, index: number) => {
+    let selectHandle = useCallback((value: number, index: number) => {
         setStateIndex(index)
         onBack?.(value)
         indexStore.setData({ indexCategoryId: value })

src/components/TopNavBar/index.tsx

@@ -32,6 +32,7 @@ type Props = {
 
 
 function CustomNavbar(WrappedComponent, props: Props) {
+    console.log(props)
     let { children, title, color, fontSize, backgroundColor, tab = false, tabVal, search = false, searchBack = false, isToBack = false, isReloadBook = false } = props
     interface Page {
         props: {

src/components/bottomModal/index.less

@@ -0,0 +1,32 @@
+.modal {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.55);
+    display: flex;
+    align-items: flex-end;
+
+    .box {
+        width: 100%;
+        min-height: 100rpx;
+        background: #FFFFFF;
+        border-radius: 30rpx 30rpx 0rpx 0rpx;
+        padding: 30rpx;
+        box-sizing: border-box;
+        position: relative;
+        .clear {
+            width: 48rpx;
+            height: 48rpx;
+            position: absolute;
+            top: 18rpx;
+            right: 20rpx;
+            background: url('../../icon/clear1.png') no-repeat;
+            background-size: 100%;
+        }
+
+    }
+}

src/components/bottomModal/index.tsx

@@ -0,0 +1,35 @@
+import { View } from '@tarojs/components'
+import { useObserver } from 'mobx-react';
+import modalStore from '@src/store/modalStore';
+import './index.less'
+import Vip from './vip';
+import Shubi from './shubi';
+
+interface Props {
+    type?: 'vip' | 'shubi'
+}
+
+const GlobalModal: React.FC<Props> = (props) => {
+    let { type = "shubi" } = props
+    return useObserver(() => {
+        let { visible } = modalStore
+        const hide = (e) => {
+            e.stopPropagation()
+            modalStore.hideModal()
+        }
+        return <>
+            {visible && <View className="modal" onClick={hide}>
+                <View className="box" onClick={(e) => { e.stopPropagation() }}>
+                    {/* 关闭 */}
+                    <View className='clear' onClick={hide}></View>
+                    {/* Vip */}
+                    {type === 'vip' && <Vip />}
+                    {/* 书币 */}
+                    {type === 'shubi' && <Shubi />}
+                </View>
+            </View>}
+        </>
+    })
+}
+
+export default GlobalModal

src/components/bottomModal/shubi/index.less

@@ -0,0 +1,29 @@
+.shubi {
+    .shubi_title {
+        width: 252rpx;
+        height: 44rpx;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 32rpx;
+        color: #333333;
+        line-height: 38rpx;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        margin-bottom: 20rpx;
+    }
+
+    .shubi_info {
+        width: 248rpx;
+        height: 40rpx;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #333333;
+        line-height: 33rpx;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        margin-bottom: 30rpx;
+    }
+}

src/components/bottomModal/shubi/index.tsx

@@ -0,0 +1,13 @@
+import { View } from "@tarojs/components";
+import './index.less'
+import ShubiBox from "@src/components/pay/shubi";
+function Shubi() {
+    return <View className="shubi">
+        <View className="shubi_title">订阅本章：11书币</View>
+        <View className="shubi_info">余额：0书币+0赠币</View>
+        <ShubiBox data={
+            [100, 200, 300, 400, 500, 600]
+        } />
+    </View>
+}
+export default Shubi

src/components/bottomModal/vip/index.less

@@ -0,0 +1,16 @@
+.shubi_title {
+    width: 426rpx;
+    height: 44rpx;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #333333;
+    line-height: 38rpx;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    margin-bottom: 30rpx;
+    text{
+        color: #FF415B;
+    }
+}

src/components/bottomModal/vip/index.tsx

@@ -0,0 +1,10 @@
+import { View, Text } from "@tarojs/components";
+import './index.less'
+import VipBox from "@src/components/pay/vip";
+function Vip() {
+    return <View>
+        <View className="shubi_title">会员本书免费读，可省<Text>50.11</Text>元</View>
+        <VipBox data={[1, 2, 3, 4, 5, 6]} />
+    </View>
+}
+export default Vip

src/components/pay/shubi/index.less

@@ -0,0 +1,107 @@
+.shubi_box {
+    overflow: hidden;
+
+    .shubi_box_k {
+        width: 218rpx;
+        height: 172rpx;
+        background: #F5F5F5;
+        border-radius: 10rpx 10rpx 10rpx 10rpx;
+        box-sizing: border-box;
+        overflow: hidden;
+        float: left;
+        margin-right: 20rpx;
+        margin-bottom: 20rpx;
+
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+
+        .shubi_box_num {
+            height: 56rpx;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 40rpx;
+            color: #333333;
+            line-height: 47rpx;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+            margin-top: 28rpx;
+        }
+
+        .shubi_box_price {
+            height: 34rpx;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #999999;
+            line-height: 28rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            margin-bottom: 14rpx;
+            text-align: center;
+        }
+
+        .shubi_box_give {
+            width: 216rpx;
+            height: 40rpx;
+            background: #FFD6DC;
+            border-radius: 0rpx 0rpx 10rpx 10rpx;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #FF2442;
+            line-height: 40rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            text-align: center;
+        }
+    }
+
+    .ac {
+        width: 216rpx;
+        height: 172rpx;
+        background: rgba(255, 145, 160, 0.15);
+        border-radius: 10rpx 10rpx 10rpx 10rpx;
+        border: 2rpx solid #FF2442;
+
+        .shubi_box_give {
+            background: rgba(255, 0, 35, 0.8);
+            color: #FFFFFF;
+        }
+    }
+}
+
+.shubi_box_btn {
+    width: 690rpx;
+    height: 86rpx;
+    background: linear-gradient(90deg, #FF2442 0%, #FF5E74 100%);
+    border-radius: 48rpx 48rpx 48rpx 48rpx;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #FFFFFF;
+    line-height: 86rpx;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    margin-top: 20rpx;
+}
+
+.shubi_box_gz {
+    width: 438rpx;
+    height: 40rpx;
+    border-radius: 0rpx 0rpx 0rpx 0rpx;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #999999;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    display: flex;
+    align-items: center;
+    margin: 16rpx auto 70rpx;
+}

src/components/pay/shubi/index.tsx

@@ -0,0 +1,34 @@
+import { Radio, RadioGroup, View } from "@tarojs/components";
+import './index.less'
+import { useState } from "react";
+type Props = {
+    data: any[]
+}
+function ShubiBox(props: Props) {
+    let { data } = props
+    let [eq, setEq] = useState(0)
+    let [ok, setOk] = useState(false)
+    return <>
+        <View className="shubi_box">
+            {
+                data?.map((item, index) => {
+                    return <View className={`shubi_box_k ${eq === index ? "ac" : ""}`} onClick={() => { setEq(index) }}>
+                        <View className="shubi_box_num">100</View>
+                        <View className="shubi_box_price">1元</View>
+                        <View className="shubi_box_give">赠100书币</View>
+                    </View>
+                })
+            }
+        </View>
+        <View className="shubi_box_btn" onClick={() => { setOk(true) }}>确认协议并以1元充值</View>
+        <View className="shubi_box_gz">
+            <RadioGroup onChange={(e: any) => {
+                setOk(true)
+            }}>
+                <Radio checked={ok} value='选中' >已阅读并同意《充值规则》</Radio>
+            </RadioGroup>
+
+        </View>
+    </>
+}
+export default ShubiBox

src/components/pay/vip/index.less

@@ -0,0 +1,111 @@
+.vip_box {
+    height: 266rpx;
+    width: 100%;
+    white-space: nowrap;
+
+    .vip_box_k {
+        width: 200rpx;
+        height: 248rpx;
+        border-radius: 12rpx 12rpx 12rpx 12rpx;
+        border: 2rpx solid #D9D9D9;
+        display: inline-block;
+        margin-right: 20rpx;
+
+        .vip_box_title {
+            width: 100%;
+            height: 44rpx;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 32rpx;
+            color: #333333;
+            line-height: 44rpx;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+            margin: 36rpx 0 12rpx;
+        }
+
+        .vip_box_num {
+            width: 100%;
+            height: 62rpx;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 600;
+            font-size: 44rpx;
+            color: #8D6022;
+            line-height: 62rpx;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+        }
+
+        .vip_box_price {
+            height: 34rpx;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #999999;
+            line-height: 34rpx;
+            text-align: center;
+            font-style: normal;
+            text-decoration-line: line-through;
+            text-transform: none;
+        }
+
+        .vip_box_give {
+            margin-top: 18rpx;
+            width: 200rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            background: linear-gradient( 90deg, #FCDDAF 0%, #ECC284 100%);
+            border-radius: 0rpx 0rpx 12rpx 12rpx;
+            text-align: center;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #8D6022;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+        }
+    }
+
+    .ac {
+        width: 200rpx;
+        height: 248rpx;
+        background: rgba(238, 195, 134, 0.19);
+        border-radius: 12rpx 12rpx 12rpx 12rpx;
+        border: 2rpx solid #F0A344;
+    }
+}
+
+.vip_box_btn {
+    width: 690rpx;
+    height: 86rpx;
+    background: linear-gradient(90deg, #EEC78C 0%, #E4AB56 100%);
+    border-radius: 60rpx 60rpx 60rpx 60rpx;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #4D3007;
+    line-height: 86rpx;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    margin-top: 20rpx;
+}
+
+.vip_box_gz {
+    width: 455rpx;
+    height: 40rpx;
+    border-radius: 0rpx 0rpx 0rpx 0rpx;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #999999;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    display: flex;
+    align-items: center;
+    margin: 16rpx auto 70rpx;
+}

src/components/pay/vip/index.tsx

@@ -0,0 +1,39 @@
+import { Radio, RadioGroup, ScrollView, View } from "@tarojs/components";
+import './index.less'
+import { useState } from "react";
+type Props = {
+    data: any[]
+}
+function VipBox(props: Props) {
+    let { data } = props
+    let [eq, setEq] = useState(0)
+    let [ok, setOk] = useState(false)
+    return <>
+        <ScrollView
+            className='vip_box'
+            scrollX={true}
+            scrollWithAnimation
+        >
+            {
+                data?.map((item, index) => {
+                    return <View className={`vip_box_k ${eq === index ? "ac" : ""}`} onClick={() => { setEq(index) }}>
+                         <View className="vip_box_title">月卡</View>
+                        <View className="vip_box_num">100元</View>
+                        <View className="vip_box_price">200元</View>
+                        <View className="vip_box_give">0.33元/天</View>
+                    </View>
+                })
+            }
+        </ScrollView>
+        <View className="vip_box_btn" onClick={() => { setOk(true) }}>确认协议并支付8元</View>
+        <View className="vip_box_gz">
+            <RadioGroup onChange={(e: any) => {
+                setOk(true)
+            }}>
+                <Radio checked={ok} value='选中' >已阅读并同意《会员服务协议》</Radio>
+            </RadioGroup>
+
+        </View>
+    </>
+}
+export default VipBox

src/pages/book/BookArticle/index.less

@@ -1,11 +1,13 @@
 @import "../../../globaStyle.less";
-.indexAd{
+
+.indexAd {
   display: flex;
   justify-content: center;
   margin-top: 20px;
   border-radius: 20px;
   overflow: hidden;
 }
+
 .book_article {
   width: 100%;
   padding: 30px 30px 50px;
@@ -13,7 +15,8 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  .addBean{
+
+  .addBean {
     position: fixed;
     width: 90px;
     height: 44px;
@@ -28,6 +31,7 @@
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #FFFFFF;
+
     &>image {
       width: 28px;
       height: 28px;
@@ -35,7 +39,8 @@
       margin-top: 5px;
     }
   }
-  .myBead{
+
+  .myBead {
     position: fixed;
     top: 208px;
     right: -182px;
@@ -52,16 +57,19 @@
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #FFFFFF;
+
     &>image {
       width: 58px;
       height: 58px;
       margin: 13px 0 13px 13px;
     }
-    &>text{
+
+    &>text {
       margin-left: 6px;
     }
   }
-  .unlockingModel{
+
+  .unlockingModel {
     position: fixed;
     width: 100%;
     height: 100vh;
@@ -71,6 +79,7 @@
     right: 0;
     z-index: 50;
     display: none;
+
     .back {
       position: absolute;
       top: 0;
@@ -79,7 +88,8 @@
       right: 0;
       background-color: rgba(85, 85, 85, .35);
     }
-    .con{
+
+    .con {
       width: 654px;
       height: 390px;
       background: #FFFFFF;
@@ -91,7 +101,8 @@
       transform: translate(-50%, -50%);
       padding: 60px 0;
       box-sizing: border-box;
-      .title{
+
+      .title {
         font-size: 44px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 600;
@@ -99,7 +110,8 @@
         text-align: center;
         margin-bottom: 36px;
       }
-      .ts{
+
+      .ts {
         font-size: 36px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
@@ -107,7 +119,8 @@
         text-align: center;
         margin-bottom: 42px;
       }
-      .bt{
+
+      .bt {
         width: 334px;
         height: 80px;
         background: #4F88E3;
@@ -119,8 +132,10 @@
       }
     }
   }
+
   .header {
     margin-bottom: 44px;
+
     .up {
       width: 120px;
       height: 56px;
@@ -131,6 +146,7 @@
       line-height: 56px;
       margin-bottom: 36px;
     }
+
     .bt {
       .title {
         width: 100%;
@@ -139,16 +155,19 @@
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: @fw_400;
         line-height: 60px;
+
         &:nth-child(1) {
           margin-right: 46px;
         }
       }
     }
+
     .btns {
       display: flex;
       flex-flow: row nowrap;
       justify-content: space-between;
       margin-bottom: 30px;
+
       .left {
         width: 186px;
         height: 52px;
@@ -156,6 +175,7 @@
         border: 2px solid #949bab;
         position: relative;
         line-height: 52px;
+
         &::before {
           content: "";
           height: 52px;
@@ -167,6 +187,7 @@
           left: 50%;
           transform: translateX(-50%);
         }
+
         text {
           width: 50%;
           float: left;
@@ -177,6 +198,7 @@
           color: @cl_94;
         }
       }
+
       .right {
         text {
           width: 128px;
@@ -190,6 +212,7 @@
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: @fw_400;
           color: @cl_94;
+
           &:nth-child(1) {
             margin-right: 30px;
           }
@@ -197,7 +220,8 @@
       }
     }
   }
-  .centent{
+
+  .centent {
     flex: 1;
 
     // .cententMarginTop{
@@ -207,58 +231,72 @@
     //   margin-bottom: 20px;
     // }
   }
+
   .pre {
     display: block;
     margin-bottom: 50px;
   }
-  .nextAdContet{
+
+  .nextAdContet {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
   }
+
   .pre_15 {
     font-size: @fs_30;
     text-indent: @fs_30 * 2;
   }
+
   .pre_17 {
     font-size: @fs_34;
     text-indent: @fs_34 * 2;
   }
+
   .pre_19 {
     font-size: @fs_38;
     text-indent: @fs_38 * 2;
   }
+
   .pre_21 {
     font-size: @fs_42;
     text-indent: @fs_42 * 2;
   }
+
   .pre_23 {
     font-size: @fs_46;
     text-indent: @fs_46 * 2;
   }
+
   .pre_25 {
     font-size: @fs_50;
     text-indent: @fs_50 * 2;
   }
+
   .pre_27 {
     font-size: @fs_54;
     text-indent: @fs_54 * 2;
   }
+
   .pre_29 {
     font-size: @fs_58;
     text-indent: @fs_58 * 2;
   }
+
   .lh_72 {
     line-height: @lh_72;
   }
+
   .lh_84 {
     line-height: @lh_84;
   }
+
   .lh_96 {
     line-height: @lh_96;
   }
+
   .botton {
     width: 690px;
     height: 96px;
@@ -270,6 +308,7 @@
     border-radius: 48px;
     border: 0;
   }
+
   .bottonVIP {
     display: flex;
     justify-content: center;
@@ -277,9 +316,11 @@
     background-color: #FF2442 !important;
     color: #FFFFFF;
   }
+
   .VIPCON {
     position: relative;
-    .bubble{
+
+    .bubble {
       position: absolute;
       width: 120px;
       height: 59px;
@@ -293,12 +334,13 @@
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #FFFFFF;
-      .ears{
+
+      .ears {
         position: absolute;
         right: 10px;
         bottom: -19px;
-        width:0;
-        height:0;
+        width: 0;
+        height: 0;
         border-top: 12px solid #FE8D48;
         border-left: 16px solid transparent;
         border-right: -10px solid transparent;
@@ -306,8 +348,9 @@
       }
     }
   }
+
   .beanBt {
-    .top{
+    .top {
       height: 90px;
       background: #4C4C4C;
       border-radius: 48px;
@@ -318,7 +361,8 @@
       text-align: center;
       line-height: 90px;
     }
-    .bottom{
+
+    .bottom {
       display: flex;
       justify-content: space-between;
       margin-top: 50px;
@@ -328,6 +372,7 @@
       color: #4C4C4C;
     }
   }
+
   .cir {
     width: 48px;
     height: 48px;
@@ -338,7 +383,8 @@
     line-height: 48px;
     align-items: center;
     margin-right: 10px;
-    .triangle-right{
+
+    .triangle-right {
       width: 0;
       height: 0;
       border-top: 11px solid transparent;
@@ -346,44 +392,55 @@
       border-bottom: 11px solid transparent;
     }
   }
-  .action{
+
+  .action {
     background: #F6F9FF;
   }
 }
+
 .bg_b {
   background-color: @bg_F5;
 }
+
 .bg_l {
   background-color: @bg_D6E;
 }
+
 .bg_h {
   background-color: @bg_F5E;
 }
+
 .bg_hh {
   background-color: @bg_36;
 }
+
 .cl_h {
   color: @cl_333;
 }
+
 .cl_b {
   color: @cl_C8;
 }
+
 .cl_e5 {
   color: #5e6065 !important;
 }
+
 .cl_d6 {
   color: #d6d9e2 !important;
 }
-.book_article.bg_hh{
-  .botton{
+
+.book_article.bg_hh {
+  .botton {
     background: #2A2B2C;
   }
-  .action{
+
+  .action {
     background: #E2E2E2;
   }
 }
 
-.fbAd{
+.fbAd {
   position: fixed;
   left: 20px;
   bottom: 220px;
@@ -392,7 +449,7 @@
   overflow: hidden;
 }
 
-.vipPop{
+.vipPop {
   position: fixed;
   width: 100%;
   height: 100vh;
@@ -401,8 +458,9 @@
   bottom: 0;
   right: 0;
   z-index: 1000;
+
   // display: none;
-  .back{
+  .back {
     position: absolute;
     width: 100%;
     height: 100vh;
@@ -412,7 +470,8 @@
     bottom: 0;
     right: 0;
   }
-  .vpCon{
+
+  .vpCon {
     position: absolute;
     width: 100%;
     bottom: 0;
@@ -422,13 +481,15 @@
     background: #FFFFFF;
     border-radius: 30px 30px 0px 0px;
     padding-bottom: 68px;
-    .vpTitle{
+
+    .vpTitle {
       font-size: 32px;
       font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 600;
       color: #333333;
       padding: 30px;
-      .title{
+
+      .title {
         font-size: 32px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 600;
@@ -436,28 +497,35 @@
         display: flex;
         flex-direction: column;
       }
-      .sm{
+
+      .sm {
         font-size: 24px;
         color: #707070;
       }
     }
-    .size36{
+
+    .size36 {
       font-size: 36px;
     }
-    .vpline{
+
+    .vpline {
       height: 2px;
       background: #EEEEEE;
     }
-    .lookVideoIs{
+
+    .lookVideoIs {
       margin: 10px 14px 28px;
       position: relative;
-      .lvBack{
+
+      .lvBack {
         width: 100%;
-        image{
+
+        image {
           width: 100%;
         }
       }
-      .lvContent{
+
+      .lvContent {
         position: absolute;
         top: 0;
         left: 0;
@@ -468,24 +536,28 @@
         align-items: center;
         padding: 0 34px 0 42px;
         box-sizing: border-box;
-        image{
+
+        image {
           width: 104px;
           margin-right: 12px;
         }
-        .sm{
+
+        .sm {
           flex: 1;
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           margin-right: 12px;
-          .top{
+
+          .top {
             font-size: 36px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #FFF;
           }
         }
-        .bt{
+
+        .bt {
           width: 158px;
           height: 60px;
           background: #FFFFFF;
@@ -499,7 +571,8 @@
         }
       }
     }
-    .lookVideo{
+
+    .lookVideo {
       margin: 10px 30px 50px;
       background: #FFF0F2;
       border-radius: 10px;
@@ -510,23 +583,27 @@
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      image{
+
+      image {
         width: 104px;
         margin-right: 12px;
       }
-      .sm{
+
+      .sm {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-around;
         margin-right: 12px;
-        .top{
+
+        .top {
           font-size: 32px;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #FF0D2E;
           // margin-bottom: 12px;
         }
+
         .bottom {
           font-size: 28px;
           font-family: PingFangSC-Regular, PingFang SC;
@@ -534,7 +611,8 @@
           color: #666666;
         }
       }
-      .bt{
+
+      .bt {
         width: 158px;
         height: 60px;
         background: #FF2442;
@@ -547,29 +625,35 @@
         color: #FFFFFF;
       }
     }
-    .wid10{
+
+    .wid10 {
       height: 10px;
     }
-    .ktVip{
+
+    .ktVip {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 8px;
-      view{
+
+      view {
         font-size: 28px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #666666;
-        image{
+
+        image {
           width: 20px;
         }
       }
     }
-    .selectVip{
+
+    .selectVip {
       display: flex;
       justify-content: space-between;
       margin: 0 30px;
-      &>view{
+
+      &>view {
         width: 218px;
         height: 196px;
         border-radius: 10px;
@@ -579,40 +663,46 @@
         align-items: center;
         justify-content: center;
         position: relative;
-        .top{
+
+        .top {
           font-size: 28px;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 600;
           color: #333333;
         }
-        .center{
+
+        .center {
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #FF2442;
           display: flex;
           align-items: flex-end;
-          text{
+
+          text {
             font-size: 24px;
             margin-bottom: 4px;
             margin-right: 6px;
           }
+
           view {
             font-size: 36px;
           }
         }
+
         .bottom {
           font-size: 24px;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #666666;
         }
-        .cz{
+
+        .cz {
           position: absolute;
           width: 110px;
           height: 45px;
           right: -2px;
           top: -21px;
-          background: linear-gradient(to right, #FF957D , #FF4C4B);
+          background: linear-gradient(to right, #FF957D, #FF4C4B);
           border-bottom-left-radius: 10px;
           border-bottom-right-radius: 5px;
           border-top-right-radius: 10px;
@@ -620,12 +710,14 @@
           display: flex;
           justify-content: center;
           align-items: center;
-          image{
+
+          image {
             width: 28px;
             height: 32px;
             margin-right: 5px;
           }
-          text{
+
+          text {
             font-size: 28px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
@@ -633,12 +725,14 @@
           }
         }
       }
+
       .select {
         background: #FFF0F2;
         border: 2px solid #FF2442;
       }
     }
-    .openingBt{
+
+    .openingBt {
       margin: 30px 30px 0;
       height: 86px;
       line-height: 86px;
@@ -651,12 +745,46 @@
     }
   }
 }
+
 .text-with-lines {
   position: relative;
   text-align: center;
   color: #FF2442;
-  font-size: 32px;  /* 可根据需要调整字体大小 */
+  font-size: 32px;
+  /* 可根据需要调整字体大小 */
 }
+
+.vip_btn {
+  width: 690rpx;
+  height: 86rpx;
+  line-height: 86rpx;
+  text-align: center;
+  background: linear-gradient(90deg, #FF2442 0%, #FF5E74 100%);
+  border-radius: 48rpx 48rpx 48rpx 48rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  font-size: 32rpx;
+  color: #FFFFFF;
+  font-style: normal;
+  text-transform: none;
+  margin:30rpx 0 ;
+}
+
+.shubi_btn {
+  width: 690rpx;
+  height: 86rpx;
+  line-height: 86rpx;
+  text-align: center;
+  background: #FFE7EB;
+  border-radius: 48rpx 48rpx 48rpx 48rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  font-size: 32rpx;
+  color: #FF415B;
+  font-style: normal;
+  text-transform: none;
+}
+
 // .text-with-lines  {
 //   position: relative;
 //   text-align: center;
@@ -669,8 +797,10 @@
   content: '';
   position: absolute;
   top: 50%;
-  width: 25%;  /* 线条的宽度，可根据需要调整 */
-  border-top: 2px dashed #FF91A0 ;  /* 设置为虚线，并定义颜色 */
+  width: 25%;
+  /* 线条的宽度，可根据需要调整 */
+  border-top: 2px dashed #FF91A0;
+  /* 设置为虚线，并定义颜色 */
   transform: translateY(-50%);
 }
 

src/pages/book/BookArticle/index.tsx

@@ -10,6 +10,7 @@ import BookConfigPuP from '@src/components/bookConfigPup';
 import { BookStore } from '@src/store/book';
 import useApi from '@src/Hook/useApi';
 import { getReadLog, setReadLog } from '@src/utils/loginSto';
+import GlobalModal from '@src/components/bottomModal';
 
 interface Config {
     size: 'pre_15' | 'pre_17' | 'pre_19' | 'pre_21' | 'pre_23' | 'pre_25' | 'pre_27' | 'pre_29' | any;
@@ -22,7 +23,8 @@ type PageStateProps = {
     store: {
         bookStore: BookStore,
         indexStore,
-        appInfoStore
+        appInfoStore,
+        modalStore
     }
 };
 
@@ -30,7 +32,7 @@ interface BookArticleProps extends PageStateProps { }
 
 const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
     const [isLoad, setIsLoad] = useState(false)
-    const { bookStore, indexStore, appInfoStore } = store
+    const { bookStore, indexStore, appInfoStore, modalStore } = store
     const [showPay, setShowPay] = useState(false)//需要付费展示
     const { openBookData } = bookStore
     const [bookConfig, setBookConfig] = useState<Config>({ size: 'pre_21', off_on: true, bg: 'bg_b', lh: 'lh_72' });
@@ -39,6 +41,7 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
     const [currentScrollId, setCurrentScrollId] = useState('');
     const newReadLogIdRef = useRef("");
     const readLogInterval = useRef<NodeJS.Timeout>()
+    const [payType, setPayType] = useState<"shubi" | "vip">("shubi")
     // 页面显示的操作请求
     useEffect(() => {
         // ComponentDidMount
@@ -55,6 +58,7 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
         } catch (e) {
             console.error('Error loading book config:', e);
         }
+        onReport()
         //假如存在阅读记录获取对应章节的条数
         let readLogId = getReadLog(openBookData?.bookId)
         getBookContent({ pageNum: 1, pageSize: readLogId ? Number(readLogId?.split('-')[1]) : 2 }).then(res => {
@@ -63,6 +67,12 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
             setCurrentScrollId(readLogId)
         })
     }, []);
+    // 上报阅读
+    const onReport = () => {
+        let scene = indexStore.scene
+        let { startReadBook } = useApi(appInfoStore)
+        startReadBook({ bookId: bookStore.openBookData?.bookId, readCondition: scene })
+    }
     // 页面卸载的操作
     useEffect(() => {
         reportRead()
@@ -183,6 +193,12 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
             }
         });
     };
+    //支付弹窗
+    const payBtn = (e, type) => {
+        e.stopPropagation()
+        setPayType(type)
+        modalStore.showModal()
+    }
     const { size, bg, off_on, lh } = bookConfig;
     return (
         <ScrollView
@@ -246,10 +262,16 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
                             </View> : null
                         })
                     }
-                    {showPay && <View className='text-with-lines' >剩余内容需付费解锁</View>}
+                    {showPay && <View>
+                        <View className='text-with-lines' >剩余内容需付费解锁</View>
+                        <View className='vip_btn' onClick={(e) => { payBtn(e, "vip") }}>开通会员，本书免费读</View>
+                        <View className='shubi_btn' onClick={(e) => { payBtn(e, "shubi") }}>购买本章</View>
+                    </View>}
                 </View>
                 {/* 设置弹窗 */}
                 {pup && <BookConfigPuP {...bookConfig} off_on={off_on} setOff={setOff} setSize={setSize} setBg={setBg} setLh={setLh} />}
+                {/* 支付弹窗 */}
+                <GlobalModal type={payType} />
             </View>
             {/* 底部下来加载 */}
             {/* {

src/pages/book/bookDetails/index.tsx

@@ -42,14 +42,7 @@ class BookDetails extends Component<Props> {
             log(params?.bookId)
         }
     }
-    // 上报阅读
-    onReport() {
-        let { indexStore, appInfoStore, bookStore } = this.props.store
-        let scene = indexStore.scene
-        let { startReadBook } = useApi(appInfoStore)
-        log("onReport", scene)
-        startReadBook({ bookId: bookStore.openBookData?.bookId, readCondition: scene })
-    }
+  
     render() {
         let { bookStore } = this.props.store
         let { openBookData } = bookStore
@@ -88,7 +81,7 @@ class BookDetails extends Component<Props> {
                             <Text>{openBookData?.bookDesc?.replace(/\s/ig, '')}</Text>
                         </View>
                     </View>
-                    <View className='btn' onClick={this.onReport.bind(this)}>
+                    <View className='btn' >
                         <Navigator url={`/pages/book/bookArticle/index?bookId=${openBookData?.bookId}`} hoverClass="none">
                             <Image src={require('../../../icon/btn.png')} className='img' />
                         </Navigator>

src/pages/bookrack/index.tsx

@@ -22,7 +22,7 @@ interface ContentData {
 }
 
 const Index: React.FC<Props> = ({ store }) => {
-    const { indexStore } = store
+    const { indexStore, modalStore } = store
     const { bookrackList } = useApi(store.appInfoStore)
     const [readData, setReadData] = useState<ContentData>({
         current: 0,
@@ -84,12 +84,12 @@ const Index: React.FC<Props> = ({ store }) => {
             }
         })
     }
+    console.log(modalStore)
     return <View>
         <ScrollViewHoc
             load={load}
             filterClassName={""}
             navHeight={indexStore.navHeight}
-
         >
             <View className={"index"}>
                 {

src/pages/index/index.tsx

@@ -3,7 +3,6 @@ import { observer, inject } from 'mobx-react';
 import { useDidHide, useDidShow } from '@tarojs/taro';
 //==========components组件引用========================
 import TopNavBar from '@src/components/TopNavBar';
-import ScrollViewHoc from '@src/components/ScrollView';
 import { Store } from '@src/app';
 import useApi from '@src/Hook/useApi';
 import BannerBox from '@src/components/PupPetry/BannerBox'
@@ -73,8 +72,8 @@ const Index: React.FC<Props> = ({ store }) => {
     const getHotCategory = () => {
         indexComponents?.hot_category(bookStore.workDirection).then((res: any) => {
             let data = res?.data?.data
-            if (data?.length > 0) {
-                getHotBooks(data[0].id)
+            if (data?.bookCategoryList?.length > 0) {
+                getHotBooks(data?.bookCategoryList?.[0].id)
             }
         })
     }
@@ -95,13 +94,13 @@ const Index: React.FC<Props> = ({ store }) => {
         </View>}
         {/* 今日热门 */}
         {indexConfig['hot_books'] && <View style={{ order: indexConfig['banners'].eq }}>
-            <BookHead title="今日热书" fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
+            <BookHead showBtn={indexStore?.indexHotBooks?.showRightButton} title={indexStore?.indexHotBooks?.name || "今日热书"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
                 Taro.navigateTo({ url: `/pages/indexMore/index?title=今日热书&dataName=indexHotBooks` })
             }}></BookHead>
-            <View ><BookboxRowMiddle {...indexStore?.indexHotBooks?.[0]} /></View>
+            <View ><BookboxRowMiddle {...indexStore?.indexHotBooks?.shortBookInfoListVOS?.[0]} /></View>
             <View className='w row'>
                 {
-                    indexStore?.indexHotBooks?.map((item, index) => {
+                    indexStore?.indexHotBooks?.shortBookInfoListVOS?.map((item, index) => {
                         if (index > 0 && index < 5) {
                             return <View key={index}><BookboxColumnSmall {...item} /></View>
                         }
@@ -111,8 +110,8 @@ const Index: React.FC<Props> = ({ store }) => {
         </View>}
         {/* 热门分类 */}
         {indexConfig['hot_category'] && <View style={{ order: indexConfig['banners'].eq }}>
-            <BookHead title="热门分类" fitTitle="全部分类" imgUrl={require('../../icon/right.png')} fitOnBack={() => { Taro.switchTab({ url: '/pages/classify/index' }) }} />
-            <BookHotTabs hotValue={indexStore?.indexHotCategory || []} onBack={(value) => {
+            <BookHead  showBtn={indexStore?.indexHotCategory?.showRightButton}  title={indexStore?.indexHotCategory?.name || "热门分类"} fitTitle="全部分类" imgUrl={require('../../icon/right.png')} fitOnBack={() => { Taro.switchTab({ url: '/pages/classify/index' }) }} />
+            <BookHotTabs hotValue={indexStore?.indexHotCategory?.bookCategoryList || []} onBack={(value) => {
                 getHotBooks(value)
             }} />
             <View className='w row4'>

src/pages/my/index.less

@@ -22,7 +22,7 @@ page {
             top: 0;
             left: 0;
             right: 0;
-            height: 240px;
+            min-height: 240px;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
@@ -125,6 +125,7 @@ page {
                 height: 156px;
                 margin-top: 20px;
                 position: relative;
+                margin-bottom: 30rpx;
 
                 &>view {
                     width: 100%;
@@ -186,7 +187,10 @@ page {
 
                 image {
                     width: 100%;
-                    height: 132px;
+                    height: 150rpx;
+                    // background: linear-gradient( 180deg, rgba(255,255,255,0.89) 0%, rgba(255,255,255,0) 100%);
+                    // border-radius: 0rpx 0rpx 0rpx 0rpx;
+                    // opacity: 0.16649999999999998;
                 }
             }
         }
@@ -197,9 +201,92 @@ page {
         }
     }
 
+    .account_info {
+        width: 690rpx;
+        height: 212rpx;
+        background: #FFFFFF;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+        padding: 30rpx;
+        box-sizing: border-box;
+
+        .account_info_title {
+            width: 128rpx;
+            height: 44rpx;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 32rpx;
+            color: #333333;
+            line-height: 38rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            margin-bottom: 20rpx;
+        }
+
+        .account_info_content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .account_info_content_btn {
+                width: 164rpx;
+                height: 56rpx;
+                background: #FF415B;
+                box-shadow: 0rpx 4rpx 8rpx 0rpx #FFADBA;
+                border-radius: 30rpx 30rpx 30rpx 30rpx;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                font-size: 28rpx;
+                color: #FFFFFF;
+                line-height: 56rpx;
+                text-align: center;
+                font-style: normal;
+                text-transform: none;
+                text-align: center;
+            }
+
+            .account_info_content_left {
+                .account_info_content_text {
+                    display: flex;
+                    flex-flow: column;
+                    float: left;
+                    align-items: center;
+                    &:last-child{
+                        margin-left: 86rpx;
+                    }
+                    text:first-child {
+                        height: 50rpx;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 500;
+                        font-size: 36rpx;
+                        color: #333333;
+                        line-height: 42rpx;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+                    text:last-child {
+                        width: 48rpx;
+                        height: 34rpx;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 24rpx;
+                        color: #999999;
+                        line-height: 28rpx;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+                }
+            }
+
+
+        }
+    }
+
     .list_bt {
         background-color: #FFFFFF;
-        margin-top: 20px;
+        margin-top: 30rpx;
         border-radius: 20px;
         padding: 36px 30px;
         box-sizing: border-box;

src/pages/my/index.tsx

@@ -1,109 +1,27 @@
 import { Component } from 'react'
 import Taro from '@tarojs/taro'
-import { View, Text, Image, Button, Navigator, Input } from '@tarojs/components'
+import { View, Text, Image, Button, Navigator } from '@tarojs/components'
 import { observer, inject } from 'mobx-react'
 import './index.less'
-// import { pushUserInfo, pushAdLog, getUserInfoSecond, setSign, getVideoNoin, setTaskCoin, addSubscribe } from '../../api'
-import { getLoginSto } from '@src/utils/loginSto'
 import { Store } from '@src/app'
-
-// import TipsUnlocking from '../../components/guidePage/tipsUnlocking'
-// import Toast from '../../components/guidePage/toast'
-// import SceneTips from '../../components/guidePage/sceneTips'
-// import Subscribe from '../../components/guidePage/subscribe'
-// import SignTips from '../../components/guidePage/signTips'
+import ModalStore from '@src/store/modalStore'
 interface Props {
     store: Store;
 }
 
-let _this: any = null
 
 @inject('store')
 @observer
 class My extends Component<Props> {
-
     state = {
     }
-
-    componentDidShow() {
-        this.getData()
-    }
-
-    onLoad() {
-        /*   @ts-ignore */
-        if (wx.getUserProfile) {
-            this.setState({
-                canIUseGetUserProfile: true
-            })
-        }
-        Taro.getSystemInfo({
-            success(res) {
-                log('===========', res);
-
-            }
-        })
-        _this = this
-    }
-
-
-    getUserProfile() {
-        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
-        // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
-        /*   @ts-ignore */
-
-
-    }
-
-    getData = (type?: string) => {
-        let { indexStore } = this.props.store
-        // getUserInfoSecond().then((res: any) => {
-        //     this.getInsertScreen()
-        //     indexStore.SET_USERINFO()
-        //     let body = res?.body
-        //     this.setState({
-        //         signInfo: body?.sign,
-        //         task: body?.task,
-        //         account: body?.userinfo?.account
-        //     })
-        //     let { is_receive, subscribe_coin } = body?.task?.important
-        //     if (type && type === 'sub' && is_receive === 1) {
-        //         this.setState({
-        //             toastInfo: {
-        //                 title: '消息订阅',
-        //                 reward: subscribe_coin,
-        //                 show: true
-        //             }
-        //         })
-        //     }
-        // })
-    }
-
-
-
-
-    handleWXGetUserInfo = (event) => {
-        let detail = event.detail
-        // let { city, country, gender, nickName, province, avatarUrl } = detail.userInfo
-        this.setState({
-            userInfo: detail.userInfo
-        })
-        let { open_id } = getLoginSto()
-        // pushUserInfo({ openid: open_id, city, country, gender, nickname: nickName, province, avatarUrl }).then(() => {
-        //     this.getData()
-        // })
-    }
-
-    onChooseAvatar = (e) => {
-        const { avatarUrl } = e.detail
-        console.log(e.detail)
-    }
     render() {
         let { userInfoStore } = this.props.store
-
         return <View className='my'>
             <View className="userInfo">
                 {/* <Image src={require('../../icon/myBack.png')} /> */}
                 <View className="userInfo_box">
+                    {/* 个人信息 */}
                     <View className="top" >
                         <View className="left">
                             <View className="avtai">
@@ -126,11 +44,11 @@ class My extends Component<Props> {
                             userInfoStore.isAuth && <View className="right">
                                 {
                                     userInfoStore.isAuth ?
-                                        <Button onClick={this.getUserProfile} className="loginBt"  >
+                                        <Button onClick={() => { }} className="loginBt"  >
                                             <Image lazy-load src={require('../../icon/loaginBt.png')} />
                                         </Button>
                                         : <View>
-                                            <Button openType='chooseAvatar' onChooseAvatar={this.onChooseAvatar} className="loginBt">
+                                            <Button openType='chooseAvatar' onChooseAvatar={() => { }} className="loginBt">
                                                 <Image lazy-load src={require('../../icon/loaginBt.png')} />
                                             </Button>
                                             {/* <Input type="nickname" placeholder="请输入昵称" /> */}
@@ -156,6 +74,23 @@ class My extends Component<Props> {
                         </View>
                         <Image lazy-load src={require('../../icon/vipBack.png')} />
                     </View>
+                    {/*我的账户  */}
+                    <View className='account_info'>
+                        <View className='account_info_title'>我的账户</View>
+                        <View className='account_info_content'>
+                            <View className='account_info_content_left'>
+                                <View className='account_info_content_text'>
+                                    <Text>12</Text>
+                                    <Text>书币</Text>
+                                </View>
+                                <View className='account_info_content_text' onClick={() => { }}>
+                                    <Text>300</Text>
+                                    <Text>赠币</Text>
+                                </View>
+                            </View>
+                            <View className='account_info_content_btn' onClick={() => { ModalStore.showModal() }}>充值</View>
+                        </View>
+                    </View>
                     {/* 底部功能入口 */}
                     <View className="list_bt" >
                         <Navigator className="item" url="/pages/my/contactService/index">
@@ -180,8 +115,6 @@ class My extends Component<Props> {
                     </View>
                 </View>
             </View>
-
-
         </View>
     }
 }

src/store/index.ts

@@ -1,16 +1,33 @@
 import { observable } from 'mobx'
-
-let interval: NodeJS.Timeout | undefined = undefined
+// 想要页面监听值的变化更新需要把值解构出来 let {scene} = props.store.indexStore ,这样有变化才会刷新页面
+// 使用方法时使用()=>函数执行或者用bind方法，否则会丢失this
 export interface IndexStore {
     scene: number,    // 场景值
     system: string,  // 系统
     navBarTop: number,//状态栏高度
     navHeight: number,//导航栏高度
     query: any,//本次进入小程序参数
-    indexBanners: any[],//首页banner数据
-    indexHotBooks: any[],//首页热门数据
-    indexHotCategory: any[],//首页热门分类
-    indexCategoryId:number,//首页分类选中的id
+    indexBanners: {
+        "name": string,//名称
+        "workDirection": number,//频道
+        "bannerType": number,//banner类型
+        "bookId": number,//书籍ID
+        "activityPagePath": string,//活动页面地址
+        "bannerImage": string,//图片地址
+    }[],//首页banner数据
+    indexHotBooks: {
+        name: string,//名称
+        showRightButton: boolean,//右侧按钮是否展示
+        workDirection: number,//频道
+        shortBookInfoListVOS:any[],//书籍内容
+    },//首页热门数据
+    indexHotCategory: {
+        bookCategoryList: { id: number, name: string }[],//分类
+        name: string,//名称
+        showRightButton: boolean,//右侧按钮是否展示
+        workDirection: number,//频道
+    },//首页热门分类
+    indexCategoryId: number,//首页分类选中的id
     setData: (data: { [key: string]: any }) => void,
 }
 const Index = observable({
@@ -20,9 +37,19 @@ const Index = observable({
     navHeight: 0,//导航栏高度
     query: null,//本次进入小程序参数
     indexBanners: [],//首页banner数据
-    indexHotBooks: [],//首页热门数据
-    indexHotCategory: [],//首页热门分类
-    indexCategoryId:0,
+    indexHotBooks: {
+        name: "今日热书",//名称
+        showRightButton: true,//右侧按钮是否展示
+        workDirection: 0,//频道
+        shortBookInfoListVOS:[],//书籍内容
+    },//首页热门数据
+    indexHotCategory: {
+        bookCategoryList: [],//分类
+        name: "热门分类",//名称
+        showRightButton: true,//右侧按钮是否展示
+        workDirection: 0,//频道
+    },//首页热门分类
+    indexCategoryId: 0,
     setData(data: { [key: string]: any }) {
         if (data) {
             Object.keys(data).forEach(key => {

src/store/modalStore.tsx

@@ -0,0 +1,12 @@
+import { observable } from 'mobx'
+const ModalStore = observable({
+    visible: false,    // 弹窗开关
+    showModal() {
+        this.visible = true
+    },
+    hideModal() {
+        this.visible = false
+    }
+})
+
+export default ModalStore