zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: index

Browse Source
This commit is contained in:
zzc
2026-02-05 22:17:52 +08:00
parent b0cc473a78
commit c0e7ce069e
1 changed files with 163 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

575
pages/avatar/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="avatar-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
<view class="avatar-page">
<NavBar title="头像制作" />
<!-- 顶部步骤条 -->
@@ -15,9 +15,7 @@
<view class="step-num-wrap">
<view class="step-line" v-if="idx > 0"></view>
<view class="step-num">
<text v-if="activeTool === tool.type && showPanel">{{
tool.icon
}}</text>
<text v-if="activeTool === tool.type">{{ tool.icon }}</text>
<text v-else>{{ tool.step }}</text>
</view>
</view>
@@ -63,108 +61,73 @@
<button class="btn primary" open-type="share">分享给朋友</button>
</view>
<!-- 弹出编辑面板 -->
<view class="panel-container" :class="{ show: showPanel }">
<view class="panel-mask" @tap="closePanel"></view>
<view class="panel-content">
<view class="panel-handle" @tap="closePanel"></view>
<!-- 头像选择区 -->
<view v-if="activeTool === 'avatar'" class="section">
<view class="section-title">选择头像</view>
<scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
<view class="avatar-list">
<view class="avatar-card upload-card">
<button
class="wechat-avatar-btn"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<view class="upload-icon">📷</view>
<text class="upload-text">微信头像</text>
</button>
</view>
<view
v-for="(item, i) in systemAvatars"
:key="i"
class="avatar-card"
:class="{ active: currentAvatar?.id === item.id }"
@tap="currentAvatar = item"
>
<image
:src="item.imageUrl"
class="avatar-thumb"
mode="aspectFill"
/>
<view v-if="currentAvatar?.id === item.id" class="check"
>✔</view
>
</view>
<view class="avatar-card more-card" @tap="openMorePopup">
<view class="upload-icon">🔍</view>
<text class="upload-text">更多</text>
</view>
</view>
</scroll-view>
</view>
<!-- 头像框选择区 -->
<view v-if="activeTool === 'frame'" class="section">
<view class="section-title">选择头像框</view>
<scroll-view scroll-y class="panel-grid-scroll">
<view class="grid">
<view
v-for="(frame, i) in frames"
:key="i"
class="grid-item"
:class="{ active: selectedFrame?.id === frame.id }"
@tap="toggleFrame(frame)"
>
<image
:src="frame.imageUrl"
class="grid-img"
mode="aspectFill"
/>
<view v-if="selectedFrame?.id === frame.id" class="check"
>✔</view
>
</view>
</view>
<view v-if="frameLoading" class="loading-more">加载中...</view>
<view v-else-if="!frameHasNext && frames.length > 0" class="no-more"
>没有更多了</view
<!-- 资源选择区 -->
<view class="resource-selector">
<!-- 头像选择区 -->
<view v-if="activeTool === 'avatar'" class="section">
<view class="section-title">选择头像</view>
<view class="grid">
<view class="grid-item upload-card">
<button
class="wechat-avatar-btn"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
</scroll-view>
<view class="upload-icon">✨</view>
<text class="upload-text">微信头像</text>
</button>
</view>
<view
v-for="item in systemAvatars"
:key="item.id"
class="grid-item"
:class="{ active: currentAvatar?.id === item.id }"
@tap="currentAvatar = item"
>
<image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
<view v-if="currentAvatar?.id === item.id" class="check">✓</view>
</view>
</view>
<view v-if="avatarLoading" class="loading-more">加载中...</view>
<view v-if="!avatarHasNext" class="no-more">没有更多了</view>
</view>
<!-- 挂饰选择区 -->
<view v-if="activeTool === 'decor'" class="section">
<view class="section-title">选择挂饰配件</view>
<scroll-view scroll-y class="panel-grid-scroll">
<view class="grid">
<view
v-for="(decor, i) in decors"
:key="i"
class="grid-item"
:class="{ active: selectedDecor?.id === decor.id }"
@tap="toggleDecor(decor)"
>
<image
:src="decor.imageUrl"
class="grid-img"
mode="aspectFit"
/>
<view v-if="selectedDecor?.id === decor.id" class="check"
>✔</view
>
</view>
</view>
<view v-if="decorLoading" class="loading-more">加载中...</view>
<view v-else-if="!decorHasNext && decors.length > 0" class="no-more"
>没有更多了</view
>
</scroll-view>
<!-- 头像框选择区 -->
<view v-if="activeTool === 'frame'" class="section">
<view class="section-title">选择头像框</view>
<view class="grid">
<view
v-for="item in frames"
:key="item.id"
class="grid-item"
:class="{ active: selectedFrame?.id === item.id }"
@tap="toggleFrame(item)"
>
<image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
<view v-if="selectedFrame?.id === item.id" class="check">✓</view>
</view>
</view>
<view v-if="frameLoading" class="loading-more">加载中...</view>
<view v-if="!frameHasNext" class="no-more">没有更多了</view>
</view>
<!-- 挂饰选择区 -->
<view v-if="activeTool === 'decor'" class="section">
<view class="section-title">选择挂饰</view>
<view class="grid">
<view
v-for="item in decors"
:key="item.id"
class="grid-item"
:class="{ active: selectedDecor?.id === item.id }"
@tap="toggleDecor(item)"
>
<image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
<view v-if="selectedDecor?.id === item.id" class="check">✓</view>
</view>
</view>
<view v-if="decorLoading" class="loading-more">加载中...</view>
<view v-if="!decorHasNext" class="no-more">没有更多了</view>
</view>
</view>
@@ -245,7 +208,6 @@ const frames = ref([]);
const decors = ref([]);
// Panel and steps logic
const showPanel = ref(false);
const activeTool = ref("avatar");
const tools = [
{ step: "01", text: "头像", type: "avatar", icon: "👤" },
@@ -255,14 +217,13 @@ const tools = [
const openTool = (type) => {
activeTool.value = type;
showPanel.value = true;
};
const closePanel = () => {
showPanel.value = false;
};
// Pagination states
const avatarPage = ref(1);
const avatarHasNext = ref(true);
const avatarLoading = ref(false);
const framePage = ref(1);
const frameHasNext = ref(true);
const frameLoading = ref(false);
@@ -278,9 +239,37 @@ const selectedDecor = ref(null);
// More Popup logic
const morePopup = ref(null);
const moreAvatars = ref([]);
const page = ref(1);
const hasMore = ref(true);
const loading = ref(false);
const loadAvatars = async () => {
if (avatarLoading.value || !avatarHasNext.value) return;
avatarLoading.value = true;
try {
const res = await getAvatarSystemList(avatarPage.value);
const list = res?.list || [];
if (list.length > 0) {
systemAvatars.value.push(
...list.map((item) => ({
id: item.id,
imageUrl: item.imageUrl,
})),
);
avatarPage.value++;
// 默认选中第一个
if (systemAvatars.value.length > 0 && !currentAvatar.value) {
currentAvatar.value = systemAvatars.value[0];
}
}
if (typeof res.hasNext !== "undefined") {
avatarHasNext.value = res.hasNext;
} else {
if (list.length < 10) avatarHasNext.value = false;
}
} catch (e) {
console.error("Failed to load avatars:", e);
} finally {
avatarLoading.value = false;
}
};
const loadFrames = async () => {
if (frameLoading.value || !frameHasNext.value) return;
@@ -336,27 +325,8 @@ const loadDecors = async () => {
}
};
const initSystemAvatars = async () => {
try {
const res = await getAvatarSystemList(1);
const list = res?.list || [];
if (list.length > 0) {
// 取前3个展示在首页
systemAvatars.value = list
.slice(0, 3)
.map((item) => ({ id: item.id, imageUrl: item.imageUrl }));
// 默认选中第一个
if (systemAvatars.value.length > 0 && !currentAvatar.value) {
currentAvatar.value = systemAvatars.value[0];
}
}
} catch (e) {
console.error("Failed to load system avatars:", e);
}
};
onLoad((options) => {
initSystemAvatars();
loadAvatars();
loadFrames();
loadDecors();
@@ -370,11 +340,9 @@ onLoad((options) => {
if (options.type === "frame") {
activeTool.value = "frame";
selectedFrame.value = recommendItem;
showPanel.value = true;
} else if (options.type === "decor") {
activeTool.value = "decor";
selectedDecor.value = recommendItem;
showPanel.value = true;
} else if (options.type === "avatar") {
currentAvatar.value = recommendItem;
}
@@ -382,71 +350,17 @@ onLoad((options) => {
});
onReachBottom(() => {
if (showPanel.value) {
if (activeTool.value === "frame") {
loadFrames();
} else if (activeTool.value === "decor") {
loadDecors();
}
if (activeTool.value === "avatar") {
loadAvatars();
} else if (activeTool.value === "frame") {
loadFrames();
} else if (activeTool.value === "decor") {
loadDecors();
}
});
const openMorePopup = () => {
morePopup.value.open();
if (moreAvatars.value.length === 0) {
// 重新加载第一页，因为 systemAvatars 只取了前3个，
// 这里我们简单处理：重新请求第一页作为更多列表的开始
// 或者你可以复用 systemAvatars 的数据，然后 page 从 2 开始请求
// 为了逻辑简单和数据一致性，这里选择重新请求第一页填充更多列表
loadMoreAvatars();
}
};
const closeMorePopup = () => {
morePopup.value.close();
};
const loadMoreAvatars = async () => {
if (loading.value || !hasMore.value) return;
loading.value = true;
try {
const res = await getAvatarSystemList(page.value);
const list = res?.list || [];
if (list.length > 0) {
const newAvatars = list.map((item) => ({
id: item.id,
imageUrl: item.imageUrl,
}));
moreAvatars.value.push(...newAvatars);
page.value++;
}
// 根据接口返回的 hasNext 字段判断是否还有更多数据
// 如果接口没有返回 hasNext，则降级使用列表长度判断（假设每页10条）
if (typeof res.hasNext !== "undefined") {
hasMore.value = res.hasNext;
} else {
if (list.length < 10) {
hasMore.value = false;
}
}
} catch (e) {
console.error(e);
} finally {
loading.value = false;
}
};
const createAvatarId = () => {
const id = generateObjectId();
// avatarCreateComplete({ id });
return id;
};
const selectMoreAvatar = (item) => {
currentAvatar.value = item;
closeMorePopup();
const goBack = () => {
uni.navigateBack();
};
const toggleFrame = (frame) => {
@@ -564,19 +478,9 @@ const onChooseAvatar = async (e) => {
}
};
const useWeChatAvatar = () => {
if (!isLoggedIn.value) {
loginPopupRef.value.open();
} else {
currentAvatar.value = {
id: "wechat_" + Date.now(),
imageUrl: userStore.userInfo.avatarUrl,
};
}
};
const goBack = () => {
uni.navigateBack();
const createAvatarId = () => {
const id = generateObjectId();
return id;
};
const saveByCanvas = async (save = true) => {
@@ -776,9 +680,6 @@ onShareAppMessage(async () => {
}
uni.showLoading({ title: "分享中...", mask: true });
const id = createAvatarId();
// const shareTokenRes = {
// shareToken: "iFmK8WjRm6TK",
// };
const shareTokenRes = await getShareToken("avatar_download", id);
const imageUrl = await completeCardInfo(id);
uni.hideLoading();
@@ -796,16 +697,6 @@ onShareAppMessage(async () => {
// "https://file.lihailezzc.com/resource/b48c41054c2633c478463ac1b1f1ca23.png",
// };
// });
const loadImage = (url) => {
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: url,
success: (res) => resolve(res.path),
fail: reject,
});
});
};
</script>
<style lang="scss" scoped>
@@ -982,147 +873,28 @@ const loadImage = (url) => {
}
}
/* 编辑面板样式 */
.panel-container {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1000;
visibility: hidden;
transition: all 0.3s;
&.show {
visibility: visible;
.panel-mask {
opacity: 1;
}
.panel-content {
transform: translateY(0);
}
}
.panel-mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.3s;
}
.panel-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 40rpx 40rpx 0 0;
padding: 30rpx;
transform: translateY(100%);
transition: transform 0.3s;
max-height: 70vh;
display: flex;
flex-direction: column;
}
.panel-handle {
width: 80rpx;
height: 8rpx;
background: #eee;
border-radius: 4rpx;
margin: 0 auto 30rpx;
}
.resource-selector {
background: #fff;
margin: 0 30rpx 30rpx;
padding: 30rpx;
border-radius: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.section-title {
font-size: 32rpx;
font-size: 30rpx;
font-weight: bold;
margin-bottom: 30rpx;
margin-bottom: 24rpx;
color: #333;
}
display: flex;
align-items: center;
.panel-grid-scroll {
flex: 1;
overflow: hidden;
}
}
.avatar-scroll {
white-space: nowrap;
width: 100%;
.avatar-list {
display: inline-flex;
padding: 10rpx 0;
gap: 20rpx;
}
.avatar-card {
width: 120rpx;
height: 120rpx;
border-radius: 20rpx;
overflow: hidden;
position: relative;
border: 4rpx solid transparent;
background: #f5f5f5;
&.active {
border-color: #ff3b30;
}
.avatar-thumb {
width: 100%;
height: 100%;
}
.check {
position: absolute;
top: 0;
right: 0;
&::before {
content: "";
width: 8rpx;
height: 32rpx;
background: #ff3b30;
color: #fff;
font-size: 20rpx;
padding: 4rpx 8rpx;
border-radius: 0 0 0 16rpx;
}
&.upload-card,
&.more-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fdf2f2;
border: 2rpx dashed #ffcbcb;
.wechat-avatar-btn {
width: 100%;
height: 100%;
padding: 0;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.2;
&::after {
border: none;
}
}
.upload-icon {
font-size: 40rpx;
margin-bottom: 8rpx;
}
.upload-text {
font-size: 20rpx;
color: #ff3b30;
}
border-radius: 4rpx;
margin-right: 16rpx;
}
}
}
@@ -1159,6 +931,41 @@ const loadImage = (url) => {
padding: 4rpx 8rpx;
border-radius: 0 0 0 16rpx;
}
&.upload-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fdf2f2;
border: 2rpx dashed #ffcbcb;
.wechat-avatar-btn {
width: 100%;
height: 100%;
padding: 0;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.2;
&::after {
border: none;
}
}
.upload-icon {
font-size: 40rpx;
margin-bottom: 8rpx;
}
.upload-text {
font-size: 20rpx;
color: #ff3b30;
}
}
}
}
@@ -1175,61 +982,5 @@ const loadImage = (url) => {
left: -9999px;
top: -9999px;
}
/* 更多弹窗样式保持不变 */
.popup-content {
background: #fff;
border-radius: 32rpx 32rpx 0 0;
padding: 30rpx;
max-height: 80vh;
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.popup-title {
font-size: 32rpx;
font-weight: bold;
}
.close-btn {
font-size: 40rpx;
color: #999;
padding: 10rpx;
}
}
.popup-scroll {
height: 60vh;
}
.popup-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
}
.popup-item {
aspect-ratio: 1;
border-radius: 20rpx;
overflow: hidden;
background: #f5f5f5;
.popup-img {
width: 100%;
height: 100%;
}
}
.loading-text,
.no-more-text {
text-align: center;
font-size: 24rpx;
color: #999;
padding: 30rpx 0;
}
}
</style>
"}]} ```