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>
					<text style="margin-left: 10%;">{{userName}}</text>
					<text style="margin-left: 10%;font-size: 28rpx;" v-if="isAuthPhone">{{userPhone}} </text>
					<button type="primary" class="authPhone"  open-type="getPhoneNumber"  style="font-size: 12px;"
					bindgetphonenumber="getPhoneNumber" v-else>手机号码授权</button> 
				</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'
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
		}
	},
	onLoad() {
      this.getUserInfo();
	},
	methods: {
	 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:'1',
					sign: md5('getUserInfo' + getApp().globalData.globalTimestamp)
				},
				success: res => {
					if (res.data.code === 200) {
						console.log(res.data.msg)
						//that.cashOutList = res.data.msg
					}
				}
			 });
	 },
        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)
	 },
	 goAuth(){
		 uni.navigateTo({
		 	url: '/pages/auth/index',
		 	success: res => {},
		 	fail: () => {},
		 	complete: () => {}
		 });
	 },
	 getPhoneNumber(e){
	 	let that = this;
	 	 if (e.detail.errMsg == 'getPhoneNumber:user deny') { //用户点击拒绝
	 	 that.isNeedPhone = false;
	 	} else { //允许授权执行跳转
	 	  that.phoneRequest(e.detail.iv, e.detail.encryptedData, app.globalData.sessionKey)    
	 	}
	 },
	 		phoneRequest(myIv,myEncryptedData,sKey){
	 	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:that.iv,
	 			sessionKey:getApp().globalData.session_key,
	 			encryptedData:that.encryptedData,
	 		},
	 		success: res => {
	 			console.log(res)
	 		} 
	 	});
	 },
	}
}
</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%;
}
.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>