fix: card content font size
This commit is contained in:
@@ -112,7 +112,7 @@
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { getCardDetail } from "@/api/card.js";
|
||||
import { getPageDetail } from "@/api/system.js";
|
||||
|
||||
const navBarHeight = ref(44);
|
||||
const statusBarHeight = ref(20);
|
||||
@@ -122,7 +122,7 @@ const cardDetail = ref({});
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.shareToken) {
|
||||
const card = await getCardDetail(options.shareToken);
|
||||
const card = await getPageDetail(options.shareToken);
|
||||
cardId.value = card.id;
|
||||
cardDetail.value = card;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user