gypsy-crm-frontend-vu/pages/follow/components/applySignalDialog.vue

<template>
  <cwg-popup :title="t('Documentary.TundManagement.item41')" :visible="visible" @close="closeDia" @confirm="confirmDia">
    <view class="dialog-content">
      <uni-forms ref="formRef" :model="formData" :rules="rules" labelWidth="200" label-position="top" class="crm-form">
        <!-- 名片信息 -->
        <view class="fllow-title">
          <text>{{ t('Documentary.tradingCenter.item126') }}</text>
        </view>
        <uni-forms-item :label="t('Documentary.console.item20')" name="nickname">
          <uni-easyinput v-model="formData.nickname" :placeholder="t('placeholder.input')" />
        </uni-forms-item>
        
        <uni-row :gutter="20" class="responsive-row">
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Documentary.console.item21')" name="personalSignature">
              <uni-easyinput type="textarea" v-model="formData.personalSignature" :maxlength="100" @input="val => filterChineseEnglishOnly('personalSignature', val)" :placeholder="t('placeholder.input')" />
            </uni-forms-item>
          </uni-col>
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Documentary.console.item22')" name="traderStrategy">
              <uni-easyinput type="textarea" v-model="formData.traderStrategy" :maxlength="150" @input="val => filterChineseEnglishOnly('traderStrategy', val)" :placeholder="t('placeholder.input')" />
            </uni-forms-item>
          </uni-col>
        </uni-row>
        
        <view style="color: red; font-size: 12px; margin-bottom: 10px;">
          <text>{{ t('Documentary.console.item37') }}</text>
        </view>

        <!-- 账户信息 -->
        <view class="fllow-title">
          <text>{{ t('Documentary.TundManagement.item29') }}</text>
          <text style="color: #eb3f57; font-weight: 500">{{ t('Documentary.item3') }}</text>
        </view>
        
        <uni-row :gutter="20" class="responsive-row">
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Label.TradingAccount')" name="dealLogin">
              <cwg-combox
                v-model:value="formData.dealLogin"
                :options="loginOptionsData"
                :placeholder="t('placeholder.choose')"
                @change="selectLogin"
              />
            </uni-forms-item>
          </uni-col>
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Label.PlatformType')" name="platform">
              <cwg-combox disabled v-model:value="formData.platform" :options="[{text: 'MT4', value: 'MT4'}, {text: 'MT5', value: 'MT5'}]" :placeholder="t('placeholder.choose')" />
            </uni-forms-item>
          </uni-col>
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Label.AccountType')" name="loginType">
              <cwg-combox disabled v-model:value="formData.loginType" :options="accountTypeOptions" :placeholder="t('placeholder.choose')" />
            </uni-forms-item>
          </uni-col>
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Label.Leverage')" name="leverage">
              <uni-easyinput disabled v-model="formData.leverage" :placeholder="t('placeholder.input')" />
            </uni-forms-item>
          </uni-col>
        </uni-row>

        <!-- 展示设置 -->
        <view class="fllow-title">
          <text>{{ t('Documentary.TundManagement.item32') }}</text>
        </view>
        <uni-row :gutter="20" class="responsive-row">
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Documentary.TundManagement.item34')" name="historyShow">
              <cwg-combox v-model:value="formData.historyShow" :options="[{text: t('Btn.item6'), value: 1}, {text: t('Btn.item7'), value: 0}]" :placeholder="t('placeholder.choose')" />
            </uni-forms-item>
          </uni-col>
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Documentary.TundManagement.item35')" name="historyTime">
              <uni-datetime-picker type="date" v-model="formData.historyTime" :placeholder="t('Documentary.TundManagement.item37')" />
            </uni-forms-item>
          </uni-col>
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Documentary.TundManagement.item36')" name="introduceShow">
              <cwg-combox v-model:value="formData.introduceShow" :options="[{text: t('Btn.item6'), value: 1}, {text: t('Btn.item7'), value: 0}]" :placeholder="t('placeholder.choose')" />
            </uni-forms-item>
          </uni-col>
        </uni-row>

        <!-- 分润设置 -->
        <view class="fllow-title">
          <text>{{ t('Documentary.TundManagement.item33') }}</text>
        </view>
        <uni-row :gutter="20" class="responsive-row">
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Documentary.TundManagement.item38')" name="distributionType">
              <cwg-combox v-model:value="formData.distributionType" :options="[{text: t('Documentary.TundManagement.item59'), value: 1}]" :placeholder="t('placeholder.choose')" />
            </uni-forms-item>
          </uni-col>
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Documentary.TundManagement.item39')" name="distributionRatio">
              <view style="display: flex; align-items: center;">
                <uni-easyinput v-model="formData.distributionRatio" :placeholder="t('placeholder.input')" style="flex: 1;" />
                <text style="margin-left: 5px;">(%)</text>
              </view>
            </uni-forms-item>
          </uni-col>
          <uni-col :xs="24" :sm="12">
            <uni-forms-item :label="t('Documentary.tradingCenter.item32')" name="settlementCycle">
              <cwg-combox v-model:value="formData.settlementCycle" :options="[{text: '7', value: '7'}, {text: '15', value: '15'}, {text: '30', value: '30'}]" :placeholder="t('placeholder.choose')" />
            </uni-forms-item>
          </uni-col>
        </uni-row>

        <!-- 协议 -->
        <uni-forms-item class="agree" name="agree">
          <checkbox-group @change="onAgreeChange">
            <label class="checkbox">
              <checkbox value="1" :checked="!!formData.agree" />
              <view style="display: inline; font-size: 12px;">
                <text class="crm-cursor">{{ t('Documentary.TundManagement.item42') }}</text>
                <cwg-link type="pdf" title="Documentary.TundManagement.item43" v-if="['cn', 'zhHant'].indexOf(local) != -1" style="color: #4497ff; display: inline-block; margin: 0 4px;" url="pdf/CopyTradeUserAgreementcn.pdf" target="_blank" />
                <cwg-link type="pdf" style="color: #4497ff; display: inline-block; margin: 0 4px;" title="Documentary.TundManagement.item43" url="pdf/CopyTradeUserAgreement.pdf" target="_blank" v-else />
                <text>{{ t('Documentary.TundManagement.item42_2') }}</text>
              </view>
            </label>
          </checkbox-group>
        </uni-forms-item>
      </uni-forms>
    </view>
  </cwg-popup>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import Config from '@/config/index'
import { documentaryApi } from '@/service/documentary'

const props = defineProps({
  visible: { type: Boolean, default: false },
  loginOptions: { type: Array, default: () => [] }
})

const emit = defineEmits(['close', 'confirm'])
const { t, locale } = useI18n()
const { Code } = Config
const local = locale.value

const formRef = ref(null)
const formData = ref({
  nickname: '',
  personalSignature: '',
  traderStrategy: '',
  dealLogin: '',
  platform: '',
  loginType: '',
  leverage: '',
  historyShow: '',
  historyTime: '',
  introduceShow: '',
  distributionType: '',
  distributionRatio: '',
  settlementCycle: '',
  agree: false
})
const isSubmitting = ref(false)

const accountTypeOptions = [
  { text: t('AccountType.ClassicAccount'), value: 1 },
  { text: t('AccountType.SeniorAccount'), value: 2 },
  { text: t('AccountType.SpeedAccount'), value: 5 },
  { text: t('AccountType.SpeedAccount'), value: 6 },
  { text: t('AccountType.StandardAccount'), value: 7 },
  { text: t('AccountType.CentAccount'), value: 8 }
]

const loginOptionsData = computed(() => {
  return props.loginOptions.map(item => ({
    text: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance}`,
    value: item.login,
    disabled: item.balance < 200
  }))
})

const groupTypeName = (type) => {
  const option = accountTypeOptions.find(opt => opt.value == type)
  return option ? option.text : type
}

const groupCurrency = (currency) => {
  return currency ? ` (${currency}) ` : ' '
}

const rules = computed(() => ({
  nickname: {
    rules: [
      { required: true, errorMessage: t('vaildate.input.empty') },
      { pattern: /^[0-9a-zA-Z]{1,24}$/, errorMessage: t('Msg.nickname') }
    ]
  },
  personalSignature: {
    rules: [
      { required: true, errorMessage: t('vaildate.input.empty') },
      { pattern: /^[\u4e00-\u9fa5a-zA-Z\s]*$/, errorMessage: t('Documentary.console.item38') }
    ]
  },
  traderStrategy: {
    rules: [
      { required: true, errorMessage: t('vaildate.input.empty') },
      { pattern: /^[\u4e00-\u9fa5a-zA-Z\s]*$/, errorMessage: t('Documentary.console.item38') }
    ]
  },
  dealLogin: { rules: [{ required: true, errorMessage: t('vaildate.select.empty') }] },
  historyShow: { rules: [{ required: true, errorMessage: t('vaildate.select.empty') }] },
  historyTime: { rules: [{ required: true, errorMessage: t('vaildate.select.empty') }] },
  introduceShow: { rules: [{ required: true, errorMessage: t('vaildate.select.empty') }] },
  distributionType: { rules: [{ required: true, errorMessage: t('vaildate.select.empty') }] },
  distributionRatio: {
    rules: [
      { required: true, errorMessage: t('vaildate.input.empty') },
      {
        validateFunction: (rule, value, data, callback) => {
          if (value >= 0 && value <= 50) return true
          callback('0-50')
        }
      }
    ]
  },
  settlementCycle: { rules: [{ required: true, errorMessage: t('vaildate.select.empty') }] },
  agree: {
    rules: [
      {
        validateFunction: (rule, value, data, callback) => {
          if (value) return true
          callback(t('vaildate.agree.empty'))
        }
      }
    ]
  }
}))

const filterChineseEnglishOnly = (field, value) => {
  if (!value) return
  const filtered = value.replace(/[^\u4e00-\u9fa5a-zA-Z\s]/g, '')
  formData.value[field] = filtered
}

const selectLogin = (val) => {
  const selected = props.loginOptions.find(item => item.login === val)
  if (selected) {
    formData.value.leverage = `1:${selected.leverage}`
    formData.value.loginType = selected.type
    formData.value.platform = selected.platform
  }
}

const onAgreeChange = (e) => {
  formData.value.agree = e.detail.value?.includes('1')
}

const closeDia = () => {
  emit('close')
  resetForm()
}

const confirmDia = async () => {
  try {
    await formRef.value.validate()
  } catch (err) {
    return
  }

  if (isSubmitting.value) return
  isSubmitting.value = true

  try {
    const res = await documentaryApi.followDealApply({
      ...formData.value
    })
    if (res.code === Code.StatusOK) {
      uni.showToast({ title: t('Msg.Success'), icon: 'none' })
      emit('confirm')
      closeDia()
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  } catch (e) {
    uni.showToast({ title: t('Msg.Fail'), icon: 'none' })
  } finally {
    isSubmitting.value = false
  }
}

const resetForm = () => {
  formRef.value?.clearValidate()
  formData.value = {
    nickname: '',
    personalSignature: '',
    traderStrategy: '',
    dealLogin: '',
    platform: '',
    loginType: '',
    leverage: '',
    historyShow: '',
    historyTime: '',
    introduceShow: '',
    distributionType: '',
    distributionRatio: '',
    settlementCycle: '',
    agree: false
  }
}

watch(() => props.visible, (val) => {
  if (val && props.loginOptions?.length) {
    // 自动填充默认值，与原版保持一致
    const defaultOption = props.loginOptions.find(item => item.balance >= 200)
    if (defaultOption) {
      formData.value.dealLogin = defaultOption.login
      selectLogin(defaultOption.login)
    }
  }
})
</script>

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

.crm-form {
  padding: 0 10px;
  :deep(.uni-forms-item) {
    margin-bottom: px2rpx(16);
  }
  :deep(.uni-easyinput__content) {
    border: 1px solid #dcdfe6 !important;
    background-color: #fff !important;
  }
}

.fllow-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-top: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

/* 移动端排版优化 */
@media screen and (max-width: 768px) {
  .responsive-row {
    display: flex;
    flex-direction: column;
    
    .uni-col {
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

.checkbox {
  display: flex;
  align-items: center;
}
</style>