<template>
|
<view class="mine">
|
<view class="head" :style="{ height: 'calc(' + (navHeight + statusbarHeight + 'px + 400rpx)') }">
|
<view class="head-bar" :style="{ height: navHeight + statusbarHeight + 'px' }">
|
<view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
|
<view class="head-bar-nav" :style="{ height: navHeight + 'px' }"></view>
|
</view>
|
<view class="user">
|
<view class="user-left">
|
<view class="user-image">
|
<image :src="userInfo.imgFullUrl" mode="widthFix"></image>
|
</view>
|
<view class="user-name">
|
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" v-if="!userInfo">获取手机号</button>
|
{{userInfo ? userInfo.nickname : '点击登录'}}
|
</view>
|
</view>
|
<view class="user-right" v-if="userInfo">
|
<view class="user-right-item" @click="jumpSettings">
|
<image src="/static/icon/ic_option@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="user-right-item" @click="jumpNotice">
|
<view class="user-right-item-tips" v-if="objNum && objNum.unRead === 1"></view>
|
<image src="/static/icon/ic_notice@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
<view class="cate">
|
<view class="cate-item">
|
<text>{{objNum ? objNum.cartTypeNum : 0}}</text>
|
<text>购物车</text>
|
</view>
|
<view class="cate-item">
|
<text>{{objNum ? objNum.member.integral : 0}}</text>
|
<text>积分</text>
|
</view>
|
<view class="cate-item">
|
<text>{{objNum ? objNum.couponNum : 0}}</text>
|
<text>优惠券</text>
|
</view>
|
<view class="cate-item">
|
<text>{{objNum ? objNum.collectNum : 0}}</text>
|
<text>收藏</text>
|
</view>
|
</view>
|
<view class="func">
|
<view class="func-top">
|
<view class="func-top-title">我的订单</view>
|
<view class="func-top-to" @click="jumpOrder">
|
全部订单
|
<image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="func-list">
|
<view class="func-list-item" @click="jumpOrder(0)">
|
<view class="func-list-item-num" v-if="orderNum && orderNum.waitPayOrders > 0">{{orderNum.waitPayOrders}}</view>
|
<image src="/static/icon/mine_ic_daifukuan@2x.png" mode="widthFix"></image>
|
<text>待支付</text>
|
</view>
|
<view class="func-list-item" @click="jumpOrder(1)">
|
<view class="func-list-item-num" v-if="orderNum && orderNum.waitOrders > 0">{{orderNum.waitOrders}}</view>
|
<image src="/static/icon/mine_ic_daifahuo@2x.png" mode="widthFix"></image>
|
<text>待发货/自提</text>
|
</view>
|
<view class="func-list-item" @click="jumpOrder(2)">
|
<view class="func-list-item-num" v-if="orderNum && orderNum.waitOrders > 0">{{orderNum.waitReceivedOrders}}</view>
|
<image src="/static/icon/mine_ic_daishouhuo@2x.png" mode="widthFix"></image>
|
<text>待收货</text>
|
</view>
|
</view>
|
</view>
|
<view class="guanggao">
|
<image src="/static/images/share@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="gn">
|
<view class="gn-item" @click="jump()">
|
<text>我是经销商</text>
|
<image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="gn-item">
|
<text>在线客服</text>
|
<image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="gn-item">
|
<text>关于我们</text>
|
<image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
computed: {
|
...mapState(['navHeight', 'statusbarHeight', 'openid', 'userInfo'])
|
},
|
data() {
|
return {
|
objNum: null,
|
orderNum: null
|
};
|
},
|
onLoad() {
|
this.getMyInfo()
|
this.ordersStatistics()
|
},
|
methods: {
|
jump() {
|
uni.navigateTo({
|
url: '/pages/login/login'
|
})
|
},
|
// 跳转消息
|
jumpNotice() {
|
uni.navigateTo({
|
url: '/pages/message/message'
|
})
|
},
|
// 跳转设置
|
jumpSettings() {
|
uni.navigateTo({
|
url: '/pages/settings/settings'
|
})
|
},
|
// 授权手机号
|
getphonenumber(e) {
|
this.$u.api.wxPhone({
|
code: e.detail.code,
|
openid: this.openid
|
}).then(res => {
|
if (res.code === 200) {
|
this.$store.commit('setUserInfo', res.data.member)
|
this.$store.commit('setToken', res.data.token)
|
}
|
})
|
},
|
// 获取收藏等数量
|
getMyInfo() {
|
this.$u.api.myInfo({})
|
.then(res => {
|
if (res.code === 200) {
|
this.objNum = res.data
|
}
|
})
|
},
|
// 订单统计
|
ordersStatistics() {
|
this.$u.api.ordersStatistics({})
|
.then(res => {
|
if (res.code === 200) {
|
this.orderNum = res.data
|
}
|
})
|
},
|
// 跳转订单列表
|
jumpOrder(status) {
|
if (status >= 0) {
|
uni.navigateTo({
|
url: '/pages/order/order?status=' + status
|
})
|
} else {
|
uni.navigateTo({
|
url: '/pages/order/order'
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #F9F9FB;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.mine {
|
width: 100%;
|
.head {
|
width: 100%;
|
height: 424rpx;
|
padding: 0 30rpx;
|
position: sticky;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
box-sizing: border-box;
|
background: linear-gradient(180deg, #C8F3FF 0%, #ffffff 100%);
|
|
.head-bar {
|
width: 100%;
|
|
.head-bar-nav {
|
width: 100%;
|
}
|
}
|
.guanggao {
|
width: 100%;
|
height: 140rpx;
|
margin-top: 30rpx;
|
image {
|
width: 100%;
|
}
|
}
|
.gn {
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
overflow: hidden;
|
margin-top: 30rpx;
|
.gn-item {
|
width: 100%;
|
height: 100rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
&:last-child {
|
border: none !important;
|
}
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
image {
|
width: 16rpx;
|
height: 28rpx;
|
}
|
}
|
}
|
.func {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
border-radius: 16rpx;
|
margin-top: 40rpx;
|
.func-top {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.func-top-title {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
.func-top-to {
|
display: flex;
|
align-items: center;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
image {
|
width: 8rpx;
|
height: 18rpx;
|
margin-left: 8rpx;
|
}
|
}
|
}
|
.func-list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
margin-top: 30rpx;
|
.func-list-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
.func-list-item-num {
|
position: absolute;
|
top: 0;
|
right: 0;
|
height: 32rpx;
|
line-height: 32rpx;
|
padding: 0 8rpx;
|
box-sizing: border-box;
|
border-radius: 50%;
|
background-color: #E4001D;
|
font-weight: 400;
|
font-size: 22rpx;
|
color: #FFFFFF;
|
}
|
image {
|
width: 60rpx;
|
height: 60rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #333333;
|
margin-top: 8rpx;
|
}
|
}
|
}
|
}
|
.cate {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
margin-top: 40rpx;
|
.cate-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
justify-content: space-between;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #555555;
|
}
|
}
|
}
|
}
|
.user {
|
width: 100%;
|
height: 108rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.user-left {
|
display: flex;
|
align-items: center;
|
.user-image {
|
width: 108rpx;
|
height: 108rpx;
|
border-radius: 50%;
|
overflow: hidden;
|
margin-right: 24rpx;
|
image {
|
width: 100%;
|
}
|
}
|
.user-name {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #111111;
|
position: relative;
|
button {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 9;
|
opacity: 0;
|
}
|
}
|
}
|
.user-right {
|
display: flex;
|
align-items: center;
|
.user-right-item {
|
width: 40rpx;
|
height: 40rpx;
|
position: relative;
|
margin-left: 40rpx;
|
.user-right-item-tips {
|
position: absolute;
|
top: -8rpx;
|
right: -8rpx;
|
width: 16rpx;
|
height: 16rpx;
|
border-radius: 50%;
|
background-color: #E4001D;
|
}
|
image {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
