index.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. // pages/exhibition/index.js
  2. const { museumApi } = require('../../utils/api.js');
  3. const { navigateToWebview, urlImg } = require('../../utils/util.js');
  4. Page({
  5. /**
  6. * 页面的初始数据
  7. */
  8. data: {
  9. selectedType: 0, // 当前选中的类型:0-全部,1-室内,2-室外
  10. carouselList: [], // 轮播图数据
  11. carouselRenderList: [], // 组件使用的渲染列表
  12. carouselCurrent: 0,
  13. showCarouselIndicators: false,
  14. exhibitionList: [], // 展览列表数据
  15. loading: false, // 加载状态
  16. hasMore: true, // 是否还有更多数据
  17. currentPage: 1, // 当前页码
  18. pageSize: 10, // 每页数量
  19. urlImg: urlImg
  20. },
  21. /**
  22. * 生命周期函数--监听页面加载
  23. */
  24. onLoad(options) {
  25. this.initData();
  26. },
  27. /**
  28. * 生命周期函数--监听页面显示
  29. */
  30. onShow() {
  31. if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  32. this.getTabBar().setData({
  33. selected: 1,
  34. isShowTabar: true
  35. })
  36. }
  37. },
  38. /**
  39. * 页面相关事件处理函数--监听用户下拉动作
  40. */
  41. onPullDownRefresh() {
  42. this.initData();
  43. },
  44. /**
  45. * 页面上拉触底事件的处理函数
  46. */
  47. onReachBottom() {
  48. this.loadMore();
  49. },
  50. // 初始化数据
  51. async initData() {
  52. await this.getCarouselData();
  53. await this.getExhibitionList(false);
  54. wx.stopPullDownRefresh();
  55. },
  56. // 获取轮播图数据(type为0的前5条)
  57. async getCarouselData() {
  58. try {
  59. const response = await museumApi.getExhibitionList({
  60. pageNum: 1,
  61. pageSize: 5,
  62. type: 0,
  63. status: 1,
  64. recommend: 1
  65. });
  66. if (response && response.records) {
  67. const list = response.records || [];
  68. // 组件需要 image/url 两字段
  69. const renderList = list.map(item => ({
  70. image: urlImg + item.img,
  71. url: item.webSite || '',
  72. raw: item
  73. }));
  74. this.setData({
  75. carouselList: list,
  76. carouselRenderList: renderList
  77. });
  78. }
  79. } catch (error) {
  80. console.error('获取轮播图数据失败:', error);
  81. }
  82. },
  83. // 获取展览列表数据
  84. async getExhibitionList(isLoadMore = false) {
  85. if (this.data.loading) return;
  86. this.setData({ loading: true });
  87. try {
  88. const response = await museumApi.getExhibitionList({
  89. pageNum: isLoadMore ? this.data.currentPage : 1,
  90. pageSize: this.data.pageSize,
  91. type: this.data.selectedType
  92. });
  93. if (response && response.records) {
  94. let exhibitionList;
  95. if (isLoadMore) {
  96. // 加载更多,追加数据
  97. exhibitionList = [...this.data.exhibitionList, ...response.records];
  98. } else {
  99. // 重新加载,替换数据
  100. exhibitionList = response.records;
  101. this.setData({ currentPage: 1 });
  102. }
  103. this.setData({
  104. exhibitionList: exhibitionList,
  105. hasMore: response.records.length === this.data.pageSize
  106. });
  107. if (isLoadMore) {
  108. this.setData({
  109. currentPage: this.data.currentPage + 1
  110. });
  111. }
  112. }
  113. } catch (error) {
  114. console.error('获取展览列表失败:', error);
  115. wx.showToast({
  116. title: '加载失败',
  117. icon: 'none'
  118. });
  119. } finally {
  120. this.setData({ loading: false });
  121. }
  122. },
  123. // 选择分类
  124. async selectCategory(e) {
  125. const type = e.currentTarget.dataset.type;
  126. if (this.data.selectedType === type) return;
  127. this.setData({
  128. selectedType: type,
  129. currentPage: 1,
  130. hasMore: true
  131. });
  132. // 重新获取列表数据
  133. await this.getExhibitionList(false);
  134. },
  135. // 加载更多
  136. async loadMore() {
  137. if (!this.data.hasMore || this.data.loading) return;
  138. await this.getExhibitionList(true);
  139. },
  140. // 展览项点击事件
  141. onExhibitionTap(e) {
  142. const item = e.currentTarget.dataset.item;
  143. this.goToDetail(item.exhibitId);
  144. },
  145. // 线上观展点击事件
  146. onOnlineExhibitionTap(e) {
  147. // e.stopPropagation(); // 阻止事件冒泡
  148. const webSite = 'https://www.4dmodel.com/SuperTwoCustom/KLMYscene/?m=SG-alDn3FU4jQ8';
  149. if (webSite) {
  150. console.log('跳转到webSite:', webSite);
  151. navigateToWebview(webSite,'open');
  152. } else {
  153. // this.goToDetail(item.exhibitId);
  154. console.log('webSite为空');
  155. }
  156. },
  157. // 组件:指示器/滑动变更
  158. onCarouselChange(e) {
  159. const { current } = e.detail || {};
  160. this.setData({ carouselCurrent: current });
  161. },
  162. // 组件:当前项(无 url)点击
  163. onExhibitionTapFromCarousel(e) {
  164. const { item } = e.detail || {};
  165. const raw = item && item.raw;
  166. if (raw && raw.exhibitId) {
  167. this.goToDetail(raw.exhibitId);
  168. }
  169. },
  170. // 组件:线上观展点击
  171. onOnlineExhibitionTapFromCarousel(e) {
  172. const { url } = e.detail || {};
  173. if (url) {
  174. console.log('跳转到线上观展:', url);
  175. navigateToWebview(url, 'open');
  176. } else {
  177. console.log('webSite为空');
  178. }
  179. },
  180. // 跳转到详情页面
  181. goToDetail(id) {
  182. navigateToWebview(`/allDetailsShow?isFrom=weixin&id=${id}&type=exhibition`);
  183. },
  184. /**
  185. * 用户点击右上角分享
  186. */
  187. onShareAppMessage() {
  188. return {
  189. title: '克拉玛依博物馆 - 展览',
  190. path: '/pages/exhibition/index'
  191. };
  192. },
  193. /**
  194. * 用户点击右上角分享到朋友圈
  195. */
  196. onShareTimeline() {
  197. return {
  198. title: '克拉玛依博物馆 - 精彩展览等你来看',
  199. query: '',
  200. imageUrl: '' // 可以设置自定义分享图片
  201. };
  202. }
  203. });