vue 根据营业的开始时间和结束时间判断现在是否是营业状态

最新推荐文章于 2024-02-20 10:51:55 发布

菜@

最新推荐文章于 2024-02-20 10:51:55 发布

阅读量89

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45915072/article/details/135193538

版权

<template>
  <div>
    <view class="shangjia_con" v-for="item in merchantLists" @click="goShangJiaDetail()">
      <view class="shangjia_top">
        <view class="img_left">
          <image :src="item.img"></image>
        </view>
        <view class="info_center">
          <view class="title_center">{{item.name}}</view>
          <view class="yewu_center">主营业务: {{item.business}}</view>
          <view class="time_center">营业时间: {{item.startTime}}-{{item.endTime}}</view>
        </view>
        <view class="status_right">
          <view class="map_right">500米</view>
          <view class="yingye_right" v-if="isBusinessHours(item.startTime, item.endTime)">营业</view>
          <view class="yingye_right" v-else>非营业</view>
        </view>
      </view>
      <view class="shangjia_bottom">
        地址：{{item.address}}，
        <text>驾车到达预计需要30分钟</text>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      merchantLists: [
        {
          name: '商家1',
          business: '主营业务1',
          startTime: '09:00',
          endTime: '18:00',
          address: '商家1地址',
          img: '商家1图片URL'
        },
        {
          name: '商家2',
          business: '主营业务2',
          startTime: '10:00',
          endTime: '20:00',
          address: '商家2地址',
          img: '商家2图片URL'
        },
        // 其他商家信息
      ]
    };
  },
  methods: {
    isBusinessHours(startTime, endTime) {
      // 获取当前时间
      const now = new Date();

      // 将当前时间转换成字符串格式
      const nowStr = now.getHours() + ':' + now.getMinutes();

      // 将开始时间、结束时间和当前时间的字符串格式转换成时间戳
      const startTimestamp = Date.parse('1970-01-01 ' + startTime);
      const endTimestamp = Date.parse('1970-01-01 ' + endTime);
      const nowTimestamp = Date.parse('1970-01-01 ' + nowStr);

      // 判断当前时间的时间戳是否在开始时间和结束时间的时间戳范围内
      return nowTimestamp >= startTimestamp && nowTimestamp <= endTimestamp;
    },
    goShangJiaDetail() {
      // 点击商家详情操作
    }
  }
}
</script>