575 lines
19 KiB
Plaintext
575 lines
19 KiB
Plaintext
<template>
|
|
<view class="admin-decoration-user">
|
|
<!-- 顶部标题与保存按钮 -->
|
|
<view class="page-header border-shadow">
|
|
<view class="header-left">
|
|
<text class="page-title">个人中心</text>
|
|
</view>
|
|
<view class="header-right">
|
|
<view class="btn-primary" @click="handleSave">
|
|
<text class="btn-txt">保存</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主要内容区 -->
|
|
<view class="content-container anim-fade-in">
|
|
<view class="main-card border-shadow">
|
|
<!-- 左侧：手机预览 -->
|
|
<view class="preview-panel">
|
|
<view class="phone-mockup">
|
|
<scroll-view class="phone-body" :scroll-y="true">
|
|
|
|
<!-- 样式1 & 样式2 头部 -->
|
|
<view v-if="selectedStyle === 1 || selectedStyle === 2" class="user-header-gradient">
|
|
<view class="header-top">
|
|
<view class="avatar-box">
|
|
<image class="avatar-img" src="/static/logo.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="user-info">
|
|
<text class="user-name">用户名称用户名称</text>
|
|
<view class="bind-phone">
|
|
<text class="bind-txt">绑定手机号 ></text>
|
|
</view>
|
|
</view>
|
|
<view class="header-icons">
|
|
<view class="ic-msg">🔔<text class="msg-dot">6</text></view>
|
|
<view class="ic-set">⚙️</view>
|
|
</view>
|
|
</view>
|
|
<view class="stats-row">
|
|
<view class="stat-item">
|
|
<text class="stat-val">0.00</text>
|
|
<text class="stat-label">我的余额</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-val">65749</text>
|
|
<text class="stat-label">当前积分</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-val">25</text>
|
|
<text class="stat-label">优惠券</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 样式1 会员卡 -->
|
|
<view v-if="selectedStyle === 1" class="member-card-s1" @click="handleMember">
|
|
<view class="mc-content-s1">
|
|
<view class="mc-left">
|
|
<text class="mc-ic">👑</text>
|
|
<text class="mc-txt">会员到期 2022-12-31</text>
|
|
</view>
|
|
<view class="mc-right">
|
|
<text class="mc-btn">立即续费 ></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 样式2 会员卡 -->
|
|
<view v-if="selectedStyle === 2" class="member-card-s2" @click="handleMember">
|
|
<view class="mc-content-s2">
|
|
<view class="mc-left">
|
|
<text class="mc-ic">👑</text>
|
|
<view class="mc-info-col">
|
|
<text class="mc-t1">会员可享多项权益</text>
|
|
<text class="mc-t2">会员剩余360天</text>
|
|
</view>
|
|
</view>
|
|
<view class="mc-right">
|
|
<text class="mc-btn-white">立即续费 ></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 样式3 头部 -->
|
|
<view v-if="selectedStyle === 3" class="user-header-s3">
|
|
<view class="header-top-s3">
|
|
<view class="header-top-left">
|
|
<view class="avatar-box-s3">
|
|
<image class="avatar-img" src="/static/logo.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="user-info-s3">
|
|
<text class="user-name-s3">用户名称用户名称</text>
|
|
<view class="bind-phone-s3">
|
|
<text class="bind-txt-s3">绑定手机号 ></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="header-icons-s3">
|
|
<view class="ic-msg-s3">🔔<text class="msg-dot-s3">6</text></view>
|
|
<view class="ic-set-s3">⚙️</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="stats-row-s3">
|
|
<view class="stat-item">
|
|
<text class="stat-val-s3">0.00</text>
|
|
<text class="stat-label-s3">我的余额</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-val-s3">65749</text>
|
|
<text class="stat-label-s3">当前积分</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-val-s3">25</text>
|
|
<text class="stat-label-s3">优惠券</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 样式3 会员卡 -->
|
|
<view v-if="selectedStyle === 3" class="member-card-s3" @click="handleMember">
|
|
<view class="mc-content-s3">
|
|
<view class="mct-left-s3">
|
|
<text class="mct-ic-s3">👑</text>
|
|
<text class="mct-txt-s3">开通会员VIP</text>
|
|
</view>
|
|
<view class="mct-right-s3">
|
|
<text class="mct-more-s3">会员可享多项权益 ></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 公共部分：订单中心 -->
|
|
<view class="section-card">
|
|
<view class="section-header">
|
|
<text class="sh-title">订单中心</text>
|
|
<text class="sh-more">查看全部 ></text>
|
|
</view>
|
|
<view class="order-grid">
|
|
<view class="grid-item" v-for="(item, index) in orderItems" :key="index">
|
|
<view class="gi-ic-box">
|
|
<text class="gi-ic">{{ item.icon }}</text>
|
|
</view>
|
|
<text class="gi-txt">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 广告位 -->
|
|
<view class="ad-box">
|
|
<text class="ad-txt">暂无广告数据</text>
|
|
</view>
|
|
|
|
<!-- 我的服务 -->
|
|
<view class="section-card">
|
|
<view class="section-header">
|
|
<text class="sh-title">我的服务</text>
|
|
</view>
|
|
<view class="service-grid">
|
|
<view class="grid-item-s" v-for="(item, index) in serviceItems" :key="index">
|
|
<view class="gi-ic-box-s" :style="{backgroundColor: item.color}">
|
|
<text class="gi-ic-s">{{ item.icon }}</text>
|
|
</view>
|
|
<text class="gi-txt-s">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商家管理 -->
|
|
<view class="section-card">
|
|
<view class="section-header">
|
|
<text class="sh-title">商家管理</text>
|
|
</view>
|
|
<view class="merchant-grid">
|
|
<view class="grid-item-m" v-for="(item, index) in merchantItems" :key="index">
|
|
<view class="gi-ic-box-m">
|
|
<text class="gi-ic-m">{{ item.icon }}</text>
|
|
</view>
|
|
<text class="gi-txt-m">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右侧：设置面板 -->
|
|
<view class="settings-panel">
|
|
<view class="settings-group">
|
|
<view class="group-title">
|
|
<view class="title-line"></view>
|
|
<text class="title-txt">页面设置</text>
|
|
</view>
|
|
<view class="setting-item-row mt-20">
|
|
<text class="item-label">页面风格：</text>
|
|
<view class="radio-group">
|
|
<view class="radio-item" @click="selectedStyle = 1">
|
|
<view :class="['radio-dot', selectedStyle === 1 ? 'active' : '']"></view>
|
|
<text class="radio-txt">样式1</text>
|
|
</view>
|
|
<view class="radio-item" @click="selectedStyle = 2">
|
|
<view :class="['radio-dot', selectedStyle === 2 ? 'active' : '']"></view>
|
|
<text class="radio-txt">样式2</text>
|
|
</view>
|
|
<view class="radio-item" @click="selectedStyle = 3">
|
|
<view :class="['radio-dot', selectedStyle === 3 ? 'active' : '']"></view>
|
|
<text class="radio-txt">样式3</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
|
|
const selectedStyle = ref(1)
|
|
|
|
const orderItems = [
|
|
{ name: '待付款', icon: '💳' },
|
|
{ name: '待发货', icon: '🚚' },
|
|
{ name: '待收货', icon: '📦' },
|
|
{ name: '待评价', icon: '📝' },
|
|
{ name: '售后/退款', icon: '🔄' }
|
|
]
|
|
|
|
const serviceItems = [
|
|
{ name: '付费会员', icon: '💎', color: '#FFF7E6' },
|
|
{ name: '发票管理', icon: '🧾', color: '#F6FFED' },
|
|
{ name: '积分中心', icon: '🪙', color: '#E6FFFB' },
|
|
{ name: '联系客服', icon: '🎧', color: '#F0F5FF' },
|
|
{ name: '优惠券', icon: '🎫', color: '#FFF1F0' },
|
|
{ name: '我的收藏', icon: '⭐', color: '#FFF2E8' },
|
|
{ name: '地址信息', icon: '📍', color: '#F9F0FF' },
|
|
{ name: '我的余额', icon: '💰', color: '#FCFFE6' },
|
|
{ name: '我的推广', icon: '📢', color: '#FFF7E6' },
|
|
{ name: '砍价记录', icon: '✂️', color: '#F6FFED' },
|
|
{ name: '浏览记录', icon: '🕒', color: '#E6FFFB' },
|
|
{ name: '我的等级', icon: '📊', color: '#F0F5FF' }
|
|
]
|
|
|
|
const merchantItems = [
|
|
{ name: '客服接待', icon: '🎧' },
|
|
{ name: '订单核销', icon: '✅' },
|
|
{ name: '统计管理', icon: '📉' }
|
|
]
|
|
|
|
const handleSave = () => {
|
|
uni.showToast({ title: '保存成功' })
|
|
}
|
|
|
|
const handleMember = () => {
|
|
uni.showToast({ title: '会员功能开发中' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.admin-decoration-user {
|
|
background-color: #f0f2f5;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.border-shadow {
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.page-header {
|
|
height: 60px;
|
|
padding: 0 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 100;
|
|
}
|
|
|
|
.page-title { font-size: 16px; font-weight: bold; color: #333; }
|
|
|
|
.btn-primary {
|
|
background-color: #2d8cf0;
|
|
padding: 6px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.btn-txt { color: #fff; font-size: 14px; }
|
|
|
|
.content-container {
|
|
flex: 1;
|
|
padding: 24px;
|
|
}
|
|
|
|
.main-card {
|
|
display: flex;
|
|
flex-direction: row;
|
|
min-height: 800px;
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 左侧预览区 */
|
|
.preview-panel {
|
|
width: 420px;
|
|
padding: 40px;
|
|
background-color: #f7f8fa;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-right: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.phone-mockup {
|
|
width: 320px;
|
|
height: 640px;
|
|
background-color: #f5f5f5;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.phone-body { height: 100%; }
|
|
|
|
/* 样式1&2 头部渐变 */
|
|
.user-header-gradient {
|
|
background: linear-gradient(135deg, #eb3c2d 0%, #ff5e5e 100%);
|
|
padding: 25px 0 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.header-top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding: 0 15px;
|
|
}
|
|
.avatar-box { width: 50px; height: 50px; border-radius: 25px; border: 2px solid rgba(255,255,255,0.8); overflow: hidden; margin-right: 12px; }
|
|
.avatar-img { width: 100%; height: 100%; }
|
|
|
|
.user-info { flex: 1; display: flex; flex-direction: column; }
|
|
.user-name { font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 4px; }
|
|
.bind-phone { background-color: rgba(0,0,0,0.15); align-self: flex-start; padding: 2px 8px; border-radius: 10px; }
|
|
.bind-txt { color: #fff; font-size: 10px; }
|
|
|
|
.header-icons { display: flex; flex-direction: row; gap: 15px; padding: 0 15px; }
|
|
.ic-msg, .ic-set { font-size: 16px; color: #fff; position: relative; }
|
|
.msg-dot { position: absolute; top: -5px; right: -5px; background-color: #fff; color: #f2270c; font-size: 9px; width: 12px; height: 12px; border-radius: 6px; text-align: center; }
|
|
|
|
.stats-row { display: flex; flex-direction: row; justify-content: space-around; padding: 10px 15px; margin-bottom: 0; }
|
|
.stat-item { display: flex; flex-direction: column; align-items: center; }
|
|
.stat-val { font-size: 16px; font-weight: bold; color: #fff; margin-bottom: 4px; }
|
|
.stat-label { font-size: 10px; color: rgba(255,255,255,0.8); }
|
|
|
|
/* 会员卡 样式1 */
|
|
.member-card-s1 {
|
|
background: linear-gradient(90deg, #fdf1d6 0%, #fbd795 100%);
|
|
margin: 12px 10px 4px;
|
|
border-radius: 12px;
|
|
padding: 15px 16px;
|
|
}
|
|
.mc-content-s1 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.mc-txt { font-size: 11px; color: #7c581c; margin-left: 6px; }
|
|
.mc-btn { font-size: 10px; color: #7c581c; font-weight: bold; }
|
|
|
|
/* 会员卡 样式2 */
|
|
.member-card-s2 {
|
|
background-color: rgba(255,255,255,0.25);
|
|
margin: 12px 10px 4px;
|
|
border-radius: 12px;
|
|
padding: 15px 16px;
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
}
|
|
.mc-content-s2 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.mc-info-col { display: flex; flex-direction: column; margin-left: 8px; }
|
|
.mc-t1 { font-size: 11px; color: #fff; font-weight: bold; }
|
|
.mc-t2 { font-size: 9px; color: rgba(255,255,255,0.8); }
|
|
.mc-btn-white { background-color: #fff; color: #f2270c; font-size: 10px; padding: 4px 12px; border-radius: 12px; font-weight: bold; }
|
|
|
|
/* 样式3 头部 */
|
|
.user-header-s3 {
|
|
background-color: #fff;
|
|
padding: 30px 15px 0;
|
|
}
|
|
.header-top-s3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 25px;
|
|
}
|
|
.header-top-left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.avatar-box-s3 {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 27px;
|
|
overflow: hidden;
|
|
margin-right: 12px;
|
|
background-color: #f5f5f5;
|
|
border: 1px solid #eee;
|
|
}
|
|
.user-info-s3 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.user-name-s3 {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 6px;
|
|
}
|
|
.bind-phone-s3 {
|
|
display: flex;
|
|
}
|
|
.bind-txt-s3 {
|
|
color: #999;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.header-icons-s3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 15px;
|
|
padding-top: 5px;
|
|
}
|
|
.ic-msg-s3, .ic-set-s3 {
|
|
font-size: 18px;
|
|
color: #333;
|
|
position: relative;
|
|
}
|
|
.msg-dot-s3 {
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -6px;
|
|
background-color: #f2270c;
|
|
color: #fff;
|
|
font-size: 9px;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 7px;
|
|
text-align: center;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.stats-row-s3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
padding: 10px 0 20px;
|
|
}
|
|
.stat-val-s3 {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
.stat-label-s3 {
|
|
font-size: 11px;
|
|
color: #999;
|
|
}
|
|
|
|
.member-card-s3 {
|
|
background: #282828;
|
|
margin: 12px 10px;
|
|
border-radius: 12px;
|
|
padding: 18px 16px;
|
|
}
|
|
.mc-content-s3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.mct-left-s3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.mct-ic-s3 {
|
|
font-size: 18px;
|
|
margin-right: 8px;
|
|
}
|
|
.mct-txt-s3 {
|
|
color: #fbd795;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.mct-right-s3 {
|
|
display: flex;
|
|
}
|
|
.mct-more-s3 {
|
|
color: #fbd795;
|
|
font-size: 11px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 通用区块间卡片 */
|
|
.section-card {
|
|
background-color: #fff;
|
|
margin: 10px;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.section-header { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 15px; }
|
|
.sh-title { font-size: 13px; font-weight: bold; color: #333; }
|
|
.sh-more { font-size: 11px; color: #999; }
|
|
|
|
.order-grid { display: flex; flex-direction: row; justify-content: space-between; }
|
|
.grid-item { display: flex; flex-direction: column; align-items: center; }
|
|
.gi-ic { font-size: 20px; margin-bottom: 6px; }
|
|
.gi-txt { font-size: 10px; color: #666; }
|
|
|
|
.ad-box { background-color: #fff; margin: 10px; border-radius: 8px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px dashed #eee; }
|
|
.ad-txt { font-size: 12px; color: #999; }
|
|
|
|
.service-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
|
|
.grid-item-s { width: 25%; display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; }
|
|
.gi-ic-box-s { width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
|
|
.gi-ic-s { font-size: 16px; }
|
|
.gi-txt-s { font-size: 10px; color: #666; }
|
|
|
|
.merchant-grid { display: flex; flex-direction: row; gap: 40px; }
|
|
.grid-item-m { display: flex; flex-direction: column; align-items: center; }
|
|
.gi-ic-m { font-size: 20px; margin-bottom: 6px; }
|
|
.gi-txt-m { font-size: 10px; color: #666; }
|
|
|
|
/* 右侧设置区 */
|
|
.settings-panel { flex: 1; padding: 30px; }
|
|
.group-title { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
|
|
.title-line { width: 3px; height: 16px; background-color: #2d8cf0; margin-right: 10px; }
|
|
.title-txt { font-size: 15px; font-weight: bold; color: #333; }
|
|
|
|
.setting-item-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
|
|
.item-label { font-size: 14px; color: #666; margin-right: 20px; }
|
|
|
|
.radio-group { display: flex; flex-direction: row; gap: 30px; }
|
|
.radio-item { display: flex; flex-direction: row; align-items: center; cursor: pointer; }
|
|
.radio-dot { width: 16px; height: 16px; border: 1px solid #dcdfe6; border-radius: 8px; margin-right: 8px; position: relative; }
|
|
.radio-dot.active { border-color: #2d8cf0; }
|
|
.radio-dot.active::after { content: ''; width: 8px; height: 8px; background-color: #2d8cf0; border-radius: 4px; position: absolute; top: 3px; left: 3px; }
|
|
.radio-txt { font-size: 14px; color: #333; }
|
|
|
|
.mt-20 { margin-top: 20px; }
|
|
|
|
.anim-fade-in {
|
|
animation: fadeIn 0.4s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|