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">
            {{i18('设备编号')}}：{{ item.deviceId }}
          </view>
          <view class="item-status">
            <uni-tag type="success" :text="i18('激活中')" v-if="item.status === 1"></uni-tag>
            <uni-tag type="error" :text="i18('已停用')" v-if="item.status === 2"></uni-tag>
            <uni-tag type="success" :text="i18('已执行')"  v-if="item.status === 3"></uni-tag>
          </view>
        </view>
        <view class="item-body">
          <view style="font-size: 12px">
            {{i18('预约类型')}}:
            <uni-tag type="primary" :text="i18('单次')" v-if="item.planType === 1"></uni-tag>
            <uni-tag type="warning" :text="i18('重复')" v-if="item.planType === 2"></uni-tag>
          </view>
          <view style="font-size: 12px; margin: 5px 0">
            {{i18('创建时间')}}：{{ item.createTime }}
          </view>
          <view v-if="item.planType === 2">
            <view class="item-time">{{i18('重复日期')}}：{{ formatRepeatDays(item.repeatDays) }}</view>
            <view class="item-time">{{i18('重复时间')}}：{{ item.repeatTime }}</view>
          </view>
          <view v-if="item.planType === 1">
            <view class="item-time">{{i18('执行时间')}}：{{ 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';
import i18 from '@/utils/i18.js'
export default {
  data() {
    return {
      startText:"more",
      search:{
        pageNum:1,
        pageSize:6,
        reasonable:true,
      },
      contentText: {
        contentdown: i18('点击查看更多'),
        contentrefresh: i18('加载中'),
        contentnomore: i18('没有更多'),
      },
      chargeList: [],
    };
  },
  onShow(){
    uni.setNavigationBarTitle({
      title: this.$t('page.planrecord')
    })
  },
  methods: {
    i18(text){
      return i18(text)
    },
    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);
		  console.log('this.chargeList>>'+JSON.stringify( this.chargeList))
        }
      })
    },
    formatRepeatDays(daysStr) {
      const days = daysStr.split(',');
      const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      const result = [];
      for (const day of days) {
        const weekday = weekdays[parseInt(day) - 1];
        result.push(i18(weekday));
      }
      return result.join(' ');
    },
  },
  created() {
    this.planRecord();
  },
};
</script>
<style>
	.container {
		/* background: rgb(249, 252, 255); */
		background-image: url('../../../static/images/new/starts/bg1.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		inset: 0;
		position: absolute;
	}

	.list-item {
		margin: 0vw;
		color: aliceblue;
	}

	.item {
		box-shadow: 0px 5px 27px 0px rgba(195, 195, 195, 0.4);
		border-radius: 4px;
		/* background: #FFFFFF; */
		background: linear-gradient(#565656, #050609);
		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: aliceblue;
		font-size: 12px;
		margin-bottom: 4px
	}
</style>