214 lines
5.5 KiB
Vue
214 lines
5.5 KiB
Vue
<template>
|
||
<view class="app">
|
||
<!-- 个人信息 -->
|
||
<view class="user-wrapper">
|
||
<image class="user-background" src="/static/backgroud/user.jpg"></image>
|
||
<view class="user">
|
||
<!-- 头像 -->
|
||
<image class="avatar" :src="userInfo.avatar || '/static/icon/default-avatar.png'" @click="navTo('/pages/set/userInfo', {login: true})"></image>
|
||
<!-- 已登陆，展示昵称 -->
|
||
<view class="cen column" v-if="hasLogin">
|
||
<text class="username f-m">{{ userInfo.nickname }}</text>
|
||
<text class="group">普通会员</text>
|
||
</view>
|
||
<!-- 未登陆，引导登陆 -->
|
||
<view class="login-box" v-else @click="navTo('/pages/auth/login')">
|
||
<text>点击注册/登录</text>
|
||
</view>
|
||
</view>
|
||
<!-- 下面的圆弧 -->
|
||
<image class="user-background-arc-line" src="/static/icon/arc.png" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="order-wrap">
|
||
<view class="order-header row" @click="navTo('/pages/order/list?current=0', {login: true})">
|
||
<text class="title">我的订单</text>
|
||
<text class="more">查看全部</text>
|
||
<text class="mix-icon icon-you"></text>
|
||
</view>
|
||
<view class="order-list">
|
||
<view class="item center" @click="navTo('/pages/order/list?current=1', {login: true})" hover-class="hover-gray" :hover-stay-time="50">
|
||
<text class="mix-icon icon-daifukuan"></text>
|
||
<text>待付款</text>
|
||
<text v-if="orderCount.c0 > 0" class="number">{{ orderCount.c0 }}</text>
|
||
</view>
|
||
<view class="item center" @click="navTo('/pages/order/list?current=2', {login: true})" hover-class="hover-gray" :hover-stay-time="50">
|
||
<text class="mix-icon icon-daifahuo"></text>
|
||
<text>待发货</text>
|
||
<text v-if="orderCount.c1 > 0" class="number">{{ orderCount.c1 }}</text>
|
||
</view>
|
||
<view class="item center" @click="navTo('/pages/order/list?current=3', {login: true})" hover-class="hover-gray" :hover-stay-time="50">
|
||
<text class="mix-icon icon-yishouhuo"></text>
|
||
<text>待收货</text>
|
||
<text v-if="orderCount.c2 > 0" class="number">{{ orderCount.c2 }}</text>
|
||
</view>
|
||
<view class="item center" @click="navTo('/pages/order/list?current=4', {login: true})" hover-class="hover-gray" :hover-stay-time="50">
|
||
<text class="mix-icon icon-daipingjia"></text>
|
||
<text>待评价</text>
|
||
<text v-if="orderCount.c3 > 0" class="number">{{ orderCount.c3 }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能入口 -->
|
||
<u-cell-group class="option1-wrap">
|
||
<u-cell icon="edit-pen" title="个人信息" isLink @click="navTo('/pages/set/userInfo', {login: true})"></u-cell>
|
||
<u-cell icon="setting" title="账号安全" isLink @click="navTo('/pages/set/set', {login: true})"></u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapGetters } from 'vuex'
|
||
import { isLogin } from '@/common/js/util.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderCount: { // TODO 芋艿：读取
|
||
c0: 1,
|
||
c1: 2,
|
||
c2: 3,
|
||
c3: 4
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo']),
|
||
...mapGetters(['hasLogin']),
|
||
},
|
||
onShow() {
|
||
// 获得用户信息 TODO 芋艿：
|
||
// if (isLogin()) {
|
||
// this.$store.dispatch('obtainUserInfo');
|
||
// }
|
||
// TODO 芋艿：获得订单数量
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
padding-bottom: 20rpx;
|
||
}
|
||
.user-wrapper {
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding-top: calc(var(--status-bar-height) + 52rpx);
|
||
padding-bottom: 6rpx;
|
||
.user {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 5;
|
||
padding: 20rpx 30rpx 60rpx;
|
||
.avatar {
|
||
flex-shrink: 0;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 100px;
|
||
margin-right: 24rpx;
|
||
border: 4rpx solid #fff;
|
||
background-color: #fff;
|
||
}
|
||
.username {
|
||
font-size: 34rpx;
|
||
color: #fff;
|
||
}
|
||
.group {
|
||
align-self: flex-start;
|
||
padding: 10rpx 14rpx;
|
||
margin: 16rpx 10rpx; // 10rpx 避免距离昵称太近
|
||
font-size: 20rpx;
|
||
color: #fff;
|
||
background-color: rgba(255, 255, 255,.3);
|
||
border-radius: 100rpx;
|
||
}
|
||
.login-box {
|
||
font-size: 36rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.user-background {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 330rpx;
|
||
}
|
||
.user-background-arc-line {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 9;
|
||
width: 100%;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.order-wrap {
|
||
width: 700rpx;
|
||
margin: 20rpx auto 0;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
.order-header {
|
||
padding: 28rpx 20rpx 6rpx 26rpx;
|
||
.title {
|
||
flex: 1;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 700;
|
||
}
|
||
.more {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
.icon-you {
|
||
margin-left: 4rpx;
|
||
font-size: 20rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
.order-list {
|
||
display:flex;
|
||
justify-content: space-around;
|
||
padding: 20rpx 0;
|
||
.item{
|
||
flex-direction: column;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
position: relative;
|
||
.mix-icon {
|
||
font-size: 50rpx;
|
||
margin-bottom: 20rpx;
|
||
color: #fa436a;
|
||
}
|
||
.icon-shouhoutuikuan {
|
||
font-size: 44rpx;
|
||
}
|
||
.number {
|
||
position: absolute;
|
||
right: 22rpx;
|
||
top: 6rpx;
|
||
min-width: 34rpx;
|
||
height: 34rpx;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
padding: 0 8rpx;
|
||
font-size: 18rpx;
|
||
color: #fff;
|
||
border: 2rpx solid #fff;
|
||
background-color: $base-color;
|
||
border-radius: 100rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|