1

src/views/setting/setting.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom';
 import wxLogin from './wxLogin'
+import { Spin } from 'antd';
 
 const CONFIG = {
 	test: {
@@ -14,7 +15,9 @@ const CONFIG = {
 }
 
 const Setting = () => {
-  const { code } = useParams<{ code?: string }>(); // /setting/xxx
+	const { code } = useParams<{ code?: string }>(); // /setting/xxx
+	const [isLoading, setIsLoading] = useState(false)
+	
 	useEffect(() => {
 		// 获取链接参数 code
 		console.log(code)
@@ -27,7 +30,11 @@ const Setting = () => {
 	}, [])
 
 	const getPiaoQuanUserInfo = async (code: string) => {
+		setIsLoading(true)
 		console.log(code)
+		setTimeout(() => {
+			setIsLoading(false)
+		}, 200)
 	}
 
 	const renderQrcode = () => {
@@ -45,9 +52,33 @@ const Setting = () => {
 			<div className='px-6 py-1 flex flex-row justify-between items-center border-b border-gray-300'>
 				<div className='text-2xl font-bold'>视频上传归属用户</div>
 			</div>
-			<div className='px-4 py-2 max-h-[calc(100vh-200px)] h-[calc(100vh-200px)] overflow-y-auto'>
-				<div id='code'></div>
-			</div>
+			{
+				code ? ( isLoading ? <Spin spinning={isLoading} className='mt-10! ml-10!' tip='账号关联中...'>
+					</Spin> : (
+						<div className="w-full mt-10! ml-10!">
+							<div className='text-xl text-black-800'>已完成视频归属用户的绑定！</div>
+							<div className='text-xl  text-black-600 mt-4'>
+								视频归属用户的微信昵称：可爱的小马
+							</div>
+							<div className='text-xl text-black-600 mt-4'>
+								视频归属用户的票圈UID：5662345
+							</div>
+						</div>
+					)
+				) : (
+					<div className='px-4 py-2 max-h-[calc(100vh-200px)] h-[calc(100vh-200px)] overflow-y-auto'>
+							<div id='code'></div>
+							<div className='text-gray-500'>
+								1、手动上传的视频需要绑定一名微信用户作为视频的所有者，请使用所有者的微信账号扫描上方二维码完成绑定。
+							</div>
+							<div className='text-gray-500'>
+								2、完成一次绑定后，后续无需重复绑定。若需要更换视频所有者对应的微信账号，可解绑后重新绑定（后续支持）。
+							</div>
+					</div>
+				)	
+			}
+			
+			
 			
 		</div>
   )