new_beiliyou_user_app/pages/user/index.vue

<template>
	<view>
		<view class="top-cont" >
			<image class="bg" 
			src="https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736955760372.png" mode=""></image>
			<view class="top-inner">
				<!-- 这里是状态栏 -->
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view class="user-info">
					<view class="left">
						<view class="head-img" @click="navgetTo('/pages_user/user/personInfo')">
							<image :src="user.avatar==null?'/static/images/common/my_heads.png':user.avatar"
								mode="aspectFill"></image>
						</view>
						<view class="name-phone"  v-if="UserInfo">
							<view class="name">{{user.nickname}}
								<text class="fs24 ml12 base-color mb20 " v-if="user.isShow==1"
								>会员</text>
								<text class="fs24 ml12 mb20 " style="color: #666;" v-else
								>非会员</text>
							</view>
							<view class="phone">{{utils.parsePhone(user.phone)}}</view>
						</view>
						<view class="fs40 bold name-phone center " @click='getOrderCount()' 
						v-else>立即登录</view>
					</view>
					<view class="right">
						<!-- <uni-badge size="small" :text="msgNum" absolute="rightTop" type="error">
							<view class="set" @click="navgetTo('/pages_user/user/personInfo')">
								<image src="../../static/images/icon-set.png" mode=""></image>
							</view>
						</uni-badge> -->
						<uni-badge size="small" :text="msgNum" absolute="rightTop" type="error">
							<view class="msg-box" @click="navgetTo('/pages_user/user/message')">
								<image src="../../static/images/common/new_icon.png" mode=""></image>
							</view>
						</uni-badge>
					</view>


				</view>
				<!-- 我的订单 -->
				<view class="my-order">
					<view class="inner" v-if="user.isShow==1">
						<view class="title-box">
							<text class="title">我的订单</text>
							<view class="all-order" @click="showOrder('')">
								<text class="text">全部订单</text>
								<image src="../../static/images/common/arrow_right.png" mode=""></image>
							</view>
						</view>
						<view class="status-box">
							<uni-badge size="small" :text=count0 absolute="rightTop" type="error">
								<view class="item" @click="showOrder('0')">
									<image src="../../static/images/common/obligation.png" mode=""></image>
									<text class="text">待付款</text>
								</view>
							</uni-badge>
							<uni-badge size="small" :text=count1 absolute="rightTop" type="error">
								<view class="item" @click="showOrder('1')">
									<image src="../../static/images/common/pending_shipment.png" mode=""></image>
									<text class="text">待发货</text>
								</view>
							</uni-badge>
							<uni-badge size="small" :text=count2 absolute="rightTop" type="error">
								<view class="item" @click="showOrder('2')">
									<image src="../../static/images/common/dai_shouhuo.png" mode=""></image>
									<text class="text">待收货</text>
								</view>
							</uni-badge>
							<view class="item" @click="showOrder('3')">
								<image src="../../static/images/common/completed.png" mode=""></image>
								<text class="text">已完成</text>
							</view>
							<uni-badge size="small" :text=afterSalesCount absolute="rightTop" type="error">
								<view class="item" @click="navgetTo('/pages_user/user/refundOrderList')">
									<image src="../../static/images/common/after_sales.png" mode=""></image>
									<text class="text">售后/退款</text>
								</view>
							</uni-badge>
						</view>
					</view>
				</view>
				<view class="content">
					<!-- 常用工具 -->
					<view class="used-tools">
						<view class="title">常用工具</view>
						<view class="tools-list">
							<!-- <view 
								v-for="(item,index) in toolsArr" 
								:key="index" 
								@click="navgetTo(item.url)" 
								:class="(toolsArr.length - index) > toolsRemain?'item':'item no-marin-bottom'">
								<image :src="item.img" mode=""></image>
								<text class="text">{{ item.name }}</text>
								<button v-if="item.url == ''" class="contact-btn" open-type="contact"></button>
							</view> -->
							<!-- <view class="item" @click="navgetTo('/pages_user/user/doctorOrder')">
								<image src="../../static/images/my_ask.png" mode=""></image>
								<text class="text">我的问诊</text>
							</view> -->
							<!-- <view class="item" @click="navgetTo('/pages_user/user/prescribeOrder')">
								<image src="../../static/images/prescription.png" mode=""></image>
								<text class="text">我的处方</text>
							</view>
							<view class="item" @click="navgetTo('/pages_user/user/patient')">
								<image src="../../static/images/management.png" mode=""></image>
								<text class="text">就诊人管理</text>
							</view> -->
							<view class="item" @click="navgetTo('/pages_user/user/address')" v-if="user.isShow==1">
								<image :src="iconlist[0].icon" mode=""></image>
								<text class="text">收货地址</text>
							</view>
							<view class="item no-marin-bottom" @click="navgetTo('/pages_user/user/integral')">
								<image :src="iconlist[1].icon" mode=""></image>
								<text class="text">积分管理</text>
							</view>
							<view class="item no-marin-bottom" @click="navgetTo('/pages_shopping/shopping/myCoupon')">
								<image :src="iconlist[2].icon" mode=""></image>
								<text class="text">优惠券</text>
							</view>
							<view class="item no-marin-bottom"
								@click="navgetTo('/pages_user/user/storeProductRelation')">
								<image :src="iconlist[3].icon" mode=""></image>
								<text class="text">我的足迹</text>
							</view>
							<view class="item no-marin-bottom" @click="openH5('/h5/userAgreement')">
								<image :src="iconlist[4].icon" mode=""></image>
								<text class="text">用户协议</text>
							</view>
							<view class="item no-marin-bottom align-top" @click="openH5('/h5/privacyPolicy')">
								<image :src="iconlist[5].icon" mode=""></image>
								<text class="text">隐私保护</text>
							</view>
							<view class="item no-marin-bottom">
								<image :src="iconlist[6].icon" mode=""></image>
								<text class="text">专属客服</text>
								<button class="contact-btn" open-type="contact"></button>
							</view>
							<view v-if="user.isPromoter==0" class="item no-marin-bottom"
								@click="navgetTo('/pages_user/user/userTuiAdd')">
								<image :src="iconlist[7].icon" mode=""></image>
								<text class="text">申请健康大使</text>
							</view>
							<view v-if="user.isPromoter==1" class="item no-marin-bottom"
								@click="navgetTo('/pages_user/user/userTui')">
								<image src="../../static/images/my_promotion.png" mode=""></image>
								<text class="text">我的推广</text>
							</view>
							<view class="item no-marin-bottom" @click="navgetTo('/pages/home/cert')">
								<image :src="iconlist[8].icon" mode=""></image>
								<text class="text">资质证书</text>
							</view>

							<view class="item no-marin-bottom" @click="toManager()">
								<image :src="iconlist[9].icon" mode=""></image>
								<text class="text">销售管理</text>
							</view>
						</view>
					</view>
				</view>
				<view class="log-out" @click="loginout" v-if="UserInfo">退出登录</view>
				<view class="banner">
					<image class="radius10"
						src="https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736956202172.jpg" mode="widthFix">
					</image>
					<view class="tel_btn" @click="callService()"></view>
				</view>
				<!-- 退出登录按钮 -->
				<view class="like-product">
					<likeProduct ref="product" />
				</view>
			</view>

		</view>
		<!-- <tabbar :actindex="3"></tabbar> -->
	</view>
</template>

<script>
	import {
		getOrderCount
	} from '@/api/storeOrder'
	import {
		getUserInfo,geticon,checkLogin
	} from '@/api/user'
	import likeProduct from '@/components/likeProduct.vue'
	export default {
		components: {
			likeProduct
		},
		data() {
			return {
				theme:'beiliyou',
				count0: 0,
				count1: 0,
				count2: 0,
				afterSalesCount: 0,
				user: {
					isPromoter: 0,
					isWeixinAuth: 0,
					phone: "",
					nickname: "用户昵称",
					avatarUrl: "/static/images/detault_head.png"
				},
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// 消息数量
				msgNum: 0,
				iconlist:[],
				UserInfo:uni.getStorageSync('AppToken')
			};
		},
		computed: {
		    UserInfo() {
		        return uni.getStorageSync('AppToken')
		    }
		},
		onShow() {
			console.log("onshow")
			 this.UserInfo = uni.getStorageSync('AppToken') // 强制更新登录状态
			    this.geticon()
			    if(this.UserInfo) {
			        this.getUserInfo()
			        this.getOrderCount()
			        this.checkLogins()
			    }
		},
		onReachBottom() {
			console.log("onReachBottom")
			this.$refs.product.getGoodsProducts();
		},
		methods: {
			checkLogins(){
				checkLogin().then(res=>{
					if(res.code==200){
						console.log(res)
					}
				})
			},
			callService() {
				uni.makePhoneCall({
					phoneNumber: "010-53822802",
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},

			getOrderCount() {
				getOrderCount().then(
					res => {
						if (res.code == 200) {
							this.count0 = res.count0;
							this.count1 = res.count1;
							this.count2 = res.count2;
							this.afterSalesCount = res.afterSalesCount;
						}
					},
					rej => {}
				);
			},
			geticon(){
				geticon().then(res=>{
					this.iconlist=res.data
					console.log(res)
				})
			},
			toManager() {
				if (this.utils.checkCompanyUserLoginState()) {
					uni.navigateTo({
						url: '/pages_company/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages_company/auth/login'
					})
				}

			},
			openH5(url) {
				var requestPath = uni.getStorageSync('requestPath');
				uni.setStorageSync('url', requestPath + url);
				uni.navigateTo({
					url: '../home/h5'
				})
			},
			getUserInfo() {
				getUserInfo().then(
					res => {
						if (res.code == 200) {
							if (res.user != null) {
								uni.setStorageSync('users',this.user)
								 this.user = Object.assign({}, res.user) // 使用新对象触发响应式
								  uni.$forceUpdate() // 强制更新视图
							} else {
								this.utils.loginOut();
							}

						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			loginout(){
			    uni.removeStorageSync('AppToken')
			    uni.removeStorageSync('userInfo')
			    uni.removeStorageSync('users')
			    
			    // 响应式更新数据
			    this.UserInfo = null
			    this.user = {
			        isPromoter: 0,
			        isWeixinAuth: 0,
			        phone: "",
			        nickname: "用户昵称",
			        avatarUrl: "/static/images/detault_head.png"
			    }
			    
			    uni.showToast({ title: '已退出登录', icon: 'success' })
			    setTimeout(() => uni.reLaunch({ url: '/pages/home/index' }), 900)
			},
			// 跳转页面
			navgetTo(url) {
				this.utils.isLogin().then(res => {
					if (res) {
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 查看订单
			showOrder(status) {
				uni.navigateTo({
					url: '/pages_user/user/storeOrder?status=' + status
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-cont {
		width: 100%;
		height: 494upx;
		position: relative;
		// background-image: url(@/static/images/personl_top_bg.png);
		background-repeat: repeat-x;
		background-size: 40upx 100%;
		.bg{
			width: 100%;
			height: 380rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.top-inner {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;

			.user-info {
				padding: 88upx 30upx 0 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					position: relative;
					display: flex;

					.head-img {
						width: 120upx;
						height: 120upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 30upx;
						border: 4upx solid #FFFFFF;
						box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.1);

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name-phone {
						padding-top: 15upx;

						.name {
							font-size: 40upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 1;
						}

						.phone {
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 1;
							margin-top: 30upx;
						}
					}
				}

				.right {
					display: flex;
					align-items: center;
					justify-content: center;

					.msg-box {
						margin-left: 10upx;
						width: 44upx;
						height: 44upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.set {

						width: 44upx;
						height: 44upx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

			}

			.my-order {
				padding: 50upx 20upx 0;

				.inner {
					box-sizing: border-box;
					height: 245upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title-box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							font-size: 34upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #222222;
							line-height: 1;
						}

						.all-order {
							display: flex;
							align-items: center;

							.text {
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
							}

							image {
								width: 40upx;
								height: 40upx;
							}
						}
					}

					.status-box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 10upx;

						.item {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							image {
								width: 40upx;
								height: 40upx;
								margin-bottom: 18upx;
							}

							.text {
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 1;
							}
						}
					}
				}
			}

		}
	}

	.content {
		margin-top: 20upx;
		padding: 0 20upx;
		display: flex;
		align-items: center;
		justify-content: center;

		.used-tools {
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 40upx 30upx;

			.title {
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				line-height: 1;
			}

			.tools-list {
				margin-top: 50upx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.item {
					box-sizing: border-box;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 50upx;
					position: relative;

					image {
						width: 44upx;
						height: 44upx;
					}

					.text {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 1;
						margin-top: 20upx;
					}

					.contact-btn {
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
		}

		
	}

	.sub-btn {
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.like-product {
		padding: 0 20rpx;

	}

	.banner {
		padding: 20rpx 20rpx 0rpx 20rpx;
		height: 200rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}

		.tel_btn {
			width: 100%;
			height: 100%;
			top: 0upx;
			position: absolute;
			opacity: 0.0;
		}
	}
	.log-out {
		height: 80upx;
		width: 80%;
		background:#fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		line-height: 80upx;
		text-align: center;
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #018C39;
		margin: 0 auto;
		border-radius: 16upx;
		margin-top: 20upx;
	}
</style>