feat: 实现了我的设置页面的相关操作
This commit is contained in:
@@ -188,6 +188,9 @@
|
||||
const handleReplyInstruct = (item) => {
|
||||
if(item.type === 'MyOrder') {
|
||||
/// 订单
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/list'
|
||||
})
|
||||
return
|
||||
}
|
||||
commonType = item.type
|
||||
|
||||
@@ -1,48 +1,23 @@
|
||||
<template>
|
||||
<view class="drawer-home">
|
||||
<view class="drawer-home-nav">
|
||||
<text>抽屉页面</text>
|
||||
</view>
|
||||
|
||||
<button @click="closeDrawer" type="default">关闭</button>
|
||||
<button @click="login" type="default">登录</button>
|
||||
<button @click="sendChat" type="default">会话测试</button>
|
||||
|
||||
<view class="drawer-list">
|
||||
<view v-for="(item,index) in 100" :key="index">
|
||||
<text class="message-item">{{item}}</text>
|
||||
</view>
|
||||
<uni-icons type="closeempty" size="22" color="#333333" class="close-icon" @click="closeDrawer"></uni-icons>
|
||||
<text class="title">我的</text>
|
||||
</view>
|
||||
|
||||
<MineSetting/>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MineSetting from './MineSetting.vue'
|
||||
import { defineEmits } from 'vue'
|
||||
const emits = defineEmits(['closeDrawer'])
|
||||
import * as loginMnager from '@/manager/LoginManager'
|
||||
|
||||
import request from '../../request/base/request'
|
||||
|
||||
const closeDrawer = () => {
|
||||
emits('closeDrawer')
|
||||
console.log('=============关闭抽屉')
|
||||
}
|
||||
|
||||
const login = () => {
|
||||
loginMnager.loginAuth()
|
||||
.then(res => {
|
||||
console.log('登录成功', res)
|
||||
// 这里可以处理登录成功后的逻辑，比如保存 token 等
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('登录失败', err)
|
||||
// 这里可以处理登录失败的逻辑
|
||||
})
|
||||
console.log('=============登录')
|
||||
// 这里可以处理登录逻辑，比如调用登录接口等
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -50,43 +25,26 @@
|
||||
.drawer-home {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #E9F3F7;
|
||||
padding-top: 44px;
|
||||
background-color: #fff;
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
||||
.drawer-home-nav {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: center; /* 文字水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
|
||||
.drawer-home-nav {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.drawer-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
margin: 6px 12px;
|
||||
padding: 8px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
left: 12px; /* 距离左边12px */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
pages/drawer/MineSetting.vue
Normal file
149
pages/drawer/MineSetting.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<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" />
|
||||
</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>
|
||||
|
||||
<!-- 底部退出按钮 -->
|
||||
<button class="logout-btn" @click="handleLogout">退出登录</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
// 假数据
|
||||
const userInfo = ref({
|
||||
avatar: '/static/default-avatar.png',
|
||||
nickname: '微信用户',
|
||||
phone: '182****0628'
|
||||
})
|
||||
|
||||
// 功能菜单列表（带 type 区分操作类型）
|
||||
const menuList = ref([
|
||||
// { label: '修改手机号', type: 'navigate', url: '/pages/change-phone/change-phone' },
|
||||
{ label: '账号注销', type: 'navigate', url: '/pages/cancel-account/cancel-account' },
|
||||
// { label: '营业资质&协议', type: 'navigate', url: '/pages/agreement/agreement' },
|
||||
{ label: '联系客服', type: 'action', action: 'contactService' }
|
||||
])
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
// TODO: 这里调用接口获取用户信息
|
||||
})
|
||||
|
||||
// 处理菜单点击
|
||||
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' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.clearStorageSync()
|
||||
uni.reLaunch({ url: '/pages/login/index' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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: 50%;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 90%;
|
||||
margin: 80rpx auto;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@@ -22,7 +22,7 @@
|
||||
<text class="card-unit">/人</text>
|
||||
</view>
|
||||
|
||||
<text class="card-btn">下单</text>
|
||||
<text class="card-btn" @click="placeOrderHandle(item)">下单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -39,6 +39,13 @@
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
|
||||
/// 去下单
|
||||
const placeOrderHandle = (item) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user