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

兑换成功弹框

Browse Source
master
yujialong 1 month ago
parent 7a3ac5203b
commit ac3ace5a56
5 changed files with 176 additions and 84 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. 80
      src/components/UserExchangeModal/index.tsx
  2. 72
      src/components/UserExchangeSuccessModal/index.less
  3. 64
      src/components/UserExchangeSuccessModal/index.tsx
  4. 42
      src/pages/Home/index.tsx
  5. 2
      src/pages/UserHome/index.tsx

80
src/components/UserExchangeModal/index.tsx
Unescape View File

@ -3,6 +3,7 @@ import Taro from '@tarojs/taro'
import { Input, View, Text } from '@tarojs/components'
import './index.less'
import GetPhoneNumber from '../getPhoneModal'
import UserExchangeSuccessModal from '../UserExchangeSuccessModal'
interface Props{
isOpen: boolean,
@ -16,11 +17,20 @@ export default function UserExchangeModal({ isOpen, setIsOpen }: Props) {
const [userScene, setuserScene] = useState<any>(null)
//管理登录弹窗
const [isGetUsePhone, setisGetUsePhone] = useState(false) //false
const [isGetUsePhone, setisGetUsePhone] = useState(false)
//管理登录弹窗
const [isLoginOpen, setisLoginOpen] = useState(false)
// 兑换成功弹窗
const [isUserExchangeSuccessModalOpen, setisUserExchangeSuccessModalOpen] = useState(false)
// 兑换成功的商品名称字符串
const [prdtNames, setPrdtNames] = useState('')
// 兑换成功的商品名称数组
const [prdtList, setPrdtList] = useState([])
//唤起扫码
const handleScanCode = () => {
console.log('唤起扫码')
@ -43,34 +53,12 @@ export default function UserExchangeModal({ isOpen, setIsOpen }: Props) {
},
success: (s_res: any) => {
console.log('兑换成功=>', s_res.data)
if(s_res.data.state === '200'){
let modalContent = '兑换成功:'
s_res.data.data.Subscribed.forEach(element => {
modalContent += `${element.PrdtTitle};`
})
Taro.showModal({
title: '兑换成功',
content: modalContent,
showCancel: true,
success: (modal_res) => {
setIsOpen(false)
if (modal_res.confirm) {
console.log('用户点击确定')
if(s_res.data.data.Subscribed[0].PrdtType === '03'){
Taro.navigateTo({
url: '/pages/ListenDetail/index?prdtId=' + s_res.data.data.Subscribed[0].PrdtId
})
}else if(s_res.data.data.Subscribed[0].PrdtType === '05'){
Taro.navigateTo({
url: '/pages/CollectionDetail/index?id=' + s_res.data.data.Subscribed[0].PrdtId
})
}
} else if (modal_res.cancel) {
console.log('用户点击取消')
}
}
})
if (s_res.data.state === '200') {
const list = s_res.data.data.Subscribed
setPrdtNames(list.map((e: any) => e.PrdtTitle).join('；'))
setPrdtList(list)
setIsOpen(false)
setisUserExchangeSuccessModalOpen(true)
}else if(s_res.data.state === '207'){
Taro.showToast({
title: '兑换码已使用',
@ -103,34 +91,10 @@ export default function UserExchangeModal({ isOpen, setIsOpen }: Props) {
success: (res: any) => {
console.log('兑换成功=>', res.data)
if(res.data.state === '200'){
let modalContent = '兑换成功:'
res.data.data.Subscribed.forEach(element => {
modalContent += `${element.PrdtTitle};`
})
console.log(modalContent)
Taro.showModal({
title: '兑换成功',
content: modalContent,
showCancel: true,
success: (modal_res) => {
setIsOpen(false)
if (modal_res.confirm) {
console.log('用户点击确定')
if(res.data.data.Subscribed[0].PrdtType === '03'){
Taro.navigateTo({
url: '/pages/ListenDetail/index?prdtId=' + res.data.data.Subscribed[0].PrdtId
})
}else if(res.data.data.Subscribed[0].PrdtType === '05'){
Taro.navigateTo({
url: '/pages/CollectionDetail/index?id=' + res.data.data.Subscribed[0].PrdtId
})
}
} else if (modal_res.cancel) {
console.log('用户点击取消')
}
}
})
const list = res.data.data.Subscribed
setPrdtNames(list.map((e: any) => e.PrdtTitle).join('；'))
setPrdtList(list)
setIsOpen(false)
}else if(res.data.state === '207'){
Taro.showToast({
title: '兑换码已使用',
@ -187,6 +151,8 @@ export default function UserExchangeModal({ isOpen, setIsOpen }: Props) {
</View>
</View>
<UserExchangeSuccessModal prdtList={prdtList} prdtNames={prdtNames} isOpen={isUserExchangeSuccessModalOpen} setIsOpen={setisUserExchangeSuccessModalOpen}></UserExchangeSuccessModal>
<GetPhoneNumber
onClose={setisGetUsePhone}
scene={userScene}

72
src/components/UserExchangeSuccessModal/index.less
Unescape View File

@ -0,0 +1,72 @@
.exchange_sucess_mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.exchangee_sucess_modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(18rem - 2rem);
background: #fff;
border-radius: 1rem;
display: flex;
flex-direction: column;
padding: .9375rem 1rem;
z-index: 1000;
gap: .5rem;
.exchange_header {
width: 100%;
height: 1.625rem;
display: flex;
.exchange_close {
width: 1.5rem;
height: 1.5rem;
margin: auto 0 auto auto;
background-image: url(https://oss.jm-kid.com/wx_5colorflower/close.png);
background-size: cover;
background-repeat: no-repeat;
}
}
.exchange_content {
display: flex;
margin-bottom: 1rem;
}
.exchange_suc {
font-size: .9rem;
color: #333;
white-space: nowrap;
}
.exchange_prod_name {
margin-bottom: .3rem;
font-size: .9rem;
color: #3ba366;
}
.exchange_exchange {
width: 10rem;
height: 2rem;
border-radius: 1rem;
background-color: #3ba366;
margin: 0 auto;
display: flex;
.exchange_exchange_text {
width: auto;
font-size: 1rem;
font-weight: 600;
color: #fff;
text-align: center;
margin: auto;
}
}
}

64
src/components/UserExchangeSuccessModal/index.tsx
Unescape View File

@ -0,0 +1,64 @@
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
interface Props{
isOpen: boolean,
setIsOpen: (isOpen: boolean) => void,
prdtNames: string,
prdtList: any[]
}
export default function UserExchangeModal({ isOpen, setIsOpen, prdtNames, prdtList }: Props) {
const handleExchange = () => {
if(prdtList[0].PrdtType === '03'){
Taro.navigateTo({
url: '/pages/ListenDetail/index?prdtId=' + prdtList[0].PrdtId
})
}else if(prdtList[0].PrdtType === '05'){
Taro.navigateTo({
url: '/pages/CollectionDetail/index?id=' + prdtList[0].PrdtId
})
}
}
if(!isOpen){
return null
}
return (
<>
<View
className='exchange_sucess_mask'
onClick={() => setIsOpen(false)}
></View>
<View className='exchangee_sucess_modal'>
<View className='exchange_header'>
<View className='exchange_title'></View>
<View
className='exchange_close'
onClick={() => setIsOpen(false)}
></View>
</View>
{
prdtList.length ?
<View
className='exchange_content'
>
<Text className='exchange_suc'>兑换成功：</Text>
<Text className='exchange_prod_name'>{prdtNames}</Text>
</View> :
null
}
<View
className='exchange_exchange'
onClick={handleExchange}
>
<Text className='exchange_exchange_text'>立即阅读</Text>
</View>
</View>
</>
)
}

42
src/pages/Home/index.tsx
Unescape View File

@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
import './index.less'
import GetPhoneNumber from '../../components/getPhoneModal'
import GoToStoreModal from '../../components/goToStoreModal'
import UserExchangeSuccessModal from '../../components/UserExchangeSuccessModal'
interface FreeItemProps {
Child: any[],
@ -60,32 +61,10 @@ export default function Home() {
success: (s_res: any) => {
console.log('兑换成功=>', s_res.data)
if(s_res.data.state === '200'){
let modalContent = '兑换成功:'
s_res.data.data.Subscribed.forEach(element => {
modalContent += `${element.PrdtTitle};`
})
Taro.showModal({
title: '兑换成功',
content: modalContent,
showCancel: true,
success: (modal_res) => {
if (modal_res.confirm) {
console.log('用户点击确定')
if(s_res.data.data.Subscribed[0].PrdtType === '03'){
Taro.navigateTo({
url: '/pages/ListenDetail/index?prdtId=' + s_res.data.data.Subscribed[0].PrdtId
})
}else if(s_res.data.data.Subscribed[0].PrdtType === '05'){
Taro.navigateTo({
url: '/pages/CollectionDetail/index?id=' + s_res.data.data.Subscribed[0].PrdtId
})
}
} else if (modal_res.cancel) {
console.log('用户点击取消')
}
}
})
const list = s_res.data.data.Subscribed
setPrdtNames(list.map((e: any) => e.PrdtTitle).join('；'))
setPrdtList(list)
setisUserExchangeSuccessModalOpen(true)
}else if(s_res.data.state === '207'){
Taro.showToast({
title: '兑换码已使用',
@ -123,6 +102,15 @@ export default function Home() {
//管理跳转页面路径
const [prdtMallLink, setprdtMallLink] = useState('')
// 兑换成功弹窗
const [isUserExchangeSuccessModalOpen, setisUserExchangeSuccessModalOpen] = useState(false)
// 兑换成功的商品名称字符串
const [prdtNames, setPrdtNames] = useState('')
// 兑换成功的商品名称数组
const [prdtList, setPrdtList] = useState([])
//点击免费试读跳转
const handleNavigateToFreeRead = (id: number) => {
console.log('点击免费试读跳转', id)
@ -410,6 +398,8 @@ export default function Home() {
</View>
<UserExchangeSuccessModal prdtList={prdtList} prdtNames={prdtNames} isOpen={isUserExchangeSuccessModalOpen} setIsOpen={setisUserExchangeSuccessModalOpen}></UserExchangeSuccessModal>
<GetPhoneNumber
onClose={setisGetUsePhone}

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

@ -121,7 +121,7 @@ export default function UserHome() {
Taro.navigateTo({
url: url,
})
}else if(index === 0){
} else if (index === 0) {
setisUserExchangeModalOpen(true)
}
}

Write Preview
Loading…
Cancel
Save