bigDataApp/pages/deviceDetails/weatherStation/simDetail.vue

<template>
  <view class="sim-details-page">
    <cu-custom :isBack="true">
      <template slot="content">
        <view class="nav-title">SIM卡详情</view>
      </template>
    </cu-custom>
    <!-- 加载动画 -->
    <view v-if="loading" class="loading-container">
      <u-loading mode="circle"></u-loading>
      <text class="loading-text">加载中...</text>
    </view>
    <!-- 页面内容 -->
    <view v-else>
      <view class="sim-first sim-board">
        <view class="title">数据SIM卡流量</view>
        <view class="sim-item">
          <text class="label">ICCID：</text>
          <span class="val">{{ simData.iccid }}</span>
          <image
            @click="copy(simData.iccid)"
            src="/static/images/device/copy.svg"
            mode=""
            class="info-img"
          ></image>
        </view>
        <view class="sim-item">
          <text class="label">总流量：</text>
          <span class="val">{{ simData.total }}</span>
        </view>
        <view class="sim-item">
          <text class="label">状态：</text>
          <text class="val">{{ simData.status }}</text>
        </view>
        <view class="sim-item">
          <text class="label">到期时间：</text>
          <text class="val">{{ simData.expire }}</text>
        </view>
        <view class="sim-item">
          <text class="label">厂商名称：</text>
          <text class="val">{{ simData.company }}</text>
        </view>
        <view class="sim-info-count">
          <view class="sim-item">
            <text class="label">已使用：</text
            ><text
              :style="{
                color:
                  simData.used > parseInt(simData.total) ? '#f56c6c' : '#14A478',
              }"
              >{{ simData.used.toFixed(2) }}M</text
            >/{{ simData.total }}
          </view>
          <view class="sim-item">
            <text class="label">剩余：</text>
            <text
              class="val"
              :style="{
                color: '#14A478',
              }"
              >{{ (parseInt(simData.total) - simData.used).toFixed(2) }}M</text
            >
          </view>
        </view>
      </view>
      <view v-if="simIccidObj.photo_iccid || simIccidObj.is_editor" class="sim-board sim-second">
        <view class="title">图片SIM卡流量</view>
        <view class="sim-item">
          <text class="label">ICCID：</text>
          <span v-if="!isEditing" class="val">{{ simData.iccid }}</span>
          <input
            v-else
            v-model="editingIccid"
            type="text"
            class="edit-input"
            placeholder="请输入新的ICCID"
          />
          <image
            @click="copy(isEditing ? editingIccid : simData.iccid)"
            src="/static/images/device/copy.svg"
            mode=""
            class="info-img"
          ></image>
          <image
            v-if="!isEditing"
            @click="toggleEdit"
            src="/static/images/device/edit.svg"
            mode=""
            class="info-img"
          ></image>
          <button v-else @click="saveEditIccid" class="save-btn">确定</button>
        </view>
      </view>
      <view class="footer-board">
        <u-button type="success" class="sub-btn" @click="goBack"
          >确定</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.loading = true
    const deviceInfo = JSON.parse(decodeURIComponent(options.deviceInfo));
    console.log(deviceInfo, "deviceInfo");
    this.deviceInfo = deviceInfo;
    this.getIccidByd_id();
  },
  data() {
    return {
      deviceInfo: {},
      simData: {
        iccid: "",
        total: "",
        status: "",
        expire: "",
        company: "",
        used: 0,
      },
      isEditing: false,
      editingIccid: "",
      showSimData: false,
      empty: false,
      simIccidObj: {},
      loading: false,
    };
  },
  methods: {
    getIccidByd_id() {
      this.$myRequest({
        url: "/api/api_gateway?method=forecast.send_control.device_sim_new",
        data: {
          d_id: this.deviceInfo.d_id,
        },
      }).then((res) => {
        console.log('getIccidByd_id:', res);
        if (
          res.data_iccid ||
          res.photo_iccid ||
          res.is_editor
        ) {
          console.log(res, '1111')
          this.empty = false;
          this.simIccidObj = res;
          if (res.data_iccid) {
            this.active = "data_iccid";
            console.log(222)
            this.getSimData(res.data_iccid);
          } else {
            if (res.photo_iccid || res.is_editor) {
              this.active = "photo_iccid";
              if (res.photo_iccid) {
                this.getSimData(res.photo_iccid);
              } else {
                this.loading = false;
              }
            }
          }
        } else {
          this.empty = true;
          this.loading = false;
        }
      });
    },
    getSimData(iccid) {
      this.$myRequest({
        url: "/api/api_gateway?method=forecast.send_control.sim_query_new",
        data: {
          iccid: iccid
        }
      }).then(res => {
        console.log('simData:', res)
        this.loading = false
        this.simData = res
        if (res.code) {
          this.showSimData = false
          // this.$message.error(res.data.data.msg)
        } else {
          this.showSimData = true
          this.simData = res
          this.editIccid = res.iccid
        }
      })
    },
    copy(item) {
      console.log(item);
      uni.setClipboardData({
        data: item,
        success: function () {
          console.log("success");
        },
      });
    },
    toggleEdit() {
      this.isEditing = !this.isEditing;
      if (this.isEditing) {
        this.editingIccid = this.simData.iccid;
      }
    },
    saveIccid() {
      this.simData.iccid = this.editingIccid;
      this.isEditing = false;
    },
    saveEditIccid() {
      this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.device_sim_update',
        data: {
          d_id: this.deviceInfo.d_id,
          simid: this.editingIccid
        }
      }).then(res => {
        if (res.code) {
          this.isEditSim = false
          this.loading = true
          // this.$message.success(res.data.data.msg)
          this.simIccidObj.photo_iccid = this.editingIccid
          this.getSimData(this.editingIccid)
        } else {
          // this.$message.error(res.data.data.msg)
        }
        this.isEditing = false;
      })
    },
    goBack() {
      uni.navigateBack({
        delta: 1,
      })
    },
  },
};
</script>

<style lang="scss">
.sim-details-page {
  background:
    linear-gradient(180deg, #ffffff00 0%, #f5f6fa 23.64%, #f5f6fa 100%),
    linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%);
  min-height: 100vh;
  padding: 0 32rpx;
  padding-top: 98rpx;
  box-sizing: border-box;
}
/* 加载动画样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  width: 100%;
}
.loading-text {
  font-size: 28rpx;
  color: #666;
  margin-top: 32rpx;
}
.sim-board {
  padding: 32rpx;
  border-radius: 16rpx;
  background: #fff;
  margin-top: 46rpx;
  margin-bottom: 24rpx;
  .title {
    color: #020305;
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 24rpx;
  }
  .sim-item {
    font-size: 28rpx;
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    .label {
      color: #999999;
    }
    .val {
      color: #303133;
    }
    .copy-icon,
    .edit-icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .sim-info-count {
    display: flex;
    justify-content: space-between;
  }
}
.footer-board {
  border-top: 2rpx solid #e4e7ed;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 164rpx;
  padding: 16rpx 32rpx 0 32rpx;
  .sub-btn {
    width: 100%;
    background: #0bbc58;
    border-radius: 16rpx;
  }
}
.info-img {
  width: 32rpx;
  height: 32rpx;
  margin-left: 16rpx;
  background: #0bbc581a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-input {
  flex: 1;
  height: 48rpx;
  border: 2rpx solid #0bbc58;
  border-radius: 8rpx;
  padding: 0 16rpx;
  font-size: 28rpx;
  color: #303133;
  background-color: #f5f7fa;
}
.save-btn {
  margin-left: 16rpx;
  padding: 8rpx 20rpx;
  background-color: #0bbc58;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
  height: 48rpx;
  line-height: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>