fix: card content font size

This commit is contained in:
zzc
2026-01-22 22:11:02 +08:00
parent 303654b1e1
commit 2b2af1bab4
3 changed files with 89 additions and 50 deletions

View File

@@ -25,7 +25,7 @@
fontSize: fontSize + 'rpx',
lineHeight: fontSize * 1.5 + 'rpx',
}"
>{{ targetName + "\n " + blessingText }}</text
>{{ targetName + "\n " + blessingText.content }}</text
>
</view>
<view class="user" :style="{ left: 160 + userOffsetX + 'rpx' }">
@@ -138,11 +138,15 @@
v-for="(text, index) in displayedGreetings"
:key="index"
class="greeting-card"
:class="{ active: blessingText === text }"
:class="{ active: blessingText === text.content }"
@tap="selectGreeting(text)"
>
<text class="greeting-text">{{ text }}</text>
<view v-if="blessingText === text" class="check-mark"></view>
<text class="greeting-text">{{ text.content }}</text>
<view
v-if="blessingText.content === text.content"
class="check-mark"
></view
>
</view>
</view>
</scroll-view>
@@ -270,25 +274,34 @@
class="hidden-canvas"
style="width: 540px; height: 960px"
/>
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
</view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, computed } from "vue";
import { getBavBarHeight, getDeviceInfo } from "@/utils/system";
import { generateObjectId } from "@/utils/common";
import {
createCardTmp,
updateCard,
getCardTemplateList,
getCardTemplateContentList,
} from "@/api/make";
import { createCardShareToken } from "@/api/card";
import { createShareToken } from "@/api/system";
import { onShareAppMessage, onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
const userStore = useUserStore();
const loginPopupRef = ref(null);
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
const templatePage = ref(1);
const loadingTemplates = ref(false);
const hasMoreTemplates = ref(true);
const userStore = useUserStore();
const cardId = ref("");
const targetName = ref("祝您");
@@ -298,7 +311,7 @@ const userAvatar = ref(
"https://file.lihailezzc.com/resource/b48c41054c2633c478463ac1b1f1ca23.png",
);
const blessingText = ref("");
const blessingText = ref({});
const fontSize = ref(32);
const textColors = [
@@ -379,8 +392,6 @@ const bubbleOffsetY = ref(0);
const userOffsetX = ref(0);
onLoad((options) => {
cardId.value = "69674f307307beac4519025f";
// createCard();
getTemplateList();
getTemplateContentList();
});
@@ -391,15 +402,11 @@ onReachBottom(() => {
}
});
const createCard = async () => {
const res = await createCardTmp({
targetName: targetName.value,
signatureName: signatureName.value,
blessingText: blessingText.value,
});
if (res.id) {
cardId.value = res.id;
}
const createCard = () => {
const id = generateObjectId();
createCardTmp({ id });
cardId.value = id;
return id;
};
const getTemplateList = async (isLoadMore = false) => {
@@ -448,9 +455,9 @@ const getTemplateList = async (isLoadMore = false) => {
const getTemplateContentList = async () => {
const res = await getCardTemplateContentList();
if (res.length) {
greetingLib.value = res.map((item) => item.content);
greetingLib.value = res;
displayedGreetings.value = greetingLib.value.slice(0, 2);
blessingText.value = greetingLib.value[0] || "";
blessingText.value = greetingLib.value[0] || {};
}
};
@@ -459,15 +466,31 @@ const loadMoreTemplates = () => {
};
onShareAppMessage(async () => {
if (!isLoggedIn.value) {
return {
title: "新春祝福",
path: "/pages/index/index",
};
}
// 1. 确保有 cardId (如果内容有变动,最好是新建)
const id = createCard();
if (!id) {
return {
title: "新春祝福",
path: "/pages/index/index",
};
}
const deviceInfo = getDeviceInfo();
const shareTokenRes = await createCardShareToken({
cardId: cardId.value,
const shareTokenRes = await createShareToken({
scene: "card_generate",
targetId: id,
...deviceInfo,
});
return {
title: "新春祝福",
path: "/pages/detail/index?shareToken=" + shareTokenRes.shareToken,
imageUrl: "/static/images/bg.jpg",
imageUrl: currentTemplate.value?.imageUrl || "/static/images/bg.jpg",
};
});
@@ -531,27 +554,39 @@ const preview = () => {
};
const shareOrSave = async () => {
// const tempPath = await saveByCanvas(false);
// const fileKeyRes = await uni.uploadFile({
// url: "https://api.ai-meng.com/api/common/upload",
// filePath: tempPath,
// name: "file", // 和后端接收文件字段名一致
// header: {
// "x-app-id": "69665538a49b8ae3be50fe5d",
// },
// });
// if (fileKeyRes.statusCode < 400) {
// const keyJson = JSON.parse(fileKeyRes.data);
// const url = `https://file.lihailezzc.com/${keyJson?.data.key}`;
// // const url =
// // "https://file.lihailezzc.com/resource/99c9f7e0086ed66d20bd1675b4ab22e9.png";
// updateCard({
// id: cardId.value,
// imageUrl: url,
// status: 1,
// });
// }
// createCard();
if (!isLoggedIn.value) {
loginPopupRef.value.open();
return;
}
const tempPath = await saveByCanvas(false);
const fileKeyRes = await uni.uploadFile({
url: "https://api.ai-meng.com/api/common/upload",
filePath: tempPath,
name: "file", // 和后端接收文件字段名一致
header: {
"x-app-id": "69665538a49b8ae3be50fe5d",
},
});
if (fileKeyRes.statusCode < 400) {
const keyJson = JSON.parse(fileKeyRes.data);
const url = `https://file.lihailezzc.com/${keyJson?.data.key}`;
// const url =
// "https://file.lihailezzc.com/resource/99c9f7e0086ed66d20bd1675b4ab22e9.png";
// 1. 确保有 cardId
if (!cardId.value) {
createCard();
}
updateCard({
id: cardId.value,
imageUrl: url,
status: 1,
blessingId: blessingText.value?.id || "",
blessingTo: targetName.value,
blessingFrom: signatureName.value,
templateId: currentTemplate.value?.id || "",
});
}
// uni.showToast({ title: '已保存到相册并可分享', icon: 'none' })
};
@@ -625,7 +660,7 @@ const saveByCanvas = async (save = true) => {
// 4⃣ 祝福语气泡
drawBubbleText(ctx, {
text: targetName.value + "\n " + blessingText.value,
text: targetName.value + "\n " + blessingText.value.content,
x: 70,
y: 260 + bubbleOffsetY.value,
maxWidth: 400,
@@ -710,7 +745,6 @@ function drawBubbleText(ctx, options) {
fontSize = 32,
fontFamily = "PingFang SC",
} = options;
console.log(111111, fontFamily);
if (!text) return;
ctx.fillStyle = textColor;