二维码兑换

src/components/UserExchangeSuccessModal/index.tsx

@@ -53,9 +53,9 @@ export default function UserExchangeModal({ isOpen, setIsOpen, exchangeState, pr
             exchangeState === '207' ?
               '该兑换码/二维码已被兑换，请核对后再来兑换' :
               exchangeState === '205' ?
-                '兑换码/二维码有误，请核对后再来兑换' :
+                '该兑换码/二维码有误，请核对后再来兑换' :
                 exchangeState === '206' ?
-                  '兑换码已过有效期' :
+                  '该兑换码/二维码已过期，请核对后再来兑换' :
                   exchangeState === '217' ?
                     '该兑换码/二维码你已兑换过，兑换的商品为：' :
                     '兑换商品：'

src/components/getPhoneModal/index.tsx

@@ -2,6 +2,7 @@ import { Button, View, Text } from '@tarojs/components'
 import { useState } from 'react'
 import Taro, { useLoad } from '@tarojs/taro'
 import './index.less'
+import UserExchangeSuccessModal from '../../components/UserExchangeSuccessModal'
 
 export default function GetPhoneNumber({ onClose, scene = null, modalVisible, onModalClose}) {
 
@@ -10,6 +11,18 @@ export default function GetPhoneNumber({ onClose, scene = null, modalVisible, on
 
   const [inviteCode, setInviteCode] = useState()
 
+  // 兑换成功弹窗
+  const [isUserExchangeSuccessModalOpen, setisUserExchangeSuccessModalOpen] = useState(false)
+
+  // 兑换接口返回的state
+  const [exchangeState, setExchangeState] = useState('')
+
+  // 兑换成功的商品名称字符串
+  const [prdtNames, setPrdtNames] = useState('')
+
+  // 兑换成功的商品名称数组
+  const [prdtList, setPrdtList] = useState([])
+
   useLoad((query)=> {
     console.log(query.inviteCode)
     setInviteCode(query.inviteCode || '')
@@ -63,34 +76,15 @@ export default function GetPhoneNumber({ onClose, scene = null, modalVisible, on
                 change_code: scene
               },
               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}\n`
-                  })
-
-                  Taro.showModal({
-                    title: '兑换成功',
-                    content: modalContent,
-                    showCancel: true,
-                    success: (modal_res) => {
-                      if (modal_res.confirm) {
-                        console.log('用户点击确定')
-                        Taro.navigateTo({
-                          url: '/pages/CollectionDetail/index?id=' + s_res.data.data.Subscribed[0].PrdtId
-                        })
-                      } else if (modal_res.cancel) {
-                        console.log('用户点击取消')
-                      }
-                    }
-                  })
-                }else if(s_res.data.state === '207'){
-                  Taro.showToast({
-                    title: '兑换码已使用',
-                    icon: 'error'
-                  })
+                const { state, data } = s_res.data
+                setExchangeState(state)
+                // 有返回商品名称，则显示；否则只显示提示语
+                if(data && data.Subscribed){
+                  const list = data.Subscribed
+                  setPrdtNames(list.map((n: any) => n.PrdtTitle).join('；'))
+                  setPrdtList(list)
                 }
+                setisUserExchangeSuccessModalOpen(true)
               },
               fail: (err: any) => {
                 console.log('兑换失败=>', err)
@@ -192,6 +186,8 @@ export default function GetPhoneNumber({ onClose, scene = null, modalVisible, on
         </View>
       </View>
 
+
+      <UserExchangeSuccessModal exchangeState={exchangeState} prdtList={prdtList} prdtNames={prdtNames} isOpen={isUserExchangeSuccessModalOpen} setIsOpen={setisUserExchangeSuccessModalOpen}></UserExchangeSuccessModal>
     </>
 
   )