177 lines
3.2 KiB
Vue
177 lines
3.2 KiB
Vue
<template>
|
|
<view class="mine-container">
|
|
|
|
<Header :show-return="false">我的</Header>
|
|
<!-- user info -->
|
|
<view class="userinfo-box">
|
|
<!-- 未登录 -->
|
|
<view
|
|
class="userinfo-box__inner no-login"
|
|
v-if="!(user && user.id)"
|
|
@click="toLogin"
|
|
>
|
|
<image
|
|
class="head"
|
|
src="https://b2c-pro-static-dev.zkthink.com/static/icon/user/mine.png"
|
|
/>
|
|
<view class="user-info">
|
|
点击登录
|
|
</view>
|
|
</view>
|
|
<!-- 已登录 -->
|
|
<view
|
|
class="userinfo-box__inner"
|
|
@click="toUserCenter"
|
|
v-else
|
|
>
|
|
<image
|
|
class="head"
|
|
:src="user.avatar"
|
|
/>
|
|
<view class="user-info">
|
|
{{ user.nickname }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- order card -->
|
|
<GridCard
|
|
:list="orderIconList"
|
|
:dot-info="orderUserCountData"
|
|
title="我的订单"
|
|
button-text="查看所有订单"
|
|
@button-click="toAllOrder"
|
|
></GridCard>
|
|
|
|
<!-- footprint card -->
|
|
<GridCard
|
|
:list="cardOneList"
|
|
:dot-info="orderUserCountData"
|
|
></GridCard>
|
|
|
|
<GridCard
|
|
:list="cardTwoList"
|
|
:dot-info="orderUserCountData"
|
|
></GridCard>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import Header from '@/components/Header/index.vue'
|
|
|
|
import { orderUserCount } from '@/api/order'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import { useMainStore } from '@/store/store'
|
|
import { useRouter } from "@/hooks/useRouter";
|
|
import { storeToRefs } from "pinia";
|
|
import GridCard from "@/pages/user/components/GridCard.vue";
|
|
import { cardOneList, cardTwoList, orderIconList } from "@/pages/user/index.data";
|
|
|
|
const mainStore = useMainStore()
|
|
const {user} = storeToRefs(mainStore);
|
|
const {push} = useRouter()
|
|
const orderUserCountData = ref(null)
|
|
|
|
function toAllOrder() {
|
|
push({url: '/pages/orderList/orderList'}, {data: {type: -1}})
|
|
}
|
|
|
|
function toUserCenter() {
|
|
push({url: '/pages/userInfo/index'})
|
|
}
|
|
|
|
function toLogin() {
|
|
push({url: '/pages/login/guid'})
|
|
}
|
|
|
|
const handleOrderUserCount = async () => {
|
|
orderUserCountData.value = await orderUserCount()
|
|
}
|
|
|
|
|
|
onShow(() => {
|
|
mainStore.getUserInfo()
|
|
handleOrderUserCount()
|
|
|
|
if (user && user.id) {
|
|
}
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
scoped
|
|
>
|
|
.mine-container {
|
|
@include usePadding(40, 0);
|
|
|
|
.userinfo-box {
|
|
width: 100%;
|
|
}
|
|
|
|
.userinfo-box {
|
|
margin: 50rpx 0;
|
|
|
|
&__inner {
|
|
@include useFlex(space start, center);
|
|
|
|
.head {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-info {
|
|
@include useFlex(space start, center);
|
|
padding-left: 30rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
&.no-login {
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//.user-card {
|
|
// padding: 50rpx 0;
|
|
//
|
|
// button {
|
|
// border: 0;
|
|
// background: none;
|
|
//
|
|
// &:after {
|
|
// display: none;
|
|
// }
|
|
// }
|
|
//}
|
|
//
|
|
//.avatar-box {
|
|
// display: flex;
|
|
// align-items: center;
|
|
//
|
|
// .avatar {
|
|
// width: 120rpx;
|
|
// height: 120rpx;
|
|
// background: #FFFFFF;
|
|
// border-radius: 50%;
|
|
// opacity: 1;
|
|
// margin: 0 30rpx;
|
|
// }
|
|
//
|
|
// .avatar-name {
|
|
// font-size: 34rpx;
|
|
// color: #333333;
|
|
// }
|
|
//}
|
|
</style>
|