baiyuchengpin/pages/user/index.vue

<template>
	<view>
		<view class="top-cont">
			<view class="top-inner">
				<!-- 这里是状态栏 -->
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view class="user-info">
					<view class="left">
						<view class="head-img">
							<image
								:src="user.avatar==null?'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/detault_head.jpg':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="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/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="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/icon-msg.png" mode=""></image>
							</view>
							
						</uni-badge> -->
					</view>
				</view>
				<!-- 我的订单 -->
				<view class="my-order" v-if="user.isShow==1">
					<view class="inner">
						<view class="title-box">
							<text class="title">我的订单</text>
							<view class="all-order" @click="showOrder('')">
								<text class="text">全部订单</text>
								<image
									src="@/static/images/right.png"
									mode=""></image>
							</view>
						</view>
						<view class="status-box">
							<view class="status-cell">
								<uni-badge size="small" :text=count0 absolute="rightTop" type="error">
									<view class="item" @click="showOrder('0')">
										<image
											src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/payment.png"
											mode=""></image>
										<text class="text">待付款</text>
									</view>
								</uni-badge>
							</view>
							<view class="status-cell">
								<uni-badge size="small" :text=count1 absolute="rightTop" type="error">
									<view class="item" @click="showOrder('1')">
										<image
											src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/send_goods.png"
											mode=""></image>
										<text class="text">待发货</text>
									</view>
								</uni-badge>
							</view>
							<view class="status-cell">
								<uni-badge size="small" :text=count2 absolute="rightTop" type="error">
									<view class="item" @click="showOrder('2')">
										<image
											src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/sou_goods.png"
											mode=""></image>
										<text class="text">待收货</text>
									</view>
								</uni-badge>
							</view>
							<view class="status-cell">
								<view class="item" @click="showOrder('3')">
									<image
										src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/completed.png"
										mode=""></image>
									<text class="text">已完成</text>
								</view>
							</view>
							<view class="status-cell">
								<uni-badge size="small" :text=afterSalesCount absolute="rightTop" type="error">
									<view class="item" @click="navgetTo('/pages_user/user/refundOrderList')">
										<image
											src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/after_sales.png"
											mode=""></image>
										<text class="text">售后/退款</text>
									</view>
								</uni-badge>
							</view>
						</view>
					</view>
				</view>

				<view class="content">
					<!-- 常用工具 -->
					<view class="used-tools">
						<view class="title">常用工具</view>
						<view class="tools-list">

							<view class="item" @click="navgetTo('/pages_user/user/address')" v-if="user.isShow==1">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/address.png"
									mode=""></image>
								<text class="text">收货地址</text>
							</view>
							<!-- <view class="item no-marin-bottom" @click="navgetTo('/pages_user/user/integral')">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/integral.png"
									mode=""></image>
								<text class="text">积分管理</text>
							</view> -->
							<view class="item no-marin-bottom" @click="navgetTo('/pages_user/user/integralGoodsList')">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/integral.png"
									mode=""></image>
								<text class="text">积分商城</text>
							</view>
							<view class="item no-marin-bottom" @click="navgetTo('/pages_shopping/shopping/myCoupon')">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/mycoupon.png"
									mode=""></image>
								<text class="text">优惠券</text>
							</view>
							<view class="item no-marin-bottom"
								@click="navgetTo('/pages_user/user/storeProductRelation')">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/footprint.png"
									mode=""></image>
								<text class="text">我的足迹</text>
							</view>

							<view class="item no-marin-bottom">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/customer.png"
									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="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/my_promotion.png" 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="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/my_promotion.png" mode=""></image>
								<text class="text">我的推广</text>
							</view> -->
							<!-- <view class="item no-marin-bottom" @click="navgetTo('/pages/home/cert')">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/qualification.png"
									mode=""></image>
								<text class="text">资质证书</text>
							</view> -->
							<!-- v-if="user.bindCompanyUserId" -->
							
							<!-- <view class="item no-marin-bottom" @click="navgetTo('/pages_shopping/live/order')">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/live.png"
									mode=""></image>
								<text class="text">直播订单</text>
							</view> -->

							<!-- 销售可见 -->
							<!-- <view  v-if="user.bindCompanyUserId" class="item no-marin-bottom" @click="toManager()">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/products_icon.png"
									mode=""></image>
								<text class="text">制单管理</text>
							</view>
							<view v-if="user.bindCompanyUserId" class="item no-marin-bottom" @click="toManagerCourse()">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/sale_file.png"
									mode=""></image>
								<text class="text">销售管理</text>
							</view> -->

						<!-- 	<view v-if="user.bindCompanyUserId" class="item no-marin-bottom" @click="openH5('/store/h5/userAgreement')">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/service_file.png"
									mode=""></image>
								<text class="text">用户协议</text>
							</view> 
							<view v-if="user.bindCompanyUserId" class="item no-marin-bottom align-top" @click="openH5('/store/h5/privacyPolicy')">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/advice.png"
									mode=""></image>
								<text class="text">隐私保护</text>
							</view> -->

							<!-- 测试用下面的 -->
							<view v-if="Version" class="item no-marin-bottom align-top" @click="navgetTo('/pages_course/livingList')">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/integral.png"
									mode=""></image>
								<text class="text">直播</text>
							</view>

							<view class="item no-marin-bottom" @click="toManager()">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/products_icon.png"
									mode=""></image>
								<text class="text">制单管理</text>
							</view>
							<view class="item no-marin-bottom" @click="toManagerCourse()">
								<image
									src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/sale_file.png"
									mode=""></image>
								<text class="text">销售管理</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="banner">
					<image src="https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20221125/71ddd95044bb46d5b27e19a5f61cf5ab.png"></image>
					<view class="tel_btn" @click="callService()"></view>
				</view> -->
				<view v-if="UserInfo">
					<view @tap="loginOUt" class="log-out x-c">退出登录</view>
				</view>
				<view class="like-product">
					<likeProduct ref="product" />
				</view>

				<!-- 退出登录按钮 -->

			</view>
			<Server />
		</view>

	</view>
</template>

<script>
	import {
		getOrderCount
	} from '@/api/storeOrder'
	import {
		getUserInfo
	} from '@/api/user'
	import likeProduct from '@/components/likeProduct.vue'
	import Server from '@/components/Server.vue'
	export default {
		components: {
			likeProduct,
			Server
		},
		data() {
			return {
				Version:false,
				count0: 0,
				count1: 0,
				count2: 0,
				afterSalesCount: 0,
				user: {
					isPromoter: 0,
					isWeixinAuth: 0,
					phone: "",
					nickname: "用户昵称",
					avatarUrl: "https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/detault_head.png"
				},
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// 消息数量
				msgNum: 0,
				UserInfo: uni.getStorageSync('AppToken')
			};
		},
		watch: {
			UserInfo() {
				return uni.getStorageSync('AppToken')
			}
		},
		onLoad() {
			console.log("onload")
			this.yincang()
		},
		onShow() {
			console.log("onshow")
			this.UserInfo = uni.getStorageSync('AppToken') // 强制更新登录状态
			if (this.UserInfo) {
				this.getUserInfo()
			} else {
				// this.isuser=true
			}
			// this.getUserInfo();
			// this.getOrderCount();
		},
		onReachBottom() {
			console.log("onReachBottom")
			this.$refs.product.getGoodsProducts();
		},
		computed: {
			imgPath() {
				return this.$store.state.imgpath
			},
		},
		methods: {
			/**
			 * 获取当前环境版本，控制 Version 变量
			 * 开发版(develop)或体验版(trial)时 Version 为 true
			 * 正式版(release)时 Version 为 false
			 */
			yincang(){
				// #ifdef MP-WEIXIN
				const accountInfo = uni.getAccountInfoSync();
				const { envVersion } = accountInfo.miniProgram;
				this.Version = (envVersion === 'develop' || envVersion === 'trial');
				// #endif
			},
			callService() {
				let orderKey = '5d81cf01-6f8d-4e1a-ae7a-dbc26c965b01';
				uni.navigateTo({
					url: '/pages_company/order/confirmOrder?orderKey=' + orderKey
				});
				return;

				uni.makePhoneCall({
					phoneNumber: "4000717770",
					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 => {}
				);
			},
			toManager() {
				if (this.utils.checkCompanyUserLoginState()) {
					uni.navigateTo({
						url: '/pages_company/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages_company/auth/login'
					})
				}

			},
			toManagerCourse() {
				if (uni.getStorageSync('ManageToken')) {
					uni.navigateTo({
						url: '/pages_manage/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages_manage/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) {
								this.user = res.user;
							} else {
								this.utils.loginOut();
							}

						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			// 跳转页面
			navgetTo(url) {
				this.utils.isLogin().then(res => {
					if (res) {
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 查看订单
			showOrder(status) {
				uni.navigateTo({
					url: '/pages_user/user/storeOrder?status=' + status
				})
			},
			loginOUt() {
				this.utils.loginOut();
				uni.navigateTo({
					url: '/pages/auth/login'
				})
				// this.getUserInfo();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-cont {
		width: 100%;
		height: 494upx;
		position: relative;
		background-image: url(@/static/images/bg.png);
		background-repeat:no-repeat;
		background-size:100%;

		.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: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20upx;
						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;
                        display: flex;
						flex-direction: column;
						align-items: start;
						.name {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 40rpx;
							color: rgba(0,0,0,0.85);
							line-height: 56rpx;
						}

						.phone {
							margin-top: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: rgba(0,0,0,0.85);
							line-height: 44rpx;
						}
					}
				}

				.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: 40rpx 24rpx 0;

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

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

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

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

							.text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 32rpx;
								color: rgba(0,0,0,0.65);
								line-height: 44rpx;
								margin-right: 12px;
							}

							image {
								width: 14upx;
								height: 24upx;
							}
						}
					}

					.status-box {
						display: flex;
						flex-wrap: wrap;
						align-items: flex-start;
						//padding: 0 10upx;
                        padding-top: 30rpx;
						.status-cell {
							box-sizing: border-box;
							width: 33.33%;
							display: flex;
							justify-content: center;
							padding-bottom: 30rpx;
						}

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

							image {
								width: 60rpx;
								height: 60rpx;
								margin-bottom: 10rpx;
							}

							.text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 36rpx;
								color: rgba(0,0,0,0.85);
								line-height: 50rpx;
							}
						}
					}
				}
			}

		}
	}

	.content {
		margin-top: 30rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.used-tools {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 30rpx 24rpx 0;

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

			.tools-list {
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;
                box-sizing: border-box;
                   gap: 40rpx 26rpx;
				.item {
					box-sizing: border-box;
					  width: calc((100% - 3*26rpx) / 4);  /* 就写 25%，什么都不用减 */
					  display: flex;
					  flex-direction: column;
					  align-items: center;
					  justify-content: center;
					  position: relative;

					image {
						width: 50rpx;
						height: 50rpx;
					}

					.text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 36rpx;
						color: rgba(0,0,0,0.85);
						line-height: 50rpx;
						margin-top: 8rpx;
					}

					.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: 110rpx;
		line-height: 110rpx;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 36rpx;
		color: rgba(0,0,0,0.65);
		background: #FFFFFF;
		margin: 30rpx 24rpx 40rpx;
		border-radius: 24rpx;
	}
</style>