gypsy-crm-frontend-vu/pages/customer/create-account copy.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <uni-card class="create-content" :margin="0" :spacing="0">
            <view class="content-title" v-t="'Custom.NewAccount.Title'"></view>
            <view class="tit">
                <text class="iconfont icon-caret-right"></text>
                <text>{{ t('Custom.NewAccount.Title1') }}</text>
            </view>
            <view class="des">
                <text>{{ t('Custom.NewAccount.Des1') }}</text>
            </view>
            <cwg-tabs :cativeIndex="cativeIndex" :tabs="tabs" class="tabs-class" />

        </uni-card>
        <view id="custom_newAccount" :class="{ 'u-loading': pictLoading }">
            <view class="main-content" v-if="showPage">
                <!-- 账户列表 -->
                <view class="box" v-if="
                    showLogin.indexOf('6') === -1 ||
                    showLogin.indexOf('2') === -1 ||
                    showLogin.indexOf('7') === -1 ||
                    (showLogin.indexOf('8') === -1 && isTimeShow)
                ">


                    <!-- 极速账户 -->
                    <!-- <view class="b-card" v-if="showLogin.indexOf('6') === -1">
                        <view class="btn-tag-star" v-if="false">
                            <text class="iconfont icon-star-on"></text>
                        </view>
                        <view class="card-top">
                            <view class="header" style="width: 66.66667%;">
                                <view class="tit">
                                    <text>{{ t('AccountType.SpeedAccount') }}</text>
                                </view>
                                <view class="des">
                                    <text>{{ t('Custom.NewAccount.DesLogin1') }}</text>
                                </view>
                                <view class="btn-bottom">
                                    <text class="btn-open" @click="isOpenClose(6, null)">
                                        <text>{{ t('Custom.NewAccount.Btn') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                    <text class="btn-try" @click="isOpenClose(6, 6)">
                                        <text>{{ t('Custom.NewAccount.BtnDome') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                </view>
                            </view>
                            <view class="descending" style="width: 33.33333%;">
                                <view><text>{{ t('Custom.NewAccount.DesLogin11') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin12') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin13') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin14') }}</text></view>
                            </view>
                        </view>
                        <view class="card-bottom" v-if="isOpenAccount == 6">
                            <uv-form :model="params" :rules="rules" ref="formRef" label-position="top">
                                <uv-form-item prop="platform" :label="t('Custom.NewAccount.Platform')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.platform" :columns="platformColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handlePlatformConfirm">
                                        <view class="picker-value">{{ params.platform || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="currency" :label="t('Custom.NewAccount.Currency')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.currency" :columns="currencyColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handleCurrencyConfirm">
                                        <view class="picker-value">{{ params.currency || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="password" :label="t('Custom.NewAccount.Password')"
                                    :borderBottom="false">
                                    <uv-input v-model="params.password" :password="true"
                                        :placeholder="t('Custom.NewAccount.Password')"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="leverage" :label="t('Custom.NewAccount.Lever')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.leverage" :columns="leverageColumns"
                                        :placeholder="t('placeholder.choose')" :disabled="hidden"
                                        @confirm="handleLeverageConfirm">
                                        <view class="picker-value">{{ params.leverage || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="platform" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">{{ t('signup.form.rules.1st') }}</view>
                                        <view :class="{ fit: rule2 }">{{ t('signup.form.rules.2nd') }}</view>
                                        <view :class="{ fit: rule4 }">{{ t('signup.form.rules.4rd') }}</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item prop="balance" :label="t('Custom.NewAccount.Balance')" v-if="dome"
                                    :borderBottom="false">
                                    <uv-input v-model="params.balance" type="number"
                                        :placeholder="t('Custom.NewAccount.BalancePlaceholder')"
                                        @blur="handleBalanceChange"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="platform" v-if="dome" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">0 - 100000</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item :borderBottom="false">
                                    <uv-button type="primary" class="s-btn" @click="newAccount(6, dome ? 1 : null)">
                                        {{ t('Btn.OpenAccount') }}
                                    </uv-button>
                                </uv-form-item>

                                <uv-form-item :borderBottom="false" v-if="!dome">
                                    <view style="margin: 20px 0; font-size: 14px; line-height: 1.7;">
                                        <text>{{ t('news_add_field.OpenAccount.Des4') }}</text>
                                        <text class="pdfLink" @click="openLink('leveragemargin')">
                                            {{ t('news_add_field.OpenAccount.Des5') }}
                                        </text>
                                    </view>
                                </uv-form-item>
                            </uv-form>
                        </view>
                    </view> -->

                    <!-- 经典账户 -->
                    <!-- <view class="b-card" v-if="showLogin.indexOf('1') === -1">
                        <view class="btn-tag-star" v-if="false">
                            <text class="iconfont icon-star-on"></text>
                        </view>
                        <view class="card-top">
                            <view class="header" style="width: 66.66667%;">
                                <view class="tit">
                                    <text>{{ t('AccountType.ClassicAccount') }}</text>
                                </view>
                                <view class="des">
                                    <text>{{ t('Custom.NewAccount.DesLogin2') }}</text>
                                </view>
                                <view class="btn-bottom">
                                    <text class="btn-open" @click="isOpenClose(1, null)">
                                        <text>{{ t('Custom.NewAccount.Btn') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                    <text class="btn-try" @click="isOpenClose(1, 1)">
                                        <text>{{ t('Custom.NewAccount.BtnDome') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                </view>
                            </view>
                            <view class="descending" style="width: 33.33333%;">
                                <view><text>{{ t('Custom.NewAccount.DesLogin21') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin22') }}</text></view>
                                <view v-if="['cn', 'zhHant'].indexOf(language) === -1">
                                    <text>{{ t('Custom.NewAccount.DesLogin23') }}</text>
                                </view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin24') }}</text></view>
                            </view>
                        </view>
                        <view class="card-bottom" v-if="isOpenAccount == 1">
                            <uv-form :model="params" :rules="rules" ref="formRef" label-position="top">
                                <uv-form-item prop="platform" :label="t('Custom.NewAccount.Platform')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.platform" :columns="platformColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handlePlatformConfirm">
                                        <view class="picker-value">{{ params.platform || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="currency" :label="t('Custom.NewAccount.Currency')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.currency" :columns="currencyColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handleCurrencyConfirm">
                                        <view class="picker-value">{{ params.currency || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="password" :label="t('Custom.NewAccount.Password')"
                                    :borderBottom="false">
                                    <uv-input v-model="params.password" :password="true"
                                        :placeholder="t('Custom.NewAccount.Password')"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="leverage" :label="t('Custom.NewAccount.Lever')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.leverage" :columns="leverageColumns"
                                        :placeholder="t('placeholder.choose')" :disabled="true"
                                        @confirm="handleLeverageConfirm">
                                        <view class="picker-value">{{ params.leverage || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="platform" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">{{ t('signup.form.rules.1st') }}</view>
                                        <view :class="{ fit: rule2 }">{{ t('signup.form.rules.2nd') }}</view>
                                        <view :class="{ fit: rule4 }">{{ t('signup.form.rules.4rd') }}</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item :borderBottom="false">
                                    <uv-button type="primary" class="s-btn" @click="newAccount(1, dome ? 1 : null)">
                                        {{ t('Btn.OpenAccount') }}
                                    </uv-button>
                                </uv-form-item>
                            </uv-form>
                        </view>
                    </view> -->

                    <!-- 标准账户 -->
                    <view class="b-card" v-if="showLogin.indexOf('7') === -1">
                        <view class="btn-tag-star">
                            <text class="iconfont icon-star-on"></text>
                        </view>
                        <view class="card-top">
                            <view class="header" style="width: 66.66667%;">
                                <view class="tit">
                                    <text>{{ t('AccountType.StandardAccount') }}</text>
                                </view>
                                <view class="des">
                                    <text>{{ t('Custom.NewAccount.DesLogin5') }}</text>
                                </view>
                                <view class="btn-bottom">
                                    <text class="btn-open" @click="isOpenClose(7, null)">
                                        <text>{{ t('Custom.NewAccount.Btn') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                    <text class="btn-try" @click="isOpenClose(7, 7)">
                                        <text>{{ t('Custom.NewAccount.BtnDome') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                </view>
                            </view>
                            <view class="descending" style="width: 33.33333%;">
                                <view><text>{{ t('Custom.NewAccount.DesLogin51') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin52') }}</text></view>
                                <view v-if="['cn', 'zhHant'].indexOf(language) === -1">
                                    <text>{{ t('Custom.NewAccount.DesLogin53') }}</text>
                                </view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin54') }}</text></view>
                            </view>
                        </view>

                        <!-- 标准账户表单 -->
                        <view class="card-bottom" v-if="isOpenAccount == 7">
                            <uv-form :model="params" :rules="rules" ref="formRef" label-position="top">
                                <uv-form-item prop="platform" :label="t('Custom.NewAccount.Platform')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.platform" :columns="platformColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handlePlatformConfirm">
                                        <view class="picker-value">{{ params.platform || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="currency" :label="t('Custom.NewAccount.Currency')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.currency" :columns="currencyColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handleCurrencyConfirm">
                                        <view class="picker-value">{{ params.currency || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="password" :label="t('Custom.NewAccount.Password')"
                                    :borderBottom="false">
                                    <uv-input v-model="params.password" :password="true"
                                        :placeholder="t('Custom.NewAccount.Password')"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="leverage" :label="t('Custom.NewAccount.Lever')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.leverage" :columns="leverageColumns"
                                        :placeholder="t('placeholder.choose')" :disabled="hidden"
                                        @confirm="handleLeverageConfirm">
                                        <view class="picker-value">{{ params.leverage || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="platform" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">{{ t('signup.form.rules.1st') }}</view>
                                        <view :class="{ fit: rule2 }">{{ t('signup.form.rules.2nd') }}</view>
                                        <view :class="{ fit: rule4 }">{{ t('signup.form.rules.4rd') }}</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item prop="balance" :label="t('Custom.NewAccount.Balance')" v-if="dome"
                                    :borderBottom="false">
                                    <uv-input v-model="params.balance" type="number"
                                        :placeholder="t('Custom.NewAccount.BalancePlaceholder')"
                                        @blur="handleBalanceChange"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="platform" v-if="dome" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">0 - 100000</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item :borderBottom="false">
                                    <uv-button type="primary" class="s-btn" @click="newAccount(7, dome ? 1 : null)">
                                        {{ t('Btn.OpenAccount') }}
                                    </uv-button>
                                </uv-form-item>
                            </uv-form>
                        </view>
                    </view>

                    <!-- 高级账户 -->
                    <view class="b-card" v-if="showLogin.indexOf('2') === -1">
                        <view class="btn-tag-star" v-if="false">
                            <text class="iconfont icon-star-on"></text>
                        </view>
                        <view class="card-top">
                            <view class="header" style="width: 66.66667%;">
                                <view class="tit">
                                    <text>{{ t('AccountType.SeniorAccount') }}</text>
                                </view>
                                <view class="des">
                                    <text>{{ t('Custom.NewAccount.DesLogin3') }}</text>
                                </view>
                                <view class="btn-bottom">
                                    <text class="btn-open" @click="isOpenClose(2, null)">
                                        <text>{{ t('Custom.NewAccount.Btn') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                    <text class="btn-try" @click="isOpenClose(2, 2)">
                                        <text>{{ t('Custom.NewAccount.BtnDome') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                </view>
                            </view>
                            <view class="descending" style="width: 33.33333%;">
                                <view><text>{{ t('Custom.NewAccount.DesLogin31') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin32') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin33') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin34') }}</text></view>
                            </view>
                        </view>

                        <!-- 高级账户表单 -->
                        <view class="card-bottom" v-if="isOpenAccount == 2">
                            <uv-form :model="params" :rules="rules" ref="formRef" label-position="top">
                                <uv-form-item prop="platform" :label="t('Custom.NewAccount.Platform')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.platform" :columns="platformColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handlePlatformConfirm">
                                        <view class="picker-value">{{ params.platform || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="currency" :label="t('Custom.NewAccount.Currency')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.currency" :columns="currencyColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handleCurrencyConfirm">
                                        <view class="picker-value">{{ params.currency || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="password" :label="t('Custom.NewAccount.Password')"
                                    :borderBottom="false">
                                    <uv-input v-model="params.password" :password="true"
                                        :placeholder="t('Custom.NewAccount.Password')"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="leverage" :label="t('Custom.NewAccount.Lever')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.leverage" :columns="leverageColumns"
                                        :placeholder="t('placeholder.choose')" :disabled="hidden"
                                        @confirm="handleLeverageConfirm">
                                        <view class="picker-value">{{ params.leverage || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="platform" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">{{ t('signup.form.rules.1st') }}</view>
                                        <view :class="{ fit: rule2 }">{{ t('signup.form.rules.2nd') }}</view>
                                        <view :class="{ fit: rule4 }">{{ t('signup.form.rules.4rd') }}</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item prop="balance" :label="t('Custom.NewAccount.Balance')" v-if="dome"
                                    :borderBottom="false">
                                    <uv-input v-model="params.balance" type="number"
                                        :placeholder="t('Custom.NewAccount.BalancePlaceholder')"
                                        @blur="handleBalanceChange"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="platform" v-if="dome" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">0 - 100000</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item :borderBottom="false">
                                    <uv-button type="primary" class="s-btn" @click="newAccount(2, dome ? 1 : null)">
                                        {{ t('Btn.OpenAccount') }}
                                    </uv-button>
                                </uv-form-item>
                            </uv-form>
                        </view>
                    </view>

                    <!-- 美分账户 -->
                    <view class="b-card" v-if="showLogin.indexOf('8') === -1 && isTimeShow">
                        <view class="btn-tag-star" v-if="false">
                            <text class="iconfont icon-star-on"></text>
                        </view>
                        <view class="card-top">
                            <view class="header" style="width: 66.66667%;">
                                <view class="tit">
                                    <text>{{ t('AccountType.CentAccount') }}</text>
                                </view>
                                <view class="des">
                                    <text>{{ t('Custom.NewAccount.DesLogin8') }}</text>
                                </view>
                                <view class="btn-bottom">
                                    <text class="btn-open" @click="isOpenClose(8, null)">
                                        <text>{{ t('Custom.NewAccount.Btn') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                    <text class="btn-try" @click="isOpenClose(8, 8)">
                                        <text>{{ t('Custom.NewAccount.BtnDome') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                </view>
                            </view>
                            <view class="descending" style="width: 33.33333%;">
                                <view><text>{{ t('Custom.NewAccount.DesLogin81') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin82') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin84') }}</text></view>
                            </view>
                        </view>

                        <!-- 美分账户表单 -->
                        <view class="card-bottom" v-if="isOpenAccount == 8">
                            <uv-form :model="params" :rules="rules" ref="formRef" label-position="top">
                                <uv-form-item prop="platform" :label="t('Custom.NewAccount.Platform')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.platform" :columns="platformColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handlePlatformConfirm">
                                        <view class="picker-value">{{ params.platform || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="currency" :label="t('Custom.NewAccount.Currency')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.currency" :columns="currencyColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handleCurrencyConfirm">
                                        <view class="picker-value">{{ params.currency || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="password" :label="t('Custom.NewAccount.Password')"
                                    :borderBottom="false">
                                    <uv-input v-model="params.password" :password="true"
                                        :placeholder="t('Custom.NewAccount.Password')"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="leverage" :label="t('Custom.NewAccount.Lever')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.leverage" :columns="leverageColumns"
                                        :placeholder="t('placeholder.choose')" :disabled="hidden"
                                        @confirm="handleLeverageConfirm">
                                        <view class="picker-value">{{ params.leverage || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="platform" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">{{ t('signup.form.rules.1st') }}</view>
                                        <view :class="{ fit: rule2 }">{{ t('signup.form.rules.2nd') }}</view>
                                        <view :class="{ fit: rule4 }">{{ t('signup.form.rules.4rd') }}</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item prop="balance" :label="t('Custom.NewAccount.Balance')" v-if="dome"
                                    :borderBottom="false">
                                    <uv-input v-model="params.balance" type="number"
                                        :placeholder="t('Custom.NewAccount.BalancePlaceholder')"
                                        @blur="handleBalanceChange"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="platform" v-if="dome" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">0 - 100000</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item :borderBottom="false">
                                    <uv-button type="primary" class="s-btn" @click="newAccount(8, dome ? 1 : null)">
                                        {{ t('Btn.OpenAccount') }}
                                    </uv-button>
                                </uv-form-item>

                                <uv-form-item :borderBottom="false">
                                    <view style="margin: 20px 0; font-size: 14px; line-height: 1.7;">
                                        <text>{{ t('news_add_field.OpenAccount.Des4') }}</text>
                                        <text class="pdfLink" @click="openLink('leveragemargin')">
                                            {{ t('news_add_field.OpenAccount.Des5') }}
                                        </text>
                                    </view>
                                </uv-form-item>
                            </uv-form>
                        </view>
                    </view>
                </view>

                <!-- 代理账户 -->
                <!-- <view class="box" v-if="showLogin.indexOf('3') === -1 && !isAfterJuly28()">
                    <view class="tit">
                        <text class="iconfont icon-caret-right"></text>
                        <text>{{ t('Custom.NewAccount.Title2') }}</text>
                    </view>
                    <view class="des">
                        <text>{{ t('Custom.NewAccount.Des2') }}</text>
                    </view>

                    <view class="b-card">
                        <view class="btn-tag-star" v-if="false">
                            <text class="iconfont icon-star-on"></text>
                        </view>
                        <view class="card-top">
                            <view class="header" style="width: 66.66667%;">
                                <view class="tit">
                                    <text>{{ t('AccountType.AgencyAccount') }}</text>
                                </view>
                                <view class="des">
                                    <text>{{ t('Custom.NewAccount.DesLogin4') }}</text>
                                </view>
                                <view class="btn-bottom">
                                    <text class="btn-open" @click="isOpenClose(3, null)">
                                        <text>{{ t('Custom.NewAccount.Btn') }}</text>
                                        <text class="iconfont icon-arrow-right"></text>
                                    </text>
                                </view>
                            </view>
                            <view class="descending" style="width: 33.33333%;">
                                <view><text>{{ t('Custom.NewAccount.DesLogin41') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin42') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin43') }}</text></view>
                                <view><text>{{ t('Custom.NewAccount.DesLogin44') }}</text></view>
                            </view>
                        </view>
                        <view class="card-bottom" v-if="isOpenAccount == 3">
                            <uv-form :model="params" :rules="rules" ref="formRef" label-position="top">
                                <uv-form-item prop="platform" :label="t('Custom.NewAccount.Platform')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.platform" :columns="platformColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handlePlatformConfirm">
                                        <view class="picker-value">{{ params.platform || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="currency" :label="t('Custom.NewAccount.Currency')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.currency" :columns="currencyColumns"
                                        :placeholder="t('placeholder.choose')" @confirm="handleCurrencyConfirm">
                                        <view class="picker-value">{{ params.currency || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="password" :label="t('Custom.NewAccount.Password')"
                                    :borderBottom="false">
                                    <uv-input v-model="params.password" :password="true"
                                        :placeholder="t('Custom.NewAccount.Password')"></uv-input>
                                </uv-form-item>

                                <uv-form-item prop="leverage" :label="t('Custom.NewAccount.Lever')"
                                    :borderBottom="false">
                                    <uv-picker v-model="params.leverage" :columns="leverageColumns"
                                        :placeholder="t('placeholder.choose')" :disabled="hidden"
                                        @confirm="handleLeverageConfirm">
                                        <view class="picker-value">{{ params.leverage || t('placeholder.choose') }}
                                        </view>
                                    </uv-picker>
                                </uv-form-item>

                                <uv-form-item prop="platform" :borderBottom="false">
                                    <view class="pwd">
                                        <view :class="{ fit: rule1 }">{{ t('signup.form.rules.1st') }}</view>
                                        <view :class="{ fit: rule2 }">{{ t('signup.form.rules.2nd') }}</view>
                                        <view :class="{ fit: rule4 }">{{ t('signup.form.rules.4rd') }}</view>
                                    </view>
                                </uv-form-item>

                                <uv-form-item :borderBottom="false">
                                    <uv-button type="primary" class="s-btn" @click="newAccount(3, null)">
                                        {{ t('Btn.OpenAccount') }}
                                    </uv-button>
                                </uv-form-item>
                            </uv-form>
                        </view>
                    </view>
                </view> -->

                <!-- 无可用账户提示 -->
                <view class="box" v-if="
                    showLogin.indexOf('6') !== -1 &&
                    showLogin.indexOf('1') !== -1 &&
                    showLogin.indexOf('2') !== -1 &&
                    showLogin.indexOf('3') !== -1 &&
                    showLogin.indexOf('7') !== -1 &&
                    !(showLogin.indexOf('8') === -1 && isTimeShow)
                ">
                    <view style="margin: 20px 0; font-size: 14px; line-height: 1.7;">
                        <text>{{ t('news_add_field.OpenAccount.Des3') }}</text>
                    </view>
                </view>

                <!-- 底部说明 -->
                <view class="box">
                    <view style="margin: 20px 0; font-size: 14px; line-height: 1.7;">
                        <text>{{ t('news_add_field.OpenAccount.Des1') }}</text>
                        <text class="pdfLink" @click="openPdf('PrivacyPolicy2019_01.pdf')">
                            {{ t('news_add_field.OpenAccount.Des2') }}
                        </text>
                    </view>
                </view>
            </view>

            <!-- 提交后的弹出框 -->
            <uv-popup :show="dialogCheck" mode="center" round="16" @close="closeDia">
                <view class="dia-content" v-if="dialogVisible">
                    <view class="icon">
                        <text class="iconfont icon-success"></text>
                    </view>
                    <view class="des1">{{ t('ApplicationDialog.Des1') }}</view>
                    <view class="des2">{{ t('ApplicationDialog.Des12') }}</view>
                    <view class="dialog-footer">
                        <uv-button type="primary" @click="closeDia">
                            {{ t('Btn.Confirm') }}
                        </uv-button>
                        <uv-button @click="closeDia">
                            {{ t('Btn.Cancel') }}
                        </uv-button>
                    </view>
                </view>

                <view class="dia-content" v-if="!dialogVisible">
                    <view class="icon">
                        <text class="iconfont icon-warning"></text>
                    </view>
                    <view class="des1">{{ RES }}</view>
                    <view class="dialog-footer">
                        <uv-button type="primary" @click="closeDia">
                            {{ t('Btn.Confirm') }}
                        </uv-button>
                        <uv-button @click="closeDia">
                            {{ t('Btn.Cancel') }}
                        </uv-button>
                    </view>
                </view>
            </uv-popup>

            <!-- 账户开立上限提示弹框 -->
            <uv-popup :show="dialogAccountLimit" mode="center" round="16" @close="closeAccountLimitDialog">
                <view class="account-limit-content">
                    <view class="icon">
                        <text class="iconfont icon-warning"></text>
                    </view>
                    <view class="title">{{ t('accountLimit.title') }}</view>
                    <view class="content">
                        <view class="limit-text">
                            <view>{{ t('accountLimit.mt4Message') }}</view>
                            <view>
                                <view>{{ t('accountLimit.mt4Condition1') }}</view>
                            </view>
                            <view>{{ t('accountLimit.mt4Action') }}</view>
                        </view>
                    </view>
                    <view class="dialog-footer">
                        <uv-button type="primary" class="confirm-btn" @click="closeAccountLimitDialog">
                            {{ t('accountLimit.button') }}
                        </uv-button>
                    </view>
                </view>
            </uv-popup>
        </view>

    </cwg-page-wrapper>

</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import QrCode from "@/components/QrCode.vue";
import { post } from "@/utils/request";
import { userToken } from "@/composables/config";
import { customApi } from "@/service/custom";
import { ucardApi } from "@/api/ucard";
import useUserStore from "@/stores/use-user-store";
import useRouter from "@/hooks/useRouter";
import { useI18n } from "vue-i18n";
const router = useRouter();
const { t } = useI18n();
const userStore = useUserStore();
// 响应式表单数据
const cativeIndex = ref(0);
const tabs = computed(() => ([
    { id: 1, name: 'Step 1: Select Account' },
    { id: 2, name: 'Step 2: Add Information' },
    { id: 3, name: 'Step 3: Success' },

]))


// 数据定义
const pictLoading = ref(false);
const flag = ref(false);
const RES = ref('');
const dialogCheck = ref(false);
const dialogVisible = ref(false);
const showData = ref(null);
const isOpenAccount = ref(0);
const checked = ref('');
const optionsLev = ref([]);
const optionsCur = ref([]);
const dome = ref(null);
const showLogin = ref([]);
const showPage = ref(false);
const isTimeShow = ref(false);
const dialogAccountLimit = ref(false);
const limitPlatform = ref('');
const hidden = ref(true);
const ho = ref('');
const language = ref('');

// 表单引用
const formRef = ref(null);

// 表单数据
const params = reactive({
    password: '',
    currency: '',
    leverage: '',
    platform: '',
    balance: null
});

// 计算属性
const rule1 = computed(() => {
    if (!params.password) return false;
    return /^.{8,15}$/.test(params.password);
});

const rule2 = computed(() => {
    return /^(?=.*?[a-z])(?=.*?[A-Z]).*$/.test(params.password);
});

const rule4 = computed(() => {
    return /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~!@&%$^*./\\(\\)\\+\\=#_-])[A-Za-z0-9~!@&%$^*./\\(\\)\\+\\=#_-]{8,16}$/.test(
        params.password
    );
});

// 验证规则
const rules = {
    password: [
        {
            validator: (rule, value, callback) => {
                if (/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~!@&%$^*./\\(\\)\\+\\=#_-])[A-Za-z0-9~!@&%$^*./\\(\\)\\+\\=#_-]{8,16}$/.test(value)) {
                    callback();
                } else {
                    callback(new Error(t('vaildate.password.format')));
                }
            },
            trigger: 'blur',
            required: true
        }
    ],
    platform: [
        {
            required: true,
            message: t('vaildate.select.empty'),
            trigger: 'change'
        }
    ],
    currency: [
        {
            required: true,
            message: t('vaildate.select.empty'),
            trigger: 'change'
        }
    ],
    leverage: [
        {
            required: true,
            message: t('vaildate.select.empty'),
            trigger: 'change'
        }
    ],
    balance: [
        {
            validator: (rule, value, callback) => {
                if (value === null || value === undefined || value === '') {
                    callback();
                    return;
                }
                const numValue = Number(value);
                if (isNaN(numValue)) {
                    callback(new Error(t('vaildate.amount.format')));
                    return;
                }
                if (numValue < 0 || numValue > 100000) {
                    callback(new Error(t('vaildate.amount.amount') + '0-100000'));
                    return;
                }
                callback();
            },
            trigger: ['blur', 'change']
        }
    ]
};

// 平台选项
const platformColumns = computed(() => {
    const columns = [];
    if (showData.value && showData.value['mt4s'] && showData.value['mt4s'].length) {
        columns.push({ label: 'MT4', value: 'MT4' });
    }
    if (showData.value && showData.value['mt5s'] && showData.value['mt5s'].length) {
        columns.push({ label: 'MT5', value: 'MT5' });
    }
    return [columns];
});

// 货币选项
const currencyColumns = computed(() => {
    if (optionsCur.value.length) {
        return [optionsCur.value.map(item => ({ label: item, value: item }))];
    }
    return [[]];
});

// 杠杆选项
const leverageColumns = computed(() => {
    if (optionsLev.value.length) {
        return [optionsLev.value.map(item => ({ label: String(item), value: item }))];
    }
    return [[]];
});

// 方法
const closeDia = () => {
    if (formRef.value) {
        formRef.value.resetFields();
    }
    dialogCheck.value = false;
    dialogVisible.value = false;
};

const closeAccountLimitDialog = () => {
    dialogAccountLimit.value = false;
    limitPlatform.value = '';
};

const showAccountLimitDialog = (platform) => {
    limitPlatform.value = platform;
    dialogAccountLimit.value = true;
};

// 获取必要数据
const getMustData = async (type, isDome) => {
    const api = isDome ? customApi.AccountApplyDataDome : customApi.AccountApplyData;
    const res = await api({
        type: type
    });
    if (res.code === 200) {
        showData.value = res.data;
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        });
    }
};

// 获取显示权限
const getExcludeShowLogin = async () => {
    pictLoading.value = true;
    const res = await customApi.excludeShowLogin({});
    if (res.code === 200) {
        showLogin.value = res.data?.excludeShowLoginTypes || [];
        showPage.value = true;
        pictLoading.value = false;
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        });
        pictLoading.value = false;
    }
};

// 提交开户
const newAccount = async (type, isDome) => {
    if (!formRef.value) return;

    try {
        await formRef.value.validate();
    } catch (error) {
        return;
    }

    if (flag.value) return;
    flag.value = true;

    const api = isDome ? customApi.AccountApplyAddDome : customApi.AccountApplyAdd;
    const res = await api({
        type: type,
        ...params
    });

    if (res.code === 200) {
        if (isDome) {
            uni.showToast({
                title: t('Msg.Success'),
                icon: 'success'
            });
        }
        isOpenAccount.value = 0;
        dialogCheck.value = true;
        dialogVisible.value = true;
        if (formRef.value) {
            formRef.value.resetFields();
        }
        flag.value = false;
    } else if (res.code === 407) {
        showAccountLimitDialog(params.platform);
        flag.value = false;
    } else {
        RES.value = res.msg;
        dialogCheck.value = true;
        dialogVisible.value = false;
        flag.value = false;
    }
};

// 展开/关闭账户表单
const isOpenClose = (index, isDome) => {
    hidden.value = true;
    if (isOpenAccount.value === index) {
        isOpenAccount.value = 0;
        if (formRef.value) {
            formRef.value.resetFields();
        }
        return;
    } else {
        isOpenAccount.value = index;
    }
    if (formRef.value) {
        formRef.value.resetFields();
    }
    dome.value = isDome;
    optionsLev.value = [];
    optionsCur.value = [];
    getMustData(index, isDome);
};

// 选择平台
const checkPlatform = (pla) => {
    if (pla === 'mt5s') {
        hidden.value = false;
    } else {
        hidden.value = true;
    }
    params.currency = '';
    params.leverage = '';
    optionsLev.value = [];
    optionsCur.value = [];
    const Cur = [];
    showData.value[pla].forEach((item) => {
        Cur.push(item.currency);
    });
    Cur.forEach((item) => {
        if (!optionsCur.value.includes(item)) {
            optionsCur.value.push(item);
        }
    });
};

// 平台确认
const handlePlatformConfirm = (value) => {
    params.platform = value.value[0];
    const pla = params.platform === 'MT4' ? 'mt4s' : 'mt5s';
    checkPlatform(pla);
};

// 货币确认
const handleCurrencyConfirm = (value) => {
    params.currency = value.value[0];
    const pla = params.platform === 'MT4' ? 'mt4s' : 'mt5s';
    checkCurrency(pla, params.currency);
};

// 杠杆确认
const handleLeverageConfirm = (value) => {
    params.leverage = value.value[0];
};

// 选择货币
const checkCurrency = (pla, cur) => {
    params.leverage = '';
    optionsLev.value = [];
    const platform = pla === 'MT4' ? 'mt4s' : 'mt5s';
    const list = [];
    showData.value[platform].forEach((item) => {
        if (item.currency === cur) {
            list.push(item.leverage);
        }
    });
    params.leverage = list.reduce((a, b) => Math.max(a, b));
    optionsLev.value = list;
};

// 时间判断
const isAfterJuly28 = () => {
    // 实现日期判断逻辑
    return false;
};

const isTimeShowType8 = () => {
    const endTime1 = '2024/9/25 00:00:00';
    const timezone = 2;
    const offset_GMT = new Date().getTimezoneOffset();
    const nowDate = new Date().getTime();
    const now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime();
    const end = new Date(endTime1).getTime();
    if (now > end) {
        isTimeShow.value = true;
    }
};

// 余额变化验证
const handleBalanceChange = () => {
    if (formRef.value) {
        formRef.value.validateField('balance');
    }
};

// 打开链接
const openLink = (path) => {
    uni.navigateTo({
        url: `/pages/webview/index?url=https://www.${ho.value}.com/${path}`
    });
};

// 打开PDF
const openPdf = (path) => {
    uni.navigateTo({
        url: `/pages/webview/index?url=/pdf/${path}`
    });
};

// 监听balance变化
watch(() => params.balance, (newVal, oldVal) => {
    if (newVal !== oldVal && newVal !== null && newVal !== undefined) {
        nextTick(() => {
            if (formRef.value) {
                formRef.value.validateField('balance');
            }
        });
    }
});

// 生命周期
onLoad(() => {
    const host = window?.location?.host || '';
    ho.value = host.split('.')[1] || '';

    // 获取语言
    const locale = uni.getLocale();
    language.value = locale;

    getExcludeShowLogin();
    isTimeShowType8();
});

onMounted(() => {
    // 挂载后的操作
});
</script>

<style lang="scss" scoped>
.tit {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;

    .iconfont {
        margin-right: 6px;
    }
}

.des {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 20px;
}

#custom_newAccount {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;

    &.u-loading {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.5);
            z-index: 99;
        }
    }

    .main-content {
        text-align: left;
        padding: 0 20px;

        .box {
            padding: 10px 0;
            text-align: left;
            background-color: #ffffff;
            border-radius: 2px;
            margin: 20px 0;

            .pdfLink {
                color: #42b983;
                font-weight: bold;
                text-decoration: underline;
                margin-left: 4px;
            }


            .b-card {
                border: 2px solid #e5e5e5;
                margin-bottom: 20px;
                border-radius: 2px;
                position: relative;
                overflow: hidden;

                .btn-tag-star {
                    position: absolute;
                    top: 4px;
                    left: -15px;
                    background-color: #f56c6c;
                    color: #ffffff;
                    transform: rotate(-45deg);
                    width: 60px;
                    text-align: center;
                    z-index: 9;
                    padding: 1px 0;
                }

                .card-top {
                    display: flex;
                    border-bottom: 1px solid #e5e5e5;

                    .tit {
                        font-weight: bold;
                    }

                    .btn-bottom {
                        font-size: 14px;

                        .btn-open,
                        .btn-try {
                            display: inline-block;
                            width: 150px;
                            text-align: center;
                            border: 1px solid #e5e5e5;
                            padding: 8px 0;
                            margin: 5px;
                            color: #ffffff;

                            .iconfont {
                                margin-right: 3px;
                                font-size: 12px;
                            }
                        }

                        .btn-open {
                            margin-right: 5px;
                            background-color: #f56c6c;
                            color: #ffffff;
                        }

                        .btn-try {
                            background-color: #909399;
                        }
                    }

                    .header {
                        padding: 15px 25px;
                    }

                    .descending {
                        padding: 10px;
                        box-sizing: border-box;
                        height: 100%;
                        width: 100%;
                        font-size: 14px;
                        line-height: 1.2;
                        background-color: #f5f5f5;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;

                        view {
                            width: 100%;
                            box-sizing: border-box;
                            text-align: center;
                        }
                    }
                }

                .card-bottom {
                    padding: 20px;
                    border-bottom: 1px solid #d5d5d5;

                    .check {
                        padding: 6px 8px;
                        margin: 15px 15px 15px 0;
                        border: 1px solid #d5d5d5;
                    }

                    .pwd {
                        text-align: left;
                        padding-left: 20px;
                        margin-top: 15px;

                        view {
                            list-style-type: disc;
                            line-height: 1.2;
                            margin: 4px 0;
                            color: #c0c4cc;

                            &.fit {
                                color: #67c23a;
                            }
                        }
                    }

                    .picker-value {
                        padding: 10px 0;
                        border-bottom: 1px solid #e5e5e5;
                    }

                    .s-btn {
                        width: 100%;
                        margin-top: 20px;
                    }
                }

                &:hover {
                    border-color: #f56c6c;
                }
            }
        }
    }

    .dia-content {
        text-align: center;
        padding: 30px 20px;

        .icon {
            .iconfont {
                font-size: 80px;

                &.icon-warning {
                    color: #f56c6c;
                }

                &.icon-success {
                    color: #67c23a;
                }
            }
        }

        .des1 {
            font-weight: bold;
            font-size: 16px;
            margin: 30px 0 15px;
        }

        .des2 {
            font-size: 14px;
            margin-bottom: 30px;
        }

        .dialog-footer {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;

            .uv-button {
                min-width: 100px;
            }
        }
    }

    .account-limit-content {
        text-align: center;
        padding: 30px 20px;

        .icon {
            margin-bottom: 20px;

            .iconfont {
                font-size: 60px;
                color: #f56c6c;
            }
        }

        .title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }

        .content {
            text-align: center;
            margin: 20px 0 30px;

            .limit-text {
                view {
                    font-size: 14px;
                    line-height: 1.6;
                    color: #666;
                    margin-bottom: 15px;
                    text-align: center;
                }
            }
        }

        .dialog-footer {
            text-align: center;
            margin-top: 20px;

            .confirm-btn {
                min-width: 120px;
                background-color: #f56c6c;
                border: none;
                color: #fff;
            }
        }
    }
}
</style>