point-app/pages/my/index.vue

<template>
	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
		<view class="main">
			<view class="one">
				<view class="one_1" v-if="user&&user._id==null">
					<text class="iconfont icon-geren2" @click="toCommon('pages/login/index')"></text>
					<view class="name">未登录</view>
				</view>
				<view class="one_1" v-else>
					<view class="one_1_1" @tap="toNotice()">
						<uni-badge :text="notice_total" absolute="rightTop" size="normal">
							<text class="iconfont icon-xiaoxitongzhi"></text>
						</uni-badge>
					</view>
					<image class="image" :src="user.icon&&user.icon.length>0?user.icon[0].url:''"></image>
					<view class="name">
						<text>{{user.name||'暂无名称'}}</text>
						<text>普通会员</text>
					</view>
				</view>
				<view class="one_2">
					<view class="one_2_1" @click="toCommon('pagesMy/collection/market')">
						<text v-if="user._id">{{market_num||0}}</text>
						<text>收藏的商品</text>
					</view>
					<text class="link">|</text>
					<view class="one_2_1" @click="toCommon('pagesMy/collection/shop')">
						<text v-if="user._id">{{shop_num||0}}</text>
						<text>收藏的店铺</text>
					</view>
				</view>
			</view>
			<view class="two">
				<view class="two_1">
					<view class="title">我的订单</view>
					<view class="title">
						<text @click="toCommon('pagesMy/order/all')">全部订单</text>
						<text class="iconfont icon-jiantouyou"></text>
					</view>
				</view>
				<view class="two_2">
					<view class="orderList" v-for="(item, index) in orderList" :key="index" @click="toOrder(item)">
						<uni-badge :text="item.num" absolute="rightTop" size="normal">
							<view class="icon">
								<text class="iconfont" :class="[item.icon]"></text>
							</view>
							<text class="title">{{item.title}}</text>
						</uni-badge>
					</view>
				</view>
				<view class="two_1" v-for="(item, index) in menuList" :key="index" @click="toCommon(item.route)">
					<view class="title">{{item.title}}</view>
					<view class="title">
						<text v-if="user.id&&item.title=='我的尊荣'">{{integral||0}}分</text>
						<text v-if="item.title=='客服电话'" @tap="makePhone(serviceContactInfo.phone)">{{serviceContactInfo.phone||''}}</text>
						<text class="iconfont icon-jiantouyou"></text>
					</view>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				frameStyle: {
					useBar: true
				},
				// 用户信息
				user: {},
				// 客服信息
				serviceContactInfo: {},
				// 订单图标菜单
				orderList: [],
				// 菜单
				menuList: [],
				// 收藏商品
				market_num: '',
				// 收藏店铺
				shop_num: '',
				// 积分
				integral: '',
				// 未读消息
				notice_total: 0,
			};
		},
		onShow: async function() {
			const that = this;
			// 查询其他信息
			await that.searchOther();
			// 监听用户登录
			await that.watchLogin();
			// 监听用户登录
			await that.notice();
		},
		methods: {
			// 监听用户登录
			watchLogin() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async (res) => {
						let user = that.$jwt(res.data);
						if (user && user._id) {
							let arr;
							// 查询用户信息
							arr = await that.$api(`/user/${user._id}`, 'GET');
							if (arr.errcode == '0') that.$set(that, `user`, arr.data);
							// 查询收藏商品
							arr = await that.$api(`/storeGoods/userView`, 'GET', {
								customer: user._id
							})
							if (arr.errcode == '0') that.$set(that, `market_num`, arr.total);
							// 查询收藏店铺
							arr = await that.$api(`/storeShop/userView`, 'GET', {
								customer: user._id
							})
							if (arr.errcode == '0') that.$set(that, `shop_num`, arr.total);
							arr = await that.$api(`/point/computedTotal`, 'GET', {
								customer: user._id
							})
							if (arr.errcode == '0') that.$set(that, `integral`, Math.trunc(arr.data));
							that.searchOther();
						}
					},
					fail: (err) => {}
				})
			},
			// 消息通知
			notice() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async (res) => {
						let user = that.$jwt(res.data);
						if (user && user._id) {
							let res = await that.$api(`/notice`, 'GET', {
								customer: user._id,
								status: '0'
							});
							if (res.errcode == '0') that.$set(that, `notice_total`, res.total);
						}
					}
				})
			},
			// 查询其他信息
			async searchOther() {
				const that = this;
				let config = that.$config;
				let user = that.user;
				if (config) {
					if (user && user._id) {
						let res = await that.$api(`/viewUser/toDeal`, 'GET');
						if (res.errcode == '0') {
							for (let val of config.my_orderList) {
								if (val.type == "order") {
									if (val.status == '0') val.num = res.data.notPay
									if (val.status == '1') val.num = res.data.isPay
									if (val.status == '2') val.num = res.data.allSend
								} else {
									val.num = res.data.afterSale;
								}
							}
						}
					}
					// 订单图标菜单
					that.$set(that, `orderList`, config.my_orderList);
					// 菜单
					that.$set(that, `menuList`, config.my_menu);
				}
				let res;
				res = await that.$api(`/serviceContact`, 'GET');
				if (res.errcode == '0' && res.total > 0) {
					that.$set(that, `serviceContactInfo`, res.data[0])
				}
			},
			// 公共跳转
			toCommon(e) {
				uni.getStorage({
					key: 'token',
					success: function(res) {
						uni.navigateTo({
							url: `/${e}`
						})
					},
					fail: function(err) {
						uni.navigateTo({
							url: `/pages/login/index`
						})
					}
				});

			},
			// 系统消息页
			toNotice() {
				uni.navigateTo({
					url: `/pagesHome/notice/index`
				})
			},
			// 订单跳转页面 
			toOrder(e) {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: function(res) {
						if (e.type == 'order') {
							uni.navigateTo({
								url: `/${e.route}?status=${e.status}`
							})
						} else if (e.type == 'after') {
							uni.navigateTo({
								url: `/${e.route}`
							})
						}
					},
					fail: function(err) {
						uni.navigateTo({
							url: `/pages/login/index`
						})
					}
				});

			},
			// 拨打电话
			makePhone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			// 底部菜单跳转
			toPath(e) {
				let url = `/${e.route}`;
				if (e.type == '0') uni.redirectTo({
					url
				})
				else {
					uni.navigateTo({
						url
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			text-align: center;
			padding: 4vw 0;
			background-color: var(--fFB1Color);
			color: var(--mainColor);

			.one_1 {
				margin: 0 0 5vw 0;

				.one_1_1 {
					position: absolute;
					left: 55vw;

					.iconfont {
						font-size: 20px;
					}
				}

				image {
					width: 25vw;
					height: 25vw;
					border-radius: 25vw;
				}

				.iconfont {
					font-size: 80px;
				}

				.name {
					display: flex;
					justify-content: space-evenly;
					margin: 2vw 0;
					font-size: var(--font18Szie);
				}

				.image {
					border: 1px solid var(--f1Color);
				}
			}

			.one_2 {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				font-size: var(--font16Szie);

				.one_2_1 {
					display: flex;
					flex-direction: column;
				}

				.link {
					font-weight: bold;
				}
			}
		}

		.two {
			background-color: var(--f1Color);

			.two_1 {
				display: flex;
				justify-content: space-between;
				padding: 4vw;
				background-color: var(--mainColor);
				margin: 0 0 0.1vw 0;
				border-bottom: 1px solid var(--f1Color);

				.title {
					font-size: var(--font16Szie);

					text:first-child {
						margin: 0 1vw 0 0;
					}
				}

				.title:last-child {
					color: var(--f85Color);
					font-size: var(--font14Size);
				}
			}

			.two_1:nth-last-child(2) {
				margin: 0 0 2vw 0;
			}

			.two_1:nth-last-child(4) {
				margin: 0 0 2vw 0;
			}

			.two_2 {
				display: flex;
				justify-content: space-between;
				padding: 5vw;
				background-color: var(--mainColor);
				margin: 0 0 2vw 0;

				.orderList {
					text-align: center;

					.icon {
						.iconfont {
							font-size: 25px;
						}
					}

					.title {
						display: inline-block;
						margin: 2vw 0 0 0;
						font-size: var(--font12Size);
					}
				}
			}
		}
	}
</style>