与牧同行-小程序用户端
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.

160 lines
3.2 KiB

  1. import http from '../../../utils/api';
  2. const baseUrl = require('../../../utils/baseUrl');
  3. Page({
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. baseUrl: baseUrl,
  9. detailInfo: {},
  10. id: null,
  11. cardAnimation: {} // 卡片动画数据
  12. },
  13. /**
  14. * 生命周期函数--监听页面加载
  15. */
  16. onLoad(options) {
  17. if (options.id) {
  18. this.setData({ id: options.id });
  19. this.getCarouselDetail(options.id);
  20. this.initAnimation();
  21. } else {
  22. wx.showToast({
  23. title: '参数错误',
  24. icon: 'none'
  25. });
  26. }
  27. },
  28. /**
  29. * 初始化卡片动画
  30. */
  31. initAnimation() {
  32. const animation = wx.createAnimation({
  33. duration: 600,
  34. timingFunction: 'ease-out',
  35. delay: 100
  36. });
  37. animation.translateY(0).opacity(1).step();
  38. this.setData({
  39. cardAnimation: animation.export()
  40. });
  41. },
  42. /**
  43. * 获取轮播详情
  44. */
  45. getCarouselDetail(id) {
  46. wx.showLoading({ title: '加载中...', mask: true });
  47. http.carouselDetail({
  48. data: { id: id },
  49. success: (res) => {
  50. wx.hideLoading();
  51. console.log('轮播详情:', res);
  52. if (res && res.code === 200 && res.data) {
  53. this.setData({
  54. detailInfo: res.data
  55. });
  56. // 设置导航栏颜色为主题色
  57. wx.setNavigationBarColor({
  58. frontColor: '#ffffff',
  59. backgroundColor: res.data.textColor?.replace('#', '') || '2E7D32'
  60. });
  61. wx.setNavigationBarTitle({
  62. title: res.data.title || '轮播详情'
  63. });
  64. } else {
  65. wx.showToast({
  66. title: res?.msg || '数据加载失败',
  67. icon: 'none'
  68. });
  69. }
  70. },
  71. fail: (err) => {
  72. wx.hideLoading();
  73. console.error('请求失败:', err);
  74. wx.showToast({
  75. title: '网络错误',
  76. icon: 'none'
  77. });
  78. }
  79. });
  80. },
  81. /**
  82. * 颜色调整函数用于渐变效果
  83. */
  84. adjustColor(hex, percent) {
  85. if (!hex) return '#4CAF50';
  86. // 简单实现:如果传入颜色,返回稍浅的版本
  87. // 这里为了简化,直接返回原色稍微变浅,实际项目中可使用颜色处理库
  88. return hex;
  89. },
  90. /**
  91. * 图片加载错误处理
  92. */
  93. imageLoadError(e) {
  94. console.warn('图片加载失败', e);
  95. },
  96. /**
  97. * 返回上一页
  98. */
  99. goBack() {
  100. wx.navigateBack({
  101. delta: 1
  102. });
  103. },
  104. /**
  105. * 生命周期函数--监听页面初次渲染完成
  106. */
  107. onReady() {},
  108. /**
  109. * 生命周期函数--监听页面显示
  110. */
  111. onShow() {},
  112. /**
  113. * 生命周期函数--监听页面隐藏
  114. */
  115. onHide() {},
  116. /**
  117. * 生命周期函数--监听页面卸载
  118. */
  119. onUnload() {},
  120. /**
  121. * 页面相关事件处理函数--监听用户下拉动作
  122. */
  123. onPullDownRefresh() {},
  124. /**
  125. * 页面上拉触底事件的处理函数
  126. */
  127. onReachBottom() {},
  128. /**
  129. * 用户点击右上角分享
  130. */
  131. onShareAppMessage() {
  132. const { title, imageUrl } = this.data.detailInfo;
  133. return {
  134. title: title || '轮播详情',
  135. imageUrl: this.data.baseUrl + (imageUrl || ''),
  136. path: `/pages/carousel/detail/detail?id=${this.data.id}`
  137. };
  138. }
  139. });