leave-unused/pages/my/my.vue

<template>
	<view class="pad-x120" v-if="isLoading">
		<!-- 个人信息 -->
		<view class="my-herder border-box" :style="{'padding-top':statusHeight+50+'px'}">
			<!-- 头像 -->
			<view class="my-portrait radius100">
				<image :src="headPortrait" mode="widthFix"></image>
			</view>
			<!-- 用户名 -->
			<view class="my-nickname mar-s10 color-ff font36 flex">
				<text>{{nickName}}</text>
			</view>
		</view>
		<!-- 其他资料 -->
		<view class="my-content background-white radius10 border-box">
			<view class="item flex" v-for="(item,index) in listData" :key="index" @tap.stop="goPage(index)">
				<view class="title flex">
					<view class="img flex">
						<image :src="item.imgSrc" :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}" mode="widthFix"></image>
					</view>
					<view class="title font28">{{item.titele}}</view>
				</view>
				<view class="more">
					<image src="/static/icon-join.png" mode="widthFix" style="width: 14rpx;height: 26rpx;"></image>
				</view>
				<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" v-if="index==0&&mobile!==''"></button>
			</view>
		</view>
		<!-- 发布按钮 -->
		<release-btn></release-btn>
		<!-- 底部tab -->
		<tabbar current="1"></tabbar>
	</view>
</template>

<script>
	import releaseBtn from '@/components/release-btn/release-btn.vue';
	import tabbar from '@/components/tabbar/tabbar.vue';
	import {mapState} from 'vuex'//引入mapState
	export default {
		components:{
			releaseBtn,
			tabbar
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				headPortrait:'', //头像
				nickName:'', //用户名
				mobile:'', //电话号
				listData:[
					{titele:'个人资料',imgSrc:'/static/icon-my-01.png',iconWidth:36,iconHeight:36},
					{titele:'我的发布',imgSrc:'/static/icon-my-02.png',iconWidth:36,iconHeight:36},
					{titele:'反馈建议',imgSrc:'/static/icon-my-03.png',iconWidth:36,iconHeight:36}
				], //列表数据
				isLoading:false, //是否加载完成
			}
		},
		onShow() {
			// 获取用户信息
			this.getUserInfo();
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				uni.showLoading({
					title:'加载中'
				});
				this.$requst.get('/api/v1/user/info').then(res=>{
					console.log(res,'用户信息');
					if(res.code==0) {
						this.headPortrait = res.data.headimgurl;
						this.nickName = res.data.nickname;
						this.mobile = res.data.mobile;
					}
					uni.hideLoading();
					
					this.isLoading = true;
				})
			},
			
			// 跳转方式
			goPage(index){
				switch (index){
					case 0:{
						if(this.mobile==''){
							uni.navigateTo({
								url:`/pages/my/ucenter`
							})
						}
						break;
					}
					case 1:{
						uni.navigateTo({
							url:`/pagesA/goods/goods`
						})
						break;
					}
					case 2:{
						uni.navigateTo({
							url:`/pagesA/feedback/feedback`
						})
						break;
					}
				}
			},
			
			// 获取授权信息
			onGetPhoneNumber(e){
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权
					this.$toolAll.tools.showToast('您已拒绝授权');
				}else{ //允许授权  
					let params={
						iv:e.detail.iv,
						encryptedData:e.detail.encryptedData
					}
					this.$requst.post('/api/v1/user/bind-phone',params).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('绑定成功');
							this.getUserInfo();
							uni.navigateTo({
								url:`/pages/my/revise`
							})
						}else{
							this.$toolAll.tools.showToast(res.msg);
						}
					})
					
				}
			},
		}
	}
</script>

<style scoped>
	.my-herder{
		width: 100%;
		padding-bottom: 40rpx;
		background-image: linear-gradient(to top,rgba(25,129,255,.5),rgba(25,129,255,1));
	}
	.my-portrait{
		width: 180rpx;
		height: 180rpx;
		overflow: hidden;
		margin: 0 auto;
	}
	.my-portrait>image{
		width: 100%;
	}
	.my-nickname{
		justify-content: center;
		width: 100%;
	}
	.my-content{
		width: calc(100% - 40rpx);
		margin: 20rpx auto;
		padding: 20rpx;
		box-shadow: 0 0 15rpx rgba(0,0,0,.1);
	}
	.my-content .item{
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		border-bottom: 2rpx solid #f4f5f6;
		position: relative;
	}
	.my-content .item:last-child{
		border: 0;
	}
	.my-content .item .get-phone-btn{
		opacity: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}
	.my-content .item>.title{
		align-items: center;
	}
	.my-content .item>.title .img{
		width: 46rpx;
	}
</style>