You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
284 lines
7.0 KiB
284 lines
7.0 KiB
<template>
|
|
<view class="myPage">
|
|
<image class="myBG" src="/static/myBG.png" mode="widthFix"></image>
|
|
<view class="body" :style="{ 'padding-top': (indexStore.screen.total + 30)+'px' }">
|
|
<view class="userBox">
|
|
<image class="avatar" src="/static/my/avatar.png" mode="aspectFill"></image>
|
|
<view class="userRight">
|
|
<view class="nameBox">
|
|
<view class="">
|
|
<text>未登录</text>
|
|
<image class="editIcon" src="/static/edit-w.png" mode="aspectFill"></image>
|
|
</view>
|
|
<text class="subTitle">点击登录 查看您的会员等级</text>
|
|
</view>
|
|
<button class="signBtn">签到</button>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="card">
|
|
<view class="cardBody">
|
|
<view class="menu">
|
|
<view class="menuItem">
|
|
<image class="icon" src="/static/my/daizhifu.png" mode="aspectFill"></image>
|
|
<text>待支付</text>
|
|
</view>
|
|
<view class="menuItem">
|
|
<image class="icon" src="/static/my/daifahuo.png" mode="aspectFill"></image>
|
|
<text>待发货</text>
|
|
</view>
|
|
<view class="menuItem">
|
|
<image class="icon" src="/static/my/daifahuo.png" mode="aspectFill"></image>
|
|
<text>待发货</text>
|
|
</view>
|
|
<view class="menuItem">
|
|
<image class="icon" src="/static/my/yiwancheng.png" mode="aspectFill"></image>
|
|
<text>已完成</text>
|
|
</view>
|
|
<view class="menuItem">
|
|
<image class="icon" src="/static/my/tuikuan.png" mode="aspectFill"></image>
|
|
<text>退款/售后</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<view class="cardHead">
|
|
<text>会员服务</text>
|
|
</view>
|
|
<view class="cardBody">
|
|
<view class="menu">
|
|
<view class="menuItem1">
|
|
<image class="icon1" src="/static/my/fake.png" mode="aspectFill"></image>
|
|
<text>防伪溯源</text>
|
|
</view>
|
|
<view class="menuItem1">
|
|
<image class="icon1" src="/static/my/writecheck.png" mode="aspectFill"></image>
|
|
<text>核销查询</text>
|
|
</view>
|
|
<view class="menuItem1">
|
|
<image class="icon1" src="/static/my/writerecord.png" mode="aspectFill"></image>
|
|
<text>兑换记录</text>
|
|
</view>
|
|
<view class="menuItem1">
|
|
<image class="icon1" src="/static/my/rewardrecord.png" mode="aspectFill"></image>
|
|
<text>中奖记录</text>
|
|
</view>
|
|
<view class="menuItem1">
|
|
<image class="icon1" src="/static/my/help.png" mode="aspectFill"></image>
|
|
<text>帮助中心</text>
|
|
</view>
|
|
<view class="menuItem1">
|
|
<image class="icon1" src="/static/my/aboutus.png" mode="aspectFill"></image>
|
|
<text>关于我们</text>
|
|
</view>
|
|
<view class="menuItem1">
|
|
<image class="icon1" src="/static/my/protocol.png" mode="aspectFill"></image>
|
|
<text>会员协议</text>
|
|
</view>
|
|
<view class="menuItem1">
|
|
<image class="icon1" src="/static/my/address.png" mode="aspectFill"></image>
|
|
<text>收货地址</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btnGroup">
|
|
<view class="btnItem">
|
|
<view class="">
|
|
<image class="btnIcon" src="/static/agent.png" mode="aspectFill"></image>
|
|
<text>经销商登录</text>
|
|
</view>
|
|
<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="btnItem">
|
|
<view class="">
|
|
<image class="btnIcon" src="/static/shop.png" mode="aspectFill"></image>
|
|
<text>门店登录</text>
|
|
</view>
|
|
<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<view class="cardHead">
|
|
<text>签到日历</text>
|
|
<view class="seeMore">
|
|
<text>查看更多</text>
|
|
<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
<view class="cardBody">
|
|
<uni-calendar
|
|
:insert="true"
|
|
:lunar="false"
|
|
:showMonth="false"
|
|
:start-date="'2025-3-2'"
|
|
:end-date="'2025-10-20'"
|
|
:selected="selectedList"
|
|
@change="change"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<tabbar :tabIndex="3"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useIndexStore } from '../../store';
|
|
|
|
const indexStore = useIndexStore()
|
|
const selectedList = ref([{date: '2025-08-07', info: '+10', data: { custom: '自定义信息', name: '自定义消息头' }}])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.myPage{
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #EFF6FF;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.body{
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
.myBG{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.userBox{
|
|
margin: 0 26rpx 26rpx;
|
|
@include flexBox(start,start);
|
|
.avatar{
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
border-radius: 24rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.userRight{
|
|
flex: 1;
|
|
@include flexBox(between,center);
|
|
.nameBox{
|
|
flex: 1;
|
|
@include fontStyle(34rpx,#FFFFFF,left,500,44rpx);
|
|
.editIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 26rpx;
|
|
}
|
|
.subTitle{
|
|
@include fontStyle(24rpx,#FFFFFF,left,400,44rpx);
|
|
}
|
|
}
|
|
.signBtn{
|
|
width: 110rpx;
|
|
height: 50rpx;
|
|
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
|
border: 2rpx solid #FFFFFF;
|
|
background: transparent;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
@include flexBox();
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.card{
|
|
margin: 26rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
.cardHead{
|
|
box-sizing: border-box;
|
|
padding: 26rpx;
|
|
@include fontStyle(28rpx,#333333,left,bold,38rpx);
|
|
@include flexBox(between,center);
|
|
.seeMore{
|
|
@include fontStyle(24rpx,#666666,left,400,38rpx);
|
|
@include flexBox(start,center);
|
|
.circleR{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
.cardBody{
|
|
box-sizing: border-box;
|
|
.menu{
|
|
width: 100%;
|
|
@include flexBox(around,center);
|
|
flex-wrap: wrap;
|
|
.menuItem{
|
|
@include fontStyle(24rpx,#333333,left,400,38rpx);
|
|
@include flexBox(start,center,column);
|
|
margin: 26rpx 0;
|
|
.icon{
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
.menuItem1{
|
|
width: 25%;
|
|
@include fontStyle(24rpx,#333333,left,400,38rpx);
|
|
@include flexBox(start,center,column);
|
|
margin-bottom: 26rpx ;
|
|
.icon1{
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
&:last-child{
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.btnGroup{
|
|
margin: 26rpx;
|
|
@include flexBox(between,center);
|
|
.btnItem{
|
|
width: 336rpx;
|
|
height: 92rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
box-sizing: border-box;
|
|
padding: 26rpx;
|
|
@include flexBox(between,center);
|
|
@include fontStyle(28rpx,#333333,left,bold,38rpx);
|
|
&>view{
|
|
@include flexBox(start,center);
|
|
}
|
|
.btnIcon{
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.circleR{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|