new-zx-front-app/pages/user/info.vue

<!-- 用户信息 -->
<template>
	<s-layout :title="$t('user.user_info')" class="set-userinfo-wrap">
		<uni-forms :model="state.model" :rules="state.rules" labelPosition="left" border class="form-box"
			labelWidth='160'>
			<!-- 头像 -->
			<view class="ss-flex ss-row-center ss-col-center ss-p-t-60 ss-p-b-0 bg-white">
				<view class="header-box-content">
					<su-image class="content-img" isPreview :current="0" :src="state.model?.avatar" :height="160"
						:width="160" :radius="80" mode="scaleToFill" />
					<view class="avatar-action">
						<!-- #ifdef MP -->
						<button class="ss-reset-button avatar-action-btn" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							{{ $t('user.change') }}
						</button>
						<!-- #endif -->
						<!-- #ifndef MP -->
						<button class="ss-reset-button avatar-action-btn"
							@tap="onChangeAvatar">{{ $t('user.change') }}</button>
						<!-- #endif -->
					</view>
				</view>
			</view>

			<view class="bg-white ss-p-x-30">
				<uni-forms-item name="username" :label="$t('user.username')" :error-message="state.usernameErrorMsg">
					<uni-easyinput v-model="state.model.username" :placeholder="$t('rules.username')"
						:inputBorder="false" :placeholderStyle="placeholderStyle" @blur="verifyUsername"
						:clearable="false">
						<template v-slot:right>
							<view v-if="!state.verifyUsername" class="icon">
								<image style :src="sheep.$url.static('/static/images/shibai.png')" />
							</view>
							<view v-else class="icon">
								<image :src="sheep.$url.static('/static/images/chenggong.png')" />
							</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<!-- <uni-forms-item name="nickname" :label="$t('user.nickname')">
					<uni-easyinput v-model="state.model.nickname" type="nickname" :placeholder="t('rules.nickname')"
						:inputBorder="false" :placeholderStyle="placeholderStyle" :clearable="false" />
				</uni-forms-item> -->
				<uni-forms-item name="sex" :label="$t('user.sex')">
					<view class="ss-flex ss-col-center ss-h-100">
						<radio-group @change="onChangeGender" class="ss-flex ss-col-center">
							<label class="radio" v-for="item in sexRadioMap" :key="item.value">
								<view class="ss-flex ss-col-center ss-m-r-32">
									<radio :value="item.value" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
										:checked="parseInt(item.value) === state.model?.sex" />
									<view class="gender-name">{{ item.name }}</view>
								</view>
							</label>
						</radio-group>
					</view>
				</uni-forms-item>

				<uni-forms-item name="mobile" :label="$t('user.phone')" @tap="onChangeMobile">
					<uni-easyinput v-model="userInfo.mobile" :placeholder="t('user.bind_phone')" :inputBorder="false"
						disabled :styles="{ disableColor: '#fff' }" :placeholderStyle="placeholderStyle"
						:clearable="false">
						<template v-slot:right>
							<view class="ss-flex ss-col-center">
								<su-radio v-if="userInfo.verification?.mobile" :modelValue="true" />
								<button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
									<text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx"></text>
								</button>
							</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password" :label="$t('user.登陆密码')" @tap="onSetPassword">
					<view class="input-like ss-flex ss-row-between ss-col-center">
						<text class="placeholder">{{ $t('user.点击修改登录密码') }}</text>
						<view class="ss-flex ss-col-center">
							<su-radio class="ss-flex" v-if="userInfo.verification?.password" :modelValue="true" />
							<button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
								<text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx" />
							</button>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="password" :label="$t('user.支付密码')" @tap="onSetPayPayPayPassword">
					<view class="input-like ss-flex ss-row-between ss-col-center">
						<text class="placeholder">{{ $t('user.点击修改支付密码') }}</text>
						<view class="ss-flex ss-col-center">
							<su-radio class="ss-flex" v-if="userInfo.verification?.password" :modelValue="true" />
							<button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
								<text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx" />
							</button>
						</view>
					</view>
				</uni-forms-item>
			</view>


		</uni-forms>


		<su-fixed bottom placeholder bg="none">
			<view class="footer-box ss-p-20">
				<button class="ss-rest-button logout-btn" @tap="onSubmit">{{ $t('common.save') }}</button>
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
import {
	computed,
	reactive,
	onBeforeMount,
	ref
} from 'vue';
import sheep from '@/sheep';
import {
	clone
} from 'lodash';
import {
	onLoad,
	onShow
} from '@dcloudio/uni-app';
import {
	showAuthModal
} from '@/sheep/hooks/useModal';
import FileApi from '@/sheep/api/infra/file';
import UserApi from '@/sheep/api/member/user';
import AuthUtil from '@/sheep/api/member/auth';
import {
	closeAuthModal,
	showSetPayPassword,
	showChangePayPassword
} from '@/sheep/hooks/useModal';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const state = reactive({
	verifyUsername: true,
	usernameErrorMsg: '',
	model: {

	}, // 个人信息
	rules: {},
	thirdInfo: {}, // 社交用户的信息
	
});

const userInfo = computed(() => sheep.$store('user').userInfo);
const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';

const sexRadioMap = [{
	name: t('user.male'),
	value: '1',
},
{
	name: t('user.female'),
	value: '2',
}
];


// 选择性别
function onChangeGender(e) {
	state.model.sex = e.detail.value;
}

// 修改手机号
const onChangeMobile = () => {
	showAuthModal('changeMobile');
};

// 选择微信的头像，进行上传
function onChooseAvatar(e) {
	const tempUrl = e.detail.avatarUrl || '';
	uploadAvatar(tempUrl);
}
// 手动选择头像，进行上传
function onChangeAvatar() {
	uni.chooseImage({
		success: async (chooseImageRes) => {
			const tempUrl = chooseImageRes.tempFilePaths[0];
			await uploadAvatar(tempUrl);
		},

	});
}

// 上传头像文件
async function uploadAvatar(tempUrl) {
	if (!tempUrl) {
		return;
	}
	// 压缩图片
	const compressedImage = await compressImage(tempUrl);
	let {
		data
	} = await FileApi.uploadFile(compressedImage);
	state.model.avatar = data;
}

function compressImage(imagePath, scale = 0.5) { // 这里的 scale 是压缩比例，默认为 0.5（即 50%）
	return new Promise((resolve, reject) => {
		const canvas = document.createElement('canvas');
		const ctx = canvas.getContext('2d');
		const img = new Image();
		img.src = imagePath;

		img.onload = () => {
			const originalWidth = img.width;
			const originalHeight = img.height;

			// 根据原始尺寸进行比例压缩
			const newWidth = originalWidth * scale;
			const newHeight = originalHeight * scale;

			// 设置 canvas 尺寸为压缩后的尺寸
			canvas.width = newWidth;
			canvas.height = newHeight;

			// 在 canvas 上绘制压缩后的图片
			ctx.drawImage(img, 0, 0, newWidth, newHeight);

			// 将 canvas 转换为 base64 格式图片，压缩质量0.7
			const compressedImage = canvas.toDataURL('image/jpeg', 0.7);
			resolve(compressedImage);
		};

		img.onerror = (err) => {
			reject(err);
		};
	});
}

// 修改密码
function onSetPassword() {
	showAuthModal('changePassword');
}


// 点击修改/设置支付密码
function onSetPayPayPayPassword() {
	if (userInfo.value.havePayPassword) {
		showChangePayPassword()
	} else {
		showSetPayPassword()
	}
}

// 绑定第三方账号
async function bindThirdOauth() {
	let result = await sheep.$platform.useProvider('wechat').bind();
	if (result) {
		await getUserInfo();
	}
}

// 解绑第三方账号
function unBindThirdOauth() {
	uni.showModal({
		title: t('rules.unbind_reminder'),
		content: t('rules.unbind_warning'),
		cancelText: t('common.cancel'),
		confirmText: t('common.confirm'),
		success: async function (res) {
			if (!res.confirm) {
				return;
			}
			const result = await sheep.$platform.useProvider('wechat').unbind(state.thirdInfo.openid);
			if (result) {
				await getUserInfo();
			}
		},
	});
}
let lastUsername = ref('')
async function verifyUsername(e) {
	// console.log(e.detail.value,state.username)

	const username = e.detail.value;
	if (username == '' || username == lastUsername.value) {
		// 为空或者没改东西，不调校验
		return false;
	} else if (username === state.username) {
		// 如果输入的用户名跟原来的本身的用户名一致，不做查询，默认正确(即点进来又点出去，没改变的)
		state.usernameErrorMsg = '';
		state.verifyUsername = true
		return false;
	}
	lastUsername.value = username
	// 提交数据
	const {
		data
	} = await AuthUtil.verifyUsername(username);
	// false就是已经有这个用户名，可以登录，true是没有，可以使用
	if (!data) {
		state.usernameErrorMsg = t('rules.username_taken')
		state.verifyUsername = data
	} else {
		state.usernameErrorMsg = ''
		state.verifyUsername = data
	}
}
// 保存信息
async function onSubmit() {
	const {
		code
	} = await UserApi.updateUser({
		avatar: state.model.avatar,
		nickname: state.model.nickname,
		username: state.model.username,
		sex: state.model.sex,
	});
	if (code === 0 && state.model.username !== state.username) {
		// 修改成功并且是修改了用户名退出登录
		uni.showToast({
			icon: 'success',
			title: t('rules.modify_success'),
		});
		// 成功后，只需要1秒后推出登录关闭弹窗
		setTimeout(function () {
			sheep.$store('user').logout();
			closeAuthModal();
			sheep.$router.go('/pages/index/user')
		}, 1000)
	}
	if (code === 0) {
		await getUserInfo();
	}
}

// 获得用户信息
const getUserInfo = async () => {
	// 个人信息
	const userInfo = await sheep.$store('user').getInfo();
	state.model = clone(userInfo);
	state.username = userInfo.username
	// 获得社交用户的信息
	if (sheep.$platform.name !== 'H5') {
		let result = await sheep.$platform.useProvider('wechat').getInfo();
		state.thirdInfo = result || {};
	}
};

onShow(async () => {
	await getUserInfo();
});
onLoad(async (options) => {
	getUserInfo();
	// uni.$on('submitComplete', getUserInfo);
	// setTimeout(getUserInfo, 2000)
});
</script>

<style lang="scss" scoped>
.icon {
	display: flex;
	align-items: center;
	margin-right: 7rpx
}

.icon image {
	width: 35rpx;
	height: 35rpx;
}

:deep() {
	.uni-file-picker {
		border-radius: 50%;
	}

	.uni-file-picker__container {
		margin: -14rpx -12rpx;
	}

	.file-picker__progress {
		height: 0 !important;
	}

	.uni-list-item__content-title {
		font-size: 28rpx !important;
		color: #333333 !important;
		line-height: normal !important;
	}

	.uni-icons {
		font-size: 40rpx !important;
	}

	.is-disabled {
		color: #333333;
	}
}

:deep(.disabled) {
	opacity: 1;
}

.gender-name {
	font-size: 28rpx;
	font-weight: 500;
	line-height: normal;
	color: #333333;
}

.title-box {
	font-size: 28rpx;
	font-weight: 500;
	color: #666666;
	line-height: 100rpx;
}

.logout-btn {
	width: 710rpx;
	height: 80rpx;
	background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	border-radius: 40rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: $white;
}

.radio-dark {
	filter: grayscale(100%);
	filter: gray;
	opacity: 0.4;
}

.content-img {
	border-radius: 50%;
}

.header-box-content {
	position: relative;
	width: 160rpx;
	height: 160rpx;
	overflow: hidden;
	border-radius: 50%;
}

.avatar-action {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	z-index: 1;
	width: 160rpx;
	height: 46rpx;
	background: rgba(#000000, 0.3);

	.avatar-action-btn {
		width: 160rpx;
		height: 46rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #ffffff;
	}
}

// 绑定项
.account-list {
	background-color: $white;
	height: 100rpx;
	padding: 0 20rpx;

	.list-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.list-name {
		font-size: 28rpx;
		color: #333333;
	}

	.info {
		.avatar {
			width: 38rpx;
			height: 38rpx;
			border-radius: 50%;
			overflow: hidden;
		}

		.name {
			font-size: 28rpx;
			font-weight: 400;
			color: $dark-9;
		}
	}

	.bind-box {
		width: 100rpx;
		height: 50rpx;
		line-height: normal;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;

		.bind-btn {
			width: 100%;
			height: 100%;
			border-radius: 25rpx;
			background: #f4f4f4;
			color: #999999;
		}

		.relieve-btn {
			width: 100%;
			height: 100%;
			border-radius: 25rpx;
			background: var(--ui-BG-Main-opacity-1);
			color: var(--ui-BG-Main);
		}
	}
}

.list-border {
	font-size: 28rpx;
	font-weight: 400;
	color: #333333;
	border-bottom: 2rpx solid #eeeeee;
}

image {
	width: 100%;
	height: 100%;
}

:deep(.uni-forms-item__content) {
  display: flex;
  align-items: center;
}
.input-like {
	width: 100%;

	background-color: #fff;
	
	.placeholder {
		color: #BBBBBB;
		font-size: 28rpx;
		line-height: normal;
	}
}
</style>