index.vue 5.65 KB
<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-20 10:44:15
 * @FilePath: /meihuaApp/src/pages/index/index.vue
 * @Description: 首页
-->
<template>
  <view class="index-page">
    <scroll-view :style="scrollStyle" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="onScroll" @scrolltoupper="onScrollToUpper" @scrolltolower="onScrollToLower">
      <view class="index-cover">
        <image :style="coverStyle" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/banner1@2x.png" />
        <view @tap="onArrowDown" class="cover-arrow">
          <IconFont color="#f9f9f9" size="30" name="joy-smile" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
        </view>
      </view>
      <view class="index-title">热门推荐</view>
      <view class="index-list">
        <room-card v-for="(item, index) in 5" :key="index" />
      </view>
    </scroll-view>
    <view style="height: 6rem;"></view>
    <nav-bar activated="index" />
  </view>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { ref } from 'vue';
import roomCard from '@/components/roomCard.vue'
// import arrowDownImg from '@/assets/images/arrow-down.png'
import navBar from '@/components/navBar.vue'
import { useDidShow } from '@tarojs/taro'
// TAG: 模拟onShow事件
useDidShow(() => {
  // console.warn(AUTHOR)
})

// const goTo = (id) => {
//   Taro.navigateTo({
//     url: '../activityDetail/index?id=' + id
//   })
// }

// 分享功能
wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})
</script>

<script>
import "./index.less";
// import { activityHomeAPI } from '@/api/Host/index'
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';

export default {
  name: "indexPage",
  mixins: [mixin.init],
  onReady() {
    if (!Taro.canIUse("getUpdateManager")) {
      Taro.showModal({
        title: "提示",
        content: "当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试",
        showCancel: false,
      });
      return;
    }

    // https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html
    const updateManager = Taro.getUpdateManager();

    updateManager.onCheckForUpdate((res) => {
      // 请求完新版本信息的回调
      if (res.hasUpdate) {
        updateManager.onUpdateReady(function () {
          Taro.showModal({
            title: "更新提示",
            content: "新版本已经准备好,是否重启应用?",
            success: function (res) {
              if (res.confirm) {
                // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate();
              }
            },
          });
        });

        updateManager.onUpdateFailed(function () {
          // 新版本下载失败
          Taro.showModal({
            title: "更新提示",
            content: "新版本已上线,请删除当前小程序,重新搜索打开",
          });
        });
      }
    });
  },
  async onShow () {
  },
  onHide () { // 离开当前页面
  },
  computed: {
    scrollStyle() {
      return {
        height: this.indexCoverHeight + 'px',
      };
    },
    coverStyle () {
      return {
        width: '100%',
        height: this.indexCoverHeight + 'px',
      };
    },
  },
  mounted () {
    // 设置首页封面高度
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    setTimeout(async () => {
      const navHeight = await $('#navbar-page').height();
      this.indexCoverHeight = windowHeight - navHeight;
    }, 500);
  },
  data() {
    return {
      indexCoverHeight: 0,
      scrollTop: 0,
    };
  },
  methods: {
    onScroll(event) {
    },
    async onScrollToUpper (event) {
      this.scrollTop = 0; // 重置scrollTop,让按钮能再往下滚动
    },
    onScrollToLower () {
      console.warn('onScrollToLower');
    },
    async onArrowDown () {
      Taro.pageScrollTo({
        scrollTop: this.indexCoverHeight, // 滚动到的位置
        duration: 300 // 滚动动画的时长
      });
      this.scrollTop = this.indexCoverHeight; // 调整滚动控件高度
    }
  },
  onPageScroll ({ scrollTop }) {
  },
  onShareAppMessage(options) {
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
      title: "梅花岛订房小程序",    // 默认是小程序的名称(可以写slogan等)
      path: 'pages/index/index',    // 默认是当前页面,必须是以‘/'开头的完整路径
      imageUrl: '',   //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
          //
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败,其中 detail message 为详细失败信息
        }
      },
      complete: function () {
        // 转发结束之后的回调(转发成不成功都会执行)
      }
    }
    // 来自页面内的按钮的转发
    // if (options.from == 'button') {
    //   var eData = options.target.dataset;
    //   // 此处可以修改 shareObj 中的内容
    //   shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
    // }
    // 返回shareObj
    return shareObj;
  }
};
</script>