369 lines
8.5 KiB
Vue
369 lines
8.5 KiB
Vue
<template>
|
||
<view class="uni-page mine">
|
||
<u-navbar title="个人中心" leftIconSize="0" bg-color="transparent" placeholder></u-navbar>
|
||
<MineHeader></MineHeader>
|
||
<view class="mine-inner">
|
||
<!-- 开通会员 -->
|
||
<view class="open-member">
|
||
<view class="open-member-hd">
|
||
<template v-if="userInfo.vip_end">
|
||
<view class="open-member-hd-left">
|
||
<image class="open-member-hd-left-vip" src="../../static/mine/m_member_vip.png" mode="">
|
||
</image>
|
||
<text>会员到期时间</text>
|
||
</view>
|
||
<view class="open-member-hd-right" @click="jumpPage('/pages/mine/openMember')">
|
||
<text>有效期至{{ userInfo.vip_end }}</text>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="open-member-hd-left">
|
||
<image class="open-member-hd-left-vip" src="../../static/mine/m_member_vip.png" mode="">
|
||
</image>
|
||
<text>开通会员功能</text>
|
||
</view>
|
||
<view class="open-member-hd-right" @click="jumpPage('/pages/mine/openMember')">
|
||
<text>享受更多特权</text>
|
||
<u-icon name="arrow-right" size="14" color="#6D3B00"></u-icon>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<!-- 钱包 -->
|
||
<view class="open-member-bd">
|
||
<view class="open-member-bd-left">
|
||
我的钱包
|
||
</view>
|
||
<view class="open-member-bd-right">
|
||
￥ {{ userInfo.money }}
|
||
<!-- <text>我的钱包</text>
|
||
<u-icon name="arrow-right" size="14" color="#ababab"></u-icon> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单 -->
|
||
<view class="order-entrance">
|
||
<view class="order-entrance-title">
|
||
我的订单
|
||
</view>
|
||
<view class="order-entrance-list">
|
||
<view class="order-entrance-list-item" v-for="item in order" :key="item.label"
|
||
@click="jumpPage(item.path)">
|
||
<view class="order-entrance-list-item-value">
|
||
<text class="number">{{ orderNum[item.type] || 0 }}</text>
|
||
<text class="unit">件</text>
|
||
</view>
|
||
<view class="order-entrance-list-item-label">
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 菜单 -->
|
||
<view class="menu">
|
||
<view class="menu-item" v-for="item in menuList" :key="item.label" @click="jumpPage(item.path)">
|
||
<view class="menu-item-inner">
|
||
<view class="menu-item-icon">
|
||
<!-- <component :is="item.icon" size="20"></component> -->
|
||
<u-icon :name="item.icon" size="20"></u-icon>
|
||
</view>
|
||
<view class="menu-item-text">
|
||
<view class="label">
|
||
{{ item.label }}
|
||
</view>
|
||
<view class="desc">
|
||
{{ item.desc }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MineHeader from './components/MineHeader.vue';
|
||
import {
|
||
getOrderList,
|
||
getUserInfo
|
||
} from '@/request/yyf.js';
|
||
export default {
|
||
components: {
|
||
MineHeader,
|
||
},
|
||
data() {
|
||
return {
|
||
order: [{
|
||
label: '待付款',
|
||
type: '0',
|
||
path: '/pages/mine/mineOrder?type=0'
|
||
},
|
||
{
|
||
label: '待寄出',
|
||
type: '1',
|
||
path: '/pages/mine/mineOrder?type=1'
|
||
},
|
||
{
|
||
label: '已寄出',
|
||
type: '2',
|
||
path: '/pages/mine/mineOrder?type=2'
|
||
},
|
||
{
|
||
label: '被退回',
|
||
type: '3',
|
||
path: '/pages/mine/mineOrder?type=3'
|
||
},
|
||
{
|
||
label: '已取消',
|
||
type: '4',
|
||
path: '/pages/mine/mineOrder?type=4'
|
||
},
|
||
],
|
||
menuList: [
|
||
// { label: '邀请有礼', path: '', icon: 'share-square', desc: '邀请好友获取收益' },
|
||
{
|
||
label: '地址管理',
|
||
path: '/pages/address/address',
|
||
icon: 'map',
|
||
desc: '添加收件地址'
|
||
},
|
||
{
|
||
label: '我的优惠券',
|
||
path: '/pages/coupon/coupon',
|
||
icon: 'coupon',
|
||
desc: '查看我的优惠券'
|
||
},
|
||
// { label: '咨询客服', path: '', icon: 'server-fill', desc: '在线咨询客服' },
|
||
{
|
||
label: '系统设置',
|
||
path: '/pages/setting/setting',
|
||
icon: 'setting',
|
||
desc: '基本资料设置'
|
||
},
|
||
// { label: '关于我们', path: '', icon: 'error-circle', desc: '公司基本介绍' },
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
userInfo() {
|
||
return this.$storeMine.userInfo;
|
||
},
|
||
orderList() {
|
||
return this.$storeMine.orderList;
|
||
},
|
||
orderNum() {
|
||
return this.$storeMine.orderNum;
|
||
},
|
||
prevTime() {
|
||
let {
|
||
prevtime
|
||
} = this.userInfo;
|
||
const date = new Date(prevtime * 1000);
|
||
const year = date.getFullYear(); // 获取年份
|
||
const month = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1); // 获取月份，需要加1
|
||
const day = date.getDate() > 10 ? date.getDate() : '0' + date.getDate(); // 获取日期
|
||
const hour = date.getHours() > 10 ? date.getHours() : '0' + date.getHours(); // 获取小时
|
||
const minute = date.getMinutes() > 10 ? date.getMinutes() : '0' + date.getMinutes(); // 获取分钟
|
||
const second = date.getSeconds() > 10 ? date.getSeconds() : '0' + date.getSeconds(); // 获取秒数
|
||
|
||
const formattedDate = `${year}-${month}-${day}`; // 拼接成格式化后的日期字符串
|
||
|
||
return formattedDate
|
||
}
|
||
},
|
||
onShow() {
|
||
this.$actionsMine.onGetuserInfo();
|
||
this.$actionsMine.onGetOrderNum();
|
||
},
|
||
methods: {
|
||
jumpPage(path) {
|
||
// console.log(path);
|
||
path && this.$Router.push(path);
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/deep/.u-icon {
|
||
display: inline-block;
|
||
}
|
||
|
||
.mine-inner {
|
||
.open-member {
|
||
height: 210rpx;
|
||
background: url(../../static/mine/m_member_bg.png) center/100% no-repeat;
|
||
|
||
.open-member-hd {
|
||
padding: 17rpx 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.open-member-hd-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&-vip {
|
||
width: 46rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
text {
|
||
padding-left: 27rpx;
|
||
line-height: 1;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #6D3B00;
|
||
}
|
||
}
|
||
|
||
.open-member-hd-right {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
padding-right: 10rpx;
|
||
line-height: 1;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-size: 24rpx;
|
||
color: #6D3B00;
|
||
}
|
||
}
|
||
}
|
||
|
||
.open-member-bd {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
margin-top: 20rpx;
|
||
padding: 0 30rpx;
|
||
height: 130rpx;
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
|
||
&-left {
|
||
font-size: 34rpx;
|
||
font-family: OPPOSans-bold, OPPOSans;
|
||
font-weight: bold;
|
||
color: #111111;
|
||
}
|
||
|
||
&-right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
padding-right: 10rpx;
|
||
}
|
||
|
||
cursor: pointer;
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Bold,
|
||
PingFang SC;
|
||
color: #ababab;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-entrance {
|
||
box-sizing: border-box;
|
||
margin-top: 26rpx;
|
||
height: 260rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||
padding: 30rpx 40rpx;
|
||
|
||
.order-entrance-title {
|
||
padding-bottom: 45rpx;
|
||
font-size: 34rpx;
|
||
font-family: OPPOSans-bold, OPPOSans;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.order-entrance-list {
|
||
cursor: pointer;
|
||
display: flex;
|
||
|
||
.order-entrance-list-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
&-label {
|
||
padding-top: 18rpx;
|
||
font-size: 26rpx;
|
||
font-family: OPPOSans-Medium, OPPOSans;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
&-value {
|
||
.number {
|
||
font-size: 34rpx;
|
||
font-family: OPPOSans-Medium, OPPOSans;
|
||
font-weight: 500;
|
||
color: #CE7A2C;
|
||
}
|
||
|
||
.unit {
|
||
padding-left: 5rpx;
|
||
font-size: 24rpx;
|
||
font-family: OPPOSans-Medium, OPPOSans;
|
||
font-weight: 500;
|
||
color: #CE7A2C;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 0 -10rpx;
|
||
|
||
.menu-item {
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
padding: 0 10rpx;
|
||
width: 50%;
|
||
|
||
.menu-item-inner {
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
padding: 37rpx 39rpx;
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
|
||
.menu-item-icon {
|
||
padding-right: 12rpx;
|
||
}
|
||
|
||
.menu-item-text {
|
||
.label {
|
||
font-size: 26rpx;
|
||
font-family: OPPOSans-Medium, OPPOSans;
|
||
font-weight: 500;
|
||
color: #111111;
|
||
line-height: 1;
|
||
}
|
||
|
||
.desc {
|
||
padding-top: 10rpx;
|
||
font-size: 20rpx;
|
||
color: #ababab;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |