yqdsh/pages/user/index.vue

<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<view class="vheigh"></view>
		<!-- #endif -->

		<view class="user-info">
			<image src="http://ygs.hqgjsmc.com/baseimg/u-bg.png" mode="" class="user-info-bg"></image>
			<!-- #ifndef MP-WEIXIN -->
			<view class="user-info-tit">
				个人中心
			</view>
			<!-- #endif -->

			<image src="../../static/user/u-set.png" mode="" class="u-set"
				@click.stop="navto('/pages/users/user_info/index')"></image>
			<view class="user-wrap">
				<view class="info-left flex">
					<view class="user-name">
						<image :src="userInfo.avatar" mode="" v-if="userInfo.avatar"></image>
						<image src="../../static/error/missing-face.png" mode="" v-else></image>
						<view class="user-font">
							<view class="name clamp">{{ userInfo.nickname }}</view>
							<view class="name clamp" @click="navto('/pages/users/login/index')"
								v-if="!userInfo.nickname ">登录</view>
							<view class="phone">{{ userInfo.phone | phone }}</view>
							<view class="yqm" v-if="userInfo.uid"><text class="yqm-left">邀请码</text>{{ userInfo.uid }}
							</view>
						</view>
					</view>
					<view class="kpi" v-if="userInfo && userInfo.level">
						<image src="http://ygs.hqgjsmc.com/baseimg/menber-bg.png" mode=""></image>
						<view class="user-level">V{{ userInfo.level }}会员</view>
					</view>
				</view>

				<!-- <view class="flex">
					<view class="info-right" @click="authTo('/pages/users/user_money/index')">
						<image class="iright-icon" src="../../static/user/user3.png" mode=""></image>
						<view class="iright-font">钱包余额：{{ userInfo.now_money || 0 }}</view>
					</view>
					<view class="info-right" @click="authTo('/pages/users/user_payment/index')">
						<image class="iright-icon" src="../../static/user/user3.png" mode=""></image>
						<view class="iright-font">充值钱包</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="u-ye flex">
			<view class="info-right" @click="authTo('/pages/users/user_money/index')">
				<image class="iright-icon" src="../../static/user/u-ye.png" mode="widthFix"></image>
				<view class="iright-font">余额：{{ userInfo.now_money || 0 }}</view>
			</view>
			<view class="" style="width: 4rpx;height: 35rpx;background: #FFFFFF;">

			</view>
			<view class="info-right" @click="authTo('/pages/users/user_payment/index')">
				<image class="iright-icon" src="../../static/user/u-cz.png" mode="widthFix"></image>
				<view class="iright-font">充值</view>
			</view>
		</view>
		<view class="u-up" @click="navto('/pages/store/settled/index')">
			<image src="../../static/user/u-up.png" mode="" class="u-up-bg"></image>
			<view class="u-up-tit">
				申请成为供应商享受更多福利
			</view>
			<view class="u-up-btn">
				去申请
			</view>
		</view>
		<view class="main-box">
			<view class="title flex">
				<view class="title-left">
					<view class="title-font">易博健康</view>
				</view>
			</view>
			<view class="main flex">
				<view class="item" @click="authTo('/pages/user/qyjf')">
					<image src="../../static/user/u-qy.png" mode="heightFix" class="item-img"></image>
					<view class="item-font">权益积分</view>
					<view class="item-num">{{ userInfo.healthy_integral * 1 || 0 }}</view>
				</view>

				<view class="item" @click="authTo('/pages/user/qyjf')">
					<image src="../../static/user/u-dsf.png" mode="heightFix" class="item-img"></image>

					<view class="item-font">待释放</view>
					<view class="item-num">{{ dsf * 1 || 0 }}</view>
				</view>

				<view class="item" @click="authTo('/pages/user/qyjf')">
					<image src="../../static/user/u-sr.png" mode="heightFix" class="item-img"></image>

					<view class="item-font">累计收入</view>
					<view class="item-num">{{ sr * 1 || 0 }}</view>
				</view>

				<view class="item" @click="authTo('/pages/user/qyjf')">
					<image src="../../static/user/u-zc.png" mode="heightFix" class="item-img"></image>

					<view class="item-font">累计支出</view>
					<view class="item-num">{{ zc * 1 || 0 }}</view>
				</view>

			</view>
		</view>
		<view class="main-box">
			<view class="title flex">
				<view class="title-left">
					<view class="title-font">环球优购</view>
				</view>
			</view>
			<view class="main flex">
				<view class="item" @click="authTo('/pages/user/myjf')">
					<image src="../../static/user/u-djf.png" mode="heightFix" class="item-img"></image>
					<view class="item-font">动态积分</view>
					<view class="item-num">{{ userInfo.dynamic_integral * 1 || 0 }}</view>
				</view>

				<view class="item" @click="authTo('/pages/user/mygwjf')">
					<image src="../../static/user/u-jjf.png" mode="heightFix" class="item-img"></image>
					<view class="item-font">静态积分</view>
					<view class="item-num">{{ userInfo.integral * 1 || 0 }}</view>
				</view>

				<view class="item" @click="authTo('/pages/user/mythq')">
					<image src="../../static/user/u-xfq.png" mode="heightFix" class="item-img"></image>

					<view class="item-font">消费券</view>
					<view class="item-num">{{ userInfo.consumption * 1 || 0 }}</view>
				</view>
				<view class="item" @click="authTo('/pages/user/myggz')">
					<image src="../../static/user/u-gxz.png" mode="heightFix" class="item-img"></image>

					<view class="item-font">贡献值</view>
					<view class="item-num">{{ userInfo.contribution * 1 || 0 }}</view>
				</view>
			</view>
		</view>
		<view class="main-box">
			<view class="title flex" @click="authTo('/pages/users/order_list/index')">
				<view class="title-left">
					<!-- <image class="title-icon" src="../../static/user/user5.png" mode=""></image> -->
					<view class="title-font">我的订单</view>
				</view>
				<image class="title-right" src="../../static/img/back.png" mode=""></image>
			</view>
			<view class="main flex">
				<view class="oitem" @click="authTo('/pages/users/order_list/index?state=0')">
					<image class="oitem-image" src="../../static/user/user6.png" mode=""></image>
					<view class="oitem-font">待付款</view>
				</view>
				<view class="oitem" @click="authTo('/pages/users/order_list/index?state=1')">
					<image class="oitem-image" src="../../static/user/user7.png" mode=""></image>
					<view class="oitem-font">待发货</view>
				</view>
				<view class="oitem" @click="authTo('/pages/users/order_list/index?state=2')">
					<image class="oitem-image" src="../../static/user/user8.png" mode=""></image>
					<view class="oitem-font">待收货</view>
				</view>
				<view class="oitem" @click="authTo('/pages/users/order_list/index?state=3')">
					<image class="oitem-image" src="../../static/user/user9.png" mode=""></image>
					<view class="oitem-font">已完成</view>
				</view>
			</view>
		</view>
		<view class="my-tools">
			<view class="my-order">
				<view class="order">我的功能</view>
				<!-- <image src="../../static/img/xiangxia.png" mode="scaleToFill"></image> -->
			</view>
			<view class="tool flex">
				<!-- #ifndef APP-PLUS -->
				<view class="tool-item" @click="authTo('/pages/users/promoter-list/index')">
					<view class="tool-img">
						<image src="../../static/icon/gn1.png" mode=""></image>
					</view>
					<view class="tool-name">我的推广</view>
				</view>
				<!-- #endif -->
				<view class="tool-item" @click="authTo('/pages/users/user_spread_code/index')">
					<view class="tool-img">
						<image src="../../static/icon/gn2.png" mode=""></image>
					</view>
					<view class="tool-name">邀请有礼</view>
				</view>
				<view class="tool-item" @click="authTo('/pages/users/user_goods_collection/index')">
					<view class="tool-img">
						<image src="../../static/icon/gn3.png" mode=""></image>
					</view>
					<view class="tool-name">我的收藏</view>
				</view>
				<view class="tool-item" @click="authTo('/pages/users/retrievePassword/index')">
					<view class="tool-img">
						<image src="../../static/icon/i8.png" mode=""></image>
					</view>
					<view class="tool-name">修改密码</view>
				</view>
				<view class="tool-item" @click="openKf()">
					<view class="tool-img">
						<image src="../../static/icon/gn5.png" mode=""></image>
					</view>
					<view class="tool-name">客服中心</view>
				</view>
				<view class="tool-item" @click="authTo('/pages/users/user_address_list/index')">
					<view class="tool-img">
						<image src="../../static/icon/gn6.png" mode=""></image>
					</view>
					<view class="tool-name">收货地址</view>
				</view>
				<view class="tool-item" @click="authTo('/pages/users/user_info/index')">
					<view class="tool-img">
						<image src="../../static/icon/gn7.png" mode=""></image>
					</view>
					<view class="tool-name">设置</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
		<uni-popup ref="popupkf" type="center">
			<view class="popup-box">
				<view class="img">
					<image src="http://ygs.hqgjsmc.com/baseimg/img009.png" mode=""></image>
				</view>
				<view class="mian">
					<view class="delivery">
						<view class="title">已经为您定制专属客服</view>
						<image src="http://ygs.hqgjsmc.com/baseimg/img010.png" mode=""></image>
					</view>
					<view class="nocancel" @click.stop="makePhone">联系电话：{{ lxphone }}</view>
					<view class="nocancel">客服VX：{{ text }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel">取消</view>
						<view class="comfirm" @click="comfirm(text)">复制微信</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
			:isGoIndex="false"></authorize> -->
		<authorize :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
		<!-- #ifndef H5 -->
		<passwordPopup></passwordPopup>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		userBalance,
		healthyIntegrallist
	} from '@/api/wallet.js';
	import {
		getMenuList,
		getUserInfo,
		setVisit
	} from '@/api/user.js';
	import {
		orderData
	} from '@/api/order.js';
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import authorize from '@/components/Authorize';
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
	import {
		configMap
	} from '@/utils';
	import Auth from '../../libs/wechat';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	const app = getApp();
	export default {
		components: {
			// #ifndef H5
			passwordPopup,
			// #endif
			authorize
		},
		computed: configMap({
				mer_intention_open: 0,
				hide_mer_status: 1,
				recharge_switch: 0,
				integral_status: 0,
				member_status: 0,
				balance_func_status: 0,
				copyright_status: '',
				copyright_image: '',
				copyright_context: ''
			},
			mapGetters(['isLogin', 'viewColor', 'keyColor'])
		),
		data() {
			return {
				lxphone: '0575-87601131',
				text: 'yibo2709', //客服微信
				domain: HTTP_REQUEST_URL,
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				orderMenu: [{
						img: '/static/diy/order1',
						title: '待付款',
						url: '/pages/users/order_list/index?status=0',
						num: 0
					},
					{
						img: '/static/diy/order2',
						title: '待发货',
						url: '/pages/users/order_list/index?status=1',
						num: 0
					},
					{
						img: '/static/diy/order3',
						title: '待收货',
						url: '/pages/users/order_list/index?status=2',
						num: 0
					},
					{
						img: '/static/diy/order4',
						title: '待评价',
						url: '/pages/users/order_list/index?status=3',
						num: 0
					},
					{
						img: '/static/diy/order5',
						title: '售后/退款',
						url: '/pages/users/refund/list',
						num: 0
					}
				],
				imgUrls: [{
					url: '',
					pic: ''
				}],
				userMenu: [],
				skeletonMenu: [],
				personalMenu: [{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					},
					{
						pic: '',
						name: '',
						isShow: true
					}
				],
				autoplay: true,
				circular: true,
				interval: 3000,
				duration: 500,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderStatusNum: {},
				userInfo: {
					aratar: '/static/f.png'
				},
				MyMenus: [],
				is_promoter: 0, //推广人开关  1开
				extension_status: 0,
				dsf: 0,
				zc: 0,
				sr: 0
			};
		},
		onLoad() {
			setTimeout(() => {
				this.showSkeleton = false;
			}, 500);
		},
		onReady() {
			this.isNodes++;
		},
		filters: {
			phone(value) {
				if (!value) return '';
				let str = value;
				str = str.replace(new RegExp("[^0-9]+", "g"), "")
				if (str.length == 11) {
					str = str.toString().replace(/(\d{3})\d*(\d{4})/, '$1****$2')
				} else {
					str = str.toString().replace(/(\d{3})\d*(\d{4})/, '$1****$2')
				}
				return str;
			}
		},
		mounted: function() {},
		onShow: function() {
			let that = this;
			if (that.isLogin) {
				this.getUserInfo();
				this.orderNum();
			} else {
				this.userInfo = {};
				this.orderMenu.forEach(v => {
					v.num = 0;
				});
				this.getMyMenus();
				setTimeout(() => {
					this.isAuto = true;
					this.isShowAuth = true
				}, 300);
			}
		},
		methods: {
			...mapMutations(['UPDATE_USERINFO']),
			makePhone() {
				uni.makePhoneCall({
					phoneNumber: this.lxphone
				})
			},
			authTo(url) {
				if (this.isLogin) {
					uni.navigateTo({
						url
					});
				} else {
					this.openAuto();
				}
			},
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			toService(mer) {
				uni.navigateTo({
					url: '/pages/admin/business/index?is_sys=' + (mer ? '0' : '1')
				});
			},
			// 菜单显示
			filterMenus: function(item) {
				let that = this;
				if (item.url == '/pages/users/user_money/index') item.isShow = that.balance_func_status == 1;
				else if (item.url == '/pages/users/user_spread_user/index') {
					if (that.extension_status == 0) {
						item.isShow = false;
					} else if (that.extension_status == 1) {
						if (that.is_promoter == 1) {
							item.isShow = that.is_promoter == 1 && that.extension_status == 1;
						} else if (that.is_promoter == 0) {
							item.isShow = that.is_promoter == 0 && that.extension_status == 1;
							item.url = '/pages/users/distributor/index';
						}
					}
				} else if (item.url == '/pages/store/settled/index') item.isShow = that.mer_intention_open == 1 && that
					.hide_mer_status != 1;
				else if (item.url == '/pages/users/user_grade/index') item.isShow = that.member_status == 1;
				else if (item.url == '/pages/users/user_integral/index') item.isShow = that.integral_status == 1;
				else item.isShow = true;
			},
			showMenu(menu) {
				return !menu || ['integral', 'service', 'admin_order', 'verify_order', 'intention', 'promoter', 'balance']
					.indexOf(menu) === -1;
			},
			goUrl(url) {
				if (url.indexOf('http') != -1) {
					// #ifdef H5
					location.href = url;
					// #endif
				} else {
					if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index',
							'/pages/plant_grass/index'
						].indexOf(url) == -1) {
						uni.navigateTo({
							url: url
						});
					} else {
						uni.switchTab({
							url: url
						});
					}
				}
			},
			// 去聊天列表
			goChat() {
				let type = this.userInfo.service ? 1 : 0;
				uni.navigateTo({
					url: `/pages/chat/customer_list/index?type=${type}`
				});
			},
			// 记录会员访问
			setVisit() {
				setVisit({
					url: '/pages/user/index'
				}).then(res => {});
			},
			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true;
			},
			// 授权回调
			onLoadFun() {
				this.getUserInfo();
				this.getMyMenus();
				this.orderNum();
				this.isShowAuth = false;
			},
			Setting: function() {
				uni.openSetting({
					success: function(res) {}
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
			// 绑定手机
			bindPhone() {
				uni.navigateTo({
					url: '/pages/users/user_phone/index'
				});
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					this.UPDATE_USERINFO(res.data);
					(that.userInfo = res.data), (that.is_promoter = res.data.is_promoter);
					that.extension_status = res.data.extension_status;
					that.getMyMenus();
					that.getHealthy()
				});
			},
			//获取健康数据
			getHealthy() {
				healthyIntegrallist().then(res => {
					this.dsf = res.data.dsf
					this.zc = res.data.zc
					this.sr = res.data.sr
				})
			},
			// 订单数字
			orderNum() {
				orderData().then(({
					data
				}) => {
					this.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '待付款':
								item.num = data.noPay;
								break;
							case '待发货':
								item.num = data.noPostage;
								break;
							case '待收货':
								item.num = data.noDeliver;
								break;
							case '待评价':
								item.num = data.noComment;
								break;
							case '售后/退款':
								item.num = data.refund;
								break;
						}
					});
				});
			},
			/**
			 *
			 * 获取个人中心图标
			 */
			getMyMenus: function() {
				let that = this;
				if (this.MyMenus.length) return;
				getMenuList().then(res => {
					that.personalMenu = [];
					res.data.menu.forEach((item, index) => {
						that.filterMenus(item);
						that.personalMenu.push(item);
					});
					that.imgUrls = res.data.banner;
				});
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					});
				} else {
					this.openAuto();
				}
			},
			goSetting() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/users/user_setting/index'
					});
				} else {
					this.openAuto();
				}
			},
			// 签到
			goSignIn() {
				uni.navigateTo({
					url: '/pages/users/user_sgin/index'
				});
			},
			// goMenuPage
			goMenuPage(url) {
				if (this.isLogin) {
					uni.navigateTo({
						url
					});
				} else {
					this.openAuto();
				}
			},
			// 复制客服微信
			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();
			},
			// 打开客服
			openKf() {
				this.$refs.popupkf.open();
			},
			// 关闭客服
			cancel() {
				this.$refs.popupkf.close();
			},
			uniCopy(content) {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						console.log('success');
						return true;
					}
				});
				//#endif

				/**
				 * H5端的复制逻辑
				 */
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) {
					//为了兼容有些浏览器 queryCommandSupported 的判断
					// 不支持
					return false;
				}
				let textarea = document.createElement('textarea');
				textarea.value = content;
				textarea.readOnly = 'readOnly';
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, content.length); //核心
				let result = document.execCommand('copy'); // 执行浏览器复制命令
				textarea.remove();
				return result;
				// #endif
			},
		}
	};
</script>

<style lang="scss">
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10rpx;
	}

	.container,
	page {
		min-height: 100%;
		height: auto;
		background-color: #fff;
		// background-color: $page-color-base;
	}

	.vheigh {
		height: var(--status-bar-height);
		background-color: #fff;
	}

	.top-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 230rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tool-list {
		width: 690rpx;
		margin: auto;
		margin-top: 20rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
	}

	.popup-box {
		width: 522rpx;
		height: 605rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: relative;

		.img {
			position: relative;
			top: -56rpx;
			left: 0;
			width: 522rpx;
			height: 132rpx;
			display: flex;
			justify-content: center;

			image {
				border-radius: 20rpx 20rpx 0 0;
				width: 450rpx;
				height: 132rpx;
			}
		}

		.mian {
			margin-top: -44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;

			.delivery {
				font-size: 40rpx;
				color: #333333;
				display: flex;
				align-items: center;
				flex-direction: column;

				image {
					margin-top: 48rpx;
					width: 172rpx;
					height: 160rpx;
				}
			}

			.nocancel {
				font-size: 32rpx;
				color: #333333;
				margin-top: 14rpx;
			}

			.comfirm-box {
				margin-top: 52rpx;
				display: flex;
				// margin-bottom: 32rpx;

				// justify-content: space-around;
				.cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					border: 1px solid #dcc786;
					border-radius: 38rpx;

					font-size: 32rpx;
					color: #605128;
				}

				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
					border-radius: 38px;
					font-size: 32rpx;
					color: #605128;
				}
			}
		}
	}

	.popup {
		width: 560rpx;
		padding-bottom: 45rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		text-align: center;
		line-height: 1;

		.popup-dox {
			position: relative;

			.popup-logo {
				margin: -160rpx auto 0;
				width: 400rpx;
				height: 200rpx;
			}
		}

		.popup-title {
			margin-top: 85rpx;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #2a2a2a;

			text {
				font-size: 56rpx;
				color: #e83f30;
			}
		}

		.popup-tip {
			margin-top: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #8c8c8c;

			text {
				color: #e83f30;
			}
		}

		.popup-btn {
			margin: 58rpx auto 0;
			width: 270rpx;
			height: 66rpx;
			background: #f0c838;
			border-radius: 34rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #ffffff;
		}
	}

	.user-wrap {
		position: absolute;
		z-index: 10;
		width: 690rpx;
		// height: 283rpx;
		// background: #ffffff;
		// box-shadow: 0px 4rpx 13rpx 0px rgba(229, 229, 229, 0.46);
		border-radius: 20rpx;
		margin: auto;
		// top: 0;
		bottom: 133rpx;

		.info-left {
			padding-left: 34rpx;

			.user-name {
				display: flex;
				align-items: center;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.user-font {
					padding-left: 34rpx;

					.name {
						width: 250rpx;
						font-size: 40rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #fff;
					}

					.phone {
						margin: 10rpx 0;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #fff;
					}

					.yqm {
						height: 30rpx;
						line-height: 30rpx;
						display: inline-block;
						border-radius: 15rpx;
						background-color: #474758;
						padding: 0 15rpx 0 0;
						color: #FBD9A1;
						font-size: 18rpx;

						.yqm-left {
							padding: 0 10rpx;
							margin-right: 10rpx;
							display: inline-block;
							background: linear-gradient(-58deg, #C49B5C 0%, #EED9A7 100%);
							border-radius: 15rpx;
							color: #474758;
							font-size: 16rpx;
						}
					}
				}
			}

			.kpi {
				width: 178rpx;
				height: 60rpx;
				position: relative;

				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 178rpx;
					height: 60rpx;
				}

				.user-level {
					position: absolute;
					top: 0;
					right: 0;
					height: 60rpx;
					line-height: 60rpx;
					width: 120rpx;
					// background-color: red;
					font-size: 28rpx;
					font-weight: 500;
					color: #93794b;
					text-align: right;
					padding-right: 24rpx;
				}
			}
		}

		.info-right {
			display: flex;
			align-items: center;
			margin-top: 54rpx;
			padding: 0 34rpx;

			.iright-icon {
				width: 32rpx;
				height: 32rpx;
			}

			.iright-font {
				margin-left: 12rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.user-set {
		justify-content: flex-end;
		height: 100rpx;

		view {
			flex-shrink: 0;
		}

		padding: 30rpx;

		image {
			height: 40rpx;
			width: 40rpx;
		}
	}

	.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;
			padding-left: 0;
			// border-bottom: 1px solid #eeeeee;

			.title-left {
				display: flex;
				align-items: center;

				.title-icon {
					width: 32rpx;
					height: 32rpx;
				}

				.title-font {
					// margin-left: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.title-right {
				width: 14rpx;
				height: 24rpx;
			}
		}

		.main {
			padding: 30rpx 0 0rpx;
			// flex-wrap: wrap;
			justify-content: flex-start;

			.jg {
				width: 1px;
				height: 100rpx;
				background: #eeeeee;
				margin-top: 20rpx;
			}

			.item {
				// padding-bottom: 20rpx;
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;

				.item-img {
					height: 47rpx;
				}

				.item-num {
					color: #999999;
				}

				.item-font {
					color: #333333;
					padding-top: 15rpx;
				}
			}

			.oitem {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.oitem-image {
					height: 50rpx;
					width: 48rpx;
				}

				.oitem-font {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}

	.gpai {
		width: 100rpx;
		line-height: 40rpx;
		border-radius: 25rpx;
		position: absolute;
		top: 120rpx;
		left: 40rpx;
		font-size: 24rpx;
		color: #c6914e;
		text-align: center;
		background-color: #f2d4ae;
	}

	.my-tools {
		width: 710rpx;
		// height: 418rpx;
		background: #ffffff;
		// box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: 20rpx auto;

		// background-color: red;
		.my-order {
			height: 73rpx;
			width: 100%;
			// border-bottom: 2rpx solid #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.order {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				// margin-left: 36rpx;
				margin-right: 520rpx;
			}

			image {
				width: 12rpx;
				height: 22rpx;
			}
		}

		.tool {
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;

			.tool-item {
				width: 25%;
				height: 160rpx;
				// background-color: #bfa;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;

				.tool-img {
					width: 42rpx;
					height: 42rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.tool-name {
					padding-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}

	.user-info {
		width: 750rpx;
		height: 433rpx;
		position: relative;

		.user-info-bg {
			width: 750rpx;
			height: 433rpx;
		}

		.user-info-tit {
			width: 100%;
			position: absolute;
			/* #ifdef H5 */
			top: 24rpx;
			/* #endif */
			/* #ifdef APP-PLUS */
			top: 44px;
			/* #endif */
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.u-set {
			display: block;
			width: 46rpx;
			height: 48rpx;
			position: absolute;
			right: 32rpx;
			bottom: 210rpx;
		}
	}

	.u-ye {
		width: 750rpx;
		height: 80rpx;
		background: #D66650;
		align-items: center;
		color: #fff;

		.info-right {
			width: 50%;
			display: flex;
			align-items: center;
			padding: 0 34rpx;
			justify-content: center;

			.iright-icon {
				width: 32rpx;
				// height: 32rpx;
			}

			.iright-font {
				margin-left: 12rpx;
				font-size: 26rpx;
				font-weight: bold;
			}
		}
	}

	.u-up {
		width: 690rpx;
		height: 90rpx;
		margin: 20rpx auto;
		position: relative;

		image {
			width: 690rpx;
			height: 90rpx;
		}

		.u-up-tit {
			font-size: 30rpx;
			font-weight: 500;
			color: #FFE1AA;
			line-height: 90rpx;
			position: absolute;
			top: 0;
			left: 73rpx;
		}

		.u-up-btn {
			position: absolute;
			right: 20rpx;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 148rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: linear-gradient(-90deg, #FFD070 0%, #FFDEA2 99%);
			border-radius: 25px;
			font-size: 28rpx;
			font-weight: 500;
			color: #1C1E1F;
			text-align: center;
		}
	}
</style>