uni_mattress/sleep/pages/log/iot/index.vue

<template>
  <view class="my-container">
    <cu-custom isBack="true" bgColor="#fff">
      <view slot="content" style="color: #FFFFFF">4G卡详情</view>
    </cu-custom>
    <view class="my-container" v-if="iotLinkFrom">
      <view class="cu-bar my-bg solid-bottom margin-top">
        <view class="action">
          <text class="cuIcon-title text-orange "></text> 卡片详情
        </view>
        <view class="action">
          <button class="cu-btn bg-green shadow" data-target="gridModal" @click="goPackagePage">购买套餐</button>
        </view>
      </view>
      <view class="cu-list menu card-menu margin-top myCard">
        <view class="cu-item">
          <view class="content">
            <text class="text-xl">{{ dtype }}IMEI</text>
          </view>
          <view class="action">
            <text class="text-lg">{{ imei }}</text>
          </view>
        </view>
        <view class="cu-item">
          <view class="content">
            <text class="text-xl">iccid</text>
          </view>
          <view class="action">
            <text class="text-lg">{{ iotLinkFrom.iccid }}</text>
          </view>
        </view>

        <view class="cu-item">
          <view class="content">
            <text>运营商</text>
          </view>
          <view class="action">
            <text class="text-lg">{{ formatterType(iotLinkFrom.operators) }}</text>
          </view>
        </view>

        <view class="cu-item">
          <view class="content">
            <text>卡状态</text>
          </view>
          <view class="action">
            <text class="cu-tag round bg-olive light">{{ iotLinkFrom.status }}</text>
          </view>
        </view>

<!--        <view class="cu-item">-->
<!--          <view class="content">-->
<!--            <text>激活时间</text>-->
<!--          </view>-->
<!--          <view class="action">-->
<!--            <text class="text-lg">{{ iotLinkFrom.activeTime }}</text>-->
<!--          </view>-->
<!--        </view>-->

<!--        <view class="cu-item">-->
<!--          <view class="content">-->
<!--            <text>生效时间</text>-->
<!--          </view>-->
<!--          <view class="action">-->
<!--            <text class="text-lg">{{ iotLinkFrom.effectiveTime }}</text>-->
<!--          </view>-->
<!--        </view>-->

        <view class="cu-item">
          <view class="content">
            <text>过期时间</text>
          </view>
          <view class="action">
            <text class="text-lg">{{ iotLinkFrom.expiredTime }}</text>
          </view>
        </view>

<!--        <view class="cu-item">-->
<!--          <view class="content">-->
<!--            <text>总流量</text>-->
<!--          </view>-->
<!--          <view class="action">-->
<!--            <text class="text-lg">{{ iotLinkFrom.totalFlow }}MB</text>-->
<!--          </view>-->
<!--        </view>-->

<!--        <view class="cu-item">-->
<!--          <view class="content">-->
<!--            <text>已使用流量</text>-->
<!--          </view>-->
<!--          <view class="action">-->
<!--            <text class="text-lg">{{ iotLinkFrom.usedFlow }}MB</text>-->
<!--          </view>-->
<!--        </view>-->

<!--        <view class="cu-item">-->
<!--          <view class="content">-->
<!--            <text>剩余流量</text>-->
<!--          </view>-->
<!--          <view class="action">-->
<!--            <text class="text-lg">{{ iotLinkFrom.leftFlow }}MB</text>-->
<!--          </view>-->
<!--        </view>-->

<!--        <view v-if="iotLinkFrom.totalVoice">-->
<!--          <view class="cu-item">-->
<!--            <view class="content">-->
<!--              <text>总语音量</text>-->
<!--            </view>-->
<!--            <view class="action">-->
<!--              <text class="text-lg">{{ iotLinkFrom.totalVoice }}分钟</text>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="cu-item">-->
<!--            <view class="content">-->
<!--              <text>使用语音量</text>-->
<!--            </view>-->
<!--            <view class="action">-->
<!--              <text class="text-lg">{{ iotLinkFrom.usedVoice }}分钟</text>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="cu-item">-->
<!--            <view class="content">-->
<!--              <text>剩余语音量</text>-->
<!--            </view>-->
<!--            <view class="action">-->
<!--              <text class="text-lg">{{ iotLinkFrom.residualVoice }}分钟</text>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
      </view>


      <view class="cu-bar my-bg margin-top">
        <view class="action">
          <text class="cuIcon-title text-orange "></text> 本卡套餐
        </view>
      </view>

      <view v-for="(item, index) in tableData" :key="index" class="cu-list menu margin-top">
        <view class="cu-item">
          <view class="content">
            <text class="">套餐名称</text>
          </view>
          <view class="action">
            <text class="text-lg">{{ item.packageName }}</text>
          </view>
        </view>
<!--        <view class="cu-item">-->
<!--          <view class="content">-->
<!--            <text class="">套餐总流量</text>-->
<!--          </view>-->
<!--          <view class="action">-->
<!--            <text class="text-lg">{{ item.totalFlow }}MB</text>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="cu-item">-->
<!--          <view class="content">-->
<!--            <text class="">已使用流量</text>-->
<!--          </view>-->
<!--          <view class="action">-->
<!--            <text class="text-lg">{{ item.usedFlow }}MB</text>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="cu-item">-->
<!--          <view class="content">-->
<!--            <text class="">剩余流量</text>-->
<!--          </view>-->
<!--          <view class="action">-->
<!--            <text class="text-lg">{{ item.leftFlow }}MB</text>-->
<!--          </view>-->
<!--        </view>-->
        <view class="cu-item">
          <view class="content">
            <text class="">购买日期</text>
          </view>
          <view class="action">
            <text class="text-lg">{{ formatterDate(item.payTime / 1000) }}</text>
          </view>
        </view>
        <view class="cu-item">
          <view class="content">
            <text class="">过期时间</text>
          </view>
          <view class="action">
            <text class="text-lg">{{ formatterDate(item.expireTime / 1000) }}</text>
          </view>
        </view>
        <view class="cu-item">
          <view class="content">
            <text class="">使用状态</text>
          </view>
          <view class="action">
            <text class="cu-tag round bg-green light">{{ formatterStatus(item.status) }}</text>
          </view>
        </view>
      </view>
    </view>

    <view v-else>
      <view class="uni-padding-wrap" style="margin-top: 150upx">
        <text class="word-btn-white text-white">暂无记录</text>
        <br/>
      </view>
    </view>


  </view>
</template>

<script>
import * as Foundation from '@/ui-utils/Foundation'
import * as API_IOT_LINK from './index.js'
export default {
  name: 'index',
  data() {
    return {
      iotLinkFrom: null,
      tableData: [],
      imei: '',
      dtype: null
    }
  },
  onLoad(option) {
    const { imei, dtype } = option
    console.log('option==', option)
    this.imei = imei
    this.dtype = dtype
    this.API_getDetails(imei)
  },
  methods: {
    API_getDetails(imei) {
      const _this = this
      API_IOT_LINK.getDetailsByImei(imei).then(res => {
        if (res.success) {
          _this.iotLinkFrom = res.data
          if (res.data) {
            _this.tableData = JSON.parse(res.data.packageList)
          }
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
            duration: 5000
          })
        }
      })
    },
    formatterType(value) {
      switch (value) {
        case 1:
          return '电信'
        case 2:
          return '移动'
        case 3:
          return '联通'
        case 4:
          return '聚合卡'
        default:
          return '未知'
      }
    },
    formatterDate(time) {
      return Foundation.unixToDate(time)
    },
    formatterStatus(value) {
      switch (value) {
        case 0:
          return '未生效'
        case 1:
          return '生效中'
        case 2:
          return '已失效'
        case 3:
          return '已过期'
        case 4:
          return '已退款'
        default:
          return '其他'
      }
    },
    goPackagePage() {
      uni.navigateTo({
        url: '/pages/log/iot/iot-package/index?operators=' + this.iotLinkFrom.operators + '&iccid=' + this.iotLinkFrom.iccid  + '&dtype=' + this.dtype
      })
    }
  }
}
</script>

<style scoped>
.my-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(90deg, rgba(5, 96, 232, 1) 0%, rgba(100, 158, 245, 1) 100%);
  color: white;
}
.cu-item {
  background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #2cc9e5 100%);
}
.my-bg {
  background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #2cc9e5 100%);
}
.cu-list.menu>.cu-item.arrow:before {
  color: white;
}
</style>