xingmingyi_applet/pages/user/user.vue

<template>
	<view class="pagecon">
		<view class="userInfo dffs">
			<image class="headimg" :src="userInfo.userInfo.avatar" mode=""></image>
			<view class="uinfo">
				<navigator :url="userInfo.userInfo.user_id ? '' : '/pages/login/login'" class="uinfoPho">
					{{ userInfo.userInfo.nickname || '欢迎登陆' }}
					<image v-if="userInfo.userInfo.level_time != 0" :src="userInfo.userInfo.level_logo||'/static/img/pro/usVip.png'" mode=""></image>
					
				</navigator> <text  class="fontssm prosecond">{{userInfo.userInfo.rank_name||"普通会员"}}</text> 
				<!-- <button type="primary" shape="circle" class="loginButton" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">{{ newsInfo.user_phone || '获取手机号' }}</button> -->
			</view>
		</view>
		<view class="usBotList dfsb">
			<navigator url="/pages/user/mine/mineBean" class="usli dffd">
				<text class="monnum">{{ userInfo.userInfo.bean || 0 }}</text>
				<text class="montext">我的学豆</text>
			</navigator>
			<navigator url="/pages/user/coupon/myCoup" class="usli dffd">
				<text class="monnum">{{ userInfo.userInfo.kj_num || 0 }}</text>
				<text class="montext">我的卡券</text>
			</navigator>
			<navigator url="/pages/user/mine/collect?type=1" class="usli dffd">
				<text class="monnum">{{ userInfo.userInfo.collect_num || 0 }}</text>
				<text class="montext">收藏</text>
			</navigator>
			<navigator v-if="showVideo==1"  url="/pages/user/mine/buy" class="usli dffd">
				<text class="monnum">{{ userInfo.userInfo.video_num || 0 }}</text>
				<text class="montext">视频</text>
			</navigator>
		</view>
		<navigator v-if="userInfo.userInfo.level_time == 0" url="/pages/user/mine/member" class="flone">
			<image class="member" src="/static/img/pro/usUpd.png" mode=""></image>
		</navigator>
		<view class="ordBox oneBox">
			<view class="gdHead">我的订单</view>
			<view class="userNav dfsa">
				<navigator url="/pagesA/mall/order?state=0" class="userLi">
					<image src="/static/img/pro/usordall.png" mode=""></image>
					<view class="fontssm">全部订单</view>
				</navigator>
				<navigator url="/pagesA/mall/order?state=1" class="userLi">
					<image src="/static/img/pro/usordtwo.png" mode=""></image>
					<view class="fontssm">待付款</view>
				</navigator>
				<navigator url="/pagesA/mall/order?state=2" class="userLi">
					<image src="/static/img/pro/usordthr.png" mode=""></image>
					<view class="fontssm">已付款</view>
				</navigator>
				<navigator url="/pagesA/mall/order?state=3" class="userLi">
					<image src="/static/img/pro/usordfour.png" mode=""></image>
					<view class="fontssm">已发货</view>
				</navigator>
			</view>
		</view>
		<view class="monwarp dfsb">
			<image src="/static/img/pro/usmonbg.png" class="monbg" mode=""></image>
			<view class="monbg textBox dfsb">
				<view class="left">
					<text class="white fontsm">资产总金额（元）</text>
					<view class="leftbot white">
						{{ show ? userInfo.userInfo.money : '***' }}
						<image @click="show = !show" :src="show ? '/static/img/pro/usmoneye.png' : '/static/img/pro/usmoneyeno.png'" mode=""></image>
					</view>
				</view>
				<navigator url="/pages/user/funManage/funManage" class="right white fontsm">
					<image class="rigicon" src="/static/img/pro/usmonicon.png" mode=""></image>
					查看账单
				</navigator>
			</view>
		</view>
		<view class="ordBox oneBox">
			<view class="gdHead">我的信息</view>
			<view class="userNav dfsa">
				<navigator url="/pages/user/mine/userInfo" class="userLi">
					<image src="/static/img/pro/usnav1.png" mode=""></image>
					<view class="fontssm">个人信息</view>
				</navigator>
				<navigator url="/pages/user/mine/member" class="userLi">
					<image src="/static/img/pro/usnav2.png" mode=""></image>
					<view class="fontssm">会员</view>
				</navigator>
				<navigator url="/pages/user/coupon/myCoup" class="userLi">
					<image src="/static/img/pro/usnav3.png" mode=""></image>
					<view class="fontssm">卡券</view>
				</navigator>
				<navigator url="/pages/user/funManage/recharge" class="userLi">
					<image src="/static/img/pro/usnav4.png" mode=""></image>
					<view class="fontssm">学豆充值</view>
				</navigator>
			</view>
		</view>
		<view class="ordBox oneBox">
			<view class="gdHead">我的内容</view>
			<view class="userNav dfsa">
				<navigator url="/pages/user/mine/team" class="userLi">
					<image src="/static/img/pro/usnav5.png" mode=""></image>
					<view class="fontssm">我的推荐</view>
				</navigator>
				<navigator url="/pages/user/mine/down" class="userLi">
					<image src="/static/img/pro/usnav6.png" mode=""></image>
					<view class="fontssm">我的下载</view>
				</navigator>
				<navigator url="/pages/user/mine/poster" class="userLi">
					<image src="/static/img/pro/usnav7.png" mode=""></image>
					<view class="fontssm">我的海报</view>
				</navigator>
				<navigator url="/pages/user/mine/collect?type=1" class="userLi">
					<image src="/static/img/pro/usnav8.png" mode=""></image>
					<view class="fontssm">我的收藏</view>
				</navigator>
			</view>
		</view>
		<view class="ordBox oneBox">
			<view class="gdHead">其他</view>
			<view class="userNav dfsa">
				<navigator url="/pages/news/notice" class="userLi">
					<image src="/static/img/pro/usnav9.png" mode=""></image>
					<view class="fontssm">公告</view>
				</navigator>
				<navigator url="/pages/user/mine/feedBack" class="userLi">
					<image src="/static/img/pro/usnav10.png" mode=""></image>
					<view class="fontssm">意见反馈</view>
				</navigator>
				<navigator url="/pages/user/other/other" class="userLi">
					<image src="/static/img/pro/usnav11.png" mode=""></image>
					<view class="fontssm">留言板</view>
				</navigator>
				<!-- <navigator url="/pages/mall/myOrder?state=4">
					
				</navigator> -->
				<button type="default" open-type="contact" class="userLi defaultBtn">
					<image src="/static/img/pro/usnav12.png" mode=""></image>
					<view class="fontssm">在线客服</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	computed: {
		// ...mapState({ userInfo: state => state.userInfo })
	},
	data() {
		return {
			showVideo: '0',
			show: false,
			userInfo: {
				userInfo: {},
				order_nums: {}
			}
		};
	},
	onShow(opt) {
		this.onload();
		this.showVideo = uni.getStorageSync('showVideo')||0;
		// this.$store.dispatch('getUserInfo');
	},
	methods: {
		xaizai() {
			uni.downloadFile({
				url: 'https://ht.xinmingyi.cn/11111.docx', //仅为示例，并非真实的资源
				success: res => {	
			 if (res.statusCode === 200) {
						var filePath1 = res.tempFilePath;
						// console.log(res.tempFilePath);
						uni.saveFile({
							tempFilePath: filePath1,
							success: function(res2) {
								console.log('文件：', res2.savedFilePath);
								uni.showToast({
									title: 'save成功' + res2.savedFilePath,
									duration: 2000
								});
								uni.openDocument({
									filePath: filePath1,
									showMenu: true,
									success: function(res) {
										uni.showToast({
											title: '打开文档成功成功',
											duration: 2000
										});
									}
								});
							},
							fail: res => {
								uni.showToast({
									title: 'save失败',
									duration: 2000
								});
							}
						});
					}
				},
				fail: res => {
					console.log(res);
					uni.showToast({
						title: 'down失败',
						duration: 2000
					});
				}
			});
		},

		showPopup(key) {
			this.$refs[key].open();
		},
		async onload() {
			const res = await this.$api.request('user/userInfo');
			console.log("我的更新用户信息",res)
			if (res.code == '200') {
				this.userInfo = res.data;
				this.$store.commit('setStateAttr', {
					key: 'userInfo',
					val: this.userInfo
				});
			} else {
				this.$api.toast(res.msg);
			}
		},
		navTo() {
			uni.navigateTo({
				url: '/pages/user/set/userInfo'
			});
		}
	}
};
</script>

<style lang="scss" scoped> 
	
.pagecon {
	min-height: 100vh;
	background: #f7f6f9;
	padding: 0 30rpx 0;
	.userInfo {
		padding: 55rpx 0rpx 48rpx;
		width: 100%;
		.headimg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #f5fcfc;
			margin-right: 30rpx;
		}
		.uinfo {
			flex: 1;
			.uinfoPho {
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				line-height: 50rpx;
				margin-bottom: 10rpx;
				image {
					width: 35rpx;
					height: 31rpx;
					margin : 0 15rpx;
				}
			}
			.prosecond{ 
				background-color: rgba($prosecond,0.2);
				padding: 4rpx 12rpx;
				border-radius: 10rpx;
			}
		}
	}
	.usBotList {
		justify-content: space-evenly;
		.usli {
			align-items: center;
			.monnum {
				text-align: center;
				font-size: 36rpx;
				font-family: DIN-Medium, DIN;
				font-weight: 500;
				line-height: 46rpx;
			}
			.montext {
				color: #666;
				margin-top: 4rpx;
				font-size: 26rpx;
				line-height: 37rpx;
			}
		}
	}
	.monwarp {
		position: relative;
		overflow: hidden;
		width: 690rpx;
		height: 114rpx;
		.monbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.textBox {
			padding: 26rpx 0 26rpx 17rpx;
		}
		.white {
			color: #fff;
		}
		.left {
			.leftbot {
				image {
					margin-left: 16rpx;
					width: 30rpx;
					height: 20rpx;
				}
			}
		}
		.right {
			// width: 158rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: rgba(#ffffff, 0.4);
			border-radius: 100rpx 0rpx 0rpx 100rpx;
			padding-left: 28rpx;
			.rigicon {
				width: 20rpx;
				height: 22rpx;
				margin-right: 9rpx;
			}
		}
	}
	.flone {
		margin: 54rpx 0rpx 23rpx;
		.member {
			width: 691rpx;
			height: 82rpx;
		}
	}
	.ordBox {
		margin: 24rpx 0rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.gdHead {
			padding: 27rpx 27rpx 3rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			line-height: 42rpx;
		}
		.userNav {
			flex-wrap: wrap;
			justify-content: space-around;
			padding: 30rpx 0;
			.userLi {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #626262;
				font-size: 24rpx;
				line-height: 36rpx;
				position: relative;
				image {
					width: 52rpx;
					height: 52rpx;
					// padding: 5rpx;
					margin: 0 auto 10rpx;
				}
			}
		}
		.specNav {
			width: 100%;
			padding: 0 32rpx;
			.userLi {
				padding: 30rpx 0;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
				}
				.litext {
					flex: 1;
					font-size: 32rpx;
					line-height: 30rpx;
					color: $textcom;
				}
			}
		}
	}
}
</style>