cashier_wx/pages/user/user.vue

<template>
	<view class="container">
		<image class="topBack"
			:src="shopExtend?shopExtend.value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'"
			mode="aspectFill"></image>
		<view class="myContent">
			<view class="my_info flex-between">
				<view class="my_info_left">
					<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
					<view class="name">{{userInfo.nickName || '无'}}</view>
				</view>
				<image class="my_info_right_qr" @click="clickEvent" v-if="shopInfo.isVip!=0"
					:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill">
				</image>
				<view class="my_info_right" @click="clickEvent" v-else>
					<text>免费入会</text>
				</view>
			</view>


			<view class="my_item my_assets">
				<view class="my_item_title">我的资产</view>
				<view class="my_assets_list">
					<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myAssetsList"
						:key="index">
						<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
						<view class="my_list_item_name">{{item.name}}</view>
						<view class="my_list_item_num">{{item.num || '**'}}</view>
					</view>
				</view>
			</view>

			<view class="my_item my_fun">
				<view class="my_item_title">我的功能</view>
				<view class="my_fun_list">
					<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myFunList"
						:key="index">
						<view class="my_list_item_left">
							<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
							<view class="my_list_item_name">{{item.name}}</view>
						</view>
						<view class="my_list_item_right">
							<u-icon name="play-right-fill" color="#999999" size="12"></u-icon>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		reactive
	} from "vue";
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app'
	const myAssetsList = ref([
		[{
				name: "储值",
				type: "recharge",
				num: 0,
				icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png"
			},
			{
				name: "积分",
				type: "points",
				num: 0,
				icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png"
			},
			{
				name: "优惠券",
				type: "my_coupon",
				num: 0,
				icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/coupon.png"
			},
			// { name: "权益卡", type: "", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/equityCard.png"}
		]
	])
	const myFunList = ref([{
			name: "我的优惠券",
			type: "my_coupon",
			icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_coupon.png"
		},
		{
			name: "我的订单",
			type: "my_order",
			icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_order.png"
		},
		// { name: "收货地址", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_address.png"},
		{
			name: "个人资料",
			type: "my_info",
			icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/personal.png"
		},
		{
			name: "我的会员卡",
			type: "my_member",
			icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png"
		},
		// { name: "关于", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/inRegard.png"},
	])
	const shopInfo = reactive({
		isVip: 0
	})
	const userInfo = reactive({
		nickName: '无名',
		headImg: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png'
	})
	const teblist = ref([])
	const shopExtend = ref(null)
</script>

<style scoped lang="scss">
	.topBack {
		width: 100%;
		height: 400rpx;
		position: absolute;
	}

	.myContent {
		position: relative;
		z-index: 1;
		padding: 298rpx 20rpx 0 20rpx;

		.my_info {
			height: 172rpx;
			align-items: center;
			background-color: #fff;
			padding: 0 32rpx;
			border-radius: 18rpx;

			.my_info_left {
				display: flex;
				align-items: center;

				.my_info_left_head {
					width: 84rpx;
					height: 84rpx;
					margin-right: 18rpx;
					border-radius: 50%;
				}

				.name {
					font-weight: 400;
					font-size: 36rpx;
					color: #333333;
				}
			}

			.my_info_right {
				width: 136rpx;
				height: 48rpx;
				background-color: #E3AD7F;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.my_info_right_qr {
				width: 60rpx;
				height: 60rpx;
			}

		}



		.my_item {
			background-color: #fff;
			padding: 22rpx 32rpx;
			border-radius: 18rpx;
			margin-top: 16rpx;

			.my_item_title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				font-family: Source Han Sans CN, Source Han Sans CN;
			}
		}

		.my_assets {
			.my_item_title {
				margin-bottom: 26rpx;
			}

			.my_assets_list {
				display: flex;
				justify-content: space-around;
				padding: 0 38rpx;

				.my_list_item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.my_list_item_icon {
						width: 52rpx;
						height: 44rpx;
					}

					.my_list_item_name {
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						margin-top: 16rpx;
						margin-bottom: 16rpx;
					}

					.my_list_item_num {
						font-weight: 400;
						font-size: 20rpx;
						color: #E3AD7F;

					}
				}
			}
		}

		.my_fun {
			.my_item_title {
				margin-bottom: 18rpx;
			}

			.my_fun_list {
				display: flex;
				flex-direction: column;

				.my_list_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 0 26rpx 0;
					border-bottom: 1rpx solid #E5E5E5;

					.my_list_item_left {
						display: flex;
						align-items: center;

						.my_list_item_icon {
							width: 44rpx;
							height: 44rpx;
							margin-right: 18rpx;
						}

						.my_list_item_name {
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}

				.my_list_item:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>