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.
shop-app/pages/account/index.vue

213 lines
5.0 KiB

<!--
* @Author
components: { UiCell },: ch
* @Date: 2019-08-22 19:41:20
* @LastEditors: ch
* @LastEditTime: 2022-04-29 22:58:50
* @Description: file content
-->
<template>
<view>
<view class="header">
<u-badge class="header--badge" max="99" :value="$store.state.sessionMsgCount"
@click="$Router.push('/messageGroup')"></u-badge>
<image class="header--msg" @click="$Router.push('/messageGroup')" src="@/static/account/xx.png" />
</view>
<UiCell class="header--cell" :title="userInfo.nickname" label="第一个青春是上帝给的..."
@click="$Router.push('/setUserInfo')">
<image slot="icon" class="head-img" :src="userInfo.avatar || require('@/static/account/tx.png')" shape="circle" />
</UiCell>
<view class="order">
<view class="order--title">
<text>我的订单</text>
<text class="order--title-more" @click="$Router.push('/orderList')"></text>
</view>
<view class="order-tabs">
<view class="order-tabs--item" @click="$Router.push('/orderList?tab=1')">
<u-badge class="item-badge" max="99" :value="statistic.unpaidCount"></u-badge>
<image class="item-icon" src="@/static/account/fk.png"/>
<view>待付款</view>
</view>
<view class="order-tabs--item" @click="$Router.push('/orderList?tab=3')">
<u-badge class="item-badge" max="99" :value="statistic.waitDeliveryCount"></u-badge>
<image class="item-icon" src="@/static/account/fh.png"/>
<view>待发货</view>
</view>
<view class="order-tabs--item" @click="$Router.push('/orderList?tab=4')">
<u-badge class="item-badge" max="99" :value="statistic.deliveredCount"></u-badge>
<image class="item-icon" src="@/static/account/sh.png"/>
<view>待收货</view>
</view>
</view>
</view>
<view class="cell">
<UiCell title="退货/售后" @click="$Router.push('/saleAfterList')">
<image slot="icon" class="cell--icon" src="@/static/account/tk.png" />
</UiCell>
<UiCell title="收货地址" @click="$Router.push('/addressList')">
<image slot="icon" class="cell--icon" src="@/static/common/dz.png" />
</UiCell>
<UiCell title="联系客服">
<image slot="icon" class="cell--icon" src="@/static/account/kf.png" />
</UiCell>
<UiCell title="设置" class="cell--last" @click="$Router.push('/setting')">
<image slot="icon" class="cell--icon" src="@/static/account/sz.png" />
</UiCell>
</view>
</view>
</template>
<script>
import UiCell from '../../components/UiCell.vue';
import { ApiGetCurrentUser } from '@/common/api/account'
import { ApiGetOrderStatistics } from '@/common/api/order'
export default {
components : { UiCell },
data(){
return {
userInfo : {},
statistic : {}
}
},
onLoad(){
},
onShow(){
this.getUserInfo();
this.getOrderStatistics();
},
methods: {
async getUserInfo(){
const {error, result} = await ApiGetCurrentUser();
if(error){
uni.$u.toast(error.message);
return false;
}
this.userInfo = result;
this.$store.commit('SET_USER_INFO', result);
},
async getOrderStatistics(){
const {error, result} = await ApiGetOrderStatistics();
if(error){
uni.$u.toast(error.message);
return false;
}
this.statistic = result;
}
}
}
</script>
<style lang="scss">
page {
background: url('@/static/account/bg.png') no-repeat top left $color-grey1;
background-size: 100%;
}
</style>
<style lang="scss" scoped>
.header{
/* #ifdef H5 */
height: 88rpx;
padding: 0 40rpx;
/* #endif */
/* #ifndef H5 */
height: 176rpx;
padding: 88rpx 40rpx 0;
/* #endif */
position: relative;
width: 100%;
&--msg{
width: 34rpx;
height: 40rpx;
float: right;
margin-top: 22rpx;
}
&--badge{
position: absolute;
right: 30rpx;
top: 10rpx;
z-index: 99;
border: 1px solid #fff;
}
&--cell{
border: 0;
padding: 0 60rpx 0 40rpx;
background: none;
}
}
.head-img{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: 30rpx;
}
.order{
width: 690rpx;
height: 260rpx;
background: $color-grey0;
border-radius: 16rpx;
margin: 40rpx auto;
padding: 30rpx;
// box-shadow: 0 0 13rpx 1px rgba(0, 0, 0, .05);
&--title{
display: flex;
justify-content: space-between;
align-items: center;
background: url('@/static/common/arrow.png') no-repeat center right;
background-size: 10rpx;
font-size: $font-size-base;
color: $color-grey6;
margin: 10rpx 0 46rpx;
}
&--title-more{
padding-right: 20rpx;
font-size: $font-size-sm;
color: $color-grey4;
}
&-tabs{
display: flex;
justify-content: space-around;
&--item{
text-align: center;
position: relative;
view{
font-size: $font-size-sm;
color: $color-grey5;
}
.item-icon{
width: 60rpx;
height: 60rpx;
}
.item-badge{
position: absolute;
top: -10rpx;
right: 0;
z-index: 99;
border: 1px solid #fff;
}
}
}
}
.cell{
margin: 30rpx;
border-radius: 16rpx;
background: $color-grey0;
padding: 0 40rpx;
&--icon{
width: 40rpx;
height: 40rpx;
margin: 0 10rpx;
}
&--last{
border: 0;
}
}
/deep/{
.header--cell .ui-cell--title{
font-weight: bold;
font-size: $font-size-lg;
}
}
</style>