feat: 实现了我的设置页面的相关操作
This commit is contained in:
@@ -188,6 +188,9 @@
|
|||||||
const handleReplyInstruct = (item) => {
|
const handleReplyInstruct = (item) => {
|
||||||
if(item.type === 'MyOrder') {
|
if(item.type === 'MyOrder') {
|
||||||
/// 订单
|
/// 订单
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/order/list'
|
||||||
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
commonType = item.type
|
commonType = item.type
|
||||||
|
|||||||
@@ -1,92 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="drawer-home">
|
<view class="drawer-home">
|
||||||
<view class="drawer-home-nav">
|
<view class="drawer-home-nav">
|
||||||
<text>抽屉页面</text>
|
<uni-icons type="closeempty" size="22" color="#333333" class="close-icon" @click="closeDrawer"></uni-icons>
|
||||||
|
<text class="title">我的</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<button @click="closeDrawer" type="default">关闭</button>
|
<MineSetting/>
|
||||||
<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>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import MineSetting from './MineSetting.vue'
|
||||||
import { defineEmits } from 'vue'
|
import { defineEmits } from 'vue'
|
||||||
const emits = defineEmits(['closeDrawer'])
|
const emits = defineEmits(['closeDrawer'])
|
||||||
import * as loginMnager from '@/manager/LoginManager'
|
|
||||||
|
|
||||||
import request from '../../request/base/request'
|
|
||||||
|
|
||||||
const closeDrawer = () => {
|
const closeDrawer = () => {
|
||||||
emits('closeDrawer')
|
emits('closeDrawer')
|
||||||
console.log('=============关闭抽屉')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const login = () => {
|
|
||||||
loginMnager.loginAuth()
|
|
||||||
.then(res => {
|
|
||||||
console.log('登录成功', res)
|
|
||||||
// 这里可以处理登录成功后的逻辑,比如保存 token 等
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.error('登录失败', err)
|
|
||||||
// 这里可以处理登录失败的逻辑
|
|
||||||
})
|
|
||||||
console.log('=============登录')
|
|
||||||
// 这里可以处理登录逻辑,比如调用登录接口等
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.drawer-home {
|
.drawer-home {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #E9F3F7;
|
background-color: #fff;
|
||||||
padding-top: 44px;
|
padding-top: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
.drawer-home-nav {
|
.drawer-home-nav {
|
||||||
|
position: relative;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center; /* 文字水平居中 */
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
|
||||||
text {
|
.title {
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 12px; /* 距离左边12px */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
<text class="card-unit">/人</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<text class="card-btn">下单</text>
|
<text class="card-btn" @click="placeOrderHandle(item)">下单</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -40,6 +40,13 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/// 去下单
|
||||||
|
const placeOrderHandle = (item) => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user