qjd-user-uniapp/pages/user/index.vue

<template>
	<view class="content">
		<cover-image class="top-bg" src="@/static/images/userbackground.png"></cover-image>
		<view class="page-content">
			<view class="user-info-box" @click="gologin" v-if="JSON.stringify(item) =='{}' ">
				<image class="user-image" src="" 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 @click="goinfo">
				<image class="user-image" v-if="infoitem.headimg" :src="infoitem.headimg" mode="widthFix" style="border-radius: 50%;"></image>
				<image class="user-image" v-else src="" mode="widthFix"></image>
				<view class="user-info">
					<view class="user-logoin-title" v-if="infoitem.nickname">{{infoitem.nickname}}</view>
					<view class="user-logoin-title" v-else>{{infoitem.phone}}</view>
					
				</view>
				<image class="user-info-right" src="" mode=""></image>
			</view>
			<view class="user-activity">
				<view class="mr10">
					<view class="font18">50</view>
					<view class="font10">共享种植</view>
				</view>
				<view class="mr10">|</view>
				<view class="mr10">
					<view class="font18">150</view>
					<view class="font10">我的积分</view>
				</view>
				<view class="mr10">|</view>
				<view>
					<view class="font18">45</view>
					<view class="font10">我的优惠券</view>
				</view>
			</view>
			<view class="order-box">
				<view class="order-item" @click="orderTap(1)">
					<view class="iconfont icondaifukuan order-item-icon"></view>
					<view class="order-item-text">待付款</view>
				</view>
				<view class="order-item" @click="orderTap(2)">
					<view class="iconfont icondaifahuo order-item-icon"></view>
					<view class="order-item-text">待发货</view>
				</view>
				<view class="order-item" @click="orderTap(3)">
					<view class="iconfont icondaishouhuo order-item-icon"></view>
					<view class="order-item-text">待收货</view>
				</view>
				<image class="order-line" src="" mode="widthFix"></image>
				<view class="order-item" @click="orderTap(0)">
					<view class="iconfont icondaipingjia order-item-icon"></view>
					<view class="order-item-text">待评价</view>
				</view>
			</view>
			<!-- <view class="item-btn mt20" @click="gouserEvaluate">
				<view class="iconfont icondizhiguanli item-btn-icon"></view>
				<view class="item-btn-text">我的评价</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
			<view class="item-btn mt20" @click="couponClick">
				<view class="iconfont icondizhiguanli item-btn-icon"></view>
				<view class="item-btn-text">我的卡券</view>
				<view class="iconfont iconfangxiang"></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="addressClick">
				<view class="iconfont icondizhiguanli item-btn-icon"></view>
				<view class="item-btn-text">关于我们</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import userbackground from '../../static/images/userbackground.png'
	// const NET = require('../../../utils/request')
	// const API = require('../../../config/api')
	export default {
		data() {
			return {
				userbackground,
				item:{},
				infoitem:{},
			}
		},
		onShow() {
			// if(uni.getStorageSync('storage_key')){
			// 	this.item = uni.getStorageSync('storage_key');
			// }
			// this.getInfo()
		},
		methods: {
			// 获取会员信息
			getInfo() {
				NET.request(API.Info, {
					token: this.item.token,
				}, 'GET').then(res => {
					this.infoitem = res.data
					// console.log('个人信息',res)
				}).catch(res => {
					
				})
			},
			// 个人信息  登录页面
			gologin(){
				uni.navigateTo({
					url:'/pagesUser/userModule/login'
				})
			},
			goinfo(){
				uni.navigateTo({
					url:'/pagesUser/userModule/personalDetails?infoitem=' + JSON.stringify(this.infoitem)
				})
			},
			// 我的评论
			gouserEvaluate(){
				if(JSON.stringify(this.item) == '{}'){
					uni.navigateTo({
						url:'/pagesUser/userModule/login'
					})
				}else{
					uni.navigateTo({
						url:'/pagesGoods/goodsModule/userEvaluate'
					})
				}
				
			},
			// 分销中心
			godistribution(){
				if(JSON.stringify(this.item) == '{}'){
					uni.navigateTo({
						url:'/pagesUser/userModule/login'
					})
				}else{
					uni.navigateTo({
						url:'/pagesDistribution/distributionModule/index'
					})
				}
				
			},
			//我的优惠券
			couponClick(){
				uni.navigateTo({
					url:'/pagesUser/userModule/coupon'
				})
			},
			// 地址管理
			addressClick(){
				if(JSON.stringify(this.item) == '{}'){
					uni.navigateTo({
						url:'/pagesUser/userModule/login'
					})
				}else{
					uni.navigateTo({
						url:'/pagesUser/userModule/address'
					})
				}
				
			},
			// 我的售后
			goafterSale(){
				if(JSON.stringify(this.item) == '{}'){
					uni.navigateTo({
						url:'/pagesUser/userModule/login'
					})
				}else{
					uni.navigateTo({
						url:'/pagesOrder/orderModule/afterSale'
					})
				}
				
			},
			//判断是否是分销员
			getApplyState(){
				NET.request(API.HasApply,{
					tenantCode:this.currentId
				},'POST').then(res => {
					uni.hideLoading()
					this.slist = res.data
				}).catch(res => {
					uni.hideLoading()
				})
			},
			orderTap(type){
				if(JSON.stringify(this.item) == '{}'){
					uni.navigateTo({
						url:'/pagesUser/userModule/login'
					})
				}else{
					uni.navigateTo({
						url:'/pagesOrder/orderModule/index?type='+type
					})
				}
			}
		}
	}
</script>

<style lang='scss'>
	page {
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;
		/* background-color: #f8f8f8; */
		.top-bg{
			width: 100%;
			height: 175px;
		}
		.page-content{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			z-index: 10;
			margin-top: -185px;
			.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-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: 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;
			}
			.mt1{
				margin-top: 1upx;
			}
			.mr10{
				margin-right: 10px;
			}
			.font18{
				font-size: 18px;
			}
			.font10{
				font-size: 10px;
			}
		}
	}
</style>