gypsy-crm-frontend-vu/components/IbInfo.vue

<template>
  <view class="IbInfo">
    <cwg-popup ref="dialogApplyIb" type="center" :title="t('Home.msg.ibTitle')" showFooterLine
               :cancelText="t('Btn.Cancel')" :confirmText="confirmText" @close="closeIb" @confirm="confirmIb" :slot-name="'agree'">
      <view class="dia-content" v-if="ibStatus.status == 0">
        <view
          class="content"
          style="height: 400px; line-height: 1.5; text-align: left"
          id="Agreement"
        >
          <view class="title">{{ t('CWGMarketsLtdPARTNERSAgreement.title1') }}</view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item0') }}</view>
          <view class="p">{{ t('CWGMarketsLtdPARTNERSAgreement.item01') }}</view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item02') }}</view>
          <view class="ul">
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item03') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item04') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item05') }}</view>
          </view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item1') }}</view>
          <view class="ul">
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item11') }}</view>
          </view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item2') }}</view>
          <view class="ul">
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item21') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item22') }}</view>
            <view class='ul-li'>
              <view class="ul">
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item221') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item222') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item223') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item224') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item225') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item226') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item227') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item228') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item229') }}</view>
              </view>
            </view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item23') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item24') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item25') }}</view>
            <view class='ul-li'>
              <view class="ul">
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item251') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item252') }}</view>
              </view>
            </view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item26') }}</view>
          </view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item3') }}</view>
          <view class="ul">
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item31') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item32') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item33') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item34') }}</view>
            <view class='ul-li'>
              <view class="ul">
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item341') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item342') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item343') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item344') }}</view>
              </view>
            </view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item35') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item36') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item37') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item38') }}</view>
          </view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item4') }}</view>
          <view class="ul">
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item41') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item42') }}</view>
          </view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item5') }}</view>
          <view class="ul">
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item51') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item52') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item53') }}</view>
          </view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item6') }}</view>
          <view class="ul">
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item61') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item62') }}</view>
          </view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item7') }}</view>
          <view class="ul">
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item71') }}</view>
            <view class='ul-li'>
              <view class="ul">
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item711') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item712') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item713') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item714') }}</view>
                <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item715') }}</view>
              </view>
            </view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item72') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item73') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item74') }}</view>
          </view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item8') }}</view>
          <view class="ul">
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item81') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item82') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item83') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item84') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item85') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item86') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item87') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item88') }}</view>
            <view class='ul-li'>{{ t('CWGMarketsLtdPARTNERSAgreement.item89') }}</view>
          </view>
          <view class="tit">{{ t('CWGMarketsLtdPARTNERSAgreement.item9') }}</view>
          <view class="p">{{ t('CWGMarketsLtdPARTNERSAgreement.item91') }}</view>
          <view class="title">{{ t('CWGMarketsLtdPARTNERSAgreement.title2') }}</view>
          <view class="p">{{ t('CWGMarketsLtdPARTNERSAgreement.item101') }}</view>
          <view class="p">{{ t('CWGMarketsLtdPARTNERSAgreement.item102') }}</view>
          <view class="p">{{ t('CWGMarketsLtdPARTNERSAgreement.item103') }}</view>
          <view class="p">{{ t('CWGMarketsLtdPARTNERSAgreement.item104') }}</view>
          <view class="p">{{ t('CWGMarketsLtdPARTNERSAgreement.item105') }}</view>
          <view class="p">{{ t('CWGMarketsLtdPARTNERSAgreement.item106') }}</view>
        </view>

      </view>
      <view class="dia-content" v-if="ibStatus.status == 1">
        <view
          class="content"
          style="
             display: flex;
             justify-content: center;
             align-content: center;
             flex-wrap: wrap;
             font-size: 20px;
             height: 150px;
           "
        >
          <view style="width: 100%; margin: 15px 0; font-size: 16px">
            <i class="el-icon-loading" style="font-size: 32px"></i>
          </view>
          <view style="width: 100%; margin: 15px 0; font-size: 14px">
            <span>{{ t('ApplicationDialog.ibStatus') }}</span>
          </view>
        </view>
      </view>
      <view class="dia-content" v-if="ibStatus.status == 3">
        <view
          class="content"
          style="
             display: flex;
             justify-content: center;
             align-content: center;
             flex-wrap: wrap;
             font-size: 14px;
             height: 150px;
           "
        >
          <view
            style="width: 100%; margin: 15px 0; font-weight: bold"
          >{{ t('ApplicationDialog.ibRefused') }}
          </view>
          <view style="width: 100%; margin: 15px 0; font-size: 14px">
            <span>{{ t('ApplicationDialog.ibDes') }}</span>
            <span v-if="reasons[ibStatus.approveDesc]">{{
                lang == 'cn'
                  ? reasons[ibStatus.approveDesc].content
                  : reasons[ibStatus.approveDesc].enContent
              }}</span>
            <span v-else>{{ ibStatus.approveDesc || '--' }}</span>
          </view>
        </view>
      </view>
      <template #agree>
        <view v-if="ibStatus.status == 0">
          <view class="agree" >
            <checkbox-group :value="ibAgree" @change="onAgreeChange">
              <label class="checkbox">
                <checkbox value="1" :checked="!!ibAgree"/>
                <text class="crm-cursor" style="text-decoration: underline;">{{
                    t('Home.msg.Agree1') }}</text>
              </label>
            </checkbox-group>
          </view>

        </view>

      </template>

    </cwg-popup>
  </view>
</template>

<script setup lang="ts">
  import { computed, ref, onMounted, emit } from 'vue'
  import { useI18n } from 'vue-i18n'
  import useUserStore from '@/stores/use-user-store'
  import useRouter from '@/hooks/useRouter'
  import useRoute from '@/hooks/useRoute'
  import { personalApi } from '@/service/personal'
  import Config from '@/config'
  import { customApi } from '@/service/custom'
  import { useStorage } from '@vueuse/core'

  const { Code } = Config
  const router = useRouter()
  const route = useRoute()
  const { userInfo,saveUserInfo } = useUserStore()
  const { t } = useI18n()
  const dialogCheckStatus = ref('')
  const dialogCheck = ref()
  const dialogApplyIb = ref()
  const ibStatus = ref({})
  const lang = useStorage('lang')
  const reasons = ref({})
  const ibAgree = ref('')

  const customInfo = computed(() => {
    return userInfo.customInfo
  })
  const emit = defineEmits(['confirm', 'close'])

  const confirmText = computed(() => {
    return ibStatus.value.status == 3 ? t('Btn.AgainApply') : t('Btn.Confirm')
  })

  const getLogin = async () => {
    let res = await personalApi.CustomLoginInfo()
    if (res.code == Code.StatusOK) {
      dialogCheckStatus.value = res.data.customInfo.applyRealStatus
      if (
        res.data.customInfo.status == 2 &&
        res.data.customInfo.applyRealStatus == 2
      ) {
        applyIbStatus()
      } else {
        // applyIbStatus()
        // dialogAuthCheck.value = false;
        // dialogCheck.value.open()
      }
    } else {
      uni.showToast({
        title: t('Msg.SystemError'),
        icon: 'none',
      })
    }
  }
  //获取原因列表
  const searchReasons = async () => {
    let res = await customApi.reasonsRefusalList({ type: nviewl })
    if (res.code == Code.StatusOK) {
      if (res.data == nviewl) {
        reasons.value = {}
      } else {
        reasons.value = res.data
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  }
  const closeIb = async () => {
    dialogApplyIb.value.close()
  }
  const onAgreeChange = async (value) => {
    ibAgree.value = (value?.detail?.value.length) || ''
  }
  // 确认按钮
  const confirmIb = async () => {
    const status = ibStatus.value.status
    if (status == 0) {
      applyIb()
    }else if (status == 1) {
      dialogApplyIb.value.close()
      emit('close')
    }else if (status == 3) {
      ibStatus.value.status = 0
    }
  }
  const getLoginInfo = async () => {
    let res = await customApi.CustomLoginInfo();
    if (res.code == Code.StatusOK) {
      saveUserInfo(res.data)
    } else {
      uni.showToast({title: t('Msg.SystemError'),
icon: 'none'})
    }
  }
  // 申请ib
  const applyIb = async () => {
    console.log(ibAgree.value)
    if (!ibAgree.value) {
      uni.showToast({title: t("Msg.Read"),icon: 'none'})
      return
    }
    let res = await customApi.customApplyIb()
    if (res.code == Code.StatusOK) {
      uni.showToast({title: t("Msg.Success"),icon: 'none'})
      getLoginInfo();
      dialogApplyIb.value.close()
      emit('confirm')
      // reload();
    }
  }

  //判断申请ib状态
  const applyIbStatus = async () => {
    let res = await customApi.customApplyIbStatus({})
    if (res.code == Code.StatusOK) {
      ibStatus.value = { ...res.data }
      if (ibStatus.value.status == 0) {
        dialogApplyIb.value.open()
      } else if (ibStatus.value.status == 1) {
        dialogApplyIb.value.open()
      } else if (ibStatus.value.status == 2) {

      } else if (ibStatus.value.status == 3) {
        searchReasons()
        dialogApplyIb.value.open()
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  }

  onMounted(() => {
  // 进入ib相关页面时，请求
  //   if (route.path.indexOf('pages/ib/') !== -1) {
  //     getLogin()
  //   }
    // dialogApplyIb.value.open()
  })
  // 暴露方法给父组件
  defineExpose({
    getInfo: getLogin,
    open: () => popupRef.value?.open()
  })

</script>

<style scoped lang="scss">
  @import "@/uni.scss";

  #Agreement {
    p,
    ul,
    li {
      line-height: 1.8;
      font-size: 14px;
      padding: 2px 0;
      text-indent: 25px;
    }
    ul ul {
      box-sizing: border-box;
      padding-left: 25px;
    }
    .title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      text-indent: 0;
      color: #EB3F57;
    }
    .p,.ul-li,.ul{
      line-height: 1.8;
      font-size: 14px;
      padding: 2px 0;
      text-indent: 25px;
    }
    .ul .ul{
      box-sizing: border-box;
      padding-left: 25px;
    }
    .tit {
      font-weight: bold;
      text-indent: 0;
    }
  }
  .agree {
    margin: px2rpx(24) 0;
    display: flex;
    align-items: flex-start;

    .checkbox {
      display: flex;
      align-items: flex-start;
      gap: px2rpx(8);

      :deep(uni-checkbox .uni-checkbox-input) {
        border-radius: px2rpx(4);
        width: px2rpx(18);
        height: px2rpx(18);
      }

      text {
        font-size: px2rpx(13);
        color: var(--color-zinc-500);
        line-height: 1.5;
      }
    }
  }
</style>