-
-
+
\ No newline at end of file
diff --git a/src/components/Question.vue b/src/components/Question.vue
index c121f27..4153a94 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -5,51 +5,32 @@ import { data } from "@/data";
import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
import { useMainStore } from "@/store";
import { subAnswer } from "@/api";
-import Preloader from "@/plugins/Preloader";
-import { pageResultImg } from "@/data/imgList";
// 页面配置初始化
-const emit = defineEmits(["QuestionPage"]);
+const emit = defineEmits([ "QuestionPage"]);
const userStore = useMainStore();
+
// 当前题目
-const currentId = ref(0); //当前id 0~11
+// const currentId = ref(props.questionId); //当前id 0~4
+const currentId = ref(0); //当前id 0~3
+
const questionList = ref(data); //随机打乱题库
-const answerList = ref([]); // 答案库统计
-const activeId = ref(""); // 当前题目所选答案选项
-const showResultBtn = ref(false);
const isChecked = ref(false);
+const checkedOption = ref("");
+const QaResult = ref(1); //当前答题结果
// 答题事件
const answerFn = (item, event) => {
let e = event.target.parentElement;
- activeId.value = item.aid; //更新选中状态
- // console.log("选项", item);
- debounceTap(e, () => {
- let cid = questionList.value[currentId.value].id;
- let has = answerList.value.findIndex((obj) => obj.id === cid);
- // 答案库中未存在该题的结果则新增，存在则更新最新选项
- if (has == -1) {
- answerList.value.push({
- id: cid,
- aid: item.aid,
- answer: item.text,
- });
- } else {
- answerList.value[has].aid = item.aid;
- answerList.value[has].answer = item.text;
- }
- gsap.set(".option-tips,.analysis", { autoAlpha: 1 });
+ debounceTap(e, () => {
gsap.set(".answer-box", { pointerEvents: "none" });
isChecked.value = true;
- // console.log("currentId.value", currentId.value);
- if (currentId.value == 2) {
- // console.log("over");
- gsap.set(".create-btn", { autoAlpha: 1 });
- } else {
- gsap.set(".next-btn", { autoAlpha: 1 });
- }
+ checkedOption.value = item;
+ console.log("checkedOption", checkedOption.value);
+ QaResult.value = item.result;
+ gsap.to(".qp-result ", { duration: 0.5, autoAlpha: 1, delay: 1 });
});
};
@@ -57,12 +38,16 @@ const answerFn = (item, event) => {
const nextQuestion = (event) => {
let e = event.target;
debounceTap(e, () => {
- isChecked.value = false;
- gsap.set(".option-tips,.analysis", { autoAlpha: 0 });
- currentId.value++;
- activeId.value = "";
- gsap.set(".answer-box", { pointerEvents: "initial" });
- gsap.set(".next-btn", { autoAlpha: 0 });
+ gsap.to(".qp-result", {
+ duration: 0.5,
+ autoAlpha: 0,
+ onComplete: () => {
+ isChecked.value = false;
+ checkedOption.value = "";
+ gsap.set(".answer-box", { pointerEvents: "auto" });
+ currentId.value++;
+ },
+ });
});
};
@@ -70,8 +55,9 @@ const nextQuestion = (event) => {
const viewResult = (event) => {
let e = event.target;
debounceTap(e, () => {
- // 随机生成海报id
- userStore.updatePosterId(getRandomNumber([1, 2, 3]));
+ // 更新海报id
+ userStore.posterId = currentId.value + 1;
+
gsap.set(".question-box", { pointerEvents: "none" });
Toast("答题结束");
Toast.loading({
@@ -94,7 +80,7 @@ const viewResult = (event) => {
duration: 0.5,
autoAlpha: 0,
onComplete: () => {
- emit("QuestionPage", { action: "showResult" });
+ emit("showResult", { action: "showResult" });
},
});
}, 1000);
@@ -102,11 +88,11 @@ const viewResult = (event) => {
} else {
setTimeout(() => {
Toast.clear();
- gsap.to(".QuestionPage", {
+ gsap.to(".QuestionPage,.qp-result", {
duration: 0.5,
autoAlpha: 0,
onComplete: () => {
- emit("QuestionPage", { action: "showResult" });
+ emit("QuestionPage", { action: 'showResult' });
},
});
}, 1000);
@@ -114,41 +100,18 @@ const viewResult = (event) => {
});
};
-// 从数组中随机生成一个数字
-const getRandomNumber = (arr) => {
- var randomIndex = Math.floor(Math.random() * arr.length);
- return arr[randomIndex];
-};
-
onMounted(() => {
gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
- gsap.from(".question-box", { duration: 0.5, y: 30, autoAlpha: 0 });
- gsap.from(".answer-box", {
- duration: 0.5,
- y: 30,
- autoAlpha: 0,
- onComplete: () => {
- // 开始加载答题页面资源
- Preloader({
- name: "加载结果页资源",
- imgs: pageResultImg,
- callback: (progress) => {
- // console.log("进度：", progress);
- },
- }).then((res) => {
- console.log("done!");
- });
- },
- });
- gsap.to(".question-tree", {
- duration: 3,
- transformOrigin: "0% 70%",
- rotation: "-10deg",
- repeat: -1,
- yoyo: true,
- ease: "none",
- });
+ gsap.from(".question-box", { duration: 0.5, scale: 0.4, autoAlpha: 0 });
});
+
+const getClass = (item) => {
+ if (isChecked.value) {
+ if (checkedOption.value.aid == item.aid) {
+ return item.result ? "correct" : "incorrect";
+ }
+ }
+};
@@ -156,12 +119,15 @@ onMounted(() => {
-
-
- 已获得¥{{ money }}元现金红包
-
-
- 兑换码：{{ code }}
-
- 兑换流程：前往微信搜索【平安理财服务号】公众号发送“清凉一夏”获取兑奖链接，输入兑换码兑换奖品。
-
- 暂无中奖记录
+
-
恭喜您抽中
+ ¥{{ money }}元
+ 奖励抽到手，快乐马上有
+
+ 兑奖码：
+
+ {{ code }}
+
兑换流程：前往微信搜索【平安理财服务号】公众号发送“五一快乐”获取兑奖链接，输入兑换码兑换奖品
+ （兑换码可在主页面“我的奖品” 再次查看并复制）
+
-
-
-
-
+ 第{{ questionList[currentId].id }}题
-
-
+
-
-
+
+
+
+
+ 第{{ currentId + 1 }}题
+ {{ currentId+1 }}/{{ questionList.length }}
+
+
-
- {
{{ item }}
-
+
-
-
-
-
-
+
+
- {{ item.aid }}.{{ a }}
+
+
+
+
+
-
+
{{ item.aid }}.{{ item.text }}
+
+
+
+
-
-
-
-
-
-
-
+
+
-
\ No newline at end of file
+
+.qp-result {
+ @include pos(100%, 1624px, 0px, 0px);
+ overflow: hidden;
+ @include flexCen();
+ background-color: rgba($color: #000000, $alpha: 0.6);
+ visibility: hidden;
+ .qp-result-box {
+ @include box(569px, 399px);
+ @include bg_pos("qa/result-box.png");
+ position: relative;
+ .qp-result-icon {
+ @include pos(112px, 112px, 222px, -28px);
+ @include bg_pos("qa/correct-icon.png");
+ }
+ .is-incorrect {
+ @include bg_pos("qa/incorrect-icon.png");
+ }
+ .qp-result-text {
+ @include pos(569px, 50px, 0px, 104px);
+ @include flexCen();
+ font-size: 35px;
+ color: #ffffff;
+ }
+ .qp-tips-text {
+ @include pos(569px, 220px, 0px, 150px);
+ padding: 20px;
+ font-size: 25px;
+ line-height: 35px;
+ text-align: justify;
+ color: #b3640d;
+ }
+ }
+
+ .next-btn {
+ @include box(190px, 65px);
+ border: 1px solid #ffffff;
+ @include flexCen();
+ font-size: 35px;
+ color: #ffffff;
+ border-radius: 31px;
+ margin-top: 50px;
+ }
+}
+
diff --git a/src/components/Result.vue b/src/components/Result.vue
index f1bde85..8f1fe36 100644
--- a/src/components/Result.vue
+++ b/src/components/Result.vue
@@ -2,7 +2,7 @@
import { gsap } from "gsap";
import { debounceTap } from "@/plugins";
import { useMainStore } from "@/store";
-import { posterCreate } from "@/plugins";
+
import { Toast } from "vant";
import QRCode from "qrcode";
import { reactive } from "vue";
@@ -10,97 +10,85 @@ import { reactive } from "vue";
// 页面配置初始化
const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore();
-const posterId = ref(Math.floor(Math.random() * 3) + 1); //海报背景id：1～3
+const posterId = ref(userStore.posterId); //海报背景id：1～11
-const posterTextSrc = new URL(`../assets/images/result/poster-text.png`, import.meta.url).href
+console.log("海报id", posterId.value);
-const posterImgList = reactive([
- new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
- new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
- new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
-]);
+const posterImgSrc = new URL(
+ `../assets/images/result/poster.jpg`,
+ import.meta.url
+).href;
// 生成二维码逻辑
const eqcodePic = ref();
-onMounted(() => {
- console.log("posterId:", posterId.value);
- let eqCodeUrl = import.meta.env.VITE_URL;
- QRCode.toDataURL(eqCodeUrl)
- .then((url) => {
- eqcodePic.value = url;
- // console.log("eq", eqcodePic.value);
- })
- .catch((err) => {
- console.error(err);
- });
+onMounted(async () => {
+ // 执行任务队列
+ await executeTasks();
+});
- gsap.from(".result-bg", {
+// 这是新加的函数封装异步任务
+const executeTasks = async () => {
+ console.log("二维码生成中...");
+
+ // 生成二维码
+ const eqCodeUrl = import.meta.env.VITE_URL;
+ eqcodePic.value = await QRCode.toDataURL(eqCodeUrl);
+
+ console.log("生成海报中...");
+
+ if (posterImgSrc && eqcodePic.value) {
+ posterCreate({ width: 750, height: 2502 }, [
+ { name: "bg", src: posterImgSrc, pos: { w: 750, h: 2502, x: 0, y: 0 } },
+ {
+ name: "eqcode",
+ src: eqcodePic.value,
+ pos: { w: 187, h: 187, x: 527, y: 2227 },
+ },
+ ]);
+ } else {
+ Toast.fail({ message: "生成失败" });
+ emit("ResultPage", { action: "hide" });
+ }
+};
+
+const showPoster = () => {
+ gsap.to(".posterPop", {
+ duration: 0.3,
+ autoAlpha: 1,
+ });
+ gsap.from(".cls-btn-box", {
duration: 0.7,
scale: 1.2,
autoAlpha: 0,
});
- gsap.from(".result-title", {
+ gsap.from(".poster-box", {
duration: 0.7,
- y: 20,
+ scale: 0.6,
autoAlpha: 0,
- delay:0.3,
});
- gsap.from(".r-text", {
+ gsap.from(".save-tips", {
duration: 0.7,
- scale: .5,
+ scale: 0.7,
autoAlpha: 0,
- delay:0.5,
+ delay: 0.3,
});
- gsap.from(".create-poster", {
+ gsap.from(".go-draw", {
duration: 0.7,
- y: 20,
+ y: -30,
autoAlpha: 0,
- delay:1,
- onComplete:()=>{
- gsap.to('.create-poster',{duration:1,scale:'0.9',repeat:-1,yoyo:true,ease:'bounce.in'})
-
- }
+ delay: 0.5,
});
-});
-
-// 生成海报逻辑
-const createPoster = (event) => {
- let e = event.target.parentElement;
- debounceTap(e, () => {
- // 海报生成
- posterCreate(
- { width: 750, height: 1334 }, //海报尺寸
- // 海报素材，按顺序依次渲染
- [
- // 背景
- {
- name: "bg",
- src: posterImgList[posterId.value - 1],
- pos: { w: 750, h: 1334, x: 0, y: 0 },
- },
- // 二维码
- {
- name: "eqcode",
- src: eqcodePic.value,
- pos: { w: 194, h: 195, x: 502, y: 1090 },
- },
- // 文案
- {
- name: "text",
- src: posterTextSrc,
- pos: { w: 347, h: 155, x: 81, y: 1113 },
- },
- ]
- );
-
- // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
+ gsap.from(".go-share", {
+ duration: 0.7,
+ y: -30,
+ autoAlpha: 0,
+ delay: 0.7,
});
};
// 去抽奖
const goDraw = (event) => {
- let e = event.target.parentElement;
- console.log('e',e);
+ let e = event.target;
debounceTap(e, () => {
if (userStore.hasDraw) {
emit("ResultPage", { action: "showDraw" });
@@ -114,13 +102,32 @@ const goDraw = (event) => {
const hidePop = (event) => {
let e = event.target;
debounceTap(e, () => {
- gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
+ gsap.to(".posterPop", {
+ duration: 0.5,
+ autoAlpha: 0,
+ onComplete: () => {
+ emit("ResultPage", { action: "hide" });
+ },
+ });
+ });
+};
+
+const hide = (event) => {
+ let e = event.target;
+ debounceTap(e, () => {
+ gsap.to(".posterPop", {
+ duration: 0.5,
+ autoAlpha: 0,
+ onComplete: () => {
+ emit("ResultPage", { action: "showQuestion" });
+ },
+ });
});
};
// 展示分享
const goShare = (event) => {
- let e = event.target.parentElement;
+ let e = event.target;
debounceTap(e, () => {
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
});
@@ -130,39 +137,95 @@ const goShare = (event) => {
const hideShare = () => {
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
};
+
+// 海报生成
+const posterCreate = (option, imageArr) => {
+ let posterUrl = "";
+ const { width, height } = option;
+ Toast.loading({
+ message: "海报生成中",
+ duration: 0,
+ forbidClick: true,
+ });
+
+ let mycanvas = document.createElement("canvas"); // 创建一个canvas画布元素
+ let ctx = mycanvas.getContext("2d");
+ mycanvas.style.width = `${width}px`; //设置canvas的宽
+ mycanvas.style.height = `${height}px`; //设置canvas的高
+ mycanvas.width = width;
+ mycanvas.height = height;
+ //Promise对象加载资源
+ let loader_p = [];
+ imageArr.map((item) => {
+ const _p = new Promise((resolve) => {
+ const img = new Image();
+ img.crossOrigin = "Anonymous";
+ img.onload = () => {
+ resolve(img);
+ };
+ img.src = item.src;
+ });
+ loader_p.push(_p);
+ });
+ //Promise的.all方法，当所有预加载的图像加载好的回调函数
+ Promise.all(loader_p)
+ .then((imgList) => {
+ console.log("imgList", imgList);
+
+ // 图片素材遍历绘制
+ imgList.map((item, index) => {
+ ctx.drawImage(
+ item,
+ imageArr[index].pos.x,
+ imageArr[index].pos.y,
+ imageArr[index].pos.w,
+ imageArr[index].pos.h
+ ); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
+ });
+
+ //海报绘制完 ，转成图片对象
+ return mycanvas.toDataURL("image/jpeg", 1);
+ })
+ .then((baseURL) => {
+ //返回的图片地址，就是最后海报的地址，可以放在DOM显示
+ let posterImg = document.querySelector("#posterSrc");
+ posterImg.src = baseURL;
+ setTimeout(() => {
+ // 展示海报
+ showPoster();
+ Toast.success({ message: "生成成功！" });
+ }, 500);
+ })
+ .catch((error) => {
+ console.error("生成海报失败");
+ gsap.to(".posterPop", {
+ duration: 0.5,
+ autoAlpha: 0,
+ onComplete: () => {
+ emit("ResultPage", { action: "hide" });
+ },
+ });
+ Toast.fail({ message: "生成失败，请重试！" });
+ });
+
+ // return posterUrl
+};
-
+
+
+
-
-
{{ QaResult ? "答对啦" : "答错啦" }}
+ {{ questionList[currentId].tips[0] }}
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/src/data/imgList.js b/src/data/imgList.js
index b0d29cd..dafb00d 100644
--- a/src/data/imgList.js
+++ b/src/data/imgList.js
@@ -1,69 +1,25 @@
-const load = ["load/icon.png", "load/bg.jpg"];
+const load = [
+ "load/icon.png",
-const page = [
- "index/logo.png",
- "index/rule-btn.png",
- "index/sub-title.png",
- "index/cloud-2.png",
- "index/prize-btn.png",
- "index/cloud-1.png",
"index/bg.jpg",
- "index/start-btn.png",
- "index/tree-1.png",
- "index/title.png",
- "index/island.png",
-
- "rule/cls-btn.png",
- "rule/arrow.png",
- "rule/rule-box.png",
- "rule/icon.png",
+ "music-on.png",
+ "share.jpg",
];
-// 问题页面
-const pageQA = [
- "qa/bubble-1.png",
- "qa/analysis-icon.png",
- "qa/create-btn.png",
- "qa/next-btn.png",
- "qa/incorrect.png",
- "qa/correct.png",
- "qa/question-box.png",
- "qa/tree.png",
- "qa/bg.jpg",
-]
+const page = [
-// 结果页面
-const pageResult = [
- "prize/copy-btn2.png",
- "prize/copy-btn.png",
- "prize/cls-btn.png",
- "prize/got-btn.png",
- "prize/no-get-btn.png",
- "prize/draw-text.png",
"prize/tips.png",
- "prize/no-prize.png",
- "prize/lucky-bag.png",
"prize/star.png",
+ "prize/draw-text.png",
"prize/light.png",
- "prize/prize-box.png",
- "prize/myPrize-box.png",
+ "prize/myPrize-box2.png",
+ "prize/no-prize.png",
+ "prize/cls-btn.png",
+ "prize/copy-btn.png",
"prize/draw-box.png",
- "result/cls-btn.png",
- "result/poster-text.png",
- "result/go-draw-btn.png",
- "result/go-share-btn.png",
- "result/text-1.png",
- "result/title.png",
- "result/create-btn.png",
- "result/text-3.png",
- "result/text-2.png",
- "result/r-bg-2.jpg",
- "result/r-bg-1.jpg",
- "result/r-bg-3.jpg",
- // "result/poster-1.jpg",
- // "result/poster-3.jpg",
- // "result/poster-2.jpg",
-]
+
+
+];
// 处理为vite引入图片格式
function imgCreate(url, img) {
@@ -71,15 +27,8 @@ function imgCreate(url, img) {
img.push(i);
}
-
-
-
-
const loadImg = [];
const pageImg = [];
-const pageQAImg = [];
-const pageResultImg = [];
-
load.forEach((element) => {
imgCreate(element, loadImg);
@@ -89,12 +38,4 @@ page.forEach((element) => {
imgCreate(element, pageImg);
});
-pageQA.forEach((element) => {
- imgCreate(element, pageQAImg);
-});
-
-pageResult.forEach((element) => {
- imgCreate(element, pageResultImg);
-});
-
-export { loadImg, pageImg,pageQAImg,pageResultImg };
+export { loadImg, pageImg };
diff --git a/src/data/index.js b/src/data/index.js
index a0f0fda..07c2f38 100644
--- a/src/data/index.js
+++ b/src/data/index.js
@@ -1,72 +1,78 @@
export const data = [
- {
- id: 1,
- type: '1',
- question: [
- '低波稳健类产品通常是指配置大比例低波资产，不投资权益类资产的产品 \n，受债市波动影响较小且不受股市影响。低波稳健类产品的产品风险评级是哪个？',
- ],
- answer: [
- {
- aid: 'A',
- text: [
- 'R1低风险或R2中低风险',
- ],
- result:'correct',
- },
- {
- aid: 'B',
- text: [
- 'R4及以上高风险',
- ],
- result:'incorrect',
- },
- ],
- analysis: ['解析：选择B。虽然市场热点可能带来诱人的收益，但理财的基本原则是风险管理。通过将投资分散在不同的理财产品和市场，可以降低单一投资的风险，争取资产增长的机会。']
- },
- {
- id: 2,
- question: [
- '经常热衷于购买现金管理类产品的投资者，如果希望进行“稳健的理财进阶”，需要牺牲一定流动性换取收益空间，以下哪类产品可以帮助实现：',
- ],
- answer: [
- {
- aid: 'A',
- text: [
- '最短持有期类理财产品',
- ],
- result:'correct',
- },
- {
- aid: 'B',
- text: [
- '混合类理财产品',
- ],
- result:'incorrect',
- },
- ],
- analysis: ['解析：选择B。现金类产品具有高流动性的特征，更适合日常流动资金。但在长期限选择中，固收理财拥有较大的投资范围和空间，运用策略提供稳健体验，有效平衡风险，力争增厚收益机会，闲钱再进阶。因此不同的资金用途记得匹配不同产品噢。']
- },
- {
- id: 3,
- question: [
- '低波稳健类理财通常会通过估值、资产、策略三方面实现“低波稳健”的特征，以下哪个描述是正确的：',
- ],
- answer: [
- {
- aid: 'A',
- text: [
- '精选存单存款等低波资产的理财产品更稳健',
- ],
- result:'correct',
- },
- {
- aid: 'B',
- text: [
- '混合估值法不能在市场震荡时帮助净值更平稳',
- ],
- result:'incorrect',
- },
- ],
- analysis: ['解析：选择A。最短持有期理财产品拥有较为灵活的申赎机制，在持有时间超过最短持有的时间要求后，随时可发起赎回，闲置时力争收益机会，用钱时满足你的流动性需求。']
- },
-]
+ {
+ id: 1,
+ question: [
+ "赛龙舟时，鼓手用节奏统一行动，舵手把控方向，划手齐心发力，三者缺一不可。这体现了哪种投资模式？",
+ ],
+ answer: [
+ {
+ aid: "A",
+ text: "平台化高效协作投资模式，集体智慧",
+ result: 1,
+ },
+ {
+ aid: "B",
+ text: "明星基金经理的单打独斗，个人英雄主义",
+ result: 0,
+ },
+ ],
+ tips: [`平安理财采取平台化、模块化的投资模式，通过团队作战能更好协调更优势、更广泛的资源，并最终为客户创造可持续的投资收益，截至 2025 年 5月15日已累计为 1700 万名客户创造1092亿元投资收益。`],
+ },
+ {
+ id: 2,
+ question: [
+ "赛龙舟经常会遇上河道弯曲或河流湍急，常常出现翻船风险，为了确保顺利抵达终点，在拐弯及面对急流时所使用的技巧与投资中的哪种情况相符？",
+ ],
+ answer: [
+ {
+ aid: "A",
+ text: "追求单车变摩托，冒险前进，重仓搏一把",
+ result: 0,
+ },
+ {
+ aid: "B",
+ text: "坚持绝对收益目标，严格风险控制，稳健为先",
+ result: 1,
+ },
+ ],
+ tips: [`稳健是资产长期增值的关键，平安理财坚持以绝对收益为目标，截至2025年5月15日，旗下定开/封闭式多个产品线实现历史到期兑付100%正收益（如启航系列、稳健精选系列、启元系列、新安鑫系列、卓越成长系列、卓越稳健系列等）。`],
+ },
+ {
+ id: 3,
+ question: [
+ "赛龙舟中，队伍需在发令枪响的瞬间同步起桨，冲刺阶段更需高频划桨。这与下列哪种投资策略相符？",
+ ],
+ answer: [
+ {
+ aid: "A",
+ text: "精准把握市场机会，适当追求超额收益",
+ result: 1,
+ },
+ {
+ aid: "B",
+ text: "一旦配置长期不动，顺其自然随遇而安",
+ result: 0,
+ },
+ ],
+ tips: [`稳健为先的前提下，平安理财通过多资产、多策略的能力优势，在低利率时代中力争为投资者创造相对不错的超额收益。如鑫享全球动量策略日开180天持有1号A今年以来年`],
+ },
+ {
+ id: 4,
+ question: [
+ "赛龙舟通常500米，但有一种达到了30公里，号称龙舟马拉松。如果说500米赛龙舟对应的是投资中短期主义，那么龙舟马拉松对应的是哪种情怀？",
+ ],
+ answer: [
+ {
+ aid: "A",
+ text: "投机主义，左右摇摆或见风使舵",
+ result: 0,
+ },
+ {
+ aid: "B",
+ text: "长期主义精神，坚持长期稳健经营理念",
+ result: 1,
+ },
+ ],
+ tips: [`行稳方能致远。长期主义是以长远视角进行决策和行动的价值观，其核心在于追求可持续的价值增长，而非短期利益的最大化。这是平安理财自成立以来一直坚持的投资和经营理念。`],
+ },
+];
diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue
index 42b85a2..e3a9ef9 100644
--- a/src/page/Home/App.vue
+++ b/src/page/Home/App.vue
@@ -1,12 +1,25 @@
-
-
-
-
-
@@ -84,49 +88,49 @@ onMounted(() => {
- ![]()
+
+
-
-
+
\ No newline at end of file
+
diff --git a/src/components/Rule.vue b/src/components/Rule.vue
index c0f8f5a..b86e7f8 100644
--- a/src/components/Rule.vue
+++ b/src/components/Rule.vue
@@ -17,11 +17,11 @@ let scroll = ref()
onMounted(() => {
let wrapper = document.querySelector('.wrapper')
- scroll.value = new BScroll(wrapper)
+ scroll.value = new BScroll(wrapper)
gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
- gsap.to(".rule-arrow", { duration: 2.5, y: 10,repeat:-1,yoyo:true });
+ gsap.to(".rule-arrow", { duration: 2.5, y: 10, repeat: -1, yoyo: true });
});
@@ -32,49 +32,53 @@ onMounted(() => {
+
-
+
-
+ ![]()
+
+
*长按保存海报
-
-
@@ -171,135 +234,79 @@ const hideShare = () => {
-
-
-
-
+
*长按保存海报
+
+
+
点击右上角分享给你的好友！
-
-
- 活动时间：
- 2024年8月14日8:30-2024年8月16日17:30
- 活动奖励：微信红包
+
+
+ 活动时间：2025年4月27日——4月30日
+ 活动奖励：微信红包
+
+
+ 活动攻略：
+
+ 1、【打卡理想假期，五一好礼等你】活动共设计5道题目，首页进入后左右滑动选择您想打卡的地点，点击进行答题，答对后即可获取专属打卡海报，并参与抽奖；答错时将跳转回选择打卡地点的页面，重新答题。
+
+ 2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。
+
+
+
+ 领奖说明：
+
+ 1、中奖后在中奖页面复制兑换码，前往[平安理财服务号]消息框输入“五一快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品]
+ 内查看兑换码；
+
+ 2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；
+ 3、中奖人请在活动结束前进行兑换，逾期视为弃权。
+
+
+ 其他：
+ 活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
+ 说明：平安理财有权对活动规则进行解释
+
+
+
活动说明：
+
+ （1）本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，并保留追究其法律责任的权利：
+
+
+ (2)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式、不正当手段等参与本活动;同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等）单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的；
+
+
+ (3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为；
+
+
+ (4)平安理财保留调整、暂停和终止本活动的权利，并经公告后生效；
+
+
+ (5)用户参与本活动，即视为理解并同意本活动细则。在法律法规及监管规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
+
+
-
- 活动攻略：
-
- 1、进入活动参加【好“理”在手，邂逅清凉一夏】答题，共设计3道题目，全部选择完毕后即可参与抽奖活动；
-
- 2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。
-
-
- 领奖说明：
-
- 1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“清凉一夏”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
-
- 2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；
- 3、中奖人请在活动结束前进行兑换，逾期视为弃权。
-
-
-
- 其他说明：
-
- 1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
-
-
- (1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
-
-
- (2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
-
-
- (3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
-
-
- 2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
-
-
- 3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
-
-
-
+
@@ -19,27 +32,16 @@ import MyPrize from "@/components/MyPrize";
import Draw from "@/components/Draw";
import Result from "@/components/Result";
import Rule from "@/components/Rule";
-import {
- createBGM,
- getQueryString,
- screenOrientation,
- isAndriod,
- fontAdpat,
-} from "@/plugins";
+import { getQueryString, screenOrientation, fontAdpat } from "@/plugins";
import { authorize, getUserInfo } from "@/api";
import { Toast } from "vant";
import { useMainStore } from "@/store";
const userStore = useMainStore();
-const showLoad = ref(false);
-const showIndex = ref(false);
-const showQuestion = ref(false);
-const showMyPrize = ref(false);
-const showDraw = ref(false);
-const showRule = ref(false);
-const showResult = ref(false);
+const musicUrl = new URL(`@/assets/media/bgm.mp3`, import.meta.url).href;
+const showLoad = ref(false);
const loadFn = (item) => {
if (item.action == "hide") {
showLoad.value = false;
@@ -47,6 +49,7 @@ const loadFn = (item) => {
}
};
+const showIndex = ref(false);
const indexFn = (item) => {
if (item.action == "hide") {
showIndex.value = false;
@@ -63,6 +66,7 @@ const indexFn = (item) => {
}
};
+const showQuestion = ref(false);
const questionFn = (item) => {
if (item.action == "hide") {
showQuestion.value = false;
@@ -74,27 +78,35 @@ const questionFn = (item) => {
}
};
+const showMyPrize = ref(false);
const myPrizeFn = (item) => {
if (item.action == "hide") {
showMyPrize.value = false;
}
};
+const posterId = ref(1);
+
+const showDraw = ref(false);
const drawFn = (item) => {
if (item.action == "hide") {
showDraw.value = false;
}
};
+const showResult = ref(true);
const resultFn = (item) => {
if (item.action == "hide") {
showResult.value = false;
+ console.log("hide", showResult.value);
}
+
if (item.action == "showDraw") {
showDraw.value = true;
}
};
+const showRule = ref(false);
const ruleFn = (item) => {
if (item.action == "hide") {
showRule.value = false;
@@ -115,27 +127,10 @@ onMounted(() => {
if (res.code == 0) {
console.log("我的信息：", res.data);
userStore.updateToken(res.data);
- createBGM();
// 开始加载组件
showLoad.value = true;
-
- // ios自动播放音乐
- document.addEventListener("DOMContentLoaded", function () {
- function audioAutoPlay() {
- var audio = document.getElementById("musicBtn");
- audio.play();
- document.addEventListener(
- "WeixinJSBridgeReady",
- function () {
- WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
- audio.play();
- });
- },
- false
- );
- }
- audioAutoPlay();
- });
+ iosMusic(); //自动播放音乐
+ gsap.set(".music_icon", { autoAlpha: 1 });
return;
} else {
authorize({ scopeType: 1, redirectUri: url }).then((res) => {
@@ -210,30 +205,94 @@ onMounted(() => {
});
}
} else {
- showLoad.value = true;
- createBGM();
+ // showLoad.value = true;
+ iosMusic(); //自动播放音乐
+ gsap.set(".music_icon", { autoAlpha: 1 });
}
});
-const playMusic = () => {
- var audioEle = document.getElementById("audio");
- audioEle.play();
+// ios端音乐自动播放
+const iosMusic = () => {
+ // ios自动播放音乐
+ document.addEventListener("DOMContentLoaded", function () {
+ function audioAutoPlay() {
+ var audio = document.getElementById("bg-music");
+ audio.play();
+ document.addEventListener(
+ "WeixinJSBridgeReady",
+ function () {
+ WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
+ audio.play();
+ });
+ },
+ false
+ );
+ }
+ audioAutoPlay();
+ });
+
+ musicBtnAni.fromTo(
+ ".music_icon",
+ { rotation: "0" },
+ { rotation: "+=360", repeat: -1, duration: 7, ease: "none" }
+ );
+ musicBtnAni.play();
+};
+
+// 音乐播放
+const musicBtnAni = gsap.timeline();
+const playStatu = ref(true);
+const musicPlay = () => {
+ let audio = document.getElementById("bg-music");
+ if (playStatu.value == true) {
+ musicBtnAni.pause();
+ audio.pause();
+ playStatu.value = false;
+ console.log("暂停");
+ } else {
+ musicBtnAni.play();
+ audio.play();
+ playStatu.value = true;
+ console.log("播放");
+ }
+};
+
+const firstClick = () => {
+ let audio = document.getElementById("bg-music");
+
+ musicBtnAni.play();
+ audio.play();
+ playStatu.value = true;
+ console.log("播放");
};
-
+
+
+
+