fix

src/components/bottomModal/index.tsx

@@ -7,11 +7,16 @@ import Shubi from './shubi';
 import { setApp } from '@src/config';
 
 interface Props {
-    type?: 'vip' | 'shubi'
+    type?: 'vip' | 'shubi',
+    isBook?: boolean,
+    shubiData?: {
+        payCoin: number,
+        coinNum: number,
+    }
 }
 
 const GlobalModal: React.FC<Props> = (props) => {
-    let { type = "shubi" } = props
+    let { type = "shubi", isBook = true, shubiData } = props
     return useObserver(() => {
         let { visible } = modalStore
         const hide = (e) => {
@@ -26,9 +31,9 @@ const GlobalModal: React.FC<Props> = (props) => {
                     {/* 关闭 */}
                     <View className='clear' onClick={hide}></View>
                     {/* Vip */}
-                    {type === 'vip' && <Vip />}
+                    {type === 'vip' && <Vip isBook={isBook} />}
                     {/* 书币 */}
-                    {type === 'shubi' && <Shubi />}
+                    {type === 'shubi' && <Shubi isBook={isBook} shubiData={shubiData} />}
                 </View>
             </View>}
         </>

src/components/bottomModal/shubi/index.tsx

@@ -1,11 +1,20 @@
 import { View } from "@tarojs/components";
 import './index.less'
 import ShubiBox from "@src/components/pay/shubi";
-function Shubi() {
+function Shubi(props: {
+    isBook: boolean, shubiData?: {
+        payCoin: number,
+        coinNum: number
+    }
+}) {
     return <View className="shubi">
-        <View className="shubi_title">订阅本章：11书币</View>
-        <View className="shubi_info">余额：0书币+0赠币</View>
-        <ShubiBox  />
+        {
+            props?.isBook ? <>
+                <View className="shubi_title">订阅本章：{props?.shubiData?.payCoin || 0}书币</View>
+                <View className="shubi_info">余额：{props?.shubiData?.coinNum || 0}书币</View>
+            </> : <View className="shubi_title">选择套餐</View>
+        }
+        <ShubiBox />
     </View>
 }
 export default Shubi

src/components/bottomModal/vip/index.tsx

@@ -1,9 +1,14 @@
 import { View, Text } from "@tarojs/components";
 import './index.less'
 import VipBox from "@src/components/pay/vip";
-function Vip() {
+function Vip(props: { isBook: boolean }) {
     return <View>
-        <View className="shubi_title">会员本书免费读</View>
+        {
+            props?.isBook ? <>
+                <View className="shubi_title">会员本书免费读</View>
+            </> : <View className="shubi_title">选择套餐</View>
+        }
+
         <VipBox />
     </View>
 }

src/pages/book/BookArticle/index.tsx

@@ -5,13 +5,14 @@ import { View, Text, ScrollView } from '@tarojs/components';
 import { observer, inject } from 'mobx-react';
 import './index.less';
 import TopNavBar from '@src/components/TopNavBar/index';
-import Taro, { useDidHide, useLoad } from '@tarojs/taro';
+import Taro from '@tarojs/taro';
 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';
 import IosShowPay from '@src/components/pay/IosShowPay';
+import { Store } from '@src/app';
 
 interface Config {
     size: 'pre_15' | 'pre_17' | 'pre_19' | 'pre_21' | 'pre_23' | 'pre_25' | 'pre_27' | 'pre_29' | any;
@@ -21,21 +22,17 @@ interface Config {
 }
 
 type PageStateProps = {
-    store: {
-        bookStore: BookStore,
-        indexStore,
-        appInfoStore,
-        modalStore
-    }
+    store: Store
 };
 
 interface BookArticleProps extends PageStateProps { }
 
 const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
     const [isLoad, setIsLoad] = useState(false)
-    const { bookStore, indexStore, modalStore } = store
+    const { bookStore, indexStore, modalStore, userInfoStore } = store
     const [showPay, setShowPay] = useState(false)//需要付费展示
     const [showVip, setShowVip] = useState(false)//是否展示vip支付
+    const [payBook, setPayBook] = useState<any>(null)//要支付的内容包含了费用
     const { openBookData } = bookStore
     const [bookConfig, setBookConfig] = useState<Config>({ size: 'pre_21', off_on: true, bg: 'bg_b', lh: 'lh_72' });
     const [pup, setPup] = useState(false);
@@ -252,6 +249,7 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
                                 if (!showPay) {
                                     setShowPay(true)
                                     setShowVip(item.vipFree)
+                                    setPayBook(item)
                                 }
                             }
                             return showText ? <View
@@ -274,8 +272,12 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
                     {showPay && <View className='pay_btns'>
                         <View className='text-with-lines' >剩余内容需付费解锁</View>
                         <IosShowPay>
+                            {/* 存在vip免费字段展示购买vip */}
                             {showVip && <View className='vip_btn' onClick={(e) => { payBtn(e, "vip") }}>开通会员，本书免费读</View>}
-                            <View className='shubi_btn' onClick={(e) => { payBtn(e, "shubi") }}>购买本章</View>
+                            {/* 存在章节书币价格显示购买书币 */}
+                            {payBook?.payCoin && <View className='shubi_btn' onClick={(e) => { payBtn(e, "shubi") }}>购买本章</View>}
+                            {/* 存在全本购买价格展示全本购买按钮*/}
+                            {payBook?.payAmount && <View className='shubi_btn' onClick={(e) => { e.stopPropagation() }}>支付{payBook?.payAmount}元购买本书</View>}
                         </IosShowPay>
                     </View>}
 
@@ -283,7 +285,10 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
                 {/* 设置弹窗 */}
                 {pup && <BookConfigPuP {...bookConfig} off_on={off_on} setOff={setOff} setSize={setSize} setBg={setBg} setLh={setLh} />}
                 {/* 支付弹窗 */}
-                <GlobalModal type={payType} />
+                <GlobalModal type={payType} shubiData={{
+                    coinNum: userInfoStore?.userInfo?.coinNum || 0,
+                    payCoin: payBook?.payCoin || 0,
+                }} />
             </View>
             {/* 底部下来加载 */}
             {/* {

src/pages/my/index.less

@@ -251,20 +251,9 @@ page {
                     flex-flow: column;
                     float: left;
                     align-items: center;
-                    &:last-child{
+                    &:nth-child(2){
                         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;
@@ -277,6 +266,17 @@ page {
                         font-style: normal;
                         text-transform: none;
                     }
+                    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;
+                    }
                 }
             }
 

src/pages/my/index.tsx

@@ -1,127 +1,138 @@
-import { Component } from 'react'
-import Taro from '@tarojs/taro'
+import { useState } from 'react'
+import Taro, { useDidHide } from '@tarojs/taro'
 import { View, Text, Image, Button, Navigator } from '@tarojs/components'
 import { observer, inject } from 'mobx-react'
 import './index.less'
 import { Store } from '@src/app'
 import ModalStore from '@src/store/modalStore'
 import IosShowPay from '@src/components/pay/IosShowPay'
+import GlobalModal from '@src/components/bottomModal'
 interface Props {
     store: Store;
 }
 
+function My(props: Props) {
+    let { userInfoStore } = props.store
+    const [payType, setPayType] = useState<"shubi" | "vip">("shubi")
 
-@inject('store')
-@observer
-class My extends Component<Props> {
-    state = {
+    //支付弹窗
+    const payBtn = (e, type) => {
+        e.stopPropagation()
+        setPayType(type)
+        ModalStore.showModal()
     }
-    render() {
-        let { userInfoStore } = this.props.store
-        let userInfo = userInfoStore?.userInfo || Taro.getStorageSync("userInfo")?.userInfo
-        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">
-                                <Image mode="widthFix" lazy-load src={userInfoStore.userInfo?.avatarUrl ? userInfoStore.userInfo?.avatarUrl : require('../../icon/avatar.jpg')} />
-                            </View>
-                            <View className="name" style={userInfoStore.isAuth ? { width: Taro.pxTransform(120) } : {}}>
-                                {
-                                    userInfo?.nickName ? <View className="ID">{userInfo?.nickName || ""}</View> :
-                                        <View className="ID">{userInfo?.openId}</View>
-                                }
-                                {
-                                    userInfoStore.isVip && <View className="grade">
-                                        <Image lazy-load src={require('../../icon/grade.png')} />
-                                        <Text>V1</Text>
-                                    </View>
-                                }
-                            </View>
+    // 使用 useDidHide 如果需要在页面隐藏时做一些处理
+    useDidHide(() => {
+        ModalStore.hideModal()
+    });
+    console.log(userInfoStore)
+    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">
+                            <Image mode="widthFix" lazy-load src={userInfoStore.userInfo?.avatarUrl ? userInfoStore.userInfo?.avatarUrl : require('../../icon/avatar.jpg')} />
+                        </View>
+                        <View className="name" style={userInfoStore.isAuth ? { width: Taro.pxTransform(120) } : {}}>
+                            {
+                                userInfoStore?.userInfo?.nickname ? <View className="ID">{userInfoStore?.userInfo?.nickname || ""}</View> :
+                                    <View className="ID">{userInfoStore?.userInfo?.openId}</View>
+                            }
+                            {
+                                userInfoStore.isVip && <View className="grade">
+                                    <Image lazy-load src={require('../../icon/grade.png')} />
+                                    <Text>V1</Text>
+                                </View>
+                            }
                         </View>
-                        {
-                            userInfoStore.isAuth && <View className="right">
-                                {
-                                    userInfoStore.isAuth ?
-                                        <Button onClick={() => { }} className="loginBt"  >
-                                            <Image lazy-load src={require('../../icon/loaginBt.png')} />
-                                        </Button>
-                                        : <View>
-                                            <Button openType='chooseAvatar' onChooseAvatar={() => { }} className="loginBt">
-                                                <Image lazy-load src={require('../../icon/loaginBt.png')} />
-                                            </Button>
-                                            {/* <Input type="nickname" placeholder="请输入昵称" /> */}
-                                        </View>
-
-                                }
-                            </View>
-                        }
                     </View>
-                    {/* 付费功能 */}
-                    <IosShowPay>
-                        {/* vip续费 */}
-                        <View className="bottom">
-                            <View>
-                                <View className="left">
-                                    <Image lazy-load src={require('../../icon/VIP.png')} />
-                                    <View className="txt">
-                                        <Text>会员尊享免费解锁权益</Text>
-                                        {
-                                            userInfoStore.isVip && <Text className="tfv">有效期至:{1111}</Text>
-                                        }
-                                    </View>
+                    {
+                        // userInfoStore.isAuth && <View className="right">
+                        //     {
+                        //         userInfoStore.isAuth ?
+                        //             <Button onClick={() => { }} className="loginBt"  >
+                        //                 <Image lazy-load src={require('../../icon/loaginBt.png')} />
+                        //             </Button>
+                        //             : <View>
+                        //                 <Button openType='chooseAvatar' onChooseAvatar={() => { }} className="loginBt">
+                        //                     <Image lazy-load src={require('../../icon/loaginBt.png')} />
+                        //                 </Button>
+                        //                 {/* <Input type="nickname" placeholder="请输入昵称" /> */}
+                        //             </View>
+
+                        //     }
+                        // </View>
+                    }
+                </View>
+                {/* 付费功能 */}
+                <IosShowPay>
+                    {/* vip续费 */}
+                    <View className="bottom">
+                        <View>
+                            <View className="left">
+                                <Image lazy-load src={require('../../icon/VIP.png')} />
+                                <View className="txt">
+                                    <Text>会员尊享免费解锁权益</Text>
+                                    {
+                                        userInfoStore.isVip && <Text className="tfv">有效期至:{1111}</Text>
+                                    }
                                 </View>
-                                <View className="right" onClick={() => { Taro.navigateTo({ url: '/pages/vipCore/index' }) }}>{userInfoStore.isVip ? '立即续费' : '立即开通'}</View>
                             </View>
-                            <Image lazy-load src={require('../../icon/vipBack.png')} />
+                            <View className="right" onClick={(e) => {
+                                payBtn(e, "vip")
+                            }}>{userInfoStore.isVip ? '立即续费' : '立即开通'}</View>
                         </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>
+                        <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>{userInfoStore.userInfo?.coinNum || 0}</Text>
+                                    <Text>书币</Text>
                                 </View>
-                                <View className='account_info_content_btn' onClick={() => { Taro.navigateTo({ url: '/pages/myAccount/index' }) }}>充值</View>
+                                {/* <View className='account_info_content_text' onClick={() => { }}>
+                                    <Text>0</Text>
+                                    <Text>赠币</Text>
+                                </View> */}
                             </View>
+                            <View className='account_info_content_btn' onClick={(e) => {
+                                payBtn(e, "shubi")
+                            }}>充值</View>
                         </View>
-                    </IosShowPay>
-                    {/* 底部功能入口 */}
-                    <View className="list_bt" >
-                        <Navigator className="item" url="/pages/my/contactService/index">
-                            <View className="left">
-                                <Image lazy-load src={require('../../icon/phone.png')} mode="widthFix" />
-                                <Text>联系客服</Text>
-                            </View>
-                            <View className="right">
-                                <Image lazy-load src={require('../../icon/jtRight.png')} mode="widthFix" />
-                            </View>
-                        </Navigator>
-                        <View className="line"></View>
-                        <Navigator className="item" url="/pages/my/aboutUs/index">
-                            <View className="left">
-                                <Image lazy-load src={require('../../icon/we.png')} mode="widthFix" />
-                                <Text>关于我们</Text>
-                            </View>
-                            <View className="right">
-                                <Image lazy-load src={require('../../icon/jtRight.png')} mode="widthFix" />
-                            </View>
-                        </Navigator>
                     </View>
+                    {/* 支付弹窗 */}
+                    <GlobalModal type={payType} isBook={false} />
+                </IosShowPay>
+                {/* 底部功能入口 */}
+                <View className="list_bt" >
+                    <Navigator className="item" url="/pages/my/contactService/index">
+                        <View className="left">
+                            <Image lazy-load src={require('../../icon/phone.png')} mode="widthFix" />
+                            <Text>联系客服</Text>
+                        </View>
+                        <View className="right">
+                            <Image lazy-load src={require('../../icon/jtRight.png')} mode="widthFix" />
+                        </View>
+                    </Navigator>
+                    <View className="line"></View>
+                    <Navigator className="item" url="/pages/my/aboutUs/index">
+                        <View className="left">
+                            <Image lazy-load src={require('../../icon/we.png')} mode="widthFix" />
+                            <Text>关于我们</Text>
+                        </View>
+                        <View className="right">
+                            <Image lazy-load src={require('../../icon/jtRight.png')} mode="widthFix" />
+                        </View>
+                    </Navigator>
                 </View>
             </View>
         </View>
-    }
+    </View>
 }
-
-export default My
+export default inject('store')(observer(My));

src/store/userInfo.tsx

@@ -7,7 +7,8 @@ export interface UserInfoStore {
         openId:string,
         nickname:string,
         avatarUrl:string
-        vipExpireTime:string
+        vipExpireTime:string,//会员结束时间
+        coinNum:number,//书币
     } | null,
     setData: (data: { [key: string]: any }) => void,
 }