RWACha-DAPP/src/views/index/index.vue

<template>
  <div>
    <div class="home_page">
      <div>
        <div class="pd">
          <Header></Header>
        </div>

        <!-- <div class="top">
          <img src="@/assets/images/index/cha.png" alt="" class="cha" />
          <van-field v-model="key" :placeholder="$t('lang4')" class="input" right-icon="search" @click="navigatorTo('transfer')" />
        </div> -->

        <div class="con">
          <div class="banner">
            <van-swipe :autoplay="3000" class="my-swipe" ref="swipeRef">
              <van-swipe-item class="swipe-item" v-for="(item, index) in indexinfo.banner_list" :key="index">
                <van-image style="width: 100%; height: 100%" radius="12" :src="item.img_url" />
              </van-swipe-item>
            </van-swipe>
          </div>
          <van-notice-bar class="notice" color="#000" background="#ffffff" :text="indexinfo.notice_list[0]?.title" @click="navigatorToPage('bulletinDetail', indexinfo.notice_list[0].id)">
            <div slot="left-icon" class="notice-ico">{{ $t('lang3') }}</div>
            <div slot="right-icon" @click="navigatorTo('bulletin')"><van-icon name="wap-nav" size="20" color="#29b286" /></div>
          </van-notice-bar>
        </div>
      </div>
      <div class="pd navbox flex jsb">
        <div class="navbox_item flex" v-for="(item, index) in navlist" :key="index" @click="navigatorTo(item.url)">
          <img :src="item.icon" alt="" />
          <span>{{ item.text }}</span>
        </div>
      </div>
      <div class="split flex">
        <img src="@/assets/images/index/split.png" alt="" />
        <span>{{ $t('lang263') }}</span>
        <img src="@/assets/images/index/split.png" alt="" />
      </div>
      <!-- 热门抢购 -->
      <div class="goods_box">
        <!-- <div class="title">
          <div class="flex">
            <img src="@/assets/images/index/hot.png" class="good_icon" />
            <span>{{ $t('lang1') }}</span>
          </div>
          <div class="" @click="navigatorTo('trade')">
            <span class="all">{{ $t('lang5') }}</span>
            <van-icon name="arrow" color="#7f7f7f" size="14px" />
          </div>
        </div> -->
        <div class="goods_list" v-for="(item, index) in product_list" :key="index" @click="navigatorToPage('GoodsDetail', item.id, item.product_id)">
          <van-image class="goods_list_img" radius="10" :src="item.products_list.thum" />
          <div class="right">
            <span class="ellipsis" v-if="$i18n.locale == 'en'">{{ item.products_list.en_name }}</span>
            <span class="ellipsis" v-else>{{ item.products_list.zh_name }}</span>
            <div class="cen">
              <span class="money"
                >{{ item.price }}<span class="ssm">{{ $t('lang174') }}</span></span
              >
            </div>
            <!-- <span class="time_text">{{ $t('lang6') }} {{ item.cost_price }}{{ $t('lang174') }}</span> -->
            <div class="yel" v-if="item.status == 1">
              <van-count-down class="count" :time="item.end_time * 1000 - new Date().getTime()" :format="`${$t('lang8')} DD ${$t('lang9')} HH ${$t('lang10')} mm ${$t('lang11')} ss ${$t('lang12')}`" />
            </div>
            <div class="yel" style="background-color: #f1f1f1" v-else-if="item.status == 0">
              <span class="count" style="color: #aaa">{{ $t('lang72') }}</span>
            </div>
            <div class="progress">
              <van-progress :percentage="((item.num + item.init_num) / item.stock) * 100 || 0" class="pro" color="#29b286" :show-pivot="false" />
              <span>{{ item.num + item.init_num }}/{{ item.stock }}{{ $t('lang7') }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="pd goods_box">
        <div class="title">
          <div class="flex">
            <img src="@/assets/images/index/change.png" class="good_icon" />
            <span>{{ $t('lang216') }}</span>
          </div>
          <div>
            <span class="all" @click="navigatorTo('transfer')">{{ $t('lang14') }}</span>
            <van-icon name="arrow" color="#7f7f7f" size="14px" />
          </div>
        </div>
        <div class="goods_list jsb" v-for="(item, index) in transfer_list" :key="index">
          <van-image class="goods_list_img" radius="10" :src="item.img_url" />
          <div class="right" style="flex: 1">
            <span class="ellipsis">{{ item.name }}</span>
            <span class="time_text t2">{{ $t('lang15') }}{{ item.nickname }}</span>
            <div class="green">{{ item.title }}</div>
            <div class="flex jsb">
              <div class="cen1">
                <span class="mon_t">{{ $t('lang16') }}: </span>
                <span class="money"
                  >{{ Math.floor(item.price * 100) / 100 }}<span class="ssm">{{ $t('lang174') }}</span></span
                >
              </div>
              <div class="buy" @click="navigatorToPage('TransferDetail', item.id)">
                <van-button class="buy_btn" type="primary">{{ $t('lang17') }}</van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="pd goods_box">
        <div class="title">
          <div class="flex">
            <img src="@/assets/images/index/mine.png" class="good_icon" />
            <span>{{ $t('lang217') }}</span>
          </div>
          <div>
            <span class="all" @click="$toast($t('lang2'))">{{ $t('lang19') }}</span>
            <van-icon name="arrow" color="#7f7f7f" size="14px" />
          </div>
        </div>
        <div class="goods_list goods_list1 jsb">
          <div class="item" v-for="(item, index) in mortgage_list" :key="index">
            <van-image class="goods_list1_img" radius="10" :src="item.img_url" />
            <div class="right">
              <span>{{ item.title }}</span>
              <div class="cen">
                <span class="mon_t">{{ $t('lang20') }}: </span>
                <span class="money">10000</span>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <!-- 绑定弹窗 -->
    <van-popup v-model="show" round style="width: 80%" :close-on-click-overlay="false">
      <div class="bind_box">
        <van-icon name="cross" class="close" size="20" @click="show = false" />
        <div class="title">{{ $t('lang21') }}</div>
        <div class="address_field">
          <van-field v-model="inviteCode" type="textarea" rows="1" autosize class="input1" :placeholder="$t('lang23')" />
        </div>
        <div class="bind_button" @click="bindParent">
          <span>{{ $t('lang22') }}</span>
        </div>
      </div>
    </van-popup>
    <BottomNavigation></BottomNavigation>
  </div>
</template>

<script>
import Header from '@/components/Header.vue';
import { mapState } from 'vuex';
import { homeApi } from '@/api/index';
import BottomNavigation from '@/components/BottomNavigation.vue';
import { Notify } from 'vant';
import { dateFormat } from '@/utils/formatTool.js';
import { Locale } from 'vant';
import enUS from 'vant/es/locale/lang/en-US';
import zhCN from 'vant/lib/locale/lang/zh-CN';
export default {
  data() {
    return {
      show: false, //弹窗状态
      address: '', //上级地址
      noticeText: '', //公告
      indexinfo: {
        system_name: '',
        system_logo: '',
        banner_list: [],
        notice_list: [],
      },
      inviteCode: undefined,
      userinfo: {
        power: undefined,
        token: undefined,
        team_poser: undefined,
      },
      bindShow: false,
      time: 30 * 60 * 60 * 1000,

      showLoading: true,
      key: '',
      transfer_list: [],
      product_list: [],
      mortgage_list: [],
      navlist: [
        {
          text: this.$t('lang258'),
          icon: require('@/assets/images/index/rb.png'),
          url: '',
        },
        {
          text: this.$t('lang259'),
          icon: require('@/assets/images/index/hc.png'),
          url: '',
        },
        {
          text: this.$t('lang264'),
          icon: require('@/assets/images/index/cj.png'),
          url: 'welfare',
        },
        {
          text: this.$t('lang261'),
          icon: require('@/assets/images/index/kf.png'),
          url: '',
        },
        {
          text: this.$t('lang262'),
          icon: require('@/assets/images/index/fx.png'),
          url: 'invite',
        },
      ],
    };
  },
  created() {
    if (localStorage.getItem('language') == 'en') {
      Locale.use('en-US', enUS);
    } else {
      Locale.use('zh-CN', zhCN);
    }
    this.inviteCode = this.$route.query.inviteCode;
    if (this.inviteCode) {
      localStorage.setItem('inviteCode', this.inviteCode);
    }
    // this.getUserInfo();
  },
  mounted() {
    this.inviteCode = this.$route.query.inviteCode;
    if (this.inviteCode) {
      localStorage.setItem('inviteCode', this.inviteCode);
    }
    if (this.account) {
      this.init();
    }

    // if (!localStorage.getItem('noLogin')) {
    //   this.init();
    // }
    //注册一个事件总线  on
    this.$bus.$on('updateUserinfo', data => {
      // console.log('走了事件总线', data);
      if (data == 'update') {
        this.init();
      }
    });
  },
  methods: {
    init() {
      this.getIndexBaseInfo();
      this.getIndexGoodsInfo();
      this.getUserInfo();
    },
    // bind() {
    //   if (this.userinfo.parent_id == 0 && this.inviteCode) {
    //     // this.show = true;
    //     this.bindParent();
    //   } else if (this.userinfo.parent_id == 0 && !this.inviteCode) {
    //     this.show = true;
    //   }
    // },
    dateFormatFn(date) {
      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd');
    },
    bindParent() {
      if (!this.inviteCode) {
        Notify({ type: 'danger', message: this.$t('lang23') });
        this.show = true;
        return;
      }

      let data = {
        address: this.account,
        inviteCode: this.inviteCode,
        // sign: res,
      };
      //绑定上级 看信息
      homeApi.auth(data).then(res => {
        // console.log('走了这里11');
        //我是绑定上级
        if (res.code == 200) {
          if (res.data.parent_id != 0) {
            Notify({ type: 'success', message: this.$t('lang152') });
            this.bindShow = false;
            this.show = false;
            this.init();
            localStorage.setItem('userinfo', JSON.stringify(res.data));
            localStorage.setItem('token__' + account, res.data.token);
            localStorage.setItem('parentId', res.data.parent_id);
          } else {
            this.show = true;
            Notify({ type: 'danger', message: res.msg });
          }
        } else {
          this.show = true;
          Notify({ type: 'danger', message: res.msg });
        }
      });
    },
    changeBanner(index) {
      this.$refs.swipeRef.swipeTo(index, { immediate: false });
    },
    getUserInfo() {
      homeApi.getUserInfo({ address: this.account, inviteCode: this.inviteCode }).then(res => {
        if (res.code == 200) {
          localStorage.setItem('userinfo', JSON.stringify(res.data));
          localStorage.setItem('parentId', res.data.parent_id);
          this.userinfo = res.data;
          if (this.userinfo.parent_id == 0) {
            this.show = true;
          }
          // if (this.userinfo.parent_id == 0) {
          //   this.bindParent();
          // }
        } else {
        }
      });
    },
    navigatorTo(router) {
      if (this.$route.name == router) return;
      if (router != '') {
        this.$router.push({ name: router });
      } else {
        this.$toast(this.$t('lang2'));
      }
    },
    navigatorToPage(name, id, product_id) {
      this.$router.push({ name, query: { id: id, product_id: product_id } });
    },
    getIndexBaseInfo() {
      homeApi.getIndexBaseInfo().then(res => {
        if (res.code == 200) {
          this.showLoading = false;
          this.indexinfo = res.data;
        } else {
          this.showLoading = false;
        }
      });
    },
    getIndexGoodsInfo() {
      homeApi.getIndexGoodsInfo().then(res => {
        if (res.code == 200) {
          this.transfer_list = res.data.transfer_list;
          this.product_list = res.data.product_list;
          this.mortgage_list = res.data.mortgage_list;
        } else {
        }
      });
    },

    finish() {
      this.getIndexBaseInfo();
    },
    toLink(e) {
      window.location.href = e;
    },
    toAssets() {
      this.$router.push({ name: 'assets' });
    },
    toPage(type) {
      this.$router.push({ name: 'datainfo', query: { type } });
    },
    toTeam() {
      this.$router.push({ name: 'trade' });
    },
  },
  computed: {
    ...mapState(['account']),
  },
  watch: {
    account(e) {
      // this.init();
      // this.bind();
    },
  },
  components: {
    Header,
    BottomNavigation,
  },
};
</script>

<style lang="less" scoped>
.home_page {
  padding: 0 0 100px;
  min-height: 100vh;

  .pd {
    padding: 14px;
    background-color: #fff;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cha {
      width: 100px;
    }

    .input {
      width: calc(100% - 110px);
      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;
    }
  }
  .con {
    margin: 14px;
    border-radius: 12px;
    background-color: #fff;
  }
  .notice {
    font-size: 13px;
    margin: 0px 4px 12px;
    .notice-ico {
      color: #fff;
      letter-spacing: 2px;
      padding: 0 8px;
      border-radius: 20px;
      margin-right: 10px;
      background-color: #29b286;
    }
  }
  ::v-deep .van-notice-bar {
    padding: 0 !important;
  }
  .banner {
    margin: 8px 0 0;
    height: 160px;
    color: #fff;
    font-size: 22px;
    border-radius: 12px;
    .my-swipe {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }
  }

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

  .goods_box {
    margin: 14px;
    border-radius: 14px;
    .good_icon {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
  .title {
    color: #000;
    font-size: 15px;
    font-weight: 600;
    // font-style: italic;
    padding: 0 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .all {
      font-size: 12px;
      font-weight: normal;
      font-style: normal;
      color: rgba(#999, 1);
    }
  }
  .navbox {
    margin: 14px;
    border-radius: 12px;

    &_item {
      color: #000;
      font-size: 10px;
      font-weight: 550;
      text-align: center;
      flex-direction: column;
      img {
        width: 36px;
        height: 36px;
        margin-bottom: 4px;
      }
    }
  }

  .split {
    color: #000;
    justify-content: center;
    span {
      font-size: 17px;
      font-weight: 550;
      letter-spacing: 2px;
      padding: 0 10px;
    }
    img {
      width: 40px;
    }
    img:last-child {
      transform: rotate(180deg);
    }
  }

  .goods_list {
    display: flex;
    // align-items: center;
    // justify-content: space-between;
    color: #000;
    padding: 12px;
    border-radius: 10px;
    // box-shadow: 0 4px 16px 0 rgba(53, 73, 93, 0.15);
    margin-bottom: 20px;
    // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.29);
    background-color: #fff;
    // background-image: linear-gradient(90deg, rgba(217, 239, 239, 0.3) 0, rgba(217, 239, 239, 0.3) 0, rgba(225, 240, 242, 0.3) 100%, rgba(225, 240, 242, 0.3) 100%);
    &_img {
      width: 90px;
      height: 90px;
      border-radius: 10px;
      margin-right: 10px;
    }

    .right {
      width: calc(100% - 100px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 13px;

      .time_text {
        color: #7f7f7f;
        font-weight: normal;
        font-size: 10px;
        text-decoration: line-through;
        // padding-top: 10px;
      }
      .cen1 {
        color: red;
        // font-weight: 550;
        // padding: 5px 0;
        font-size: 12px;
      }
      .cen {
        color: red;
        // font-weight: 550;
        display: flex;
        align-items: center;
        // padding: 5px 0;
        font-size: 12px;
      }
      .money {
        font-size: 15px;
      }
      .ssm {
        font-size: 10px;
        font-weight: normal;
      }
      .mon_t {
        color: #000;
        font-weight: normal;
      }
      .yel {
        font-weight: normal;
        white-space: nowrap;
        line-height: 100%;
        width: fit-content;
        // margin-left: 8px;
        padding: 0px 8px;
        border-radius: 16px;
        background-color: #f9f6e5;
        .count {
          color: #f7c35d;
          font-size: 9px;
        }
      }
      .green {
        width: fit-content;
        color: #29b286;
        background-color: #ddf2e7;
        font-size: 10px;
        font-weight: normal;
        padding: 2px 6px;
        border-radius: 6px;
      }
      .t2 {
        text-decoration: none;
      }

      .progress {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 10px;
        .pro {
          width: 70%;
          overflow: hidden;
        }
      }
    }
    .buy {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      &_btn {
        height: 26px;
        line-height: 26px;
        font-size: 10px;
        background-color: #29b286;
        border: none;
        padding: 0 10px;
        white-space: nowrap;
        border-radius: 30px;
      }
    }
  }
}
.goods_list1 {
  flex-wrap: wrap;
  &_img {
    width: 100%;
    height: 70px;
    border-radius: 10px;
    margin-right: 10px;
  }
  .item {
    width: 45%;
    margin-bottom: 10px;
    .cen {
      padding-top: 4px;
      .mon_t {
        font-size: 11px;
        color: #7f7f7f;
      }
      .money::after {
        content: 'CHA/年';
      }
    }
  }
}
.bind_box {
  font-size: 15px;
  text-align: center;
  color: #000;
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .title {
    padding: 20px 20px 26px;
  }
  .address_field {
    padding: 10px 0;
    margin: 0 30px 20px;
  }
  .bind_button {
    color: #29b286;
    text-align: center;
    border: none;
    padding: 16px 0;
    border-top: 1px solid #cccccc9d;
  }
}
.flex {
  display: flex;
  align-items: center;
}

.ellipsis {
  overflow: hidden; /* 确保超出容器的文本被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  text-overflow: ellipsis; /* 使用省略号表示文本超出 */
}
// ::v-deep .van-field__control {
//   overflow: hidden; /* 确保超出容器的文本被裁剪 */
//   white-space: nowrap; /* 确保文本在一行内显示 */
//   text-overflow: ellipsis; /* 使用省略号表示文本超出 */
// }
</style>