 <template>
 	<view class="dealer-index">
 		<view class="page-bg"></view>
 		<view class="header" :style="'margin-top: ' + statusBarHeight + 'px'"></view>
 		<view class="main-header">
 			<image class="bg-image" :src="bgImage" mode="scaleToFill"></image>
 			<!-- 用户信息 -->
 			<view class="user-info" @click="onLogin">
 				<u-avatar :src="userInfo.avatar" :size="64" mode="aspectFill"></u-avatar>
 				<view class="user-content">
 					<view class="nick-name">
 						<text>{{ userInfo.nickname }}</text>
 						<image src="../../static/icon/sex_man.png" mode="widthFix"></image>
 					</view>
 					<view class="user-id" v-if="userIdPrefix && userInfo.userId">
 						ID：{{ userIdPrefix }}{{ userInfo.userId }}</view>
 					<view class="roles-box">
 						<view class="login-tips">
 							<u-tag :text="userInfo.gradeName" plain size="mini" type="warning"></u-tag>
 						</view>
 					</view>
 				</view>
 			</view>
 			<view class="switch" @click="$navTo('pages/user/user')">
 				<!-- <image src="@/static/icon/danshen.png" mode="widthFix"></image> -->
 				<image src="@/static/icon/switch2.png" mode="widthFix"></image>
 				<view class="switch-text">返回脱单</view>
 			</view>
 			<!-- 	<view class="setting">
				<image src="../../static/icon/setting.png"></image>
			</view> -->
 		</view>

 		<view class="main">
 			<!-- 开通会员 -->
 			<view class="buy-user" v-if="storeVn < 18">
 				<view class="desc">开通线上门店 自动解锁更多权益</view>
 				<view class="asset-left flex-box dis-flex flex-x-around">
 					<view class="asset-left-item">
 						<view class="item-name dis-flex flex-x-center">
 							<image class="buy-user-icon" src="../../static/icon/buy-user-08.png" mode="widthFix">
 							</image>
 							<text>线上脱单权益</text>
 						</view>
 						<view class="item-name dis-flex flex-x-center">
 							<image class="buy-user-icon" src="../../static/icon/buy-user-09.png" mode="widthFix">
 							</image>
 							<text>提升课程</text>
 						</view>
 						<view class="item-name dis-flex flex-x-center">
 							<image class="buy-user-icon" src="../../static/icon/buy-user-10.png" mode="widthFix">
 							</image>
 							<text>推广权益</text>
 						</view>
 						<view class="item-name dis-flex flex-x-center">
 							<image class="buy-user-icon" src="../../static/icon/buy-user-11.png" mode="widthFix">
 							</image>
 							<text>终身受益</text>
 						</view>
 					</view>
 				</view>
 				<view class="open-member">
 					<u-button text="立即开通" size="small" color="linear-gradient(to bottom, #010002, #681752)"
 						@click="$push('sub_pages/dealer/grade/grade?id=' + 19)"></u-button>
 				</view>
 			</view>
 			<view v-else class="stroe-user">
 				<view class="item" @click="$push('sub_pages/profit/profit')">
 					<view class="profit">
 						<u-count-to :startVal="0" decimals="2" color="#ff0000"
 							:endVal="merchant.totalMoney"></u-count-to>
 					</view>
 					<view class="desc">总收益</view>
 					<!-- <u-tag text="收益明细" plain size="mini" type="info"></u-tag> -->
 				</view>
 				<view class="item">
 					<u-button text="立即升级" size="small" :disabled="!(storeVn < 26)"
 						color="linear-gradient(to bottom, #010002, #681752)"
 						@click="navToProfit(userInfo.gradeId)"></u-button>
 				</view>
 			</view>
 			<!-- 我的收益 -->
 			<view class="my-profit">
 				<view class="item" @click="navToProfit(userInfo.gradeId)">
 					<view class="profit">
 						<u-count-to :startVal="0" decimals="2" color="#ffffff"
 							:endVal="storeVn < 18 ? 0 : merchant.todayMoney"></u-count-to>
 					</view>
 					<view class="desc">今日收益</view>
 				</view>
 				<view class="item" @click="navToProfit(userInfo.gradeId)">
 					<view class="profit">
 						<u-count-to :startVal="0" decimals="2" color="#ffffff"
 							:endVal="storeVn < 18 ? 0 : merchant.monthMoney"></u-count-to>
 					</view>
 					<view class="desc">本月收益</view>
 				</view>
 				<view class="item" @click="navToProfit(userInfo.gradeId)">
 					<view class="profit">
 						<u-count-to :startVal="0" decimals="2" color="#ffffff" :endVal="storeVn < 18 ? 0 : merchant.money"></u-count-to>
 					</view>
 					<view class="desc">待提现</view>
 				</view>
 			</view>
 			<!-- 模块列表 -->
 			<view class="service" v-if="service.length > 0">
 				<block v-for="(item,index) in service" :key="index">
 					<view class="item" @click="navTo(item)">
 						<image :src="item.icon" mode="heightFix"></image>
 						<text>{{ item.name }}</text>
 					</view>
 				</block>
 				<view class="item" @click="onPoster(userInfo.gradeId)">
 					<image src="../../static/icon/buy-user-21.png" mode="heightFix"></image>
 					<text>邀请好友</text>
 				</view>
 				<view class="item" @click="onShowContact()">
 					<image src="../../static/icon/buy-user-22.png" mode="heightFix"></image>
 					<text>联系客服</text>
 				</view>
 				<!-- <view class="item" @click="$push('sub_pages/dealer/grade/grade')">
 					<image src="../../static/icon/buy-user-12.png" mode="heightFix"></image>
 					<text>单身团</text>
 				</view>
 				<view class="item" @click="$push('sub_pages/dealer/grade/grade')">
 					<image src="../../static/icon/buy-user-13.png" mode="heightFix"></image>
 					<text>线上门店</text>
 				</view>
 				<view class="item" @click="$push('sub_pages/dealer/grade/grade')">
 					<image src="../../static/icon/buy-user-14.png" mode="heightFix"></image>
 					<text>门店合伙人</text>
 				</view>
 				<view class="item" @click="$push('sub_pages/dealer/grade/grade')">
 					<image src="../../static/icon/buy-user-15.png" mode="heightFix"></image>
 					<text>门店运营总监</text>
 				</view>
 				<view class="item" @click="$push('sub_pages/dealer/grade/grade')">
 					<image src="../../static/icon/buy-user-17.png" mode="heightFix"></image>
 					<text>实体店</text>
 				</view>
 				<view class="item" @click="$push('sub_pages/dealer/grade/grade')">
 					<image src="../../static/icon/buy-user-16.png" mode="heightFix"></image>
 					<text>旗舰店</text>
 				</view>
 				<view class="item" @click="$push('sub_pages/dealer/grade/grade')">
 					<image src="../../static/icon/buy-user-18.png" mode="heightFix"></image>
 					<text>区县运营中心</text>
 				</view>
 				<view class="item" @click="$push('sub_pages/dealer/grade/grade')">
 					<image src="../../static/icon/buy-user-19.png" mode="heightFix"></image>
 					<text>市级运营中心</text>
 				</view>
 				<view class="item" @click="$push('sub_pages/dealer/grade/grade')">
 					<image src="../../static/icon/buy-user-20.png" mode="heightFix"></image>
 					<text>省级运营中心</text>
 				</view> -->
 			</view>
 		</view>
 		<u-popup :show="showQrcode" mode="center" :round="10" @close="showQrcode = false">
 			<view class="qrcode-box">
 				<view class="poster">
 					<image src="https://file.wsdns.cn/20230619/5a6dac23dd16484eaad2ece5317e8563.jpg" mode="widthFix">
 					</image>
 					<view class="user">
 						<view class="avatar">
 							<u-avatar size="60" :src="userInfo.avatar"
 								customStyle="margin: -3px 5px -3px 0"></u-avatar>
 							<view class="user-info">
 								<text class="nickname">{{ userInfo.nickname }}</text>
 								<text class="phone">{{ userInfo.mobile }}</text>
 							</view>
 						</view>
 						<image class="qrcode-img" v-if="QrcodeUrl" :src="QrcodeUrl" mode="widthFix">
 						</image>
 					</view>
 					<view class="long-press">长按识别二维码</view>
 				</view>
 				<view class="gap">立即分享</view>
 				<view class="share">
 					<view class="btn">
 						<image src="../../static/icon/share01.png" mode="widthFix"></image>
 						朋友圈
 					</view>
 					<view class="btn">
 						<image src="../../static/icon/share02.png" mode="widthFix"></image>
 						微信
 					</view>
 					<view class="btn">
 						<image src="../../static/icon/share03.png" mode="widthFix"></image>
 						保存
 					</view>
 				</view>
 			</view>
 		</u-popup>
 		<u-popup :show="showContact" mode="center" :round="10" :closeable="true" @close="showContact = false">
 			<view class="matchamker">
 				<view class="btn-contant">
 					<u-button text="马上联系" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
 						shape="circle" @click="contact('0771-3128860')"></u-button>
 				</view>
				<!-- <view class="btn-contant">
 					<image class="qrcode-img" src="https://file.wsdns.cn/20230619/c69d45bc13344e5d827ba4b4ed9a0c31.png"
 						mode="widthFix">
 					</image>
 					<text class="matchamker-name">客服微信</text>
 				</view> -->
 			</view>
 		</u-popup>
 	</view>

 </template>

 <script>
 	import * as UserPlanEquityApi from '@/api/love-user-plan-equity.js'
 	import * as MerchantApi from '@/api/merchant.js'
 	import * as WxLoginApi from '@/api/wx-login.js'
 	import store from '@/store/index.js'
 	import storage from '@/utils/storage'
 	import {
 		getUser
 	} from '@/api/user.js'
 	import {
 		login
 	} from '@/api/login.js'
 	import {
 		username,
 		userIdPrefix
 	} from '@/config.js';
 	import http from '@/api'

 	/**
 	 * 我的服务
 	 * id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
 	 */
 	const service = [{
 		id: 0,
 		name: '单身团',
 		icon: '../../static/icon/buy-user-12.png',
 		type: 'link',
 		show: true,
 		url: 'sub_pages/dealer/offline/offline'
 	}, {
 		id: 19,
 		name: '线上门店',
 		icon: '../../static/icon/buy-user-13.png',
 		type: 'link',
 		show: true,
 		url: 'sub_pages/dealer/grade/grade'
 	}, {
 		id: 20,
 		name: '门店合伙人',
 		icon: '../../static/icon/buy-user-14.png',
 		type: 'link',
 		show: true,
 		url: 'sub_pages/dealer/grade/grade'
 	}, {
 		id: 21,
 		name: '门店运营总监',
 		icon: '../../static/icon/buy-user-15.png',
 		type: 'link',
 		show: true,
 		url: 'sub_pages/dealer/grade/grade'
 	}, {
 		id: 22,
 		name: '实体店',
 		icon: '../../static/icon/buy-user-17.png',
 		type: 'link',
 		show: true,
 		url: 'sub_pages/dealer/grade/grade'
 	}, {
 		id: 23,
 		name: '旗舰店',
 		icon: '../../static/icon/buy-user-16.png',
 		type: 'link',
 		show: true,
 		url: 'sub_pages/dealer/grade/grade'
 	}, {
 		id: 24,
 		name: '区县运营中心',
 		icon: '../../static/icon/buy-user-18.png',
 		type: 'link',
 		show: true,
 		url: 'sub_pages/dealer/grade/grade'
 	}, {
 		id: 25,
 		name: '市级运营中心',
 		icon: '../../static/icon/buy-user-19.png',
 		type: 'link',
 		show: true,
 		url: 'sub_pages/dealer/grade/grade'
 	}, {
 		id: 26,
 		name: '省级运营中心',
 		icon: '../../static/icon/buy-user-20.png',
 		type: 'link',
 		show: true,
 		url: 'sub_pages/dealer/grade/grade'
 	}]

 	const userId = storage.get('userId')

 	export default {
 		data() {
 			return {
 				userIdPrefix,
 				storeVn: 0,
 				bgImage: 'data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.36308349769888226%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220.24%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23160028%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E',
 				// 首次加载
 				statusBarHeight: 25,
 				// 是否已登录
 				isLogin: false,
 				showQrcode: false,
 				showContact: false,
 				// 系统设置
 				setting: {},
 				service,
 				// 当前用户信息
 				userInfo: {
 					nickname: '未登录',
 					userId: ''
 				},
 				form: {
 					userId
 				},
 				roleId: 0,
 				roleName: '注册用户',
 				// 已购买的套餐ID
 				buyIds: [],
 				merchant: {
 					// 总收益
 					totalMoney: 0.00,
 					// 当前可提现金额
 					money: 0.00,
 					// 今日收益
 					todayMoney: 0.00,
 					// 本月收益
 					monthMoney: 0.00
 				},
 				QrcodeUrl: ''
 			}
 		},
 		onLoad() {
 			this.getUserInfo()
 			this.getUserEquity()
 			this.getMerchant()
 			this.getQrCode()
 			// 设置navbar标题、颜色
 			uni.setNavigationBarColor({
 				frontColor: '#ffffff',
 				backgroundColor: '#101010'
 			})
 		},
 		onShow() {},
 		onPullDownRefresh() {
 			this.getUserInfo()
 			this.getUserEquity()
 			this.getMerchant()
 			uni.stopPullDownRefresh();
 		},
 		methods: {
 			navTo(item) {
 				if (item.show) {
 					this.$navTo(item.url + '?id=' + item.id)
 				} else {
 					this.$navTo('sub_pages/dealer/merchant/merchant?id=' + item.id)
 				}
 			},
			
 			getUserEquity() {
 				const app = this
 				const {
 					form
 				} = this
 				UserPlanEquityApi.listUserPlanEquity({
 					userId
 				}).then(result => {
 					console.log("result: ", result);
 					const list = result.data
 					// app.roleName = storage.get('roleName')
 					if (list.length > 0) {
 						const maxEquity = list[0]
 						console.log("maxEquity: ", maxEquity);
 						if (maxEquity.planId > 18) {
 							// app.roleName = maxEquity.planName
 							app.storeVn = maxEquity.planId
 							storage.set('storeName', maxEquity.planName)
 							storage.set('storeVn', maxEquity.planId)
 						}
 					}
 					list.map(d => {
 						app.buyIds.push(d.planId)
 					})
 					console.log("app.buyIds: ", app.buyIds);
 					// 隐藏已购买的套餐
 					app.service.map((d, i) => {
 						if (app.buyIds.indexOf(d.id) > -1) {
 							app.service[i].show = false
 						}
 					})
 				})
 			},

 			getUserInfo() {
 				const {
 					form
 				} = this
 				const app = this
 				uni.getSystemInfo({
 					success(data) {
 						if (data) {
 							app.statusBarHeight = data.statusBarHeight
 						}
 					}
 				})
 				getUser().then(res => {
 					if (res.code == 0 && res.data.username != 'www') {
 						app.form = res.data
 						app.userInfo = res.data
 						app.isLogin = true
 					} else {
 						app.isLogin = false
 						app.handleLogout()
 					}
 				})

 			},
 			getMerchant() {
 				const app = this
 				MerchantApi.listMerchant({
 					userId
 				}).then(res => {
 					console.log("res: ", res);
 					if (res.data.length > 0) {
 						app.merchant = res.data[0]
 					}
 				})
 			},
 			onLogin() {
 				const app = this
 				// 未登录状态
 				if (!app.isLogin) {
 					return this.$navTo('pages/login/index')
 				}
 				// 跳转登录页面
 				this.$navTo('pages/user/personal/index')
 			},
			contact(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
 			// 打开邀请码弹窗
 			onShowQrcode() {
 				const app = this
 				if (app.storeVn < 19) {
					app.$error('未开通线上门店')
 					return false
 				}
 				app.getQrCode()
 				app.showQrcode = true
 			},
 			// 获取微信小程序码
 			getQrCode() {
 				const app = this
 				const QrcodeUrl = storage.get('QrcodeUrl')
 				if (QrcodeUrl) {
 					app.QrcodeUrl = QrcodeUrl
 					return false;
 				}
 				WxLoginApi.getWxQrCode().then(res => {
 					app.QrcodeUrl = QrcodeUrl
 					storage.set('QrcodeUrl', res.message)
 				}).catch(err => {
 					app.$error(err.message)
 				})
 			},
 			// 打开客服二维码
 			onShowContact() {
 				this.showContact = true
 			},
 			handleLogout() {
 				uni.redirectTo({
 					url: '/pages/login/index'
 				})
 			},
			
			navToProfit(gradeId){
				if(gradeId < 7){
					return false
				}
				this.$push('sub_pages/profit/profit')
				console.log("gradeId: ",gradeId);
			},
			onPoster(gradeId){
				if(gradeId < 7){
					return false
				}
				this.$push('sub_pages/dealer/poster/poster')
			}
 		}
 	}
 </script>


 <style lang="scss" scoped>
 	.dealer-index {
 		background-color: #f3f3f3;
 		height: 100vh;
 	}

 	.page-bg {
 		width: 750rpx;
 		height: calc(100rpx + var(--status-bar-height));
 		display: block;
 		background-color: #101010;
 		position: absolute;
 		left: 0;
 		top: 0;
 		z-index: -100;
 	}

 	// 页面头部
 	.main-header {
 		// background-color: #FBF7EF;
 		position: fixed;
 		top: 0;
 		width: 100%;
 		height: 420rpx;
 		background-size: 100% 100%;
 		overflow: hidden;
 		display: flex;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;

 		.bg-image {
 			position: absolute;
 			top: 0;
 			left: 0;
 			width: 100%;
 			height: 100%;
 			z-index: 0;
 		}

 		.user-info {
 			display: flex;
 			height: 120rpx;
 			padding-left: 30rpx;
 			z-index: 1;

 			.user-content {
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				margin-left: 30rpx;
 				color: #ffffff;

 				.nick-name {
 					font-size: 30rpx;
 					font-weight: bold;
 					max-width: 270rpx;
 					display: flex;
 					flex-direction: row;

 					image {
 						margin-left: 10rpx;
 						width: 36rpx;
 						height: 36rpx;
 					}
 				}

 				.user-id {
 					font-weight: 300;
 					color: #efefef;
 					font-size: 24rpx;
 				}

 				.mobile {
 					margin-top: 15rpx;
 					font-size: 28rpx;
 				}

 				.user-grade {
 					align-self: baseline;
 					display: flex;
 					align-items: center;
 					background: #3c3c3c;
 					margin-top: 12rpx;
 					border-radius: 10rpx;
 					padding: 4rpx 12rpx;

 					.user-grade_icon .image {
 						display: block;
 						width: 32rpx;
 						height: 32rpx;
 					}

 					.user-grade_name {
 						margin-left: 5rpx;
 						font-size: 26rpx;
 						color: #EEE0C3;
 					}

 				}

 				.roles-box {
 					display: flex;

 					.login-tips {
 						margin-top: 12rpx;
 						margin-right: 6rpx;
 						font-size: 30rpx;
 						display: flex;
 					}
 				}


 			}
 		}

 		.switch {
 			display: flex;
 			color: #ffffff;
 			flex-direction: column;
 			justify-content: center;
 			align-items: center;
 			padding: 50rpx 50rpx 0 0;
 			// font-size: 24rpx;
 			z-index: 999;

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

 			.switch-text {
 				z-index: 9999;
 				// color: #eb9e4c;
 				// color: #681752;
				color: #eb9e4c;
 			}
 		}

 		.setting {
 			color: #cecece;
 			position: absolute;
 			right: 2vh;
 			top: 1vh;

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

 	.main {
		position: fixed;
 		top: 280rpx;
 		left: 25rpx;
 		z-index: 999;

 		// 开通会员
 		.buy-user {
 			display: flex;
 			flex-direction: column;
 			margin: 22rpx auto 22rpx auto;
 			padding: 22rpx 0;
 			width: 700rpx;
 			box-shadow: 0 1rpx 5rpx 0px #eaebec;
 			border-radius: 24rpx;
 			background: #fff;
 			position: relative;

 			.desc {
 				padding-top: 5rpx;
 				padding-left: 32rpx;
 				font-size: 28rpx;
 				color: #545454;
 			}

 			.asset-right {
 				width: 170rpx;
 				border-left: 1rpx solid #eee;
 			}

 			.asset-right-item {
 				text-align: center;
 				color: #545454;

 				.item-icon {
 					font-size: 44rpx;
 				}

 				.item-name {
 					margin-top: 14rpx;
 					font-size: 28rpx;
 				}
 			}

 			.asset-left-item {
 				width: 700rpx;
 				text-align: center;
 				padding-left: 28rpx;
 				display: flex;
 				justify-content: space-between;

 				.item-value {
 					font-size: 34rpx;
 					// color: #febd45;
 				}

 				.item-name {
 					color: #545454;
 					margin-top: 14rpx;
 					font-size: 24rpx;
 					display: flex;
 					justify-content: center;
 					align-items: center;
 					flex-direction: column;
 					margin: 30rpx 25rpx 20rpx 0;
 				}

 				.buy-user-icon {
 					width: 50rpx;
					height: 50rpx;
 					margin-bottom: 8rpx;
 				}

 			}

 			.open-member {
 				position: absolute;
 				right: 20rpx;
 				top: 20rpx;
 			}
 		}

 		.stroe-user {
			// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
 			background-color: #ffffff;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			color: #e99d42;
 			margin: 42rpx auto 42rpx auto;
 			padding: 22rpx 0rpx;
 			width: 700rpx;
 			height: 140rpx;
 			box-shadow: 0 1rpx 5rpx 0px #eaebec;
 			border-radius: 24rpx;

 			.item {
 				padding: 0 50rpx;
 				text-align: center;

 				.profit {
 					font-size: 40rpx;
 					font-weight: 500;
 					color: #e99d42;
 				}

 				.desc {
 					font-size: 24rpx;
 					color: #666666;
 				}
 			}
 		}

 		// 功能列表
 		.service {
 			margin: 24rpx auto 24rpx auto;
 			padding: 30rpx 0;
 			width: 700rpx;
 			box-shadow: 0 1rpx 5rpx 0px #eaebec;
 			border-radius: 24rpx;
 			background: #fff;
 			display: flex;
 			flex-wrap: wrap;

 			.item {
 				display: flex;
 				flex-direction: column;
 				align-items: center;
 				width: 165rpx;
 				padding-left: 8rpx;
 				margin: 25rpx 0;
 				font-size: 26rpx;
 				color: #545454;

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

 				text {
 					white-space: nowrap;
 				}
 			}
 		}
 	}


 	// 退出登录
 	.my-logout {
 		display: flex;
 		justify-content: center;
 		margin-top: 50rpx;

 		.logout-btn {
 			width: 400rpx;
 			margin: 0 auto;
 			font-size: 28rpx;
 			color: #616161;
 			border-radius: 20rpx;
 			border: 1px solid #dcdcdc;
 			padding: 16rpx 0;
 			text-align: center;
 		}
 	}


 	.flex-box {
 		display: flex;
 		justify-content: space-between;

 		.more {
 			padding-right: 20rpx;
 			font-size: 26rpx;
 			color: #999999;
 		}
 	}

 	.footer {
 		.btn-wrapper {
 			width: 360rpx;
 			margin: 50rpx auto;
 			// display: flex;
 			// align-items: center;
 			padding: 0 20rpx;
 		}

 		.xieyi {
 			font-size: 26rpx;
 			text-align: center;
 			color: #999999;

 			text {
 				color: #7f006f;
 			}
 		}
 	}


 	// 我的收益
 	.my-profit {
 		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
 		display: flex;
 		align-items: center;
 		justify-content: space-around;
 		color: #ffffff;
 		margin: 42rpx auto 42rpx auto;
 		padding: 22rpx 0;
 		width: 700rpx;
 		height: 140rpx;
 		box-shadow: 0 1rpx 5rpx 0px #eaebec;
 		border-radius: 24rpx;

 		.item {
 			text-align: center;

 			.profit {
 				font-size: 38rpx;
 				font-weight: 500;
 				color: #ffffff;
 			}

 			.desc {
 				font-size: 24rpx;
 				color: #d8d9dc;
 			}
 		}

 	}

 	// 联系客服
 	.matchamker {
 		background: url('https://oss.jimeigroup.cn/static/my-hunjie-bg2.png');
 		background-size: 100% auto;
 		background-repeat: no-repeat;
 		border-radius: 20rpx;
 		position: relative;
 		display: flex;
 		justify-content: center;
 		width: 450rpx;
 		height: 500rpx;
 		padding: 30rpx;

 		.btn-contant {
 			position: absolute;
 			width: 360rpx;
 			margin: 50rpx auto;
 			bottom: 0;
 			padding: 0 20rpx;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;

 			.qrcode-img {
 				margin: auto;
 				width: 250rpx;
 			}

 			.matchamker-name {
 				text-align: center;
 				color: #999999;
 			}
 		}
 	}

 	// 二维码
 	.qrcode-box {
 		border-radius: 20rpx;
 		position: relative;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		width: 660rpx;
 		height: 1000rpx;

 		.poster {
 			width: 580rpx;
 			height: 750rpx;
 			margin: 40rpx auto;
 			box-shadow: 0px 0px 10px #cccccc;
 			border-radius: 20rpx;
 			display: flex;
 			flex-direction: column;

 			image {
 				width: 580rpx;
 				border-radius: 20rpx 20rpx 0 0;
 			}

 			.user {
 				padding: 20rpx;
 				display: flex;
 				justify-content: space-between;
 				align-items: center;

 				.avatar {
 					display: flex;
 					align-items: center;
 					height: 200rpx;

 					.user-info {
 						display: flex;
 						flex-direction: column;
 						font-size: 26rpx;

 						.phone {
 							color: #999999;
 						}
 					}
 				}

 				.qrcode-img {
 					width: 140rpx;
 				}
 			}

 			.long-press {
 				color: #999999;
 				font-size: 26rpx;
 				text-align: center;
 			}
 		}

 		.gap {
 			font-size: 28rpx;
 			margin: auto;
 			color: #999999;
 		}

 		.share {
 			width: 480rpx;
 			margin: auto;
 			display: flex;
 			justify-content: space-between;
 			font-size: 26rpx;

 			.btn {
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				align-items: center;
 				font-size: 24rpx;
 				color: #666666;

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

 	}
 </style>