goods-evaluateDetail.ts 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import PageContainerBehavior from "../../../../core/behavior/page-container.behavior";
  2. import { getOrderGoodsEvaluationMethod } from "../../request";
  3. import { EvaluateModel } from "../../model/evaluate.model";
  4. function parseMediaType(url: string): "image" | "video" {
  5. if (!url) return "image";
  6. const match = /[?&]type=(image|video)\b/i.exec(url);
  7. if (match) return match[1].toLowerCase() as "image" | "video";
  8. const lower = url.toLowerCase();
  9. if (/\.(mp4|mov|avi|rmvb|flv|mkv|webm)$/.test(lower)) return "video";
  10. return "image";
  11. }
  12. Page({
  13. behaviors: [PageContainerBehavior],
  14. data: {
  15. orderId: "",
  16. product: {} as { id: number; name: string; image: string; description?: string },
  17. evaluateInfo: {} as EvaluateModel,
  18. // 只读展示用
  19. score: 0,
  20. rateColor: "#F7BA2A",
  21. content: "",
  22. mediaList: [] as { path: string; type: "image" | "video" }[],
  23. videoFullscreen: false,
  24. showMediaCarousel: false,
  25. mediaCarouselCurrent: 0,
  26. },
  27. async onLoad(options: Record<string, string>) {
  28. console.log(options, "options===");
  29. let product: { id: number; name: string; image: string; description?: string } = {
  30. id: 0,
  31. name: "",
  32. image: "",
  33. description: "",
  34. };
  35. console.log(options, "options.goodsInfo===");
  36. if (options.goodsInfo) {
  37. try {
  38. const goods = JSON.parse(decodeURIComponent(options.goodsInfo));
  39. console.log(goods, "goods===");
  40. product = {
  41. id: goods.id || 0,
  42. name: goods.name || "",
  43. image: goods.image || "",
  44. description: goods.description || "",
  45. };
  46. } catch (_) { }
  47. }
  48. this.setData({ product });
  49. console.log(product, "product===");
  50. if (product.id) {
  51. try {
  52. const res = await getOrderGoodsEvaluationMethod("1", product.id);
  53. if (!res && !res.data) return;
  54. console.log(res, "res===");
  55. const mediaList: { path: string; type: "image" | "video" }[] = [];
  56. if (Array.isArray(res.data.imageVideos)) {
  57. res.data.imageVideos.forEach((url: string) => {
  58. if (!url) return;
  59. mediaList.push({
  60. path: url,
  61. type: parseMediaType(url),
  62. });
  63. });
  64. }
  65. this.setData({
  66. evaluateInfo: res.data,
  67. score: Number(res.data.complianceScore ?? 0),
  68. content: res.data.depict || "",
  69. mediaList,
  70. });
  71. } catch (error: any) {
  72. console.log(error, "error===");
  73. wx.showToast({
  74. title: error?.errMsg || "获取评价详情失败",
  75. icon: "none",
  76. });
  77. }
  78. }
  79. },
  80. onBack() {
  81. wx.navigateBack();
  82. },
  83. // 图片预览(九宫格内点击)
  84. onPreviewImage(e: WechatMiniprogram.TouchEvent) {
  85. const url = e.currentTarget.dataset.url as string;
  86. const urls = this.data.mediaList
  87. .filter((m) => m.type === "image")
  88. .map((m) => m.path);
  89. if (url && urls.length) {
  90. wx.previewImage({ current: url, urls });
  91. }
  92. },
  93. // 视频预览(九宫格内点击,先全屏)
  94. onPreviewVideo(e: WechatMiniprogram.TouchEvent) {
  95. const index = e.currentTarget.dataset.index as number;
  96. const ctx = wx.createVideoContext("goods-detail-video-" + index, this);
  97. ctx.requestFullScreen({});
  98. },
  99. /** 点击图片/视频:原生全屏预览(类似 test 页) */
  100. onPreviewMedia(e: WechatMiniprogram.TouchEvent) {
  101. const index = e.currentTarget.dataset.index as number;
  102. const { mediaList } = this.data;
  103. if (index < 0 || index >= mediaList.length) return;
  104. const sources = mediaList.map((m) => ({
  105. url: m.path,
  106. type: m.type as "image" | "video",
  107. }));
  108. const previewMedia = (wx as any).previewMedia as
  109. | ((option: { sources: { url: string; type: "image" | "video" }[]; current: number }) => void)
  110. | undefined;
  111. if (typeof previewMedia === "function") {
  112. previewMedia({ sources, current: index });
  113. return;
  114. }
  115. // 低版本兜底:图片用 previewImage,视频用 requestFullScreen
  116. const current = mediaList[index];
  117. if (current.type === "image") {
  118. const urls = mediaList.filter((m) => m.type === "image").map((m) => m.path);
  119. wx.previewImage({ current: current.path, urls });
  120. return;
  121. }
  122. const ctx = wx.createVideoContext("goods-detail-video-" + index, this);
  123. ctx.requestFullScreen({});
  124. },
  125. /** 轮播切换:暂停所有视频,若当前项是视频则播放 */
  126. onMediaCarouselChange(e: WechatMiniprogram.SwiperChange) {
  127. const current = e.detail?.current ?? 0;
  128. this.setData({ mediaCarouselCurrent: current });
  129. this._pauseAllCarouselVideos();
  130. this._playVideoAtCarouselIndex(current);
  131. },
  132. onCloseMediaCarousel() {
  133. this._pauseAllCarouselVideos();
  134. this.setData({ showMediaCarousel: false });
  135. },
  136. _playVideoAtCarouselIndex(index: number) {
  137. const list = this.data.mediaList;
  138. if (index < 0 || index >= list.length || list[index].type !== "video") return;
  139. const ctx = wx.createVideoContext("preview-video-" + index, this);
  140. ctx.play();
  141. },
  142. _pauseAllCarouselVideos() {
  143. this.data.mediaList.forEach((item, i) => {
  144. if (item.type === "video") {
  145. const ctx = wx.createVideoContext("preview-video-" + i, this);
  146. ctx.pause();
  147. }
  148. });
  149. },
  150. onVideoFullscreenChange(e: WechatMiniprogram.VideoFullScreenChange) {
  151. const fullScreen = !!(e.detail && e.detail.fullScreen);
  152. this.setData({ videoFullscreen: fullScreen });
  153. },
  154. });