feat: 分端显示

2025-12-17 17:01:46 +08:00
parent 5e3d3708c6
commit 3c21b074c4
16 changed files with 1723 additions and 119 deletions
--- a/src/pagesMerchant/me/index.vue
+++ b/src/pagesMerchant/me/index.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import { useUserStore, CLIENT_TYPE_CONFIG, ClientType } from '@/store/user'
+import { tabbarStore } from '@/tabbar/store'
+
+definePage({
+  style: {
+    navigationBarTitleText: '商家中心',
+  },
+})
+
+const userStore = useUserStore()
+const config = CLIENT_TYPE_CONFIG[ClientType.MERCHANT]
+
+const menuList = [
+  { icon: 'i-carbon-settings', label: '店铺设置' },
+  { icon: 'i-carbon-customer-service', label: '客服中心' },
+  { icon: 'i-carbon-help', label: '帮助中心' },
+  { icon: 'i-carbon-information', label: '关于我们' },
+]
+
+function handleLogout() {
+  uni.showModal({
+    title: '提示',
+    content: '确定要退出登录吗？',
+    success: (res) => {
+      if (res.confirm) {
+        userStore.logout()
+        tabbarStore.setTabbarByClientType('user')
+        uni.reLaunch({ url: '/pages/login/index' })
+      }
+    },
+  })
+}
+</script>
+
+<template>
+  <view class="me-page">
+    <!-- 用户信息 -->
+    <view class="user-card" :style="{ background: config.color }">
+      <view class="avatar">
+        <image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill"></image>
+      </view>
+      <view class="info">
+        <text class="nickname">{{ userStore.userInfo?.nickname || '商家用户' }}</text>
+        <text class="tag">{{ config.label }}</text>
+      </view>
+    </view>
+    
+    <!-- 菜单列表 -->
+    <view class="menu-list">
+      <view v-for="item in menuList" :key="item.label" class="menu-item">
+        <view class="menu-left">
+          <text :class="item.icon" class="menu-icon"></text>
+          <text class="menu-label">{{ item.label }}</text>
+        </view>
+        <text class="i-carbon-chevron-right"></text>
+      </view>
+    </view>
+    
+    <!-- 退出登录 -->
+    <view class="logout-btn" @click="handleLogout">退出登录</view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.me-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.user-card {
+  padding: 60rpx 30rpx 40rpx;
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  
+  .avatar {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 4rpx solid rgba(255, 255, 255, 0.5);
+    
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .info {
+    .nickname {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #fff;
+      display: block;
+      margin-bottom: 8rpx;
+    }
+    
+    .tag {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.8);
+      background: rgba(255, 255, 255, 0.2);
+      padding: 4rpx 16rpx;
+      border-radius: 20rpx;
+    }
+  }
+}
+
+.menu-list {
+  background: #fff;
+  margin: 20rpx;
+  border-radius: 16rpx;
+  
+  .menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .menu-left {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+      
+      .menu-icon {
+        font-size: 40rpx;
+        color: #666;
+      }
+      
+      .menu-label {
+        font-size: 28rpx;
+        color: #333;
+      }
+    }
+  }
+}
+
+.logout-btn {
+  margin: 40rpx 20rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #fa4350;
+}
+</style>