4D_uniapp_service/pages/account/promotion.vue

<template>
  <view class="content">
	  <uni-nav-bar :fixed="true" shadow left-icon="left" title="推广团队" :statusBar="true" @clickLeft="handleToBack" />
    <view style="display: flex; justify-content: space-between; padding: 40upx">
      <view style="display: flex">
        <view style="margin-right: 41upx">
          <image
            class="card_thumbnail"
            :src="userData?.js?.avatar || '/static/account/avatar.png'"
            mode="aspectFill"
            style="width: 130upx; height: 130upx"
          />
        </view>
        <view
          style="display: flex; flex-direction: column; justify-content: center"
        >
          <view style="font-size: 40upx; font-weight: bold; color: #000000">{{
            userData?.js?.name
          }}</view>

          <view
            style="
              font-size: 26upx;
              font-weight: 400;
              color: #999;
              margin: 24upx 0 0;
            "
          >
            {{ userData?.mobile }}
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <view
        style="
          width: 710upx;
          height: 80upx;
          background: linear-gradient(90deg, #37ecba 0%, #72afd3 100%);
          border-radius: 20upx 20upx 0px 0px;
          padding-top: 20upx;
        "
      >
        <uni-segmented-control
          :current="current"
          :values="items"
          style-type="text"
          active-color="#FFFFFF"
          @clickItem="onClickItem"
        />
      </view>

      <view>
        <view v-if="current === 0">
          <uni-list :border="true">
            <!-- 显示圆形头像 -->
            <uni-list-chat
              v-for="(item, index) in promotionData[current]"
              :key="index"
              :avatar-circle="true"
              :title="`${item?.user_nickname || item?.mobile}(${item?.mobile})`"
              :avatar="item?.avatar || '/static/account/avatar.png'"
              :note="verifyTime(item?.create_time)"
              time=" "
            >
              <view class="chat-custom-right">
                <text class="chat-custom-text">直接好友</text>
              </view>
            </uni-list-chat>
          </uni-list>
        </view>
        <view v-if="current === 1">
          <uni-list :border="true">
            <!-- 显示圆形头像 -->
            <uni-list-chat
              v-for="(item, index) in promotionData[current]"
              :key="index"
              :avatar-circle="true"
              :title="`${item?.user_nickname || item?.mobile}(${item?.mobile})`"
              :avatar="item?.avatar || '/static/account/avatar.png'"
              :note="verifyTime(item?.create_time)"
              time=" "
            >
              <view class="chat-custom-right">
                <text class="chat-custom-text">间接好友</text>
              </view>
            </uni-list-chat>
          </uni-list>
        </view>
      </view>
    </view>

    <view class="loading_wrap" v-if="loading && params.page > 1">
      <uni-load-more status="loading"></uni-load-more>
    </view>

    <view class="footer">
      <image mode="widthFix" src="/static/common/footer.png" />
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import request from "/common/request.js";
import auth from "/common/auth.js";

const statusBarHeight = ref();
const userData = ref();
const current = ref(0);
const items = ["直接好友", "间接好友"];
const params = reactive({
  page: 1,
  type: 1,
});
const promotionData = ref([]);
const stopReachBottom = ref(false);
const loading = ref(false);

const handleToBack = () => {
	const canNavBack = getCurrentPages();
	if (canNavBack && canNavBack.length > 1) uni.navigateBack();
	else history.back();
};
onLoad((option) => {
  statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
  initData();
});

onShow(() => {
  renderData();
  uni.$emit('fastOrderNum', false);
  uni.$emit('receiveOrdernum', false);
});

onReachBottom((option) => {
  if (stopReachBottom.value) return;
  getPromotionData(true);
});

async function initData() {
  if (auth(false)) {
    uni.pageScrollTo({ scrollTop: 0, duration: 0 });
  }
}

async function renderData() {
  if (auth()) {
    uni.pageScrollTo({ scrollTop: 0, duration: 0 });
    getUserInfo();
    getPromotionData();
  }
}

const getUserInfo = () => {
  uni.showLoading();
  request({
    url: "/api/user/getInfo",
    method: "GET",
    success: (res) => {
      console.log("客户信息", res);
      if (res.data.code == 1) {
        userData.value = res.data?.data ?? {};
      } else if (res.data.code == 10001) {
        uni.removeStorageSync("token");
        uni.removeStorageSync("id");
        uni.showToast({
          title: "登录已失效，请重新登录",
          duration: 2000,
          icon: "none",
          success: () => {
            uni.navigateTo({
              url: "/pages/account/login",
            });
          },
        });
      }
    },
    fail: () => {},
    complete: () => {
      uni.hideLoading();
      uni.stopPullDownRefresh();
    },
  });
};

const onClickItem = (e) => {
  if (current.value != e.currentIndex) {
    current.value = e.currentIndex;
    params.type = e.currentIndex + 1;
    getPromotionData();
  }
};

const getPromotionData = (next = false) => {
  if (loading.value) return;
  if (next) {
    params.page++;
  } else {
    params.page = 1;
    stopReachBottom.value = false;
    uni.showLoading();
  }
  loading.value = true;
  request({
    url: "/api/user/getxiaji",
    method: "GET",
    data: params,
    success: (res) => {
      console.log("好友", res);
      if (res.data?.code == 1) {
        promotionData.value[current.value] = res.data?.data;

        if (!res.data?.data || !res.data?.data?.length) {
          // if (params.page == 1) locationMessage.value = "暂无订单哦！";

          stopReachBottom.value = true;
          params.page--;
        }
        if (next) promotionData.value[current.value].push(...res.data?.data);
        else promotionData.value[current.value] = res.data?.data ?? [];
      }
    },
    fail: () => {},
    complete: () => {
      loading.value = false;
      uni.hideLoading();
    },
  });
};

const verifyTime = (timestamp) => {
  if (!timestamp) return "";
  // 此处时间戳以毫秒为单位
  let date = new Date(parseInt(timestamp) * 1000);
  let Year = date.getFullYear();
  let Moth =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  let Minute =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  // let Sechond =
  //   date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  let GMT = Year + "-" + Moth + "-" + Day + "   " + Hour + ":" + Minute;
  return GMT;
};
</script>

<style lang="scss" scoped>
.content {
  :deep(.segmented-control) {
    height: initial;
    width: 600upx;
    .segmented-control__text {
      opacity: 0.8;
      font-size: 29upx;
      font-weight: 400;
      color: #ffffff !important;
      &::after {
        content: "";
        width: 40upx;
        height: 4upx;
        background: transparent;
        border-radius: 2upx;
        display: block;
        margin: 6upx auto;
      }
      &.segmented-control__item--text {
        opacity: 1;
        font-weight: bold;
        font-size: 32upx;
        border: 0;
        &::after {
          background: #ffffff;
        }
      }
    }
  }
  :deep(.uni-list-chat) {
    .uni-list-chat__container {
      padding: 30upx;
      .uni-list-chat__content-extra {
        justify-content: center;
        font-size: 24upx;
        font-weight: 400;
        color: #ff490e;
      }
    }
  }
}
</style>