first

zzzz

2024-04-20 ae313a0f7cc9fa2cdc469e663832f8b1dd82c655

first

 src/page/accountChange/index.vue

@@ -1,35 +1,75 @@
<template>
    <!-- 账变记录 -->
    <div class="accountChange">
        <assets-head :title="$t('账变记录')" />
        <van-tabs ref="tabs" v-model="active" swipeable @change="onChange" sticky>
            <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
                <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
                    :finished-text="list.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130" class="px-16">
                    <div class="flex justify-between items-center record-list" v-for="(item, index) in list" :key="index">
                        <div class="flex items-center">
                            <img :src="require(`@/assets/image/assets-center/${item.amount > 0 ? 'in' : 'out'}.png`)"
                                class="w-44 h-44 mr-20" />
                            <div>
                                <div class="font-32 textColor">{{ category[item.category] }}</div>
                                <div class="text-grey font-26 mt-14">{{ orderTypes[item.content_type] }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="font-32 text-right" :class="item.amount > 0 ? 'text-green' : 'text-red'">{{
                                item.amount |
                                toFixed }}&nbsp;{{ item.wallettype.toUpperCase() }}</div>
                            <div class="text-grey font-28 mt-14">{{ item.createTimeStr }}</div>
                        </div>
                    </div>
                    <div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="!list.length && !loading">
                        <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                        <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
                    </div>
                </van-list>
            </van-tab>
        </van-tabs>
        <!-- <div class="flex justify-between pl-30 pr-30 mtb30">
  <!-- 账变记录 -->
  <div class="accountChange">
    <assets-head :title="$t('账变记录')" />
    <van-tabs ref="tabs" v-model="active" swipeable @change="onChange" sticky>
      <van-tab
        :title="item.title"
        v-for="item in selectData"
        :key="item.title"
        :name="item.type"
      >
        <van-list
          v-model="loading"
          :loading-text="$t('加载中...')"
          :finished="finished"
          :finished-text="list.length ? $t('已经全部加载完毕') : ''"
          @load="onLoad"
          :offset="130"
          class="px-16"
        >
          <div
            class="flex justify-between items-center record-list"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="flex items-center">
              <img
                :src="
                  require(`@/assets/image/assets-center/${
                    item.amount > 0 ? 'in' : 'out'
                  }.png`)
                "
                class="w-44 h-44 mr-20"
              />
              <div>
                <div class="font-32 textColor">
                  {{ category[item.category] }}
                </div>
                <div class="text-grey font-26 mt-14">
                  {{ orderTypes[item.content_type] }}
                </div>
              </div>
            </div>
            <div>
              <div
                class="font-32 text-right"
                :class="item.amount > 0 ? 'text-green' : 'text-red'"
              >
                {{ item.amount | toFixed }}&nbsp;{{
                  item.wallettype.toUpperCase()
                }}
              </div>
              <div class="text-grey font-28 mt-14">
                {{ item.createTimeStr }}
              </div>
            </div>
          </div>
          <div
            class="flex flex-col justify-center pt-50 pb-20 items-center"
            v-if="!list.length && !loading"
          >
            <img
              src="@/assets/image/assets-center/no-data.png"
              alt=""
              class="w-180 h-180"
            />
            <p class="text-grey mt-10">{{ $t("暂无记录") }}</p>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- <div class="flex justify-between pl-30 pr-30 mtb30">
            <div class="select-view">
               <div class="flex item-center justify-center select-box text-center" @click="selectBtn">
                 <div class="font-30">{{ title }}</div>
@@ -43,277 +83,281 @@
            </div>
             <button class="search-btn btnMain text-white font-28 rounded-4" @click="onSumbit">{{ $t('查询') }}</button>
        </div> -->
    </div>
  </div>
</template>

<script>
import { _fundRecord } from '@/API/fund.api'
import { List } from 'vant'
import { _fundRecord } from "@/API/fund.api";
import { List } from "vant";
import assetsHead from "@/components/assets-head";
import { Tab, Tabs } from 'vant';
import { Tab, Tabs } from "vant";
export default {
    name: "accountChange",
    data() {
        return {
            active: '',
            page: 1,
            loading: false, // 当loading为true时，转圈圈
            finished: false,  // 数据是否请求结束，结束会先显示'已经全部加载完毕'
            noData: false,// 如果没有数据，显示暂无数据
            // loading:false,   // 下拉的加载图案
            isShow: false,
            title: this.$t('选择账户类型'),
            selectData: [
                { title: this.$t('全部'), type: '' },
                { title: this.$t('法币交易'), type: 'coin' },
                { title: this.$t('合约交易'), type: 'contract' },
                { title: this.$t('币币交易'), type: 'exchange' },
            ],
            type: "",//选中类型
            list: [
                // { order_no:'11111', category:this.$t('合约交易'),content_type:this.$t('永续合约平仓'),amount:1000,wallettype:'USDT',createTimeStr:'2022-07-16 22:23:04'},
                // { order_no:'22222', category:this.$t('合约交易'),content_type:this.$t('永续合约平仓'),amount:-200,wallettype:'USDT',createTimeStr:'2022-07-16 22:23:04'},
                // { order_no:'3333333', category:this.$t('合约交易'),content_type:this.$t('永续合约平仓'),amount:1000,wallettype:'USDT',createTimeStr:'2022-07-16 22:23:04'},
            ]
  name: "accountChange",
  data() {
    return {
      active: "",
      page: 1,
      loading: false, // 当loading为true时，转圈圈
      finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
      noData: false, // 如果没有数据，显示暂无数据
      // loading:false,   // 下拉的加载图案
      isShow: false,
      title: this.$t("选择账户类型"),
      selectData: [
        { title: this.$t("全部"), type: "" },
        { title: this.$t("法币交易"), type: "coin" },
        { title: this.$t("合约交易"), type: "contract" },
        { title: this.$t("币币交易"), type: "exchange" },
      ],
      type: "", //选中类型
      list: [
        // { order_no:'11111', category:this.$t('合约交易'),content_type:this.$t('永续合约平仓'),amount:1000,wallettype:'USDT',createTimeStr:'2022-07-16 22:23:04'},
        // { order_no:'22222', category:this.$t('合约交易'),content_type:this.$t('永续合约平仓'),amount:-200,wallettype:'USDT',createTimeStr:'2022-07-16 22:23:04'},
        // { order_no:'3333333', category:this.$t('合约交易'),content_type:this.$t('永续合约平仓'),amount:1000,wallettype:'USDT',createTimeStr:'2022-07-16 22:23:04'},
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      this.$refs.tabs.resize();
    }, 500);
  },
  components: {
    assetsHead,
    [List.name]: List,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  computed: {
    orderTypes() {
      return {
        withdraw: this.$t("提币"),
        recharge: this.$t("充币"),
        contract_close: this.$t("永续合约平仓"),
        contract_open: this.$t("永续合约建仓"),
        contract_cancel: this.$t("永续合约撤单"),
        fee: this.$t("手续费"),
        exchange_open: this.$t("币币买入"),
        exchange_close: this.$t("币币卖出"),
        exchange_cancel: this.$t("币币撤单"),
        finance: this.$t("理财"),
        finance_profit: this.$t("理财收益"),
        finance_recom_profit: this.$t("理财推广收益"),
        miner_buy: this.$t("锁仓矿机"),
        miner_recom_profit: this.$t("矿机推广收益"),
        miner_profit: this.$t("矿机收益"),
        miner_back: this.$t("矿机赎回"),
        fund_close: this.$t("赎回"),
        fund_open: this.$t("购买"),
        otc_sell: this.$t("otc卖币"),
        otc_buy: this.$t("otc买币"),
        otc_cancel: this.$t("otc订单取消"),
        loan_frozen: this.$t("冻结"),
        loan_thaw: this.$t("解冻"),
        loan_closeout: this.$t("强平"),
        loan_add: this.$t("借款"),
        loan_repay: this.$t("还款"),
        finance_buy: this.$t("购买"),
        finance_back: this.$t("赎回"),
        delivery_contract_open: this.$t("交割合约建仓"),
        delivery_contract_close: this.$t("交割合约平仓"),
        follow_up_fee: this.$t("跟单手续费"),
        exchange_lever_close: this.$t("全仓杠杆平仓"),
        exchange_lever_open: this.$t("全仓杠杆建仓"),
        exchange_lever_interest: this.$t("全仓杠杆利息"),
        c2c_sell: this.$t("c2c卖币"),
        c2c_buy: this.$t("c2c买币"),
        ICO: this.$t("ICO"),
      };
    },
    category() {
      return {
        coin: this.$t("法币交易"),
        contract: this.$t("合约交易"),
        exchange: this.$t("币币交易"),
        finance: this.$t("理财"),
        miner: this.$t("矿机"),
        otc: this.$t("otc"),
        loan: this.$t("质押借币"),
        中签: this.$t("中签"),
        配售: this.$t("配售"),
        认缴: this.$t("认缴"),
        充币: this.$t("充币"),
        c2c: "C2C",
      };
    },
  },
  filters: {
    toFixed(val) {
      return (val / 1).toFixed(5);
    },
  },
  methods: {
    onChange(e) {
      this.list = [];
      this.finished = false;
      this.page = 1;
      this.type = e;
      this.loading = true;
      if (this.loading) {
        this.fetchData();
      }
    },
    onLoad() {
      this.fetchData();
    },
    fetchData() {
      // 获取数据
      _fundRecord(this.type, this.page).then((data) => {
        this.list = [...this.list, ...data];
        // console.log(logs)
        this.loading = false;
        if (data.length < 20) {
          this.finished = true;
        } else {
          this.page++;
        }
      });
    },
    mounted() {
        setTimeout(() => {
            this.$refs.tabs.resize();
        }, 500)
    onClickLeft() {
      this.$router.go(-1);
    },
    components: {
        assetsHead,
        [List.name]: List,
        [Tabs.name]: Tabs,
        [Tab.name]: Tab
    selectBtn() {
      this.isShow = !this.isShow;
    },
    computed: {
        orderTypes() {
            return {
                withdraw: this.$t('提币'),
                recharge: this.$t('充币'),
                contract_close: this.$t('永续合约平仓'),
                contract_open: this.$t('永续合约建仓'),
                contract_cancel: this.$t('永续合约撤单'),
                fee: this.$t('手续费'),
                exchange_open: this.$t('币币买入'),
                exchange_close: this.$t('币币卖出'),
                exchange_cancel: this.$t('币币撤单'),
                finance: this.$t('理财'),
                finance_profit: this.$t('理财收益'),
                finance_recom_profit: this.$t('理财推广收益'),
                miner_buy: this.$t('锁仓矿机'),
                miner_recom_profit: this.$t('矿机推广收益'),
                miner_profit: this.$t('矿机收益'),
                miner_back: this.$t('矿机赎回'),
                fund_close: this.$t('赎回'),
                fund_open: this.$t('购买'),
                otc_sell: this.$t('otc卖币'),
                otc_buy: this.$t('otc买币'),
                otc_cancel: this.$t('otc订单取消'),
                loan_frozen: this.$t('冻结'),
                loan_thaw: this.$t('解冻'),
                loan_closeout: this.$t('强平'),
                loan_add: this.$t('借款'),
                loan_repay: this.$t('还款'),
                finance_buy: this.$t('购买'),
                finance_back: this.$t('赎回'),
                delivery_contract_open:this.$t('交割合约建仓'),
                delivery_contract_close:this.$t('交割合约平仓'),
                follow_up_fee:this.$t('跟单手续费'),
                exchange_lever_close:this.$t('全仓杠杆平仓'),
                exchange_lever_open:this.$t('全仓杠杆建仓'),
                exchange_lever_interest:this.$t('全仓杠杆利息'),
                c2c_sell:this.$t('c2c卖币'),
                c2c_buy:this.$t('c2c买币'),
            }
        },
        category() {
            return {
                coin: this.$t('法币交易'),
                contract: this.$t('合约交易'),
                exchange: this.$t('币币交易'),
                finance: this.$t('理财'),
                miner: this.$t('矿机'),
                otc: this.$t('otc'),
                loan: this.$t('质押借币'),
                c2c: 'C2C'
            }
        }
    selectItem(item) {
      this.title = item.title;
      this.type = item.type;
      this.isShow = false;
    },
    filters: {
        toFixed(val) {
            return (val / 1).toFixed(5)
        }
    onSumbit() {
      // 查询
      this.page = 1;
      this.finished = false;
      this.list = [];
      this.fetchData();
    },
    methods: {
        onChange(e) {
            this.list = []
            this.finished = false
            this.page = 1
            this.type = e
            this.loading = true;
            if (this.loading) {
                this.fetchData()
            }
        },
        onLoad() {
            this.fetchData()
        },
        fetchData() { // 获取数据
            _fundRecord(this.type, this.page).then(data => {
                this.list = [...this.list, ...data]
                // console.log(logs)
                this.loading = false
                if (data.length < 20) {
                    this.finished = true
                } else {
                    this.page++
                }
            })
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        selectBtn() {
            this.isShow = !this.isShow;
        },
        selectItem(item) {
            this.title = item.title;
            this.type = item.type;
            this.isShow = false;
        },
        onSumbit() { // 查询
            this.page = 1
            this.finished = false
            this.list = []
            this.fetchData()
        }
    }
}
  },
};
</script>
<style lang="scss" scoped>
.accountChange {
    width: 100%;
    box-sizing: border-box;
  width: 100%;
  box-sizing: border-box;

    ::v-deep .van-tabs__nav {
        @include themify() {
            background: themed("tab_background");
        }
  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("tab_background");
    }
  }

    ::v-deep .van-tab--active .van-tab__text {
        @include themify() {
            color: themed("text_color");
        }
  ::v-deep .van-tab--active .van-tab__text {
    @include themify() {
      color: themed("text_color");
    }
  }

    ::v-deep .van-tab__text {
        @include themify() {
            color: themed("text_color1");
        }
  ::v-deep .van-tab__text {
    @include themify() {
      color: themed("text_color1");
    }
  }
}



// select样式
.select-view {
    position: relative;
    width: 320px;
  position: relative;
  width: 320px;
}

.select-box {
    width: 100%;
    height: 70px;
    line-height: 70px;
  width: 100%;
  height: 70px;
  line-height: 70px;

    @include themify() {
        background-color: themed("input_background");
    }
  @include themify() {
    background-color: themed("input_background");
  }

    cursor: pointer;
  cursor: pointer;
}

.option-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  width: 100%;

    @include themify() {
        background: themed("grey_bg");
    }
  @include themify() {
    background: themed("grey_bg");
  }

    text-align: center;
  text-align: center;

    @include themify() {
        box-shadow: 0px 0px 3px 3px themed("grey_bg");
    }
  @include themify() {
    box-shadow: 0px 0px 3px 3px themed("grey_bg");
  }

    border-radius: 4px;
  border-radius: 4px;

    @include themify() {
        color: themed("text_color3");
    }
  @include themify() {
    color: themed("text_color3");
  }

    z-index: 10;
  z-index: 10;
}

.option-box>div {
    padding: 30px 0;
.option-box > div {
  padding: 30px 0;
}

.option-box>div:hover {
    // background-color:#F5F5F5;
.option-box > div:hover {
  // background-color:#F5F5F5;
}

// 按钮
.search-btn {
    width: 140px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border: none;
    outline: none;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border: none;
  outline: none;
}

.record-list {
    padding: 38px 30px;
  padding: 38px 30px;

    @include themify() {
        border-bottom: 1px solid themed("cont_background");
    }
  @include themify() {
    border-bottom: 1px solid themed("cont_background");
  }
}

.mt12 {
    margin-top: 12px;
  margin-top: 12px;
}

.dividing-line {
    height: 10px;
  height: 10px;

    @include themify() {
        background-color: themed("divi_line");
    }

  @include themify() {
    background-color: themed("divi_line");
  }
}

.mtb30 {
    margin: 30px 0;
  margin: 30px 0;
}

.select-icon {
    position: relative;
    bottom: 8px;
  position: relative;
  bottom: 8px;
}

.accountChange {
    ::v-deep .van-tab__text {
        font-size: 30px !important;
    }
  ::v-deep .van-tab__text {
    font-size: 30px !important;
  }
}
</style>

 src/page/certificationCenter/index.vue

@@ -1,402 +1,541 @@
<template>
    <div class="certificationCenter">
        <assets-head :title="$t('认证中心')"></assets-head>
        <div class="top px-32 pt-26 pb-42">
            <div class="font-52 textColor flex justify-between">
                <div>{{ $t('个人中心') }}</div>
                <!-- <div v-if="nationality"  class="w-60 h-60 rounded-full icon iti-flag" :class="nationality" style="transform: scale(2.1)"></div> -->
            </div>
            <div class="flex">
                <div class="flex items-center mt-32 px-28 py-8 bgDark rounded-full">
                    <img src="../../assets/image/certificationCenter/cftIcon.png" alt="" class="w-64 h-64">
                    <span class="ml-10 font-32 textColor3" @click="show = true">{{ $t('查看当前功能') }}</span>
                </div>
            </div>
  <div class="certificationCenter">
    <assets-head :title="$t('认证中心')"></assets-head>
    <div class="top px-32 pt-26 pb-42">
      <div class="font-52 textColor flex justify-between">
        <div>{{ $t("个人中心") }}</div>
        <!-- <div v-if="nationality"  class="w-60 h-60 rounded-full icon iti-flag" :class="nationality" style="transform: scale(2.1)"></div> -->
      </div>
      <div class="flex">
        <div class="flex items-center mt-32 px-28 py-8 bgDark rounded-full">
          <img
            src="../../assets/image/certificationCenter/cftIcon.png"
            alt=""
            class="w-64 h-64"
          />
          <span class="ml-10 font-32 textColor3" @click="show = true">{{
            $t("查看当前功能")
          }}</span>
        </div>
        <div class="contentBox pt-46 tabBackground pb-64">
            <div class="btnBox px-32 flex">
                <div class="textColor3 px-44 h-100 rounded-full bgDark flex items-center"
                    :class="{ 'activeStyle': active == 0 }" @click="changeTab(0)">
                    <img v-if="identityverif" src="../../assets/image/certificationCenter/finishIcon.png" alt=""
                        class="w-48 h-48 mr-14" />
                    <span>{{ $t('进阶认证') }}</span>
                </div>
                <div class="textColor3 px-44 h-100 rounded-full bgDark ml-28 flex items-center"
                    :class="{ 'activeStyle': active == 1 }" @click="changeTab(1)">
                    <img v-if="advancedverif" src="../../assets/image/certificationCenter/finishIcon.png" alt=""
                        class="w-48 h-48 mr-14" />
                    <span>{{ $t('公证认证') }}</span>
                </div>
            </div>
            <div v-show="active == 0">
                <div class="flex pl-32 justify-between mt-54">
                    <div class="textColor font-36">{{ $t('要求') }}</div>
                    <div class="font-28 flex items-center py-12 px-14 border-radius-left"
                        :class="{ 'status0': kyc_status == 0 || kyc_status == 3, 'status1': kyc_status == 1, 'status2': kyc_status == 2 }">
                        <img :src="require(`../../assets/image/certificationCenter/status${kyc_status}.png`)"
                            class="w-32 h-32" alt="" />
                        <span class="font-28 ml-12">{{ fixState(kyc_status) }}</span>
                    </div>
                </div>
                <div class="px-32">
                    <div class="flex items-center mt-34 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/info.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{ $t('个人信息') }}</span>
                    </div>
                    <div class="flex items-center mt-40 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/identity.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{ $t('政府发行的身份证') }}</span>
                    </div>
                </div>
                <div class="px-32">
                    <div class="font-36 textColor mt-82">{{ $t('功能与限制') }}</div>
                    <content-com class="mt-40" :contentObj="coinObj" :state="identityverif"></content-com>
                    <content-com class="mt-40" :contentObj="c2cObj" :state="identityverif"></content-com>
                    <content-com class="mt-40" :contentObj="currencyObj" :state="identityverif"></content-com>
                    <div class="flex items-center text-grey font-30 mt-64">
                        <img src="../../assets/image/certificationCenter/suditIcon.png" class="w-36 h-36" alt="" />
                        <span class="ml-24">{{ $t('审核时间:3天') }}</span>
                    </div>
                    <div class="px-32 text-red font-20">
                        <p v-show="(kyc_status == 3)">{{ this.$t('认证驳回：') }}{{ turnDownMsg }}</p>
                    </div>
                    <div class="rounded-lg py-26 text-center mt-16"
                        :class="kyc_status == 0 || kyc_status == 3 ? 'btnMain text-white' : 'bgDark text-grey'"
                        @click="$router.push('/authentication')">{{ fixBtnState(kyc_status) }}</div>
                </div>

            </div>
            <div v-show="active == 1">
                <div class="flex pl-32 justify-between mt-54">
                    <div class="textColor font-36">{{ $t('要求') }}</div>
                    <div class="font-28 flex items-center py-12 px-14 border-radius-left"
                        :class="{ 'status0': advStatus == 0 || advStatus == 3, 'status1': advStatus == 1, 'status2': advStatus == 2 }">
                        <img :src="require(`../../assets/image/certificationCenter/status${advStatus}.png`)"
                            class="w-32 h-32" alt="" />
                        <span class="font-28 ml-12">{{ fixState(advStatus) }}</span>
                    </div>
                </div>
                <div class="px-32">
                    <div class="flex items-center mt-34 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/address.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{ $t('家庭地址') }}</span>
                    </div>
                    <div class="flex items-center mt-34 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/address.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{ $t('工作地址') }}</span>
                    </div>
                    <div class="flex items-center mt-40 font-30 textColor">
                        <img src="../../assets/image/certificationCenter/connect.png" class="w-36 h-36" alt="" />
                        <span class="ml-24 textColor">{{ $t('亲属联系方式') }}</span>
                    </div>
                </div>
                <div class="px-32">
                    <div class="font-36 textColor mt-82">{{ $t('功能与限制') }}</div>
                    <content-com class="mt-40" :contentObj="advCoinObj" :state="advancedverif"></content-com>
                    <content-com class="mt-40" :contentObj="advC2cObj" :state="advancedverif"></content-com>
                    <content-com class="mt-40" :contentObj="advCurrencyObj" :state="advancedverif"></content-com>
                    <div class="flex items-center text-grey font-30 mt-64">
                        <img src="../../assets/image/certificationCenter/suditIcon.png" class="w-36 h-36" alt="" />
                        <span class="ml-24">{{ $t('公证时间为1-30个工作日') }}</span>
                    </div>
                    <div class="btnMain rounded-lg py-26 text-center mt-16"
                        :class="advStatus == 0 || advStatus == 3 ? 'btnMain text-black' : 'bgDark text-grey'"
                        @click="$router.push('/advancedCtf')">{{ fixBtnState(advStatus) }}</div>
                </div>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" :close-on-click-overlay="false" @close="onClose">
            <div class="pop-box relative mainBackground pb-46 px-32">
                <img src="@/assets/image/icon-close.png" class="w-38 h-38 absolute right-20 top-46" @click="onClose" />
                <div class="pt-46 textColor font-40 mb-20">{{ $t('您当前拥有的功能') }}</div>
                <div class="pb-32 pt-32 border-b-color" v-for="(item, index) in currentList" :key="index">
                    <div class="font-32 text-grey flex items-center">
                        <img :src="require(`../../assets/image/certificationCenter/${item.icon}.png`)"
                            class="w-36 h-36 mr-24" alt="" />
                        <span class="textColor mr-10">{{ item.title }}</span>
                        <span>{{ item.des }}</span>
                    </div>
                    <div class="text-grey font-30 mt-36 pl-60" v-for="(str, index) in item.arr"
                        :class="{ 'colorMain': index == 1 }" :key="index">{{ str }}</div>
                </div>
                <div class="btnMain text-black font-34 py-26 rounded-lg text-center mt-68" @click="onClose">{{ $t('确认') }}
                </div>
            </div>
        </van-popup>
      </div>
    </div>
    <div class="contentBox pt-46 tabBackground pb-64">
      <div class="btnBox px-32 flex">
        <div
          class="textColor3 px-44 h-100 rounded-full bgDark flex items-center"
          :class="{ activeStyle: active == 0 }"
          @click="changeTab(0)"
        >
          <img
            v-if="identityverif"
            src="../../assets/image/certificationCenter/finishIcon.png"
            alt=""
            class="w-48 h-48 mr-14"
          />
          <span>{{ $t("进阶认证") }}</span>
        </div>
        <div
          class="textColor3 px-44 h-100 rounded-full bgDark ml-28 flex items-center"
          :class="{ activeStyle: active == 1 }"
          @click="changeTab(1)"
        >
          <img
            v-if="advancedverif"
            src="../../assets/image/certificationCenter/finishIcon.png"
            alt=""
            class="w-48 h-48 mr-14"
          />
          <span>{{ $t("公证认证") }}</span>
        </div>
      </div>
      <div v-show="active == 0">
        <div class="flex pl-32 justify-between mt-54">
          <div class="textColor font-36">{{ $t("要求") }}</div>
          <div
            class="font-28 flex items-center py-12 px-14 border-radius-left"
            :class="{
              status0: kyc_status == 0 || kyc_status == 3,
              status1: kyc_status == 1,
              status2: kyc_status == 2,
            }"
          >
            <img
              :src="
                require(`../../assets/image/certificationCenter/status${kyc_status}.png`)
              "
              class="w-32 h-32"
              alt=""
            />
            <span class="font-28 ml-12">{{ fixState(kyc_status) }}</span>
          </div>
        </div>
        <div class="px-32">
          <div class="flex items-center mt-34 font-30 textColor">
            <img
              src="../../assets/image/certificationCenter/info.png"
              class="w-36 h-36"
              alt=""
            />
            <span class="ml-24 textColor">{{ $t("个人信息") }}</span>
          </div>
          <div class="flex items-center mt-40 font-30 textColor">
            <img
              src="../../assets/image/certificationCenter/identity.png"
              class="w-36 h-36"
              alt=""
            />
            <span class="ml-24 textColor">{{ $t("政府发行的身份证") }}</span>
          </div>
        </div>
        <div class="px-32">
          <div class="font-36 textColor mt-82">{{ $t("功能与限制") }}</div>
          <content-com
            class="mt-40"
            :contentObj="coinObj"
            :state="identityverif"
          ></content-com>
          <content-com
            class="mt-40"
            :contentObj="c2cObj"
            :state="identityverif"
          ></content-com>
          <content-com
            class="mt-40"
            :contentObj="currencyObj"
            :state="identityverif"
          ></content-com>
          <div class="flex items-center text-grey font-30 mt-64">
            <img
              src="../../assets/image/certificationCenter/suditIcon.png"
              class="w-36 h-36"
              alt=""
            />
            <span class="ml-24">{{ $t("审核时间:3天") }}</span>
          </div>
          <div class="px-32 text-red font-20">
            <p v-show="kyc_status == 3">
              {{ this.$t("认证驳回：") }}{{ turnDownMsg }}
            </p>
          </div>
          <div
            class="rounded-lg py-26 text-center mt-16"
            :class="
              kyc_status == 0 || kyc_status == 3
                ? 'btnMain text-white'
                : 'bgDark text-grey'
            "
            @click="$router.push('/authentication')"
          >
            {{ fixBtnState(kyc_status) }}
          </div>
        </div>
      </div>
      <div v-show="active == 1">
        <div class="flex pl-32 justify-between mt-54">
          <div class="textColor font-36">{{ $t("要求") }}</div>
          <div
            class="font-28 flex items-center py-12 px-14 border-radius-left"
            :class="{
              status0: advStatus == 0 || advStatus == 3,
              status1: advStatus == 1,
              status2: advStatus == 2,
            }"
          >
            <img
              :src="
                require(`../../assets/image/certificationCenter/status${advStatus}.png`)
              "
              class="w-32 h-32"
              alt=""
            />
            <span class="font-28 ml-12">{{ fixState(advStatus) }}</span>
          </div>
        </div>
        <div class="px-32">
          <div class="flex items-center mt-34 font-30 textColor">
            <img
              src="../../assets/image/certificationCenter/address.png"
              class="w-36 h-36"
              alt=""
            />
            <span class="ml-24 textColor">{{ $t("家庭地址") }}</span>
          </div>
          <div class="flex items-center mt-34 font-30 textColor">
            <img
              src="../../assets/image/certificationCenter/address.png"
              class="w-36 h-36"
              alt=""
            />
            <span class="ml-24 textColor">{{ $t("工作地址") }}</span>
          </div>
          <div class="flex items-center mt-40 font-30 textColor">
            <img
              src="../../assets/image/certificationCenter/connect.png"
              class="w-36 h-36"
              alt=""
            />
            <span class="ml-24 textColor">{{ $t("亲属联系方式") }}</span>
          </div>
        </div>
        <div class="px-32">
          <div class="font-36 textColor mt-82">{{ $t("功能与限制") }}</div>
          <content-com
            class="mt-40"
            :contentObj="advCoinObj"
            :state="advancedverif"
          ></content-com>
          <content-com
            class="mt-40"
            :contentObj="advC2cObj"
            :state="advancedverif"
          ></content-com>
          <content-com
            class="mt-40"
            :contentObj="advCurrencyObj"
            :state="advancedverif"
          ></content-com>
          <div class="flex items-center text-grey font-30 mt-64">
            <img
              src="../../assets/image/certificationCenter/suditIcon.png"
              class="w-36 h-36"
              alt=""
            />
            <span class="ml-24">{{ $t("公证时间为1-30个工作日") }}</span>
          </div>
          <div
            class="btnMain rounded-lg py-26 text-center mt-16"
            :class="
              advStatus == 0 || advStatus == 3
                ? 'btnMain text-black'
                : 'bgDark text-grey'
            "
            @click="$router.push('/advancedCtf')"
          >
            {{ fixBtnState(advStatus) }}
          </div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      position="bottom"
      :close-on-click-overlay="false"
      @close="onClose"
    >
      <div class="pop-box relative mainBackground pb-46 px-32">
        <img
          src="@/assets/image/icon-close.png"
          class="w-38 h-38 absolute right-20 top-46"
          @click="onClose"
        />
        <div class="pt-46 textColor font-40 mb-20">
          {{ $t("您当前拥有的功能") }}
        </div>
        <div
          class="pb-32 pt-32 border-b-color"
          v-for="(item, index) in currentList"
          :key="index"
        >
          <div class="font-32 text-grey flex items-center">
            <img
              :src="
                require(`../../assets/image/certificationCenter/${item.icon}.png`)
              "
              class="w-36 h-36 mr-24"
              alt=""
            />
            <span class="textColor mr-10">{{ item.title }}</span>
            <span>{{ item.des }}</span>
          </div>
          <div
            class="text-grey font-30 mt-36 pl-60"
            v-for="(str, index) in item.arr"
            :class="{ colorMain: index == 1 }"
            :key="index"
          >
            {{ str }}
          </div>
        </div>
        <div
          class="btnMain text-black font-34 py-26 rounded-lg text-center mt-68"
          @click="onClose"
        >
          {{ $t("确认") }}
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import contentCom from "./contentCom.vue";
import { Popup } from "vant"
import { _getIdentify } from '@/API/fund.api'
import Axios from '@/API/userCenter'
import { Popup } from "vant";
import { _getIdentify } from "@/API/fund.api";
import Axios from "@/API/userCenter";
export default {
    props: {
  props: {},
  components: {
    [Popup.name]: Popup,
    assetsHead,
    contentCom,
  },
  data() {
    return {
      turnDownMsg: "",
      show: false,
      active: 0,
      kyc_status: 0, //初级认证0未认证 ，1审核中 ，2审核通过，3审核未通过
      advStatus: 0, //高级认证
      identityverif: false, //初级认证
      advancedverif: false, //高级认证
      nationality: "",
      coinObj: {
        title: this.$t("法币限额"),
        list: [
          {
            left: this.$t("充值"),
            // right: this.$t('$50K 每日')
          },
          {
            left: this.$t("提现"),
            // right: this.$t('$50K 每日')
          },
        ],
      },
      c2cObj: {
        title: this.$t("C2C交易限额"),
        list: [
          {
            left: "C2C",
            right: this.$t("无限额"),
          },
        ],
      },
      currencyObj: {
        title: this.$t("加密货币限额"),
        list: [
          {
            left: this.$t("充值"),
            right: this.$t("无限额"),
          },
          {
            left: this.$t("提现"),
            right: this.$t("8M 每日"),
          },
        ],
      },
      advCoinObj: {
        title: this.$t("法币限额"),
        list: [
          {
            left: this.$t("充值"),
            right: this.$t("$100K 每日"),
          },
          {
            left: this.$t("提现"),
            right: this.$t("$100K 每日"),
          },
        ],
      },
      advC2cObj: {
        title: this.$t("C2C交易限额"),
        list: [
          {
            left: "C2C",
            right: this.$t("无限额"),
          },
        ],
      },
      advCurrencyObj: {
        title: this.$t("加密货币限额"),
        list: [
          {
            left: this.$t("充值"),
            right: this.$t("无限额"),
          },
          {
            left: this.$t("提现"),
            right: this.$t("16M 每日"),
          },
        ],
      },
      currentList: [],
      ownList: [
        {
          icon: "1",
          title: "$50K",
          des: this.$t("每日"),
          arr: [this.$t("法币充值 & 提现限额")],
        },
        {
          icon: "2",
          title: this.$t("无限额"),
          des: "",
          arr: [this.$t("数字货币充值"), this.$t("提高限额")],
        },
        {
          icon: "3",
          title: "8M USDT",
          des: this.$t("每日"),
          arr: [this.$t("数字货币提现限额")],
        },
        {
          icon: "4",
          title: this.$t("无限额"),
          des: "",
          arr: [this.$t("C2C交易限额")],
        },
        {
          icon: "5",
          title: "OTC",
          des: "",
          arr: [this.$t("其他功能")],
        },
      ],
      advOwnList: [
        {
          icon: "1",
          title: "$100K",
          des: this.$t("每日"),
          arr: [this.$t("法币充值 & 提现限额")],
        },
        {
          icon: "2",
          title: this.$t("无限额"),
          des: "",
          arr: [this.$t("数字货币充值"), this.$t("提高限额")],
        },
        {
          icon: "3",
          title: "16M USDT",
          des: this.$t("每日"),
          arr: [this.$t("数字货币提现限额")],
        },
        {
          icon: "4",
          title: this.$t("无限额"),
          des: "",
          arr: [this.$t("C2C交易限额")],
        },
        {
          icon: "5",
          title: "OTC",
          des: "",
          arr: [this.$t("其他功能")],
        },
      ],
    };
  },
  created() {
    this.currentList = this.ownList;
    this.getLocaluserAction();
    this.getIdentify();
  },
  methods: {
    changeTab(index) {
      this.active = index;
      if (index == 0) {
        this.currentList = this.ownList;
      } else {
        this.currentList = this.advOwnList;
      }
    },
    components: {
        [Popup.name]: Popup,
        assetsHead,
        contentCom
    onClose() {
      this.show = false;
    },
    data() {
        return {
            turnDownMsg: '',
            show: false,
            active: 0,
            kyc_status: 0, //初级认证0未认证 ，1审核中 ，2审核通过，3审核未通过
            advStatus: 0, //高级认证
            identityverif: false,//初级认证
            advancedverif: false,//高级认证
            nationality: '',
            coinObj: {
                title: this.$t('法币限额'),
                list: [
                    {
                        left: this.$t('充值'),
                        right: this.$t('$50K 每日')
                    },
                    {
                        left: this.$t('提现'),
                        right: this.$t('$50K 每日')
                    }
                ]
            },
            c2cObj: {
                title: this.$t('C2C交易限额'),
                list: [
                    {
                        left: 'C2C',
                        right: this.$t('无限额')
                    },
                ]
            },
            currencyObj: {
                title: this.$t('加密货币限额'),
                list: [
                    {
                        left: this.$t('充值'),
                        right: this.$t('无限额')
                    },
                    {
                        left: this.$t('提现'),
                        right: this.$t('8M 每日')
                    }
                ]
            },
            advCoinObj: {
                title: this.$t('法币限额'),
                list: [
                    {
                        left: this.$t('充值'),
                        right: this.$t('$100K 每日')
                    },
                    {
                        left: this.$t('提现'),
                        right: this.$t('$100K 每日')
                    }
                ]
            },
            advC2cObj: {
                title: this.$t('C2C交易限额'),
                list: [
                    {
                        left: 'C2C',
                        right: this.$t('无限额')
                    },
                ]
            },
            advCurrencyObj: {
                title: this.$t('加密货币限额'),
                list: [
                    {
                        left: this.$t('充值'),
                        right: this.$t('无限额')
                    },
                    {
                        left: this.$t('提现'),
                        right: this.$t('16M 每日')
                    }
                ]
            },
            currentList: [],
            ownList: [
                {
                    icon: '1',
                    title: '$50K',
                    des: this.$t('每日'),
                    arr: [this.$t('法币充值 & 提现限额')]
                },
                {
                    icon: '2',
                    title: this.$t('无限额'),
                    des: '',
                    arr: [this.$t('数字货币充值'), this.$t('提高限额')]
                },
                {
                    icon: '3',
                    title: '8M USDT',
                    des: this.$t('每日'),
                    arr: [this.$t('数字货币提现限额')]
                },
                {
                    icon: '4',
                    title: this.$t('无限额'),
                    des: '',
                    arr: [this.$t('C2C交易限额')]
                },
                {
                    icon: '5',
                    title: 'OTC',
                    des: '',
                    arr: [this.$t('其他功能')]
                }
            ],
            advOwnList: [
                {
                    icon: '1',
                    title: '$100K',
                    des: this.$t('每日'),
                    arr: [this.$t('法币充值 & 提现限额')]
                },
                {
                    icon: '2',
                    title: this.$t('无限额'),
                    des: '',
                    arr: [this.$t('数字货币充值'), this.$t('提高限额')]
                },
                {
                    icon: '3',
                    title: '16M USDT',
                    des: this.$t('每日'),
                    arr: [this.$t('数字货币提现限额')]
                },
                {
                    icon: '4',
                    title: this.$t('无限额'),
                    des: '',
                    arr: [this.$t('C2C交易限额')]
                },
                {
                    icon: '5',
                    title: 'OTC',
                    des: '',
                    arr: [this.$t('其他功能')]
                }
            ]
        }
    getLocaluserAction() {
      Axios.localuserAction().then((res) => {
        this.identityverif = res.data.identityverif;
        this.advancedverif = res.data.advancedverif;
        this.nationality = res.data.nationality;
        this.kyc_status = res.data.kyc_status;
        this.advStatus = res.data.kyc_high_level_status;
      });
    },
    created() {
        this.currentList = this.ownList
        this.getLocaluserAction();
        this.getIdentify();
    getIdentify() {
      _getIdentify().then((data) => {
        this.turnDownMsg = data.msg;
      });
    },
    methods: {
        changeTab(index) {
            this.active = index
            if (index == 0) {
                this.currentList = this.ownList
            } else {
                this.currentList = this.advOwnList
            }
        },
        onClose() {
            this.show = false
        },
        getLocaluserAction() {
            Axios.localuserAction().then(res => {
                this.identityverif = res.data.identityverif
                this.advancedverif = res.data.advancedverif
                this.nationality = res.data.nationality
                this.kyc_status = res.data.kyc_status
                this.advStatus = res.data.kyc_high_level_status
            })
        },
        getIdentify() {
            _getIdentify().then(data => {
                this.turnDownMsg = data.msg;
            })
        },
        fixState(kyc_status) {
            let str = ''
            if (kyc_status == 0) {
                str = this.$t('未认证')
            } else if (kyc_status == 1) {
                str = this.$t('审核中')
            } else if (kyc_status == 2) {
                str = this.$t('已认证')
            } else {
                str = this.$t('未认证')
            }
            return str;
        },
        fixBtnState(kyc_status) {
            let str = ''
            if (kyc_status == 0) {
                str = this.$t('开始认证')
            } else if (kyc_status == 1) {
                str = this.$t('审核详情')
            } else if (kyc_status == 2) {
                str = this.$t('认证详情')
            } else {
                str = this.$t('开始认证')
            }
            return str;
        }
    }
}
    fixState(kyc_status) {
      let str = "";
      if (kyc_status == 0) {
        str = this.$t("未认证");
      } else if (kyc_status == 1) {
        str = this.$t("审核中");
      } else if (kyc_status == 2) {
        str = this.$t("已认证");
      } else {
        str = this.$t("未认证");
      }
      return str;
    },
    fixBtnState(kyc_status) {
      let str = "";
      if (kyc_status == 0) {
        str = this.$t("开始认证");
      } else if (kyc_status == 1) {
        str = this.$t("审核详情");
      } else if (kyc_status == 2) {
        str = this.$t("认证详情");
      } else {
        str = this.$t("开始认证");
      }
      return str;
    },
  },
};
</script>

<style lang="scss" scoped>
.certificationCenter {
    width: 100%;
    box-sizing: border-box;
  width: 100%;
  box-sizing: border-box;
}

.contentBox {
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

.btnBox {
    .activeStyle {
        @include themify() {
            background: themed("btn_main") !important;
        }

        color: #fff !important;
  .activeStyle {
    @include themify() {
      background: themed("btn_main") !important;
    }

    color: #fff !important;
  }
}


.status0 {
    background: #FFEAEC;
    color: #E35461;
  background: #ffeaec;
  color: #e35461;
}

.status1 {
    background: #FFEAEC;
    color: #DBAE18;
  background: #ffeaec;
  color: #dbae18;
}

.status2 {
    background: #E6F6F0;
    color: #03A66D;
  background: #e6f6f0;
  color: #03a66d;
}

.status3 {
    background: #FFEAEC;
    color: #E35461;
  background: #ffeaec;
  color: #e35461;
}

.border-radius-left {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}

.van-popup.van-popup--bottom {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
</style>

 src/page/new-urrency/components/placing-list-index.vue

@@ -26,7 +26,7 @@
        class="item-box"
      >
        <van-col span="8">{{ item.newCoinName }}</van-col>
        <van-col span="12">{{ $t("单价:") }}{{ item.issuePrice }}</van-col>
        <van-col span="12">{{ item.issuePrice }}</van-col>
        <van-col span="4">
          <div class="bt">
            {{ item.type === 1 ? $t("认购") : $t("配售") }}

 src/page/new-urrency/components/subscription-list-index.vue

@@ -26,7 +26,7 @@
        class="item-box"
      >
        <van-col span="8">{{ item.newCoinName }}</van-col>
        <van-col span="12">{{ $t("单价:") }}{{ item.issuePrice }}</van-col>
        <van-col span="12">{{ item.issuePrice }}</van-col>
        <van-col span="4">
          <div class="bt">
            {{ item.type === 1 ? $t("认购") : $t("配售") }}

 src/page/new-urrency/index.vue

@@ -214,6 +214,7 @@
      Dialog.alert({
        title: this.$t("提示"),
        message: this.$t("配售成功"),
        confirmButtonText: this.$t("确定"),
      }).then(() => {
        this.$router.push(`/list-urrency?type=${this.activeData.type}`);
      });