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

2 weeks ago
<template>
2 weeks ago
<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>
2 weeks ago
<tabbar :tabIndex="3"></tabbar>
</view>
</template>
<script setup>
2 weeks ago
import { ref } from 'vue'
import { useIndexStore } from '../../store';
const indexStore = useIndexStore()
const selectedList = ref([{date: '2025-08-07', info: '+10', data: { custom: '自定义信息', name: '自定义消息头' }}])
2 weeks ago
</script>
2 weeks ago
<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;
}
}
}
2 weeks ago
</style>