baiyuApp/pages_mall/my.vue

<template>
	<view class="my-page">
		<view class="user-section">
			<!-- 自定义头部 -->
			<view class="custom-header" :style="{paddingTop: statusBarHeight + 'px'}">
				<view class="header-content">
					<view class="back-btn" @click="goBack">
						<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
					</view>
					<text class="title">个人中心</text>
					<view class="placeholder"></view>
				</view>
			</view>

			<view class="bg"></view>
			<view class="user-info-box" :style="{marginTop: (statusBarHeight + 44) + '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 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">
			<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="26rpx" color="#999"></u-icon>
						</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>
					</view>
				</view>

				<!-- 常用工具 -->
				<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" style="width: 52rpx;height: 52rpx;"></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>

				<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">
					<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">
					<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 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" @click="navTo('/pages/user/feedback')">
			<image src="/static/image/my/complaint_icon.png" mode="aspectFill"></image>
			<view class="complaintViewTextClass">客服投诉</view>
		</view>
	</view>
</template>

<script>
	import IMSDK, {
		SessionType
	} from "openim-uniapp-polyfill";
	import {
		Igexin
	} from '@/pages_im/util/common.js';
	import {
		getUserInfo
	} from '@/api/user'
	import GoodsList from './components/GoodsList.vue'
	import {
		getGoodsProducts
	} from '@/api/product'
	export default {
		data() {
			return {
				statusBarHeight: 20,
				defaultAvatar: '/static/image/hall/my_heads_icon.png',
				isLogin: false,
				userInfo: {},
				orderMenu: [{
						name: '待付款',
						icon: '/static/image/mall/payment.png',
						state: 0
					},
					{
						name: '待发货',
						icon: '/static/image/mall/send_goods.png',
						state: 1
					},
					{
						name: '待收货',
						icon: '/static/image/mall/sou_goods.png',
						state: 2
					},
					{
						name: '已完成',
						icon: '/static/image/mall/completed.png',
						state: 3
					},
					{
						name: '售后/退款',
						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: '/pages_points/integralGoodsList'
					},
					{
						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: {
			showLogout() {
				//this.show=true;
				let that = this;
				uni.showActionSheet({
					title: "确认退出吗",
					itemList: ["确定"],
					success: function(res) {
						that.logout();
						that.isLogin = that.$isLogin()
						// uni.navigateTo({
						// 	url: '/pages/auth/loginIndex'
						// })
					}
				});
			},
			logout() {
				uni.clearStorage()
				this.$logout();
				let IMUserID = uni.getStorageSync('IMUserID');
				IMSDK.asyncApi(IMSDK.IMMethods.Logout, IMSDK.uuid()).then(() => {
						callingModule?.endCall();
						meetingModule?.endCall();
					}).catch((err) => console.log(err))
					.finally(() => {
						Igexin.unbindAlias(IMUserID);
						uni.removeStorage({
							key: "IMToken"
						});
						uni.removeStorage({
							key: "IMUserID"
						});
						uni.removeStorage({
							key: "IMHasLogin"
						});

					});

				this.user = this.defUser;
				this.coupons.expiredCount = 0;
				this.coupons.notUsedCount = 0;
				this.coupons.usedCount = 0;
			},
			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({
					//url: '/pages_im/pages/conversation/conversationList/index'
					url: '/pages/index/index'
				})
			},
			checkLoginStatus() {
				const token = uni.getStorageSync('AppToken');
				if (token) {
					this.isLogin = true;
					this.getUserInfo();
				} else {
					this.isLogin = false;
					this.userInfo = {};
				}
			},
			checkLogin() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/auth/loginIndex'
					});
				}
			},
			getUserInfo() {
				getUserInfo().then(res => {
					if (res.code == 200 && res.user) {
						this.userInfo = res.user;
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					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({
						url: '/pages/auth/loginIndex'
					});
					return;
				}

				if (item.url) {
					return uni.navigateTo({
						url: item.url
					});
				}
				uni.navigateTo({
					url: `/pages_user/user/storeOrder?status=${item.state}`
				})
			}
		}
	}
</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 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;

		.header-content {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;

			.title {
				font-size: 34rpx;
				color: #070707;
			}

			.back-btn,
			.placeholder {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.user-section {
		height: 430rpx;
		position: relative;
		overflow: hidden;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			// 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 {
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;
			padding: 0 46rpx;

			.portrait-box {
				width: 150rpx;
				height: 150rpx;
				border: 4rpx solid #FFFFFF;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
				background: #fff;

				.portrait {
					width: 100%;
					height: 100%;
				}
			}

			.info-box {
				width: calc(100vw - 260rpx);
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.username {
					font-size: 40rpx;
					font-weight: bold;
					color: #000000D9;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				.user-id {
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.85);
					margin-top: 20rpx;
				}
			}
		}
	}

	.cover-container {
		margin-top: -110rpx;
		padding: 0 24rpx;
		position: relative;
		padding-bottom: 120rpx;

		.order-section {
			background: #fff;
			border-radius: 24rpx;
			padding: 30rpx 24rpx 40rpx 24rpx;
			margin-bottom: 30rpx;

			.sec-header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.sec-title {
					font-weight: bold;
					font-size: 40rpx;
					color: rgba(0, 0, 0, 0.85);
				}

				.more {
					display: flex;
					align-items: center;

					text {
						font-size: 32rpx;
						color: rgba(0, 0, 0, 0.65);
						margin-right: 10rpx;
					}
				}
			}

			.order-grid {
				display: flex;
				// 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: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
					}

					text {
						font-size: 36rpx;
						color: rgba(0, 0, 0, 0.85);
					}
				}
			}
		}

		.history-section {
			background: #fff;
			border-radius: 20rpx;
			margin-top: 24rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
			padding: 10rpx 0;

			.list-item {
				display: flex;
				align-items: center;
				padding: 30rpx 30rpx;
				border-bottom: 1rpx solid #f5f5f5;
				position: relative;

				&:last-child {
					border-bottom: none;
				}

				text {
					flex: 1;
					font-size: 30rpx;
					color: #333;
					margin-left: 24rpx;
					font-weight: 500;
				}

				.arrow {
					margin-left: auto;
					opacity: 0.5;
				}
			}
		}
	}

	.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: bold;
		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>