xinjiangMiniProgram/pages/tabbar/mine/mine.vue

<template>
	<view class="content" :style="{background:'url('+topBgUrl+') #F5F5F5 no-repeat', backgroundSize: '100% 552rpx' }">
		<avabtnBox/>
		<view class="padding">
			<view class="userInfo flex">
				<view class="avatar">
					<image :src="avaUrl" mode="" v-if="avaUrl"></image>
				</view>
				<view class="userTxt">
					<view class="" v-if="counterStore.token">
						<view class="name" > {{ counterStore.userInfo.name }} </view>
						<view class="phone">{{ counterStore.userInfo.userPhone }}</view>
					</view>
					<view class="name" v-else  @click="$goPage('/pages/subPage/login/login')">登录/注册</view>
				</view>
				
			</view>
			<view class="card">
				<view class="li flex-b" v-for="(item,index) in configList" :key="index" @click="$goPage(item.url)">
					<view class="text">{{ item.text }}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="li flex-b" >
					<button type="default" open-type="contact" class="cotact" ref="avatarRef">联系客服</button>
					<view class="text">联系客服</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="logOutBtn padding" v-if="counterStore.token">
			<view class="btn" @click="logOutFn">退出登录</view>
		</view>
	</view>
</template>

<script setup>
import siteObj from '@/config/site.config.js'
const {imgUrl} = siteObj
const topBgUrl = imgUrl + 'minebg.png'
import { logOut } from '@/config/api.js'

import { getUserInfo } from '@/config/api.js'
import { onShow } from '@dcloudio/uni-app'
	import { userStore } from '@/store/index.js';
	const counterStore = userStore();
	
import { ref,  } from 'vue'
const configList = ref([
	{text: '用户协议', url: '/pages/subPage/privacyAgreement/privacyAgreement?type=2'},
	{text: '隐私政策', url: '/pages/subPage/privacyAgreement/privacyAgreement?type=1'},
])

 function logOutFn() {
	 uni.showModal({
	 	content: '确定要退出登录吗？',
	 	success: async function (res) {
	 		if (res.confirm) {
	 			await logOut()
				counterStore.goLogin()
	 		} else if (res.cancel) {
	 			console.log('用户点击取消');
	 		}
	 	}
	 });
 }
 
 async function getUserInfoFn() {
	 const {data: res} = await getUserInfo()
	 counterStore.upDateUseInfo('name', res.userName)
	 counterStore.upDateUseInfo('userPhone', res.userPhone)
	 console.log(res)
 }

 onShow(()=>{
	 counterStore.upDateUseInfo('name', '')
	 if(counterStore.token && !counterStore.userInfo.name) {
		getUserInfoFn()
	 }
 })


// const userName = ref('')

// uni.login({
//     provider: 'weixin',
//     success: function (loginRes) {
//         console.log(loginRes.authResult); // 打印登录凭证
//         // 使用登录凭证获取用户信息
// 		console.log('来这里了吗？')
//         uni.getUserProfile({
//             provider: 'weixin',
//             success: function (infoRes) {
//                 console.log(infoRes.userInfo); // 打印用户信息
//                 console.log('用户昵称为: ' + infoRes.userInfo.nickName); // 打印用户昵称
// 				userName.value = infoRes.userInfo.nickName
// 				avatarUrl.value = infoRes.userInfo.avatarUrl
//             },
// 			fail(err) {
// 				console.log('失败了吗？')
// 				console.log(err)
// 			}
//         });
//     }
// });

</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.logOutBtn {
		position: fixed;
		bottom: 90rpx;
		left: 0;
		width: 100%;
		.btn {
			line-height: 80rpx;
			font-size: 30rpx;
			color: #ccc;
			text-align: center;
			border-radius: 10rpx;
			border: 1px solid #ccc;
		}
	}
	.content {
		width: 100%;
		// background: url('http://47.96.82.242/htmls/bigImg/minebg.png') #F5F5F5 no-repeat;
		
		min-height: 100vh;
		
	  .userInfo {
		  padding: 200rpx 0 40rpx 0;
		  
	    .avatar {
			width: 114rpx;
			height: 114rpx;
			background: url('../../../static/images/avatar.png') #F5F5F5 no-repeat;
			background-size: 100% 100%;
			border-radius: 50%;
			overflow: hidden;
	    }
	
	    .name {
			margin-left: 30rpx;
			font-size: 34rpx;
			font-weight: 700;
			color: #fff;
	    }
		.phone {
			margin: 10px 0 0 30rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #fff;
		}
	  }
	
	  .card {
		  background: #FFFFFF;
		  border-radius: 14rpx;
		  padding: 0 30rpx;
	    .li {
			width: 100%;
			height: 108rpx;
			border-bottom: 1px solid #EFEFEF;
			position: relative;
			.cotact {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				opacity: 0;
			}
			&:last-child {
				border: none;
			}
	      .text {
			font-size: 28rpx;
	      }
	
	      u-icon {
	
	      }
	    }
	  }
	}
</style>