PunchSettle-MiniProgram/src/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 class=".nickname-dialog">
						<input class=".nickname" v-model="nicknameFormData.nickname" placeholder="请输入昵称" />
					</view>

					<view style="display: none">
						<uni-forms ref="nicknameForm" :modelValue="nicknameFormData" :rules="nicknameFormRules"
							label-position="top" :label-width="150" err-show-type="modal">
							<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 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;
}

.nickname-dialog {
	width: 100%;
	height: 100rpx;
	border-radius: 8px;
	background: #ffffff;
	// 阴影
	border: 0.5px solid #e4e4e4;

	input {
		width: 100%;
		height: 100%;
		font-size: 36rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		line-height: 52.13rpx;
		color: #000000;
		border-radius: 24rpx;
		text-align: center;
	}
}
</style>