<template>
<view class="content">
<view class="main-bg"></view>
<view class="page-content">
<view class="user-info-box" @click="gologin" v-if="!userData.userName">
<image class="user-image" src="@/static/images/userDefaultHead.png" mode="widthFix"></image>
<view class="user-info">
<view class="user-logoin-title">点击登录</view>
<view class="user-logoin-lable">登录后享受更多权益~</view>
</view>
</view>
<view class="user-info-box" v-else>
<image class="user-image" :src="userData.headImage" mode="widthFix" style="border-radius: 50%;"></image>
<view class="user-info">
<view class="user-logoin-title mb5">{{userData.userName}}</view>
<view class="user-level" v-if="mainInfo.flag">
<view class="iconfont iconVIP mr5"></view>
<view>VIP用户</view>
</view>
</view>
<image class="user-info-right" src="" mode=""></image>
</view>
<view class="user-activity">
<view class="mr20" @click="entrustClick()">
<view class="font18">{{mainInfo.entrustNo ? mainInfo.entrustNo : 0}}</view>
<view class="font10">共享种植</view>
</view>
<view class="mr20">|</view>
<view class="mr20" @click="integralClick()">
<view class="font18">{{mainInfo.totalIntegral ? mainInfo.totalIntegral : 0}}</view>
<view class="font10">我的积分</view>
</view>
<view class="mr20">|</view>
<view @click="couponClick()">
<view class="font18">{{mainInfo.memberCouponNo ? mainInfo.memberCouponNo : 0}}</view>
<view class="font10">我的优惠券</view>
</view>
</view>
<view class="order-box">
<view class="order-item" @click="orderClick(2)">
<view class="iconfont icondaifukuan order-item-icon"></view>
<view class="order-item-text">待付款</view>
</view>
<view class="order-item" @click="orderClick(3)">
<view class="iconfont icondaifahuo order-item-icon"></view>
<view class="order-item-text">待发货</view>
</view>
<view class="order-item" @click="orderClick(4)">
<view class="iconfont icondaishouhuo order-item-icon"></view>
<view class="order-item-text">待收货</view>
</view>
<view class="order-item" @click="orderClick(5)">
<view class="iconfont icondaipingjia order-item-icon"></view>
<view class="order-item-text">待评价</view>
</view>
</view>
<view class="item-btn mt20" @click="addressClick()">
<view class="iconfont icondizhiguanli item-btn-icon"></view>
<view class="item-btn-text">收货地址</view>
<view class="iconfont iconfangxiang"></view>
</view>
<view class="line-box">
<view class="split-line"></view>
</view>
<view class="item-btn" @click="aboutUsClick()">
<view class="iconfont iconguanyu item-btn-icon"></view>
<view class="item-btn-text">关于我们</view>
<view class="iconfont iconfangxiang"></view>
</view>
</view>
<u-top-tips ref="uTips"></u-top-tips>
</view>
</template>
<script>
const NET = require('@/utils/request')
const API = require('@/config/api')
export default {
data() {
return {
integral: '',
userData: {
userId: '',
userName: '',
headImage: '',
},
mainInfo: {
flag: false,
entrustNo: '',
totalIntegral: '',
memberCouponNo: '',
},
}
},
onLoad() {
this.userData = uni.getStorageSync("userData")
},
onShow() {
this.getBaseData()
},
onPullDownRefresh() {
this.getBaseData()
setTimeout(() => {
uni.stopPullDownRefresh();
}, 500)
},
methods: {
// 获取全部数据
getBaseData() {
NET.request(API.getMainInfo + this.userData.userId, {}, 'GET').then(res => {
this.mainInfo = res.data
}).catch(error => {
this.$refs.uTips.show({
title: '获取个人信息失败',
type: 'warning',
})
})
},
// 我的种植
entrustClick() {
uni.navigateTo({
url: '/pagesMain/plantList'
});
},
// 我的积分
integralClick() {
uni.navigateTo({
url: '/pagesMain/integralList'
});
},
// 我的优惠券
couponClick() {
uni.navigateTo({
url: '/pagesMain/couponList'
});
},
// 地址管理
addressClick() {
uni.navigateTo({
url: '/pagesMain/addressList?type=1'
});
},
// 我的订单
orderClick(type) {
uni.navigateTo({
url: '/pagesMain/orderList?type=' + type
});
},
// 关于我们
aboutUsClick() {
uni.navigateTo({
url: '/pagesMain/aboutUs'
});
},
}
}
</script>
<style lang='scss'>
page {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100%;
background-color: #F3F3F3;
.main-bg {
width: 100%;
height: 195px;
position: relative;
background-size: 100% 195px;
background-position: center top;
background-repeat: no-repeat;
background-image: url(@/static/images/userbackground.png)
}
.page-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
z-index: 10;
margin-top: -200px;
position: relative;
.user-info-box {
width: 100%;
box-sizing: border-box;
padding: 30upx;
display: flex;
flex-direction: row;
align-items: center;
.user-image {
width: 130upx;
height: 130upx;
}
.user-info {
flex: 1;
display: flex;
flex-direction: column;
padding-left: 20upx;
box-sizing: border-box;
z-index: 10;
.user-logoin-title {
font-size: 36upx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
.user-level {
width: 70px;
height: 20px;
background: #FFFFFF;
color: #FF850C;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.user-logoin-lable {
font-size: 24upx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
margin-top: 20upx;
}
}
.user-info-right {
width: 30upx;
height: 30upx;
}
}
.user-activity {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
padding: 0 15px 15px 15px;
color: #FFFFFF;
}
.order-box {
width: 690upx;
height: 170upx;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
border-radius: 10upx;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 30upx;
z-index: 10;
.order-line {
width: 12upx;
height: 106upx;
}
.order-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.order-item-icon {
color: #52A63A;
font-size: 30px;
}
.order-item-text {
font-size: 28upx;
margin-top: 10upx;
font-weight: 500;
}
}
}
.item-btn {
width: 100%;
height: 100upx;
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
background-color: #fff;
padding: 0 30upx;
.item-btn-icon {
color: #52A63A;
font-size: 20px;
/* width: 48upx;
height: 48upx; */
}
.item-btn-text {
font-size: 28upx;
margin-left: 20upx;
font-weight: 500;
flex: 1;
color: rgba(102, 102, 102, 1);
}
}
.line-box {
height: 5px;
display: flex;
justify-content: center;
align-items: center;
background: #FFFFFF;
.split-line {
width: 100%;
height: 1px;
background: #EEEEEE;
}
}
.mt20 {
margin-top: 20upx;
}
.mb5 {
margin-bottom: 5px;
}
.mr5 {
margin-right: 5px;
}
.mr20 {
margin-right: 20px;
}
.font18 {
font-size: 18px;
}
.font10 {
font-size: 10px;
}
}
}
</style>