RWACha-DAPP/src/views/storage/mulDetail.vue

<template>
  <div>
    <div class="head">
      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
      <span>{{ $t('lang321') }}</span>
    </div>
    <div class="home_page">
      <div class="goods_info flex_col">
        <img :src="product.thum" alt="" />
        <span class="goods_info_title">{{ product.title }}</span>
        <div class="flex jsb">
          <div class="flex_col">
            <span class="key">APY：</span>
            <span class="value_2">{{ Math.round(Number(product.income_reta) * 100 * 100) / 100 || 0 }}</span>
          </div>
          <div class="flex_col">
            <span class="key">{{ $t('lang478') }}：</span>
            <span class="value_1">{{ product.day_num || 0 }}</span>
          </div>
        </div>
      </div>
      <div class="goods_list">
        <div class="goods_list_box">
          <!-- <van-checkbox-group v-model="result" ref="checkboxGroup"> -->
          <div class="goods_list_box_item flex jsb" v-for="(item, index) in product.product_list" :key="index">
            <div class="flex">
              <img :src="item.thum" alt="" />
              <span class="name">{{ item.name }}</span>
            </div>
            <div class="flex" @click="chooseProduct(item.id, index)">
              <span class="orderSn" v-if="order_no[item.id]">{{ JSON.parse(order_no[item.id]).order_no }}</span>
              <span class="tip" v-else>{{ $t('lang331') }}</span>
              <!-- <van-checkbox :name="item.id" icon-size="16px" checked-color="#21926F"> </van-checkbox> -->
              <div :class="[order_no[item.id] ? 'checkbox checkbox-active' : 'checkbox']">
                <van-icon name="success" size="13px" color="#fff" v-if="order_no[item.id]" />
              </div>
            </div>
          </div>
          <!-- </van-checkbox-group> -->
        </div>
        <div class="flex payType">
          <span class="key">{{ $t('lang398') }}</span>
          <van-radio-group v-model="pay_type" direction="horizontal" icon-size="17px" checked-color="#21926f">
            <van-radio name="1" v-if="product.token && Number(product.token) > 0">{{$t('lang174')}}：{{ product.token }}</van-radio>
            <van-radio name="2" v-if="product.teac && Number(product.teac) > 0">TeaC：{{ product.teac }}</van-radio>
          </van-radio-group>
        </div>
        <div class="desc" v-html="product.detail"></div>
      </div>
      <div class="btn_box">
        <van-button class="btn" @click="submit">{{ $t('lang325') }}</van-button>
        <div class="btn_checkbox flex">
          <van-checkbox icon-size="16px" checked-color="#21926f" v-model="readProtocol"> </van-checkbox>
          <span style="padding-left: 6px">
            {{ $t('lang480') }}<span style="color: #29b286" @click="toPage">《{{ $t('lang481') }}》</span>
          </span>
        </div>
      </div>
      <van-popup v-model="showOrders" round closeable>
        <div class="orderpopup">
          <div class="orderpopup_title">{{ $t('lang334') }}</div>
          <van-radio-group v-model="radio" class="orderpopup_list" v-if="orderlist.length > 0">
            <div v-for="(item, index) in orderlist" :key="index" class="orderpopup_item flex jsb">
              <span :class="[radio == item ? 'radio-active' : '']">
                {{ item.order_no }}
              </span>
              <van-radio :name="JSON.stringify(item)" icon-size="18px" checked-color="#21926f"></van-radio>
            </div>
          </van-radio-group>
          <div class="nodata" v-else>
            <span>{{ $t('lang60') }} </span>
          </div>
          <van-button type="default" class="btn" @click="chooseOrder">{{ $t('lang111') }}</van-button>
        </div>
      </van-popup>
    </div>
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" class="loading" color="#29b286" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { homeApi } from '@/api/index';
import { Dialog } from 'vant';
export default {
  data() {
    return {
      showOrders: false,
      orderlist: [],
      page: 1,
      radio: {},
      product: {},
      order_no: {}, // 存放已选择订单
      show: false,
      pay_type: -1,
      readProtocol: false,
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    //返回上一页
    back() {
      this.$router.back();
    },
    toPage(){
      if (this.$i18n.locale == 'zh-cn') {
        this.$router.push({ name: 'protocol' ,query: {id: this.product.announcement_id.zh }});
      } else if (this.$i18n.locale == 'en') {
        this.$router.push({ name: 'protocol' ,query: {id: this.product.announcement_id.en }});
      }
    },
    getInfo() {
      homeApi.pledgeDetail({ id: this.$route.query.id }).then(res => {
        if (res.code == 200) {
          this.product = res.data;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    holdProductList(product_id) {
      homeApi.holdProductList({ product_id }).then(res => {
        if (res.code == 200) {
          this.orderlist = res.data;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    chooseProduct(id, index) {
      console.log(id, index);

      // if (this.result.indexOf(id) >= 0) {
      //   this.order_no[id] = '';
      //   this.result.splice(this.result.indexOf(id), 1);
      // } else {
      this.showOrders = true;
      this.holdProductList(id);
      this.productId = id;
      this.radio = this.order_no[this.productId];
      console.log(this.radio);

      // }
    },
    chooseOrder() {
      if (!this.radio) {
        return this.$toast(this.$t('lang330'));
      }
      this.order_no[this.productId] = this.radio;
      this.showOrders = false;
      this.productId = '';
      console.log('order_no', this.order_no);
      console.log('radio', this.radio);
      this.radio = {};
    },

    submit() {
      console.log(Object.assign({}, this.order_no));
      if (JSON.stringify(this.order_no) == '{}') {
        return this.$toast(this.$t('lang330'));
      }
      let order_id = {};
      for (const key in this.order_no) {
        const value = JSON.parse(this.order_no[key]);
        order_id[key] = value.id;
      }

      if (this.pay_type == -1) {
        return this.$toast(this.$t('lang470'));
      }
      if (!this.readProtocol) {
        return this.$toast(this.$t('lang479'));
      }
      let _this = this;
      Dialog.confirm({
        title: _this.$t('lang136'),
        message: _this.$t('lang327'),
        confirmButtonText: _this.$t('lang111'),
        cancelButtonText: _this.$t('lang135'),
      })
        .then(() => {
          _this.show = true
          let params = { pledge_id: _this.$route.query.id, pay_type: _this.pay_type, order_id: order_id };
          homeApi.createPledge(params).then(res => {
            if (res.code == 200) {
              _this.show = false
              _this.$toast(_this.$t('lang326'));
              _this.$router.push({ name: 'storing' });
            } else {
              _this.show = false
              _this.$toast(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  computed: {
    ...mapState(['account']),
  },
};
</script>

<style lang="less" scoped>
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(#000, 0.8);
  letter-spacing: 1.5px;
  font-weight: 550;
  background: #fff;
  padding: 14px 0;
  z-index: 99;
  .arrow_img {
    position: absolute;
    left: 20px;
    width: 10px;
    height: 16px;
    // transform: translate(0, -50%);
  }
}
.home_page {
  min-height: 100vh;
  padding: 60px 16px 110px;

  .jsb {
    justify-content: space-between;
  }

  .goods_info {
    padding: 16px;
    border-radius: 10px;
    background-color: #fff;
    img {
      width: 100%;
      border-radius: 10px;
    }
    &_title {
      font-size: 16px;
      font-weight: 600;
      color: #000;
      letter-spacing: 1px;
      padding: 13px 0 10px;
    }
    .value_1 {
      color: #29b286;
      font-size: 18px;
      font-weight: 600;
    }
    .value_1::after {
      content: 'TeaC';
      font-size: 13px;
      font-weight: normal;
    }
    .value_2::after {
      content: '%';
      font-size: 13px;
      font-weight: normal;
    }
    .value_2 {
      color: #ed5111;
      font-size: 18px;
      font-weight: 600;
      // padding-right: 50px;
    }
    .key {
      color: #4b4b4b;
      font-size: 12px;
      padding-top: 10px;
    }
  }

  .goods_list {
    color: #000;
    padding: 16px;
    border-radius: 10px;
    margin-top: 16px;
    background-color: #fff;

    &_box {
      padding-bottom: 8px;
      &_item {
        padding-bottom: 8px;
        img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
        }
        .name {
          font-size: 14px;
          width: 90px;
          margin-left: 6px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .tip {
          color: #b9b9b9;
          font-size: 12px;
          padding-right: 6px;
        }
        .orderSn {
          color: #000;
          font-size: 12px;
          padding-right: 6px;
        }

        .checkbox {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 0.0625rem solid #c8c9cc;
        }
        .checkbox-active {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #21926f;
        }
      }
    }
    .desc {
      font-size: 14px;
      line-height: 160%;
      letter-spacing: 1px;
      padding-top: 16px;
    }
  }
  .btn_box {
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background-color: #fff;
    .btn {
      width: 100%;
      color: #fff;
      letter-spacing: 2px;
      border-radius: 20px;
      margin-bottom: 10px;
      background-color: #29b286;
    }
    .btn_checkbox {
      color: #000;
      font-size: 12px;
      justify-content: center;
    }
  }
  .nodata {
    font-size: 13px;
    padding: 60px;
    color: #4b4b4b;
    text-align: center;
  }
  .orderpopup {
    width: 300px;
    height: fit-content;
    color: #000;
    padding: 16px 30px 0;
    &_title {
      text-align: center;
    }
    &_list {
      min-height: 100px;
      max-height: 160px;
      margin: 28px 0 10px;
      overflow: auto;
    }
    &_item {
      color: #9b9b9b;
      font-size: 15px;
      padding-bottom: 10px;
      .radio-active {
        color: #000;
      }
    }
    .btn {
      width: 100%;
      color: #21926f;
      letter-spacing: 2px;
      border: 0;
      border-top: 1px solid rgba(#cccccc, 0.8);
      border-radius: 0;
      background-color: #fff;
    }
  }
  .payType {
    .key {
      color: #4b4b4b;
      font-size: 12px;
      flex: 1;
      white-space: nowrap;
    }
    ::v-deep .van-radio__label {
      color: #21926f;
      font-size: 13px;
      margin-left: 4px;
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.flex_col {
  display: flex;
  flex-direction: column;
}
.flex_end {
  align-items: flex-end;
}
::v-deep .van-popup__close-icon {
  color: #575757;
}
.wrapper {
  // display: flex;
  // justify-content: center;
  .loading {
    position: absolute;
    left: 46%;
    top: 46%;
  }
}
</style>