yujialong 3 weeks ago
parent 88e639c9ea
commit a2b654185b
  1. 13
      src/components/Popup/index.less
  2. 11
      src/components/Popup/index.tsx
  3. 10
      src/components/defaultPage2/index.less
  4. 4
      src/components/goToMemberModal/index.less
  5. 10
      src/components/goToMemberModal/index.tsx
  6. 21
      src/components/goToStoreModal/index.less
  7. 3
      src/components/goToStoreModal/index.tsx
  8. 27
      src/pages/Customer/index.tsx
  9. 10
      src/pages/ListenDetail/index.tsx
  10. 11
      src/pages/Subscribe/index.tsx
  11. 23
      src/pages/UserHome/UserSubscribe/index.tsx
  12. 2
      src/pages/UserHome/index.less
  13. 5
      src/pages/UserHome/index.tsx
  14. 19
      src/pages/Vip/index.less
  15. 3
      src/pages/Vip/index.tsx

@ -24,7 +24,7 @@
bottom: 0; // 移动到屏幕底部
left: 0;
width: 100%;
height: 50%; // 占据屏幕高度的一半
height: 95%;
background-color: white;
z-index: 1000;
overflow-y: auto;
@ -61,7 +61,7 @@
.popup_content_body {
width: 100%;
height: calc(50vh - 2.75rem - 2.5rem - 4rem);
height: calc(95vh - 2.75rem - 2.5rem - 4rem);
display: flex;
flex-direction: column;
@ -75,7 +75,7 @@
.popup_content_body_item_title {
font-size: 1rem;
font-weight: 600;
font-weight: 600;
}
.popup_content_body_item_group {
@ -123,5 +123,12 @@
}
}
}
&.half {
height: 50%;
.popup_content_body {
height: calc(50vh - 2.75rem - 2.5rem - 4rem);
}
}
}

@ -13,9 +13,6 @@ export default function PopupHalfScreen({ visible, onClose, hideFilter, onFilter
//管理关闭动画状态
const [isAnimationOpen, setisAnimationOpen] = useState(false)
//本地记录筛选内容
const [userFilter, setuserFilter] = useState(0)
//记录用户筛选状态
const [filterForm, setFilterForm] = useState({
filter: '',
@ -83,7 +80,11 @@ export default function PopupHalfScreen({ visible, onClose, hideFilter, onFilter
}
const handleReset = () => {
setuserFilter(0)
setFilterForm({
filter: '',
state: '',
refer: '',
})
onFilter('reset')
handleOverlayClick(null)
}
@ -100,7 +101,7 @@ export default function PopupHalfScreen({ visible, onClose, hideFilter, onFilter
onClick={handleOverlayClick}
/>
<View
className='popup_half_screen'
className={`popup_half_screen ${hideFilter ? 'half' : ''}`}
onClick={onClose}
style={
!isAnimationOpen ? {} : {

@ -1,25 +1,23 @@
.default1_bg {
display: flex;
height: 100vh;
height: 70vh;
flex-direction: column;
margin: auto;
justify-content: center;
align-items: center;
gap: 1.25rem;
.default1_img {
width: 15.625rem;
height: 15.625rem;
margin: auto auto 1rem auto;
}
.default1_context {
margin: 0 auto;
color: black;
font-size: .875rem;
font-weight: 600;
}
.default1_btn {
margin: 0 auto auto auto;
width: 6.25rem;
height: 1.75rem;
background: linear-gradient(#329C5E, #3BA366);
@ -32,4 +30,4 @@
font-size: .875rem;
}
}
}
}

@ -14,7 +14,7 @@
.store_modal_close {
width: 1.5rem;
height: 1.5rem;
margin: 1rem 1rem auto auto;
margin: .5rem 1rem auto auto;
background-image: url(https://oss.jm-kid.com/wx_5colorflower/close.png);
background-repeat: no-repeat;
background-size: cover;
@ -44,7 +44,7 @@
margin: auto;
gap: 1rem;
.store_modal_title {
.store_modal_btn {
font-size: 1rem;
font-weight: 600;
height: 1.125rem;

@ -4,7 +4,7 @@ import Taro from '@tarojs/taro';
import './index.less'
export default function GoToStoreModal({ visible, onClose, type}) {
export default function GoToStoreModal({ visible, onClose, memberInfo}) {
//管理关闭动画状态
const [isAnimationOpen, setisAnimationOpen] = useState(false)
@ -13,7 +13,7 @@ export default function GoToStoreModal({ visible, onClose, type}) {
return null
}
const handleOverlayClick = (event: any) => {
const handleOverlayClick = () => {
// 点击蒙层时关闭弹窗
setisAnimationOpen(true)
setTimeout(() =>{
@ -25,7 +25,7 @@ export default function GoToStoreModal({ visible, onClose, type}) {
const handleNavigateToMiniProgram = () => {
Taro.navigateToMiniProgram({
appId: 'wxbd3d383851fea776',
path: '',
path: memberInfo?.MallLink || '',
success: (res) => {
console.log('打开成功=>',res)
},
@ -57,14 +57,14 @@ export default function GoToStoreModal({ visible, onClose, type}) {
<View className='store_modal_close' onClick={handleOverlayClick}></View>
<View className='store_modal_title'></View>
<Text className='store_modal_context'>
{type === -1 ? '已过期' : '未开通'}VIP会员解锁全部专辑
{memberInfo.SubscribedState === -1 ? '已过期' : '未开通'}VIP会员解锁全部专辑
</Text>
<View
className='store_modal_container'
onClick={handleNavigateToMiniProgram}
>
<View
className='store_modal_title'
className='store_modal_btn'
>
</View>

@ -3,29 +3,34 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18rem;
height: 9rem;
width: 17rem;
background: #fff;
border-radius: 1rem;
display: flex;
flex-direction: column;
padding: .125rem;
padding: 0 .5rem .8rem;
z-index: 1000;
.store_modal_close {
width: 1.5rem;
height: 1.5rem;
margin: 1rem 1rem auto auto;
margin: .5rem 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: auto;
margin: .5rem 0 .8rem;
}
.store_modal_container {
@ -38,8 +43,8 @@
border-radius: 1rem;
margin: auto;
gap: 1rem;
.store_modal_title {
.store_modal_btn {
font-size: 1rem;
font-weight: 600;
height: 1.125rem;
@ -58,4 +63,4 @@
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
}

@ -56,6 +56,7 @@ export default function GoToStoreModal({ visible, onClose, type, mallLink = 'pag
}
>
<View className='store_modal_close' onClick={handleOverlayClick}></View>
<View className='store_modal_title'></View>
<Text className='store_modal_context'>
{type === 0 ? '您还没有订阅,请前往商城购买' : '更多绘本请前往商城选购'}
</Text>
@ -64,7 +65,7 @@ export default function GoToStoreModal({ visible, onClose, type, mallLink = 'pag
onClick={handleNavigateToMiniProgram}
>
<View
className='store_modal_title'
className='store_modal_btn'
>
</View>

@ -1,14 +1,41 @@
import { Image } from '@tarojs/components'
import Taro, { useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import './index.less'
export default function Customer() {
useShareAppMessage((res) => {
return {
title: '五色花',
path: '/pages/Home/index'
}
})
useShareTimeline(() => {
return {
title: '五色花',
path: '/pages/Home/index'
}
})
const handleLongPress = () => {
Taro.scanCode({
success: (res) => {
console.log(44, res)
},
fail: () => {
},
})
}
return (
<Image
src='https://oss.jm-kid.com/wx_5colorflower/icons/customer.svg'
className='pic'
mode='aspectFill'
show-menu-by-longpress
onLongPress={handleLongPress}
></Image>
)
}

@ -64,7 +64,7 @@ export default function ListenDetail() {
const [queryId, setqueryId] = useState('')
//会员开通状态
const [memberState, setMemberState] = useState(0)
const [memberInfo, setMemberInfo] = useState({})
useLoad((query) => {
setqueryId(query.prdtId)
@ -104,8 +104,8 @@ export default function ListenDetail() {
if(!Taro.getStorageSync('UserToken')){
setisLoginOpen(true)
}else{
console.log('IsSubscribed=>', memberState)
if (memberState !== 1) {
console.log('IsSubscribed=>', memberInfo)
if (memberInfo?.SubscribedState !== 1) {
//没有会员,跳转商城
setisToStoreOpen(true)
}else{
@ -148,7 +148,7 @@ export default function ListenDetail() {
},
success: (res: any) => {
if(res.data.state === 200){
setMemberState(res.data.data.main.SubscribedState)
setMemberInfo(res.data.data.main)
}
},
})
@ -251,7 +251,7 @@ export default function ListenDetail() {
<GoToMemberModal
visible={isToStoreOpen}
onClose={() => setisToStoreOpen(false)}
type={memberState}
memberInfo={memberInfo}
></GoToMemberModal>
</View>
)

@ -220,7 +220,14 @@ export default function Subscribe() {
}, [isFilter])
const requestUserSubscribe = () => {
if(!Taro.getStorageSync('UserToken')){
if (!Taro.getStorageSync('UserToken')) {
setuserSubscribeSingleList([])
setuserSubscribeCollectionList([])
setuserSubscribeSingleFreeCount(0)
setuserSubscribeSinglePaidCount(0)
setuserSubscribeCollectionFreeCount(0)
setuserSubscribeCollectionPaidCount(0)
setisLoginOpen(true)
}else{
//查询用户订阅信息
@ -619,7 +626,7 @@ export default function Subscribe() {
<View
className='subscribe_content_collectionItem'
key={index}
onClick={() => handleToCollectionDetail(item.PrdtId)}
onClick={() => handleToCollectionDetail(item)}
>
<View className='cover_wrap'>
<Image

@ -1,6 +1,6 @@
import { ScrollView, View, Text, Input, Image } from '@tarojs/components'
import React, { useState, useEffect } from 'react'
import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import Taro, { useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import DefaultPage2 from '../../../components/defaultPage2'
import PopupHalfScreen from '../../../components/Popup'
import './index.less'
@ -40,9 +40,6 @@ export default function UserSubscribe() {
//搜索框内容
const [searchValue, setsearchValue] = useState('')
//搜索内容
const [searchResult, setsearchResult] = useState([])
const [isPopupOpen, setisPopupOpen] = useState(false)
//记录用户筛选状态
@ -83,6 +80,7 @@ export default function UserSubscribe() {
setTimer(setTimeout(getList, 300))
}, [searchValue])
//跳转详情页
const handleToCollectionDetail = (id: string) => {
Taro.navigateTo({
@ -90,6 +88,21 @@ export default function UserSubscribe() {
})
}
// 续费
const toRenew = (item: any, e) => {
e.stopPropagation()
Taro.navigateToMiniProgram({
appId: 'wxbd3d383851fea776',
path: item.MallLink,
success: (res) => {
console.log('打开成功=>',res)
},
fail: (res) => {
console.log('打开失败=>',res)
}
})
}
return (
<View className='subscribe_bg'>
<View className='subscribe_header'>
@ -170,7 +183,7 @@ export default function UserSubscribe() {
>
<View className='item_content_title'>{item.PrdtTitle}</View>
<View className='item_content_endtime'>{item.PrdtDeadline.slice(0,10)}</View>
<View className='item_content_btn'> &gt;</View>
<View className='item_content_btn' onClick={(e) => toRenew(item, e)}> &gt;</View>
</View>
<View></View>
</View>

@ -103,7 +103,7 @@
.user_home_content_item_btn {
width: 1.5rem;
height: 1.5rem;
margin: 0 1rem;
margin-left: 1rem;
}
}

@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
import Taro, { useDidHide, useDidShow, useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import { Image, View, Text } from '@tarojs/components'
import UserExchangeModal from '../../components/UserExchangeModal'
import Gift from '../../components/gift'
import './index.less'
import GetPhoneNumber from '../../components/getPhoneModal'
@ -126,7 +125,7 @@ export default function UserHome() {
const state = data.Member.SubscribedState // 会员状态
list[0].des = data.Subscribed.Count
list[1].des = state === -1 ? '已过期' : state === 1 ? '已开通' : '未开通' // -1 已过期 1 已开通 0 未开通
list[6].des = data.Message.UnreadCount
list[6].des = data.Message.UnreadCount || ''
setOperationList([...list])
console.log(44,operationList )
}
@ -221,8 +220,6 @@ export default function UserHome() {
}
</View>
<Gift />
<UserExchangeModal isOpen={isUserExchangeModalOpen} setIsOpen={setisUserExchangeModalOpen}></UserExchangeModal>
<GetPhoneNumber

@ -35,20 +35,11 @@
.vip_card {
position: relative;
display: flex;
align-items: center;
padding: 1.5rem;
margin-bottom: 1rem;
border: 2px solid #ffd0c6;
border-radius: 1.5rem;
background: linear-gradient(to right, #fcc1b5 20%, #f8c8bd 50%, #fce4df 100%);
&::before {
content: '会员卡';
position: absolute;
top: .6rem;
right: 1rem;
font-size: .8rem;
color: #714135;
}
.vip_avatar{
width: 3.75rem;
height: 3.75rem;
@ -56,8 +47,12 @@
border: .0625rem solid #444;
border-radius: 50%;
}
.vip_info {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
}
.vip_name {
margin-bottom: .5rem;
font-size: 1rem;
font-weight: 600;
color: #714135;
@ -68,8 +63,8 @@
}
.vip_open {
position: absolute;
top: 3.5rem;
right: 2rem;
bottom: 1.5rem;
right: 1.5rem;
padding: .3rem .8rem;
font-size: .9rem;
font-weight: 600;

@ -8,6 +8,7 @@ interface RecordProps {
PrdtDeadline: string,
Title: string,
SubscribedState?: number,
MallLink: string
}
export default function Share() {
@ -24,7 +25,7 @@ export default function Share() {
const handleNavigateToMiniProgram = () => {
Taro.navigateToMiniProgram({
appId: 'wxbd3d383851fea776',
path: '',
path: info?.MallLink || '',
success: (res) => {
console.log('打开成功=>',res)
},

Loading…
Cancel
Save