web-africa-h5/pages/market/index.vue

<template>
  <view class="self-service-index">
    <template v-if="openIndex == -1">
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != -1 }"
        @click="gotoPage('/pages/performance/index')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_TOTAL_V_1") + $t("MN_F_7") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != -1 }"
        @click="gotoPage('/pages/market/performance/performance')"
        v-if="hasMenu('marketDynamics')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("APP_ADD_1") }}</view
        >
      </view>
      <!-- <view
				class="self-service-item"
				:class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/market/performance/monthlyPerformanceComparison/monthlyPerformanceComparison')"
				v-if="hasMenu('monthlyPerformance') || hasMenu('monthlyChart') || hasMenu('recommendTime')"
			>
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{ $t('MN_F_49') }}</view>
			</view> -->
      <!-- <view class="self-service-item" :class="{ closemenu: openIndex != -1 }" @click="gotoPage('/pages/market/performance/recommend')" v-if="hasMenu('recommendTime')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{ $t('N_I_86') }}</view>
			</view> -->
      <!-- <view
				class="self-service-item"
				:class="{ closemenu: openIndex != -1 }"
				@click="gotoPage('/pages/market/performance/directPush')"
				v-if="hasMenu('recommendPerformance')"
			>
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{ $t('N_I_87') }}</view>
			</view> -->
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != -1 }"
        @click="gotoPage('/pages/market/performance/recommendationList')"
        v-if="hasMenu('recommendList')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_517") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != -1 }"
        @click="gotoPage('/pages/market/placementDataQuery/index')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("fn_295") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != -1 }"
        @click="gotoPage('/pages/market/recommendDataQuery/index')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("fn_296") }}</view
        >
      </view>
    </template>
    <template v-if="openIndex == 0">
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 0 }"
        @click="gotoPage('/pages/market/bonus-detail/index')"
        v-if="hasMenu('firstPurchase')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_531") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 0 }"
        @click="gotoPage('/pages/market/bonus-detail/spend_index')"
        v-if="hasMenu('repurchaseEarnings')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_532") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 0 }"
        @click="gotoPage('/pages/market/bonus-detail/heil_index')"
        v-if="hasMenu('hignFans')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_533") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 0 }"
        @click="gotoPage('/pages/market/bonus-detail/sea_index')"
        v-if="hasMenu('seaFans')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("w_0140") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 0 }"
        @click="gotoPage('/pages/market/bonus-detail/cloud_index')"
        v-if="hasMenu('sbyd')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_535") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 0 }"
        @click="gotoPage('/pages/market/bonus-detail/purchase_index')"
        v-if="hasMenu('repurchaseTicket')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_536") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 0 }"
        @click="gotoPage('/pages/market/bonus-detail/maker_index')"
        v-if="hasMenu('markerSpaceEarnings')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_537") }}</view
        >
      </view>
      <!-- 实时收益 -->
      <!-- 	<view class="self-service-item" :class="{ closemenu: openIndex != 0 }" @click="gotoPage('/pages/market/bonus-detail/realTimeBenefits')" v-if="hasMenu('bonusTotal')">
				<view class="self-service-name text-ellipsis-2 flex-1" style="padding-left: 40rpx;">{{ $t('ENU_MENU_538') }}</view>
			</view> -->
    </template>
    <template v-if="openIndex == 1">
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 1 }"
        @click="gotoPage('/pages/market/assessment-details/index')"
        v-if="hasMenu('repurchaseCheck')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_561") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 1 }"
        @click="gotoPage('/pages/market/assessment-details/share_index')"
        v-if="hasMenu('dividendCheck')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_562") }}</view
        >
      </view>
    </template>
    <template v-if="openIndex == 2">
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 2 }"
        @click="gotoPage('/pages/market/investment-list/index')"
        v-if="hasMenu('directList')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_581") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 2 }"
        @click="gotoPage('/pages/market/investment-list/canvass_index')"
        v-if="hasMenu('attractDetailList')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_582") }}</view
        >
      </view>
      <view
        class="self-service-item"
        :class="{ closemenu: openIndex != 2 }"
        @click="gotoPage('/pages/market/investment-list/heil_index')"
        v-if="hasMenu('haiList')"
      >
        <view
          class="self-service-name text-ellipsis-2 flex-1"
          style="padding-left: 40rpx"
          >{{ $t("ENU_MENU_583") }}</view
        >
      </view>
    </template>
  </view>
</template>

<script>
export default {
  data() {
    return {
      openIndex: -2,
      listmenu: [],
      realIncomeTotal: {
        firstPurchase: 0,
        repurchaseEarnings: 0,
        hignFans: 0,
        seaFans: 0,
        sbyd: 0,
        repurchaseTicket: 0,
        markerSpaceEarnings: 0,
      },
    };
  },
  onLoad(e) {
    this.openIndex = e.openIndex;
    let title = this.$t("ENU_MENU_50");
    switch (e.openIndex * 1) {
      case -1:
        title = this.$t("MN_F_49");
        break;
      case 0:
        title = this.$t("ENU_MENU_530");
        break;
      case 1:
        title = this.$t("ENU_MENU_560");
        break;
      case 2:
        title = this.$t("ENU_MENU_580");
        break;
    }
    uni.setNavigationBarTitle({
      title: title,
    });
    this.getMenu();
  },
  // onShow() {
  // 	if (this.openIndex == 0) {
  // 		this.getDetail('firstPurchase');
  // 		this.getDetail('repurchaseEarnings');
  // 		this.getDetail('hignFans');
  // 		this.getDetail('seaFans');
  // 		this.getDetail('sbyd');
  // 		this.getDetail('repurchaseTicket');
  // 		this.getDetail('markerSpaceEarnings');
  // 	}

  // },
  methods: {
    getDetail(e) {
      let url = "bonus/api/bonus/";
      let self = this;
      if (e == "firstPurchase") {
        url += "query-bonus-first";
      }
      if (e == "repurchaseEarnings") {
        url += "query-bonus-repurchase";
      }
      if (e == "hignFans") {
        url += "query-bonus-hi-fun";
      }
      if (e == "seaFans") {
        // url += 'bonus/query-hai-fun';
        return;
      }
      if (e == "sbyd") {
        url += "query-bonus-cloud";
      }
      if (e == "repurchaseTicket") {
        url += "query-bonus-coupon";
      }

      if (e == "markerSpaceEarnings") {
        url += "query-bonus-maker";
      }
      self._post(
        url,
        {
          pageNum: 1,
          pageSize: 1,
          endDate: "",
          startDate: "",
          gradeId: "",
        },
        (res) => {
          if (res.rows.length > 0) {
            this.realIncomeTotal[e] = res.rows[0].realIncomeTotal;
          } else {
            this.realIncomeTotal[e] = 0;
          }
        }
      );
    },
    hasMenu(key) {
      let self = this;
      let flag = false;
      self.listmenu.forEach((item, index) => {
        if (item.menuKey == key) {
          flag = true;
        }
      });
      return flag;
    },
    getMenu() {
      let self = this;
      self._get("system/api/menu/list", {}, (res) => {
        let list = [];
        let arr = res.data;
        arr.forEach((item, index) => {
          list.push(item);
        });
        self.listmenu = list;
        console.log(self.listmenu);
      });
    },
    rotate(e) {
      if (this.openIndex != e) {
        this.openIndex = e;
      } else {
        this.openIndex = -2;
      }
    },
  },
};
</script>

<style lang="scss">
.self-service-index {
  // display: flex;
  // justify-content: space-between;
  // align-items: flex-start;
  // flex-wrap: wrap;
  // padding: 28rpx 20rpx;
  padding: 0 22rpx;
  background: #ffffff;
}

.icon-close {
  transition: transform 0.6s ease;
}

.icon-close.active {
  transform: rotate(180deg);
}

.closemenu.self-service-item {
  height: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: none;
}

.self-service-item {
  flex-shrink: 0;
  padding: 22rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // width: 345rpx;
  min-height: 120rpx;
  box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  transition: all 0.3s ease;
  border-radius: 0rpx;
  // margin-bottom: 25rpx;
  border-bottom: 1rpx solid #eee;

  .self-service-name {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    word-break: break-all;
    // font-weight: bold;
  }

  .self-service-icon {
    width: 54rpx;
    height: 54rpx;
    display: block;
    flex-shrink: 0;
    margin-left: 20rpx;
  }
}
</style>