contentCooper/src/views/setting/setting.tsx

import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom';
import wxLogin from './wxLogin'
import { Spin, Button } from 'antd';
import { UserInfo } from './type';
import http from '@src/http/index';
import { getBindPQUserInfo, bindPQUser } from "@src/http/api";

const CONFIG = {
	test: {
		appid: 'wx853a8d12eea0e682',
		url: 'https://piaoquantv.yishihui.com'
	},
	prod: {
		appid: 'wx73a6cb4d85be594f',
		url: 'https://www.piaoquantv.com'
	}
}

const Setting = () => {
	const { code } = useParams<{ code?: string }>();
	const [isLoading, setIsLoading] = useState(false);
	const [pqUserInfo, setPqUserInfo] = useState<UserInfo>();

	useEffect(() => {
		// 设置pq登录信息
		const pq_userInfo = localStorage.getItem('pq_userInfo');
		if (pq_userInfo) {
			setPqUserInfo(JSON.parse(pq_userInfo))
		} else {
			http.get(getBindPQUserInfo).then(res => {
				const { code, data } = res;
				if (code === 0 && data) {
					setPqUserInfo(data as UserInfo)
					localStorage.setItem('pq_userInfo', JSON.stringify(data as UserInfo))
				} else {
					renderQrcode()
				}
			})
		}
	}, [])

	useEffect(() => {
		// 获取用户信息
		if (code) {
			getPiaoQuanUserInfo(code)
		} else {
			renderQrcode()
		}
	}, [])

	const getPiaoQuanUserInfo = async (code: string) => {
		setIsLoading(true)
		http.post(bindPQUser, {
			code,
			appType: 8,
			appId: 'wx853a8d12eea0e682'
		}, {
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded',
			},
		}).then(res => {
			const { code, data } = res;
			if (code === 0 && data) {
				localStorage.setItem('pq_userInfo', JSON.stringify(data as UserInfo))
				setPqUserInfo(data as UserInfo)
				setIsLoading(false)
			}
		})
	}

	const renderQrcode = () => {
		const env = window.location.host === ('content.piaoquantv.com') ? 'prod' : 'test'
		wxLogin({
			id: 'code',
			appid: CONFIG[env].appid,
			scope: 'snsapi_login',
			redirect_uri: encodeURIComponent(CONFIG[env].url + '?jumpTo=contentCooper'),
		})
	}

	const postVideo = () => {
		window.location.href = '/publishContent/videos'
	}

  return (
		<div className='w-full h-full'>
			<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>
			{
				pqUserInfo || code ? ( isLoading ? <Spin spinning={isLoading} className='mt-10! ml-10!' tip='账号关联中...'></Spin> : (
						<div className="w-[450px] m-auto mt-[50px] text-center">
							<div className='text-xl text-black-800 font-bold'>已完成视频归属用户的绑定!</div>
							<div className='text-black-600 mt-8'>
								视频归属用户的微信昵称：{pqUserInfo?.nickName}
							</div>
							<div className='text-black-600 mt-4'>
								视频归属用户的票圈UID：{pqUserInfo?.uid}
							</div>
							<div className='text-black-600 mt-10'>
								<Button type="primary" onClick={postVideo}>去发视频</Button>
							</div>
						</div>
					)
				) : (
					<div className='px-4 py-2 max-h-[calc(100vh-200px)] h-[calc(100vh-200px)] overflow-y-auto'>
							<div id='code' className='m-[50px]'></div>
							<div className='text-gray-500 w-[450px] m-auto'>
								1、手动上传的视频需要绑定一名微信用户作为视频的所有者，请使用所有者的微信账号扫描上方二维码完成绑定。
							</div>
							<div className='text-gray-500 w-[450px] m-auto mt-2'>
								2、完成一次绑定后，后续无需重复绑定。若需要更换视频所有者对应的微信账号，可解绑后重新绑定（后续支持）。
							</div>
					</div>
				)	
			}
		</div>
  )
}

export default Setting