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

<template>
  <div class="page" @scroll="handleScroll">
    <!-- 顶部返回按钮 -->
    <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">
      <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>
    <div class="bottom">
      <van-tabs v-model="navActive" color="#29B286" title-active-color="#000" class="van-tabs">
        <van-tab :title="$t('lang351')"></van-tab>
        <van-tab :title="$t('lang344')"></van-tab>
      </van-tabs>
      <div v-if="navActive == 0" v-html="product.details"></div>
      <div v-if="navActive == 1">
        <div class="announcement" v-if="announcement.length > 0">
          <div class="announcement_item" v-for="(item1, index1) in announcement" :key="index1">
            {{ item1.title }}
          </div>
        </div>
        <div class="bare" v-else>
          <span>{{ $t('lang60') }}</span>
        </div>
      </div>

      <div class="btn_box flex sb">
        <div class="left">
          <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"> {{ this.product.producttransfer[0]?.price }} </span>
          </div>
          <div @click="navigatorTo('transfer')">{{ $t('lang353') }}<van-icon name="arrow" size="14" color="#c5c5c5" /></div>
        </div>
        <div class="btn" @click="navigatorTo('TransferOrder')">{{ $t('lang352') }}</div>
      </div>
    </div>
  </div>
</template>
    <script>
import { homeApi } from '@/api/index';
import { Dialog, Notify, Toast } from 'vant';
export default {
  data() {
    return {
      loading: false,
      number: 1,
      product: {
        
        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,
      price: 0,
    };
  },
  mounted() {
    this.getTransferDetail();
  },
  methods: {
    back() {
      this.$router.back();
    },
    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;
        }
      });
    },
    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();
          }
        }
      }
    },
    getTransferDetail() {
      homeApi.getTransferDetail({ ids: this.$route.query.id, transfer_id: this.$route.query.transfer_id }).then(res => {
        if (res.code == 200) {
          this.product = res.data;
        //   this.price = this.product.producttransfer.filter(i => {
        //     return i.id == this.$route.query.transfer_id;
        //   })[0].price;
          this.marketAnnouncement();
        } else {
        }
      });
    },
    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 {
        }
      });
    },
    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) {
      if (name == 'TransferOrder') {
        query = {
          product: JSON.stringify(this.product),
          checkOrder: JSON.stringify(this.product.producttransfer),
        };
      }
      this.$router.push({ name, query });
    },
    handlePriceSort() {
      console.log(this.sort);

      if (this.sort == 0) {
        this.sort = 1;
      } else if (this.sort == 1) {
        this.sort = 2;
      } else if (this.sort == 2) {
        this.sort = 1;
      }
      this.search();
    },
    handleVolumeSort() {
      console.log(this.volume);

      if (this.volume == 0) {
        this.volume = 1;
      } else if (this.volume == 1) {
        this.volume = 2;
      } else if (this.volume == 2) {
        this.volume = 1;
      }
      this.search();
    },
  },
};
</script>
  <style lang="less" scoped>
.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);
  }
}
.page {
  height: 100vh;
  overflow: auto;
}
.box {
  position: relative;
  width: 100%;
  height: 620px;
  color: #000;
  font-size: 13px;
  padding-top: 50px;
  box-sizing: border-box;
  //   background-color: #fff;

  .bg {
    width: 100%;
    position: absolute;
    inset: 0;
    background-size: 200% 790px;
    background-repeat: no-repeat;
    background-position: center -50px;
    filter: blur(16px);
    // 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: 80px 0 16px;
    .pic {
      width: 300px;
      height: 300px;
      border-radius: 12px;
      border: 8px solid #c0c0c0;
    }
    .name {
      color: #fff;
      font-size: 19px;
      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, 0.5);
        }
      }
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.sb {
  justify-content: space-between;
}
.bottom {
  padding: 14px 14px 120px;
  background-color: #fff;

  .small_nav {
    width: fit-content;
    font-size: 11px;
    padding: 2px;
    border-radius: 20px;

    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;
    }
  }
  .announcement {
    padding-top: 10px;
    &_item {
      color: #000;
      font-size: 13px;
      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: 75px;
  z-index: 99;
  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;
    width: 68%;
    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;
  }
  .left {
    color: #000;
    font-size: 14px;
    .price {
      font-size: 18px;
      font-weight: 600;
      margin-left: -10px;
    }
  }
}
</style>