PunchSettle-MiniProgram/pages/user-info/user-info.vue

<template>
	<main-layout :showBack="true">
		<template>
			<view class="header">
				<view class="avatar">
					<uni-icons type="person" size="70"></uni-icons>	
				</view>
				<span class="nickname">{{userInfoStore.nickname}}</span>
			</view>
			
			<view class="func-wrap">
				<uni-list :border="true">
					<uni-list-item title="修改昵称"
						:showArrow="true" :showExtraIcon="true" 
						:extraIcon="{color: '#000000',size: 22, type: 'compose'}"
						:clickable="true" @click="modifyNickname">
					</uni-list-item>
				</uni-list>
			</view>
			
			<view class="func-wrap">
				<uni-list :border="true">
					<uni-list-item title="奖励结算记录" 
						:showArrow="true" :showExtraIcon="true" 
						:extraIcon="{color: '#000000',size: 22, type: 'list'}"
						link="navigateTo" :to="router.SETTLE_LIST_URL">
					</uni-list-item>
					<uni-list-item title="奖励领取记录"
						:showArrow="true" :showExtraIcon="true" 
						:extraIcon="{color: '#000000',size: 22, type: 'list'}"
						link="navigateTo" :to="router.REWARD_RECORD_LIST_URL">
					</uni-list-item>
					<uni-list-item title="刮刮乐投入与中奖记录"
						:showArrow="true" :showExtraIcon="true" 
						:extraIcon="{color: '#000000',size: 22, type: 'list'}"
						link="navigateTo" :to="router.SCRATCH_RECORD_LIST_URL">
					</uni-list-item>
				</uni-list>
			</view>

			<view class="cancel-btn" @click="logout">注销</view>
			
			<!-- 修改昵称弹出框 -->
			<uni-popup ref="nicknameInputDialog" type="dialog" :is-mask-click="false">
				<uni-popup-dialog
					mode="input" 
					:before-close="true" 
					title="修改昵称" 
					confirmText="保存" 
					@confirm="nicknameFormConfirm"
					@close="nicknameFormClose">
					<view style="width: 100%;">
						<uni-forms ref="nicknameForm" :modelValue="nicknameFormData" :rules="nicknameFormRules" label-position="top" :label-width="150">
							<uni-forms-item name="nickname">
								<uni-easyinput type="text" placeholder="请输入昵称" v-model="nicknameFormData.nickname"></uni-easyinput>
							</uni-forms-item>
						</uni-forms>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</template>
	</main-layout>
</template>

<script setup>
	import { ref } from 'vue';
	import router from '@/common/constants/router.js';
	import { useUserInfoStore } from '@/stores/userInfo';
	import { userApi } from '@/service/apis.js';
	
	// 组件
	/**
	 * 昵称弹出框
	 */
	const nicknameInputDialog = ref(null);

	/**
	 * 昵称表单
	 */
	const nicknameForm = ref(null);
	
	// 属性
	/**
	 * 用户信息
	 */
	const userInfoStore = useUserInfoStore();
	
	/**
	 * 昵称表单数据
	 */
	const nicknameFormData = ref({
		nickname: userInfoStore.nickname
	});
	
	/**
	 * 昵称表单验证规则
	 */
	const nicknameFormRules = ref({
		nickname: {
			rules: [{
				required: true,
				errorMessage: '昵称不能为空'
			}, {
				maxLength: 30,
				errorMessage: '昵称不能超过{maxLength}个字符'
			}],
		}	
	})
	
	// 方法
	/**
	 * 注销登录
	 */
	const logout = () => {
		userInfoStore.$reset();
		uni.reLaunch({
			url: router.INDEX_URL
		});
	}
	
	/**
	 * 跳转结算列表页
	 */
	const goSettleListPage = () => {
		uni.navigateTo({
			url: router.SETTLE_LIST_URL
		});
	}
	
	/**
	 * 跳转奖励领取记录列表页
	 */
	const goClaimRewardListPage = () => {
		uni.navigateTo({
			url: router.CLAIM_REWARD_LIST_URL
		});
	}
	
	/**
	 * 跳转刮刮乐记录列表页
	 */
	const goScratchListPage = () => {
		uni.navigateTo({
			url: router.SCRATCH_LIST_URL
		});
	}
	
	const modifyNickname = (e) => {
		nicknameInputDialog.value.open();
	}
	
	/**
	 * 领取奖励表单提交
	 */
	const nicknameFormConfirm = async () => {
		let data = await nicknameForm.value.validate();
		await userApi.modifyNickname(data);
		userInfoStore.nickname = data.nickname;
		nicknameInputDialog.value.close();
		uni.showToast({
			title: '修改成功',
			icon: 'success'
		});
	}
	
	/**
	 * 领取奖励表单取消
	 */
	const nicknameFormClose = async () => {
		nicknameInputDialog.value.close();
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		margin-top: 100rpx;
		
		.avatar {
			width: 180rpx;
			height: 180rpx;
			opacity: 1;
			background: #FFFFFF;
			border-radius: 50%;
			
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.nickname {
			margin-top: 16rpx;
			font-size: 36rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 52.13rpx;
			color: #000000;
		}
	}
	
	.func-wrap {
		background: #FFFFFF;
		margin-top: 24rpx;
	}
	
	.cancel-btn {
		margin-top: 24rpx;
		height: 54rpx;
		opacity: 1;
		border-radius: 24rpx;
		background: #F2607A;
		
		/** 文本1 */
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		// line-height: 37.65rpx;
		color: #FFFFFF;
		
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
</style>