huoran
/
FE_five-color-flower
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

Browse Source
master
yujialong 3 weeks ago
parent 6544397bd8
commit dfc92dd7dd
5 changed files with 213 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 141
      src/components/Popup/index.tsx
  2. 10
      src/pages/Subscribe/index.tsx
  3. 27
      src/pages/UserHome/UserSubscribe/index.less
  4. 45
      src/pages/UserHome/UserSubscribe/index.tsx
  5. 115
      src/pages/UserHome/index.tsx

141
src/components/Popup/index.tsx
Unescape View File

@ -3,10 +3,12 @@ import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import './index.less'
export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }) {
export default function PopupHalfScreen({ visible, onClose, hideFilter, onFilter }) {
//弹窗内容数据
const [popUpContextList, setpopUpContextList] = useState<any[]>([])
const [states, setStates] = useState<any[]>([])
const [refer, setRefer] = useState<any[]>([])
//管理关闭动画状态
const [isAnimationOpen, setisAnimationOpen] = useState(false)
@ -14,6 +16,13 @@ export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }
//本地记录筛选内容
const [userFilter, setuserFilter] = useState(0)
//记录用户筛选状态
const [filterForm, setFilterForm] = useState({
filter: '',
state: '',
refer: '',
})
useEffect(() => {
Taro.request({
url: 'https://interapi.jm-kid.com/api/product/filter',
@ -26,7 +35,10 @@ export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }
},
success: (res) => {
console.log('订阅筛选分类请求成功=>', res.data)
setpopUpContextList(res.data.data)
const { data } = res
setpopUpContextList(data.data)
setStates(data.state)
setRefer(data.refer)
},
fail: (err) => {
console.log('订阅筛选分类请求失败=>', err)
@ -34,7 +46,7 @@ export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }
})
}, [])
if (!visible) {
return null;
@ -49,15 +61,25 @@ export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }
}, 500)
};
const handleFilterSelect = (target: number) => {
if(isfilter === target){
// onFilter('')
setuserFilter(0)
}else{
// onFilter(target)
setuserFilter(target)
}
const handleFilterSelect = (val: string) => {
setFilterForm({
...filterForm,
filter: filterForm.filter === val ? '' : val
})
}
const handleStateSelect = (val: string) => {
setFilterForm({
...filterForm,
state: filterForm.state === val ? '' : val
})
}
const handleReferSelect = (val: string) => {
setFilterForm({
...filterForm,
refer: filterForm.refer === val ? '' : val
})
}
const handleReset = () => {
@ -67,7 +89,7 @@ export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }
}
const handleCommit = () => {
onFilter(userFilter)
onFilter(filterForm)
handleOverlayClick(null)
}
@ -90,8 +112,8 @@ export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }
<View className='popup_content' onClick={(e) => e.stopPropagation()}>
{/* 弹窗内容 */}
<View className='popop_content_header'>
<Image
className='popup_content_header_icon'
<Image
className='popup_content_header_icon'
src='https://oss.jm-kid.com/wx_5colorflower/foldUp.svg'
onClick={handleOverlayClick}
/>
@ -103,8 +125,8 @@ export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }
scrollWithAnimation
>
{
popUpContextList.map((item: any, index: number) => (
<View
!hideFilter && popUpContextList.map((item: any, index: number) => (
<View
className='popup_content_body_item'
key={index}
>
@ -112,23 +134,23 @@ export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }
<View className='popup_content_body_item_group'>
{
item.category.map((subItem: any, subIndex: number) => (
<View
<View
className='popup_content_body_item_group_bar'
key={subIndex}
onClick={()=>handleFilterSelect(subItem.id)}
style={
userFilter === subItem.id ? {
filterForm.filter === subItem.id ? {
backgroundColor: '#3BA366'
} : {}
}
>
<Text
<Text
className='popup_content_body_item_group_bar_title'
style={
userFilter === subItem.id ? {
filterForm.filter === subItem.id ? {
color: '#ffffff'
} : {}
}
}
>{subItem.title}</Text>
</View>
))
@ -137,25 +159,82 @@ export default function PopupHalfScreen({ visible, onClose, isfilter, onFilter }
</View>
))
}
<View className='popup_content_body_item'>
<Text className='popup_content_body_item_title'>状态</Text>
<View className='popup_content_body_item_group'>
{
states.map((item: any, index: number) => (
<View
className='popup_content_body_item_group_bar'
key={index}
onClick={()=>handleStateSelect(item.id)}
style={
filterForm.state === item.id ? {
backgroundColor: '#3BA366'
} : {}
}
>
<Text
className='popup_content_body_item_group_bar_title'
style={
filterForm.state === item.id ? {
color: '#ffffff'
} : {}
}
>{item.title}</Text>
</View>
))
}
</View>
</View>
<View className='popup_content_body_item'>
<Text className='popup_content_body_item_title'>来源</Text>
<View className='popup_content_body_item_group'>
{
refer.map((item: any, index: number) => (
<View
className='popup_content_body_item_group_bar'
key={index}
onClick={()=>handleReferSelect(item.id)}
style={
filterForm.refer === item.id ? {
backgroundColor: '#3BA366'
} : {}
}
>
<Text
className='popup_content_body_item_group_bar_title'
style={
filterForm.refer === item.id ? {
color: '#ffffff'
} : {}
}
>{item.title}</Text>
</View>
))
}
</View>
</View>
</ScrollView>
<View className='popup_content_footer'>
<View
className='popup_content_footer_btn'
<View
className='popup_content_footer_btn'
style={{background: '#3BA366'}}
onClick={handleReset}
>
<Text
className='popup_content_footer_btn_text'
<Text
className='popup_content_footer_btn_text'
style={{color: '#fff'}}
>重置</Text>
</View>
<View
className='popup_content_footer_btn'
<View
className='popup_content_footer_btn'
style={{background: '#FCCA1E'}}
onClick={handleCommit}
onClick={handleCommit}
>
<Text
className='popup_content_footer_btn_text'
<Text
className='popup_content_footer_btn_text'
style={{color: '#000'}}
>确定</Text>
</View>

10
src/pages/Subscribe/index.tsx
Unescape View File

@ -60,8 +60,7 @@ export default function Subscribe() {
//管理登录弹窗
const [isLoginOpen, setisLoginOpen] = useState(false)
//记录用户筛选状态
const [isFilter, setisFilter] = useState('')
const [isFilter, setisFilter] = useState(null)
useEffect(() => {
if(isFilter){
@ -162,7 +161,7 @@ export default function Subscribe() {
},
data: {
timestamp: Date.now(),
filter: isFilter
...isFilter
},
success: (res: any) => {
console.log('用户订阅信息', res)
@ -547,7 +546,6 @@ export default function Subscribe() {
<PopupHalfScreen
visible={isPopupOpen}
onClose={() => setisPopupOpen(!isPopupOpen)}
isfilter={isFilter}
onFilter={setisFilter}
></PopupHalfScreen>
@ -644,7 +642,7 @@ export default function Subscribe() {
}
{
isGetUsePhone && (isFilter === '' || isFilter === 'reset') && <View
isGetUsePhone && (!isFilter || isFilter === 'reset') && <View
className='subscribe_content_singleItem_add'
onClick={()=>{setisToStoreOpen(true)}}
>
@ -658,7 +656,7 @@ export default function Subscribe() {
{
isGetUsePhone && (isFilter === '' || isFilter === 'reset') &&
isGetUsePhone && (!isFilter || isFilter === 'reset') &&
<View className='subscribe_footer'>
<Text className='subscribe_footer_tips'>
{

27
src/pages/UserHome/UserSubscribe/index.less
Unescape View File

@ -100,7 +100,7 @@
width: calc(100% - 2rem);
height: auto;
display: flex;
padding: 1rem;
padding: .7rem;
flex-direction: column;
background: #ffffff;
border-radius: 1rem;
@ -125,14 +125,14 @@
.item_header_addtime_text {
width: auto;
font-size: .875rem;
font-size: .7rem;
color: rgba(0, 0, 0, .6);
margin: auto auto auto .25rem;
}
.item_header_icon {
width: 3rem;
height: 1.5rem;
width: 3.8rem;
height: 1.6rem;
border-radius: 1.5rem;
display: flex;
@ -236,27 +236,14 @@
.item_content_endtime {
width: auto;
font-size: .875rem;
font-size: .8rem;
color: rgba(0, 0, 0, .4);
margin: 0 auto auto 0;
}
.item_content_btn {
width: 6.25rem;
height: 1.75rem;
border-radius: 2.0625rem;
background: linear-gradient(to right, #fcb11e, #fcca1e);
margin: auto auto .25rem 0;
display: flex;
.item_content_btn_context {
width: auto;
line-height: 1.25rem;
font-size: .875rem;
font-weight: 600;
color: #000000;
margin: auto;
}
font-size: .85rem;
color: #3BA366;
}
}
}

45
src/pages/UserHome/UserSubscribe/index.tsx
Unescape View File

@ -46,21 +46,36 @@ export default function UserSubscribe() {
const [isPopupOpen, setisPopupOpen] = useState(false)
//记录用户筛选状态
const [isFilter, setisFilter] = useState('')
const [isFilter, setisFilter] = useState(null)
useLoad(() => {
const getList = () => {
let data = {
timestamp: Date.now(),
}
if (isFilter !== 'reset') data = {
...data,
...isFilter
}
Taro.request({
url: 'https://interapi.jm-kid.com/api/user/subscribed',
method: 'POST',
header: {
authorization: `bearer ${Taro.getStorageSync('UserToken')}`,
},
data,
success: (res: any) => {
console.log('用户订阅查询成功=>', res.data)
res.data.data.forEach((e: any) => {
e.refer = e.OrdRefer === 1 ? '购买' : e.OrdRefer === 2 ? '兑换' : '赠送'
})
setuserSubuscribed(res.data.data)
}
})
})
}
useEffect(() => {
getList()
}, [isFilter])
// 搜索逻辑
const handleSearch = () => {
@ -106,7 +121,7 @@ export default function UserSubscribe() {
<PopupHalfScreen
visible={isPopupOpen}
onClose={() => setisPopupOpen(!isPopupOpen)}
isfilter={isFilter}
hideFilter='1'
onFilter={setisFilter}
></PopupHalfScreen>
@ -124,21 +139,21 @@ export default function UserSubscribe() {
>
<View className='item_header'>
<View className='item_header_addtime_icon'></View>
<Text className='item_header_addtime_text'>{item.OrdDate}</Text>
<Text className='item_header_addtime_text'>最新订阅时间 {item.OrdDate} {item.refer}</Text>
<View
className='item_header_icon'
style={
item.OrdRefer === 2 ? { backgroundColor: '#3BA366' } : { backgroundColor: '#FCCA1E' }
item.SubscribedState === 1 ? { backgroundColor: '#3BA366' } : { backgroundColor: '#FCCA1E' }
}
>
<View
className='item_header_icon_text'
style={
item.OrdRefer === 2 ? { color: '#fff' } : { color: '#000' }
item.SubscribedState === 1 ? { color: '#fff' } : { color: '#000' }
}
>
{
item.OrdRefer === 2 ? '兑换' : '购买'
item.SubscribedState === -1 ? '已过期' : '生效中'
}
</View>
</View>
@ -146,13 +161,6 @@ export default function UserSubscribe() {
<View className='item_content'>
<View className={'content_container' + 1}>
<View className={'aspect_ratio_flex_container' + 1}>
{
Date.parse(item.PrdtDeadline.split(' ')[0] + 'T' + item.PrdtDeadline.split(' ')[1] + 'Z') < Date.now() &&
<View className='shade'>
<View className='shade_context'>已过期</View>
</View>
}
<View
className={'item_content_image' + 1}
style={{backgroundImage: `url(${item.PrdtCover})`}}
@ -168,12 +176,7 @@ export default function UserSubscribe() {
>
<View className='item_content_title'>{item.PrdtTitle}</View>
<View className='item_content_endtime'>到期时间：{item.PrdtDeadline.slice(0,10)}</View>
{
Date.parse(item.PrdtDeadline.split(' ')[0] + 'T' + item.PrdtDeadline.split(' ')[1] + 'Z') < Date.now() &&
<View className='item_content_btn'>
<View className='item_content_btn_context'>去订阅~</View>
</View>
}
<View className='item_content_btn'>去续费 &gt;</View>
</View>
<View></View>
</View>

115
src/pages/UserHome/index.tsx
Unescape View File

@ -1,58 +1,13 @@
import React, { useEffect, useState } from 'react'
import Taro, { useDidHide, useDidShow, useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import { Button, Image, View, Text } from '@tarojs/components'
import { Image, View, Text } from '@tarojs/components'
import UserExchangeModal from '../../components/UserExchangeModal'
import Gift from '../../components/gift'
import serviceIcon from '../../assets/images/service.svg'
import storeIcon from '../../assets/images/store.png'
import './index.less'
import GetPhoneNumber from '../../components/getPhoneModal'
const userOperateList = [
{
name: '我的订阅',
icon: 'https://oss.jm-kid.com/wx_5colorflower/operate2.svg',
pushUrl: '/pages/UserHome/UserSubscribe/index',
des: 10,
},
{
name: '熏听会员',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate5.svg',
pushUrl: '/pages/Vip/index',
des: '未开通',
},
{
name: '兑换码',
icon: 'https://oss.jm-kid.com/wx_5colorflower/operate1.svg',
pushUrl: '',
},
{
name: '商城',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate4.svg',
pushUrl: '',
},
{
name: '邀请好友',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate7.svg',
pushUrl: '/pages/Share/index',
des: '免费领绘本',
},
{
name: '联系客服',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate8.svg',
pushUrl: '/pages/Customer/index',
},
{
name: '消息',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate6.svg',
pushUrl: '/pages/UserHome/UserMessage/index',
des: 10,
},
]
export default function UserHome() {
useShareAppMessage((res) => {
if (res.from === 'button') {
console.log(res.target);
@ -70,6 +25,48 @@ export default function UserHome() {
}
})
const [operationList, setOperationList] = useState([
{
name: '我的订阅',
icon: 'https://oss.jm-kid.com/wx_5colorflower/operate2.svg',
pushUrl: '/pages/UserHome/UserSubscribe/index',
des: 0,
},
{
name: '熏听会员',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate5.svg',
pushUrl: '/pages/Vip/index',
des: '未开通',
},
{
name: '兑换码',
icon: 'https://oss.jm-kid.com/wx_5colorflower/operate1.svg',
pushUrl: '',
},
{
name: '商城',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate4.svg',
pushUrl: '',
},
{
name: '邀请好友',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate7.svg',
pushUrl: '/pages/Share/index',
des: '免费领绘本',
},
{
name: '联系客服',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate8.svg',
pushUrl: '/pages/Customer/index',
},
{
name: '消息',
icon: 'https://oss.jm-kid.com/wx_5colorflower/icons/operate6.svg',
pushUrl: '/pages/UserHome/UserMessage/index',
des: 0,
},
])
const [userAvator, setuserAvator] = useState('')
const [userNickName, setuserNickName] = useState('')
@ -111,6 +108,30 @@ export default function UserHome() {
if(Taro.getStorageSync('UserToken')){
setuserAvator(Taro.getStorageSync('UserAvatar'))
setuserNickName(Taro.getStorageSync('UserNickName'))
Taro.request({
url: 'https://interapi.jm-kid.com/api/info/num',
method: 'POST',
header: {
authorization: `bearer ${Taro.getStorageSync('UserToken')}`
},
data: {
timestamp: Date.now(),
},
success: (res: any) => {
if(res.data.state === 200){
// res.data.data
const { data } = res.data
const list = operationList
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
setOperationList([...list])
console.log(44,operationList )
}
},
})
}
})
@ -178,7 +199,7 @@ export default function UserHome() {
<View className='user_home_content'>
{
userOperateList.map((item: any, index: number) => (
operationList.map((item: any, index: number) => (
<View
key={index}
className='user_home_content_item'

Write Preview
Loading…
Cancel
Save