jd_logistics/jd_logistics-app/pages/mine/mine1.vue

<template>
	<view class="mine_ybt bg_color_primary">
		<view class="mine_ybt_top pad30">
			<headerInfo title="个人中心"></headerInfo>
			 <view class="flex-center-between color_fff mg20">
				<u-avatar  @click="toUser"
					size="100rpx"
					shape="circle"
					:src="appStore?.userInfo?.avatar"
					mode="aspectFill"
				></u-avatar>
				<view class="flex_1 flex-center-between ml20">
					<view class="">
						<view class="font_size35">
							<text v-if="appStore.userInfo?.userPhone" class="mr20"  @click="toUser">{{appStore.userInfo?.nickName}}</text>
							<!-- <text v-else @click="toLogin()">请点击登录</text> -->
							<button v-else
								class="login-btn" 
								open-type="getPhoneNumber"
								@getphonenumber="getPhoneNumberFn"
							>
								请点击登录
							</button>
							<text v-if="appStore.userInfo?.memberStatus==1" class="memberPlanName">{{appStore.userInfo?.memberPlanName}}</text>
						</view>
						<view class="font_size25 mt20" v-if="appStore.userInfo?.memberExpire">
							<!-- <text>{{appStore.userInfo?.memberPlanName}}</text> -->
							<text class="vipTime">到期时间：{{appStore.userInfo?.memberExpire}}</text>
						</view>
					</view>
					<view class="order_btn flex-center share_btn" @click="toUser">
						<view class="flex-center border_radius_20">
							<text>编辑资料</text>
						</view>
					</view>
				</view>
			 </view>
			<view class="border_radius_20 padding20 vipCar flex-center-between">
				<view class="flex_1 flex-center-flex-start mr20">
					<image src="/static/img/mine/vipcard.png" mode="" class="vipcard-img mr10"></image>
					<text style="color: rgb(246, 223, 185);">开通会员解锁更多权益</text>
				</view>
				<view class="order_btns jiesuo border_radius_20 font_size25" @click="toVip">
					{{appStore.userInfo?.memberStatus==1?'查看权益' : '立即解锁'}}
				</view>
			</view>
		</view>
		<view class="mine_content padding30 mt20">
			<!-- 我的订单 -->
			<view class="font_size25 padding20 border_radius_20 bg_color_fff mb20">
				<view class="flex-center-between paddingTB20 border-bottom menuList"
				@click="toPage(item)"
				 v-for="(item, index) in menuList" :key="index">
					<view class="flex-center-flex-start mr20 flex_1">
						<image :src="item.img" mode="" class="order-img mr20"></image>
						<text>{{item.name}}</text>
					</view>
					<image src="/static/img/arrow-right.png" mode="widthFix" class="menu_img"></image>
				</view>
				<view class="flex-center-between paddingTB20 border-bottom menuList" @click="makePhoneCall">
					<view class="flex-center-flex-start mr20 flex_1">
						<image src="/static/img/mine/kefu.png" mode="" class="order-img mr20"></image>
						<text>服务热线</text>
					</view>
					<image src="/static/img/arrow-right.png" mode="widthFix" class="menu_img"></image>
				</view>
				<view class="flex-center-between paddingTB20 border-bottom menuList" v-if="appStore.userInfo?.userPhone"
				@click="userLogoutFn(item)">
					<view class="flex-center-flex-start mr20 flex_1">
						<image src="/static/img/mine/Logout.png" mode="" class="order-img mr20"></image>
						<text>退出登录</text>
					</view>
					<image src="/static/img/arrow-right.png" mode="widthFix" class="menu_img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { userLogout } from "@/api/user.js";
import { getAdServicePhone } from "@/api/home.js";
import headerInfo from "@/components/headerInfo.vue";
import { telEncrypt,checkLoginShowModal, getPhoneNumber } from "@/utils/util.js";
import { onLoad, onShareAppMessage} from '@dcloudio/uni-app'
import { useAppStore } from "@/stores/app";
const appStore = useAppStore();

onShareAppMessage((res) => {
  return appStore.onShareAppMessageObj
})

	const menuList = ref([
		{
			name: '我的钱包',
			img: "/static/img/mine/money.png",
			url: '/pages/recharge/wallet'
		},
		{
			name: '去充值',
			img: "/static/img/mine/vip.png",
			url: '/pages/recharge/recharge'
		},
		// {
		// 	name: '会员充值记录',
		// 	img: "/static/img/mine/chongzhijulu.png",
		// 	url: ''
		// },
		{
			name: '我的订单',
			img: "/static/img/mine/order.png",
			url: '/pages/order/order_list'
		}
	]);

onLoad(() => {
	getAdServicePhoneFn();
});
async function toUser(){
	if(!await checkLoginShowModal())return;
	uni.navigateTo({
		url: '/pages/user/user'
	});
}
async function toVip(){
	if(!await checkLoginShowModal())return;
	uni.navigateTo({
		url: '/pages/recharge/vip'
	});
}
async function toPage(item){
	if(!await checkLoginShowModal())return;
	if(!item.url) return;
	uni.navigateTo({
		url: item.url
	});
}
function getPhoneNumberFn(e){
  getPhoneNumber(e)
};
// 退出登录
function userLogoutFn(){
	//确认退出登录吗
	uni.showModal({
		title: '提示',
		content: '确认要退出登录吗？',
		success: function (res) {
			if (res.confirm) {
				userLogout({}).then(res=>{ 
					appStore.LOGOUT();
				})
			}
		}
	})
}
// 获取客服电话
const phoneNumber = ref('');
function getAdServicePhoneFn() {
  getAdServicePhone({}).then(res => {
    phoneNumber.value = res.data?.servicePhone || '';
  }).catch(err => {
    console.log(err);
  });
}
// 拨打电话方法
const makePhoneCall = () => {
  if(!phoneNumber.value){
    Toast({title:'请先配置客服电话'})
    return;
  }
  uni.makePhoneCall({
    phoneNumber:phoneNumber.value,
    success: () => {
      console.log('成功唤起拨号界面');
    },
    fail: (err) => {
      console.error('唤起拨号界面失败', err);
    }
  });
};
</script>

<style lang="less" scoped>
.mine_ybt{
	height: 100vh;
	.vipCar{
		margin-top: 30rpx;
    background: linear-gradient(97.4139deg, rgb(137, 153, 191) 4.58393%, rgb(89, 88, 103) 97.8314%);
		.jiesuo{
			background: linear-gradient(94.5323deg, rgb(251, 239, 216) 10.1217%, rgb(241, 210, 164) 94.0504%);
		}
		.vipcard-img{
			width: 80rpx;
			height: 80rpx;
		}
	}
	// background-size: 100% 100%;
	.order_btns{
		padding: 8rpx 20rpx;
		display: inline-block;
		&.active{
			background: #fc4f1d;
		}
	}
	.share_btn{
		border:1px solid #ffffff;
		padding: 10rpx 20rpx;
		background: transparent;
		.share_img{
			width: 30rpx;
		}
	}
	.mine_content{
		border-radius: 30rpx 30rpx 0 0;
		background: #f5f5f5;
		min-height: calc(100vh - 200rpx);
	}
	.order-img{
		width: 40rpx;
		height: 40rpx;
	}
	.menu_img{
		width: 50rpx;
		height: 50rpx;
	}
	.menuList{
		&:last-child{
			border-bottom: none;
		}
	}
	.vipTime{
		opacity: .7;
	}
	/* 登录按钮 */
	.login-btn {
		background-color: transparent;
		color: #fff;
		font-size: 35rpx;
		font-weight: bold;
		text-align: left;
	}
  .memberPlanName{
		background: linear-gradient(90deg, #FDE492    0%, #FDB85D  100%);
		color: #874605 ;
    padding: 5rpx 10rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
  }
	
}
</style>