<template>
	<view>
		<view class="bg">
			<view class="user-box u-flex nav1 nav2">
				<view class="u-flex" style="width: 70%;">
					<view class="u-m-r-10" style="width: 120rpx;height: 120rpx;" @click="dump('/other/gongzhonghao/gongzhonghao')">
						<image :src="pic" style="width: 100%;height: 100%;border-radius: 50%;"></image>
					</view>
					<view class="u-flex-1" style="margin-left: 3%;">
						<view class="u-font-16 u-p-b-20" style="font-weight: bold;">{{mingcheng}}</view>
						<view class="u-font-12">
							<u-icon name="level" size="25"></u-icon>
							<text class="u-m-l-10">{{jibie}}</text>
						</view>
					</view>
				</view>
				<view style="width:150rpx;">
					<view class="u-m-r-30" @click="dump('/other/gongzhonghao/gongzhonghao')">
						<u-icon name="setting" size="32"></u-icon> 设置
					</view>
					<view class="qiandao" @click="dump('/other/gongzhonghao/gongzhonghao')">
						签到
					</view>
				</view>
			</view>
		</view>
		<view class="qubie u-flex">
			<view class="one">查看会员区别</view>
			<view class="two" @click="dump('/other/gongzhonghao/gongzhonghao')">立即查看</view>
		</view>
		<view class="u-p-t-30" style="background: #eee;">
			<view class=" u-m-l-20 u-m-r-20">
				<u-cell-group>
					<u-cell-item  size="38" title="我的收益" value="立即提现" @click="dump('/other/gongzhonghao/gongzhonghao')"></u-cell-item>
				</u-cell-group>
				<view class="dingdan nav2">
					<view class="u-flex">
						<view class="u-flex-1" @click="dump('/other/gongzhonghao/gongzhonghao')">
							<view class="u-p-b-20">¥<text class="u-font-18 u-m-l-10">1566.32</text></view>
							<view class="u-tips-color">总收入</view>
						</view>
						<view class="u-flex-1" @click="dump('/other/gongzhonghao/gongzhonghao')">
							<view class="u-p-b-20">¥<text class="u-font-18 u-m-l-10">586.32</text></view>
							<view class="u-tips-color">可提现</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="u-p-t-30" style="background: #eee;">
			<view class=" u-m-l-20 u-m-r-20" @click="dump('/other/gongzhonghao/gongzhonghao')">
				<u-cell-group>
					<u-cell-item size="38" title="我的订单" value="全部"></u-cell-item>
				</u-cell-group>
				<u-grid :col="4" :border="false">
					<u-grid-item>
						<u-badge count="9" :offset="[20, 20]"></u-badge>
						<image src="/static/me-yifu.png"></image>
						<view class="grid-text">已付款</view>
					</u-grid-item>
					<u-grid-item>
						<image src="/static/me-daifu.png"></image>
						<view class="grid-text">待结算</view>
					</u-grid-item>
					<u-grid-item>
						<image src="/static/me-yijie.png"></image>
						<view class="grid-text">已结算</view>
					</u-grid-item>
					<u-grid-item>
						<image src="/static/me-shixiao.png"></image>
						<view class="grid-text">已失效</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="u-p-t-30 u-p-b-30" style="background: #eee;">
			<view class=" u-m-l-20 u-m-r-20">
				<u-cell-group>
					<u-cell-item  title="我的工具" :arrow="false"></u-cell-item>
				</u-cell-group>
				<u-grid :col="4" :border="false">
					<u-grid-item @click="dump('/other/gongzhonghao/gongzhonghao')">
						<image src="/static/me-haoyou.png"></image>
						<view class="grid-text">我的好友</view>
					</u-grid-item>
					<u-grid-item @click="dump('/other/gongzhonghao/gongzhonghao')">
						<image src="/static/me-jibie.png"></image>
						<view class="grid-text">会员级别</view>
					</u-grid-item>
					<u-grid-item @click="dump('/other/gongzhonghao/gongzhonghao')">
						<image src="/static/me-yaoqing.png"></image>
						<view class="grid-text">邀请好友</view>
					</u-grid-item>
					<u-grid-item @click="dump('/other/gongzhonghao/gongzhonghao')">
						<image src="/static/me-tongzhi.png"></image>
						<view class="grid-text">消息通知</view>
					</u-grid-item>
					<u-grid-item @click="dump('/other/gongzhonghao/gongzhonghao')">
						<image src="/static/me-bangzhu.png"></image>
						<view class="grid-text">帮助中心</view>
					</u-grid-item>
					<u-grid-item @click="dump('/other/gongzhonghao/gongzhonghao')">
						<image src="/static/me-kefu.png"></image>
						<view class="grid-text">联系我们</view>
					</u-grid-item>
					<u-grid-item @click="showModal">
						<u-badge count="123M" :offset="[20, 20]"></u-badge>
						<image src="/static/me-huancun.png"></image>
						<view class="grid-text">清理缓存</view>
					</u-grid-item>
					<u-grid-item @click="dump('/other/gongzhonghao/gongzhonghao')">
						<u-badge count="2.0.1" :offset="[20, 20]"></u-badge>
						<image src="/static/me-banben.png"></image>
						<view class="grid-text">版本更新</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view style="background: #eee;padding: 0 2.5% 10px 2.5%;">
			<image :src="huodogbanner" style="height: 260rpx;width: 100%;border-radius: 10px;"></image>
		</view>
		<u-modal ref="uModal" v-model="show" :show-cancel-button="true"
			:show-title="showTitle" :async-close="asyncClose"
			 :content="content" :title-style="{'text-align': 'left','margin-left': '8%'}"
		></u-modal>
		<dibunav></dibunav>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { dumpUrl, wxOauth } from '@/common/util.js';
	import dibunav from '@/components/dibunav.vue'
	export default {
		components:{
			dibunav
		},
		data() {
			return {
				pic:'http://www.weixincm.com/wp-content/uploads/2020/05/20200507224828-5eb41fbc62a3e.jpg',
				mingcheng:'幼稚范er',
				jibie:'普通会员',
				show: false,
				zoom: false,
				content: '确定要清除缓存吗？',
				contentSlot: false,
				showTitle: true,
				asyncClose: false,
				huodogbanner:'/static/index_banner.png'
			}
		},
		onLoad() {
			
		},
		methods: {
			showModal() {
				this.show = true;
			},
			dump(url) {
				dumpUrl(url);
			}
		}
	}
</script>

<style lang="scss">
.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.bg{
	padding: 1rpx 0 50rpx 0;
	background:#eee url(../../static/me-top.png) no-repeat center;
	background-size: 100% 100%;
	color: #272626;
}
/*#ifdef MP-WEIXIN*/
	.bg{
		background: linear-gradient(to right bottom,#de9d5e,#e3ac77);
	}
/*#endif*/
.qiandao{
	margin-top: 20rpx;
	padding: 10rpx 0;
	text-align: center;
	border: 1px solid #272626;
	border-right: 0;
	border-radius: 30rpx 0 0 30rpx;
}
.qubie{
	padding: 20rpx 7% 30rpx 7%;
	justify-content: space-between;
	background:#eee url(../../static/me-qubie.png) no-repeat center;
	background-size: 100% 100%;
}
.qubie .one{
	color: #e3ac77;
}
.qubie .two{
	width: 200rpx;
	text-align: center;
	line-height: 60rpx;
	border-radius: 40rpx;
	background: linear-gradient(to right,#fde8c5,#e2bb7a);
	color: #563412;
	cursor: pointer;
}
.nav1{
	padding: 90rpx 0 0 30rpx;
}
/*#ifdef H5*/
.nav1{
	padding: 50rpx 0 0 30rpx;
}
/*#endif*/
/*#ifdef MP-WEIXIN*/
	.nav1{
		padding-top:150rpx;
	}
/*#endif*/
.tixian{
	margin-top: 30rpx;
	padding: 20rpx 0;
	background: #fff;
	text-align: center;
	border-radius: 15rpx;
	box-shadow: 0 2px 10px #eee;
}
.tixian .u-flex{
	justify-content: center;
}
.tixian .u-font-12{
	margin-top: 15rpx;
	color: #666;
}
.user-box.nav2{
	justify-content: space-between;
	align-items: flex-start;
}
.dingdan.nav2 .u-p-b-20{
	font-weight: bold;
	color: #646362;
}
.dingdan{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 30rpx;
	padding: 20rpx 0;
	background: #fff;
	text-align: center;
}
.mingxi{
	padding-top: 20rpx;
	margin-top: 15rpx;
	border-top:1px solid #eee;
}
.dingdan.nav2{
	width: 100%;
	margin-bottom: 0;
	box-shadow: inherit;
}
.grid-text {
	font-size: 28rpx;
	margin-top: 4rpx;
	color: $u-type-info;
}
.u-grid-item image{
	width: 60rpx;
	height:60rpx;
}
.grid-text{
	margin-top: 15rpx;
}
</style>
