user.vue 9.74 KB
<template>
	<view class="wrap">
		<view v-if="isAuth" class="content">
			<view class="userInfo">
				<view class="info">
					<image :src="headerphoto" mode="aspectFill"></image>
					<view class="infoText">
						<text class="userName">{{nickName}}</text>
					</view>
				</view>
				<view class="service">
					<image src="../../static/serviceLogo.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="myOrder">
				<view class="orderHeader">
					<text>全部订单</text>
					<view class="btn" @click="toMyOrder">
						全部
						<image src="../../static/right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="orderBody">
					<view class="item waitPay" @click="toMyOrderPaying">
						<image src="../../static/waitDeliver.png" mode="aspectFill"></image>
						<text>待付款</text>
					</view>
					<view class="item waitDeliver" @click="toPredelivery" >
						<image src="../../static/waitPay.png" mode="aspectFill"></image>
						<text>待发货</text>
					</view>
					<view class="item waitReceive" @click="torefunProgress">
						<image src="../../static/waitReceive.png" mode="aspectFill"></image>
						<text>待收货</text>
					</view>
					<view class="item service" @click="torefundment">
						<image src="../../static/service.png" mode="aspectFill"></image>
						<text>退换/售后</text>
					</view>
				</view>
			</view>
			<view class="recommend">
				<view class="title">
					<view class="line"></view>
					<view class="text">精选推荐</view>
					<view class="line"></view>
				</view>
				<!-- 商品列表 -->
				<view class="goods-list">
					<view class="product-list">
						<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
							<Card :goods = "goods"></Card>
						</view>
					</view>
					<view class="loading-text">{{loadingText}}</view>
				</view>
			</view>
		</view>
		<view v-else class="auth">
			<view class="icon"></view>
			<view class="divider"></view>
			<view class="title">申请获取以下权限</view>
			<view class="text">获得您的公开信息(昵称、头像等)</view>
			<button 
			 type="primary"
			 open-type="getUserInfo"
			 @getuserinfo="onGotUserInfo"
			>授权登陆</button>
		</view>
	</view>
</template>

<script>
	import Card from "@/components/CommodityCard/CommodityCard.vue";
	import store from '@/store';

	export default {
		components: {
			'Card':Card
			},
		data() {
			return {
				//商品数据
				goodsList:[
					{ goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
					{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
					{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
					{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
					{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
					{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
					{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }
				],
				isAuth: true, // 是否显示授权页面
			}
		},
		onLoad() {
			// 判断是否授权
			uni.getSetting({
				success(res) {
					console.log('authSetting',res.authSetting)
					if(res.authSetting['scope.userInfo'] === true) {
						this.isAuth = true
					} else {
						this.isAuth = false
					}
				}
			})
		},
		computed: {
			nickName() {
				console.log('nickName', this.$store.state.user.userInfo)
				return this.$store.state.user.userInfo.nickName;
			},
			headerphoto() {
				return this.$store.state.user.userInfo.headerphoto;
			},
			userRecommandList() {
				console.log('recommandList', this.$store.state.userRecommand.recommandList);
				return this.$store.state.userRecommand.recommandList;
			}
		},
		onLoad: function() {
			store.dispatch('userRecommand/getRecommandList', {
				uid: 2,
			});
		},
		methods: {
			// 授权
			onGotUserInfo(e) {
				console.log('anthInfo', e);
				if(e.detail.errMsg == 'getUserInfo:ok') {
					const { fromInfo } = this.$store.state.user;
					console.log('=====la', fromInfo)
					// 用户授权成功
					store.dispatch('user/getUserInfo', fromInfo);
					this.isAuth = true
				}
			},
			toMyOrder(){
				uni.navigateTo({
					url: '../myOrder/myOrder?current=0',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toPredelivery(){
				uni.navigateTo({
					url: '../myOrder/myOrder?current=2',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toMyOrderPaying(){
				uni.navigateTo({
					url: '../myOrder/myOrder?current=1',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			torefundment(){
				uni.navigateTo({
					url:'../refundment/refundment',
				})
			},
			torefunProgress(){
				uni.navigateTo({
					url:'../refundProgress/refundProgress'
				})
			}
		}
	}
</script>

<style lang="scss">
	.warp{
		font-size: 24rpx;
		background-color: #f2f2f2;
		height: 100vh;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F2F2F2;
	}
	.userInfo{
		background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
		width: 100%;
		height: 240rpx;
		color: #FFFFFF;
		padding: 60rpx 82rpx 80rpx 44rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		.info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			image{
				border-radius: 50rpx;
				height: 100rpx ;
				width: 100rpx;
				margin-right: 40rpx;
			}
			.infoText{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-scetart;
				.userName{
					font-size: 18px;
					color: #FFFFFF;
					margin-bottom: 8rpx;
				}
				.nickName{
					font-size: 12px;
					color: #FFFFFF;
				}
			}
		}
		.service{
			margin-top: 20rpx;
			image{
				height: 36rpx;
				width: 36rpx;
			}
		}
	}
	.myOrder{
		width: 100%;
		height: 296rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
		border-radius: 6px;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.orderHeader{
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E9E9E9;;
			font-weight: bold;
			font-size: 18px;
			color: #333333;
			.btn{
				font-size: 12px;
				color: #999999;
				image{
					margin-left: 20rpx;
					height: 16rpx;
					width: 8rpx;
				}
			}
		}
		.orderBody{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 46rpx;
					height: 46rpx;
				}
				text{
					margin-top: 24rpx;
					font-size: 12px;
					color: #333333;
				}
			}
		}
	}
	.recommend{
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
		border-radius: 6px;
		border-radius: 6px;
		width: 100%;
		.title{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			.line{
				width: 264rpx;
				height: 1rpx;
				border-bottom: 1px solid #EAEAEA;
			}
			.text{
				font-family: PingFangSC-Medium;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
				text-align: justify;
				line-height: 24px;
			}
		}
		.goods-list{
			.loading-text{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 30px;
				color: #979797;
				font-size: 12px;
			}
			.product-list{
				width: 92%;
				padding: 0 4% 3vw 4%; 
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.product{
					width: 48%;
					margin: 0 0 20rpx 0;
					background: #FFFFFF;
					border: 1px solid #F2F2F2;
				}
			}
		}
	}
	.auth {
		height: 100vh;
		display: flex;
  		flex-direction: column;
  		align-items: center;
		.icon {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			margin-top: 100rpx;
			background-color: grey;
		}
		.divider {
			height: 1rpx;
			width: 600rpx;
			margin-top: 80rpx;
			background-color: #E6E3E3;
		}
		.title {
			width: 600rpx;
			margin-top: 50rpx;
			text-align: left;
		}
		.text {
			width: 600rpx;
			margin-top: 30rpx;
			text-align: left;
			color: #E6E3E3;
		}
		button {
			width: 450rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 80rpx;
			border-radius: 30rpx;
		}
	}

</style>