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

<template>
  <view class="page">
    <!-- 设备卡片 -->
    <view class="device-card">
      <image :src="deviceInfo.img" class="device-img" mode="aspectFit" />
      <view class="device-info">
        <text class="device-name">{{ deviceInfo.name }}</text>
        <text class="device-serial">序列号：{{ deviceInfo.serial }}</text>
      </view>
      <button class="add-share-btn" @click="addShare">添加分享</button>
    </view>

    <!-- 分享对象列表标题 -->
    <view class="targets-header">
      <text class="targets-title">分享对象 ({{ shareTargets.length }}/10)</text>
      <text class="cancel-all" @click="cancelAll">取消所有分享</text>
    </view>

    <!-- 分享对象列表 -->
    <view class="targets-list">
      <view v-for="target in shareTargets" :key="target.id" class="target-item">
        <view class="target-top">
          <view class="target-name-row">
            <text class="target-name">{{ target.name }}</text>
            <image src="/static/images/share/icon_edit.png" class="edit-icon" mode="aspectFit" />
          </view>
          <view class="shared-badge">已分享</view>
        </view>
        <text class="target-permissions">{{ target.permissions.join(' / ') }}</text>
        <text class="target-last-use">最新使用：{{ target.lastUse }}</text>
        <view class="target-actions">
          <button class="action-btn" @click="cancelShare(target)">取消分享</button>
          <button class="action-btn" @click="editPermission(target)">修改权限</button>
        </view>
      </view>

      <view v-if="!shareTargets.length" class="empty-tip">暂无分享对象</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: {
        id: 3,
        name: 'DS-2DE4423DW-D/GL...',
        serial: 'FW1167162',
        img: '/static/images/share/camera1.png'
      },
      shareTargets: [
        {
          id: 1,
          name: '132*****131/94198854的互联',
          permissions: ['看视频', '看录像', '报警消息', '控制设备'],
          lastUse: '2026-04-03'
        }
      ]
    }
  },
  onLoad(options) {
    if (options.id) {
      // 实际项目中根据id请求接口获取设备和分享详情
    }
  },
  methods: {
    addShare() {
      uni.navigateTo({ url: '/pages/home/invite/shareTarget/index' })
    },
    cancelAll() {
      uni.showModal({
        title: '提示',
        content: '确定取消所有分享？',
        success: (res) => {
          if (res.confirm) {
            this.shareTargets = []
            uni.showToast({ title: '已取消所有分享', icon: 'none' })
          }
        }
      })
    },
    cancelShare(target) {
      uni.showModal({
        title: '提示',
        content: `确定取消对【${target.name}】的分享？`,
        success: (res) => {
          if (res.confirm) {
            this.shareTargets = this.shareTargets.filter(t => t.id !== target.id)
            uni.showToast({ title: '已取消分享', icon: 'none' })
          }
        }
      })
    },
    editPermission(target) {
      uni.navigateTo({
        url: `/pages/home/invite/setPermission/index?targetId=${target.id}`
      })
    }
  }
}
</script>

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

.page {
  min-height: 100vh;
  padding: 20rpx 25rpx;
}

/* 设备卡片 */
.device-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;

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

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

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

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

  .add-share-btn {
    background: #3d7ff5;
    color: #fff;
    font-size: 24rpx;
    border-radius: 30rpx;
    padding: 12rpx 24rpx;
    border: none;
    line-height: 1.4;
    flex-shrink: 0;
  }
}

/* 分享对象标题 */
.targets-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26rpx 10rpx;

  .targets-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }

  .cancel-all {
    font-size: 26rpx;
    color: #999;
  }
}

/* 分享对象列表 */
.targets-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;

  .target-item {
    padding: 40rpx 34rpx;
    border-bottom: 1rpx solid #f2f2f2;

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

    .target-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;

      .target-name-row {
        display: flex;
        align-items: center;

        .target-name {
          font-size: 28rpx;
          color: #3d7ff5;
          margin-right: 8rpx;
        }

        .edit-icon {
          width: 28rpx;
          height: 28rpx;
        }
      }

      .shared-badge {
        font-size: 22rpx;
        color: #999;
        background: #f5f5f5;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
      }
    }

    .target-permissions {
      display: block;
      font-size: 24rpx;
      color: #999;
      margin-bottom: 8rpx;
    }

    .target-last-use {
      display: block;
      font-size: 24rpx;
      color: #999;
      margin-bottom: 20rpx;
    }

    .target-actions {
      display: flex;
      gap: 20rpx;

      .action-btn {
        font-size: 24rpx;
        color: #555;
        background: #fff;
        border: 1rpx solid #ddd;
        border-radius: 30rpx;
        padding: 10rpx 80rpx;
        line-height: 1.4;
        justify-items: center;
        justify-content: center;
        align-items: center;
        align-content: center;
      }
    }
  }
}

.empty-tip {
  text-align: center;
  color: #bbb;
  font-size: 26rpx;
  padding: 60rpx 0;
}
</style>