new-cashier/jeepay-ui-uapp-agent/pageWork/information/readOnlyInformation.vue

<template>
  <view class="page-wrapper bgF">
    <JHeaderTitle :back="false" :logOut="true" title="完善资料" :bgColor="userInfo.state == 1 ? '#1dcc64' : '#FFCC66'"></JHeaderTitle>
    <view class="page-header" :style="{ backgroundColor: userInfo.state == 1 ? '#1dcc64' : '#FFCC66' }">
      <image v-if="userInfo.state != 1" :class="[animation]" src="/static/iconImg/icon-examine.svg" mode="scaleToFill" />
      <view v-if="userInfo.state != 1">您的资料正在审核中，请耐心等待…</view>
      <view v-if="userInfo.state === 1" class="login bdR20" @tap="loginOut">审核通过请点击重新登录</view>
    </view>
    <view class="page-main">
      <JMainCard wrapPd="30rpx" pd="0" bgColor="#f2f2f2">
        <JInput name="代理商类型" :img="true" :isBorder="true">
          <view class="agent-type">{{ userInfo.agentType == 1 ? '个人' : '企业' }}</view>
        </JInput>
      </JMainCard>
      <JMainCard wrapPd="30rpx" pd="0" bgColor="#f2f2f2">
        <template v-if="userInfo.agentType === 1">
          <JInput name="代理商全称" :isBorder="true">{{ userInfo.agentName }}</JInput>
          <JInput name="代理商简称" borderBg="#D9D9D9">{{ userInfo.agentShortName }}</JInput>
        </template>
        <template v-if="userInfo.agentType === 2">
          <JInput name="企业全称" borderBg="#D9D9D9">
            {{ userInfo.agentName }}
          </JInput>
          <JInput name="企业简称" borderBg="#D9D9D9">
            {{ userInfo.agentShortName }}
          </JInput>
        </template>
        <JInput name="联系人姓名" borderBg="#D9D9D9">
          {{ userInfo.contactName }}
        </JInput>
        <JInput name="联系人邮箱" borderBg="#D9D9D9">
          {{ userInfo.contactEmail }}
        </JInput>
      </JMainCard>
      <JMainCard wrapPd="0 30rpx" pd="0" bgColor="#f2f2f2">
        <JUpLoad name="联系人身份证人像面" :imgUrl="userInfo.idcard1Img || imgUrl" borderNone></JUpLoad>
        <JUpLoad name="联系人身份证国徽面" :imgUrl="userInfo.idcard2Img || imgUrl"></JUpLoad>
        <JUpLoad :imgUrl="userInfo.idcardInHandImg || imgUrl">
          <template #title>
            <view class="title"><text>[联系人]手持承诺函照片</text> <uni-icons type="help-filled" size="22" color="#c6c6c6" @tap="refTips.open(userInfo.promiseFile)" /> </view>
          </template>
        </JUpLoad>
      </JMainCard>
      <JMainCard wrapPd="30rpx 30rpx 40rpx 30rpx" pd="0" bgColor="#f2f2f2">
        <JInput name="收款账户类型" :img="true" :isBorder="true">
          <view class="agent-type">{{ settAccountType[userInfo.settAccountType] }}</view>
        </JInput>
        <template v-if="userInfo.settAccountType === 'BANK_PRIVATE'">
          <JUpLoad name="收款银行卡照片" :imgUrl="userInfo.bankCardImg || imgUrl"></JUpLoad>
					<JInput name="开户银行名称">{{ userInfo.settAccountBank }}</JInput>
          <JInput name="收款银行卡号">{{ userInfo.settAccountNo }}</JInput>
        </template>
        <template v-if="userInfo.settAccountType === 'WX_CASH'">
          <JInput name="个人微信号">{{ userInfo.settAccountNo }}</JInput>
        </template>
        <template v-if="userInfo.settAccountType === 'ALIPAY_CASH'">
          <JInput name="支付宝账号">{{ userInfo.settAccountNo }}</JInput>
        </template>
        <template v-if="userInfo.settAccountType === 'BANK_PUBLIC'">
          <JUpLoad name="开户许可证照片" :imgUrl="userInfo.permitImg || imgUrl"></JUpLoad>
          <JInput name="对公账户名称">{{ userInfo.settAccountName }}</JInput>
          <JInput name="对公账号">{{ userInfo.settAccountNo }}</JInput>
          <JInput name="开户银行名称">{{ userInfo.settAccountBank }}</JInput>
          <JInput name="开户行支行名称">{{ userInfo.settAccountSubBank }}</JInput>
        </template>
      </JMainCard>
    </view>
  </view>
  <JTipsPopupContent ref="refTips" />
</template>

<script setup>
import { onBeforeUnmount, reactive, ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import user from '@/hooks/user.js'
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle.vue'
import JInput from '@/components/newComponents/JInput/JInput'
import JMainCard from '@/components/newComponents/JMainCard/JMainCard'
import JUpLoad from '@/components/newComponents/JUpLoad/JUpLoad'
import { $getMainUserInfo } from '@/http/apiManager.js'
import JTipsPopupContent from './component/JTipsPopupContent.vue'
const imgUrl = ref('/static/iconImg/defaultImg.svg')
onLoad(() => {
  getUserInfo()
})
let timeOut = undefined
const getUserInfo = () => {
  $getMainUserInfo().then(({ bizData }) => {
    userInfo.value = bizData
    uni.stopPullDownRefresh()
    timeOut = setTimeout(() => {
      animation.value = ''
      audit()
    }, 1500)
  })
}
const refTips = ref(null)
const userInfo = ref({})
const animation = ref('')
const settAccountType = reactive({
  BANK_PRIVATE: '对私账户',
  BANK_PUBLIC: '对公账户',
  WX_CASH: '个人微信',
  ALIPAY_CASH: '个人支付宝',
})
onPullDownRefresh(() => {
  getUserInfo()
  animation.value = 'animation'
})
const audit = () => {
  if (userInfo.value.state === 3)
    return uni.showToast({
      title: '审核未通过',
      icon: 'error',
      mask: true,
      success: () => {
        uni.reLaunch({
          url: '/pageWork/information/information',
        })
      },
    })
}
const loginOut = () => {
  user.logout()
  uni.showToast({
    icon: 'none',
    title: '退出成功',
  })
}
onBeforeUnmount(() => {
  clearTimeout(timeOut)
})
</script>

<style lang="scss" scoped>
.page-wrapper {
  width: 100%;
  min-height: 100%;
  .page-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // background-color: #ffcc66;
    padding-bottom: 47rpx;
    image {
      width: 45rpx;
      height: 52.5rpx;
    }
    view {
      padding: 50rpx 0;
      font-size: 28rpx;
      color: #906a1f;
    }
    .login {
      padding: 30rpx 50rpx;
      margin: 30rpx 0;
      background-color: rgba(255, 255, 255, 0.2);
      letter-spacing: 4rpx;
      color: #fff;
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 47rpx;
      background-color: #fff;
      border-radius: 32rpx 32rpx 0px 0px;
    }
  }
}

.animation {
  animation: rotate 1.5s linear;
}
@keyframes rotate {
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(-720deg);
  }
}
.title {
  display: flex;
  align-items: center;
  vertical-align: middle;
  text {
    margin-right: 5rpx;
    vertical-align: middle;
  }
}
</style>