RWACha-DAPP/src/views/transfer/initiatePurchase.vue

<template>
  <div class="product-detail-page">
    <!-- 顶部返回按钮 -->
    <div class="head">
      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
      <span>{{ $t('lang349') }}</span>
    </div>
    <div class="box">
      <div class="box_item">
        <div class="flex">
          <img :src="product.thum" alt="" class="pic" />

          <div class="right">
            <div class="name_box">
              <div class="name">{{ product.name }}</div>
              <div class="flex sb reflash">
                <span class="flex">
                  {{ $t('lang383') }}
                  <svg width="18" height="20" viewBox="16 -8 100 100" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M70,35
             C56,28 38,40 40,54
             C40,64 50,74 70,66"
                      fill="none"
                      stroke="black"
                      stroke-width="6"
                      stroke-linecap="round"
                    />
                    <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
                    <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
                  </svg>
                  <span class="reflash_price">{{ maxPrice }}</span>
                </span>
                <van-icon name="replay" size="14px" color="#808080" @click="getBuyingMaxPrice(0)" />
              </div>
            </div>
          </div>
        </div>
        <div class="pt">
          <div class="title">{{ $t('lang371') }}</div>
          <div class="flex grey">{{ $t('lang384') + configInfo.min_buy_price }}</div>
          <div class="flex">
            <svg width="43" height="43" viewBox="25 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M70,35
             C56,28 38,40 40,54
             C40,64 50,74 70,66"
                fill="none"
                stroke="black"
                stroke-width="6"
                stroke-linecap="round"
              />
              <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
              <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
            </svg>
            <van-field v-model="qiuPrice" :placeholder="$t('lang385') + configInfo.min_buy_price" type="number" />
          </div>
        </div>
      </div>

      <div class="box_item">
        <div class="title flex sb">
          {{ $t('lang370') }}
          <van-stepper v-model="qiuNumber" min="1" :max="maxCount" />
        </div>
        <div class="flex grey">{{ $t('lang386').replace('XX', maxCount) }}</div>
      </div>
      <div class="box_item">
        <div class="title">{{ $t('lang364') }}</div>
        <div class="flex grey">
          {{ $t('lang363') + '(' + $t('lang362') }}：
          <svg width="12" height="22" viewBox="32 0 50 96" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M70,35
           C56,28 38,40 40,54
           C40,64 50,74 70,66"
              fill="none"
              stroke="black"
              stroke-width="6"
              stroke-linecap="round"
            />
            <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
            <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
          </svg>
          {{ balance }})
        </div>
      </div>
      <div class="box_item">
        <div class="title">{{ $t('lang356') }}</div>
        <div class="flex">
          <van-checkbox v-model="checked" class="black" shape="square" checked-color="#29b286" icon-size="16px"
            >{{ $t('lang357') }} <span class="green" @click.stop="blogPopop = true">{{ $t('lang358') }}</span></van-checkbox
          >
        </div>
      </div>
      <div class="box_item">
        <div class="title">{{ $t('lang359') }}</div>
        <div class="flex grey desc" v-html="configInfo.serve_desc"></div>
      </div>
    </div>

    <div class="btn_box flex sb">
      <div class="left">
        <div class="flex">
          <svg width="28" height="28" viewBox="28 -4 100 96" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M70,35
             C56,28 38,40 40,54
             C40,64 50,74 70,66"
              fill="none"
              stroke="black"
              stroke-width="6"
              stroke-linecap="round"
            />
            <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
            <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
          </svg>
          <span class="price"> {{ Math.floor(qiuNumber * qiuPrice * 100) / 100 || '--' }} </span>
        </div>
        <span class="font">{{ $t('lang387').replace('XX', qiuNumber) }}</span>
      </div>
      <!-- <div class="btn" style="width: 70%">{{ $t('lang372') }}</div> -->
      <van-button class="btn" style="width: 70%" :disabled="!checked" type="primary" @click="submit">{{ $t('lang372') }}</van-button>
    </div>
    <van-overlay :show="loading">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" class="loading" />
      </div>
    </van-overlay>
    <van-popup v-model="blogPopop" round position="bottom">
      <div class="blogModel">
        <div class="title"></div>
        <van-icon name="cross" class="close" size="20" @click="blogPopop = false" />
        <div class="body" v-html="blogData.body"></div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { homeApi } from '@/api/index';
import { Dialog, Notify, Toast } from 'vant';
export default {
  data() {
    return {
      loading: false,
      submitPopop: false,
      number: 1,
      product: {},
      type: 0, // 1确认订单  2以求购价售出  3发起求购
      checked: false,
      qiuNumber: 1,
      qiuPrice: '',
      configInfo: {
        lock_time: 0,
        min_buy_price: 0,
        serve_desc: '',
        serve_fee: 0,
        max_buying_count: 0,
        zh_serve_agree: '',
        en_serve_agree: '',
      },
      balance: 0,
      maxPrice: 0,
      maxCount: 0,
      blogPopop: false,
      blogData: {},
    };
  },
  watch: {
    qiuPrice(val) {
      if (val) {
        this.maxCount = Math.floor(this.balance / val);
      }
    },
  },
  mounted() {
    this.product = JSON.parse(this.$route.query.product);
    this.init();
  },
  methods: {
    init() {
      this.getHoldProductOrderList();
      this.getMarketConfig();
      this.getBuyingMaxPrice(1);
      this.getUserInfo();
    },
    back() {
      this.$router.back();
    },
    getHoldProductOrderList() {
      homeApi.getHoldProductOrderList({ product_id: this.product.id }).then(res => {
        if (res.code == 200) {
          this.orderlist = res.data;
        } else {
        }
      });
    },
    getMarketConfig() {
      homeApi.getMarketConfig({}).then(res => {
        if (res.code == 200) {
          this.configInfo = res.data;
          this.getAnnouncementDetail();
        } else {
        }
      });
    },
    getBuyingMaxPrice(index) {
      homeApi.getBuyingMaxPrice({ product_id: this.product.id }).then(res => {
        if (res.code == 200) {
          this.maxPrice = res.data;
          if (!index) {
            this.$toast(this.$t('lang402'));
          }
        } else {
        }
      });
    },
    getUserInfo() {
      homeApi.getUserInfo({}).then(res => {
        if (res.code == 200) {
          this.balance = res.data.balance;
        } else {
        }
      });
    },
    submit() {
      if (!this.qiuPrice) {
        return this.$toast(this.$t('lang377'));
      }
      let _this = this;
      let params = {
        product_id: this.product.id,
        min_price: this.qiuPrice,
        stock: this.qiuNumber,
      };
      Dialog.confirm({
        title: _this.$t('lang136'),
        message: _this
          .$t('lang376')
          .replace('XX', Math.floor(_this.qiuNumber * _this.qiuPrice * 100) / 100)
          .replace(
            'CC',
            `<svg width="12" height="22" viewBox="28 -20 50 96" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M70,35
           C56,28 38,40 40,54
           C40,64 50,74 70,66"
                    fill="none"
                    stroke="#646566"
                    stroke-width="6"
                    stroke-linecap="round"
                  />
                  <line x1="52" y1="29" x2="52" y2="73" stroke="#646566" stroke-width="5.2" stroke-linecap="round" />
                  <line x1="63" y1="29" x2="63" y2="73" stroke="#646566" stroke-width="5.2" stroke-linecap="round" />
                </svg>`
          ),
        confirmButtonText: _this.$t('lang111'),
        cancelButtonText: _this.$t('lang135'),
      })
        .then(() => {
          this.loading = true;
          homeApi.setBuying(params).then(res => {
            if (res.code == 200) {
              _this.loading = false;
              Toast({ message: _this.$t('lang152') });
              _this.$router.back();
            } else if (res.code == 15001) {
              _this.loading = false;
              setTimeout(() => {
                _this.$router.push('recharge');
              }, 300);
            } else {
              _this.loading = false;
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    navigatorTo(name, id) {
      if (name == 'service') {
        console.log(this.$i18n.locale);
        if (this.$i18n.locale == 'zh-cn') {
          this.$router.push({ name, query: { id: this.configInfo.zh_serve_agree } });
        } else if (this.$i18n.locale == 'en') {
          this.$router.push({ name, query: { id: this.configInfo.en_serve_agree } });
        }
      } else {
        this.$router.push({ name, query: { id: id } });
      }
    },
    getAnnouncementDetail() {
      if (this.$i18n.locale == 'zh-cn') {
        let params = {
          id: this.configInfo.zh_serve_agree,
        };
        homeApi.getAnnouncementDetail(params).then(res => {
          if (res.code == 200) {
            this.blogData = res.data;
          }
        });
      } else if (this.$i18n.locale == 'en') {
        let params = {
          id: this.configInfo.en_serve_agree,
        };
        homeApi.getAnnouncementDetail(params).then(res => {
          if (res.code == 200) {
            this.blogData = res.data;
          }
        });
      }
    },
  },
};
</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%);
  }
}
.box {
  width: 100%;
  // height: 100vh;
  color: #000;
  font-size: 13px;
  padding: 64px 14px 120px;
  box-sizing: border-box;
  //   background-color: #fff;
  .grey {
    color: #535353;
  }
  .black {
    color: #000;
  }
  .grey-8 {
    color: #535353;
  }

  &_item {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 10px;
    background-color: #fff;
    .pic {
      width: 80px;
      height: 80px;
      border-radius: 8px;
    }

    .right {
      padding-left: 14px;
      .name_box {
        color: #808080;
        font-size: 13px;

        .name {
          color: #000;
          font-size: 16px;
          font-weight: 600;
          line-height: 160%;
        }
      }
      .qiu {
        padding-top: 8px;
        &_price {
          font-size: 17px;
          font-weight: 600;
          // margin-left: -2px;
          margin-top: -3px;
        }
      }
    }
    .title {
      font-size: 14px;
      font-weight: 600;
      line-height: 160%;
      padding-bottom: 8px;
    }
    .price {
      font-size: 13px;
      font-weight: 600;
      margin-left: -2px;
    }
    .green {
      color: #29b286;
    }
    .van-checkbox {
      padding-top: 6px;
    }
    .desc {
      font-size: 11px;
      line-height: 150%;
      padding-top: 3px;
    }
    .yuji {
      width: 100%;
      // padding-top: 8px;
    }
    .font {
      color: #808080;
      font-size: 11px;
    }
    .snlist {
      flex-wrap: wrap;
      // justify-content: space-around;
      justify-content: flex-start;
      gap: 10px; /* 横向和纵向间距 */
      padding-top: 8px;
      &_item {
        font-size: 11px;
        text-align: center;
        padding: 4px 6px;
        border-radius: 4px;
        // margin: 0 10px 10px 0;
        width: calc((100% - 20px) / 3); /* 3列，减去两个gap */
        background-color: #f5f5f5;
      }
      .snlist_item_active {
        position: relative;
        color: #29b286;
        background-color: #cfe9e0;
        svg {
          position: absolute;
          bottom: -6px;
          right: -7px;
          font-size: 1px;
          width: 8px;
          z-index: 100;
          fill: #fff;
        }
      }
      .snlist_item_active_tag {
        bottom: 0px;
        right: 0px;
        width: 0;
        height: 0;
        z-index: 9;
        position: absolute;
        border-width: 8px 8px;
        border-color: rgba(0, 0, 0, 0) #29b286 #29b286 rgba(0, 0, 0, 0);
        border-style: solid;
        border-radius: 4px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    }
    .reflash {
      font-size: 10px;
      color: #000;
      width: calc(100vw - 150px);
      padding: 6px 8px;
      border-radius: 6px;
      margin-top: 8px;
      background-color: #f5f5f5;

      &_price {
        font-size: 16px;
        font-weight: 600;
        margin-left: -6px;
      }
    }
    .pt {
      padding-top: 10px;
    }
    /deep/ .van-checkbox__icon .van-icon {
      border-radius: 2px;
      border-color: #29b286 !important;
    }
    /deep/.van-stepper__input {
      background-color: #fff;
    }
    /deep/.van-stepper__plus,
    /deep/.van-stepper__minus {
      transform: scale(0.9);
      border-radius: 50%;
    }
    /deep/.van-field {
      font-size: 18px;
      font-weight: 600;
      margin-left: -10px;
    }
    /deep/.van-field__control::placeholder {
      font-size: 15px;
      font-weight: normal;
    }
    /deep/.van-field__control::-webkit-input-placeholder {
      font-size: 15px;
      font-weight: normal;
    }
    /deep/.van-field__control::-moz-placeholder {
      font-size: 15px;
      font-weight: normal;
    }
    /deep/.van-field__control::-ms-input-placeholder {
      font-size: 15px;
      font-weight: normal;
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.sb {
  justify-content: space-between;
}
.bottom {
  padding: 14px 14px;
  background-color: #fff;

  /deep/.van-tab {
    flex: none;
    font-weight: 600;
    color: #c5c5c5;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-right: 10px;
  }

  /deep/.van-tabs__nav--line {
    padding-bottom: 10px;
  }
}
.warn {
  position: fixed;
  bottom: 75px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 4px 0;
  font-size: 11px;
  color: #fc9611;
  font-weight: 600;

  background-color: #f8efe0;
}
.btn_box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 68px;
  padding: 10px 14px;
  border-top: 1px solid rgba(#c7c7c7, 0.3);
  background-color: #fff;
  .btn {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #fff;
    font-size: 15px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 12px 10px;
    border-radius: 22px;
    border: none;
    background-color: #29b286;
  }
  .submit {
    width: 58%;
    background-color: #17ab79;
  }
  .left {
    color: #000;
    font-size: 14px;
    flex-direction: column;
    .price {
      font-size: 18px;
      font-weight: 600;
      margin-left: -10px;
      // margin-top: -3px;
    }
    .font {
      font-size: 12px;
    }
  }
}

.blogModel {
  color: #000;
  font-size: 15px;
  .close {
    position: absolute;
    right: 20px;
    top: 10px;
  }
  .title {
    padding: 20px 20px 26px;
    text-align: center;
  }
  .body {
    max-height: 600px;
    overflow: auto;
    padding: 0 14px 20px;
  }
}
/deep/.van-button--disabled {
  opacity: 0.6;
}
.wrapper {
  // display: flex;
  // justify-content: center;
  .loading {
    position: absolute;
    left: 46%;
    top: 46%;
  }
}
</style>