fix: 调整商城里面的个人中心页面

pages/user/index.vue

@@ -1092,9 +1092,8 @@
 			line-height: 88rpx;
 			text-align: center;
 			background-color: #fff;
-			font-size: 18px;
-			color: #333;
-			font-weight: 550;
+			font-size: 34rpx;
+			color: #070707;
 			display: none;
 
 			&.show {
@@ -1174,6 +1173,7 @@
 		padding: 12rpx 24rpx;
 
 		&-info {
+			padding: 0 16rpx;
 			@include u-flex(row, flex-start, flex-start);
 
 			&-name {
@@ -1230,7 +1230,7 @@
 		&-menu {
 			background: #FFFFFF;
 			border-radius: 16rpx;
-			padding: 30rpx 32rpx 40rpx 24rpx;
+			padding: 30rpx 30rpx 40rpx 24rpx;
 			margin: 20rpx 0;
 
 			&-title {
@@ -1380,15 +1380,14 @@
 		align-items: center;
 		justify-content: center;
 		flex: 1;
-		margin: 0 30rpx;
-		height: 80rpx;
+		height: 110rpx;
 		background: #fff;
 		// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
-		border-radius: 40rpx;
-		font-size: 30rpx;
+		border-radius: 24rpx;
 		font-family: PingFang SC;
-		font-weight: 500;
-		color: #333;
+		font-weight: 400;
+		font-size: 36rpx;
+		color: rgba(0,0,0,0.65);
 	}
 
 	.popupBox {

pages_mall/my.vue

@@ -5,7 +5,7 @@
 			<view class="custom-header" :style="{paddingTop: statusBarHeight + 'px'}">
 				<view class="header-content">
 					<view class="back-btn" @click="goBack">
-						<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
+						<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
 					</view>
 					<text class="title">个人中心</text>
 					<view class="placeholder"></view>
@@ -13,68 +13,98 @@
 			</view>
 
 			<view class="bg"></view>
-			<view class="user-info-box" :style="{marginTop: (statusBarHeight + 44) + 'px'}">
+			<view class="user-info-box" :style="{marginTop: (statusBarHeight + 60) + 'px'}">
 				<view class="portrait-box" @click="checkLogin">
 					<image class="portrait" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
 				</view>
 				<view class="info-box" @click="checkLogin">
-					<text class="username">{{isLogin ? (userInfo.nickName || '用户' + userInfo.userId) : '请登录'}}</text>
+					<text
+						class="username ellipsis2">{{isLogin ? (userInfo.nickName || '用户' + userInfo.userId) : '请登录'}}</text>
 					<text class="user-id" v-if="isLogin">ID: {{userInfo.userId}}</text>
 				</view>
 			</view>
 		</view>
 
 		<view class="cover-container">
-			<!-- 我的订单 -->
-			<view class="order-section">
-				<view class="sec-header" @click="navTo('/pages_user/user/storeOrder?status=')">
-					<text class="sec-title">我的订单</text>
-					<view class="more">
-						<text>全部订单</text>
-						<u-icon name="arrow-right" size="12" color="#999"></u-icon>
+			<scroll-view scroll-y class="scroll-content" @scrolltolower="getGoodsProducts">
+				<!-- 我的订单 -->
+				<view v-if="orderMenu.length>0" class="order-section">
+					<view class="sec-header" @click="navTo('/pages_user/user/storeOrder?status=')">
+						<text class="sec-title">我的订单</text>
+						<view class="more">
+							<text>全部订单</text>
+							<u-icon name="arrow-right" size="20" color="#999"></u-icon>
+						</view>
 					</view>
-				</view>
-				<view class="order-grid">
-					<view class="order-item" v-for="(item, index) in orderMenu" :key="index" @click="handleMenu(item)">
-						<image :src="item.icon" mode="aspectFit" class="order-icon"></image>
-						<text>{{item.name}}</text>
+					<view class="order-grid">
+						<view class="order-item" v-for="(item, index) in orderMenu" :key="index"
+							@click="handleMenu(item)">
+							<image :src="item.icon" mode="aspectFit" class="order-icon"></image>
+							<text>{{item.name}}</text>
+						</view>
 					</view>
 				</view>
-			</view>
 
-			<!-- 常用功能 -->
-			<view class="history-section icon">
-				<view class="list-item" @click="navTo('/pages/user/address')">
-					<image class="es-icon-48" src="/static/image/my/address_management_icon.png" mode=""></image>
-					<text>地址管理</text>
-					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
-				</view>
-				<view class="list-item" @click="navTo('/pages_shopping/shopping/myCoupon')">
-					<image class="es-icon-48" src="/static/image/my/coupon_collection.png" mode=""></image>
-					<text>优惠券</text>
-					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
-				</view>
-				<view class="list-item" @click="navTo('/pages/user/about')">
-					<image class="es-icon-48" src="/static/image/my/feedback_icon.png" mode=""></image>
-					<text>关于我们</text>
-					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
+				<!-- 常用工具 -->
+				<view v-if="toolMenu.length>0" class="order-section">
+					<view class="sec-header">
+						<text class="sec-title">常用工具</text>
+					</view>
+					<view class="order-grid" style="padding: 0;">
+						<view class="order-item" style="width: 25%;" v-for="(item, index) in toolMenu" :key="index"
+							@click="navToToolPages(item)">
+							<image :src="item.icon" mode="aspectFit" class="order-icon"></image>
+							<text>{{item.name}}</text>
+						</view>
+					</view>
 				</view>
-				<!-- <view class="list-item" @click="navTo('/pages/user/wallet/wallet')">
+
+				<view v-if="false" class="history-section icon">
+					<view class="list-item" @click="navTo('/pages/user/address')">
+						<image class="es-icon-48" src="/static/image/my/address_management_icon.png" mode=""></image>
+						<text>地址管理</text>
+						<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
+					</view>
+					<view class="list-item" @click="navTo('/pages_shopping/shopping/myCoupon')">
+						<image class="es-icon-48" src="/static/image/my/coupon_collection.png" mode=""></image>
+						<text>优惠券</text>
+						<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
+					</view>
+					<view class="list-item" @click="navTo('/pages/user/about')">
+						<image class="es-icon-48" src="/static/image/my/feedback_icon.png" mode=""></image>
+						<text>关于我们</text>
+						<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
+					</view>
+					<!-- <view class="list-item" @click="navTo('/pages/user/wallet/wallet')">
 					<u-icon name="wallet" size="20" color="#e07472"></u-icon>
 					<text>我的钱包</text>
 					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
 				</view> -->
-				<!-- <view class="list-item">
+					<!-- <view class="list-item">
 					<u-icon name="server-fill" size="20" color="#5fcda2"></u-icon>
 					<text>联系客服</text>
 					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
 				</view> -->
-				<!-- <view class="list-item">
+					<!-- <view class="list-item">
 					<u-icon name="setting" size="20" color="#9789f7"></u-icon>
 					<text>设置</text>
 					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
 				</view> -->
-			</view>
+				</view>
+
+				<view class="login-btn" @click="showLogout">退出登录</view>
+				<view v-if="likeGoodsList.length>0" class="like-product">
+					<view class="likeTitleTextClass">猜你喜欢</view>
+					<GoodsList :list="likeGoodsList" :loading="likeGoodsLoading" style="padding: 0;"
+						:has-more="likeGoodsList.length >= total ? false :true" @itemClick="showProduct"
+						@loadMore="getGoodsProducts" />
+				</view>
+			</scroll-view>
+		</view>
+
+		<view class="complaintViewClass">
+			<image src="/static/image/my/complaint_icon.png" mode="aspectFill"></image>
+			<view class="complaintViewTextClass">客服投诉</view>
 		</view>
 	</view>
 </template>
@@ -83,7 +113,10 @@
 	import {
 		getUserInfo
 	} from '@/api/user'
-
+	import GoodsList from './components/GoodsList.vue'
+	import {
+		getGoodsProducts
+	} from '@/api/product'
 	export default {
 		data() {
 			return {
@@ -116,14 +149,98 @@
 						icon: '/static/image/mall/after_sales.png',
 						url: '/pages_user/user/refundOrderList'
 					}
-				]
+				],
+				toolMenu: [{
+						name: '收货地址',
+						icon: '/static/image/my/address_management_icon.png',
+						url: '/pages/user/address'
+					},
+					{
+						name: '积分商城',
+						icon: '/static/image/my/points_mall.png',
+						url: ''
+					},
+					{
+						name: '优惠券',
+						icon: "/static/image/my/coupon_collection.png",
+						url: "/pages_shopping/shopping/myCoupon"
+					},
+					{
+						name: '我的足迹',
+						icon: '/static/image/my/my_footprints.png',
+						url: '/pages_user/user/storeProductRelation'
+					},
+					{
+						name: '专属客服',
+						icon: '/static/image/my/customer_service.png',
+						isService: true,
+						url: ''
+					},
+					{
+						name: '制单管理',
+						icon: '/static/image/my/document_management.png',
+						documentPreparation: true,
+						url: ''
+					},
+					{
+						name: '销售管理',
+						icon: '/static/image/my/sales_management.png',
+						salesManagement: true,
+						url: ''
+					},
+				],
+				likeGoodsList: [],
+				likeGoodsLoading: false,
+				likeGoodsHasMore: false,
+				page: {
+					page: 1,
+					pageSize: 10
+				},
+				total: 0,
 			}
 		},
+		components: {
+			GoodsList
+		},
 		created() {
 			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 			this.checkLoginStatus();
+			this.getGoodsProducts()
 		},
 		methods: {
+			getGoodsProducts() {
+				var that = this;
+				if (that.likeGoodsHasMore == true || that.likeGoodsLoading == true) return;
+				that.likeGoodsLoading = true;
+				uni.showLoading({
+					title: "加载中..."
+				})
+				getGoodsProducts(that.page).then(
+					res => {
+						if (res.code == 200) {
+							that.total = res.data.total;
+							that.likeGoodsList.push.apply(that.likeGoodsList, res.data.list);
+							that.likeGoodsLoading = false;
+							that.likeGoodsHasMore = that.likeGoodsList.length < that.total ? false : true;
+							that.page.page = that.page.page + 1;
+							uni.hideLoading()
+						}
+					},
+					err => {
+						uni.hideLoading()
+						uni.showToast({
+							title: err.msg,
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				);
+			},
+			showProduct(item) {
+				uni.navigateTo({
+					url: '/pages/shopping/productDetails?productId=' + item.productId
+				})
+			},
 			goBack() {
 				uni.showTabBar()
 				uni.switchTab({
@@ -160,6 +277,51 @@
 					url: url
 				});
 			},
+			navToToolPages(e) {
+				if (e.isService && !e.url) {
+					this.toCompany()
+					return
+				}
+				if (e.documentPreparation && !e.url) {
+					this.documentPreparationFun()
+					return
+				}
+				if (e.salesManagement && !e.url) {
+					this.documentPreparationFun()
+					return
+				}
+				uni.navigateTo({
+					url: e.url
+				});
+			},
+			documentPreparationFun() {
+				if (this.$checkCompanyUserLoginState()) {
+					uni.navigateTo({
+						url: '/pages_company/index'
+					})
+				} else {
+					uni.navigateTo({
+						url: '/pages_company/auth/login'
+					})
+				}
+			},
+			toCompany() {
+				if (this.$isLogin()) {
+					var token = uni.getStorageSync('CompanyUserToken');
+					if (token) {
+						uni.navigateTo({
+							url: '/pages/company/index'
+						})
+					} else {
+						uni.navigateTo({
+							url: '/pages/company/login'
+						})
+					}
+				} else {
+					this.$showLoginPage();
+				}
+			},
+
 			handleMenu(item) {
 				if (!this.isLogin) {
 					uni.navigateTo({
@@ -182,9 +344,17 @@
 </script>
 
 <style scoped lang="scss">
+	@mixin u-flex($flexD, $alignI, $justifyC) {
+		display: flex;
+		flex-direction: $flexD;
+		align-items: $alignI;
+		justify-content: $justifyC;
+	}
+
 	.my-page {
 		height: 100%;
 		background-color: #F4F6F7;
+		position: relative;
 	}
 
 	.custom-header {
@@ -199,12 +369,11 @@
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			padding: 0 30rpx;
+			padding: 0 24rpx;
 
 			.title {
-				color: #fff;
-				font-size: 36rpx;
-				font-weight: bold;
+				font-size: 34rpx;
+				color: #070707;
 			}
 
 			.back-btn,
@@ -219,7 +388,7 @@
 	}
 
 	.user-section {
-		height: 420rpx;
+		height: 430rpx;
 		position: relative;
 		overflow: hidden;
 
@@ -229,7 +398,11 @@
 			top: 0;
 			width: 100%;
 			height: 100%;
-			background: linear-gradient(to bottom, #FF233C, #FFF5F5);
+			// background: linear-gradient(to bottom, #FF233C, #FFF5F5);
+			background-image: url("@/static/images/bg.png");
+			background-size: contain;
+			background-repeat: no-repeat;
+			background-position: top;
 		}
 
 		.user-info-box {
@@ -237,12 +410,12 @@
 			align-items: center;
 			position: relative;
 			z-index: 1;
-			padding: 0 30rpx;
+			padding: 0 46rpx;
 
 			.portrait-box {
-				width: 130rpx;
-				height: 130rpx;
-				border: 5rpx solid rgba(255, 255, 255, 0.5);
+				width: 150rpx;
+				height: 150rpx;
+				border: 4rpx solid #FFFFFF;
 				border-radius: 50%;
 				overflow: hidden;
 				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
@@ -255,49 +428,48 @@
 			}
 
 			.info-box {
+				width: calc(100vw - 260rpx);
 				display: flex;
 				flex-direction: column;
-				margin-left: 24rpx;
-				color: #fff;
+				margin-left: 20rpx;
 
 				.username {
-					font-size: 38rpx;
+					font-size: 40rpx;
 					font-weight: bold;
+					color: #000000D9;
 					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
 				}
 
 				.user-id {
-					font-size: 24rpx;
-					margin-top: 10rpx;
-					opacity: 0.9;
+					font-size: 32rpx;
+					color: rgba(0, 0, 0, 0.85);
+					margin-top: 20rpx;
 				}
 			}
 		}
 	}
 
 	.cover-container {
-		margin-top: -100rpx;
-		padding: 0 30rpx;
+		margin-top: -110rpx;
+		padding: 0 24rpx;
 		position: relative;
 		padding-bottom: 120rpx;
 
 		.order-section {
 			background: #fff;
-			border-radius: 20rpx;
-			padding: 20rpx 0;
-			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+			border-radius: 24rpx;
+			padding: 30rpx 24rpx 40rpx 24rpx;
+			margin-bottom: 30rpx;
 
 			.sec-header {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				padding: 0 30rpx 20rpx;
-				border-bottom: 1rpx solid #f5f5f5;
 
 				.sec-title {
-					font-size: 30rpx;
 					font-weight: bold;
-					color: #333;
+					font-size: 40rpx;
+					color: rgba(0, 0, 0, 0.85);
 				}
 
 				.more {
@@ -305,32 +477,35 @@
 					align-items: center;
 
 					text {
-						font-size: 24rpx;
-						color: #999;
-						margin-right: 6rpx;
+						font-size: 32rpx;
+						color: rgba(0, 0, 0, 0.65);
+						margin-right: 10rpx;
 					}
 				}
 			}
 
 			.order-grid {
 				display: flex;
-				justify-content: space-around;
-				padding: 30rpx 0 10rpx;
+				// justify-content: space-around;
+				flex-wrap: wrap;
+				padding: 0 10rpx;
 
 				.order-item {
+					width: 33.3%;
 					display: flex;
 					flex-direction: column;
 					align-items: center;
+					margin-top: 30rpx;
 
 					.order-icon {
-						width: 56rpx;
-						height: 56rpx;
-						margin-bottom: 12rpx;
+						width: 60rpx;
+						height: 60rpx;
+						margin-bottom: 10rpx;
 					}
 
 					text {
-						font-size: 24rpx;
-						color: #666;
+						font-size: 36rpx;
+						color: rgba(0, 0, 0, 0.85);
 					}
 				}
 			}
@@ -369,4 +544,60 @@
 			}
 		}
 	}
+
+	.scroll-content {
+		height: calc(100vh - 450rpx);
+	}
+
+	.login-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		height: 110rpx;
+		background: #fff;
+		border-radius: 24rpx;
+		font-family: PingFang SC;
+		font-weight: 400;
+		font-size: 36rpx;
+		color: rgba(0, 0, 0, 0.65);
+	}
+
+	.like-product {
+		width: 100%;
+		margin-top: 40rpx;
+	}
+
+	.likeTitleTextClass {
+		font-weight: 600;
+		font-size: 40rpx;
+		color: #222222;
+		margin-bottom: 30rpx;
+	}
+
+	.complaintViewClass {
+		@include u-flex(column, center, center);
+		position: fixed;
+		right: 22rpx;
+		bottom: 400rpx;
+
+		image {
+			width: 132rpx;
+			height: 112rpx;
+		}
+
+		.complaintViewTextClass {
+			@include u-flex(row, center, center);
+			width: 152rpx;
+			height: 52rpx;
+			background: linear-gradient(135deg, #FF5B6E 1.51%, #FC1D37 100%);
+			border-radius: 26rpx;
+			font-family: DOUYINSANSBOLD, DOUYINSANSBOLD;
+			font-weight: normal;
+			font-size: 30rpx;
+			color: #FFFFFF;
+			margin-top: -13rpx;
+			z-index: 10;
+		}
+	}
 </style>