351 lines
9.2 KiB
Vue
351 lines
9.2 KiB
Vue
<script setup>
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { ref, reactive } from 'vue'
|
||
import CardInput from '../components/card-input.vue'
|
||
import { useUI } from '@/utils/use-ui'
|
||
import { navigateBack } from '@/utils/router'
|
||
import { getUserIdCard, addUserIdCard } from '@/api/my-index'
|
||
import { validateIdCard, validatePhone } from '@/utils/validate'
|
||
import { addAnchor, getAnchorDetail } from '@/api/tui-kit'
|
||
|
||
const { showToast } = useUI()
|
||
|
||
const props = defineProps({
|
||
// 主播申请模式
|
||
isLiveStream: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 主播申请状态
|
||
* 0 待审核 1 审核通过 2 审核拒绝 3 已封禁 9 新增
|
||
*/
|
||
const stateLiveAnchor = defineModel({
|
||
type: Number,
|
||
default: 9
|
||
})
|
||
|
||
const loading = ref(true)
|
||
/** 身份证状态：0 新增 1 等待审核 2 编辑 3 不可以修改和新增 */
|
||
const stateData = ref(0)
|
||
const formData = reactive({
|
||
// 修改id
|
||
id: '',
|
||
// 正面
|
||
front: '',
|
||
// 背面
|
||
back: '',
|
||
// 姓名
|
||
realName: '',
|
||
// 身份证号码
|
||
idCard: '',
|
||
// 联系电话
|
||
phone: '',
|
||
frontList: [],
|
||
backList: []
|
||
})
|
||
|
||
const getData = async () => {
|
||
loading.value = true
|
||
const res = await getUserIdCard()
|
||
if (res?.data) {
|
||
formData.id = res.data.id
|
||
formData.front = res.data.idCardFrontUrl
|
||
formData.back = res.data.idCardBackUrl
|
||
formData.realName = res.data.realName
|
||
formData.idCard = res.data.idCardNumber
|
||
formData.frontList = [{ url: res.data.idCardFrontUrl }]
|
||
formData.backList = [{ url: res.data.idCardBackUrl }]
|
||
stateData.value = res.data.status
|
||
} else {
|
||
stateData.value = 0
|
||
}
|
||
|
||
loading.value = false
|
||
}
|
||
|
||
const onAddCode = async () => {
|
||
if (!formData.front) {
|
||
showToast('请上传身份证人像面')
|
||
return
|
||
}
|
||
if (!formData.back) {
|
||
showToast('请上传身份证国徽面')
|
||
return
|
||
}
|
||
if (!formData.realName) {
|
||
showToast('请输入姓名')
|
||
return
|
||
}
|
||
const codeData = validateIdCard(formData.idCard)
|
||
if (!codeData.valid) {
|
||
showToast(codeData.message)
|
||
return
|
||
}
|
||
|
||
const data = {
|
||
id: formData.id,
|
||
idCardFrontUrl: formData.front,
|
||
idCardBackUrl: formData.back,
|
||
realName: formData.realName,
|
||
idCardNumber: formData.idCard
|
||
}
|
||
await addUserIdCard(data, stateData.value === 0 ? 'post' : 'put')
|
||
|
||
if (props.isLiveStream) {
|
||
await getData()
|
||
await showToast(`添加成功`, 'success')
|
||
} else {
|
||
await showToast(`添加成功`, 'success')
|
||
navigateBack()
|
||
}
|
||
}
|
||
|
||
/** 主播申请 */
|
||
const onAddStreamer = async () => {
|
||
const phoneData = validatePhone(formData.phone)
|
||
if (!phoneData.valid) {
|
||
showToast(phoneData.message)
|
||
return
|
||
}
|
||
|
||
const id = await getAnchorDetail()
|
||
|
||
const data = {
|
||
id: id?.data?.id || '',
|
||
idCardFront: formData.front,
|
||
idCardBack: formData.back,
|
||
realName: formData.realName,
|
||
idCard: formData.idCard,
|
||
phone: formData.phone
|
||
}
|
||
const res = await addAnchor(
|
||
data,
|
||
stateLiveAnchor.value === 9 ? 'post' : 'put'
|
||
)
|
||
stateLiveAnchor.value = res.data.status
|
||
}
|
||
|
||
onLoad(() => {
|
||
getData()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view v-if="!loading" class="real-id">
|
||
<view v-if="[0, 2].includes(stateData)">
|
||
<view
|
||
v-if="
|
||
(props?.isLiveStream && [0, 2].includes(stateData)) ??
|
||
[0, 2, 3].includes(stateData)
|
||
"
|
||
>
|
||
<!-- 实名认证输入 -->
|
||
<!-- 说明 -->
|
||
<text v-if="stateData === 2" class="top-text">
|
||
*审核未通过请重新上传
|
||
</text>
|
||
<text v-else-if="stateData === 0" class="top-text">
|
||
*为保证您的账户安全,请先完成实名认证
|
||
</text>
|
||
<text v-else class="top-text">*您已完成实名认证</text>
|
||
<CardInput :is-input="false" title="证件">
|
||
<view class="qrcode-box">
|
||
<cb-file-picker
|
||
v-model="formData.front"
|
||
v-model:list="formData.frontList"
|
||
:readonly="stateData === 3"
|
||
isFront
|
||
></cb-file-picker>
|
||
<cb-file-picker
|
||
v-model="formData.back"
|
||
v-model:list="formData.backList"
|
||
:readonly="stateData === 3"
|
||
isBack
|
||
></cb-file-picker>
|
||
</view>
|
||
</CardInput>
|
||
|
||
<CardInput
|
||
v-model="formData.realName"
|
||
title="姓名"
|
||
placeholder="请输入姓名"
|
||
:disabled="stateData === 3"
|
||
></CardInput>
|
||
|
||
<CardInput
|
||
v-model="formData.idCard"
|
||
title="身份证号"
|
||
placeholder="请输入身份证号"
|
||
:disabled="stateData === 3"
|
||
></CardInput>
|
||
</view>
|
||
|
||
<!-- 从未实名认证过 -->
|
||
<view v-if="!props.isLiveStream">
|
||
<!-- 实名认证输入 -->
|
||
<!-- 说明 -->
|
||
<text v-if="stateData === 2" class="top-text">
|
||
*审核未通过请重新上传
|
||
</text>
|
||
<text v-else-if="stateData === 0" class="top-text">
|
||
*为保证您的账户安全,请先完成实名认证
|
||
</text>
|
||
<text v-else class="top-text">*您已完成实名认证</text>
|
||
<CardInput :is-input="false" title="证件">
|
||
<view class="qrcode-box">
|
||
<cb-file-picker
|
||
v-model="formData.front"
|
||
v-model:list="formData.frontList"
|
||
:readonly="stateData === 3"
|
||
isFront
|
||
></cb-file-picker>
|
||
<cb-file-picker
|
||
v-model="formData.back"
|
||
v-model:list="formData.backList"
|
||
:readonly="stateData === 3"
|
||
isBack
|
||
></cb-file-picker>
|
||
</view>
|
||
</CardInput>
|
||
|
||
<CardInput
|
||
v-model="formData.realName"
|
||
title="姓名"
|
||
placeholder="请输入姓名"
|
||
:disabled="stateData === 3"
|
||
></CardInput>
|
||
|
||
<CardInput
|
||
v-model="formData.idCard"
|
||
title="身份证号"
|
||
placeholder="请输入身份证号"
|
||
:disabled="stateData === 3"
|
||
></CardInput>
|
||
</view>
|
||
<!-- 底部按钮 v-if="props?.isLiveStream && stateData === 3" -->
|
||
<bottom-view
|
||
v-if="
|
||
props?.isLiveStream &&
|
||
stateData === 3 &&
|
||
[9, 2].includes(stateLiveAnchor)
|
||
"
|
||
>
|
||
<cb-button @click="onAddStreamer">确认</cb-button>
|
||
</bottom-view>
|
||
<bottom-view v-if="stateData !== 3">
|
||
<cb-button @click="onAddCode">
|
||
确认{{ formData.id ? '修改' : '添加' }}
|
||
</cb-button>
|
||
</bottom-view>
|
||
</view>
|
||
<!-- 主播申请输入 -->
|
||
<view
|
||
v-if="
|
||
props?.isLiveStream &&
|
||
stateData == 3 &&
|
||
[2, 9].includes(stateLiveAnchor)
|
||
"
|
||
>
|
||
<text v-if="stateLiveAnchor === 9" class="top-text">
|
||
*添加手机号审核
|
||
</text>
|
||
<text v-else class="top-text">*信息填写有误</text>
|
||
<CardInput
|
||
v-model="formData.phone"
|
||
title="联系电话"
|
||
placeholder="请输入联系电话"
|
||
></CardInput>
|
||
|
||
<bottom-view v-if="[9, 2].includes(stateLiveAnchor)">
|
||
<cb-button @click="onAddStreamer">确认</cb-button>
|
||
</bottom-view>
|
||
</view>
|
||
<view v-if="stateData == 3 && !props?.isLiveStream">
|
||
<text class="top-text">*您已完成实名认证</text>
|
||
<CardInput :is-input="false" title="证件">
|
||
<view class="qrcode-box">
|
||
<cb-file-picker
|
||
v-model="formData.front"
|
||
v-model:list="formData.frontList"
|
||
:readonly="stateData === 3"
|
||
isFront
|
||
></cb-file-picker>
|
||
<cb-file-picker
|
||
v-model="formData.back"
|
||
v-model:list="formData.backList"
|
||
:readonly="stateData === 3"
|
||
isBack
|
||
></cb-file-picker>
|
||
</view>
|
||
</CardInput>
|
||
|
||
<CardInput
|
||
v-model="formData.realName"
|
||
title="姓名"
|
||
placeholder="请输入姓名"
|
||
:disabled="stateData === 3"
|
||
></CardInput>
|
||
|
||
<CardInput
|
||
v-model="formData.idCard"
|
||
title="身份证号"
|
||
placeholder="请输入身份证号"
|
||
:disabled="stateData === 3"
|
||
></CardInput>
|
||
</view>
|
||
<view v-if="stateData == 1 || stateLiveAnchor == 0" class="wait-view">
|
||
<image
|
||
src="/static/images/my-index/date-icon.png"
|
||
mode="heightFix"
|
||
class="icon-img"
|
||
></image>
|
||
<text>等待审核</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../styles/index.scss';
|
||
|
||
.real-id {
|
||
padding: 32rpx 24rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
.top-text {
|
||
display: block;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.qrcode-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.wait-view {
|
||
margin-top: 10vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.icon-img {
|
||
height: 60rpx;
|
||
}
|
||
text {
|
||
margin-top: 20rpx;
|
||
display: block;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #999999;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
}
|
||
</style>
|