1236 lines
30 KiB
Vue
1236 lines
30 KiB
Vue
<template>
|
||
<view class="avatar-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||
<NavBar title="头像制作" />
|
||
|
||
<!-- 顶部步骤条 -->
|
||
<view class="top-steps">
|
||
<view class="step-bar">
|
||
<view
|
||
v-for="(tool, idx) in tools"
|
||
:key="idx"
|
||
class="step-item"
|
||
:class="{ active: activeTool === tool.type }"
|
||
@tap="openTool(tool.type)"
|
||
>
|
||
<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-else>{{ tool.step }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="step-text">{{ tool.text }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="preview-card">
|
||
<view class="preview-square">
|
||
<image
|
||
class="avatar-img"
|
||
:src="currentAvatar?.imageUrl"
|
||
mode="aspectFill"
|
||
/>
|
||
<image
|
||
v-if="selectedFrame"
|
||
class="frame-img"
|
||
:src="selectedFrame?.imageUrl"
|
||
mode="aspectFill"
|
||
/>
|
||
<image
|
||
v-if="selectedDecor"
|
||
class="decor-img"
|
||
:src="selectedDecor?.imageUrl"
|
||
mode="aspectFit"
|
||
:style="decorStyle"
|
||
@touchstart.stop="onTouchStart"
|
||
@touchmove.stop="onTouchMove"
|
||
@touchend.stop="onTouchEnd"
|
||
/>
|
||
</view>
|
||
<view v-if="selectedDecor" class="interaction-tip">
|
||
<text>👆 单指拖动</text>
|
||
<text class="tip-divider">|</text>
|
||
<text>✌️ 双指缩放/旋转</text>
|
||
</view>
|
||
<text v-else class="preview-tip">实时预览效果</text>
|
||
</view>
|
||
|
||
<view class="action-buttons">
|
||
<button class="btn secondary" @tap="saveAndUse">保存</button>
|
||
<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
|
||
>
|
||
</scroll-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>
|
||
</view>
|
||
</view>
|
||
|
||
<canvas
|
||
type="2d"
|
||
id="avatarCanvas"
|
||
canvas-id="avatarCanvas"
|
||
class="hidden-canvas"
|
||
style="width: 600px; height: 600px"
|
||
/>
|
||
|
||
<!-- Login Popup -->
|
||
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
|
||
|
||
<!-- More Avatar Popup -->
|
||
<uni-popup ref="morePopup" type="bottom" background-color="#fff">
|
||
<view class="popup-content">
|
||
<view class="popup-header">
|
||
<text class="popup-title">选择头像</text>
|
||
<view class="close-btn" @tap="closeMorePopup">✕</view>
|
||
</view>
|
||
<scroll-view
|
||
scroll-y
|
||
class="popup-scroll"
|
||
@scrolltolower="loadMoreAvatars"
|
||
>
|
||
<view class="popup-grid">
|
||
<view
|
||
v-for="(item, i) in moreAvatars"
|
||
:key="i"
|
||
class="popup-item"
|
||
@tap="selectMoreAvatar(item)"
|
||
>
|
||
<image :src="item.imageUrl" class="popup-img" mode="aspectFill" />
|
||
</view>
|
||
</view>
|
||
<view v-if="loading" class="loading-text">加载中...</view>
|
||
<view v-if="!hasMore && moreAvatars.length > 0" class="no-more-text">
|
||
没有更多了
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from "vue";
|
||
import { onShareAppMessage, onLoad, onReachBottom } from "@dcloudio/uni-app";
|
||
import { useUserStore } from "@/stores/user";
|
||
import {
|
||
createShareToken,
|
||
getShareReward,
|
||
abilityCheck,
|
||
} from "@/api/system.js";
|
||
import {
|
||
getAvatarSystemList,
|
||
getAvatarFrameList,
|
||
getAvatarDecorList,
|
||
avatarCreateComplete,
|
||
} from "@/api/avatar.js";
|
||
import {
|
||
saveRecordRequest,
|
||
getShareToken,
|
||
generateObjectId,
|
||
uploadImage,
|
||
} from "@/utils/common.js";
|
||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||
import { getBavBarHeight } from "@/utils/system";
|
||
|
||
const userStore = useUserStore();
|
||
const loginPopupRef = ref(null);
|
||
|
||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||
|
||
const systemAvatars = ref([]);
|
||
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: "👤" },
|
||
{ step: "02", text: "头像框", type: "frame", icon: "🖼️" },
|
||
{ step: "03", text: "挂饰配件", type: "decor", icon: "✨" },
|
||
];
|
||
|
||
const openTool = (type) => {
|
||
activeTool.value = type;
|
||
showPanel.value = true;
|
||
};
|
||
|
||
const closePanel = () => {
|
||
showPanel.value = false;
|
||
};
|
||
|
||
// Pagination states
|
||
const framePage = ref(1);
|
||
const frameHasNext = ref(true);
|
||
const frameLoading = ref(false);
|
||
|
||
const decorPage = ref(1);
|
||
const decorHasNext = ref(true);
|
||
const decorLoading = ref(false);
|
||
|
||
const currentAvatar = ref(null);
|
||
const selectedFrame = ref(null);
|
||
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 loadFrames = async () => {
|
||
if (frameLoading.value || !frameHasNext.value) return;
|
||
frameLoading.value = true;
|
||
try {
|
||
const res = await getAvatarFrameList(framePage.value);
|
||
const list = res?.list || [];
|
||
if (list.length > 0) {
|
||
frames.value.push(
|
||
...list.map((item) => ({
|
||
id: item.id,
|
||
imageUrl: item.imageUrl,
|
||
})),
|
||
);
|
||
framePage.value++;
|
||
}
|
||
if (typeof res.hasNext !== "undefined") {
|
||
frameHasNext.value = res.hasNext;
|
||
} else {
|
||
if (list.length < 10) frameHasNext.value = false;
|
||
}
|
||
} catch (e) {
|
||
console.error(e);
|
||
} finally {
|
||
frameLoading.value = false;
|
||
}
|
||
};
|
||
|
||
const loadDecors = async () => {
|
||
if (decorLoading.value || !decorHasNext.value) return;
|
||
decorLoading.value = true;
|
||
try {
|
||
const res = await getAvatarDecorList(decorPage.value);
|
||
const list = res?.list || [];
|
||
if (list.length > 0) {
|
||
decors.value.push(
|
||
...list.map((item) => ({
|
||
id: item.id,
|
||
imageUrl: item.imageUrl,
|
||
})),
|
||
);
|
||
decorPage.value++;
|
||
}
|
||
if (typeof res.hasNext !== "undefined") {
|
||
decorHasNext.value = res.hasNext;
|
||
} else {
|
||
if (list.length < 10) decorHasNext.value = false;
|
||
}
|
||
} catch (e) {
|
||
console.error(e);
|
||
} finally {
|
||
decorLoading.value = false;
|
||
}
|
||
};
|
||
|
||
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();
|
||
loadFrames();
|
||
loadDecors();
|
||
|
||
// 处理推荐跳转参数
|
||
if (options && options.recommendId && options.type && options.imageUrl) {
|
||
const recommendItem = {
|
||
id: options.recommendId,
|
||
imageUrl: decodeURIComponent(options.imageUrl),
|
||
};
|
||
|
||
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;
|
||
}
|
||
}
|
||
});
|
||
|
||
onReachBottom(() => {
|
||
if (showPanel.value) {
|
||
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 toggleFrame = (frame) => {
|
||
if (selectedFrame.value === frame) {
|
||
selectedFrame.value = null;
|
||
} else {
|
||
selectedFrame.value = frame;
|
||
}
|
||
};
|
||
|
||
const toggleDecor = (decor) => {
|
||
if (selectedDecor.value === decor) {
|
||
selectedDecor.value = null;
|
||
} else {
|
||
selectedDecor.value = decor;
|
||
}
|
||
};
|
||
|
||
// 挂饰状态
|
||
const decorState = ref({
|
||
x: 300, // 初始中心 X (rpx)
|
||
y: 80, // 初始中心 Y (rpx)
|
||
scale: 1,
|
||
rotate: 0,
|
||
});
|
||
|
||
const decorStyle = computed(() => {
|
||
return {
|
||
transform: `translate(${decorState.value.x - 120}rpx, ${
|
||
decorState.value.y - 120
|
||
}rpx) rotate(${decorState.value.rotate}deg) scale(${
|
||
decorState.value.scale
|
||
})`,
|
||
};
|
||
});
|
||
|
||
// 触摸状态
|
||
let startTouches = [];
|
||
let initialDecorState = {};
|
||
|
||
const getDistance = (p1, p2) => {
|
||
const x = p1.clientX - p2.clientX;
|
||
const y = p1.clientY - p2.clientY;
|
||
return Math.sqrt(x * x + y * y);
|
||
};
|
||
|
||
const getAngle = (p1, p2) => {
|
||
const x = p1.clientX - p2.clientX;
|
||
const y = p1.clientY - p2.clientY;
|
||
return (Math.atan2(y, x) * 180) / Math.PI;
|
||
};
|
||
|
||
const onTouchStart = (e) => {
|
||
startTouches = e.touches;
|
||
initialDecorState = { ...decorState.value };
|
||
};
|
||
|
||
const onTouchMove = (e) => {
|
||
if (e.touches.length === 1 && startTouches.length === 1) {
|
||
// 单指移动
|
||
const dx = e.touches[0].clientX - startTouches[0].clientX;
|
||
const dy = e.touches[0].clientY - startTouches[0].clientY;
|
||
|
||
// px 转 rpx
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const ratio = 750 / systemInfo.windowWidth;
|
||
|
||
decorState.value.x = initialDecorState.x + dx * ratio;
|
||
decorState.value.y = initialDecorState.y + dy * ratio;
|
||
} else if (e.touches.length === 2 && startTouches.length === 2) {
|
||
// 双指缩放/旋转
|
||
const p1 = e.touches[0];
|
||
const p2 = e.touches[1];
|
||
const startP1 = startTouches[0];
|
||
const startP2 = startTouches[1];
|
||
|
||
const currentDist = getDistance(p1, p2);
|
||
const startDist = getDistance(startP1, startP2);
|
||
|
||
const currentAngle = getAngle(p1, p2);
|
||
const startAngle = getAngle(startP1, startP2);
|
||
|
||
decorState.value.scale =
|
||
initialDecorState.scale * (currentDist / startDist);
|
||
decorState.value.rotate =
|
||
initialDecorState.rotate + (currentAngle - startAngle);
|
||
}
|
||
};
|
||
|
||
const onTouchEnd = () => {
|
||
// 可以在这里做边界检查等
|
||
};
|
||
|
||
const handleLogind = async () => {
|
||
// Logic after successful login if needed
|
||
};
|
||
|
||
const onChooseAvatar = async (e) => {
|
||
const avatarUrl = e.detail.avatarUrl;
|
||
if (!avatarUrl) return;
|
||
|
||
uni.showLoading({ title: "上传中...", mask: true });
|
||
try {
|
||
const imageUrl = await uploadImage(avatarUrl);
|
||
|
||
currentAvatar.value = {
|
||
id: "wechat_" + Date.now(),
|
||
imageUrl: imageUrl,
|
||
};
|
||
uni.hideLoading();
|
||
} catch (e) {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: e || "上传失败", icon: "none" });
|
||
console.error("Upload avatar error", 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 saveByCanvas = async (save = true) => {
|
||
return new Promise((resolve, reject) => {
|
||
const query = uni.createSelectorQuery();
|
||
query
|
||
.select("#avatarCanvas")
|
||
.fields({ node: true, size: true })
|
||
.exec(async (res) => {
|
||
if (!res[0] || !res[0].node) {
|
||
reject("Canvas not found");
|
||
return;
|
||
}
|
||
|
||
const canvas = res[0].node;
|
||
const ctx = canvas.getContext("2d");
|
||
|
||
const loadCanvasImage = (url) => {
|
||
return new Promise((resolve, reject) => {
|
||
const img = canvas.createImage();
|
||
img.onload = () => resolve(img);
|
||
img.onerror = (e) => reject(e);
|
||
img.src = url;
|
||
});
|
||
};
|
||
|
||
// 初始化画布尺寸
|
||
const size = 600;
|
||
canvas.width = size;
|
||
canvas.height = size;
|
||
const avatarPath = await loadCanvasImage(currentAvatar.value.imageUrl);
|
||
ctx.clearRect(0, 0, size, size);
|
||
ctx.drawImage(avatarPath, 0, 0, size, size);
|
||
if (selectedFrame.value) {
|
||
const framePath = await loadCanvasImage(selectedFrame.value.imageUrl);
|
||
ctx.drawImage(framePath, 0, 0, size, size);
|
||
}
|
||
if (selectedDecor.value) {
|
||
const decorPath = await loadCanvasImage(selectedDecor.value.imageUrl);
|
||
ctx.save();
|
||
// 映射 rpx 坐标到 Canvas 坐标 (假设 1rpx = 1 unit for 600x600 canvas logic)
|
||
// Canvas size is 600, Preview is 600rpx. Ratio is 1:1 in logical space.
|
||
ctx.translate(decorState.value.x, decorState.value.y);
|
||
ctx.rotate((decorState.value.rotate * Math.PI) / 180);
|
||
const scale = decorState.value.scale;
|
||
// 绘制图片，宽高 240
|
||
ctx.drawImage(
|
||
decorPath,
|
||
-120 * scale,
|
||
-120 * scale,
|
||
240 * scale,
|
||
240 * scale,
|
||
);
|
||
ctx.restore();
|
||
}
|
||
uni.canvasToTempFilePath({
|
||
canvas: canvas, // Canvas 2D 必须传 canvas 实例
|
||
width: 600,
|
||
height: 600,
|
||
destWidth: 600,
|
||
destHeight: 600,
|
||
success: (res) => {
|
||
if (save) saveImage(res.tempFilePath);
|
||
resolve(res.tempFilePath);
|
||
},
|
||
fail: (err) => reject(err),
|
||
});
|
||
// ctx.draw(false, () => {
|
||
// uni.canvasToTempFilePath({
|
||
// canvasId: "avatarCanvas",
|
||
// success: (res) => {
|
||
// uni.saveImageToPhotosAlbum({
|
||
// filePath: res.tempFilePath,
|
||
// success: () => {
|
||
// uni.showToast({ title: "已保存到相册", icon: "success" });
|
||
// },
|
||
// });
|
||
// },
|
||
// });
|
||
// });
|
||
});
|
||
});
|
||
};
|
||
|
||
const saveImage = (path) => {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: path,
|
||
success() {
|
||
uni.showToast({ title: "已保存到相册" });
|
||
},
|
||
fail() {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "请授权保存到相册",
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
const saveAndUse = async () => {
|
||
if (!isLoggedIn.value) {
|
||
loginPopupRef.value.open();
|
||
return;
|
||
}
|
||
const abilityRes = await abilityCheck("avatar_download");
|
||
if (!abilityRes.canUse) {
|
||
if (
|
||
abilityRes?.blockType === "need_share" &&
|
||
abilityRes?.message === "分享可继续"
|
||
) {
|
||
uni.showToast({
|
||
title: "分享到群聊可继续使用",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
uni.showToast({
|
||
title: "您今日头像下载次数已用完，明日再试",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
const tempPath = await saveByCanvas(true);
|
||
const id = createAvatarId();
|
||
saveRecordRequest(tempPath, id, "avatar_download");
|
||
completeCardInfo(id);
|
||
return;
|
||
// 调用avatarDownloadRecord API记录下载次数
|
||
// await avatarDownloadRecord({
|
||
// avatarUrl: currentAvatar.value,
|
||
// });
|
||
// saveRecordRequest('', )
|
||
// const ctx = uni.createCanvasContext("avatarCanvas");
|
||
// const size = 600;
|
||
// const avatarPath = await loadImage(currentAvatar.value);
|
||
// ctx.clearRect(0, 0, size, size);
|
||
// ctx.drawImage(avatarPath, 0, 0, size, size);
|
||
// if (selectedFrame.value) {
|
||
// const framePath = await loadImage(selectedFrame.value);
|
||
// ctx.drawImage(framePath, 0, 0, size, size);
|
||
// }
|
||
// if (selectedDecor.value) {
|
||
// const decorPath = await loadImage(selectedDecor.value);
|
||
// ctx.save();
|
||
// // 映射 rpx 坐标到 Canvas 坐标 (假设 1rpx = 1 unit for 600x600 canvas logic)
|
||
// // Canvas size is 600, Preview is 600rpx. Ratio is 1:1 in logical space.
|
||
// ctx.translate(decorState.value.x, decorState.value.y);
|
||
// ctx.rotate((decorState.value.rotate * Math.PI) / 180);
|
||
// const scale = decorState.value.scale;
|
||
// // 绘制图片，宽高 240
|
||
// ctx.drawImage(
|
||
// decorPath,
|
||
// -120 * scale,
|
||
// -120 * scale,
|
||
// 240 * scale,
|
||
// 240 * scale,
|
||
// );
|
||
// ctx.restore();
|
||
// }
|
||
// ctx.draw(false, () => {
|
||
// uni.canvasToTempFilePath({
|
||
// canvasId: "avatarCanvas",
|
||
// success: (res) => {
|
||
// uni.saveImageToPhotosAlbum({
|
||
// filePath: res.tempFilePath,
|
||
// success: () => {
|
||
// uni.showToast({ title: "已保存到相册", icon: "success" });
|
||
// },
|
||
// });
|
||
// },
|
||
// });
|
||
// });
|
||
};
|
||
|
||
const completeCardInfo = async (id) => {
|
||
const tempPath = await saveByCanvas(false);
|
||
const imageUrl = await uploadImage(tempPath);
|
||
avatarCreateComplete({
|
||
id,
|
||
imageUrl,
|
||
avatarId: currentAvatar?.value?.id,
|
||
decorId: selectedDecor?.value?.id,
|
||
frameId: selectedFrame?.value?.id,
|
||
});
|
||
return imageUrl;
|
||
};
|
||
|
||
onShareAppMessage(async () => {
|
||
getShareReward({ scene: "avatar_download" });
|
||
if (!isLoggedIn.value) {
|
||
const shareTokenRes = await getShareToken("avatar_download_not_login", "");
|
||
return {
|
||
title: "新春祝福",
|
||
path: `/pages/index/index?shareToken=${shareTokenRes.shareToken}`,
|
||
};
|
||
}
|
||
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();
|
||
return {
|
||
title: "我做了一个新头像，真的太好看了",
|
||
path: `/pages/avatar/detail?shareToken=${shareTokenRes.shareToken}`,
|
||
imageUrl, // 使用默认封面或 popularCards 的封面
|
||
};
|
||
});
|
||
|
||
// onShareTimeline(() => {
|
||
// return {
|
||
// title: "制作我的新春头像",
|
||
// imageUrl:
|
||
// "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>
|
||
.avatar-page {
|
||
min-height: 100vh;
|
||
background: #f8f8f8;
|
||
padding-bottom: 200rpx;
|
||
}
|
||
|
||
.top-steps {
|
||
background: #fff;
|
||
padding: 30rpx 0;
|
||
margin-bottom: 20rpx;
|
||
position: sticky;
|
||
z-index: 100;
|
||
|
||
.step-bar {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 40rpx;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
flex: 1;
|
||
|
||
.step-num-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.step-line {
|
||
position: absolute;
|
||
left: -50%;
|
||
right: 50%;
|
||
top: 20rpx;
|
||
height: 2rpx;
|
||
background: #eee;
|
||
z-index: 1;
|
||
}
|
||
|
||
.step-num {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20rpx;
|
||
color: #999;
|
||
position: relative;
|
||
z-index: 2;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.step-text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
&.active {
|
||
.step-num {
|
||
background: #ff3b30;
|
||
color: #fff;
|
||
transform: scale(1.2);
|
||
box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
|
||
}
|
||
.step-text {
|
||
color: #ff3b30;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.preview-card {
|
||
background: #fff;
|
||
margin: 0 30rpx 30rpx;
|
||
padding: 40rpx;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.preview-square {
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
background: #f0f0f0;
|
||
position: relative;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.frame-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 2;
|
||
}
|
||
|
||
.decor-img {
|
||
position: absolute;
|
||
width: 240rpx;
|
||
height: 240rpx;
|
||
z-index: 3;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
}
|
||
|
||
.interaction-tip {
|
||
margin-top: 30rpx;
|
||
font-size: 24rpx;
|
||
color: #ff3b30;
|
||
background: rgba(255, 59, 48, 0.1);
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 100rpx;
|
||
|
||
.tip-divider {
|
||
margin: 0 15rpx;
|
||
opacity: 0.3;
|
||
}
|
||
}
|
||
|
||
.preview-tip {
|
||
margin-top: 30rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.action-buttons {
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 44rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
|
||
&.primary {
|
||
background: #ff3b30;
|
||
color: #fff;
|
||
}
|
||
|
||
&.secondary {
|
||
background: #fff;
|
||
color: #333;
|
||
border: 2rpx solid #eee;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 编辑面板样式 */
|
||
.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;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.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;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20rpx;
|
||
|
||
.grid-item {
|
||
aspect-ratio: 1;
|
||
background: #f5f5f5;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
border: 4rpx solid transparent;
|
||
|
||
&.active {
|
||
border-color: #ff3b30;
|
||
}
|
||
|
||
.grid-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.check {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
background: #ff3b30;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 0 0 0 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.loading-more,
|
||
.no-more {
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
padding: 30rpx 0;
|
||
}
|
||
|
||
.hidden-canvas {
|
||
position: fixed;
|
||
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>
|
||
"}]} ```
|