You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

196 lines
4.4 KiB

  1. <script setup>
  2. import { ref, onMounted } from "vue";
  3. import {
  4. getAnnouncementAPI,
  5. qsArpAamClickAPI,
  6. getMarketAndCodeAPI,
  7. } from "../api/AIxiaocaishen";
  8. const marketList = ref({
  9. usa: "美股",
  10. cn: "A股",
  11. hk: "港股",
  12. sg: "新加坡股",
  13. my: "马股",
  14. th: "泰股",
  15. vi: "越南股",
  16. can: "加拿大股",
  17. });
  18. const codeList = ref([
  19. { market: "美股", code: [] },
  20. { market: "A股", code: [] },
  21. { market: "港股", code: [] },
  22. { market: "新加坡股", code: [] },
  23. { market: "马股", code: [] },
  24. { market: "泰股", code: [] },
  25. { market: "越南股", code: [] },
  26. { market: "加拿大股", code: [] },
  27. ]);
  28. const getMarketAndCode = async () => {
  29. const result = await getMarketAndCodeAPI();
  30. // console.log(result.data, "MarketAndCode");
  31. for (let i = 0; i < result.data.length; i++) {
  32. const item = result.data[i];
  33. const market = marketList.value[item.market];
  34. const codeLists = item.code.split(",");
  35. // console.log(codeLists, "codeLists",market,'market');
  36. const targetMarket = codeList.value.find((item) => item.market == market);
  37. if (targetMarket) {
  38. targetMarket.code = codeLists;
  39. // console.log(targetMarket, "targetMarket");
  40. } else {
  41. console.log("未找到对应的市场");
  42. }
  43. }
  44. };
  45. const announcementVideo = ref({});
  46. const getAnnouncement = async () => {
  47. const result = await getAnnouncementAPI();
  48. // console.log(result.data, "result.data");
  49. announcementVideo.value.url = result.data[0].url;
  50. announcementVideo.value.img = result.data[0].img;
  51. const click = await qsArpAamClickAPI({
  52. token: localStorage.getItem("localToken"),
  53. id: result.data[0].id,
  54. });
  55. // console.log(click);
  56. // console.log(announcementVideo.value, "announcementVideo");
  57. };
  58. const handleVideoPlay = () => {
  59. console.log("视频开始播放");
  60. // 可以在这里添加播放统计逻辑
  61. };
  62. // 定义自定义事件
  63. const emit = defineEmits(["updateMessage", "ensureAIchat"]);
  64. const clickCode = (code) => {
  65. console.log(code);
  66. emit("updateMessage", code);
  67. emit("ensureAIchat");
  68. };
  69. onMounted(() => {
  70. getAnnouncement();
  71. getMarketAndCode();
  72. });
  73. </script>
  74. <template>
  75. <div class="main-wrapper">
  76. <div class="video-container">
  77. <video
  78. ref="videoPlayer"
  79. :poster="announcementVideo.img"
  80. :src="announcementVideo.url"
  81. controls
  82. class="video-player"
  83. @play="handleVideoPlay"
  84. >
  85. Your browser does not support the video tag.
  86. </video>
  87. </div>
  88. <!-- 一段文字水平居中宽度为500px -->
  89. <div class="announcement">
  90. <p class="announcementItem">各位AI小财神的用户,大家好!</p>
  91. <p class="announcementItem">
  92. 试运行期间,用户可在AI小财神中查看全市场数据,每个市场可查看20只股票.
  93. </p>
  94. <p class="announcementItem">以下为各个市场可以查看的股票</p>
  95. <!-- <p class="announcementItem">历软件云版静态市场一致!</p>
  96. <p class="announcementItem">特此公告!</p> -->
  97. <div
  98. v-for="(item, index) in codeList"
  99. :key="index"
  100. class="announcementItem"
  101. >
  102. <div class="announcementItem">
  103. {{ item.market }}
  104. <span
  105. class="codeItem"
  106. v-for="(code, index) in item.code"
  107. :key="index"
  108. >
  109. <span v-if="index != 0" class="codeItem"> </span>
  110. <span @click="clickCode(code)" class="code">
  111. {{ code }}
  112. </span>
  113. </span>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </template>
  119. <style scoped>
  120. .main-wrapper {
  121. height: 100%;
  122. display: flex;
  123. flex-direction: column;
  124. overflow-y: auto;
  125. }
  126. .video-container {
  127. max-width: 800px;
  128. /* 从 800px 改为百分比 */
  129. width: 90%;
  130. margin: 20px auto;
  131. border-radius: 8px;
  132. overflow: hidden;
  133. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  134. flex-shrink: 0;
  135. }
  136. .video-player {
  137. width: 100%;
  138. aspect-ratio: 16/9;
  139. background-color: #000;
  140. object-fit: contain;
  141. /* 从 cover 改为 contain */
  142. }
  143. /* 添加移动端适配 */
  144. @media (max-width: 768px) {
  145. .video-container {
  146. margin: 10px auto;
  147. border-radius: 4px;
  148. }
  149. .announcement {
  150. max-width: 90%;
  151. font-size: 14px;
  152. }
  153. }
  154. .announcement {
  155. margin: 20px 10%;
  156. font-size: 20px;
  157. font-weight: bold;
  158. }
  159. .announcementItem {
  160. margin-bottom: 10px;
  161. color: white;
  162. }
  163. p {
  164. color: white;
  165. }
  166. .codeItem {
  167. color: #4591e7;
  168. }
  169. .code {
  170. cursor: pointer;
  171. }
  172. </style>