agri-app/pages/home/invite/selectDevice/index.vue

<template>
  <view class="page">
    <!-- 提示条 -->
    <view class="notice-bar">
      <text class="notice-icon">ⓘ</text>
      <text class="notice-text">已分享、分享已达上限的设备请前往 [我的-分享管理] 进行权限编辑或取消分享</text>
    </view>

    <!-- 设备列表 -->
    <view class="device-list">
      <view
        v-for="device in deviceList"
        :key="device.id"
        class="device-item"
        @click="toggleSelect(device)"
      >
        <!-- 单选框 -->
        <view class="radio" :class="{ 'radio-checked': selectedIds.includes(device.id), 'radio-disabled': device.shared }">
          <view v-if="selectedIds.includes(device.id)" class="radio-inner" />
        </view>
        <image :src="device.img" class="device-img" mode="aspectFit" />
        <view class="device-info">
          <text class="device-name">{{ device.name }}</text>
          <text class="device-serial">{{ device.serial }}</text>
        </view>
        <text v-if="device.shared" class="shared-tag">已分享</text>
      </view>
    </view>

    <!-- 底部：已选 + 下一步 -->
    <view class="bottom-bar">
      <text class="selected-tip">已选中：{{ selectedIds.length }}/{{ maxShare }}</text>
      <button
        class="next-btn"
        :class="{ 'next-btn-active': selectedIds.length > 0 }"
        :disabled="selectedIds.length === 0"
        @click="goNext"
      >下一步</button>
    </view>
  </view>
</template>

<script>
const MAX_SHARE = 10

export default {
  data() {
    return {
      maxShare: MAX_SHARE,
      selectedIds: [],
      phone: '',
      deviceList: [
        { id: 1, name: '八方', serial: 'GL5074046', img: '/static/images/share/camera1.png', shared: true },
        { id: 2, name: '十方', serial: 'GK5192621', img: '/static/images/share/camera2.png', shared: true },
        { id: 3, name: 'DS-2DE4423DW-D/GL...', serial: 'FW1167162', img: '/static/images/share/camera1.png', shared: true },
        { id: 4, name: 'DS-7804N-Z1/X(D)(FR...', serial: 'FR5725238', img: '/static/images/share/nvr.png', shared: true }
      ]
    }
  },
  onLoad(options) {
    this.phone = options.phone || ''
  },
  methods: {
    toggleSelect(device) {
      if (device.shared) return // 已分享不可选
      const idx = this.selectedIds.indexOf(device.id)
      if (idx > -1) {
        this.selectedIds.splice(idx, 1)
      } else {
        if (this.selectedIds.length >= this.maxShare) {
          uni.showToast({ title: `最多分享${this.maxShare}人`, icon: 'none' })
          return
        }
        this.selectedIds.push(device.id)
      }
    },
    goNext() {
      const selected = this.deviceList.filter(d => this.selectedIds.includes(d.id))
      uni.navigateTo({
        url: `/pages/home/invite/setPermission/index?phone=${this.phone}&devices=${encodeURIComponent(JSON.stringify(selected))}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: linear-gradient(180deg, #e8f0ff 0%, #f5f7fa 60%, #ffffff 100%);
}

.page {
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 提示条 */
.notice-bar {
  display: flex;
  align-items: flex-start;
  background: #fff8ee;
  border-left: 6rpx solid #f5a623;
  padding: 20rpx 24rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 8rpx;

  .notice-icon {
    color: #f5a623;
    font-size: 28rpx;
    margin-right: 12rpx;
    flex-shrink: 0;
  }

  .notice-text {
    font-size: 24rpx;
    color: #f5a623;
    line-height: 1.6;
  }
}

/* 设备列表 */
.device-list {
  background: #fff;
  border-radius: 16rpx;
  margin: 20rpx;
  overflow: hidden;

  .device-item {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx;
    border-bottom: 1rpx solid #f2f2f2;

    &:last-child { border-bottom: none; }

    .radio {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      border: 2rpx solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      flex-shrink: 0;

      &-checked {
        border-color: #3d7ff5;
        background: #3d7ff5;
      }

      &-inner {
        width: 18rpx;
        height: 18rpx;
        background: #fff;
        border-radius: 50%;
      }

      &-disabled {
        background: #f5f5f5;
        border-color: #e0e0e0;
      }
    }

    .device-img {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .device-info {
      flex: 1;
      overflow: hidden;

      .device-name {
        font-size: 28rpx;
        color: #333;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .device-serial {
        font-size: 24rpx;
        color: #999;
        display: block;
        margin-top: 6rpx;
      }
    }

    .shared-tag {
      font-size: 24rpx;
      color: #999;
      flex-shrink: 0;
      margin-left: 10rpx;
    }
  }
}

/* 底部 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: #edf1f7;

  .selected-tip {
    font-size: 26rpx;
    color: #666;
  }

  .next-btn {
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #ccc;
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
    border: none;
    padding: 0;
    margin: 0;

    &-active {
      background: #3d7ff5;
    }
  }
}
</style>