gypsy-crm-frontend-vu/pages/ib/components/documentaryDialog.vue

<template>
  <cwg-popup :title="t('Documentary.AgentBackground.item1')" :visible="visible"  @close="closeDia" @confirm="confirmDia">
    <view class="dialog-content">
      <uni-forms :model="formData" labelWidth="200" label-position="top" class="crm-form">
        <uni-forms-item label="CID">
          <uni-easyinput disabled :clearable="false" v-model="formData.cId"
                         :placeholder="t('placeholder.input')" />
        </uni-forms-item>
        <uni-forms-item :label="t('Documentary.AgentBackground.item2')">
          <cwg-combox v-model:value="formData.permissionDisplay" :options="[
              {
                text: t('Documentary.AgentBackground.item16'),
                value: 1,
              },
              {
                text: t('Documentary.AgentBackground.item15'),
                value: 2,
              },
          ]" />
        </uni-forms-item>
        <uni-forms-item class="agree">
          <checkbox-group v-model="formData.agree" @change="onAgreeChange">
            <label class="checkbox">
              <checkbox value="1" />
              <view style="display: inline">
                <text class="crm-cursor" >{{t('Documentary.AgentBackground.item3') }}</text>
                <a v-if="['cn', 'zhHant'].indexOf(lang) != -1" style="color: #4497ff" href="pdf/CopyTradeUserAgreementcn.pdf" target="_blank" >{{t('Documentary.AgentBackground.item4')}}</a>
                <a
                  style="color: #4497ff"
                  href="pdf/CopyTradeUserAgreement.pdf"
                  target="_blank"
                  v-else
                >
                  {{t('Documentary.AgentBackground.item4')}}
                </a>
              </view>
            </label>
          </checkbox-group>
        </uni-forms-item>
        <uni-forms-item class="prompt" :label="t('Drawer.Label.TemplatePrompt')">
          <view>
            <text>{{t('Documentary.AgentBackground.item5')}}</text>
          </view>
        </uni-forms-item>
      </uni-forms>
    </view>
  </cwg-popup>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { useI18n } from 'vue-i18n' // uni-app 中已集成，但需配置
  import { customApi } from '@/service/custom'
  import { financialApi } from '@/service/financial'
  import Config from '@/config/index'
  import PaymentMethodsList from './components/PaymentMethodsList.vue'
  import { ibApi } from '@/service/ib'
  import useUserStore from '@/stores/use-user-store'
  import { lang } from '@/composables/config'

  const props = defineProps({
    // 是否显示弹窗
    visible: {
      type: Boolean,
      default: false,
    },
    // 详情formData
    detail: { type: Object, default: () => ({}) },
  })
  const { Code, Host80 } = Config
  const { t } = useI18n()
  const formData = ref({
    cId: '',
    permissionDisplay: '',
    agree: '',
  })
  const emit = defineEmits(['close','confirm'])

  onMounted(() => {
    console.log(props.visible)
  })

  watch(() => props.detail, (val) => {
    if (val){
      formData.value = val
    }
  })
  const onAgreeChange = (e) => {
    console.log(e)
    formData.value.agree = e.detail.value.length > 0
  }
  const closeDia = () => {
    emit('close')
  }
  const confirmDia = async () => {
    console.log(formData.value)
    // emit('close')
    const res = await ibApi.customUpdateFollowPermissionDisplay({
      id: formData.value.id,
      permissionDisplay: formData.value.permissionDisplay,
    })
    if (res.Code = Code.StatusOK) {
      emit('confirm')
      uni.showToast({
        title:t("Msg.Success"),
        icon: 'none'
      })
    }else {
      uni.showToast({
        title:res.msg,
        icon: 'none'
      })
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/uni.scss";

  .crm-form {
    :deep(.uni-forms-item) {
      margin-bottom: px2rpx(16);
    }

    :deep(.uni-easyinput__content) {
      border: none !important;
      background-color: var(--color-zinc-100) !important;
    }
  }
</style>