web-africa-h5/pages/user/index/detail.vue

<template>
  <view v-if="isPop">
    <view class="pop-bg" @click="closeFunc"></view>
    <view class="pop-box">
      <view class="order-detail">
        <view class="d-e-c"
          ><u-icon
            @click="closeFunc"
            name="close"
            size="30rpx"
            color="#999"
          ></u-icon
        ></view>
        <view class="p-0-20 f40 fb tc">{{ displayText }}</view>
        <view class="product-box">
          <view class="top-tabbar">
            <view
              v-for="(tab, index) in tabs"
              :key="index"
              :class="state_active === index ? 'tab-item active' : 'tab-item'"
              @click="stateFunc(index)"
              >{{ $t(tab.text) }}</view
            >
            <view class="preIcon" @click="previous">
              <u-icon name="arrow-left" size="80rpx" color="#007AFF"></u-icon>
            </view>
          </view>
          <view class="product-list">
            <view
              v-for="(expert, index) in expertList"
              :key="index"
              class="product-item"
            >
              <view class="product-info">
                <view class="text-rank">NO.0{{ expert.rank }}</view>
                <image
                  :src="
                    expert.headPath ? expert.headPath : '/static/default.png'
                  "
                  class="item image"
                ></image>
                <view class="member-name">{{ expert.memberName }}</view>
              </view>
            </view>
          </view>
          <view class="nextIcon" @click="next">
            <u-icon name="arrow-right" size="80rpx" color="#007AFF"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      state_active: 0,
      loading: false,
      expertList: [],
      memberName: "",
      rank: "",
      wallType: 6,
      displayText: this.$t("S_L_12"),
      tabs: [{ text: "年度" }, { text: "季度" }, { text: "月度" }],
    };
  },
  props: ["isPop"],
  mounted() {
    this.getnext();
  },
  methods: {
    next() {
      this.$emit("next");
      if (this.wallType === 6) {
        this.wallType = 9;
        this.displayText = this.$t("S_L_13");
      } else if (this.wallType === 5) {
        this.wallType = 8;
        this.displayText = this.$t("S_L_13");
      } else if (this.wallType === 4) {
        this.wallType = 7;
        this.displayText = this.$t("S_L_13");
      }
      this.getData();
      this.displayText = this.$t("S_L_13");
    },
    previous() {
      this.$emit("previous");
      this.getnext();
      this.displayText = this.$t("S_L_12");
    },
    stateFunc(index) {
      if (this.state_active !== index) {
        this.loading = true;
        this.state_active = index;
        if (index === 0) {
          if(this.displayText == this.$t("S_L_13")){
            this.wallType=9
            this.getData();
          }else{
            this.wallType = 6;
          this.displayText = this.$t("S_L_12");
             this.getnext();
          }
        } else if (index === 1) {
           if(this.displayText == this.$t("S_L_13")){
            this.wallType=8
            this.getData();
          }else{
            this.wallType = 5;
          this.displayText = this.$t("S_L_12");
             this.getnext();
          }
        } else if (index === 2) {
           if(this.displayText == this.$t("S_L_13")){
            this.wallType=7
            this.getData();
          }else{
            this.wallType = 4;
          this.displayText = this.$t("S_L_12");
             this.getnext();
          }
        }
     
      }
    },
    closeFunc() {
      this.$emit("close");
    },
    getData() {
      let self = this;
      self.loading = true;
      uni.showLoading({
        title: self.$t("MN_F_6"),
      });
      self._post(
        "member/api/achieve/repurchase",
        {
          wallType: self.wallType,
        },
        (res) => {
          console.log(self.wallType);
          self.expertList = res.rows;
          console.log(self.expertList);
          self.loading = false;
          uni.hideLoading();
        }
      );
    },
    getnext() {
      let self = this;
      self.loading = true;
      uni.showLoading({
        title: self.$t("MN_F_6"),
      });
      self._post(
        "member/api/achieve/recommend",
        {
          wallType: self.wallType,
        },
        (res) => {
          console.log(self.wallType);
          self.expertList = res.rows;
          console.log(self.expertList);
          self.loading = false;
          uni.hideLoading();
        }
      );
    },
  },
};
</script>

<style lang="scss">
.pop-box {
  width: 90%;
  height: auto;
  box-sizing: border-box;
  position: fixed;
  top: 18%;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #ffffff;
  border-radius: 25rpx;
  z-index: 100;
}

.order-detail {
  padding: 23rpx;
  max-height: 80vh;
  overflow-y: auto;
}
.button-wrapper {
  display: flex;
}
.preIcon,
.nextIcon {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  z-index: 10;
}
.preIcon {
  left: 0;
}
.nextIcon {
  right: 0;
}
.button-wrapper:first-child {
  margin-right: 50rpx;
}

.button-wrapper:last-child {
  margin-left: 40rpx;
}
.product-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-box {
  padding: 26rpx 20rpx 0 20rpx;
  background: #ffffff;
  margin-bottom: 20rpx;

  .product-item {
    display: flex;
    flex-direction: row;
    margin: 20rpx 2rpx 20rpx 0;
  }

  .product-info {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }
}
.image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.text-rank {
  margin-right: 30rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: #fb3024;
}
.member-name {
  margin-left: 30rpx;
}
.pop-bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.6);
}
</style>