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

<template>
  <div class="page">
    <!-- 顶部返回按钮 -->
    <div class="head">
      <div class="back" @click="back">
        <van-icon name="arrow-left" size="18" />
      </div>
      <div @click="changeStar">
        <svg t="1746761208974" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1116" width="22" height="22" v-if="product.collect == null">
          <path
            d="M274.72727305 953.81818174c-5.4545458 0-10.90909073 0-16.36363653-2.72727247-13.63636406-5.4545458-24.54545479-13.63636406-32.72727305-27.27272724-5.4545458-10.90909073-8.18181826-21.81818145-5.45454492-35.45454551L263.81818144 634.72727305 81.09090898 454.72727305c-21.81818145-21.81818145-21.81818145-54.54545449 0-76.36363682 8.18181826-8.18181826 19.09090898-13.63636406 29.99999971-16.36363652l253.63636436-38.18181797 114.5454539-229.09090869c5.4545458-13.63636406 16.36363653-21.81818145 32.72727305-27.27272725 13.63636406-5.4545458 27.27272724-2.72727247 40.90909131 2.72727246 10.90909073 5.4545458 19.09090898 13.63636406 24.5454539 24.54545479l114.54545479 229.09090869 253.63636347 38.18181797c29.99999971 5.4545458 49.09090869 32.72727305 46.36363624 62.72727275-2.72727247 10.90909073-8.18181826 21.81818145-16.36363565 30.00000059L792.90909072 634.72727305l43.63636377 253.63636348c2.72727247 13.63636406 0 29.99999971-8.18181826 40.90909042s-21.81818145 19.09090898-35.4545455 21.81818233c-10.90909073 2.72727247-24.54545479 0-35.45454552-5.45454581L525.63636406 828.36363623l-226.36363711 119.99999971c-8.18181826 5.4545458-16.36363653 5.4545458-24.5454539 5.4545458zM525.63636406 124.72727276l-125.4545455 256.36363593L116.5454545 419.27272754l204.54545477 199.09090899-49.09090956 280.90909071 253.63636435-133.63636377 253.63636348 133.63636377-49.09090957-280.90909072 204.54545479-199.09090898-280.90909073-40.90909131L525.63636406 124.72727276z"
            fill="#ffffff"
            p-id="1117"
          ></path>
        </svg>
        <svg t="1746757109445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1562" width="22" height="22" v-if="product.collect != null">
          <path
            d="M547.978 84.41l114.854 232.476c5.536 11.07 16.606 19.373 30.444 22.141l256 37.362c31.827 4.152 45.665 44.281 22.14 67.806l-186.81 179.891c-9.687 9.687-13.838 22.141-11.07 34.595l42.896 256c5.536 31.827-29.059 56.735-58.118 41.514l-229.709-120.39c-11.07-5.535-24.908-5.535-37.362 0l-229.708 120.39c-29.06 15.221-63.654-9.687-58.119-41.514l44.281-254.616c2.768-12.454-1.383-26.292-11.07-34.595L53.967 444.195c-23.524-23.525-11.07-62.27 22.141-67.806l256-37.362c12.454-1.384 23.524-9.686 30.443-22.14L477.405 84.41c13.838-29.06 55.352-29.06 70.573 0z m0 0"
            fill="#FFBE11"
            p-id="1563"
          ></path>
        </svg>
      </div>
    </div>
    <div class="box" @scroll="handleScroll">
      <div class="bg" :style="{ backgroundImage: `url(${product.thum})` }"></div>
      <div class="content">
        <!-- <div class="mb">
          <span>{{ $t('lang300') }}</span>
        </div> -->
        <img :src="product.thum" alt="" class="pic" />

        <span class="name">{{ product.name }}</span>
        <div class="num">
          <div class="num_box">
            <div class="left">{{ $t('lang301') }}</div>
            <div class="right">{{ product.issue }}{{ $t('lang7') }}</div>
          </div>
          <div class="num_box">
            <div class="left">{{ $t('lang302') }}</div>
            <div class="right">{{ product.circulation }}{{ $t('lang7') }}</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <van-tabs v-model="navActive" color="#29B286" title-active-color="#000" class="van-tabs">
          <van-tab :title="$t('lang343')"></van-tab>
          <van-tab :title="$t('lang344')"></van-tab>
        </van-tabs>
        <div class="flex sb" v-if="navActive == 0">
          <div class="small_nav flex">
            <span :class="[index == smallNavIndex ? 'small_nav_item nav_active' : 'small_nav_item']" v-for="(item, index) in smallNav" :key="index" @click="changeType(item, index)">{{
              item.key
            }}</span>
          </div>
          <div class="flex sort" v-if="smallNavIndex == 0">
            <div class="flex" @click="handlePriceSort">
              <span>{{ $t('lang247') }}</span>
              <img src="@/assets/images/index/j0.png" alt="" style="width: 14px" v-if="sort == 0" />
              <img src="@/assets/images/index/j2.png" alt="" style="width: 14px" v-else-if="sort == 1" />
              <img src="@/assets/images/index/j1.png" alt="" style="width: 14px" v-else-if="sort == 2" />
            </div>
            <!-- <div class="flex" @click="handleVolumeSort">
              <span>{{ $t('lang346') }}</span>
              <img src="@/assets/images/index/j0.png" alt="" style="width: 14px" v-if="volume == 0" />
              <img src="@/assets/images/index/j2.png" alt="" style="width: 14px" v-else-if="volume == 1" />
              <img src="@/assets/images/index/j1.png" alt="" style="width: 14px" v-else-if="volume == 2" />
            </div> -->
          </div>
        </div>
        <template v-if="navActive == 0 && smallNavIndex == 0">
          <div class="list" v-if="product.producttransfer.length > 0">
            <van-checkbox-group v-model="checkOrder">
              <div class="list_item flex sb" v-for="(item, index) in product.producttransfer" :key="index">
                <div class="flex">
                  <van-checkbox :name="item" @click.stop shape="square" checked-color="#29b286" icon-size="16px"></van-checkbox>
                  <div @click="navigatorTo('TransferDetail', { id: ids, transfer_id: item.id })">
                    <div class="flex">
                      <span class="list_item_name">{{ product.name }}</span>
                      <div class="lock flex" v-if="new Date().getTime() - item.lock_time * 1000 <= 180000 && new Date().getTime() - item.lock_time * 1000 > 0">
                        <svg t="1746769983067" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15442" width="11" height="11">
                          <path
                            d="M787.16806 952.268282 236.83194 952.268282c-30.395264 0-55.033407-24.638143-55.033407-55.033407L181.798533 429.449889c0-30.395264 24.638143-55.033407 55.033407-55.033407l82.550111 0 0-110.066815c0-106.379842 86.238107-192.617949 192.617949-192.617949s192.617949 86.238107 192.617949 192.617949l0 110.066815 82.550111 0c30.395264 0 55.033407 24.638143 55.033407 55.033407l0 467.784986C842.201467 927.630139 817.562301 952.268282 787.16806 952.268282zM484.483296 672.046113l0 115.121947 55.033407 0 0-115.121947c31.990598-11.373025 55.033407-41.605583 55.033407-77.496002 0-45.592384-36.957727-82.550111-82.550111-82.550111s-82.550111 36.957727-82.550111 82.550111C429.449889 630.440529 452.491675 660.673088 484.483296 672.046113zM622.066815 264.348644c0-60.787458-49.279357-110.066815-110.066815-110.066815s-110.066815 49.279357-110.066815 110.066815l0 110.066815 220.134653 0L622.067838 264.348644z"
                            fill="#ffffff"
                            p-id="15443"
                          ></path>
                        </svg>
                        <span>{{ $t('lang347') }}</span>
                      </div>
                    </div>
                    <div class="sn">{{ item.order_no }}</div>
                  </div>
                </div>
                <div class="flex" @click="navigatorTo('TransferDetail', { id: ids, transfer_id: item.id })">
                  <div class="flex">
                    <svg width="28" height="28" viewBox="0 -3 80 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"> {{ item.price }} </span>
                  </div>
                  <van-icon name="arrow" size="18" color="#c5c5c5" />
                </div>
              </div>
            </van-checkbox-group>
          </div>
          <div class="bare" v-else>
            <span>{{ $t('lang60') }}</span>
          </div>
          <div class="btn_box" @click="navigatorTo('TransferOrder')">
            <div class="btn">{{ $t('lang352') }}</div>
          </div>
        </template>
        <template v-else-if="navActive == 0 && smallNavIndex == 1">
          <div class="list buy" v-if="buyingList.length > 0">
            <div class="list_item flex sb" v-for="(item, index) in buyingList" @click="navigatorTo('soldConsignment', { product_id: product.id, buying: item.id })" :key="index">
              <div>
                <div class="flex">
                  <svg width="28" height="28" viewBox="28 2 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"> {{ item.min_price }} </span>
                </div>
                <div class="wallet">{{ $t('lang350') }}</div>
              </div>
              <div class="flex">
                <van-icon name="arrow" size="18" color="#c5c5c5" />
              </div>
            </div>
          </div>
          <div class="bare" v-else>
            <span>{{ $t('lang60') }}</span>
          </div>
          <div class="btn_box" @click="navigatorTo('initiatePurchase', { product: JSON.stringify(product) })">
            <div class="btn">{{ $t('lang349') }}</div>
          </div>
        </template>
        <template v-if="navActive == 1">
          <div class="announcement" v-if="announcement.length > 0">
            <div class="announcement_item" v-for="(item1, index1) in announcement" :key="index1" @click="navigatorTo('bulletinDetail', {id: item1.id})">
              {{ item1.title }}
            </div>
          </div>
          <div class="bare" v-else>
            <span>{{ $t('lang60') }}</span>
          </div>
        </template>
      </div>
    </div>
  </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: {
        // products: {
        //   thum: '',
        // },
        producttransfer: [],
      },
      navActive: 0,
      smallNav: [
        {
          key: this.$t('lang49'),
          value: 0,
        },
        {
          key: this.$t('lang345'),
          value: 1,
        },
      ],
      smallNavIndex: 0,
      sort: 0,
      volume: 0,
      announcement: [],
      page: 1,
      checkOrder: [],
      buyingList: [],
      ids: '',
    };
  },
  mounted() {
    this.ids = this.$route.query.id;
    this.getTransferDetail();
  },
  methods: {
    back() {
      this.$router.back();
    },
    getTransferDetail() {
      homeApi.getTransferDetail({ ids: this.ids, sort: this.sort }).then(res => {
        if (res.code == 200) {
          this.product = res.data;
          this.marketAnnouncement();
          this.getBuyingList();
        } else {
        }
      });
    },
    handleScroll(event) {
      const container = event.target;
      const scrollTop = container.scrollTop; // 滚动距离
      const scrollHeight = container.scrollHeight; // 内容总高度
      const clientHeight = container.clientHeight; // 可视区域高度
      // 判断是否滑动到底部
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        console.log('Bottom');
        if (this.page != -1) {
          this.page++; // 页数加 1
          if (this.navActive == 1) {
            this.marketAnnouncement();
          }
        }
      }
    },
    marketAnnouncement() {
      homeApi.marketAnnouncement({ product_id: this.product.id, page: this.page }).then(res => {
        if (res.code == 200) {
          if (this.announcement.length >= res.data.total) {
            this.page = -1; // 重置为 -1，表示没有更多数据
          } else {
            this.announcement = [...this.announcement, ...res.data.data];
            if (this.announcement.length >= res.data.total) {
              this.page = -1; // 重置为 -1，表示没有更多数据
            }
          }
        } else {
        }
      });
    },
    getBuyingList() {
      homeApi.getBuyingList({ product_id: this.product.id }).then(res => {
        if (res.code == 200) {
          this.buyingList = res.data;
        } else {
        }
      });
    },
    submit() {
      let _this = this;
      let params = {
        id: this.$route.query.id,
        num: this.number,
        product_list: {},
      };
      this.loading = true;
      homeApi.synthesisCreate(params).then(res => {
        if (res.code == 200) {
          _this.loading = false;
          Toast({ message: _this.$t('lang318') });
          _this.$router.push('mine');
        } else if (res.code == 15001) {
          _this.loading = false;
          setTimeout(() => {
            _this.$router.push('recharge');
          }, 300);
        } else {
          _this.loading = false;
        }
      });
    },
    navigatorTo(name, query) {
      console.log(this.checkOrder);

      if (name == 'TransferOrder') {
        if (this.checkOrder.length <= 0) {
          return this.$toast(this.$t('lang373'));
        }
        query = {
          product: JSON.stringify(this.product),
          checkOrder: JSON.stringify(this.checkOrder),
        };
      }
      this.$router.push({ name, query });
    },
    handlePriceSort() {
      if (this.sort == 0) {
        this.sort = 1;
      } else if (this.sort == 1) {
        this.sort = 2;
      } else if (this.sort == 2) {
        this.sort = 1;
      }
      this.getTransferDetail();
    },
    changeType(item, index) {
      this.smallNavIndex = index;
    },
    // changeTab(item){
    //   console.log(item);

    // },
    changeStar() {
      if (this.product.collect == null) {
        this.product.collect = 1;
      } else {
        this.product.collect = null;
      }
      homeApi.collect({ market_id: this.product.id }).then(res => {
        if (res.code == 200) {
        } else {
          this.$toast(res.msg);
          this.product.collect = null;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
// .page{
//   height: 100vh;
//   overflow: auto;
//   // background-color: #fff;
// }
.head {
  position: fixed;
  top: 14px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(#000, 0.8);
  letter-spacing: 1.5px;
  padding: 14px 20px;
  z-index: 99;
  .arrow_img {
    // position: absolute;
    width: 10px;
    height: 16px;
    // transform: translate(0, -50%);
  }
  .back {
    color: #acacac;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(#000, 0.3);
  }
}
.box {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: auto;
  color: #000;
  font-size: 13px;
  padding: 50px 0 120px;
  box-sizing: border-box;
  background-color: #fff;

  .bg {
    width: 100%;
    position: absolute;
    inset: 0;
    background-size: 100% 270px;
    background-repeat: no-repeat;
    // background-position: center;
    filter: blur(30px);
    // transform: scale(1.1); /* 防止边缘模糊 */
    z-index: 1;
    pointer-events: none; /* 不阻挡点击事件 */
  }
  .content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 50px 0 16px;
    .pic {
      width: 140px;
      height: 140px;
      border-radius: 12px;
      border: 3px solid #c0c0c0;
    }
    .name {
      font-size: 15px;
      letter-spacing: 2px;
      font-weight: 600;
      padding: 16px 0;
    }

    .num {
      display: flex;
      align-items: center;

      &_box {
        display: flex;
        align-items: center;
        font-size: 8px;
        letter-spacing: 1px;
        margin: 0 5px;
        .left {
          color: #000;
          padding: 0px 3px;
          // border: 0.5px solid #ffe493;
          background: linear-gradient(to right, #ddb54e, #f9eca9);
        }
        .right {
          color: #000;
          padding: 0 3px;
          background-color: rgba(#fbf8de, 1);
        }
      }
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .sb {
    justify-content: space-between;
  }
  .bottom {
    padding: 0 14px;

    .small_nav {
      width: fit-content;
      font-size: 11px;
      padding: 2px;
      border-radius: 20px;
      margin-top: 6px;
      background-color: #f5f5f5;
      &_item {
        color: #8b8b8b;
        display: block;
        text-align: center;
        min-width: 26px;
        padding: 2px 6px;
        margin: 1px;
        border-radius: 20px;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
    }

    .nav_active {
      color: #29b286;
      background-color: #fff !important;
    }

    .sort {
      color: #8b8b8b;
      font-size: 11px;
      .flex {
        padding-left: 14px;
      }
    }

    .list {
      &_item {
        padding: 14px 0;
        border-bottom: 1px solid rgba(#c7c7c7, 0.3);
        &_name {
          font-weight: 600;
          font-size: 15px;
          width: 160px;
          overflow: hidden; /* 确保超出容器的文本被裁剪 */
          white-space: nowrap; /* 确保文本在一行内显示 */
          text-overflow: ellipsis; /* 使用省略号表示文本超出 */
        }
        .lock {
          color: #fff;
          font-size: 9px;
          // letter-spacing: 1px;
          white-space: nowrap;
          padding: 1px 2px;
          border-radius: 2px;
          margin-left: 8px;
          background-color: #29b286;
        }
        .sn {
          font-weight: 600;
          font-size: 13px;
          padding-top: 8px;
        }
        .price {
          font-weight: 600;
          font-size: 17px;
        }
        .van-icon {
          margin-left: 12px;
        }
        /deep/ .van-checkbox__icon .van-icon {
          margin-right: 8px;
          border-radius: 2px;
          border-color: #29b286 !important;
        }
      }
    }
    .buy {
      .price {
        margin-left: -12px;
      }
      .wallet {
        font-size: 11px;
        color: #8b8b8b;
        padding-top: 4px;
      }
    }

    .announcement {
      padding-top: 10px;
      &_item {
        padding: 10px 0;
        border-bottom: 1px solid rgba(#c7c7c7, 0.3);
        margin-bottom: 8px;
      }
    }

    /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;
    }
  }
  .btn_box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 16px 20px;
    border-top: 1px solid rgba(#c7c7c7, 0.3);
    background-color: #fff;
    .btn {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      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;
      background-color: #29b286;
    }
    .submit {
      width: 58%;
      background-color: #17ab79;
    }
  }
  .bare {
    text-align: center;
    font-size: 14px;
    padding: 60px 14px;
    color: #888;
  }
}
</style>