wwbsr/pages/purchase/index.vue

<template>
  <view class="layout-main" v-if="detailList.length">
	 <van-tabs
	    :ellipsis="false"
	    :border="false"
	    :active="tab"
	    @change="tab = $event.detail.index"
	  >
	    <van-tab v-for="(item,index) in detailList" :key="index" class="height-max" :title="item.coin_name"></van-tab>
	  </van-tabs>
    <!-- 申购数据和申购周期 -->
    <view class="m-md bg-form-panel-4 rounded p-md fn-center d-flex">
      <view class="w-6/12 d-flex align-center">
        <van-circle
          size="130"
          class="w-max"
          stroke-width="6"
          :value="detailList[tab].status*25"
          :color="{ '0%': '#27CAE0', '100%': '#4653EF' }"
        >
        <view class="color-light fn-center fn-10">
           <view class="label m-b-xs color-default">{{ $t("purchase.a0") }}</view>
           <view class="fn-11">1 {{ detailList[tab].coin_name }}≈</view>
           <view class="fn-11">
             <text class="fn-16">{{ detailList[tab].issue_price }}</text>
             USDT
           </view>
           <view class="fn-center fn-15 color-success">
             {{ detailList[tab].coin_name }}
           </view>
        </view>
        </van-circle>
      </view>
      <view>
        <view class="m-b-xs">
          <view class="label fn-10">{{ $t("purchase.a1") }}</view>
          <view class="color-light">{{ detailList[tab].subscribe_currency }}</view>
        </view>
        <view class="m-b-xs">
          <view class="label fn-10">{{ $t("purchase.a2") }}</view>
          <view class="color-light">{{$date(detailList[tab].expected_time_online) }}</view>
        </view>
        <view class="m-b-xs">
          <view class="label fn-10">{{ $t("purchase.a3") }}</view>
          <view class="color-light">{{$date(detailList[tab].start_subscription_time)}}</view>
        </view>
		<view class="m-b-xs">
			<view class="d-flex justify-center m-b-xs color-sell" style="font-weight: bold;">
				{{detailList[tab].buySum}}/{{detailList[tab].count}}
			</view>
			<van-progress :stroke-width="8"  :percentage="getNumber(detailList[tab].buy_rate)" />
		</view>
        <view class="m-b-xs">
          <view class="label fn-10">{{ $t("purchase.a4") }}</view>
          <view class="color-light">{{$date(detailList[tab].end_subscription_time)}}</view>
        </view>
      </view>
    </view>
    <!-- 申购 -->
    <view class="m-md bg-panel-4 rounded p-md box-shadow">
      <view class="title p-b-xs border-b d-flex justify-between align-center">
		  <view>{{ $t("purchase.a5") }}</view>
		<!-- <view> -->
			<v-link to="/pages/purchase/record">
				<van-icon class="fn-20 m-t-xs" name="todo-list-o" />
			</v-link>
		<!-- </view> -->
	  </view>
      <view class="m-y-md">
        <view class="label">{{ $t("purchase.d1") }}</view>
        <v-picker
          :list="coinList"
          v-model="coin"
          range-label="coin_name"
          range-value="coin_name"
          class="border-b p-y-xs color-light"
        >
          <v-input
            disabled
            :value="activeCoin.coin_name"
            :placeholder="$t('purchase.a6')"
          >
            <template #right>
              <i class="iconfont">&#xe6e9;</i>
            </template>
          </v-input>
        </v-picker>
        <view class="tips m-t-xs fn-sm d-flex justify-between color-sell">
          <view
            >1 {{ activeCoin.coin_name }} ≈
            {{ omitTo(activeCoin.proportion_amount, 4) }}
            {{ detailList[tab].coin_name }}</view
          >
          <view class="color-sell"
            >{{ num || 0 }} {{ activeCoin.coin_name }} ≈  {{ total||0 }} {{ detailList[tab].coin_name }}</view
          >
        </view>
      </view>
      <view class="m-y-md">
        <view class="label">{{ $t("add.a3") }}</view>
        <view class="border-b p-y-xs color-light">
          <v-input type="number" v-model="num" :placeholder="$t('purchase.a8')">
            <template #right>
              <view
                class="color-success"
                @click="num = activeCoin.usable_balance * 1 || 0"
                >{{ $t("purchase.a9") }}</view
              >
            </template>
          </v-input>
        </view>
      </view>
      <v-button
        block
        class="w-max rounded-lg"
        type="green"
        ref="btn"
        @click="ifSubscribeNow"
        >{{ $t("purchase.b0") }}</v-button
      >
    </view>
    <!-- 周期 -->
    <view class="m-md bg-panel-4 rounded p-md box-shadow">
      <view class="title p-b-xs border-b">{{ $t("purchase.b1") }}</view>
      <van-steps
        :active="detailList[tab].status - 1"
        :steps="[
          {
            text: $t('purchase.b2'),
            desc: '',
          },
          {
            text: $t('purchase.b3'),
            desc: $date(detailList[tab].start_subscription_time)
          },
          {
            text: $t('purchase.b4'),
            desc: $date(detailList[tab].end_subscription_time)
          },
          {
            text: $t('purchase.b5'),
            desc: $date(detailList[tab].announce_time)
          }
        ]"
        active-color="#79D47C"
        align-center
        direction="vertical"
      >
	  
      </van-steps>
    </view>
    <!-- 项目详情 -->
    <view class="m-md bg-panel-4 rounded p-md box-shadow">
      <view class="title p-b-xs border-b">{{ $t("purchase.b6") }}</view>
      <view class="m-t-md edit-content" style="overflow:auto;max-height:400upx;margin-bottom:70upx;" v-html="detailList[tab].project_details"></view>
    </view>
  </view>
</template>
<script>
import Subscride from "@/api/subscride";
import date from "@/utils/class/date";
import math from "@/utils/class/math";
export default {
  data() {
    return {
      coinList: [],
      detailList: [],
      num: "",
      coin: "",
	  tab:0,
    };
  },
  watch:{
	  tab(){
		  this.subscribeTokenList()
	  }
  },
  computed: {
    total() {
      if (!this.activeCoin.proportion_amount) return 0;
      return math.multiple(
        this.num || 0,
		this.activeCoin.proportion_amount * 1,
        3
      );
    },
    activeCoin() {
      if (!this.coin) return {};
      return this.coinList.find((item) => item.coin_name == this.coin);
    },
  },
  methods: {
	  getNumber(number){
		  if(!number)return 0
		  return Number(number).toFixed(0)
	  },
    omitTo(num, idx) {
      if (!num) return 0;
      return math.omitTo(num, idx);
    },
    parseTime(num) {
      if (!num) return;
      return date.parseTime(num);
    },
    subscribeTokenList() {
      Subscride.subscribeTokenList({
		  currency_type:this.detailList[this.tab].coin_name
	  }).then((res) => {
        this.coinList = res.data;
        this.coin = this.coinList[0].coin_name;
      });
    },
    getInfo() {
      Subscride.subscribe().then((res) => {
		  console.log(res.data,'21111')
        this.detailList = res.data;
		this.subscribeTokenList();
      });
    },
    // 选择币种
    selectCoin() {
      let arr = this.coinList.map((item) => {
        return {
          label: item.coin_name,
          value: item.coin_name,
        };
      });

      this.$picker(arr, { value: this.coin }).then((res) => {
        this.coin = res;
      });
    },
    // 提交询问
    ifSubscribeNow() {
		if(!this.num){
			return this.$toast(this.$t('purchase.d2'))
		}
      this.$dialog
        .confirm({
          title: this.$t("common.tips"),
          message: `${this.$t("purchase.b7")} ${
            this.activeCoin.coin_name
          } ${this.$t("purchase.b8")}？`,
		  cancelButtonText: this.$t('common.cancelButtonText'),
		  confirmButtonText:this.$t('common.confirmButtonText')
        })
        .then(() => {
          this.subscribeNow();
        })
        .catch(() => {});
    },
    // 申购
    subscribeNow() {
      let data = {
        amount: this.num,
        coin_name: this.activeCoin.coin_name,
		id:this.detailList[this.tab].id
      };
      Subscride.subscribeNow(data, { btn: this.$refs.btn })
        .then((res) => {
          if (res) {
            this.$toast.success(this.$t("purchase.b9"));
            this.num = "";
          }
        })
        .catch(() => {});
    },
  },
  created() {
    
    this.getInfo();
  },
};
</script>
<style lang="scss" scoped>
::v-deep uni-canvas{
  width: 130px;
  height: 130px;
}
::v-deep .van-step--finish{
  color:$light;
}
::v-deep .van-step--vertical:first-child::before {
  background: transparent;
}
::v-deep .van-step--vertical {
  .van-step__circle-container {
    background-color: transparent;
    .van-icon-checked {
      width: 14px;
      height: 14px;
      background: rgba($green, 0.7);
      font-size: 0;
      display: block;
      border-radius: 20px;
      &::after{
        content: '';
        display: block;
        font-size: 0;
        width: 8px;
        height: 8px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: $green;
        border-radius: 20px;
      }
    }
  }
}
</style>