web-africa-h5/pages/architecture/recommendArchite/recommend11.vue

<!-- TreeList.vue -->
<template>
  <view>
    <view class="seach">
      <view class="neibox">{{ $t("MN_T_1") }}</view>
      <view class="seach_i">
        <u--input class="these" v-model="queryParams.memberCode">
          <template slot="suffix">
            <view class="seatch_r"
              ><u-icon
                @click="getDataList"
                name="search"
                size="22"
                color="#fff"
              ></u-icon
            ></view>
          </template>
        </u--input>
      </view>
      <view class="neibox" @click="popShow = true">{{ $t("MY_ORD_50") }}</view>
    </view>
    <view class="mainbox">
      <view class="main_bottom"><tree-item :data="treeData"></tree-item></view>
    </view>
    <u-popup
      :show="popShow"
      mode="right"
      @close="popShow = false"
      :closeOnClickOverlay="false"
    >
      <view class="rightPopup">
        <view class="popup_top">
          <view
            @click="
              () => {
                getDataList(), (popShow = false);
              }
            "
          >
            {{ $t("MY_ORD_50") }}
          </view>
          <view class="top_red" @click="popShow = false">{{
            $t("N_I_241")
          }}</view>
        </view>
        <view class="typesBox">
          <view class="typeTitle" @click="listShow = true">{{
            $t("N_I_242")
          }}</view>
          <view class="choiceBox">
            <view class="inputbox" @click="listShow = true">
              <view class="">{{
                settleName ? settleName : $t("CK_KS_38")
              }}</view>
              <u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
            </view>
          </view>
        </view>
        <view class="typesBox">
          <view class="typeTitle">{{ $t("w_0353") }}</view>
          <view class="choiceBox">
            <u--input
              v-model="queryParams.level"
              style="
                background-color: rgba(255, 234, 233, 0.65);
                border-color: rgba(255, 234, 233, 0.65) !important;
              "
              :placeholder="$t('S_C_70')"
              border="surround"
              shape="circle"
            ></u--input>
          </view>
        </view>

        <view class="popup_bottom">
          <view class="bottom_btn thebtn1" @click="clearAll">{{
            $t("w_0257")
          }}</view>
          <view
            class="bottom_btn thebtn2"
            @click="
              () => {
                getDataList(), (popShow = false);
              }
            "
          >
            {{ $t("w_0035") }}
          </view>
        </view>
      </view>
      <u-picker
        :cancelText="$t('MN_F_31')"
        :confirmText="$t('MN_F_32')"
        @cancel="listShow = false"
        :show="listShow"
        ref="uPicker"
        :columns="memberSettlePeriodList"
        @confirm="confirm"
        keyName="settleDate"
      ></u-picker>
    </u-popup>
  </view>
</template>

<script>
import TreeItem from "@/components/treeItem.vue";
export default {
  name: "TreeList",
  components: {
    TreeItem,
  },
  data() {
    return {
      avaerInfoList: [],
      queryParams: {
        memberSettlePeriodId: "", //期数
        memberCode: "", //会员编号
        level: 3, //代数
      },
      memberSettlePeriodList: [], //期数
      treeData: [],
      popShow: false,
      listShow: false,
      settleName: "",
    };
  },
  onLoad() {
    this.getAvarerInfo();
    this.getDataList();
  },
  methods: {
    confirm(e) {
      this.queryParams.memberSettlePeriodId = e.value[0].pkId;
      this.settleName = e.value[0].settleDate;
      this.listShow = false;
    },
    clearAll() {
      this.popShow = false;
      this.settleName = "";
      this.queryParams = {
        memberSettlePeriodId: "", //期数
        memberCode: "", //会员编号
        level: 3, //代数
      };
      this.getDataList();
    },
    getAvarerInfo() {
      let self = this;
      self._get("member/api/member-structure/get-avatar-info", {}, (res) => {
        self.avaerInfoList = res.data;
      });
      self._get(
        "member/api/member-structure/get-member-settle-period",
        {},
        (res) => {
          self.memberSettlePeriodList = [res.data];
        }
      );
    },
    getDataList() {
      let self = this;
      let params = this.queryParams;
      self._get("/member/api/member-structure/tj-framework", params, (res) => {
        self.treeData = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.seach {
  background: #fff;
  overflow: hidden;
  padding: 20rpx 23rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-bottom: 2rpx solid #eee;
  z-index: 99;
  .these {
    border: none;
    padding: 10rpx 0 !important;
  }

  .seach_i {
    padding: 0 20rpx;
    border-radius: 34rpx;
    background: #fff;
    flex: 1;
    background: #f5f6f8;
    margin: 0 20rpx;
  }

  .neibox {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  .seatch_r {
    background: #fb3024;
    border-radius: 50%;
    padding: 8rpx;
  }
}

.mainbox {
  padding: 38rpx 20rpx;
  background: #ffffff;
  margin-top: 25rpx;
}

.rightPopup {
  width: 645rpx;
  .popup_top {
    padding: 25rpx;
    background-color: rgba(255, 234, 233, 0.65);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;

    .top_red {
      color: #fb3024;
    }
  }

  .popup_bottom {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    .bottom_btn {
      flex: 1;
      padding: 20rpx 0;
      text-align: center;
      font-size: 28rpx;
    }

    .thebtn1 {
      background-color: rgba(255, 234, 233, 0.65);
      color: #333333;
    }

    .thebtn2 {
      background-color: #fb3024;
      color: #ffffff;
    }
  }

  .typesBox {
    margin-top: 40rpx;

    .typeTitle {
      padding: 0 24rpx;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
    }

    .choiceBox {
      padding: 0 12rpx;
      display: flex;
      margin-top: 17rpx;
      align-items: center;
      flex-wrap: wrap;

      .inputbox {
        font-size: 26rpx;
        width: 100%;
        padding: 20rpx 32rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 234, 233, 0.65);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .flex_btn {
        background-color: rgba(255, 234, 233, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14rpx 48rpx;
        border-radius: 26rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 17rpx 5rpx;
      }

      .timesbtn {
        flex: 1;
      }

      .selectbtn {
        background-color: #c8161d;
        color: #ffffff;
      }
    }
  }
}
</style>