fix

src/components/goToMemberModal/index.less

@@ -0,0 +1,66 @@
+.store_modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 17rem;
+  background: #fff;
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0 .5rem .8rem;
+  z-index: 1000;
+
+  .store_modal_close {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 1rem 1rem auto auto;
+    background-image: url(https://oss.jm-kid.com/wx_5colorflower/close.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  .store_modal_title {
+    font-size: 1rem;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .store_modal_context {
+    font-size: .875rem;
+    font-weight: 600;
+    text-align: center;
+    margin: .5rem 0 .8rem;
+  }
+
+  .store_modal_container {
+
+    width: 10rem;
+    height: 2rem;
+    display: flex;
+    flex-direction: row;
+    background: #07c160;
+    border-radius: 1rem;
+    margin: auto;
+    gap: 1rem;
+
+    .store_modal_title {
+      font-size: 1rem;
+      font-weight: 600;
+      height: 1.125rem;
+      color: #fff;
+      text-align: center;
+      margin: auto;
+    }
+  }
+}
+
+.store_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}

src/components/goToMemberModal/index.tsx

@@ -0,0 +1,76 @@
+import { View, Text } from '@tarojs/components'
+import { useState } from 'react';
+import Taro from '@tarojs/taro';
+import './index.less'
+
+
+export default function GoToStoreModal({ visible, onClose, type}) {
+
+  //管理关闭动画状态
+  const [isAnimationOpen, setisAnimationOpen] = useState(false)
+
+  if(!visible){
+    return null
+  }
+
+  const handleOverlayClick = (event: any) => {
+    // 点击蒙层时关闭弹窗
+    setisAnimationOpen(true)
+    setTimeout(() =>{
+      setisAnimationOpen(false)
+      onClose();
+    }, 0)
+  };
+
+  const handleNavigateToMiniProgram = () => {
+    Taro.navigateToMiniProgram({
+      appId: 'wxbd3d383851fea776',
+      path: '',
+      success: (res) => {
+        console.log('打开成功=>',res)
+      },
+      fail: (res) => {
+        console.log('打开失败=>',res)
+      }
+    })
+
+    handleOverlayClick(null)
+  }
+
+  return (
+    <>
+      <View
+        className='store_overlay'
+        onClick={handleOverlayClick}
+        style={
+          !isAnimationOpen ? { opacity: 1, transition: 'opacity 1s ease-in-out' }
+          : { opacity: 0 }
+        }
+      />
+      <View
+        className='store_modal'
+        style={
+          !isAnimationOpen ? { opacity: 1, transition: 'opacity 1s ease-in-out' }
+          : { opacity: 0 }
+        }
+      >
+        <View className='store_modal_close' onClick={handleOverlayClick}></View>
+        <View className='store_modal_title'>专辑播放</View>
+        <Text className='store_modal_context'>
+          你的会员{type === -1 ? '已过期' : '未开通'}，请前往商城购买VIP会员解锁全部专辑
+        </Text>
+        <View
+          className='store_modal_container'
+          onClick={handleNavigateToMiniProgram}
+        >
+          <View
+            className='store_modal_title'
+          >
+            去选购
+          </View>
+        </View>
+      </View>
+    </>
+
+  )
+}

src/pages/ListenDetail/index.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'
 import Taro, { useLoad } from '@tarojs/taro'
 import './index.less'
 import GetPhoneNumber from '../../components/getPhoneModal'
-import GoToStoreModal from '../../components/goToStoreModal'
+import GoToMemberModal from '../../components/goToMemberModal'
 
 interface DetailProps {
   IsFree: boolean
@@ -60,12 +60,12 @@ export default function ListenDetail() {
 
   const [isToStoreOpen, setisToStoreOpen] = useState(false)
 
-  //管理跳转页面路径
-  const [prdtMallLink, setprdtMallLink] = useState('')
-
   //记录prdtId
   const [queryId, setqueryId] = useState('')
 
+  //会员开通状态
+  const [memberState, setMemberState] = useState(0)
+
   useLoad((query) => {
     setqueryId(query.prdtId)
     if(!isGetUsePhone){
@@ -100,23 +100,20 @@ export default function ListenDetail() {
     return `${formattedMinutes}:${formattedSeconds}`;
   }
 
-  const handleDisplay = (prdtId: number, resId: number, IsSubscribed: number) => {
+  const handleDisplay = (prdtId: number, resId: number) => {
     if(!Taro.getStorageSync('UserToken')){
       setisLoginOpen(true)
     }else{
-      console.log('IsSubscribed=>', IsSubscribed)
-      if (IsSubscribed === -1) {
-        //未订阅，跳转商城
-        setprdtMallLink(detailData.MallLink || '')
+      console.log('IsSubscribed=>', memberState)
+      if (memberState !== 1) {
+        //没有会员，跳转商城
         setisToStoreOpen(true)
       }else{
         Taro.navigateTo({
           url: '/pages/ListenDisplay/index?prdtId=' + prdtId + '&resId=' + resId
         })
       }
-
     }
-
   }
 
   useEffect(()=> {
@@ -138,6 +135,23 @@ export default function ListenDetail() {
           setdetailData(res.data.data)
         }
       })
+
+      Taro.request({
+        url: 'https://interapi.jm-kid.com/api/member/data',
+        method: 'POST',
+        header: {
+          authorization: `bearer ${Taro.getStorageSync('UserToken')}`
+        },
+        data: {
+          timestamp: Date.now(),
+          member_type: 'audio'
+        },
+        success: (res: any) => {
+          if(res.data.state === 200){
+            setMemberState(res.data.data.main.SubscribedState)
+          }
+        },
+      })
     }
   }, [isGetUsePhone, queryId])
 
@@ -205,7 +219,7 @@ export default function ListenDetail() {
                 <View
                   key={index}
                   className='item'
-                  onClick={() => {handleDisplay( detailData.Product.PrdtId ,item.ResId, detailData.IsSubscribed)}}
+                  onClick={() => {handleDisplay( detailData.Product.PrdtId ,item.ResId)}}
                 >
                   <View className='content'>
                     <View className='title'>{item.ResTitle}</View>
@@ -234,13 +248,11 @@ export default function ListenDetail() {
         onModalClose={() => setisLoginOpen(false)}
       ></GetPhoneNumber>
 
-      <GoToStoreModal
+      <GoToMemberModal
         visible={isToStoreOpen}
         onClose={() => setisToStoreOpen(false)}
-        type={0}
-        mallLink={prdtMallLink}
-        setmallLink={setprdtMallLink}
-      ></GoToStoreModal>
+        type={memberState}
+      ></GoToMemberModal>
     </View>
   )
 }

src/pages/Vip/index.tsx

@@ -21,11 +21,6 @@ export default function Share() {
   // 开通记录
   const [records, setRecords] = useState<RecordProps[]>()
 
-  const handleShare = () => {
-
-  }
-
-
   useLoad(()=> {
     setuserAvator(Taro.getStorageSync('UserAvatar'))
     setuserNickName(Taro.getStorageSync('UserNickName'))
@@ -43,14 +38,10 @@ export default function Share() {
       success: (res: any) => {
         if(res.data.state === 200){
           const { list, main } = res.data.data
-          console.log(11, list,records)
           setRecords(list)
           main && setInfo(main)
         }
       },
-      fail: (err: any) => {
-        console.log('兑换失败=>', err)
-      }
     })
   })