修改王者主页
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;
|
app.config.globalProperties.$system = plus.os.name;
|
||||||
// #endif
|
// #endif
|
||||||
app.config.globalProperties.$systemInfo = systemInfo
|
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.config.globalProperties.$version = uni.getStorageSync('version')
|
||||||
app.use(globalMethods);
|
app.use(globalMethods);
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -5,79 +5,88 @@
|
||||||
</nav-bar>
|
</nav-bar>
|
||||||
<view>
|
<view>
|
||||||
<view class="painter-container" @click="handlePreview">
|
<view class="painter-container" @click="handlePreview">
|
||||||
<l-painter isCanvasToTempFilePath @success="onPainterSuccess" :css="`width:750rpx; padding: 24rpx; `">
|
<!-- 真正的高清图片预览区域，使用原生图片可以自动自适应手机宽度且无任何裁剪 Bug -->
|
||||||
<l-painter-view :css="`width: 100%; position: relative;`">
|
<image v-if="finalPosterPath" :src="finalPosterPath" mode="widthFix"
|
||||||
<!-- 直接使用主背景图撑开父容器，移除不必要的 opacity: 0 占位图，避免在大屏渲染时产生黑块 -->
|
style="width: 100%; display: block; border-radius: 12rpx;"></image>
|
||||||
<l-painter-image :src="`/static/image/other/game/wangzhe/style-${honorData.type}.jpg`"
|
<view v-else
|
||||||
css="width: 100%; display: block;"></l-painter-image>
|
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>
|
||||||
<l-painter-image :src="honorData.avatar"
|
</view>
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- 头像框 (压在头像上方) -->
|
<!-- 海报生成底层引擎，移出屏幕可视区外专心用纯 px 生成高清无损图 -->
|
||||||
<l-painter-image :src="`/static/image/other/game/wangzhe/avatar-frame-${honorData.type}.png`"
|
<view style="position: fixed; left: -9999px; top: -9999px;">
|
||||||
css="position: absolute; left: 0; top: 0; width: 24.3%; height: 9.15%;"></l-painter-image>
|
<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`"
|
<l-painter-image
|
||||||
:css="`position: absolute; left: ${honorData.type == 3 ? '29%' : '27%'}; top: 25.5%; width: 1.57%; height: 3.44%;`"></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"
|
<l-painter-image :src="`/static/image/other/game/wangzhe/${honorData.gender}.png`"
|
||||||
:css="`position: absolute; left: ${honorData.type == 3 ? '30.7%' : '28.7%'}; top: 24.5%; width: ${honorData.nickname.length * 1.99}%;`"></l-painter-image>
|
: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-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 v-if="$isVip()" src="/static/image/other/shuiying.png"
|
<l-painter-image v-if="nicknameImage" :src="nicknameImage"
|
||||||
:css="`position: absolute; left: 2.5%; bottom: 5%; width: 145.38rpx;height:42.76rpx`"></l-painter-image>
|
: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-view>
|
<!-- 收到花束 -->
|
||||||
</l-painter>
|
<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>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
@ -370,6 +379,8 @@ const tempData = reactive({});
|
||||||
const newAvatars = ref([]);
|
const newAvatars = ref([]);
|
||||||
|
|
||||||
function handleChangeTheme(typeIndex) {
|
function handleChangeTheme(typeIndex) {
|
||||||
|
// 切换主题时，先清空旧海报，触发界面“加载中”提示
|
||||||
|
finalPosterPath.value = '';
|
||||||
honorData.type = typeIndex;
|
honorData.type = typeIndex;
|
||||||
uni.setStorageSync('wangzheHonorData', honorData);
|
uni.setStorageSync('wangzheHonorData', honorData);
|
||||||
}
|
}
|
||||||
|
|
@ -439,6 +450,9 @@ function confirmEdit() {
|
||||||
uni.setStorageSync('wangzheHonorData', honorData);
|
uni.setStorageSync('wangzheHonorData', honorData);
|
||||||
editPopup.value.close();
|
editPopup.value.close();
|
||||||
|
|
||||||
|
// 数据修改后，清空旧海报触发“加载中”提示，等待重新生成
|
||||||
|
finalPosterPath.value = '';
|
||||||
|
|
||||||
// 如果昵称改变了，需要重新绘制原生的渐变文字
|
// 如果昵称改变了，需要重新绘制原生的渐变文字
|
||||||
if (isNicknameChanged && isFontLoaded.value) {
|
if (isNicknameChanged && isFontLoaded.value) {
|
||||||
drawGradientText();
|
drawGradientText();
|
||||||
|
|
@ -555,6 +569,9 @@ const drawGradientText = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.painter-container {
|
.painter-container {
|
||||||
|
/* 强制画板缩放到设备屏幕宽度，避免物理 px 超出屏幕 */
|
||||||
|
padding: 8px;
|
||||||
|
zoom: calc(100vw / 798);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
/* 限制PC/iPad端的最大宽度 */
|
/* 限制PC/iPad端的最大宽度 */
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue