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="btns" v-if="!token">
                <view class="btn">
                  <trans _t="登录" />
                </view>
                <view class="btn is_plain">
                  <trans _t="注册" />
                </view>
              </view> -->
              <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>
            <view class="bg_right" @click="onEdit">
              <image src="../../static/user/edit.png" class="img"></image>
            </view>
          </view>
          <view class="bg_logo">{{ verConfig.appNames }}</view>
        </view>
        <view class="entry_container">
          <view class="entry_wrapper">
            <view
              class="entry_item"
              v-for="(item, index) in entryList"
              :key="index"
              @click="item.callback"
            >
              <view class="icons">
                <view class="icons_img">
                  <image
                    class="img"
                    :src="`../../static/user/${item.icon}.png`"
                  ></image>
                </view>
                <view class="entry_num" v-if="item.num > 0">{{
                  item.num
                }}</view>
              </view>
              <trans class="entry_text" :_t="item.text" />
            </view>
          </view>
        </view>
        <view class="content">
          <view class="menu_title">
            <trans _t="其他功能" />
          </view>
          <!-- <plaCard mode="horizontal" /> -->
          <view class="entry_container user_menu">
            <view class="entry_wrapper">
              <view
                class="entry_item"
                v-for="(item, index) in card"
                :key="index"
                @click="handleTo(item.url)"
              >
                <view class="icons">
                  <view class="icons_img">
                    <image
                      class="img"
                      :src="`../../static/user/${item.icon}.png`"
                    ></image>
                  </view>
                  <view class="entry_num" v-if="item.num > 0">{{
                    item.num
                  }}</view>
                </view>
                <trans class="entry_text" :_t="item.text" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="footer">
        <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="user" />
    <SimpleAgreementModal
      ref="agreementModal"
      :type="agreementType"
      @close="handleAgreementModalClose"
    />
  </Theme>
</template>

<script setup>
import Tabbar from "@/components/tabbar";
import Navbar from "@/components/navbar";
import SimpleAgreementModal from "@/components/simpleAgreementModal";
import plaCard from "@/components/placard";
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 verConfig from "@/ver.config";
import manifest from "@/manifest.json";
import { Modal, Toast } from "@/utils";
import { USER_ORDER_COUNT } from "@/api";

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

const useMessage = useMessageStore();
const { globalMap } = storeToRefs(useMessage);
const unreadCount = ref(0);
const customerUnreadCount = ref(0);
watch(
  () => globalMap.value.serviceChannel,
  (newVal, oldVal) => {
    if (newVal) {
      unreadCount.value = newVal.unreadCount;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
watch(
  () => globalMap.value.noticeChannel,
  (newVal, oldVal) => {
    if (newVal) {
      customerUnreadCount.value = newVal.unreadCount;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

const useShop = useShopStore();
const userInfo = computed(() => useUser.getuserInfo);
const token = computed(() => useUser.getToken);
// const cartNum = computed(() => useShop.getCartNum)
const statics = computed(() => useUser.getStatics);

const agreementType = ref("");

const entryList = ref([
  {
    icon: "allwet",
    text: "钱包",
    num: 0,
    callback: () => {
      uni.navigateTo({ url: "/pages/bank/wallet" });
    },
  },
  {
    icon: "storage",
    text: "我的订单",
    num: 0,
    callback: () => {
      uni.navigateTo({ url: "/pagesBuyer/order/index" });
    },
  },
  {
    icon: "payment",
    text: "待支付",
    num: 0,
    callback: () => {
      uni.navigateTo({ url: `/pagesBuyer/order/index?status=100` });
    },
  },
]);

const card = [
  {
    icon: "address",
    text: "我的地址",
    url: "/pages/address/index",
  },
  {
    icon: "invite",
    text: "邀请有礼",
    url: "/pages/user/invite",
  },
  {
    icon: "setting",
    text: "系统设置",
    url: "/pages/setting/index",
  },
  {
    icon: "enter",
    text: "商家入驻",
    url: "/pagesBuyer/profile/enter",
  },
];

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

const handleTo = (url) => {
  if (!url) return Toast(t("敬请期待"));
  if (url === "service") return useSystem.service();
  uni.navigateTo({ url });
};

const onEdit = () => {
  uni.navigateTo({ url: "/pages/user/edit_user" });
};

onMounted(() => {});
onLoad(() => {
  // useUser.getUserInfo();
});
onShow(() => {
  useUser.getUserInfo({}, { isLoading: true });
});

const handleAgreementModalClose = () => {
  agreementType.value = "";
};

// 切换用户类型
const switchUserType = () => {
  Modal({
    content: t("确定要切换到买家模式吗？切换后底部导航将显示买家功能"),
  }).then(() => {
    // 设置为买家类型
    useUser.setUserType(2);
    // 跳转到买家首页
    uni.reLaunch({
      url: "/pagesBuyer/home/index",
    });
  });
};
</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%;
          }

          .btns {
            .ver();
            margin-left: 24rpx;
            column-gap: 20rpx;

            .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;
            }

            .is_plain {
              background-color: var(--bg-primary);
              color: var(--primary);
            }
          }

          .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;
          }
        }
      }

      .info_wrapper {
        .flex();

        .info_item {
          flex: 1;
          .flex_center();
          flex-direction: column;
          color: var(--light);

          .item_num {
            .size();
            font-weight: 700;
            line-height: 60rpx;
          }

          .item_text {
            .size(24rpx);
            font-weight: 500;
            line-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;
      }
    }

    .entry_container {
      padding: 40rpx 24rpx;
      margin-top: -70px;
      position: relative;
      z-index: 2;

      .entry_wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 30rpx 10rpx;
        box-sizing: border-box;
        background-color: #fafafa;
        border-radius: 20rpx;
        // box-shadow: 0 2px 30px #0000000d;
        padding: 32rpx 0 24rpx;
        color: var(--text);

        .entry_item {
          width: calc(33.333% - 10rpx);
          // flex: 1;
          .flex_center();
          flex-direction: column;

          .icons {
            position: relative;

            .icons_img {
              width: 48rpx;
              height: 48rpx;

              .img {
                width: inherit;
                height: inherit;
              }
            }

            .entry_num {
              position: absolute;
              top: -8rpx;
              right: -10rpx;
              background-color: var(--danger);
              border: 1px solid var(--light);
              color: var(--light);
              width: 36rpx;
              height: 36rpx;
              border-radius: 50%;
              .size(18rpx);
              .flex_center();
            }
          }

          .entry_text {
            width: max-content;
            .size(28rpx);
            line-height: 44rpx;
            margin-top: 12rpx;
          }
        }
      }
    }

    .content {
      .menu_title {
        margin: 0 24rpx;
        font-weight: bold;
        color: var(--text);
        .size(28rpx);
      }

      .user_menu {
        margin-top: 0;
        .icons_img {
          width: 40rpx !important;
          height: 40rpx !important;
        }
      }
    }
  }

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

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

.exit_btn {
  // width: 80%;
  margin: 0 24rpx;
  margin-top: 24rpx;
  background-color: var(--black);
  color: var(--light);
  .size(28rpx);
  height: 84rpx;
  padding: 16rpx 30rpx;
  .flex_center();
  border-radius: 16rpx;
}
</style>