首页/我的
This commit is contained in:
kk
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view class="float-menu-card">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="menu-item"
|
||||
:class="{ 'last-item': index === list.length - 1 }"
|
||||
@click="handleItemClick(item, index)"
|
||||
>
|
||||
<text class="menu-text">{{ item.title }}</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FloatMenuCard',
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleItemClick(item, index) {
|
||||
// 发出事件，让父组件处理跳转逻辑
|
||||
this.$emit('item-click', { item, index });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.float-menu-card {
|
||||
position: fixed;
|
||||
bottom: 40rpx;
|
||||
left: 28rpx;
|
||||
right: 28rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.menu-item:last-child,
|
||||
.menu-item.last-item {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<view class="page-nav-bar">
|
||||
<view class="nav-btn left" @click="handlePrev">
|
||||
<text class="arrow-icon">‹</text>
|
||||
</view>
|
||||
<view class="nav-btn right" @click="handleNext">
|
||||
<text class="arrow-icon">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PageNavBar',
|
||||
props: {
|
||||
hasPrev: { type: Boolean, default: true },
|
||||
hasNext: { type: Boolean, default: true }
|
||||
},
|
||||
methods: {
|
||||
handlePrev() {
|
||||
if (!this.hasPrev) return;
|
||||
this.$emit('prev');
|
||||
},
|
||||
handleNext() {
|
||||
if (!this.hasNext) return;
|
||||
this.$emit('next');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-nav-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 110rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 160rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 72rpx;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-btn.right .arrow-icon {
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<view class="page-nav">
|
||||
<!-- 首页按钮 -->
|
||||
<view class="nav-item" @click="handleNav('home')">
|
||||
<text class="nav-icon">🏠</text>
|
||||
<text class="nav-text">首页</text>
|
||||
</view>
|
||||
|
||||
<!-- 开门按钮 - 圆形凸起 -->
|
||||
<view class="door-btn-wrapper" @click="handleOpenDoor">
|
||||
<view class="door-btn">开门</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的按钮 -->
|
||||
<view class="nav-item" @click="handleNav('mine')">
|
||||
<text class="nav-icon">👤</text>
|
||||
<text class="nav-text">我的</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PageNav',
|
||||
props: {
|
||||
// 当前高亮的tab: 'home' | 'mine'
|
||||
activeTab: {
|
||||
type: String,
|
||||
default: 'home'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNav(tab) {
|
||||
// 发出事件，由父组件处理导航
|
||||
this.$emit('change', tab);
|
||||
},
|
||||
handleOpenDoor() {
|
||||
uni.showModal({
|
||||
title: '开门',
|
||||
content: '确认打开柜门？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '柜门已打开', icon: 'success' });
|
||||
}
|
||||
}
|
||||
});
|
||||
this.$emit('openDoor');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 999;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.nav-item:active .nav-text,
|
||||
.nav-item.active .nav-text {
|
||||
color: #2979ff;
|
||||
}
|
||||
|
||||
.door-btn-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: -80rpx;
|
||||
}
|
||||
|
||||
.door-btn {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
color: #fff;
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10rpx 36rpx rgba(41, 121, 255, 0.55);
|
||||
}
|
||||
</style>
|
||||
+22
-1
@@ -1 +1,22 @@
|
||||
{"pages": [{"path": "pages/index/index", "style": {"navigationBarTitleText": "智能货柜", "navigationStyle": "custom"}}], "globalStyle": {"navigationBarTextStyle": "black", "navigationBarTitleText": "智能货柜", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8"}}
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "智能货柜",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
}
|
||||
}
|
||||
+136
-159
@@ -1,201 +1,178 @@
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<!-- 商品展示区域 -->
|
||||
<scroll-view class="product-area" scroll-y>
|
||||
<!-- 标题 -->
|
||||
<view class="section-title">热销商品</view>
|
||||
<!-- ========== 首页内容 ========== -->
|
||||
<view v-if="currentTab === 'home'" class="page-content home-page">
|
||||
<scroll-view
|
||||
class="product-area"
|
||||
scroll-y
|
||||
>
|
||||
<view class="section-title">热销商品</view>
|
||||
|
||||
<!-- 商品列表 - 三列 -->
|
||||
<view class="product-grid">
|
||||
<view
|
||||
v-for="(item, index) in productList"
|
||||
:key="index"
|
||||
class="product-card"
|
||||
>
|
||||
<image class="product-img" :src="item.image" mode="aspectFill" />
|
||||
<view class="product-name">{{ item.name }}</view>
|
||||
<view class="product-price">{{ item.price }}元</view>
|
||||
<view class="product-grid" id="productGrid">
|
||||
<view
|
||||
v-for="(item, index) in productList"
|
||||
:key="index"
|
||||
class="product-card"
|
||||
>
|
||||
<image class="product-img" :src="item.image" mode="aspectFill" />
|
||||
<view class="product-name">{{ item.name }}</view>
|
||||
<view class="product-price">{{ item.price }}元</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部占位，防止被tab-bar遮挡 -->
|
||||
<view class="bottom-spacer"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<view class="tab-bar">
|
||||
<view class="tab-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">
|
||||
<text class="tab-text">首页</text>
|
||||
</view>
|
||||
|
||||
<view class="door-btn-wrapper" @click="handleOpenDoor">
|
||||
<view class="door-btn">开门</view>
|
||||
</view>
|
||||
|
||||
<view class="tab-item" :class="{ active: currentTab === 'mine' }" @click="switchTab('mine')">
|
||||
<text class="tab-text">我的</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<view class="tab-bar">
|
||||
<view class="tab-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">
|
||||
<text class="tab-text">首页</text>
|
||||
<!-- ========== 我的内容 ========== -->
|
||||
<view v-if="currentTab === 'mine'" class="page-content mine-page">
|
||||
<!-- 蓝色个人信息区域 -->
|
||||
<view class="user-header">
|
||||
<view class="user-info">
|
||||
<view class="avatar-wrapper">
|
||||
<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="user-detail">
|
||||
<text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
|
||||
<text class="phone">{{ maskedPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 开门按钮 - 圆形凸起 -->
|
||||
<view class="door-btn-wrapper" @click="handleOpenDoor">
|
||||
<view class="door-btn">开门</view>
|
||||
<!-- 菜单列表（顶部） -->
|
||||
<view class="content-area">
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
|
||||
<text class="menu-text">{{ item.title }}</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tab-item" :class="{ active: currentTab === 'mine' }" @click="switchTab('mine')">
|
||||
<text class="tab-text">我的</text>
|
||||
</view>
|
||||
<!-- 底部左右箭头导航条 -->
|
||||
<page-nav-bar
|
||||
:hasPrev="true"
|
||||
:hasNext="false"
|
||||
@prev="handleNavPrev"
|
||||
@next="handleNavNext"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
|
||||
|
||||
export default {
|
||||
components: { PageNavBar },
|
||||
data() {
|
||||
return {
|
||||
currentTab: 'home',
|
||||
contentHeight: 0,
|
||||
areaHeight: 0,
|
||||
productList: [
|
||||
{ name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
|
||||
{ name: '白红（0.0.0.0-9.9.9）', price: '0.06', image: '/static/c2.png' },
|
||||
{ name: '白桔（0.0.0.0-5.5.5）', price: '0.05', image: '/static/c3.png' },
|
||||
{ name: '可口可乐330ml', price: '3.00', image: '/static/c4.png' },
|
||||
{ name: '农夫山泉550ml', price: '2.00', image: '/static/c5.png' },
|
||||
{ name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
|
||||
{ name: '白红（0.0.0.0-9.9.9）', price: '0.06', image: '/static/c2.png' },
|
||||
{ name: '白桔（0.0.0.0-5.5.5）', price: '0.05', image: '/static/c3.png' },
|
||||
{ name: '可口可乐330ml', price: '3.00', image: '/static/c4.png' },
|
||||
{ name: '农夫山泉550ml', price: '2.00', image: '/static/c5.png' },
|
||||
{ name: '乐事薯片原味75g', price: '7.50', image: '/static/c6.png' }
|
||||
],
|
||||
userInfo: { nickname: '张三', phone: '13812345678' },
|
||||
menuList: [
|
||||
{ title: '我的订单', page: '/pages/order/order' },
|
||||
{ title: '收货地址', page: '/pages/address/address' },
|
||||
{ title: '常见问题', page: '/pages/faq/faq' }
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
maskedPhone() {
|
||||
const p = this.userInfo.phone;
|
||||
return p ? p.substring(0,3) + '****' + p.substring(7) : '';
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
switchTab(tab) {
|
||||
this.currentTab = tab;
|
||||
},
|
||||
switchTab(tab) { this.currentTab = tab; },
|
||||
handleOpenDoor() {
|
||||
uni.showModal({
|
||||
title: '开门',
|
||||
content: '确认打开柜门？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '柜门已打开', icon: 'success' });
|
||||
}
|
||||
}
|
||||
});
|
||||
uni.showModal({ title: '开门', content: '确认打开柜门？', success: r => r.confirm && uni.showToast({title:'柜门已打开', icon:'success'}) });
|
||||
},
|
||||
handleMenuClick(item) {
|
||||
if (item.page) {
|
||||
uni.showToast({title:'功能开发中', icon:'none'});
|
||||
}
|
||||
},
|
||||
handleNavPrev() {
|
||||
this.currentTab = 'home';
|
||||
},
|
||||
handleNavNext() {
|
||||
uni.showToast({ title: '暂无下一页', icon: 'none' });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
page { height: 100%; background-color: #fff; }
|
||||
.app-container { display: flex; flex-direction: column; height: 100vh; background-color: #fff; }
|
||||
.page-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; position: relative; }
|
||||
|
||||
/* ========== 商品区域 ========== */
|
||||
.product-area {
|
||||
flex: 1;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
/* ====== 首页样式 ====== */
|
||||
.home-page { display: flex; flex-direction: column; height: 100%; }
|
||||
.product-area { flex: 1; overflow-y: auto; height: 0; }
|
||||
.section-title { font-size: 36rpx; font-weight: bold; color: #333; padding: 24rpx 28rpx 16rpx; }
|
||||
.product-grid { display: flex; flex-wrap: wrap; padding: 12rpx; gap: 12rpx; }
|
||||
.product-card { width: calc((100% - 24rpx) / 3); text-align: center; }
|
||||
.product-img { width: 100%; height: 220rpx; border-radius: 8rpx; background-color: #f0f0f0; }
|
||||
.product-name { font-size: 24rpx; color: #333; padding: 10rpx 8rpx 6rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.product-price { font-size: 30rpx; font-weight: bold; color: #e4393c; padding: 0 8rpx 16rpx; }
|
||||
|
||||
/* 热销商品标题 */
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
padding: 24rpx 28rpx 16rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* 底部占位：给tab-bar和开门按钮留出空间 */
|
||||
.bottom-spacer { height: 160rpx; }
|
||||
|
||||
/* 三列网格 */
|
||||
.product-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 12rpx;
|
||||
gap: 12rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* 底部导航栏 */
|
||||
.tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 120rpx; background: #fff; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 -2rpx 16rpx rgba(0,0,0,0.08); z-index: 999; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
|
||||
.tab-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
|
||||
.tab-text { font-size: 28rpx; color: #999; font-weight: normal; }
|
||||
.tab-item.active .tab-text { color: #2979ff; }
|
||||
.door-btn-wrapper { position: relative; display: flex; align-items: center; justify-content: center; margin-top: -80rpx; }
|
||||
.door-btn { width: 160rpx; height: 160rpx; border-radius: 50%; background: linear-gradient(135deg, #2979ff, #1e60e0); color: #fff; font-size: 38rpx; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 10rpx 36rpx rgba(41,121,255,0.55); }
|
||||
|
||||
/* 每列占1/3 */
|
||||
.product-card {
|
||||
width: calc((100% - 24rpx) / 3);
|
||||
background: transparent;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
text-align: center; /* 居中 */
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
display: block;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* 商品名称：居中 + 单行超出省略 */
|
||||
.product-name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
padding: 10rpx 8rpx 6rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 价格：红色加粗 + 居中 */
|
||||
.product-price {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #e4393c;
|
||||
padding: 0 8rpx 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ========== 底部导航栏 ========== */
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 999;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx; /* 变小一点 */
|
||||
color: #999;
|
||||
font-weight: normal; /* 不加粗 */
|
||||
}
|
||||
|
||||
.tab-item.active .tab-text {
|
||||
color: #2979ff;
|
||||
}
|
||||
|
||||
/* ========== 开门按钮 - 更大、更高 ========== */
|
||||
.door-btn-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: -80rpx; /* 更往上凸起 */
|
||||
}
|
||||
|
||||
.door-btn {
|
||||
width: 160rpx; /* 更大的圆 */
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
color: #fff;
|
||||
font-size: 38rpx; /* 更大的字 */
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10rpx 36rpx rgba(41, 121, 255, 0.55);
|
||||
}
|
||||
/* ====== 我的页面样式 ====== */
|
||||
.mine-page { background-color: #f5f5f5; position: relative; overflow-y: auto; }
|
||||
.user-header { background: linear-gradient(135deg, #2979ff, #1e60e0); padding: 60rpx 40rpx; }
|
||||
.user-info { display: flex; align-items: center; }
|
||||
.avatar { width: 120rpx; height: 120rpx; border-radius: 50%; border: 4rpx solid rgba(255,255,255,0.8); background-color: #e0e0e0; }
|
||||
.avatar-wrapper { margin-right: 30rpx; }
|
||||
.user-detail { display: flex; flex-direction: column; flex: 1; }
|
||||
.nickname { font-size: 36rpx; font-weight: bold; color: #fff; margin-bottom: 12rpx; }
|
||||
.phone { font-size: 28rpx; color: rgba(255,255,255,0.9); }
|
||||
.content-area { padding: 20rpx; padding-bottom: 140rpx; }
|
||||
.menu-list { background-color: #fff; border-radius: 16rpx; overflow: hidden; }
|
||||
.menu-item { display: flex; justify-content: space-between; padding: 32rpx 28rpx; border-bottom: 1rpx solid #f0f0f0; }
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.menu-text { font-size: 30rpx; color: #333; }
|
||||
.menu-arrow { font-size: 28rpx; color: #ccc; }
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<!-- 我的内容 -->
|
||||
<view class="page-content">
|
||||
<!-- 蓝色个人信息区域 -->
|
||||
<view class="user-header">
|
||||
<view class="user-info">
|
||||
<!-- 左侧圆形头像 -->
|
||||
<view class="avatar-wrapper">
|
||||
<image
|
||||
class="avatar"
|
||||
:src="userInfo.avatar || '/static/default-avatar.png'"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<!-- 右侧信息 -->
|
||||
<view class="user-detail">
|
||||
<text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
|
||||
<text class="phone">{{ maskedPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<view class="content-area">
|
||||
<view class="menu-list">
|
||||
<view
|
||||
class="menu-item"
|
||||
v-for="(item, index) in menuList"
|
||||
:key="index"
|
||||
@click="handleMenuClick(item)"
|
||||
>
|
||||
<text class="menu-text">{{ item.title }}</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<page-nav activeTab="mine" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageNav from '@/components/page-nav/page-nav.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PageNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: {
|
||||
avatar: '',
|
||||
nickname: '张三',
|
||||
phone: '13812345678'
|
||||
},
|
||||
menuList: [
|
||||
{ title: '我的订单', page: '/pages/order/order' },
|
||||
{ title: '收货地址', page: '/pages/address/address' },
|
||||
{ title: '常见问题', page: '/pages/faq/faq' },
|
||||
{ title: '联系客服', action: 'contact' }
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
maskedPhone() {
|
||||
const phone = this.userInfo.phone;
|
||||
if (!phone || phone.length < 11) return phone;
|
||||
return phone.substring(0, 3) + '****' + phone.substring(7);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMenuClick(item) {
|
||||
if (item.page) {
|
||||
uni.navigateTo({ url: item.page });
|
||||
} else if (item.action === 'contact') {
|
||||
uni.showModal({
|
||||
title: '联系客服',
|
||||
content: '客服电话：400-123-4567',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.user-header {
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
padding: 80rpx 40rpx 60rpx;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.8);
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 28rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user