123456

pages/user/user.vue

@@ -3,22 +3,37 @@
 		<!-- 用户信息 -->
 		<view class="user">
 			<!-- 背景图片 -->
-			<image src="../../static/img/img17.png" mode="scaleToFill"></image>
+			<image src="../../static/user/user19.png" mode="scaleToFill"></image>
 			<!-- 用户头像和信息 -->
 			<view class="infor">
 				<!-- 用户信息 -->
 				<view class="infor-left">
-					<image :src=" userInfo.avatar || '../../static/error/missing-face.png' "></image>
+					<view class="info-img">
+					<image :src=" userInfo.avatar || '../../static/error/missing-face.png' "></image>	
+					</view>
+					<view class="vip-img1" v-if="vipDj==1">
+						<image  src="../../static/user/vip1.png" mode=""></image>
+					</view>
+					<view class="vip-img2"  v-if="vipDj==2">
+						<image  src="../../static/user/vip2.png" mode=""></image>
+					</view>
+					<view class="vip-img3" v-if="vipDj==3">
+						<image  src="../../static/user/vip3.png" mode=""></image>
+					</view>
+					<view class="username">{{ userInfo.nickname || '游客' }}</view>
 					<view class="info-box">
-						<view class="username">{{ userInfo.nickname || '游客' }}</view>
-						<view class="phone" v-if="userInfo.phone">{{userInfo.phone | phone}}</view>
+
+						<view class="phone" v-if="userInfo.phone">ID:{{userInfo.phone | phone}}</view>
+						<view class="image">
+							<image src="../../static/user/user10.png" mode=""></image>
+						</view>
 					</view>
 				</view>
 				<!-- 设置 -->
-				<view class="infor-right" @click="nav('/pages/set/userinfo')">
+				<!-- <view class="infor-right" @click="nav('/pages/set/userinfo')">
 					<image src="../../static/img/img18.png" mode="scaleToFill"></image>
 					<view class="setting">设置</view>
-				</view>
+				</view> -->
 			</view>
 			<!-- 我的订单 -->
 			<view class="order-box">
@@ -50,66 +65,84 @@
 		<!-- 下部分 -->
 		<view class="item-box">
 			<!-- 我的余额 -->
-			<view class="order-section">
-				<view class="order-item" @click="nav('/pages/money/wallet')">
-					<image src="../../static/img/img26.png" mode="scaleToFill"></image>
-					<view class="text">我的余额</view>
+			<view class="item-box-box">
+				<view class="item-box-title">
+					我的资产
 				</view>
-				<view class="order-item" @click="nav('/pages/user/award')">
-					<image src="../../static/img/img23.png" mode="scaleToFill"></image>
-					<view class="text">我的佣金</view>
-				</view>
-				<view class="order-item" @click="nav('/pages/user/integral')">
-					<image src="../../static/img/img24.png" mode="scaleToFill"></image>
-					<view class="text">我的积分</view>
-				</view>
-				<view class="order-item" @click="nav('/pages/user/extension')">
-					<image src="../../static/img/img25.png" mode="scaleToFill"></image>
-					<view class="text">我的推广</view>
+				<view class="order-section">
+					<view class="order-item" @click="nav('/pages/money/wallet')">
+						<image src="../../static/user/user03.png" mode="scaleToFill"></image>
+						<view class="text">余额</view>
+					</view>
+					<view class="order-item" @click="nav('/pages/user/award')">
+						<image src="../../static/user/user18.png" mode="scaleToFill"></image>
+						<view class="text">奖金</view>
+					</view>
+					<view class="order-item" @click="nav('/pages/user/integral')">
+						<image src="../../static/user/user17.png" mode="scaleToFill"></image>
+						<view class="text">积分</view>
+					</view>
+					<view class="order-item" @click="nav('/pages/user/extension')">
+						<image src="../../static/user/user05.png" mode="scaleToFill"></image>
+						<view class="text">贡献值</view>
+					</view>
+					<view class="order-item" @click="nav('/pages/user/extension')">
+						<image src="../../static/user/user16.png" mode="scaleToFill"></image>
+						<view class="text">红包</view>
+					</view>
 				</view>
 			</view>
 			<!-- 底部列表 -->
 			<view class="btm">
 				<view class="ul-btm" @click="nav('/pages/user/jiedian')">
-					<image src="../../static/img/img27.png" mode="scaleToFill"></image>
-					<view class="text">我的接点</view>
-					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+					<image src="../../static/user/user09.png" mode="scaleToFill"></image>
+					<view class="btm-right">
+						<view class="text">我的推广</view>
+						<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+					</view>
 				</view>
 				<view class="ul-btm" @click="nav('/pages/user/shareQrCode')">
-					<image src="../../static/img/img28.png" mode="scaleToFill"></image>
-					<view class="text">邀请海报</view>
-					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
-				</view>
-				<view class="ul-btm" @click="nav('/pages/public/register')">
-					<image src="../../static/img/img29.png" mode="scaleToFill"></image>
-					<view class="text">会员注册</view>
-					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
-				</view>
-				<view class="ul-btm" @click="nav('/pages/user/registerList')">
-					<image src="../../static/img/img28.png" mode="scaleToFill"></image>
-					<view class="text">报单列表</view>
-					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+					<image src="../../static/user/user13.png" mode="scaleToFill"></image>
+					<view class="btm-right">
+						<view class="text">邀请海报</view>
+						<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+					</view>
 				</view>
 				<view class="ul-btm" @click="nav('/pages/set/address')">
-					<image src="../../static/img/img30.png" mode="scaleToFill"></image>
-					<view class="text">收货地址</view>
-					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+					<image src="../../static/user/user12.png" mode="scaleToFill"></image>
+					<view class="btm-right">
+						<view class="text">收货地址</view>
+						<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+					</view>
 				</view>
 				<view class="ul-btm" @click="open()">
-					<image src="../../static/img/img31.png" mode="scaleToFill"></image>
-					<view class="text">联系客服</view>
-					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+					<image src="../../static/user/user11.png" mode="scaleToFill"></image>
+					<view class="btm-right">
+						<view class="text">客服</view>
+						<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+					</view>
+				</view>
+				<view class="ul-btm" @click="nav('/pages/user/registerList')">
+					<image src="../../static/user/user07.png" mode="scaleToFill"></image>
+					<view class="btm-right">
+						<view class="text">设置</view>
+						<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+					</view>
 				</view>
+
+
 			</view>
 		</view>
 		<view class="u-tabbar">
 			<text>普丽惠莱企业管理（台州）有限公司</text>
 			<text>版权所有</text>
-			
+
 		</view>
 		<uni-popup ref="popup" type="center">
 			<view class="popup-box">
-				<view class="img"><image src="../../static/img/img009.png" mode=""></image></view>
+				<view class="img">
+					<image src="../../static/img/img009.png" mode=""></image>
+				</view>
 				<view class="mian">
 					<view class="delivery">
 						<view class="title">已经为您定制专属客服</view>
@@ -127,26 +160,37 @@
 </template>
 
 <script>
-	import { orderData, getUserInfo,service } from '@/api/user.js';
+	import {
+		orderData,
+		getUserInfo,
+		service
+	} from '@/api/user.js';
 	import uniPopup from '@/components/uni-popup/uni-popup.vue';
 	import uniCopy from '@/utils/uni-copy.js';
-	import { mapState, mapMutations } from 'vuex';
-	import { saveUrl, interceptor } from '@/utils/loginUtils.js';
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		saveUrl,
+		interceptor
+	} from '@/utils/loginUtils.js';
 	export default {
 		components: {
 			uniPopup
 		},
 		data() {
 			return {
-				text:'123465'
+				text: '123465',
+				vipDj:3,
 			}
 		},
 		filters: {
 			phone(val) {
 				let str = ''
-				if(val) {
+				if (val) {
 					val = "" + val;
-					str = val.substr(0,3) + "****" + val.substr(7)
+					str = val.substr(0, 3) + "****" + val.substr(7)
 				}
 				return str
 			}
@@ -177,12 +221,16 @@
 			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
 			loadBaseData() {
 				getUserInfo({})
-					.then(({ data }) => {
+					.then(({
+						data
+					}) => {
 						console.log(data)
 						this.setUserInfo(data);
 						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
 						orderData({})
-							.then(({ data }) => {
+							.then(({
+								data
+							}) => {
 								this.setOrderInfo(data);
 							})
 							.catch(e => {
@@ -201,29 +249,31 @@
 			},
 			nav(url) {
 				console.log(url)
-				if(!this.hasLogin) {
+				if (!this.hasLogin) {
 					// 保存地址
 					saveUrl();
 					// 登录拦截
 					interceptor();
-				}else {
+				} else {
 					uni.navigateTo({
 						url
 					})
 				}
-				
+
 			},
-			open(){
+			open() {
 				console.log('点击出现弹窗');
 				this.$refs.popup.open();
 			},
 			// 客服弹窗 - 复制微信
 			comfirm(value) {
-				
+
 				let content = value; //需要复制的内容
 				console.log('复制的内容:', content);
 				// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
-				const result = uniCopy({content});
+				const result = uniCopy({
+					content
+				});
 				if (result === false) {
 					uni.showToast({
 						title: '不支持'
@@ -245,21 +295,25 @@
 </script>
 
 <style lang="scss">
-	.u-tabbar{
+	.u-tabbar {
 		margin-top: 30rpx;
 		display: flex;
-		flex-direction: column;align-items: center;
+		flex-direction: column;
+		align-items: center;
 		width: 750rpx;
 		height: 200rpx;
 		position: relative;
+		background: #F3F3F3;
 		bottom: 0;
-		text{
+
+		text {
 			font-size: 26rpx;
 			color: #DCDFE6;
-			
+
 		}
-	
+
 	}
+
 	.container {
 		background-color: #fff;
 	}
@@ -279,33 +333,75 @@
 			position: absolute;
 			top: 0;
 			display: flex;
-			justify-content: space-around; // 水平平均分布
+			justify-content: center; // 水平平均分布
 			align-items: center; // 垂直居中 
 			margin-top: 138rpx;
 
 			.infor-left {
+				position: relative;
 				width: 100%;
 				height: 126.5rpx;
 				display: flex;
+				flex-direction: column;
 				align-items: center;
-				padding-left: 23rpx;
+				justify-content: center;
 
-				image {
-					width: 126.5rpx;
-					height: 126.5rpx;
-					border-radius: 50%;
-					flex-shrink: 0;
+				.info-img{
+					image {
+						width: 126rpx;
+						height: 126rpx;
+						border-radius: 50%;
+						overflow: hidden;
+						flex-shrink: 0;
+					}
+				}
+			
+				.vip-img1{
+					position: absolute;
+					width: 133rpx;
+					height: 32rpx;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+					
+				}
+				
+				.vip-img2{
+					position: absolute;
+					width: 91rpx;
+					height: 32rpx;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+					
+				}
+				
+				.vip-img3{
+					position: absolute;
+					width: 117rpx;
+					height: 32rpx;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+					
 				}
 
 				.info-box {
 					margin-left: 21rpx;
+					display: flex;
+
+					align-items: center;
 				}
 
 				.username {
 					font-size: 34rpx;
 					font-family: PingFang SC;
 					font-weight: bold;
-					color: #3F7C1F;
+					color: #FFFFFF;
+
 				}
 
 				.phone {
@@ -313,7 +409,18 @@
 					font-size: 26rpx;
 					font-family: PingFang SC;
 					font-weight: 500;
-					color: #3F7C1F;
+					color: #FFFFFF;
+
+				}
+
+				.image {
+					width: 30rpx;
+					height: 30rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
 				}
 			}
 
@@ -349,7 +456,7 @@
 			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
 			border-radius: 20rpx;
 			position: absolute;
-			top: 335rpx;
+			top: 365rpx;
 			// display: flex;
 			// justify-content: center; // 水平居中
 			margin-left: 20rpx;
@@ -408,6 +515,22 @@
 	.item-box {
 		padding-top: 80rpx;
 		height: 900rpx;
+		background: #f4f4f4;
+
+		.item-box-box {
+			background: #FFFFFF;
+			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+			border-radius: 20rpx;
+			margin: 20rpx;
+		}
+
+		.item-box-title {
+			font-size: 30rpx;
+			font-weight: bold;
+			color: #333333;
+			padding-top: 10rpx;
+			margin: 30rpx 0 0 30rpx;
+		}
 
 		// background-color: #fff;
 		// background-color: pink;
@@ -425,12 +548,12 @@
 				margin-top: 30rpx;
 
 				image {
-					width: 90rpx;
-					height: 90rpx;
+					width: 70rpx;
+					height: 60rpx;
 				}
 
 				.text {
-					margin-top: 10rpx;
+					margin: 10rpx 0 30rpx;
 					font-size: 26rpx;
 					color: #3B3B3B;
 				}
@@ -441,10 +564,12 @@
 	.btm {
 		margin-top: 40rpx;
 		padding-bottom: 200rpx;
-		margin-left: 42rpx;
+		margin: 30rpx;
+		border-radius: 20rpx;
+
 
 		.ul-btm {
-			width: 100%;
+			width: 750rpx;
 			height: 100rpx;
 			display: flex;
 			// justify-content: center; // 水平居中
@@ -457,22 +582,31 @@
 			}
 
 			.text {
-				margin-right: 468rpx;
+
 				margin-left: 30rpx;
 			}
 
+			.btm-right {
+				width: 620rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+
 			.jiantou {
 				width: 16rpx;
 				height: 30rpx;
 			}
 		}
 	}
+
 	.popup-box {
 		width: 522rpx;
 		height: 605rpx;
 		background-color: #ffffff;
 		border-radius: 20rpx;
 		position: relative;
+
 		.img {
 			position: relative;
 			top: -56rpx;
@@ -481,13 +615,14 @@
 			height: 132rpx;
 			display: flex;
 			justify-content: center;
+
 			image {
 				border-radius: 20rpx 20rpx 0 0;
 				width: 450rpx;
 				height: 132rpx;
 			}
 		}
-	
+
 		.mian {
 			margin-top: -44rpx;
 			display: flex;
@@ -497,33 +632,34 @@
 			background-color: #ffffff;
 			border-radius: 0 0 20rpx 20rpx;
 			text-align: center;
-	
+
 			.delivery {
 				font-size: 40rpx;
 				color: #333333;
 				display: flex;
 				align-items: center;
 				flex-direction: column;
-				.title {
-				}
+
+				.title {}
+
 				image {
 					margin-top: 48rpx;
 					width: 172rpx;
 					height: 160rpx;
 				}
 			}
-	
+
 			.nocancel {
 				font-size: 32rpx;
 				color: #333333;
 				margin-top: 14rpx;
 			}
-	
+
 			.comfirm-box {
 				margin-top: 52rpx;
 				display: flex;
 				// margin-bottom: 32rpx;
-	
+
 				// justify-content: space-around;
 				.cancel {
 					display: flex;
@@ -533,11 +669,11 @@
 					height: 74rpx;
 					border: 1px solid #dcc786;
 					border-radius: 38rpx;
-	
+
 					font-size: 32rpx;
 					color: #605128;
 				}
-	
+
 				.comfirm {
 					margin-left: 32rpx;
 					display: flex;
@@ -553,5 +689,4 @@
 			}
 		}
 	}
-	
 </style>