techtron/pages/weitiandi/device/planrecord.vue

<template>
  <view class="container">
    <view class="list-item">
      <view class="item" v-for="item in chargeList" :key="item.id">
        <view class="item-header">
          <view class="item-title">
            设备编号：{{ item.deviceId }}
          </view>
          <view class="item-status">
            <uni-tag type="success" text="激活中" v-if="item.status === 1"></uni-tag>
            <uni-tag type="error" text="已停用" v-if="item.status === 2"></uni-tag>
          </view>
        </view>
        <view class="item-body">
          <view style="font-size: 12px">
            预约类型：
            <uni-tag type="primary" text="单次" v-if="item.planType === 1"></uni-tag>
            <uni-tag type="warning" text="重复" v-if="item.planType === 2"></uni-tag>
          </view>
          <view style="font-size: 12px; margin: 5px 0">
            创建时间：{{ item.createTime }}
          </view>
          <view v-if="item.planType === 2">
            <view class="item-time">重复日期：{{ formatRepeatDays(item.repeatDays) }}</view>
            <view class="item-time">重复时间：{{ item.repeatTime }}</view>
          </view>
          <view v-if="item.planType === 1">
            <view class="item-time">执行时间：{{ item.runTime }}</view>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more @clickLoadMore="getMore" :content-text="contentText" :status="startText"></uni-load-more>
  </view>
</template>

<script>
import { plan } from '@/api/device/plan.js';

export default {
  data() {
    return {
      startText:"more",
      search:{
        pageNum:1,
        pageSize:6,
        reasonable:true,
      },
      contentText: {
        contentdown: '点击查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      },
      chargeList: [],
    };
  },
  methods: {
    getMore(){
      this.search.pageNum++;
      this.planRecord();
    },
    async planRecord() {
      plan(this.search).then(res=>{
        if(res.data.length == 0){
          this.$modal.showToast("没有更多数据了");
          this.startText = "no-more"
        }else{
          this.startText = "more"
          this.chargeList =  this.chargeList.concat(res.data);
        }
      })
    },
    formatRepeatDays(daysStr) {
      const days = daysStr.split(',');
      const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      const result = [];
      for (const day of days) {
        const weekday = weekdays[parseInt(day) - 1];
        result.push(weekday);
      }
      return result.join(' ');
    },
  },
  created() {
    this.planRecord();
  },
};
</script>
<style>
	.container {
		background: rgb(249, 252, 255);
		inset: 0;
		position: absolute;
	}

	.list-item {
		margin: 0vw;
	}

	.item {
		box-shadow: 0px 5px 27px 0px rgba(195, 195, 195, 0.4);
		border-radius: 4px;
		background: #FFFFFF;
		margin: 4vw;
		padding: 4vw;
	}

	.item-title {
		display: inline-block;
		float: left;
	}

	.item-status {
		display: inline-block;
		float: right;
	}

	.item-header {
		border-bottom: 1px solid lightgray;
		height: 4vh;
		font-size: 12px;
	}

	.item-body {
		padding-top: 4vw;
		line-height: 3vh;
	}

	.item-time {
		color: #545454;
		font-size: 12px;
		margin-bottom: 4px
	}
</style>