微信/支付宝小程序实现弹窗动画缩放到某个位置

鹤鸣的日常

已于 2024-10-10 18:01:24 修改

阅读量204

点赞数 1

文章标签：小程序 vue.js javascript 前端微信小程序

于 2024-10-10 17:32:57 首次发布

本文链接：https://blog.csdn.net/XL984507092/article/details/142827553

版权

HTML

  <view wx:if="{{advertiseFlag}}" class="advertise-wrapper" style="background-color:{{transitionData.statusBtn == 'playing'?'rgba(255,255,255,0)':''}}" bindtap="jumpFn">
    <view class="advertise-box" style="width:{{transitionData.width}};height:{{transitionData.height}};left:{{transitionData.left}};top:{{transitionData.top}};opacity:{{transitionData.opacity}};animation:{{transitionData.animation}}">
      <image data-status="{{transitionData.statusBtn}}" catchtap="handleJumpValue" src="{{ advertiseMsg.url || 'https://yizhen-mamapai-dev.oss-cn-zhangjiakou.aliyuncs.com/certification/2024-06-13/b1791b525e974c0aae8a0c82a8410a9b.png'}}">
      </image>
      <view class="jump-box" catchtap="jumpFn" data-status="{{transitionData.statusBtn}}">
        跳过{{defaultTime?defaultTime:''}}
      </view>
    </view>
  </view>

CSS

.advertise-wrapper {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.advertise-box {
  width: 580rpx;
  height: 980rpx;
  position: absolute;
  transition: all 1s linear;
}

@keyframes shrinkAndMoveToPosition {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(0.5);
    opacity: 0;
  }
}

.advertise-box image {
  width: 100%;
  height: 100%;
}

.jump-box {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  padding: 4rpx 16rpx;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  color: #fff;
  font-size: 12px;
}

动画函数

options的参数

from : 起始值比如：0

to : 结束值比如：100

totalMS ：变化总时间比如： 1000

duration : 每多少秒变化的次数比如： 1

onmove ：开始移动的回调函数

onend ：移动结束的回调函数

let timer;

function createAnimation(option) {
  // 起始值、结束值、变化总时间
  var {
    from,
    to,
    totalMS,
    duration,
    onmove,
    onend
  } = option;
  totalMS = totalMS || 1000;
  duration = duration || 10; // 每多少时间变化一次
  var times = Math.floor(totalMS / duration); // 变化的次数
  var dis = (to - from) / times; // 每次变化的量
  var curTimes = 0;

  // 每次变化的函数
  var timer = setInterval(() => {
    from += dis;
    curTimes++;

    // 变化完成，这里保证onmove 在 onend以前执行
    if (curTimes >= times) {
      from = to;
      onmove && onmove(from);
      onend && onend();
      clearInterval(timer);
      return;
    }

    onmove && onmove(from);
  }, duration);
}

获取dom

我们点击跳转的时候,首先需要获取到当前点击 dom 的 status，如果当前的状态为 playing 直接 return,否则开始获取当前的 dom 信息，找到当前点击的 dom 和所要跳转到的 dom 所在位置，然后找到所要跳转的位置后，把当前点击的dom和所要去的dom传给开始的动画函数

  handleGetDom(type) {
    if (!type || type <= 0) return
    let _this = this
    wx.createSelectorQuery().select('.advertise-box').boundingClientRect()
      .selectAll('.grid-container .item').boundingClientRect().exec((ret) => {
        const [popRect, endDoms] = ret;

        const targetIndex = endDoms.findIndex((item) => item.id == type);
        if (targetIndex === -1) return;

        const endDom = endDoms[targetIndex];
        _this.startTransition(popRect, endDom);
      })
  },

开始动画过渡

根据获取 dom 和所要去的 dom 的位置,在拿到要结束 dom 之前先把 status 状态设置为 playing ，这样后我们就可以设置动画效果然后把对应的参数传给动画函数 createAnimation 。

  // 开始动画过渡
  startTransition(popRect, endDom) {
    const _this = this;
    // 设置点击状态为playing
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'playing'
      }
    });

    const centerX = endDom.left
    const centerY = endDom.top

    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        animation: "shrinkAndMoveToPosition 2s forwards"
      }
    });

    createAnimation({
      from: popRect.left,
      to: centerX,
      totalMS: 1000,
      onmove: (n) => {
        _this.updateTransitionData(endDom, centerX, centerY);
      },
      onend: () => {
        _this.endTransition(endDom);
      }
    });
  },

动画的更新函数

这个地方需要注意的是在支付宝中 left、top 不用需要加 px,width和height自行决定用不用除以2

  // 更新动画过程中的数据
  updateTransitionData(endDom, centerX, centerY) {
    this.setData({
      transitionData: {
        ...this.data.transitionData,
        width: `${endDom.width / 2}px`,
        height: `${endDom.height / 2}px`,
        left: `${centerX}px`,
        top: `${centerY}px`
      }
    });
  },

动画的结束函数

在动画结束的时候我们需要把 status 更改为 end , opacity 设置为 0，清除定时器就可以了

 // 结束动画并处理跳转
  endTransition(endDom) {
    const _this = this;
    wx.showTabBar();
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'end',
        opacity: 0
      },
      advertiseFlag: false
    });

    clearInterval(timer);

    const currItem = {
      ...endDom.dataset.item,
      richTextType: 2,
      appletAdvertisementId: endDom.dataset.item.type
    }
    _this.handleJumpTypePage(currItem);
  },

动画所有相关的事件函数

  // 跳转类型
  handleJumpValue(e) {
    let {
      relationHomeSwitch,
      relationHomeType,
      id
    } = this.data.advertisingPopup
    this.handleClickDataSave(id)
    if (relationHomeType && relationHomeSwitch == 1) {
      let status = e.currentTarget.dataset.status
      // 判断是否有点击过  statusBtn
      if (status == 'playing') return;

      this.handleGetDom(relationHomeType)
    } else if (relationHomeSwitch == 2) {

      let data = {
        ...this.data.advertisingPopup,
        richTextType: 3,
      }
      this.handleJumpTypePage(data)

    } else {
      wx.showTabBar();
      this.setData({
        advertiseFlag: false
      });
      clearInterval(timer);
    }
  },

  // 获取dom
  handleGetDom(type) {
    if (!type || type <= 0) return
    let _this = this
    wx.createSelectorQuery().select('.advertise-box').boundingClientRect()
      .selectAll('.grid-container .item').boundingClientRect().exec((ret) => {
        const [popRect, endDoms] = ret;

        const targetIndex = endDoms.findIndex((item) => item.id == type);
        if (targetIndex === -1) return;

        const endDom = endDoms[targetIndex];
        _this.startTransition(popRect, endDom);
      })
  },

  // 开始动画过渡
  startTransition(popRect, endDom) {
    const _this = this;
    // 设置点击状态为playing
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'playing'
      }
    });

    const centerX = endDom.left
    const centerY = endDom.top

    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        animation: "shrinkAndMoveToPosition 2s forwards"
      }
    });

    createAnimation({
      from: popRect.left,
      to: centerX,
      totalMS: 1000,
      onmove: (n) => {
        _this.updateTransitionData(endDom, centerX, centerY);
      },
      onend: () => {
        _this.endTransition(endDom);
      }
    });
  },

  // 更新动画过程中的数据
  updateTransitionData(endDom, centerX, centerY) {
    this.setData({
      transitionData: {
        ...this.data.transitionData,
        width: `${endDom.width / 2}px`,
        height: `${endDom.height / 2}px`,
        left: `${centerX}px`,
        top: `${centerY}px`
      }
    });
  },

  // 结束动画并处理跳转
  endTransition(endDom) {
    const _this = this;
    wx.showTabBar();
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'end',
        opacity: 0
      },
      advertiseFlag: false
    });

    clearInterval(timer);

    const currItem = {
      ...endDom.dataset.item,
      richTextType: 2,
      appletAdvertisementId: endDom.dataset.item.type
    }
    _this.handleJumpTypePage(currItem);
  },

  // 点击
  handleHomeConfigClick(id) {

    let params = {
      id: id
    }
    api.post('/main-service/home-config/click', params).then((res) => {
      if (res.code == 1) {
        console.log(res, 'res');
      }
    }).catch((err) => {
      console.log(err, 'err');
    })
  },

  jumpFn() {
    wx.showTabBar();
    this.setData({
      advertiseFlag: false
    });
    clearInterval(timer);
  },
  // 动画end

完整实现代码

// pages/prize/prize.js
const api = require('../../common/api')
const App = getApp()
const getAuthCode = require('../../common/authen.js').getAuthCode

let timer;
let count = 0;

function createAnimation(option) {
  // 起始值、结束值、变化总时间
  var {
    from,
    to,
    totalMS,
    duration,
    onmove,
    onend
  } = option;
  totalMS = totalMS || 1000;
  duration = duration || 10; // 没多少时间变化一次
  var times = Math.floor(totalMS / duration); // 变化的次数
  var dis = (to - from) / times; // 每次变化的量
  var curTimes = 0;

  // 每次变化的函数
  var timer = setInterval(() => {
    from += dis;
    curTimes++;

    // 变化完成，这里保证onmove 在 onend以前执行
    if (curTimes >= times) {
      from = to;
      onmove && onmove(from);
      onend && onend();
      clearInterval(timer);
      return;
    }

    onmove && onmove(from);
  }, duration);
}

Page({
  data: {
    transitionData: {
      statusBtn: '', // 是否已经点击过
      left: '',
      top: '',
      width: '580rpx',
      height: '980rpx',
      opacity: 1
    },
    marketingId: "", // 营销id
    styleConfigData: {},
    imgSrc: [],
    paramStr: '',
    indicatorDots: false,
    autoplay: true,
    vertical: false,
    interval: 2000,
    circular: true,
    duration: 1500,
    defaultTime: 4, //默认时间
    advertiseFlag: false,
    advertiseMsg: {},
    activityData: {
      sourceType: ''
    },
    styleHomeImage: {},
    activeIndex: "", // 切换下标
    interval: 3000,
    advertisingRotation: [], // 广告位轮播
    newHomepage: [],
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.getImage()
    // this.getStyleConfig()
    this.getAuth()
    this.getHomeConfigPage()
    this.handleGetAxiosData()
    this.getAdvertisement()
  },

  onShow() {
    let token = wx.getStorageSync('token')
    if (App.globalData.activityData.sourceType == 'activity' && App.globalData.inviteCustomerNum < 2 && token) {
      this.handleActivity()
    }
  },

  handleActivity() {
    const params = App.globalData.activityData
    api.post('/main-service/customer-invite-record', params).then((res) => {
      if (res.code === 1) {
        console.log('邀请处理成功')
        App.globalData.inviteCustomerNum = 2
      }
      if (res.code == 1010002) {
        console.log('邀请处理失败')
        App.globalData.inviteCustomerNum = 1
      }
    })
  },

  // 获取首页头部配置
  getHomeConfigPage() {
    api.get("/main-service/home-config/list").then((res) => {
      if (res.code == 1) {
        let originalHomepage = res.data && res.data.sort((a, b) => {
          return a.type - b.type
        }) || []
        // 处理数据，添加额外属性用于渲染
        const processedHomepage = originalHomepage.map(item => {
          return {
            ...item,
            shouldDisplay: this.shouldDisplayItem(item),
            className: this.getClassByType(item.type),
            imageMode: this.getImageMode(item.type),
            showMenu: item.type >= 5,
            defaultImage: this.getDefaultImage(item.type)
          };
        });

        this.setData({
          newHomepage: processedHomepage
        })
      }
    }).catch((err) => {
      console.log(err, 'err');
    })
  },

  // 获取页面样式配置
  getStyleConfig() {
    api.get('/main-service/activity_style_config').then((res) => {
      if (res.code === 1) {
        const {
          data
        } = res
        this.setData({
          styleConfigData: {
            ...data,
            topImg: res.data.imgUrl.split(",")[0],
            bottomImg: res.data.imgUrl.split(",")[1],
          }
        })
      }
    })
  },

  //数据
  handleGetAxiosData() {
    let params = {
      type: 39
    }
    api.get(`/main-service/sys/info`, params).then((res) => {
      console.log(res, 'res')
      if (res.code == 1) {
        this.setData({
          styleHomeImage: res.data.remark ? JSON.parse(res.data.remark) : {},
        })
      }
    })
  },

  getImage() {
    api.get('/main-service/home-page/advertising').then(res => {
      this.setData({
        imgSrc: res.data.weChatBackgroundUrl
      })
    })
  },

  // 获取 广告位轮播图
  getAdvertisement() {
    const params = {
      position: 1
    }
    api.get('/main-service/advertisement', params).then((res) => {
      if (res.code == 1) {
        this.setData({
          advertisingRotation: res.data
        })
      }
    })
  },

  // 改变图片
  changeImg(e) {
    this.activeIndex = e.detail.current
    this.setData({
      activeIndex: e.detail.current
    })
  },

  getAuth() {
    getAuthCode().then(res => {
      let authCode = res.authCode;
      let params = {
        code: authCode
      };
      this.getAdvertiseMsg(params);
    });
  },

  //获取弹窗广告信息
  getAdvertiseMsg(params) {
    api.get("/main-service/applet-advertisement/v2", params).then(res => {
      if (res.code == 1) {
        this.setData({
          advertiseFlag: res.data.status == 1 ? true : false,
          advertiseMsg: res.data,
          advertisingPopup: {
            ...res.data
          }
        });
        if (res.data.id) {
          wx.hideTabBar();
        }
        if (res.data.status == 1) {
          timer = setInterval(() => {
            if (this.data.defaultTime > 0) {
              let time = (this.data.defaultTime -= 1);
              this.setData({
                defaultTime: time
              });
              return;
            }
            if (!this.data.defaultTime) {
              clearInterval(timer);
              this.isLike();
            }
          }, 1000);
        }
      }
    });
  },

  //是否感兴趣
  isLike() {
    let id = this.data.advertiseMsg.id;
    if (id) {
      api.get(`/main-service/applet-advertisement/${id}`).then(res => {
        if (res.code == 1) {
          console.log("感兴趣");
        }
      });
    }
  },

  // 跳转详情
  handleJumpDetails(item) {
    let {
      id,
      jumpType
    } = item.currentTarget.dataset.value
    if (jumpType == 13) {
      wx.navigateTo({
        url: `/addressManagement/pages/richText/richText?jumpId=${id}`
      });
    }
  },

  // 页面跳转
  handleJumpToPage(e) {
    let {
      item
    } = e.currentTarget.dataset

    this.handleHomeConfigClick(item.id)
    wx.hideLoading()
    let data = {
      ...item,
      richTextType: 2,
      appletAdvertisementId: item.type
    }
    wx.hideLoading()
    this.handleJumpTypePage(data)
  },

  // 根据跳转类型处理页面跳转
  handleJumpTypePage(item) {
    const jumpType = Number(item.jumpType);
    this.jumpFn()
    const routes = {
      1: () => this.handlePageTo(),
      2: () => wx.navigateTo({
        url: "/addressManagement/pages/invitingWithCourtesy/invitingWithCourtesy"
      }),
      3: () => wx.navigateTo({
        url: `/addressManagement/pages/invitationGiftDetail/invitationGiftDetail?id=${item.jumpValue}`
      }),
      4: () => wx.switchTab({
        url: '/pages/activity/activity'
      }),
      5: () => wx.navigateTo({
        url: `/pages/activityDetail/activityDetail?activityId=${item.jumpValue}`
      }),
      6: () => wx.navigateTo({
        url: `/addressManagement/pages/richText/richText?jumpId=${item.appletAdvertisementId}&type=${item.richTextType}`
      }),
      // 7: () => wx.navigateTo({ url: `/pages/content-detail/content-detail?id=${item.jumpValue}&type=1` }),
      // 8: () => wx.navigateTo({ url: `/pages/content-detail/content-detail?id=${item.jumpValue}&type=3` }),
      9: () => wx.navigateTo({
        url: `/addressManagement/pages/richText/richText?jumpId=${item.appletAdvertisementId}&status=btn&type=${item.richTextType}`
      }),
      10: () => wx.navigateTo({
        url: `/addressManagement/pages/marketing/marketing?id=${item.type}&type=home`
      }),
    };

    if (routes[jumpType]) {
      routes[jumpType]();
    }
  },

  // 点击数据
  handleClickDataSave(id) {
    let params = {
      appletAdvertisementCustomerRecordId: id
    }
    api.get('/main-service/applet-advertisement/save-click-data', params).then((res) => {
      if (res.code == 1) {
        console.log(res, 'res');
      }
    }).catch((err) => {
      console.log(err, 'err');
    })
  },

  // 跳转类型
  handleJumpValue(e) {
    let {
      relationHomeSwitch,
      relationHomeType,
      id
    } = this.data.advertisingPopup
    this.handleClickDataSave(id)
    if (relationHomeType && relationHomeSwitch == 1) {
      let status = e.currentTarget.dataset.status
      // 判断是否有点击过  statusBtn
      if (status == 'playing') return;

      this.handleGetDom(relationHomeType)
    } else if (relationHomeSwitch == 2) {

      let data = {
        ...this.data.advertisingPopup,
        richTextType: 3,
      }
      this.handleJumpTypePage(data)

    } else {
      wx.showTabBar();
      this.setData({
        advertiseFlag: false
      });
      clearInterval(timer);
    }
  },

  // 获取dom
  handleGetDom(type) {
    if (!type || type <= 0) return
    let _this = this
    wx.createSelectorQuery().select('.advertise-box').boundingClientRect()
      .selectAll('.grid-container .item').boundingClientRect().exec((ret) => {
        const [popRect, endDoms] = ret;

        const targetIndex = endDoms.findIndex((item) => item.id == type);
        if (targetIndex === -1) return;

        const endDom = endDoms[targetIndex];
        _this.startTransition(popRect, endDom);
      })
  },

  // 开始动画过渡
  startTransition(popRect, endDom) {
    const _this = this;
    // 设置点击状态为playing
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'playing'
      }
    });

    const centerX = endDom.left
    const centerY = endDom.top

    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        animation: "shrinkAndMoveToPosition 2s forwards"
      }
    });

    createAnimation({
      from: popRect.left,
      to: centerX,
      totalMS: 1000,
      onmove: (n) => {
        _this.updateTransitionData(endDom, centerX, centerY);
      },
      onend: () => {
        _this.endTransition(endDom);
      }
    });
  },

  // 更新动画过程中的数据
  updateTransitionData(endDom, centerX, centerY) {
    this.setData({
      transitionData: {
        ...this.data.transitionData,
        width: `${endDom.width / 2}px`,
        height: `${endDom.height / 2}px`,
        left: `${centerX}px`,
        top: `${centerY}px`
      }
    });
  },

  // 结束动画并处理跳转
  endTransition(endDom) {
    const _this = this;
    wx.showTabBar();
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'end',
        opacity: 0
      },
      advertiseFlag: false
    });

    clearInterval(timer);

    const currItem = {
      ...endDom.dataset.item,
      richTextType: 2,
      appletAdvertisementId: endDom.dataset.item.type
    }
    _this.handleJumpTypePage(currItem);
  },

  // 点击
  handleHomeConfigClick(id) {

    let params = {
      id: id
    }
    api.post('/main-service/home-config/click', params).then((res) => {
      if (res.code == 1) {
        console.log(res, 'res');
      }
    }).catch((err) => {
      console.log(err, 'err');
    })
  },

  jumpFn() {
    wx.showTabBar();
    this.setData({
      advertiseFlag: false
    });
    clearInterval(timer);
  },
  // 动画end

  handlePageTo: function () {
    let that = this
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    this.checkAttestation()
    // that.getUserInfo()
  },

  // getUserInfo() {
  //   let that = this
  //   getAuthCode().then((res) => {
  //     const {
  //       authCode
  //     } = res
  //     let params = {
  //       loginType: 7,
  //       isRelatedPhoneNumber: 0,
  //       grantCode: authCode
  //     }
  //     api.post('/main-service/customer/login', params).then(({
  //       data
  //     }) => {
  //       const {
  //         isRelatedPhoneNumber,
  //         phoneNumber,
  //         token
  //       } = data
  //       if (isRelatedPhoneNumber == 0) {
  //         wx.hideLoading()
  //         wx.reLaunch({
  //           url: '/pages/login/login?sourceType=prize'
  //         });
  //         return
  //       }
  //       if (isRelatedPhoneNumber == 1) {
  //         wx.hideLoading()
  //         wx.setStorageSync('token', token)
  //         that.checkAttestation()
  //         return
  //       }
  //     })
  //   })
  // },

  checkAttestation() {
    api.get('/main-service/pregnant-certification/status').then(({
      data
    }) => {
      wx.hideLoading()
      const {
        isWhite,
        isSellOut,
        status,
        identityType,
        isSyncTaoBao
      } = data
      if (isWhite == 0) {
        if (status == 0) {
          // 跳转认证页面
          wx.navigateTo({
            url: '/pages/authentication/authentication'
          })
        }
        if (status == 1) {
          // 跳转认证中
          wx.navigateTo({
            url: '/pages/AddCustomer/AddCustomer'
          })
        }
        if (status == 2) {
          // 打开领取链接
          if (isSellOut) {
            // 礼品售罄
            // "identityType":  1:孕妈 2:宝妈
            if (!isSyncTaoBao) {
              wx.navigateTo({
                url: '/pages/sellOut/sellOut'
              })
              // if (identityType == 1) {
              //   wx.navigateTo({
              //     url: '/pages/sellOut/sellOut'
              //   })
              // }
              // if (identityType == 2) {
              //   wx.navigateTo({
              //     url: `/pages/certificationPassed/certificationPassed`
              //   })
              // }
            } else {
              // 修改之后的逻辑
              wx.navigateTo({
                url: `/pages/giftGuide/giftGuide?status=${status}`
              })
            }
          } else {
            wx.navigateTo({
              url: `/pages/giftGuide/giftGuide?status=${status}`
            })
            // if (identityType == 1) {
            //   wx.navigateTo({
            //     url: `/pages/giftGuide/giftGuide?status=${status}`
            //   })
            // }
            // if (identityType == 2) {
            //   wx.navigateTo({
            //     url: `/pages/certificationPassed/certificationPassed`
            //   })
            // }
          }
        }
        if (status == 3) {
          // 跳转拒绝页面
          wx.navigateTo({
            url: '/pages/certificationReject/certificationReject'
          })
        }
        if (status == 4) {
          // 跳转退回页面重新编辑
          wx.navigateTo({
            url: `/pages/authentication/authentication?status=${status}`
          })
        }
      }
      if (isWhite == 1) {
        if (isSellOut) {
          wx.navigateTo({
            url: '/pages/sellOut/sellOut'
          })
        } else {
          wx.navigateTo({
            url: `/pages/giftGuide/giftGuide?status=${status}`
          })
        }
      }
    })
  },

  handleClickBanner() {
    wx.navigateTo({
      url: '/addressManagement/pages/bannerDetail/bannerDetail',
    })
  },

  // 跳转会场
  handleToShare() {
    wx.navigateTo({
      url: `/addressManagement/pages/taobaoVenue/taobaoVenue?type=home`,
    });
  },

  // 开启分享
  onShareAppMessage() {},

  // 判断是否展示该 item
  shouldDisplayItem(item) {
    if (item.type >= 5 && item.showSwitch !== 1) return false;
    return !!item.url || item.type <= 4; // 当 type 小于等于 4 时总是展示
  },

  // 根据 type 返回对应的类名
  getClassByType(type) {
    switch (type) {
      case 1:
        return 'new-mom-gift';
      case 2:
        return 'xhs-volunteer';
      case 3:
        return 'douyin-volunteer';
      case 4:
        return 'invitation-gift';
      case 5:
        return 'advertising-space-one';
      case 6:
        return 'advertising-space-two';
      case 7:
        return 'advertising-space-three';
      default:
        return '';
    }
  },

  // 根据 type 返回图片的 mode
  getImageMode(type) {
    return type >= 5 ? 'widthFix' : 'scaleToFill';
  },

  // 获取默认图片 URL
  getDefaultImage(type) {
    return 'https://yizhen-mamapai-dev.oss-cn-zhangjiakou.aliyuncs.com/certification/2024-06-13/3cb773c6e3614c389619a24d55f868d4.png';
  },

  onPullDownRefresh() {
    Promise.all([this.getHomeConfigPage()]).then(res => {
      this.stopPullDownRefresh();
    });
  },

  onUnload() {
    this.jumpFn()
  },

})