retailStore/pages/selfCenter/index.vue

<template>
	<view class="content">
		
		<view class="selfInfo-box">
			 <view class="self-auth">
				 <image src="../../static/bed-bg.png" mode=""></image>
				 <view>
					 <text>棉花糖</text>
					 <text style="margin-left: 30%;font-size: 28rpx;">156****3232</text>
				 </view>
			 </view>
			 
			 <view class="self-content">
				 <view>
					 <text>13982</text>
					 <text style="font-size: 28rpx;">我的积分</text>
				 </view>
				 <view>
				 	 <text>127.83元</text>
				 	 <text style="font-size: 28rpx;">已提现</text>
				 </view>
			 </view>
		</view>
		
		<view class="function-box">
			<view class="function-content" @click="goRecommend">
				<image src="../../static/commend.png" mode=""></image>
				<text>推荐分销品</text>
			</view>
			<view class="function-content" style="background: #33b5fc;" @click="goAward">
				<image src="../../static/award.svg" mode=""></image>
				<text>奖励记录</text>
			</view>
			<view class="function-content" style="background:#fcca2f;" @click="goCashOut">
				<image src="../../static/cashout.svg" mode=""></image>
				<text>提现记录</text>
			</view>
		</view>
		
		<view class="list-box">
			<view class="list-content" @click="applyPower">
				<text class="margin-left5">分销资格</text>
				<view class="apply-box">
					<text style="color: #999;">点击申请</text>
					<image src="../../static/arrow-right2.png" mode=""></image>
				</view>
			</view>
			
			<view class="list-content" @click="goTeamDetail">
				<text class="margin-left5">分销团队</text>
				<view class="apply-box">
					<text style="color: #999;visibility: hidden;">点击申请</text>
					<image src="../../static/arrow-right2.png" mode=""></image>
				</view>
			</view>
			
			<view class="list-content" style="border-bottom: none;" @click="goHelpPage">
				<text class="margin-left5">帮助中心</text>
				<view class="apply-box">
					<text style="color: #999;visibility: hidden;">点击申请</text>
					<image src="../../static/arrow-right2.png" mode=""></image>
				</view>
			</view>
		</view>
			<uni-popup ref="showtip" type="center" :mask-click="false" @change="change">
			<view class="uni-tip">
				<!-- <text class="uni-tip-title">警告</text> -->
				<text class="uni-tip-content">您的申请需要后台审核，确定后请耐心等待结果。</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="cancel()">取消</text>
					<text class="uni-tip-button" @click="cancel()">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup,
		},
		data() {
			return {
				title: 'selfCenter'
			}
		},
		onLoad() {

		},
		methods: {
         goTeamDetail(){
			 uni.navigateTo({
			 	url: '/pages/selfCenter/recommendTeam/index',
			 	success: res => {},
			 	fail: () => {},
			 	complete: () => {}
			 });
		 },
		 goRecommend(){
			uni.switchTab({
				url:'/pages/index/index'
			})
		 },
		 goAward(){
			  uni.navigateTo({
			 	url: '/pages/selfCenter/awardPage/index',
			 	success: res => {},
			 	fail: () => {},
			 	complete: () => {}
			 });
		 },
		 goCashOut(){
		 	uni.navigateTo({
		 		url: '/pages/selfCenter/cashoutPage/index',
		 		success: res => {},
		 		fail: () => {},
		 		complete: () => {}
		 	 });
		 },
		  goHelpPage(){
		 	uni.navigateTo({
		 		url: '/pages/selfCenter/helpPage/index',
		 		success: res => {},
		 		fail: () => {},
		 		complete: () => {}
		 	 });
		 },
		 applyPower(){
			 this.$refs.showtip.open()
		 },
		 cancel(type) {
		 	this.$refs.showtip.close()
		 },
		 change(e) {
		 	console.log('是否打开:' + e.show)
		 }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.selfInfo-box {
		width: 100%;
		height: 320rpx;
		background: #1fa1fb;
		padding-top: 5%;
		color: #fff;
	}
	.self-auth {
		display: flex;
		align-items: center;
	}
    .self-auth image{
		margin-left: 5%;
    	height:120rpx;
    	width:120rpx;
    	border-radius: 50%;
    }
	.self-auth view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
    
	.self-content  {
		margin-top: 10%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.self-content view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.function-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
		width: 100%;
		height: 240rpx;
	}
	
	.function-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		background: #ff685a;
		width: 200rpx;
		height: 180rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #fff;
	}
	.function-content image {
		width: 75rpx;
		height: 75rpx;
		margin-top: 5%;
	}
	.function-content text {
		margin-bottom: 5%;
	}
	
	.list-box {
		width: 100%;
		margin-top: 3%;
		font-size: 30rpx;
	}
	
	.list-content {
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 1px solid #dbdbdb;
	}
	.apply-box {
		display: flex;
		align-items: center;
		width: 180rpx;
	}
	.apply-box image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 5%;
	}
	.margin-left5 {
		margin-left: 5%;
	}
	 /* 提示窗口 */
	.uni-tip {
		padding: 15px;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
	}
	
	.uni-tip-title {
		text-align: center;
		/* font-weight: bold; */
		font-size: 28upx;
		color: #333;
	}
	
	.uni-tip-content {
		font-size: 14px;
		color: #666;
	}
	
	.uni-tip-group-button {
		margin-top: 10px;
		display: flex;
	}
	
	.uni-tip-button {
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>