VAVABUY/pagesBuyer/profile/index.vue

<template>
  <Theme>
    <view class="wrap">
      <view class="cont">
        <Navbar bgColor="transparent" fixed height="0px" leftShow />
        <view class="cont_bg">
          <view class="bg_top">
            <view class="top_left">
              <image
                :src="userInfo.userimg"
                mode="widthFix"
                class="userInfo_avatar"
              >
              </image>
              <view class="userInfo_" v-if="token">
                <view class="user_name"> {{ userInfo.username }}</view>
                <view class="user_id">
                  <trans _t="ID" />: {{ userInfo.newid }}
                </view>
              </view>
              <view class="login_btn" v-else @click="toLogin">
                <trans _t="点击登录" />
              </view>
            </view>
            <view class="bg_right" @click="onEdit" v-if="token">
              <image src="../../static/user/edit.png" class="img"></image>
            </view>
          </view>
          <view class="bg_logo">买家中心</view>
        </view>

        <!-- 订单状态 -->
        <view class="order_status" v-if="token">
          <view class="order_title">
            <trans _t="我的订单" />
            <view class="more_btn" @click="toOrderList">
              <trans _t="查看全部" />
              <i class="icon-font icon-arrow-right"></i>
            </view>
          </view>
          <view class="order_items">
            <view
              class="order_item"
              v-for="(item, index) in orderStatusList"
              :key="index"
              @click="toOrderList(item.status)"
            >
              <view class="order_icon">
                <image :src="item.icon" class="icon" />
                <view class="badge" v-if="item.count > 0">{{
                  item.count
                }}</view>
              </view>
              <text class="order_text">{{ t(item.text) }}</text>
            </view>
          </view>
        </view>

        <!-- 功能菜单 -->
        <view class="menu_section">
          <view class="menu_title">
            <trans _t="我的服务" />
          </view>
          <view class="menu_list">
            <view
              class="menu_item"
              v-for="(item, index) in menuList"
              :key="index"
              @click="handleMenuClick(item)"
            >
              <view class="menu_icon">
                <image :src="item.icon" class="icon" />
                <view class="badge" v-if="item.badge">{{ item.badge }}</view>
              </view>
              <text class="menu_text">{{ t(item.text) }}</text>
              <i class="icon-font icon-arrow-right menu_arrow"></i>
            </view>
          </view>
        </view>

        <!-- 其他功能 -->
        <view class="other_section">
          <view class="menu_title">
            <trans _t="其他功能" />
          </view>
          <view class="menu_list">
            <view
              class="menu_item"
              v-for="(item, index) in otherMenuList"
              :key="index"
              @click="handleMenuClick(item)"
            >
              <view class="menu_icon">
                <image :src="item.icon" class="icon" />
              </view>
              <text class="menu_text">{{ t(item.text) }}</text>
              <i class="icon-font icon-arrow-right menu_arrow"></i>
            </view>
          </view>
        </view>
      </view>

      <view class="footer" v-if="token">
        <view class="switch_user_type" @click="switchUserType">
          <trans _t="切换到卖家模式" />
        </view>
        <view class="exit_btn" @click="exit">
          <trans _t="退出登录" />
        </view>
        <view class="version">v {{ manifest.versionName }}</view>
      </view>
    </view>
    <Tabbar page="profile" />
  </Theme>
</template>

<script setup>
import Tabbar from "@/components/tabbar";
import Navbar from "@/components/navbar";
import { computed, watch, ref, reactive, onMounted, nextTick } from "vue";
import { storeToRefs } from "pinia";
import {
  useUserStore,
  useTabbarStore,
  useShopStore,
  useSystemStore,
  useMessageStore,
} from "@/store";
import { t } from "@/locale";
import { onShow, onLoad } from "@dcloudio/uni-app";
import manifest from "@/manifest.json";
import { Modal, Toast } from "@/utils";

const useUser = useUserStore();
const useTabbar = useTabbarStore();
const useSystem = useSystemStore();
const useShop = useShopStore();

const useMessage = useMessageStore();
const { globalMap } = storeToRefs(useMessage);
const unreadCount = ref(0);

watch(
  () => globalMap.value.serviceChannel,
  (newVal, oldVal) => {
    if (newVal) {
      unreadCount.value = newVal.unreadCount;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

const userInfo = computed(() => useUser.getuserInfo);
const token = computed(() => useUser.getToken);

// 订单状态列表
const orderStatusList = ref([
  {
    icon: "/static/user/payment.png",
    text: "待支付",
    status: "waitPay",
    count: 0,
  },
  {
    icon: "/static/user/shipping.png",
    text: "待发货",
    status: "waitShipping",
    count: 0,
  },
  {
    icon: "/static/user/receive.png",
    text: "待收货",
    status: "waitReceive",
    count: 0,
  },
  {
    icon: "/static/user/comment.png",
    text: "待评价",
    status: "waitComment",
    count: 0,
  },
  {
    icon: "/static/user/refund.png",
    text: "退款/售后",
    status: "refund",
    count: 0,
  },
]);

// 功能菜单列表
const menuList = ref([
  {
    icon: "/static/user/wallet.png",
    text: "我的钱包",
    url: "/pagesBuyer/profile/wallet",
  },
  {
    icon: "/static/user/coupon.png",
    text: "优惠券",
    url: "/pagesBuyer/profile/coupon",
    badge: "3",
  },
  {
    icon: "/static/user/favorite.png",
    text: "我的收藏",
    url: "/pagesBuyer/profile/favorite",
  },
  {
    icon: "/static/user/footprint.png",
    text: "浏览历史",
    url: "/pagesBuyer/profile/footprint",
  },
  {
    icon: "/static/user/address.png",
    text: "收货地址",
    url: "/pagesBuyer/profile/address",
  },
  {
    icon: "/static/user/invite.png",
    text: "邀请好友",
    url: "/pagesBuyer/profile/invite",
  },
]);

// 其他功能菜单
const otherMenuList = ref([
  {
    icon: "/static/user/setting.png",
    text: "设置",
    url: "/pagesBuyer/profile/setting",
  },
  {
    icon: "/static/user/help.png",
    text: "帮助中心",
    url: "/pagesBuyer/profile/help",
  },
  {
    icon: "/static/user/feedback.png",
    text: "意见反馈",
    url: "/pagesBuyer/profile/feedback",
  },
  {
    icon: "/static/user/about.png",
    text: "关于我们",
    url: "/pagesBuyer/profile/about",
  },
]);

// 退出登录
const exit = () => {
  Modal({ content: t("确定要退出登录吗") }).then(async () => {
    useUser.loginOut();
  });
};

// 去登录
const toLogin = () => {
  uni.navigateTo({
    url: "/pages/login/login",
  });
};

// 编辑用户信息
const onEdit = () => {
  uni.navigateTo({ url: "/pagesBuyer/profile/edit" });
};

// 查看订单列表
const toOrderList = (status) => {
  uni.navigateTo({
    url: `/pagesBuyer/profile/orders?status=${status || ""}`,
  });
};

// 处理菜单点击
const handleMenuClick = (item) => {
  if (!item.url) {
    Toast(t("功能开发中"));
    return;
  }

  if (item.url === "service") {
    useSystem.service();
    return;
  }

  uni.navigateTo({ url: item.url });
};

// 获取订单数量
const getOrderCount = async () => {
  if (!token.value) return;

  try {
    // 这里应该调用实际的API获取订单数量
    // const res = await USER_ORDER_COUNT();
    // orderStatusList.value[0].count = res.data.waitPay || 0;
    // orderStatusList.value[1].count = res.data.waitShipping || 0;
    // orderStatusList.value[2].count = res.data.waitReceive || 0;
    // orderStatusList.value[3].count = res.data.waitComment || 0;
    // orderStatusList.value[4].count = res.data.refund || 0;
  } catch (error) {
    Toast(error.msg);
  }
};

// 切换用户类型
const switchUserType = () => {
  Modal({
    content: t("确定要切换到卖家模式吗？切换后底部导航将显示卖家功能"),
  }).then(() => {
    // 设置为卖家类型
    useUser.setUserType(1);
    // 跳转到卖家首页
    uni.reLaunch({
      url: "/pages/index/index",
    });
  });
};

onMounted(() => {
  getOrderCount();
});

onLoad(() => {
  // useUser.getUserInfo();
});

onShow(() => {
  if (token.value) {
    useUser.getUserInfo({}, { isLoading: true });
    getOrderCount();
  }
});

uni.hideTabBar();
</script>

<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: calc(90rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
  .flex();
  flex-direction: column;
  justify-content: space-between;

  .cont {
    padding-bottom: 24rpx;
    flex-grow: 1;

    &_bg {
      background: var(--black);
      border-radius: 0 0 20rpx 20rpx;
      position: relative;

      .bg_top {
        .flex_position(space-between);
        padding: 40rpx 40rpx 140rpx;
        position: relative;
        z-index: 1;

        .top_left {
          .flex();

          .userInfo_avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
          }

          .login_btn {
            .flex_center();
            background-color: var(--primary);
            border: 2px solid var(--bg-primary);
            border-radius: 30rpx;
            color: var(--light);
            padding: 8rpx 30rpx;
            .size(28rpx);
            font-weight: 700;
            margin-left: 24rpx;
          }

          .userInfo_ {
            .hor();
            flex-direction: column;
            margin-left: 24rpx;
            color: var(--light);

            .user_name {
              .size();
              font-weight: 700;
              line-height: 44rpx;
            }

            .user_id {
              .size(24rpx);
              line-height: 40rpx;
            }
          }
        }

        .bg_right {
          .img {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }

      .bg_logo {
        position: absolute;
        .size(128rpx);
        color: var(--inputBg);
        opacity: 0.06;
        top: 0;
        left: 50%;
        font-weight: bold;
        transform: translateX(-50%);
        line-height: 128rpx;
        text-transform: uppercase;
        font-family: "HarmonyOS_Sans";
        white-space: nowrap;
      }
    }

    .order_status {
      margin: -70rpx 24rpx 32rpx;
      position: relative;
      z-index: 2;
      background: var(--light);
      border-radius: 20rpx;
      padding: 32rpx 24rpx;

      .order_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        font-weight: bold;
        color: var(--black);
        margin-bottom: 24rpx;

        .more_btn {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: var(--text-01);

          .icon-arrow-right {
            margin-left: 8rpx;
            font-size: 20rpx;
          }
        }
      }

      .order_items {
        display: flex;
        justify-content: space-around;

        .order_item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .order_icon {
            position: relative;
            margin-bottom: 12rpx;

            .icon {
              width: 48rpx;
              height: 48rpx;
            }

            .badge {
              position: absolute;
              top: -8rpx;
              right: -8rpx;
              background: var(--danger);
              color: var(--light);
              font-size: 20rpx;
              padding: 4rpx 8rpx;
              border-radius: 20rpx;
              min-width: 32rpx;
              text-align: center;
              line-height: 1;
            }
          }

          .order_text {
            font-size: 24rpx;
            color: var(--text);
          }
        }
      }
    }

    .menu_section,
    .other_section {
      margin: 0 24rpx 32rpx;

      .menu_title {
        font-size: 32rpx;
        font-weight: bold;
        color: var(--black);
        margin-bottom: 24rpx;
      }

      .menu_list {
        background: var(--light);
        border-radius: 20rpx;
        overflow: hidden;

        .menu_item {
          display: flex;
          align-items: center;
          padding: 32rpx 24rpx;
          border-bottom: 1rpx solid var(--border-color);

          &:last-child {
            border-bottom: none;
          }

          .menu_icon {
            position: relative;
            margin-right: 24rpx;

            .icon {
              width: 40rpx;
              height: 40rpx;
            }

            .badge {
              position: absolute;
              top: -8rpx;
              right: -8rpx;
              background: var(--danger);
              color: var(--light);
              font-size: 20rpx;
              padding: 4rpx 8rpx;
              border-radius: 20rpx;
              min-width: 32rpx;
              text-align: center;
              line-height: 1;
            }
          }

          .menu_text {
            flex: 1;
            font-size: 28rpx;
            color: var(--black);
          }

          .menu_arrow {
            font-size: 24rpx;
            color: var(--text-01);
          }
        }
      }
    }
  }

  .footer {
    padding: 0 24rpx;

    .switch_user_type {
      background-color: var(--primary);
      color: var(--light);
      .size(28rpx);
      height: 84rpx;
      padding: 16rpx 30rpx;
      .flex_center();
      border-radius: 16rpx;
      margin-bottom: 16rpx;
    }

    .exit_btn {
      background-color: var(--black);
      color: var(--light);
      .size(28rpx);
      height: 84rpx;
      padding: 16rpx 30rpx;
      .flex_center();
      border-radius: 16rpx;
      margin-bottom: 24rpx;
    }

    .version {
      text-align: center;
      color: var(--black);
      .size(24rpx);
      padding: 24rpx 0;
    }
  }
}
</style>