make yunshi page
This commit is contained in:
zzc
378
pages/avatar/index.vue
Normal file
378
pages/avatar/index.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<view class="avatar-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||
<view class="nav-bar">
|
||||
<view class="back" @tap="goBack">‹</view>
|
||||
<text class="nav-title-left">新春头像挂饰</text>
|
||||
</view>
|
||||
<view class="preview-card">
|
||||
<view class="preview-square">
|
||||
<image class="avatar-img" :src="currentAvatar" mode="aspectFill" />
|
||||
<image
|
||||
v-if="selectedFrame"
|
||||
class="frame-img"
|
||||
:src="selectedFrame"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<image
|
||||
v-if="selectedDecor"
|
||||
class="decor-img"
|
||||
:src="selectedDecor"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<text class="preview-tip">实时预览效果</text>
|
||||
</view>
|
||||
|
||||
<view class="quick-actions">
|
||||
<button class="btn wechat" @tap="useWeChatAvatar">使用微信头像</button>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">系统推荐头像</text>
|
||||
</view>
|
||||
<scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
|
||||
<view class="avatar-list">
|
||||
<view
|
||||
v-for="(item, i) in systemAvatars"
|
||||
:key="i"
|
||||
class="avatar-card"
|
||||
:class="{ active: currentAvatar === item }"
|
||||
@tap="currentAvatar = item"
|
||||
>
|
||||
<image :src="item" class="avatar-thumb" mode="aspectFill" />
|
||||
<view v-if="currentAvatar === item" class="check">✔</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="tabs">
|
||||
<view
|
||||
class="tab"
|
||||
:class="{ active: activeTab === 'frame' }"
|
||||
@tap="activeTab = 'frame'"
|
||||
>头像框</view
|
||||
>
|
||||
<view
|
||||
class="tab"
|
||||
:class="{ active: activeTab === 'decor' }"
|
||||
@tap="activeTab = 'decor'"
|
||||
>挂饰配件</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view v-if="activeTab === 'frame'" class="grid">
|
||||
<view
|
||||
v-for="(frame, i) in frames"
|
||||
:key="i"
|
||||
class="grid-item"
|
||||
:class="{ active: selectedFrame === frame }"
|
||||
@tap="selectedFrame = frame"
|
||||
>
|
||||
<image :src="frame" class="grid-img" mode="aspectFill" />
|
||||
<view v-if="selectedFrame === frame" class="check">✔</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="grid">
|
||||
<view
|
||||
v-for="(decor, i) in decors"
|
||||
:key="i"
|
||||
class="grid-item"
|
||||
:class="{ active: selectedDecor === decor }"
|
||||
@tap="selectedDecor = decor"
|
||||
>
|
||||
<image :src="decor" class="grid-img" mode="aspectFit" />
|
||||
<view v-if="selectedDecor === decor" class="check">✔</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-actions">
|
||||
<button class="btn primary" @tap="saveAndUse">保存并使用</button>
|
||||
<button class="btn secondary" @tap="share">分享</button>
|
||||
</view>
|
||||
|
||||
<canvas
|
||||
canvas-id="avatarCanvas"
|
||||
class="hidden-canvas"
|
||||
style="width: 600px; height: 600px"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
|
||||
const systemAvatars = [
|
||||
"https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg",
|
||||
"https://file.lihailezzc.com/20260109082842_666_1.jpg",
|
||||
"https://file.lihailezzc.com/20260108222141_644_1.jpg",
|
||||
"https://file.lihailezzc.com/9a929a32-439f-453b-b603-fda7b04cbe08.png",
|
||||
];
|
||||
const frames = [
|
||||
"https://file.lihailezzc.com/resource/0f8e6a78c1b04a4fb3a6fa1c66f1f7b3.png",
|
||||
"https://file.lihailezzc.com/resource/4a4f0c9e6e1b4c0b9f6f7a1b2c3d4e5f.png",
|
||||
"https://file.lihailezzc.com/resource/aa77f0b45b2e4a0f91c4fda74f3f1123.png",
|
||||
"https://file.lihailezzc.com/resource/bb88f0b45b2e4a0f91c4fda74f3f1199.png",
|
||||
];
|
||||
const decors = [
|
||||
"https://file.lihailezzc.com/resource/horse_decor_01.png",
|
||||
"https://file.lihailezzc.com/resource/horse_decor_02.png",
|
||||
"https://file.lihailezzc.com/resource/horse_decor_03.png",
|
||||
"https://file.lihailezzc.com/resource/horse_decor_04.png",
|
||||
];
|
||||
|
||||
const currentAvatar = ref(systemAvatars[0]);
|
||||
const selectedFrame = ref("");
|
||||
const selectedDecor = ref("");
|
||||
const activeTab = ref("frame");
|
||||
|
||||
const useWeChatAvatar = () => {
|
||||
uni.showToast({ title: "已应用微信头像", icon: "none" });
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const saveAndUse = async () => {
|
||||
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.drawImage(decorPath, 0, 0, size, size);
|
||||
}
|
||||
ctx.draw(false, () => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: "avatarCanvas",
|
||||
success: (res) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.showToast({ title: "已保存并设置", icon: "success" });
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const share = () => {
|
||||
uni.showToast({ title: "已生成，可在相册分享", icon: "none" });
|
||||
};
|
||||
|
||||
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: #fff;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
.back {
|
||||
font-size: 40rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.nav-title-left {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.preview-card {
|
||||
margin: 20rpx 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.preview-square {
|
||||
width: 600rpx;
|
||||
height: 600rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 24rpx;
|
||||
background: #f5dfc9;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.frame-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.decor-img {
|
||||
position: absolute;
|
||||
top: -40rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
.preview-tip {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 22rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.btn {
|
||||
height: 80rpx;
|
||||
border-radius: 999rpx;
|
||||
padding: 0 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.btn.wechat {
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 24rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.avatar-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
.avatar-list {
|
||||
display: flex;
|
||||
}
|
||||
.avatar-card {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 16rpx;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.avatar-card.active {
|
||||
outline: 4rpx solid #ff3b30;
|
||||
}
|
||||
.avatar-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.check {
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
top: 8rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
padding: 16rpx 24rpx 8rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background: #f7f7f7;
|
||||
border-radius: 999rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
.tab.active {
|
||||
background: #fff0f0;
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16rpx;
|
||||
padding: 8rpx 24rpx 24rpx;
|
||||
}
|
||||
.grid-item {
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.grid-item.active {
|
||||
outline: 4rpx solid #ff3b30;
|
||||
}
|
||||
.grid-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 24rpx 40rpx;
|
||||
}
|
||||
.btn.primary {
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
box-shadow: 0 12rpx 24rpx rgba(255, 59, 48, 0.35);
|
||||
}
|
||||
.btn.secondary {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.hidden-canvas {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user