1

components/CustomLoading.vue

+<template>
+	<!-- 遮罩层 -->
+	<view v-if="show" class="loading-mask">
+		<!-- 内容区 -->
+		<view class="loading-content">
+			<!-- Img 动画 -->
+			<image :src="imgPath" mode="aspectFit" class="loading-img rotating" :style="{ 
+          width: imgWidth, 
+          height: imgHeight,
+          transform: `rotate(${rotationAngle}deg)`,
+          transition: 'transform 0.3s linear'
+        }" />
+			<!-- 左对齐逐字显示的加载文字 -->
+			<view class="text-container">
+				<text class="loading-text">{{ displayedText }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		computed,
+		watch,
+		onMounted,
+		onUnmounted
+	} from 'vue';
+
+	const props = defineProps({
+		show: {
+			type: Boolean,
+			default: false
+		}, // 控制显示
+		text: {
+			type: String,
+			default: '加载中...'
+		}, // 提示文字
+		imgPath: { // Img路径
+			type: String,
+			default: '/static/loading.png' // 默认放在static目录
+		},
+		imgWidth: {
+			type: String,
+			default: '200rpx'
+		}, // Img宽度
+		imgHeight: {
+			type: String,
+			default: '200rpx'
+		}, // Img高度
+		rotationStep: {
+			type: Number,
+			default: 72
+		}, // 每次旋转角度
+		rotationInterval: {
+			type: Number,
+			default: 1000
+		}, // 旋转间隔(毫秒)
+		typeSpeed: {
+			type: Number,
+			default: 140
+		} // 打字速度(毫秒)
+	});
+
+	const displayedText = ref('');
+	let rotationAngle = ref(0);
+	let typeInterval = null;
+	let rotationItl = null;
+	let currentIndex = 0;
+	let rotationOut = null;
+
+	// 执行单次旋转
+	const doRotation = () => {
+		rotationAngle.value -= props.rotationStep;
+	};
+
+	// 文字逐字显示效果（左对齐）
+	const startTyping = () => {
+		clearInterval(typeInterval);
+		displayedText.value = '';
+		currentIndex = 0;
+
+		typeInterval = setInterval(() => {
+			if (currentIndex < props.text.length) {
+				displayedText.value += props.text[currentIndex];
+				currentIndex++;
+			} else {
+				displayedText.value = '';
+				currentIndex = 0;
+			}
+		}, props.typeSpeed);
+	};
+
+	// 启动所有动画
+	const startAnimations = () => {
+		rotationOut = setTimeout(doRotation,200); // 立即执行第一次旋转
+		rotationItl = setInterval(doRotation, props.rotationInterval);
+		startTyping();
+	};
+
+	// 清除所有动画
+	const clearAnimations = () => {
+		clearInterval(typeInterval);
+		clearInterval(rotationItl);
+		clearTimeout(rotationOut);
+	};
+
+	// 监听show变化
+	watch(() => props.show, (newVal) => {
+		if (newVal) {
+			startAnimations();
+		} else {
+			clearAnimations();
+		}
+	}, {
+		immediate: true
+	});
+
+	// 组件卸载时清除定时器
+	onUnmounted(() => {
+		clearAnimations();
+	});
+</script>
+
+<style scoped>
+	/* 遮罩层 */
+	.loading-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		/* background-color: rgba(0, 0, 0, 0.5); */
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 9999;
+	}
+
+	/* 内容区 */
+	.loading-content {
+		/* background-color: #fff; */
+		border-radius: 12px;
+		padding: 24px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		/* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
+	}
+
+
+	/* 图片基础样式 */
+	.loading-img {
+		margin-bottom: 24rpx;
+		transform-origin: center center;
+	}
+
+	/* 文字容器 */
+	.text-container {
+		margin-left: 10rpx;
+		width: 200rpx;
+		text-align: left;
+		padding-left: 80rpx;
+		/* border-left: 2rpx solid #1890ff; */
+		min-height: 40rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	/* 文字样式 */
+	.loading-text {
+		color: #b27c1e;
+		font-size: 28rpx;
+		font-weight: 500;
+		letter-spacing: 1rpx;
+	}
+</style>
\ No newline at end of file

pages/naming/naming.vue

@@ -164,8 +164,8 @@
 					<view class="item_top">
 						<span class="title_txt">必有字</span>
 						<input class="shall_be_input" :placeholder="showPlaceholder ? '示例：多、浩、雨' : ''"
-							v-model="requiredChars" @blur="e => enforceSeparator(e, 1)" 
-							@click="showPlaceholder = false"/>
+							v-model="requiredChars" @blur="e => enforceSeparator(e, 1)"
+							@click="showPlaceholder = false" />
 					</view>
 					<view class="item_line"></view>
 				</view>
@@ -175,7 +175,7 @@
 					<view class="item_top">
 						<span class="title_txt">避讳字</span>
 						<input class="taboo_input" :placeholder="showPlaceholder2 ? '示例：然、萌' : ''" v-model="avoidChars"
-							@blur="e => enforceSeparator(e, 2)" @click="showPlaceholder2 = false"/>
+							@blur="e => enforceSeparator(e, 2)" @click="showPlaceholder2 = false" />
 					</view>
 					<view class="item_line"></view>
 				</view>
@@ -246,6 +246,8 @@
 				@click="onNaming">
 			</view>
 		</view>
+		<CustomLoading :show="showLoading" :text="'起名中...'" :imgPath="$baseUrl+'aiNaming/loading_icon.png'">
+		</CustomLoading>
 	</view>
 </template>
 
@@ -255,7 +257,8 @@
 		reactive,
 		onMounted,
 		computed,
-		nextTick
+		nextTick,
+		getCurrentInstance
 	} from 'vue'
 	import {
 		onLoad,
@@ -269,8 +272,9 @@
 	import {
 		aiNaming
 	} from '../../api/naming.js';
+	import CustomLoading from '../../components/CustomLoading.vue';
 
-
+	const showLoading = ref(false)
 	// 出生状态
 	const birthStatus = ref('');
 	//姓氏
@@ -289,6 +293,10 @@
 	const expectedStyle = ref('');
 
 	const back_btn = ref('');
+	const {
+		proxy
+	} = getCurrentInstance();
+	const $baseUrl = proxy.$baseUrl;
 
 	onLoad((options) => {
 		back_btn.value = options.back_btn
@@ -475,10 +483,11 @@
 	//生成or重新生成名字
 	const onAiNaming = throttleTap(async (param) => {
 		// 显示加载中
-		uni.showLoading({
-			title: '生成中...',
-			mask: true // 是否显示透明蒙层（防止触摸穿透）
-		})
+		// uni.showLoading({
+		// 	title: '生成中...',
+		// 	mask: true // 是否显示透明蒙层（防止触摸穿透）
+		// })
+		showLoading.value = true;
 		let d = await aiNaming(param);
 		if (d) {
 			let nameList = d?.data;
@@ -491,7 +500,8 @@
 				return
 			}
 			// 隐藏
-			uni.hideLoading()
+			// uni.hideLoading()
+			showLoading.value = false;
 
 			jump({
 				type: JumpType.INNER,

pages/naming/namingResult.vue

@@ -48,6 +48,8 @@
 			</view>
 
 		</view>
+		<CustomLoading :show="showLoading" :text="'起名中...'" :imgPath="$baseUrl+'aiNaming/loading_icon.png'">
+		</CustomLoading>
 	</view>
 </template>
 <script setup>
@@ -69,7 +71,8 @@
 	import {
 		onLoad
 	} from '@dcloudio/uni-app'
-
+	import CustomLoading from '../../components/CustomLoading.vue';
+	
 	const {
 		proxy
 	} = getCurrentInstance();
@@ -78,6 +81,7 @@
 
 	const param = ref();
 	const nameList = ref(null);
+	const showLoading = ref(false)
 
 	onLoad((options) => {
 		param.value = JSON.parse(decodeURIComponent(options.param))
@@ -91,12 +95,14 @@
 
 	//生成or重新生成名字
 	const onAiNaming = throttleTap(async () => {
-		uni.showLoading({
-			title: '生成中...',
-			mask: true // 是否显示透明蒙层（防止触摸穿透）
-		})
+		// uni.showLoading({
+		// 	title: '生成中...',
+		// 	mask: true // 是否显示透明蒙层（防止触摸穿透）
+		// })
+		showLoading.value = true;
 		let d = await aiNaming(param.value);
-		uni.hideLoading();
+		// uni.hideLoading();
+		showLoading.value = false;
 		if (d) {
 			nameList.value = d?.data;
 			console.log('重新生成:', nameList.value)
@@ -179,16 +185,18 @@
 				.name_py {
 					// background: #20ffff;
 					width: 480rpx;
-					text-align: center;
-					word-break: break-all; /* 所有字符都可换行 */
+					text-align: center;
+					word-break: break-all;
+					/* 所有字符都可换行 */
 				}
 
 				.name_txt {
 					// background: #fc0107;
 					margin-top: 5rpx;
 					width: 480rpx;
-					text-align: center;
-					word-break: break-all; /* 所有字符都可换行 */
+					text-align: center;
+					word-break: break-all;
+					/* 所有字符都可换行 */
 				}
 			}