jingcai/pages/user/user.vue

<template>
	<view class="container">
		<view class="top">
			<view class="my">我的</view>
			<view class="userinfo">
				<view class="img">
					<image class="image" src="../../static/error/missing-face.png" mode=""></image>
				</view>
				<view class="info">
					<view>
						<text class="infor" style="margin-left: -160rpx;">v790d7v...v469874561</text>
					</view>
					<view >
						<image class="in" style="margin-left: -160rpx; margin-top: 15rpx;" src="../../static/shouye/huiyuan.png" mode=""></image>
					</view>
				</view>
				<view class="" >
					<image @click="showY" class="inf" src="../../static/shouye/userinfo.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="aaa"></view>
		<!-- 余额 -->
		<view class="body">
			<view v-if="show" class="yue">
				<view class="te">
					餘額
				</view>
				<view class="tex">
					12356.00
				</view>
				<view class="btn">
					<button class="btn1" @click="navigator"> <text>充值</text> </button>
					<button class="btn1" @click="navigatorT"> <text>提現</text> </button>
				</view>
			</view>
			
			<view v-else class="yue1">
				<view class="tj">統計表</view>
				<view class="ljcz">
					<view class="lj">累計充值</view>
					<view class="ljsu">0.000</view>
				</view>
				<view class="ljcz">
					<view class="lj1">累計提現</view>
					<view class="ljsu1">0.000</view>
				</view>
				<view class="ljcz">
					<view class="lj1">累計收益</view>
					<view class="ljsu1">0.000</view>
				</view>
				<view class="ljcz">
					<view class="lj1">個人交易總量</view>
					<view class="ljsu1">0.000</view>
				</view>
				<view class="ljcz">
					<view class="lj1">團隊交易總量</view>
					<view class="ljsu1">0.000</view>
				</view>
			</view>
			
		<!-- 列表 -->
		<view class="gj">
			我的工具
		</view>
		
		<view class="user-list flex" @click="navTo('/pages/user/team')">
			<image src="../../static/shouye/yue.png" mode="" class="left-img"></image>
			<view class="">
				餘額明細       
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<!-- 额外添加 -->
		<view class="user-list flex" @click="navTo('/pages/user/shareQrCode')">
			<image src="../../static/shouye/money.png" mode="" class="left-img"></image>
			<view class="">
				互娛記錄
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<!-- 额外添加 -->
		<view class="user-list flex" @click="navTo('/pages/tabulation/tabulation')">
			<image src="../../static/shouye/liebiao.png" mode="" class="left-img"></image>
			<view class="">
				會員列表
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="user-list flex" @click="navTo('/pages/user/favorites')">
			<image src="../../static/shouye/liebiao.png" mode="" class="left-img"></image>
			<view class="">
				分享鏈接
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="user-list flex" @click="openKf()">
			<image src="../../static/shouye/liuyan.png" mode="" class="left-img"></image>
			<view class="">
				在線留言
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="user-list flex" @click="navTo('/pages/transaction/transaction')">
			<image src="../../static/shouye/jiaoyi.png" mode="" class="left-img"></image>
			<view class="">
				交易密碼
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="user-list flex" @click="navTo('/pages/public/login')">
			<image src="../../static/shouye/tuichu.png" mode="" class="left-img"></image>
			<view class="">
			   退出登錄 
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="" style="height: 20rpx;">
		</view>
		</view>
		
		<view class="" style="width: 750rpx; height: 30rpx; background-color: #000;"></view>
	</view>
	
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import {
		orderData,
		getUserInfo,
		// check,
		// getLevelList
	} from '@/api/user.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				current: 2,
				store_name: '',
				achievement: '',
				code: '',
				levelList: [],
				show: true
			};
		},
		onShow() {
			// 判断是否已经登录
			// if (this.hasLogin) {
			// 	this.loadBaseData();
			// }
			this.loadBaseData();
		},
		filters: {
			phone(e) {
				var subStr1 = e.substr(0, 3);
				var subStr2 = e.substr(e.length - 4, 4);
				var subStr = subStr1 + '...' + subStr2;
				e = subStr;
				return e;
			}
		},
		onReady() {
			// 初始化获取页面宽度
			uni.createSelectorQuery()
				.select('.container')
				.fields({
						size: true
					},
					data => {
						// 计算最多下拉的高度
						this.userDowm = Math.floor((data.width / 750) * 185);
						// 计算最大触发修改高度事件
						this.userMaxDowm = Math.floor((data.width / 750) * 250);
					}
				)
				.exec();
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		methods: {
			showY(){
				this.show = !this.show
			},
			navigatorT() {
				uni.navigateTo({
					url: '/pages/withdrawal/withdrawal'
				})
			},
			navigator() {
				uni.navigateTo({
					url: '/pages/recharge/recharge'
				})
			},
		
			
			// ...mapMutations('user', ['setUserInfo']),
			// sqdl() {
			// 	if (this.hasLogin) {
			// 		if (this.userInfo.enroll_status == 1) {

			// 			uni.showModal({
			// 				title: "提示",
			// 				content: '您提交的申请正在审核中，请耐心等待审核'
			// 			})
			// 		} else {
			// 			this.navTo('/pages/user/sqdl')
			// 		}
			// 	} else {
			// 		this.navTo('/pages/user/sqdl')
			// 	}
			// },
			// qhx() {
			// 	check({
			// 			verify_code: this.code,
			// 			is_confirm: 1 //1是核销，0是查看
			// 		})
			// 		.then(e => {
			// 			this.$api.msg('核销成功');
			// 			this.close();
			// 		})
			// 		.catch(e => {
			// 			console.log(e);
			// 		});
			// },
			// sao() {
			// 	let obj = this;

			// 	// #ifndef H5
			// 	uni.scanCode({
			// 		success(e) {
			// 			obj.code = e.result;
			// 			obj.$refs.popuphx.open();
			// 			console.log(obj.$refs.popuphx);
			// 		}
			// 	});
			// 	// #endif
			// },
			// comfirm(text) {
			// 	console.log(text);
			// 	const result = this.uniCopy(text);
			// 	if (result === false) {
			// 		uni.showToast({
			// 			title: '不支持'
			// 		});
			// 	} else {
			// 		uni.showToast({
			// 			title: '复制成功',
			// 			icon: 'none'
			// 		});
			// 	}
			// 	this.$refs.popupkf.close();
			// },
			
			// 加载初始数据
			loadBaseData() {
				const obj = this
				getUserInfo({})
					.then(({
						data
					}) => {
						obj.setUserInfo(data);

					})
					.catch(e => {
						console.log(e);
					});

			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				console.log(url);
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			close() {
				this.$refs.popuphx.close();
				this.code = '';
			},
			
			// 打开绑定
			open() {
				this.$refs.gspass.open();
			},
			cast() {
				set_waiter({
						uid: this.id
					})
					.then(e => {
						this.$api.msg('绑定成功');
						this.$refs.gspass.close();
						this.id = '';
					})
					.catch(err => {
						this.$refs.gspass.close();
						this.id = '';
					});
			},
			// cancelpass() {
			// 	this.$refs.gspass.close();
			// 	this.id = '';
			// }
		}
	};
</script>
<style lang="scss">
	.container {
		width: 750rpx;
		height: 100%;
	}
	
	.top {
		width: 750rpx;
		height: 327rpx;
		background-color: #000000;
	}
	.my {
		margin-left: 40rpx;
		padding-top: 40rpx;
		height: 45rpx;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 48rpx;
	}
	
	.userinfo {
		padding-top: 80rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.image {
		margin-left: 40rpx;
		width: 125rpx;
		height: 125rpx;
		
	}
	
	.infor {
		height: 23rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 48rpx;
	}
	.in {
		width: 128rpx;
		height: 45rpx;
	}
	.inf {
		margin-top: 25rpx;
		width: 48rpx;
		height: 48rpx;
	}

.aaa {
	width: 750rpx;
	height: 20rpx;
	background-color: #191a1f;
}
//  body
.body {
	width: 750rpx;
	height: 1273rpx;
	background-color: #191a1f;
}
.yue {
	width: 700rpx;
	height: 283rpx;
	margin-left: 24rpx;
	background-color: #000000;
	
}
.yue1 {
	width: 700rpx;
	height: 360rpx;
	margin-left: 24rpx;
	background-color: #000000;
}
.tj {
	height: 28rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	margin-left: 307rpx;
	padding-top: 35rpx;
}
.ljcz {
	display: flex;
	justify-content: space-between;
}
.lj {
	height: 23rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	opacity: 0.65;
	margin-top: 61rpx;
	margin-left: 31rpx;
}
.ljsu {
	height: 18rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	margin-top: 63rpx;
	margin-right: 33rpx;
}
.lj1 {
	height: 23rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	opacity: 0.65;
	margin-top: 31rpx;
	margin-left: 31rpx;
}
.ljsu1{
	height: 18rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	margin-top: 33rpx;
	margin-right: 33rpx;
}



















.te {
	// margin-top: 40rpx;
	padding-top: 40rpx;
	margin-left: 325rpx;
	height: 25rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}
.tex {
	margin-left: 274rpx;
	padding-top: 40rpx;
	height: 37rpx;
	font-size: 48rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
}
.btn {
	margin-top: 100rpx;
	display: flex;
	justify-content: space-between;
}
.btn1 {
	width: 276rpx;
	height: 72rpx;
	background: #FDB242;
	border-radius: 10rpx;
}

.gj {
	margin-top: 50rpx;
	margin-left: 20rpx;
	height: 34rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 30rpx;
}

	.user-list {
		width: 691rpx;
		height: 104rpx;
		background: #191a1f;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 28rpx;
		margin: 20rpx auto;
		padding: 0 25rpx;

		.left-img {
			width: 40rpx;
			height: 40rpx;
		}

		view {
			padding-left: 20rpx;
			flex-grow: 1;
			font-size: 29rpx;
			font-weight: bold;
			color: #5D5D5D;
		}

		.right-img {
			width: 13rpx;
			height: 23rpx;
		}
	}

	.sqdl {
		display: block;
		width: 689rpx;
		margin: 20rpx auto 20rpx;
	}
</style>