feat: 调整了目录结构
This commit is contained in:
118
src/pages/DrawerSection/components/MineSetting/index.vue
Normal file
118
src/pages/DrawerSection/components/MineSetting/index.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 顶部用户信息 -->
|
||||
<view class="user-card">
|
||||
<view class="row avatar-row">
|
||||
<text class="label">头像 </text>
|
||||
<!-- <image class="avatar" :src="userInfo.avatar" mode="aspectFill" /> -->
|
||||
<uni-icons type="contact" size="40" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">昵称</text>
|
||||
<text class="value">{{ userInfo.nickname }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">手机号</text>
|
||||
<text class="value">{{ userInfo.phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 中间功能入口（循环渲染） -->
|
||||
<view class="menu-card">
|
||||
<view
|
||||
class="menu-item"
|
||||
v-for="(item, index) in menuList"
|
||||
:key="index"
|
||||
@click="handleMenuClick(item)"
|
||||
>
|
||||
<text class="label">{{ item.label }}</text>
|
||||
<uni-icons type="right" size="14" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部退出按钮 -->
|
||||
<text class="logout-btn" @click="handleLogout">退出登录</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineEmits, defineExpose } from "vue";
|
||||
import { getLoginUserPhone } from "@/request/api/LoginApi";
|
||||
import { NOTICE_EVENT_LOGOUT } from "@/constant/constant";
|
||||
import { useAppStore } from "@/store";
|
||||
|
||||
const appStore = useAppStore();
|
||||
const emits = defineEmits(["close"]);
|
||||
|
||||
// 假数据
|
||||
const userInfo = ref({
|
||||
avatar: "/static/default-avatar.png",
|
||||
nickname: "微信用户",
|
||||
phone: "",
|
||||
});
|
||||
|
||||
// 功能菜单列表（带 type 区分操作类型）
|
||||
const menuList = ref([
|
||||
// { label: '修改手机号', type: 'navigate', url: '/pages/change-phone/change-phone' },
|
||||
{
|
||||
label: "账号注销",
|
||||
type: "action",
|
||||
url: "cancelAccount",
|
||||
},
|
||||
// { label: '营业资质&协议', type: 'navigate', url: '/pages/agreement/agreement' },
|
||||
// { label: "联系客服", type: "action", action: "contactService" },
|
||||
// { label: "订阅消息", type: "action", action: "subscribeMessage" },
|
||||
]);
|
||||
|
||||
const getLoginUserPhoneInfo = async () => {
|
||||
const res = await getLoginUserPhone();
|
||||
|
||||
if (res.code === 0) {
|
||||
userInfo.value.phone = res.data;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理菜单点击
|
||||
const handleMenuClick = (item) => {
|
||||
if (item.type === "navigate" && item.url) {
|
||||
uni.navigateTo({ url: item.url });
|
||||
} else if (item.type === "action") {
|
||||
if (item.action === "contactService") {
|
||||
uni.showToast({ title: "联系客服功能待实现", icon: "none" });
|
||||
} else if (item.action === "cancelAccount") {
|
||||
handleLogout();
|
||||
} else if (item.action === "subscribeMessage") {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ["fMIt1q9GgM3Ep0DJSNgVPm4C3lCpQdz2TediETcv3iM"],
|
||||
success(res) {
|
||||
console.log(res);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
uni.showModal({
|
||||
title: "温馨提示",
|
||||
content: "确定要退出登录吗？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.clearStorageSync();
|
||||
emits("close");
|
||||
uni.$emit(NOTICE_EVENT_LOGOUT);
|
||||
uni.showToast({
|
||||
title: "退出登录成功",
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ getLoginUserPhoneInfo });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
.page {
|
||||
padding: 24rpx;
|
||||
background-color: #f6f6f6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.user-card,
|
||||
.menu-card {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding-left: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 28rpx 24rpx 28rpx 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.avatar-row .avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 28rpx 24rpx 28rpx 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 42px;
|
||||
margin-top: 40px;
|
||||
background-color: #fff;
|
||||
color: $uni-text-color;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
}
|
||||
47
src/pages/DrawerSection/index.vue
Normal file
47
src/pages/DrawerSection/index.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<uni-drawer ref="drawerRef" mode="left" :width="320">
|
||||
<view class="drawer-home">
|
||||
<view class="drawer-home-nav">
|
||||
<uni-icons
|
||||
type="closeempty"
|
||||
size="22"
|
||||
color="#333333"
|
||||
class="close-icon"
|
||||
@click="close"
|
||||
/>
|
||||
<text class="title">我的</text>
|
||||
</view>
|
||||
|
||||
<MineSetting ref="mineSettingRef" @close="close" />
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineExpose } from "vue";
|
||||
import { checkToken } from "@/hooks/useGoLogin";
|
||||
import MineSetting from "./components/MineSetting/index.vue";
|
||||
|
||||
const drawerRef = ref(null);
|
||||
|
||||
// 监听抽屉显示事件
|
||||
const mineSettingRef = ref(null);
|
||||
const open = () => {
|
||||
checkToken().then(async () => {
|
||||
await mineSettingRef.value.getLoginUserPhoneInfo();
|
||||
drawerRef.value.open();
|
||||
});
|
||||
};
|
||||
|
||||
// 监听抽屉隐藏事件
|
||||
const close = () => drawerRef.value.close();
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
25
src/pages/DrawerSection/styles/index.scss
Normal file
25
src/pages/DrawerSection/styles/index.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.drawer-home {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
||||
.drawer-home-nav {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: center; /* 文字水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
left: 12px; /* 距离左边12px */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user