xc/pages/user/user.vue

<template>
	<view class="container">
		<view class="userinfo flex">
			<view class="avt">
				<image src="../../static/error/missing-face.png" mode=""></image>
			</view>
			<view class="info">
				<view class="name clamp">
					李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹
				</view>
				<view class="id flex">
					<view class="xs">
						ID
					</view>
					<view class="val">
						236322
					</view>
					<image src="../../static/user/copy.png" mode="" class="copy"></image>
				</view>
			</view>
		</view>
		<view class="ks flex">
			<image src="../../static/user/ks.png" mode=""></image>
			<view class="value">
				<view class="val">
					7772032.30
				</view>
				<view class="">
					我的矿石
				</view>
			</view>
			<view class="btn ">
				转赠
			</view>
		</view>
		<view class="friend">
			<view class="top flex">
				<view class="">
					邀请好友
				</view>
				<image src="../../static/user/djl.png" mode=""></image>
				<view class="tc">
					
				</view>
				<view class="xq">
					详情<image src="../../static/user/back.png" mode=""></image>
				</view>
			</view>
			<view class="tit">
				好友会为你贡献一定比例的奖励
			</view>
			<view class="val-wrap flex">
				<view class="item ">
					<view class="val">
						72032.30
					</view>
					<view class="">
						累计收益
					</view>
				</view>
				<view class="item item1">
					<view class="val">
						203
					</view>
					<view class="">
						好友数
					</view>
				</view>
				<view class="btn">
					邀请好友
				</view>
			</view>
		</view>
		<view class="main-box">
			<view class="title flex">
				<view class="title-left">
					<view class="title-font">常用功能</view>
				</view>
				<!-- <image class="title-right" src="../../static/icon/back.png" mode=""></image> -->
			</view>
			<view class="main flex">
				<view class="oitem" @click="navTo('/pages/order/order?state=0')">
					<image class="oitem-image" src="../../static/user/u1.png" mode=""></image>
					<view class="oitem-font">我的好友</view>
				</view>
				<view class="oitem" @click="openTc('popupkf')">
					<image class="oitem-image" src="../../static/user/u2.png" mode=""></image>
					<view class="oitem-font">联系客服</view>
				</view>
				<view class="oitem" @click="openTc('popuptj')">
					<image class="oitem-image" src="../../static/user/u3.png" mode=""></image>
					<view class="oitem-font">我的邀请人</view>
				</view>
				<view class="oitem" @click="openTc('popupcz')">
					<image class="oitem-image" src="../../static/user/u5.png" mode=""></image>
					<view class="oitem-font">开通联盟</view>
				</view>
				<view class="oitem" @click="navTo('/pages/order/order?state=3')">
					<image class="oitem-image" src="../../static/user/u4.png" mode=""></image>
					<view class="oitem-font">设置</view>
				</view>
				
			</view>
		</view>
		<uni-popup ref="popupkf" type="center">
			<view class="popup-box">
				<view class="tit">
					联系客服
				</view>
				<image src="../../static/user/kf.png" mode="" class="kf"></image>
				<view class="wx">
					客服VX:{{kf}}
				</view>
				<view class="btn" @click="comfirm(kf)">
					复制微信
				</view>
				<image src="../../static/user/close.png" mode="" class="close" @click="closeTc('popupkf')"></image>
			</view>
		</uni-popup>
		<uni-popup ref="popuptj" type="center">
			<view class="popup-box">
				<view class="tit">
					我的推荐人
				</view>
				<!-- <image src="../../static/user/kf.png" mode=""></image> -->
				<image src="../../static/error/missing-face.png" mode="" class="avt"></image>
				<view class="wx">
					李丹丹
				</view>
				<view class="id">
					ID号：2363226
				</view>
				<view class="btn" @click="comfirm(kf)">
					复制ID号
				</view>
				<image src="../../static/user/close.png" mode="" class="close" @click="closeTc('popuptj')"></image>
			</view>
		</uni-popup>
		<uni-popup ref="popupcz" type="center">
			<view class="popup-box popup-box1">
				<view class="tit">
					成为城主
				</view>
				<view class="jj">
					成为城主后可以随时解除城主身份，取消后<br>7个工作日内若无任何经济纠纷，<br>质押的矿石将退回。
				</view>
				<view class="item flex" v-for="(item,index) in lmList">
					<image :src="'../../static/user/lm' + index + '.png'" mode="" class="logo"></image>
					<view class="dec">
						<text>{{item.level}}</text>{{item.dec}}
					</view>
					<view class="check">
						<image src="../../static/user/select.png" mode="" class="schecked" v-if="item.checked"></image>
						<view class="nocheck" v-else>
							
						</view>
					</view>
				</view>
				<view class="yue">
					<image src="../../static/index/index/icon01.png" mode=""></image>
					<view class="">
						 拥有矿石 <text>10000</text> 个，开通需 <text>10000</text> 个
					</view>
				</view>
				<view class="btn">
					确认开通
				</view>
				<image src="../../static/user/close.png" mode="" class="close" @click="closeTc('popupcz')"></image>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	// import {
	// 	tabbar1
	// } from '@/utils/tabbar.js';
	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 uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
	import {
		orderData,
		getUserInfo,
		rate,
		apply_status
	} from '@/api/user.js';
	import {
		signList,
		integral,
		signUser
	} from '@/api/functionalUnit.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	// #ifdef APP-PLUS
	import {
		getUpApp
	} from '@/utils/upApp.js';
	// #endif
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				lmList: [
					{
						level: '领主',
						dec: '（质押 10 万矿石 获得转赠手续费 5%）',
						id: 1,
						checked: false
					},
					{
						level: '一级城主',
						dec: '（质押 3 万矿石 获得转赠手续费 3% , 获得 2 级城主转赠收费 10%）',
						id: 1,
						checked: false
					},
					{
						level: '二级城主',
						dec: '（质押 1万矿石 获得转赠手续费 2%, 由 1 级城主推荐获得 3 级城主转赠手续费收益)',
						id: 1,
						checked: false
					},
					{
						level: '三级城主',
						dec: '（质押 5000矿石 获得转赠手续费 2% , 由 2 级城主推荐）',
						id: 1,
						checked: false
					}
				],
				kf: '18967672398',
				// #ifdef APP
				wgtinfo: {
					version: '1.0.0'
				}, //版本信息
				// #endif
				sm: 0, //是否已实名认证
				money: '', //保存当前月份
				year: '', //保存当前年份
				day: '', //保存当前日期
				current: 4,
				// tabbar: tabbar1,
				qded: false, //是否已签到
				text: '18967672398', //客服微信
				actionDay: 0, //连续签到天数
				sum_integral: 0, //累计获得积分
				today_integral: '', //签到获得的数值
				tom_integral: '', //明天签到获得的数值
				tom_type: '', //签到获得的数值单位
				userDowm: 0, //卡片升级专属高度
				userMaxDowm: 0, //卡片最高高度
				toolList: [
					// {
					// 	id: 't1',
					// 	name: '新人通道',
					// 	width: '56rpx',
					// 	heigt: '54rpx',
					// 	img: '../../static/icon/tool-1.png',
					// 	path: '/pages/user/xrtd'
					// },
					{
						id: 't2',
						name: '邀请好友',
						width: '56rpx',
						heigt: '57rpx',
						img: '../../static/icon/tool-2.png',
						path: '/pages/user/shareQrCode'
					},
					{
						id: 't3',
						name: '我的粉丝',
						width: '68rpx',
						heigt: '53rpx',
						img: '../../static/icon/tool-3.png',
						path: '/pages/user/myfans'
					},
					{
						id: 't4',
						name: '我的订单',
						width: '55rpx',
						heigt: '54rpx',
						img: '../../static/icon/tool-4.png',
						path: '/pages/order/index'
					},
					{
						id: 't5',
						name: '我的商品',
						width: '50rpx',
						heigt: '58rpx',
						img: '../../static/icon/tool-5.png',
						path: '/pages/user/myproduct'
					},
					// #ifndef APP
					{
						id: 't6',
						name: '馆长申请',
						width: '59rpx',
						heigt: '56rpx',
						img: '../../static/icon/tool-6.png',
						path: '/pages/user/gzsq'
					},
					// #endif
					{
						id: 't7',
						name: '我的金豆',
						width: '59rpx',
						heigt: '56rpx',
						img: '../../static/icon/jindou.png',
						path: '/pages/user/myyue'
					}
				]
			};
		},
		onShow() {
			// 判断是否已经登录
			if (this.hasLogin) {
				this.loadBaseData();
				// this.signUser();
				// this.loadList();
				// this.getData();
				// this.isSm();
			}
			// #ifdef APP
			if (this.appversion !== this.wgtinfo.version) {
				getUpApp();
			}
			// #endif
		},
		onReady() {
			const that = this;
			// 初始化获取页面宽度
			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();
			// #ifdef APP
			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				that.wgtinfo = wgtinfo;
			});
			// #endif
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
			...mapState(["isShowIllegality", "appversion"])
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
			getData(current) {
				const date = current ? new Date(current) : new Date();
				this.year = date.getFullYear(); //保存当前年份
				this.month = date.getMonth() + 1; //保存当前月份
				this.day = date.getDate(); //保存当前日期
			},
			isSm() {
				rate({}).then(e => {
					if (e.data.is_auth == 2) {
						this.sm = 1;
					}
				});
			},
			comfirm(text) {
				let obj = this;
				let content = text; //需要复制的内容
				console.log('复制的内容:', content);
				// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
				const result = uniCopy(content);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			},
			// 获取签到列表
			loadList() {
				let obj = this;
				let present = this.day; //保存当前天数用于后续计算
				let actionDay = 0; //用于计算活跃天数
				let arr = []; //保存返回数组；
				signList({
					page: 1,
					limit: 31
				}).then(e => {
					arr = e.data.map((e, ind) => {
						let time = e.add_time.split('-');
						let day = parseInt(time[2].replace(/^0/i, ''));
						let year = time[0];
						let month = +time[1];
						if (obj.year == year && obj.month == month) {
							return day;
						}
					});
					// 判断今天是否已经签到
					if (arr[0] == this.day) {
						this.qded = true;
					}
				});
			},
			//获取签到用户信息
			signUser() {
				signUser({
					all: 1
				}).then(({
					data
				}) => {
					this.actionDay = data.sign_num; //连续签到天数
					this.sum_integral = data.sum_integral; //累计总积分
				});
			},
			// 加载初始数据
			loadBaseData() {
				getUserInfo({})
					.then(({
						data
					}) => {
						this.setUserInfo(data);
						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
						orderData({})
							.then(({
								data
							}) => {
								this.setOrderInfo(data);
							})
							.catch(e => {
								this.setOrderInfo({
									complete_count: 0, //完成
									received_count: 0, //待收货
									unshipped_count: 0, //待发货
									order_count: 0, //订单总数
									unpaid_count: 0 //待付款
								});
							});
					})
					.catch(e => {
						console.log(e);
					});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				const obj = this;
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					if (url == '/pages/user/approve') {
						rate({})
							.then(e => {
								console.log(e);
								if (e.data.is_auth == null) {
									uni.navigateTo({
										url
									});
								}
								if (e.data.is_auth == 0) {
									uni.navigateTo({
										url
									});
								}
								if (e.data.is_auth == 1) {
									// this.$api.msg('正在审核中请耐心等待');
									uni.navigateTo({
										url
									});
								}
								if (e.data.is_auth == 2) {
									this.$api.msg('已通过实名认证，无需再实名认证');
								}
								if (e.data.is_auth == 3) {
									uni.navigateTo({
										url
									});
									// uni.showModal({
									// 	title: '提示',
									// 	content: '申请失败,原因' + e.data.off + '是否重新申请',
									// 	success: function(res) {
									// 		if (res.confirm) {
									// 			uni.navigateTo({
									// 				url
									// 			});
									// 		} else if (res.cancel) {
									// 			console.log('用户点击取消');
									// 		}
									// 	}
									// });
								}
							})
							.catch(e => {
								return;
							});
					} else if (url == '/pages/user/gzsq') {
						apply_status({})
							.then(e => {
								if (e.data.status != 0) {
									if (e.data.status == 3) {
										uni.showModal({
											title: '提示',
											content: '申请失败是否重新申请',
											success: function(res) {
												if (res.confirm) {
													uni.navigateTo({
														url
													});
												} else if (res.cancel) {
													console.log('用户点击取消');
												}
											}
										});
									} else {
										obj.$api.msg(e.data.str);
									}
								} else {
									uni.navigateTo({
										url
									});
								}
							})
							.catch(e => {});
					} else {
						uni.navigateTo({
							url,
							fail() {
								uni.switchTab({
									url
								});
							}
						});
					}
				}
			},
			useTool(e) {
				this.navTo(e.path);
			},
			// 签到弹窗
			goQd() {
				integral({})
					.then(e => {
						this.integral = console.log(e);
						// 改为已签到
						this.qded = true;
						this.today_integral = e.data.integral;
						this.actionDay++;
						this.sum_integral = +this.sum_integral + +e.data.integral;
						this.$refs.popupqd.open();
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 关闭签到弹窗
			closeQd() {
				this.$refs.popupqd.close();
			},
			openTc(name) {
				this.$refs[name].open()
			},
			closeTc(name) {
				this.$refs[name].close()
			}
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		background-image: url('../../static/user/user-bg.png');
		background-size: 100% 100%;
		min-height: 1200rpx;
	}
	.userinfo {
		width: 709rpx;
		height: 316rpx;
		margin: auto;
		justify-content: flex-start;
		.avt {
			border-radius: 50%;
			// border-radius: 2rpx;
			border: 2rpx solid #fff;
			height: 124rpx;
			width: 124rpx;
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
		.info {
			font-weight: 800;
			font-size: 31rpx;
			color: #212121;
			padding-left: 23rpx;
			.name {
				width: 500rpx;
			}
			.id {
				width: 188rpx;
				height: 32rpx;
				border-radius: 5rpx;
				border: 1px solid #797E96;
				padding-right: 10rpx;
				margin-top: 20rpx;
				.xs {
					width: 40rpx;
					line-height:30rpx;
					background: linear-gradient(0deg, #384054, #707991);
					border-radius: 5rpx;
					font-size: 25rpx;
					color: #FFFFFF;
					text-align: center;
				}
				.copy {
					width: 24rpx;
					height: 24rpx;
				}
				.val {
					flex-grow: 1;
					padding-left: 6rpx;
					font-weight: 500;
					font-size: 25rpx;
					color: #212121;
				}
			}
		}
	}
	.ks {
		width: 709rpx;
		height: 162rpx;
		background-color: #1b2d59;
		margin:auto;
		color: #FFFFFF;
		position: relative;
		padding: 0 30rpx 0 20rpx;
		&::before ,&::after {
			content: '';
			width: 15rpx;
			height: 15rpx;
			position: absolute;
			background-color: #fff;
		}
		&::after {
			right: 15rpx;
			top: 0;
		}
		&::before {
			right: 0;
			top: 15rpx;
		}
		image {
			width: 107rpx;
			height: 84rpx;
		}
		.value {
			font-size: 23rpx;
			padding-left: 10rpx;
			flex-grow: 1;
			.val {
				font-size: 44rpx;
			}
			
		}
		.btn {
			width: 89rpx;
			// height: 38rpx;
			padding: 6rpx 0;
			border-radius: 19rpx;
			border: 1px solid #DDE1EB;
			font-weight: 500;
			font-size: 24rpx;
			text-align: center;
		}
	}
	.friend {
		width: 709rpx;
		height: 253rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 26rpx auto 30rpx;
		padding: 30rpx 20rpx;
		.top {
			font-weight: bold;
			font-size: 29rpx;
			color: #212121;
			justify-content: flex-start;
			image {
				width: 89rpx;
				height: 35rpx;
			}
			.tc {
				flex-grow: 1;
			}
			.xq {
				font-weight: 400;
				font-size: 26rpx;
				color: #8B8B8B;
				image {
					width: 10rpx;
					height: 20rpx;
					margin-left: 13rpx;
				}
			}
		}
		.tit {
			font-size: 24rpx;
			color: #8B8B8B;
			padding-top: 15rpx;
		}
		.val-wrap {
			padding-top: 30rpx;
			justify-content: flex-start;
			.item {
				padding:0 15rpx 0 0rpx;
				font-size: 24rpx;
				color: #8B8B8B;
				.val {
					font-size: 41rpx;
					color: #222222;
					&::after {
						content: '个';
						font-size: 24rpx;
					}
				}
			}
			.item1 {
				flex-grow: 1;
				border-left: 1px solid #ECECEC;
				padding-left: 30rpx;
				
			}
			.btn {
				width: 211rpx;
				line-height: 83rpx;
				background: #333333;
				border-radius: 8rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	.main-box {
		margin: 20rpx auto 0;
		width: 710rpx;
		background: #ffffff;
		box-shadow: 0px 4rpx 14rpx 0px rgba(229, 229, 229, 0.46);
		border-radius: 20rpx;
	
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
	
			.title-left {
				display: flex;
				align-items: center;
	
				.title-icon {
					width: 32rpx;
					height: 32rpx;
				}
	
				.title-font {
					margin-left: 20rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
	
			.title-right {
				width: 14rpx;
				height: 24rpx;
			}
		}
	
		.main {
			padding: 30rpx 0 30rpx;
			flex-wrap: wrap;
			justify-content: flex-start;
			.jg {
				width: 1px;
				height: 100rpx;
				background: #eeeeee;
			}
	
			.item {
				padding-bottom: 20rpx;
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
	
				.item-num {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
	
				.item-font {
					margin-top: 18rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
	
			.oitem {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 50rpx;
				.oitem-image {
					height: 50rpx;
					width: 58rpx;
				}
	
				.oitem-font {
					font-weight: 500;
					font-size: 25rpx;
					color: #212121;
					padding-top: 15rpx;
				}
			}
		}
	}
	.popup-box {
		background-image: url('../../static/user/tc.png');
		width: 542rpx;
		height: 647rpx;
		background-size: 100% 100%;
		position: relative;
		.tit {
			font-weight: bold;
			font-size: 44rpx;
			color: #222222;
			text-align: center;
			padding-top: 10rpx;
		}
		.kf {
			width: 249rpx;
			height: 245rpx;
			display: block;
			margin: 42rpx 0 0 178rpx;
		}
		.avt {
			width: 125rpx;
			height: 125rpx;
			border-radius: 50%;
			display: block;
			margin:80rpx auto 25rpx;
			
		}
		.id {
			text-align: center;
			font-size: 35rpx;
			color: #222222;
			margin: 30rpx auto 50rpx;
		}
		.wx {
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			margin: 24rpx auto 30rpx;
		}
		.btn {
			width: 330rpx;
			line-height: 77rpx;
			background: linear-gradient(268deg, rgba(113,87,185,0.99), #8667C3, #7258B9);
			border-radius: 10rpx;
			margin:20rpx auto;
			text-align: center;
			font-weight: bold;
			font-size: 35rpx;
			color: #FFFFFF;
		}
		.close {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -110rpx;
			margin: auto;
		}
	}
	.popup-box1 {
		width: 633rpx;
		height: 1076rpx;
		background-image: url('../../static/user/b-tc.png');
		.tit {
			letter-spacing: 10rpx;
		}
		.jj {
			padding: 70rpx 60rpx 30rpx 65rpx;
			font-weight: bold;
			font-size: 22rpx;
			color: #000000;
			line-height: 31rpx;
			text-align: center;
			letter-spacing: 5rpx;
		}
		.yue {
			display: flex;
			width: 100%;
			justify-content: center;
			image {
				width: 43rpx;
				height: 34rpx;
				margin: 0;
			}
			view {
				padding-left: 10rpx;
			}
			font-weight: bold;
			font-size: 25rpx;
			color: #222222;
			text-align: center;
			text {
				color: #3C4192;
			}
		}
		.item {
			width: 536rpx;
			height: 114rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin:20rpx auto;
			padding: 0 18rpx 0 24rpx;
			.logo {
				width: 70rpx;
				height: 68rpx;
				flex-shrink: 0;
			}
			.dec {
				flex-shrink: 0;
				width: 335rpx;
				text {
					font-weight: 800;
					font-size: 27rpx;
					color: #000000;
				}
				font-size: 20rpx;
				color: #969696;
			}
			.check {
				flex-shrink: 0;
				.schecked {
					width: 40rpx;
					height: 40rpx;
				}
				.nocheck {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 2px solid #3C4192;
				}
			}
		}
		.btn {
			margin-top: 35rpx;
		}
	}	
</style>