qwl-wechat-h5/pages/tabbar/user.vue

<template>  
    <view class="app">  
		<view class="user-item" @click="test">
			<text class="user-item-title">头像</text>
			<view class="user-img-section">
				<image src="/static/base/user.png" class="user-img"></image>
				<image src="/static/base/arrow.png" class="arrow-img"></image>
			</view>
		</view>
		<view class="user-item user-item-height">
			<text class="user-item-title">微信昵称</text>
			<text class="user-item-txt">ZHANGSAN</text>
		</view>
		
		
		<view class="user-item user-item-height">
			<text class="user-item-title">微信号</text>
			<text class="user-item-txt">张三</text>
		</view>
		
		
		
		
		<view class="user-item user-item-height">
			<text class="user-item-title">我的二维码</text>
			<view class="user-img-section">
				<image src="/static/base/qrcode.png" class="qrcode-img"></image>
				<image src="/static/base/arrow.png" class="arrow-img"></image>
			</view>
		</view>
		
		<view class="user-item user-item-height">
			<text class="user-item-title">认证信息</text>
			<image src="/static/base/arrow.png" class="arrow-img"></image>
		</view>
		
		<view class="user-item user-item-height">
			<text class="user-item-title">我的等级变更记录</text>
			<image src="/static/base/arrow.png" class="arrow-img"></image>
		</view>
		
		<view class="user-item user-item-height">
			<text class="user-item-title">更多</text>
			<image src="/static/base/arrow.png" class="arrow-img"></image>
		</view>
		
		<view class="user-item user-item-height">
			<text class="user-item-title">更换主题</text>
			<image src="/static/base/arrow.png" class="arrow-img"></image>
		</view>
		
		<view class="user-item user-item-height">
			<text class="user-item-title">设置</text>
			<image src="/static/base/arrow.png" class="arrow-img"></image>
		</view>
		
	
		
		
    </view>  
</template>  
<script>  
	import wx from 'weixin-js-sdk'
	import {mapState, mapGetters} from 'vuex'
	import tabbarMixin from './mixin/tabbar' 
    export default {
		mixins: [tabbarMixin], 
		data(){
			return {
				historyList: []
			}
		},
		computed: {
			...mapState(['userInfo', 'orderCount', 'couponCount']),
			...mapGetters(['hasLogin']),
		},
		onShow(){
			this.loadHistory();
			
			this.$store.dispatch('getUserInfo'); //更新订单数量
			this.$store.dispatch('getOrderCount'); //更新订单数量
			this.$store.dispatch('getCouponCount'); //更新优惠券数量
		},
        methods: {
			test(){
				console.log('876')
				wx.checkJsApi({
				  jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
				  success: function(res) {
				  // 以键值对的形式返回，可用的api值true，不可用为false
				  // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
				  }
				});	
			},
			//加载浏览记录
			loadHistory(){
				const list = uni.getStorageSync('productHistory');
				this.historyList = list || [];
			},
			//清空浏览记录
			clearHistory(){
				uni.removeStorage({
					key: 'productHistory'
				})
				this.historyList = [];
			}
        }  
    }  
</script>  

<style>
	page{
		background-color: white;
	}
</style>
<style scoped lang='scss'>
	
	.user-item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid $separatorColor;
		margin: 0rpx 30rpx;
		box-sizing: content-box;
	}
	.user-item-height{
		height: 100rpx;
		line-height: 100rpx;
	}
	.user-item-title{
		font-size: 15px;
		/* font-weight: 500; */
		color: #333333;
	}
	.user-img-section{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	
	}
	.user-img{
		margin: 30rpx 10rpx 30rpx;
		width: 120rpx;
		height: 120rpx;
	}
	.qrcode-img{
		width: 60rpx;
		height: 60rpx;
	}
	.arrow-img{
		width: 32rpx;
		height: 32rpx;
	}
	.user-item-txt{
		font-size: 15px;
		/* font-weight: 500; */
		color: #333333;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.app{
		padding-bottom: 20rpx;
	}
	.top{
		position: relative;
		overflow: hidden;
		padding-top: calc(var(--status-bar-height) + 52rpx);	
		padding-bottom: 6rpx;
			
		.u-bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 330rpx;
		}
		.user-wrapper{
			display:flex;
			flex-direction: column;
			flex-direction: row;
			align-items: center;
			position: relative;
			z-index: 5;
			padding: 20rpx 30rpx 60rpx;
		}
		.login-box{
			font-size: 36rpx;
			color: #fff;
		}
		.avatar{
			flex-shrink: 0;
			width: 130rpx;
			height: 130rpx;
			border-radius: 100px;
			margin-right: 24rpx;
			border: 4rpx solid #fff;
			background-color: #fff;
		}
		.username{
			font-size: 34rpx;
			color: #fff;
		}
		.user-group{
			align-self: flex-start;
			padding: 10rpx 16rpx;
			margin-top: 16rpx;
			font-size: 20rpx;
			color: #fff;
			background-color: rgba(255,255,255,.3);
			border-radius: 100rpx;
		}
		.arc-line{
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 9;
			width: 100%;
			height: 32rpx;
		}
	}
	.money-wrap{
		display:flex;
		justify-content: space-around;
		width: 700rpx;
		margin: 6rpx auto 0;
		padding: 14rpx 0;
		background: #fff;
		border-radius: 10rpx;
		
		.item{
			flex-direction: column;
			width: 130rpx;
			height: 120rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #606266;
		}
		.num{
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: 700;
		}
	}
	.order-wrap{
		width: 700rpx;
		margin: 20rpx auto 0;
		background: #fff;
		border-radius: 10rpx;
		
		.o-header{
			padding: 28rpx 20rpx 6rpx 26rpx;
			
			.tit{
				flex: 1;
				font-size: 32rpx;
				color: #333;
				font-weight: 700;
			}
			.more{
				font-size: 24rpx;
				color: #999;
			}
			.icon-you{
				margin-left: 4rpx;
				font-size: 20rpx;
				color: #999;
			}
		}
		.o-list{
			display:flex;
			justify-content: space-around;
			padding: 20rpx 0;
		}
		.item{
			flex-direction: column;
			width: 130rpx;
			height: 130rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #606266;
			position: relative;
			
			.mix-icon{
				font-size: 50rpx;
				margin-bottom: 20rpx;
				color: #fa436a;
			}
			.icon-shouhoutuikuan{
				font-size: 44rpx;
			}
		}
		.number{
			position: absolute;
			right: 22rpx;
			top: 6rpx;
			min-width: 34rpx;
			height: 34rpx;
			line-height: 30rpx;
			text-align: center;
			padding: 0 8rpx;
			font-size: 18rpx;
			color: #fff;
			border: 2rpx solid #fff;
			background-color: $base-color;
			border-radius: 100rpx;
		}
	}
	.option-wrap{
		width: 700rpx;
		margin: 20rpx auto 0;
		margin-top: 20rpx;
		background: #fff;
		border-radius:10rpx;
		
		.sec-header{
			padding: 26rpx 14rpx 0 24rpx;
			font-size: 28rpx;
			color: #333;
			
			.icon-lishijilu{
				font-size: 46rpx;
				color: #50bf8b;
				margin-right: 16rpx;
				line-height: 40rpx;
			}
			.icon-lajitong{
				padding: 4rpx 10rpx;
				font-size: 36rpx;
				color: #999;
			}
		}
		.pro-list{
			flex-wrap: nowrap;
			padding: 20rpx 0 12rpx;
			
			&:before, &:after{
				content: '';
				min-width: 30rpx;
				height: 30rpx;
			}
			&:after{
				min-width: 20rpx;
			}
			image{
				flex-shrink: 0;
				width: 144rpx;
				height: 144rpx;
				margin-right: 16rpx;
				border-radius: 8rpx;
			}
		}
	}
	
</style>