404 lines
8.4 KiB
Vue
404 lines
8.4 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="header-container">
|
|
<view class="title">我的</view>
|
|
</view>
|
|
|
|
<view class="main-container">
|
|
<!-- 用户信息区域 -->
|
|
<view class="user-info-section login-section" v-if="userInfo"
|
|
@click="navigateTo('/pages/me/account-info');">
|
|
<view class="avatar">
|
|
<image :src="userInfo.userIcon" mode="aspectFill"
|
|
style="width: 80.15rpx;height: 80.15rpx;border-radius: 10rpx;"></image>
|
|
</view>
|
|
<view class="login-content">
|
|
<view class="user-id">{{ userInfo.username }}</view>
|
|
<view class="user-days">已陪你走过了{{ userInfo.days }}天</view>
|
|
</view>
|
|
<view class="login-arrow">
|
|
<image src="/static/ic_arrow.png" class="arrow-icon"></image>
|
|
</view>
|
|
</view>
|
|
<view class="user-info-section login-section" v-else @click="navigateToAccountLogin();">
|
|
<view class="avatar">
|
|
<view class="default-avatar"></view>
|
|
</view>
|
|
<view class="login-content">
|
|
<view class="user-id login-text">点击登录</view>
|
|
<view class="user-days login-tip">登录后体验更多功能</view>
|
|
</view>
|
|
<view class="login-arrow">
|
|
<image src="/static/ic_arrow.png" class="arrow-icon"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 订单状态区域 -->
|
|
<view class="order-status-section">
|
|
<view class="status-item" @click="order_goto(1);">
|
|
<text class="status-count">{{ orderStatistics.waiting_ship_count }}</text>
|
|
<text class="status-label">待发货</text>
|
|
</view>
|
|
<view class="status-item" @click="order_goto(2);">
|
|
<text class="status-count">{{ orderStatistics.waiting_receive_count }}</text>
|
|
<text class="status-label">待收货</text>
|
|
</view>
|
|
<view class="status-item" @click="order_goto(3);">
|
|
<text class="status-count">{{ orderStatistics.received_count }}</text>
|
|
<text class="status-label">已收货</text>
|
|
</view>
|
|
<view class="status-item" @click="order_goto(4);">
|
|
<text class="status-count">{{ orderStatistics.after_sales_count }}</text>
|
|
<text class="status-label">申请售后</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能列表区域 -->
|
|
<view class="function-list-section">
|
|
<view v-for="item in itemList" :key="item.id" class="function-item"
|
|
@click="item.onClick ? item.onClick(item) : null">
|
|
<text class="function-title">{{ item.title }}</text>
|
|
<image src="/static/ic_arrow.png" class="arrow-icon"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<page-popup ref="_pagePopup" />
|
|
<page-kefu ref="page_kefu_show" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getUserInfo } from '@/common/server/user';
|
|
import { get_order_statistics } from '@/common/server/order';
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import { navigateTo, navigateToAccountLogin } from '@/common/system/router';
|
|
let _pagePopup = ref(null);
|
|
const itemList = ref([
|
|
|
|
]);
|
|
let orderStatistics = reactive({
|
|
"waiting_ship_count": 0,
|
|
"waiting_receive_count": 0,
|
|
"received_count": 0,
|
|
"after_sales_count": 0
|
|
});
|
|
let page_kefu_show = ref(null);
|
|
let userInfo = ref(null);
|
|
|
|
onShow(async () => {
|
|
yds.showLoading();
|
|
const res = await getUserInfo();
|
|
console.log("res", res);
|
|
userInfo.value = res;
|
|
loadMenu();
|
|
await loadOrderStatistics();
|
|
yds.hideLoading();
|
|
|
|
});
|
|
const order_goto = (type) => {
|
|
if (!yds.userInfo.IsUserLogin()) {
|
|
return;
|
|
}
|
|
navigateTo(`/pages/mall/order-list?type=${type}`);
|
|
}
|
|
const loadOrderStatistics = async () => {
|
|
const res = await get_order_statistics();
|
|
console.log("res", res);
|
|
if (res != null) {
|
|
orderStatistics.waiting_ship_count = res.waiting_ship_count;
|
|
orderStatistics.waiting_receive_count = res.waiting_receive_count;
|
|
orderStatistics.received_count = res.received_count;
|
|
orderStatistics.after_sales_count = res.after_sales_count;
|
|
} else {
|
|
orderStatistics.waiting_ship_count = 0;
|
|
orderStatistics.waiting_receive_count = 0;
|
|
orderStatistics.received_count = 0;
|
|
orderStatistics.after_sales_count = 0;
|
|
}
|
|
}
|
|
const loadMenu = async () => {
|
|
const menuList = [
|
|
{
|
|
id: 1,
|
|
title: "消费记录",
|
|
onClick: (res) => {
|
|
if (!yds.userInfo.IsUserLogin()) {
|
|
return;
|
|
}
|
|
navigateTo("/pages/mall/order-list");
|
|
}
|
|
}, {
|
|
id: 2,
|
|
title: "我的收藏",
|
|
onClick: (res) => {
|
|
if (!yds.userInfo.IsUserLogin()) {
|
|
return;
|
|
}
|
|
navigateTo("/pages/mall/collect");
|
|
}
|
|
}, {
|
|
id: 3,
|
|
title: "优惠券",
|
|
onClick: (res) => {
|
|
if (!yds.userInfo.IsUserLogin()) {
|
|
return;
|
|
}
|
|
navigateTo("/pages/other/coupon");
|
|
}
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "收货地址管理",
|
|
onClick: (res) => {
|
|
if (!yds.userInfo.IsUserLogin()) {
|
|
return;
|
|
}
|
|
navigateTo("/pages/address/address-list");
|
|
}
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "用户协议",
|
|
onClick: (res) => {
|
|
yds.navigateToAgreement("user");
|
|
}
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "隐私政策",
|
|
onClick: (res) => {
|
|
yds.navigateToAgreement("privacy");
|
|
}
|
|
},
|
|
{
|
|
id: 9,
|
|
title: "在线客服",
|
|
onClick: (res) => {
|
|
page_kefu_show.value.open();
|
|
}
|
|
},
|
|
];
|
|
if (yds.userInfo.isAccountLogin()) {
|
|
menuList.push({
|
|
id: 7,
|
|
title: "退出登录",
|
|
onClick: async (res) => {
|
|
const { confirm } = await _pagePopup.value.showModal('退出登录', '确定退出登录吗？');
|
|
if (confirm) {
|
|
yds.userInfo.logout();
|
|
userInfo.value = null;
|
|
loadMenu();
|
|
navigateTo("/pages/me/account-login");
|
|
}
|
|
}
|
|
}, {
|
|
id: 8,
|
|
title: "注销账号",
|
|
onClick: (res) => {
|
|
navigateTo("/pages/me/account-deletion");
|
|
}
|
|
});
|
|
}
|
|
itemList.value = menuList;
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #F7F7F7;
|
|
}
|
|
|
|
.header-container {
|
|
width: 100%;
|
|
height: 225.19rpx;
|
|
background-color: white;
|
|
position: relative;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 32.44rpx;
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
}
|
|
|
|
.main-container {
|
|
width: 688.93rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 34rpx auto;
|
|
}
|
|
|
|
// 用户信息区域样式
|
|
.user-info-section {
|
|
width: 95%;
|
|
height: auto;
|
|
min-height: 80.15rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.login-section {
|
|
position: relative;
|
|
padding: 20rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 15.27rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
height: auto;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.login-section:active {
|
|
background-color: #F5F7FF;
|
|
}
|
|
|
|
.login-content {
|
|
margin-left: 23rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.avatar {
|
|
width: 80.15rpx;
|
|
height: 80.15rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #D8D8D8;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.user-id {
|
|
font-size: 22.9rpx;
|
|
color: #333333;
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.user-days {
|
|
font-size: 19.08rpx;
|
|
color: #8A8A8A;
|
|
margin-top: 5rpx;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.login-text {
|
|
font-weight: bold;
|
|
color: #4A6FEA;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.login-tip {
|
|
font-size: 19.08rpx;
|
|
color: #8A8A8A;
|
|
}
|
|
|
|
.login-arrow {
|
|
position: absolute;
|
|
right: 25rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.arrow-icon {
|
|
width: 10.67rpx;
|
|
height: 19.66rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
|
|
.default-avatar {
|
|
width: 80.15rpx;
|
|
height: 80.15rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #EAEAEA;
|
|
position: relative;
|
|
}
|
|
|
|
.default-avatar::before,
|
|
.default-avatar::after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: #BBBBBB;
|
|
}
|
|
|
|
.default-avatar::before {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
top: 15rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.default-avatar::after {
|
|
width: 50rpx;
|
|
height: 25rpx;
|
|
border-radius: 50% 50% 0 0;
|
|
bottom: 10rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
// 订单状态区域样式
|
|
.order-status-section {
|
|
width: 100%;
|
|
height: 143.13rpx;
|
|
background-color: white;
|
|
border-radius: 15.27rpx;
|
|
margin-top: 36rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100rpx;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.status-count {
|
|
font-size: 41.98rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.status-label {
|
|
font-size: 19.08rpx;
|
|
color: #8A8A8A;
|
|
}
|
|
|
|
// 功能列表区域样式
|
|
.function-list-section {
|
|
width: 100%;
|
|
margin-top: 36rpx;
|
|
}
|
|
|
|
.function-item {
|
|
width: 100%;
|
|
height: 82.06rpx;
|
|
background-color: white;
|
|
border-radius: 15.27rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 15rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.function-title {
|
|
margin-left: 27rpx;
|
|
font-size: 22.9rpx;
|
|
color: #333333;
|
|
}
|
|
</style> |