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

<template>
  <view class="page">
    <text class="page-hint">请设置分享对象的视频权限</text>

    <!-- 权限选项列表 -->
    <view class="permission-list">
      <view
        v-for="item in permissionOptions"
        :key="item.value"
        class="permission-item"
        @click="togglePermission(item)"
      >
        <view class="radio" :class="{ 'radio-checked': selectedPermissions.includes(item.value) }">
          <view v-if="selectedPermissions.includes(item.value)" class="check-icon">✓</view>
        </view>
        <view class="permission-info">
          <text class="permission-name">{{ item.label }}</text>
          <text class="permission-desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 底部提示 + 按钮 -->
    <view class="footer">
      <view class="footer-notice">
        <text class="notice-icon">ⓘ</text>
        <text class="notice-text">分享成功后，设备仅限被分享账号本人使用</text>
      </view>
      <button class="next-btn" @click="goNext">下一步</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      devices: [],
      selectedPermissions: ['watch_video'], // 默认勾选"看视频"
      permissionOptions: [
        { value: 'watch_video', label: '看视频', desc: '可查看实时画面' },
        { value: 'watch_record', label: '看录像', desc: '可查看录像回放' },
        { value: 'alarm_msg', label: '报警消息', desc: '可接收、查看设备消息' },
        { value: 'control_device', label: '控制设备', desc: '可调整云台、画面、声音灯光等设置' }
      ]
    }
  },
  onLoad(options) {
    this.phone = options.phone || ''
    if (options.devices) {
      try {
        this.devices = JSON.parse(decodeURIComponent(options.devices))
      } catch (e) {}
    }
  },
  methods: {
    togglePermission(item) {
      const idx = this.selectedPermissions.indexOf(item.value)
      if (idx > -1) {
        this.selectedPermissions.splice(idx, 1)
      } else {
        this.selectedPermissions.push(item.value)
      }
    },
    goNext() {
      if (!this.selectedPermissions.length) {
        uni.showToast({ title: '请至少选择一项权限', icon: 'none' })
        return
      }
      uni.navigateTo({
        url: `/pages/home/invite/shareConfirm/index?phone=${this.phone}&permissions=${encodeURIComponent(JSON.stringify(this.selectedPermissions))}&devices=${encodeURIComponent(JSON.stringify(this.devices))}`
      })
    }
  }
}
</script>

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

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 40rpx 30rpx;
}

.page-hint {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
  padding-left: 4rpx;
}

/* 权限列表 */
.permission-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  flex: 1;

  .permission-item {
    display: flex;
    align-items: center;
    padding: 30rpx 28rpx;
    border-bottom: 1rpx solid #f2f2f2;

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

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

      &-checked {
        background: #555;
        border-color: #555;
      }

      .check-icon {
        color: #fff;
        font-size: 26rpx;
        line-height: 1;
      }
    }

    .permission-info {
      .permission-name {
        display: block;
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 6rpx;
      }

      .permission-desc {
        display: block;
        font-size: 24rpx;
        color: #aaa;
      }
    }
  }
}

/* 底部 */
.footer {
  margin-top: 40rpx;

  .footer-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;

    .notice-icon {
      color: #f5a623;
      font-size: 26rpx;
      margin-right: 8rpx;
    }

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

  .next-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background: #3d7ff5;
    color: #fff;
    border-radius: 50rpx;
    font-size: 32rpx;
    border: none;
  }
}
</style>