restaurant_system_ui_uni/yudao-ui-admin-uniapp/sheep/components/s-user-card/s-user-card.vue

<!-- 装修用户组件：用户卡片 -->
<template>
	<view class="ss-user-info-wrap ss-p-t-50">
		<view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
			<view class="left-box ss-flex ss-col-center ss-m-l-36">
				<view class="avatar-box ss-m-r-24">
					<image class="avatar-img" :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar)
                : sheep.$url.static('/static/img/shop/default_avatar.png')
            " mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
				</view>
				<view>
					<view class="nickname-box ss-flex ss-col-center">
						<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
					</view>
				</view>
			</view>
			<view class="right-box ss-m-r-52" v-show="isLogin">
				<button class="ss-reset-button"  @tap="sheep.$router.go('/pages/public/setting')">
					<!-- <text class="sicon-qrcode"></text> -->
					 {{'设置 >'}}
				</button>
			</view>
		</view>

		<!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
		<view
      v-if="isLogin "
	  style="background-color: #fff;"
    >
	<view style="font-size: 25px;padding:10px; border-bottom: 1px solid black;width: 100%;" >收货地址</view><br/>
	<view style="width: 100%;padding:10px;" class="ss-flex" >
		<view style="width: 40%;font-size: 20px;">{{ addressList.name }}</view>
		<view style="width: 50%;font-size: 20px;">{{ addressList.phone }}</view>
	</view>
	<view style="width: 100%;padding:10px;" >{{ addressList.address }}</view>
	<button style="margin: 20px;" type="primary" @tap="sheep.$router.go('/pages/user/address/edit')">修改地址</button>
	<!-- {{ addressList }} -->
      <!-- <view class="ss-flex">
        <text class="cicon-mobile-o" />
        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
      </view> -->
      <!-- <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button> -->
    </view>
	</view>
</template>

<script setup>
	/**
	 * 用户卡片
	 *
	 * @property {Number} leftSpace 									- 容器左间距
	 * @property {Number} rightSpace 									- 容器右间距
	 *
	 * @property {String} avatar 					- 头像
	 * @property {String} nickname 					- 昵称
	 * @property {String} vip		  				- 等级
	 * @property {String} collectNum 				- 收藏数
	 * @property {String} likeNum 					- 点赞数
	 *
	 *
	 */
	import {
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		showShareModal,
		showAuthModal
	} from '@/sheep/hooks/useModal';

	// 用户信息
	const userInfo = computed(() => sheep.$store('user').userInfo);
	console.log('用户信息', userInfo)
	const addressList = computed(() => {
		let addressList = sheep.$store('user').addressList
		console.log('addressList', addressList)
		if(addressList){
			return addressList
		}else{
			sheep.$router.go('/pages/user/address/edit')
		}
	
	})
	// 是否登录
	const isLogin = computed(() => sheep.$store('user').isLogin);
	// 接收参数
	const props = defineProps({
		background: {
			type: String,
			default: '',
		},
		// 头像
		avatar: {
			type: String,
			default: '',
		},
		nickname: {
			type: String,
			default: '请先登录',
		},
		vip: {
			type: [String, Number],
			default: '1',
		},
		collectNum: {
			type: [String, Number],
			default: '1',
		},
		likeNum: {
			type: [String, Number],
			default: '1',
		},
	});

	function onBind() {
		showAuthModal('changeMobile');
	}
</script>

<style lang="scss" scoped>
	.ss-user-info-wrap {
		box-sizing: border-box;

		.avatar-box {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;

			.avatar-img {
				width: 100%;
				height: 100%;
			}
		}

		.nick-name {
			font-size: 34rpx;
			font-weight: 400;
			color: #333333;
			line-height: normal;
		}

		.vip-img {
			width: 30rpx;
			height: 30rpx;
		}

		.sicon-qrcode {
			font-size: 40rpx;
		}
	}

	.bind-mobile-box {
		width: 100%;
		height: 84rpx;
		padding: 0 34rpx 0 44rpx;
		box-sizing: border-box;
		background: #ffffff;
		box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

		.cicon-mobile-o {
			font-size: 30rpx;
			color: #ff690d;
		}

		.mobile-title {
			font-size: 24rpx;
			font-weight: 500;
			color: #ff690d;
		}

		.bind-btn {
			width: 100rpx;
			height: 50rpx;
			background: #ff6100;
			border-radius: 25rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
</style>