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

<template>
  <div class="product-detail-page">
    <!-- 顶部返回按钮 -->
    <!-- <van-nav-bar title="NFTCHA-全球首个NFT茶交易平台" left-arrow @click-left="goBack" /> -->
    <div class="back" @click="goBack">
      <van-icon name="arrow-left" size="22" />
    </div>
    <!-- 商品图片轮播 -->
    <van-swipe class="product-swiper" autoplay="3000" indicator-color="#fff">
      <van-swipe-item class="swipe-item" v-for="(image, index) in product.info.img_url" :key="index">
        <!-- <img :src="image" alt="商品图片" /> -->
        <van-image class="product-image" style="width: 100%; height: 100%" radius="0" :src="image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 商品信息 -->
    <div class="product-info">
      <div class="product-price-stock">
        <div class="left">
          <div class="price">
            <span>{{ product.info.price }}</span>
            <!-- <span class="small">{{ $t('lang174') }}</span> -->
            <svg width="12" height="22" viewBox="35 -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="#e7e7e7"
                stroke-width="6"
                stroke-linecap="round"
              />
              <line x1="52" y1="29" x2="52" y2="73" stroke="#e7e7e7" stroke-width="5.2" stroke-linecap="round" />
              <line x1="63" y1="29" x2="63" y2="73" stroke="#e7e7e7" stroke-width="5.2" stroke-linecap="round" />
            </svg>
            <span class="small">
              <span style="margin-right: -5px">{{ product.info.cost_price }}</span>
              <svg width="16" height="19" viewBox="40 -22 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="#e7e7e7"
                  stroke-width="6"
                  stroke-linecap="round"
                />
                <line x1="52" y1="29" x2="52" y2="73" stroke="#e7e7e7" stroke-width="5.2" stroke-linecap="round" />
                <line x1="63" y1="29" x2="63" y2="73" stroke="#e7e7e7" stroke-width="5.2" stroke-linecap="round" />
              </svg>
            </span>
          </div>
          <div class="tags">
            <van-tag class="tag" type="info">{{ $t('lang53') }}</van-tag>
            <span>{{ product.info.num }}{{ $t('lang52') }}</span>
          </div>
        </div>
        <div class="countdown" v-if="product.info.start_time * 1000 - new Date().getTime() <= 0 && product.info.end_time * 1000 - new Date().getTime() > 0">
          <div class="flex">
            <img src="@/assets/images/trade/clock.png" alt="" class="clock" />
            <span style="white-space: nowrap">{{ $t('lang54') }}</span>
          </div>
          <van-count-down class="count" :time="product.info.end_time * 1000 - new Date().getTime()">
            <template #default="timeData">
              <span class="block">{{ timeData.days }}</span>
              <span class="colon">{{ $t('lang9') }}</span>
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">{{ $t('lang10') }}</span>
              <span class="block">{{ timeData.seconds }}</span>
              <span class="colon">{{ $t('lang12') }}</span>
            </template>
          </van-count-down>
        </div>
        <div class="countdown end" v-else-if="product.info.start_time * 1000 - new Date().getTime() > 0">{{ $t('lang72') }}</div>
        <div class="countdown end" v-else-if="product.info.end_time * 1000 - new Date().getTime() <= 0">{{ $t('lang173') }}</div>
      </div>
      <div class="goods_info">
        <div class="flex jsb">
          <span class="title">{{ product.info.name }}</span>
          <span class="red">{{ $t('lang55') }}{{ (product.info.stock - product.info.num < 0 ? 0 : product.info.stock - product.info.num) || 0 }}{{ $t('lang7') }}</span>
        </div>
        <div class="tag">{{ $t('lang56') }}</div>
      </div>
    </div>
    <!-- 期数 -->
    <div class="issue">
      <div v-for="(item, index) in product.times" :key="index" :class="[item.status == 1 ? 'item current' : 'item']">
        <div class="flex jsb">
          <span>{{ item.title }}</span>
          <span> {{ item.start_time_text.split(' ')[0] }}~{{ item.end_time_text.split(' ')[0] }} </span>
          <span class="red flex">
            <svg width="12" height="22" viewBox="35 2 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="red"
                stroke-width="6"
                stroke-linecap="round"
              />
              <line x1="52" y1="29" x2="52" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
              <line x1="63" y1="29" x2="63" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
            </svg>
            {{ item.price }}
          </span>
          <span class="tag">{{ statusFn(item.status) }}</span>
        </div>
        <van-icon name="ellipsis" size="15" color="#aaaaaa" class="ellipsis-icon" />
      </div>
    </div>
    <!-- tag -->
    <div class="zp flex jsb">
      <div class="flex">
        <img src="@/assets/images/trade/safe.png" alt="" class="safe" />
        <span class="t"> {{ $t('lang57') }} </span>
      </div>
      <div>
        <span> {{ $t('lang58') }} </span>
        <van-icon name="arrow" />
      </div>
    </div>

    <!-- 购买记录 -->
    <div class="purchase-record">
      <div class="section-title">{{ $t('lang59') }}</div>
      <!-- <van-cell-group>
        <van-cell v-for="(record, index) in purchaseRecords" :key="index" :title="maskAddress(record.address)" :label="record.timeAgo" icon="user-o" />
      </van-cell-group> -->
      <div class="list">
        <div class="item flex jsb" v-for="(item, index) in product.order" :key="index">
          <div class="flex">
            <!-- <img :src="item.avatar" alt="" class="avatar" /> -->
            <div class="avatar"></div>
            <span>{{ item.address.slice(0, 6) + '****' + item.address.slice(item.address.length - 6, item.address.length) }}</span>
          </div>
          <div>
            <span>{{ formatTimeDifference(item.create_time * 1000) }}</span>
          </div>
        </div>
        <div class="more" v-if="product.order.length == 0">{{ $t('lang60') }}</div>
        <!-- <div class="more" v-else>{{ $t('lang61') }}</div> -->
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="product-details">
      <div class="section-title">{{ $t('lang62') }}</div>
    </div>

    <!-- 宣传图片 -->
    <div v-html="product.info.details" class="promo-image"></div>
    <!-- 底部导航栏 -->
    <div class="bottom">
      <div class="flex">
        <div class="flex flex-c" @click="toPage('kf')">
          <img src="@/assets/images/trade/custom.png" alt="" class="icon" />
          <span>{{ $t('lang67') }}</span>
        </div>
        <div class="flex flex-c" @click="toPage('invite')">
          <img src="@/assets/images/trade/share.png" alt="" class="icon" />
          <span>{{ $t('lang68') }}</span>
        </div>
      </div>
      <div class="buy" v-if="product.info.is_area == 1" @click="cascaderShow = true">
        <van-button class="buy_btn" type="primary">{{ $t('lang27') }}</van-button>
      </div>
      <div class="buy" v-if="product.info.is_area == 0" @click="stepperShow = true">
        <van-button class="buy_btn" type="primary">{{ $t('lang27') }}</van-button>
      </div>
    </div>
    <!-- 选择数量 -->
    <van-popup v-model="stepperShow" round position="bottom">
      <div class="area">
        <div class="title">{{ $t('lang242') }}</div>
        <div class="stepper">
          <span>{{ $t('lang242') }}</span>
          <van-stepper v-model="number" min="1" />
        </div>
        <div class="submit">
          <van-button class="submit_btn" type="primary" @click="submitNoarea">{{ $t('lang71') }}</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 地区选择 -->
    <van-popup v-model="cascaderShow" round position="bottom">
      <div class="area">
        <div class="title">{{ $t('lang69') }}</div>
        <van-field v-model="search" :placeholder="$t('lang70')" class="input" right-icon="search" @click-right-icon="handleSearch" />
        <van-checkbox-group v-model="areaIds" @change="handleChoose" v-if="arealist.length > 0">
          <van-cell-group class="vanlist" @scroll="handleScroll">
            <van-cell class="item" v-for="item in arealist" :key="item.id" :title="item.address" clickable>
              <template #right-icon>
                <van-checkbox :name="item.id" icon-size="16px" checked-color="#29b286" ref="checkboxes" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
        <div class="nomore" v-else>
          <span>{{ $t('lang60') }}</span>
        </div>
        <div class="submit">
          <van-button class="submit_btn" type="primary" @click="submit">{{ $t('lang71') }}</van-button>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="loading" round class="loading-popup">
      <div class="loading">
        <van-loading type="spinner" />
      </div>
    </van-popup>
  </div>
</template>
  <script>
import { homeApi } from '@/api/index';
import { Dialog, Notify, Toast } from 'vant';
export default {
  data() {
    return {
      product: {
        info: {},
        order: [],
        times: [],
      },
      time: 30 * 60 * 60 * 1000,
      cascaderShow: false,
      cascaderValue: '',
      currentIssue: 0,
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [],
      arealist: [],
      search: '',
      areaIds: [],
      loading: false,
      page: 1,
      stepperShow: false,
      number: 1,
    };
  },
  mounted() {
    this.getPopularInfo(this.$route.query.id);
  },
  methods: {
    statusFn(status) {
      let result = '';
      switch (status) {
        case 0:
          result = this.$t('lang72');
          break;
        case 1:
          result = this.$t('lang73');
          break;
        case 2:
          result = this.$t('lang74');
          break;
        default:
          break;
      }
      return result;
    },
    formatTimeDifference(time) {
      const now = new Date();
      const past = new Date(time);
      const diff = now - past; // 时间差，单位为毫秒

      const seconds = Math.floor(diff / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);
      const days = Math.floor(hours / 24);

      if (seconds < 60) {
        return `${seconds}${this.$t('lang75')}`;
      } else if (minutes < 60) {
        return `${minutes}${this.$t('lang76')}`;
      } else if (hours < 24) {
        return `${hours}${this.$t('lang77')}`;
      } else {
        return `${days}${this.$t('lang78')}`;
      }
    },
    goBack() {
      this.$router.back();
    },
    toPage(name) {
      this.$router.push({ name });
    },
    getPopularInfo(id) {
      homeApi.getPopularInfo({ ids: id, product_id: this.$route.query.product_id }).then(res => {
        if (res.code == 200) {
          this.product = res.data;
          this.product.info.img_url = res.data.info.img_url.split(',');
          this.getProductAddres();
        } else {
        }
      });
    },
    maskAddress(address) {
      return address.replace(/(\w{4})\w*(\w{4})/, '$1****$2');
    },
    onFinish({ selectedOptions }) {
      this.cascaderShow = false;
    },
    onClose(e) {},
    onChange(e) {},
    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('到底了');
        if (this.page != -1) {
          this.page++; // 页数加 1
          this.getProductAddres(); // 触发加载更多
        }
      }
    },
    handleSearch() {
      this.page = 1; // 重置为 1，表示重新查询
      this.arealist = []; // 重置列表
      this.getProductAddres();
    },
    getProductAddres() {
      homeApi.getProductAddres({ product_id: this.product.info.product_id, search: this.search, page: this.page }).then(res => {
        if (res.code == 200) {
          if (this.arealist.length >= res.data.total) {
            this.page = -1; // 重置为 -1，表示没有更多数据
          } else {
            this.arealist = [...this.arealist, ...res.data.data];
            console.log(this.arealist.length);
            if (this.arealist.length >= res.data.total) {
              this.page = -1; // 重置为 -1，表示没有更多数据
            }
          }
        } else {
        }
      });
    },
    handleChoose(e) {
      console.log(e);
      this.areaIds = e;
    },
    // 无关联地区的
    submitNoarea() {
      if (this.number <= 0) {
        return Notify({ type: 'warning', message: this.$t('lang69') });
      }
      let _this = this;
      Dialog.confirm({
        title: this.$t('lang136'),
        message: this.$t('lang137'),
        confirmButtonText: _this.$t('lang111'),
        cancelButtonText: _this.$t('lang135'),
      })
        .then(() => {
          _this.loading = true;
          homeApi.create({ type: 2, order_id: _this.product.info.id, product_id: _this.product.info.product_id, num: _this.number }).then(res => {
            if (res.code == 200) {
              _this.loading = false;
              _this.cascaderShow = false;
              _this.areaIds = [];
              Toast({ message: res.msg });
              _this.$router.push('mine');
            } else if (res.code == 15001) {
              _this.loading = false;
              setTimeout(() => {
                _this.$router.push('recharge');
              }, 300);
            } else {
              _this.loading = false;
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 有关联地区的
    submit() {
      if (this.areaIds.length <= 0) {
        return Notify({ type: 'warning', message: this.$t('lang69') });
      }
      let _this = this;
      Dialog.confirm({
        title: this.$t('lang136'),
        message: this.$t('lang137'),
        confirmButtonText: _this.$t('lang111'),
        cancelButtonText: _this.$t('lang135'),
      })
        .then(() => {
          this.loading = true;
          homeApi.create({ type: 1, order_id: _this.product.info.id, product_id: _this.product.info.product_id, area_id: _this.areaIds.join(',') }).then(res => {
            if (res.code == 200) {
              _this.loading = false;
              _this.cascaderShow = false;
              _this.areaIds = [];
              Toast({ message: res.msg });
              _this.$router.push('mine');
            } else if (res.code == 15001) {
              _this.loading = false;
              setTimeout(() => {
                _this.$router.push('recharge');
              }, 300);
            } else {
              _this.loading = false;
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
  <style lang="less" scoped>
.product-detail-page {
  //   background-color: #fff;
  padding-bottom: 100px;
}

.product-swiper {
  height: 250px;
  width: 100vw;
}

.product-image {
  width: 100%;
  height: 100%;
}

.product-info {
  .product-price-stock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    background: linear-gradient(to right, #1ab986, #25d7bb);
    .left {
      flex: 1;
      padding-right: 10px;
      .price {
        font-size: 22px;
        color: #fff;
        .small {
          color: #e7e7e7;
          font-size: 12px;
          padding-right: 6px;
        }
        .small:last-child {
          text-decoration: line-through;
        }
      }
      .tags {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11px;
        color: #f8f8f8;
        text-align: right;
        margin-top: 6px;
        .tag {
          white-space: nowrap;
          color: #1ab986;
          font-size: 11px;
          border-radius: 4px;
          background-color: #fff;
        }
      }
    }
    .end {
      text-align: center;
      line-height: 40px;
    }
    .countdown {
      min-width: 100px;
      height: 40px;
      font-size: 13px;
      border-left: 1px solid #f1f1f1;
      padding-left: 10px;
      .clock {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
      .count {
        margin-top: 6px;
      }
      .colon {
        display: inline-block;
        margin: 0 4px;
        color: #fff;
        font-size: 11px;
      }
      .block {
        display: inline-block;
        width: 21px;
        color: #1ab986;
        font-size: 12px;
        text-align: center;
        border-radius: 4px;
        background-color: #fff;
      }
    }
  }

  .goods_info {
    padding: 8px 14px;
    background-color: #fff;
    .title {
      font-size: 16px;
      font-weight: 550;
      color: #3d3d3d;
    }
    .red {
      color: rgb(255, 48, 48);
      font-size: 11px;
    }
    .tag {
      color: #0db39a;
      font-size: 11px;
      padding-top: 8px;
    }
  }
}
.issue {
  color: #aaaaaa;
  font-size: 13px;
  padding: 16px 14px;
  margin: 8px 0;
  background-color: #ffffff;
  .item {
    .ellipsis-icon {
      transform: rotate(90deg);
      margin-left: 0.8em;
    }
  }
  .ssm {
    content: 'USDT';
    font-size: 8px;
  }
  .item:last-child {
    .ellipsis-icon {
      display: none;
    }
  }
  .tag {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #fff;
  }
  .current {
    color: #000;
    .red {
      color: rgb(255, 48, 48);
    }
    .tag {
      color: #29b286;

      background-color: #d4f0e7;
    }
  }
}
.zp {
  color: #3d3d3d;
  font-size: 12px;
  padding: 16px 14px;
  margin: 8px 0;
  background-color: #ffffff;
  white-space: nowrap;

  .safe {
    width: 22px;
    height: 22px;
    margin-right: 4px;
  }
  .t {
    font-size: 13px;
    white-space: wrap;
  }
}
.jsb {
  justify-content: space-between;
}
.flex {
  display: flex;
  align-items: center;
}
.section-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
}
.purchase-record {
  color: #3d3d3d;
  padding: 14px;
  background-color: #fff;

  .list {
    max-height: 200px;
    overflow: scroll;
    .item {
      font-size: 12px;
      padding-top: 14px;
      .avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-right: 4px;
        background: linear-gradient(to bottom right, #29b286, #30d5a0);
      }
    }
  }
  .more {
    text-align: center;
    font-size: 12px;
    color: #aaaaaa;
    padding-top: 20px;
  }
}

.product-details {
  color: #3d3d3d;
  font-size: 12px;
  padding: 16px 14px;
  margin: 8px 0 0;
  background-color: #ffffff;

  .box {
    color: #aaaaaa;
    flex-wrap: wrap;
    padding: 7px 14px;
    border-radius: 10px;
    background-color: #ededed;
    .item {
      display: flex;
      align-items: center;
      width: 50%;
      padding: 7px 0px;
      .val {
        color: #000;
        width: 50%;
        // display: block;
      }
    }
  }
}
.ellipsis {
  overflow: hidden; /* 确保超出容器的文本被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  text-overflow: ellipsis; /* 使用省略号表示文本超出 */
}
.promo-image {
  width: 100%;
  img {
    width: 100% !important;
  }
  //   margin-top: 14px;
}
.stepper {
  color: #000;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 0 50px;
}
.van-tabbar-item {
  font-size: 14px;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
  box-sizing: border-box;
  .flex-c {
    color: #3d3d3d;
    font-size: 10px;
    flex-direction: column;
    margin-right: 16px;
    .icon {
      width: 22px;
      height: 22px;
      margin-bottom: 3px;
    }
  }

  .buy {
    &_btn {
      height: 30px;
      line-height: 30px;
      font-size: 13px;
      background-color: #29b286;
      border: none;
      padding: 0 16px;
      white-space: nowrap;
      border-radius: 30px;
    }
  }
}
.back {
  position: fixed;
  z-index: 99;
  top: 14px;
  left: 14px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: auto auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #7a777b;
}
.area {
  padding: 20px 30px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  .title {
    color: #000;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
    padding: 0 0 14px;
  }
  .vanlist {
    max-height: 350px;
    min-height: 350px;
    overflow: auto;
    box-sizing: border-box;
    margin: 20px 0;
    border: none !important;

    .item {
      padding: 12px 0 !important;
      border-bottom: 0.5px solid rgba(190, 190, 190, 0.15);
    }
  }
  .nomore {
    color: #aaa;
    text-align: center;
    font-size: 12px;
    height: 350px;
    padding: 40px 0;
  }
  .submit {
    width: 100%;
    // position: fixed;
    bottom: 30px;
    box-sizing: border-box;
    &_btn {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      background-color: #29b286;
      border: none;
      white-space: nowrap;
      border-radius: 30px;
    }
  }
  .input {
    width: 100%;
    border: 1px solid #29b286;
    border-radius: 20px;
  }
  ::v-deep .van-field__control {
    padding: 6px 12px;
  }
  ::v-deep .van-icon-search {
    font-size: 20px;
    color: #29b286;
    font-weight: bold;
    margin-right: 10px;
  }

  ::v-deep .van-hairline--top-bottom::after,
  ::v-deep.van-hairline-unset--top-bottom::after {
    border: none;
  }
}
::v-deep .van-hairline--left::after {
  border-left-width: 0.005px !important;
}
::v-deep .van-cascader__option,
::v-deep .van-cascader__title {
  color: #000;
}

.loading {
  padding: 50px 60px;
  border: none;
  background-color: rgba(#353535, 1);
}
.loading-popup {
  background-color: rgba(#353535, 0);
}
::v-deep .van-stepper__plus::after {
  font-size: 12px !important;
  width: 1%;
  height: 12px;
  // transform: scale(0.5);
}
::v-deep .van-stepper__plus::before {
  // font-size: 12px !important;
  width: 12px;
  height: 2%;
  // transform: scale(0.5);
}
::v-deep .van-stepper__minus::before {
  width: 12px;
  height: 2%;
}
</style>