aiot-app/components/CellInfo.vue

<template>
  <view class="list-cell">
    <view class="label" :style="{ 'max-width': width + 'rpx' }" v-text="label">
    </view>
    <view
      class="value"
      :class="valueClass"
      v-text="value"
      v-if="typeof value !== 'object'"
    >
    </view>
    <view v-if="typeof value === 'object'" class="value">
      <view
        class=""
        v-for="(item, index) in value"
        :key="index"
        @click="preview(item)"
      >
        {{ item.name }}
      </view>
    </view>
    <view v-if="icon" :class="icon"> </view>
  </view>
</template>

<script>
export default {
  name: 'CellInfo',
  props: {
    width: {
      type: [String, Number],
      default: '200'
    },
    label: {
      type: [String, Number],
      default: ''
    },
    value: {
      type: [String, Number, Array],
      default: ''
    },
    valueClass: {
      type: String,
      default: ''
    },
    icon: {
      type: [String, Array],
      default: ''
    }
  },
  data () {
    return {}
  },
  methods: {
    preview (res) {
      uni.previewImage({
        urls: [this.apiUrl + res.accessUrl]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list-cell {
  display: flex;
  align-items: self-start;
  justify-content: space-between;
  padding: 20rpx 0;
  color: $uni-text-color;
  border-bottom: 2rpx solid #d8d8d8;
  font-size: 28rpx;

  view {
    flex: 1;
    padding: 0 30rpx;
  }

  .label {
    color: $uni-text-color-grey;
    text-align: right;
  }

  .value {
    flex: 1;
    text-align: left;
    word-break: break-all;
  }

  .iconfont {
    text-align: right;
  }
}
</style>