retailStore/pages/selfCenter/index.vue

<template>
	<view class="content">
		<view class="selfInfo-box">
			<view>
				<button type="primary" @click.stop="goAuth" v-if="!isAuth"  class="authUser">点击授权</button>
			</view>
			<view class="self-auth" v-if='isAuth'>
				<image :src="userHead" mode=""></image>
				<view style="margin-left: 3%;">
					<text>{{userName}}</text>
					<text style="font-size: 28rpx;" v-if="isAuthPhone">{{userPhone}} </text>
					<button type="primary" class="authPhone"  open-type="getPhoneNumber"  style="font-size: 12px;"
					@getphonenumber="getPhoneNumber" v-else>手机号码授权</button> 
				</view>
			</view>

			<view class="self-content">
				<view>
					<text>{{userInfoObj.scorenumber || '0'}}</text>
					<text style="font-size: 28rpx;">我的积分</text>
				</view>
				<view>
					<text>{{userInfoObj.num || '0'}}元</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;" :style="{'margin-right':userStatus==='点击申请'? '0':'2px'}" decode="true">{{userStatus}}</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'
var md5 = require('../../common/md5.js')
export default {
	components: {
		uniPopup,
	},
	data() {
		return {
			title: 'selfCenter',
			userName:getApp().globalData.user_name,
			userHead:getApp().globalData.user_headUrl || '/static/logo.png',
			userPhone:getApp().globalData.user_phone  || '156****3232',
			isAuth:getApp().globalData.isAuth,
			isAuthPhone:getApp().globalData.user_phone,
			userInfoObj:{},
			userStatus:'点击申请',
		}
	},
	onLoad() {
	},
	onShow() {
		this.switchUserStatus(getApp().globalData.user_status)
		this.getUserInfo();
	},
	methods: {
     switchUserStatus(status){
		 console.log(status)
		 let that = this;
		 switch (status){
		 	case '1':
			    that.userStatus = '审核中'+'&nbsp;&nbsp;&nbsp;'
		 		break;
			case '2':
			    that.userStatus = '已认证'+'&nbsp;&nbsp;&nbsp;'
				break;
			case '3':
			    that.userStatus = '已禁用'+'&nbsp;&nbsp;&nbsp;'
				break;
			case '4':
			    that.userStatus = '点击申请'
				break;			
		 	default:
			    that.userStatus = '点击申请'
		 		break;
		 }
	 },		
	 getUserInfo(){
		  let that = this;
			 uni.request({
				url: getApp().globalData.shareUrl, //需要设置为全局
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					method: 'getUserInfo',
					timestamp: getApp().globalData.globalTimestamp, //Date.now()
					uid:getApp().globalData.user_id,
					sign: md5('getUserInfo' + getApp().globalData.globalTimestamp)
				},
				success: res => {
					if (res.data.code === 200) {
						console.log(res.data.msg)
						that.userInfoObj = res.data.msg;
						that.isAuth = res.data.msg.auth_status === '1';
						that.isAuthPhone = res.data.msg.phone;
						if(that.isAuth){
							that.userName  = getApp().globalData.user_name;
							that.userHead = getApp().globalData.user_headUrl;
						}
					    if(that.isAuthPhone){
							that.userPhone = res.data.msg.phone;
						}
						//that.cashOutList = res.data.msg
					}
				}
			 });
	 },
        goTeamDetail(){
		 if(getApp().globalData.isAuth){
			 uni.navigateTo({
				url: '/pages/selfCenter/recommendTeam/index',
				success: res => {},
				fail: () => {},
				complete: () => {}
			}); 
		 }else {
			 this.goAuth()
		 }	
		
	 },
	 goRecommend(){
		uni.switchTab({
			url:'/pages/index/index'
		})
	 },
	 goAward(){
		 if(getApp().globalData.isAuth){
			   uni.navigateTo({
			 	url: '/pages/selfCenter/awardPage/index',
			 	success: res => {},
			 	fail: () => {},
			 	complete: () => {}
			 });
		 }else {
			 this.goAuth()
		 }
		
	 },
	 goCashOut(){
		 if(getApp().globalData.isAuth){
			uni.navigateTo({
				url: '/pages/selfCenter/cashoutPage/index',
				success: res => {},
				fail: () => {},
				complete: () => {}
			 }); 
		 }else {
			 this.goAuth()
		 }
	 	
	 },
	 goHelpPage(){
	 	uni.navigateTo({
	 		url: '/pages/selfCenter/helpPage/index',
	 		success: res => {},
	 		fail: () => {},
	 		complete: () => {}
	 	 });
	 },
	 applyPower(){
		 let that = this;
		 if(that.userStatus === '点击申请'){
		 	uni.request({
		 				url: getApp().globalData.shareUrl, //需要设置为全局
		 				method: 'POST',
		 				header: {
		 					'content-type': 'application/x-www-form-urlencoded'
		 				},
		 				data: {
		 					method: 'zigeapply',
		 					timestamp: getApp().globalData.globalTimestamp, //Date.now()
		 					uid:getApp().globalData.user_id,
		 					sign: md5('zigeapply' + getApp().globalData.globalTimestamp)
		 				},
		 				success: res => {
		 					if (res.data.code === 200) {
		 						console.log(res.data.msg)
		 						this.$refs.showtip.open()
		 						//that.cashOutList = res.data.msg
		 					}
		 				}
		 	});		 
		 }else{
			 return false
		 }
		
	 },
	 cancel(type) {
		this.userStatus = '审核中'+'&nbsp;&nbsp;&nbsp;'
	 	this.$refs.showtip.close()
	 },
	 change(e) {
	 	console.log('是否打开:' + e.show)
	 },
	 goAuth(){
		 uni.navigateTo({
		 	url: '/pages/auth/index',
		 	success: res => {},
		 	fail: () => {},
		 	complete: () => {}
		 });
	 },
	 getPhoneNumber(e){
	 	let that = this;
		console.log(e)
	 	 if (e.detail.errMsg == 'getPhoneNumber:ok') { //允许授权执行跳转
		     console.log(e.detail.iv)
			that.phoneRequest(e.detail.iv, e.detail.encryptedData, getApp().globalData.session_key)  
			} 
		else { 
			 that.isNeedPhone = false;
	 	}
	 },
	 phoneRequest(myIv,myEncryptedData,sKey){
		 console.log(11111)
	 	let that = this;
	 	uni.request({
	 		url:getApp().globalData.shareUrl, //需要设置为全局
	 		method: 'POST',
	 		header: {
	 			'content-type': 'application/x-www-form-urlencoded'
	 		},
	 		data: {
	 			method: 'getPhoneNumber',
	 			timestamp: getApp().globalData.globalTimestamp, //Date.now()
	 			uid:getApp().globalData.user_id,
	 			sign: md5('getPhoneNumber' + getApp().globalData.globalTimestamp),
	 			iv:myIv,
	 			sessionKey:sKey,
	 			encryptedData:myEncryptedData,
	 		},
	 		success: res => {
	 			if(res.data.code === 200){
					getApp().globalData.user_phone = res.data.msg.phoneNumber;
					that.userPhone = res.data.msg.phoneNumber;
					that.isAuthPhone = res.data.msg.phoneNumber;
				}
	 		} 
	 	});
	 },
	}
}
</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: 200rpx;
}
.apply-box image {
	width: 50rpx;
	height: 50rpx;
	margin-right: 5%;
}
.margin-left5 {
	margin-left: 5%;
}
.authUser {
	width: 70%;
	font-size: 14px;
	background-color: #fff!important;
	color: #1fa1fb!important;
}
.authPhone {
	font-size: 12px;
	margin-left: ;
	margin-left: 10px;
	margin-top: 5px;
	background-color: #fff!important;
	color: #1fa1fb!important;
}
/* 提示窗口 */
.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>