156 lines
3.7 KiB
Vue
156 lines
3.7 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="user-header">
|
|
<view class="user-info" @click="handleUserInfoClick">
|
|
<u-avatar size="80" :src="avatar"></u-avatar>
|
|
<text class="nick-name">{{nickName}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
|
|
|
<view>
|
|
<view class="order-header">
|
|
<text class="order-title">我的订单</text>
|
|
<view class="see-all">
|
|
<text>查看全部</text>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="order-status-box">
|
|
<u-grid :border="false" :col="orderStatusList.length"><u-grid-item v-for="(item,index) in orderStatusList" :key="index">
|
|
<u-icon :name="item.icon" :size="32"></u-icon>
|
|
<text class="grid-title">{{item.title}}</text>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
</view>
|
|
|
|
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
|
|
|
<view class="stat-box">
|
|
<u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statList" :key="index">
|
|
<text class="grid-value">{{item.value}}</text>
|
|
<text class="grid-title">{{item.title}}</text>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
|
|
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
|
|
|
<u-cell-group class="fun-list">
|
|
<u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
|
|
<u-cell class="fun-item" :border="false" icon="tags" title="领券中心" isLink></u-cell>
|
|
<u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
|
|
<u-cell class="fun-item" :border="false" icon="map" title="收获地址" isLink></u-cell>
|
|
</u-cell-group>
|
|
|
|
<u-button class="logout-btn" type="error" color="#ea322b" text="确定"></u-button>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
avatar:'',
|
|
nickName:'点击登录',
|
|
orderStatusList: [{icon: 'rmb-circle', title: '待支付'}, {icon: 'car', title: '代发货'}, {icon: 'order', title: '待收货'}, {icon: 'integral', title: '已完成'}],
|
|
statList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
handleUserInfoClick(){
|
|
// TODO 判断是否已经登录逻辑
|
|
if (!uni.getStorageSync('token')) {
|
|
uni.$u.route('/pages/login/login');
|
|
} else {
|
|
uni.$u.route('/pages/profile/profile');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.user-header {
|
|
height: 280rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.nick-name {
|
|
margin-top: 20rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 30rpx;
|
|
border-bottom: $custom-border-style;
|
|
|
|
.order-title {
|
|
color: #333333;
|
|
font-size: 34rpx;
|
|
}
|
|
.see-all {
|
|
height: 40rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: right;
|
|
color: #666666;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.order-status-box {
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.stat-box {
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.grid-title {
|
|
line-height: 50rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.grid-value {
|
|
line-height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #2b85e4;
|
|
}
|
|
|
|
.fun-list {
|
|
.fun-item {
|
|
padding-top: 10rpx;
|
|
padding-bottom: 10rpx;
|
|
border-bottom: $custom-border-style;
|
|
}
|
|
}
|
|
|
|
.logout-btn {
|
|
margin-top: 60rpx;
|
|
width: 300rpx;
|
|
}
|
|
|
|
</style>
|