修改王者主页
This commit is contained in:
tangxinyue
parent
e501d35d6b
commit
bf57816244
2
main.js
2
main.js
|
|
@ -29,7 +29,7 @@ export function createApp() {
|
|||
app.config.globalProperties.$system = plus.os.name;
|
||||
// #endif
|
||||
app.config.globalProperties.$systemInfo = systemInfo
|
||||
uni.setStorageSync('version', '1.0.6.sp5')
|
||||
uni.setStorageSync('version', '1.0.6.sp7')
|
||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||
app.use(globalMethods);
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -5,79 +5,88 @@
|
|||
</nav-bar>
|
||||
<view>
|
||||
<view class="painter-container" @click="handlePreview">
|
||||
<l-painter isCanvasToTempFilePath @success="onPainterSuccess" :css="`width:750rpx; padding: 24rpx; `">
|
||||
<l-painter-view :css="`width: 100%; position: relative;`">
|
||||
<!-- 直接使用主背景图撑开父容器，移除不必要的 opacity: 0 占位图，避免在大屏渲染时产生黑块 -->
|
||||
<l-painter-image :src="`/static/image/other/game/wangzhe/style-${honorData.type}.jpg`"
|
||||
css="width: 100%; display: block;"></l-painter-image>
|
||||
<!-- 头像 (纯百分比绝对定位，完美适配所有大屏分辨率) -->
|
||||
<l-painter-image :src="honorData.avatar"
|
||||
css="position: absolute; left: 15.6%; top: 22.5%; width: 8.5%; height: 20%; border-radius: 200rpx; object-fit: cover; display: block;"></l-painter-image>
|
||||
<!-- 真正的高清图片预览区域，使用原生图片可以自动自适应手机宽度且无任何裁剪 Bug -->
|
||||
<image v-if="finalPosterPath" :src="finalPosterPath" mode="widthFix"
|
||||
style="width: 100%; display: block; border-radius: 12rpx;"></image>
|
||||
<view v-else
|
||||
style="width: 100%; height: 48vw; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 12rpx;">
|
||||
<text style="color: #999; font-size: 24rpx;">海报加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 头像框 (压在头像上方) -->
|
||||
<l-painter-image :src="`/static/image/other/game/wangzhe/avatar-frame-${honorData.type}.png`"
|
||||
css="position: absolute; left: 0; top: 0; width: 24.3%; height: 9.15%;"></l-painter-image>
|
||||
<!-- 海报生成底层引擎，移出屏幕可视区外专心用纯 px 生成高清无损图 -->
|
||||
<view style="position: fixed; left: -9999px; top: -9999px;">
|
||||
<l-painter isCanvasToTempFilePath @success="onPainterSuccess" :css="`width:750px;`">
|
||||
<l-painter-view :css="`width: 750.0px; position: relative;`">
|
||||
<!-- 直接使用主背景图撑开父容器，移除不必要的 opacity: 0 占位图，避免在大屏渲染时产生黑块 -->
|
||||
<l-painter-image :src="`/static/image/other/game/wangzhe/style-${honorData.type}.jpg`"
|
||||
css="width: 750.0px; display: block;"></l-painter-image>
|
||||
<!-- 头像 (纯百分比绝对定位，完美适配所有大屏分辨率) -->
|
||||
<l-painter-image :src="honorData.avatar"
|
||||
css="position: absolute; left: 117.0px; top: 76.8px; width: 66px; height: 66px; border-radius: 200px; object-fit: cover; display: block;"></l-painter-image>
|
||||
|
||||
<!-- 性别图标 -->
|
||||
<l-painter-image :src="`/static/image/other/game/wangzhe/${honorData.gender}.png`"
|
||||
:css="`position: absolute; left: ${honorData.type == 3 ? '29%' : '27%'}; top: 25.5%; width: 1.57%; height: 3.44%;`"></l-painter-image>
|
||||
<!-- 头像框 (压在头像上方) -->
|
||||
<l-painter-image
|
||||
:src="`/static/image/other/game/wangzhe/avatar-frame-${honorData.type}.png`"
|
||||
css="position: absolute; left: 0; top: 0; width: 183px; height: 141px"></l-painter-image>
|
||||
|
||||
<!-- 昵称渐变图片 -->
|
||||
<l-painter-image v-if="nicknameImage" :src="nicknameImage"
|
||||
:css="`position: absolute; left: ${honorData.type == 3 ? '30.7%' : '28.7%'}; top: 24.5%; width: ${honorData.nickname.length * 1.99}%;`"></l-painter-image>
|
||||
<!-- 地区 -->
|
||||
<l-painter-text :text="honorData.receivedFlowers"
|
||||
css="position: absolute; left: 47.8%; top: 38.5%; font-size: 9rpx; color: #DAF2FF;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 收到花束 -->
|
||||
<l-painter-text :text="honorData.receivedFlowers"
|
||||
css="position: absolute; left: 47.8%; top: 38.5%; font-size: 9rpx; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
|
||||
<!-- 热度数 -->
|
||||
<l-painter-text :text="honorData.popularityCount"
|
||||
css="position: absolute; left: 51.5%; top: 38.5%; font-size: 9rpx; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
|
||||
<!-- 点赞数 -->
|
||||
<l-painter-text :text="honorData.likeCount"
|
||||
css="position: absolute; left: 55.2%; top: 38.5%; font-size: 9rpx; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
|
||||
<!-- 荣誉一 -->
|
||||
<l-painter-text :text="honorData.honor1"
|
||||
css="position: absolute; left: 33%; top: 42.67%; font-size: 9rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 荣誉二 -->
|
||||
<l-painter-text :text="honorData.honor2"
|
||||
css="position: absolute; left: 62.5%; top: 52.2%; font-size: 8rpx; color: #71B1D3;transform: scale(0.85),translateX(-50%);"></l-painter-text>
|
||||
<!-- 巅峰万强 -->
|
||||
<l-painter-text v-if="honorData.type == 4" :text="honorData.peakStrong"
|
||||
css="position: absolute; left: 34.3%; top: 56.5%; font-size: 8rpx; color: #E9F5FB;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 对战场次 -->
|
||||
<l-painter-text :text="honorData.matchCount"
|
||||
css="position: absolute; left: 18.4%; top: 71%; font-size: 12rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 对战被赞 -->
|
||||
<l-painter-text :text="honorData.matchLikeCount"
|
||||
css="position: absolute; left: 26.6%; top: 71%; font-size: 12rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 图鉴等级 -->
|
||||
<l-painter-text :text="honorData.pokedexLevel"
|
||||
css="position: absolute; left: 42.6%; top: 70%; font-size:9rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 皮肤数 -->
|
||||
<l-painter-text :text="honorData.skinCount"
|
||||
css="position: absolute; left: 50.3%; top: 70%; font-size:9rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 游戏天数 -->
|
||||
<l-painter-text v-if="honorData.type == 1 || honorData.type == 2" :text="honorData.gameDays"
|
||||
css="position: absolute; left: 26.95%; top: 82.7%; font-size:10rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 峡谷对战局数 -->
|
||||
<l-painter-text v-if="honorData.type == 1 || honorData.type == 2"
|
||||
:text="honorData.riftMatchCount"
|
||||
css="position: absolute; left: 42.96%; top: 82.7%; font-size:10rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 大乱斗对战局数 -->
|
||||
<l-painter-text v-if="honorData.type == 1 || honorData.type == 2"
|
||||
:text="honorData.aramMatchCount"
|
||||
css="position: absolute; left: 50.65%; top: 82.7%; font-size:10rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 亲密度 -->
|
||||
<l-painter-text v-if="honorData.type == 3 || honorData.type == 4" :text="honorData.intimacy"
|
||||
css="position: absolute; left: 46.4%; top: 86.8%; font-size:10rpx; color: #71B1D3;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
|
||||
<!-- 性别图标 -->
|
||||
<l-painter-image :src="`/static/image/other/game/wangzhe/${honorData.gender}.png`"
|
||||
:css="`position: absolute; left: ${honorData.type == 3 ? '217.5px' : '202.5px'}; top: 87.0px; width: 11.8px; height: 11.7px;`"></l-painter-image>
|
||||
|
||||
<!-- 水印 -->
|
||||
<l-painter-image v-if="$isVip()" src="/static/image/other/shuiying.png"
|
||||
:css="`position: absolute; left: 2.5%; bottom: 5%; width: 145.38rpx;height:42.76rpx`"></l-painter-image>
|
||||
</l-painter-view>
|
||||
</l-painter>
|
||||
<!-- 昵称渐变图片 -->
|
||||
<l-painter-image v-if="nicknameImage" :src="nicknameImage"
|
||||
:css="`position: absolute; left: ${honorData.type == 3 ? '230.3px' : '215.3px'}; top: ${$system == 'iOS' ? '83px' : '85.6px'}; width: ${honorData.nickname.length * 14.9}px;`"></l-painter-image>
|
||||
<!-- 收到花束 -->
|
||||
<l-painter-text :text="honorData.receivedFlowers"
|
||||
css="position: absolute; left: 358.5px; top: 131.4px; font-size: 9px; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
|
||||
<!-- 热度数 -->
|
||||
<l-painter-text :text="honorData.popularityCount"
|
||||
css="position: absolute; left: 386.3px; top: 131.4px; font-size: 9px; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
|
||||
<!-- 点赞数 -->
|
||||
<l-painter-text :text="honorData.likeCount"
|
||||
css="position: absolute; left: 414.0px; top: 131.4px; font-size: 9px; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
|
||||
<!-- 荣誉一 -->
|
||||
<l-painter-text :text="honorData.honor1"
|
||||
css="position: absolute; left: 247.5px; top: 145.6px; font-size: 9px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 荣誉二 -->
|
||||
<l-painter-text :text="honorData.honor2"
|
||||
css="position: absolute; left: 465.6px; top: 173.6px; font-size: 8px; color: #71B1D3;transform: scale(0.85),translateX(-50%);"></l-painter-text>
|
||||
<!-- 巅峰万强 -->
|
||||
<l-painter-text v-if="honorData.type == 4" :text="honorData.peakStrong"
|
||||
css="position: absolute; left: 257.3px; top: 192.8px; font-size: 8px; color: #E9F5FB;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 对战场次 -->
|
||||
<l-painter-text :text="honorData.matchCount"
|
||||
css="position: absolute; left: 138.0px; top: 242.3px; font-size: 12px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 对战被赞 -->
|
||||
<l-painter-text :text="honorData.matchLikeCount"
|
||||
css="position: absolute; left: 199.5px; top: 242.3px; font-size: 12px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 图鉴等级 -->
|
||||
<l-painter-text :text="honorData.pokedexLevel"
|
||||
css="position: absolute; left: 319.5px; top: 238.8px; font-size:9px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 皮肤数 -->
|
||||
<l-painter-text :text="honorData.skinCount"
|
||||
css="position: absolute; left: 377.3px; top: 238.8px; font-size:9px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 游戏天数 -->
|
||||
<l-painter-text v-if="honorData.type == 1 || honorData.type == 2" :text="honorData.gameDays"
|
||||
css="position: absolute; left: 202.1px; top: 282.2px; font-size:10px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 峡谷对战局数 -->
|
||||
<l-painter-text v-if="honorData.type == 1 || honorData.type == 2"
|
||||
:text="honorData.riftMatchCount"
|
||||
css="position: absolute; left: 322.2px; top: 282.2px; font-size:10px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 大乱斗对战局数 -->
|
||||
<l-painter-text v-if="honorData.type == 1 || honorData.type == 2"
|
||||
:text="honorData.aramMatchCount"
|
||||
css="position: absolute; left: 379.9px; top: 282.2px; font-size:10px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
|
||||
<!-- 亲密度 -->
|
||||
<l-painter-text v-if="honorData.type == 3 || honorData.type == 4" :text="honorData.intimacy"
|
||||
css="position: absolute; left: 348.0px; top: 296.2px; font-size:10px; color: #71B1D3;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
|
||||
|
||||
<!-- 水印 -->
|
||||
<l-painter-image v-if="$isVip()" src="/static/image/other/shuiying.png"
|
||||
:css="`position: absolute; left: 18.8px; bottom: 17.1px; width: 145.38px;height:42.76px`"></l-painter-image>
|
||||
</l-painter-view>
|
||||
</l-painter>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -370,6 +379,8 @@ const tempData = reactive({});
|
|||
const newAvatars = ref([]);
|
||||
|
||||
function handleChangeTheme(typeIndex) {
|
||||
// 切换主题时，先清空旧海报，触发界面“加载中”提示
|
||||
finalPosterPath.value = '';
|
||||
honorData.type = typeIndex;
|
||||
uni.setStorageSync('wangzheHonorData', honorData);
|
||||
}
|
||||
|
|
@ -439,6 +450,9 @@ function confirmEdit() {
|
|||
uni.setStorageSync('wangzheHonorData', honorData);
|
||||
editPopup.value.close();
|
||||
|
||||
// 数据修改后，清空旧海报触发“加载中”提示，等待重新生成
|
||||
finalPosterPath.value = '';
|
||||
|
||||
// 如果昵称改变了，需要重新绘制原生的渐变文字
|
||||
if (isNicknameChanged && isFontLoaded.value) {
|
||||
drawGradientText();
|
||||
|
|
@ -555,6 +569,9 @@ const drawGradientText = () => {
|
|||
}
|
||||
|
||||
.painter-container {
|
||||
/* 强制画板缩放到设备屏幕宽度，避免物理 px 超出屏幕 */
|
||||
padding: 8px;
|
||||
zoom: calc(100vw / 798);
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
/* 限制PC/iPad端的最大宽度 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue