ykt-wxapp/pages/case/plan-list.vue

<template>
  <!-- Mobile 来源: ykt-management-mobile/src/pages/manage-plan/plan-list/plan-list.vue（wxapp mock：仅选择模板并回到 new-followup） -->
  <view class="page">
    <view v-if="list.length === 0" class="empty">
      <image class="empty-img" src="/static/empty.svg" mode="aspectFit" />
      <view class="empty-text">暂无回访计划</view>
    </view>

    <scroll-view v-else scroll-y class="scroll">
      <view v-for="(p, idx) in list" :key="p.id" class="item">
        <view class="left">
          <view class="name-row">
            <view class="name">{{ p.planName }}</view>
            <view v-if="p.planType === 'corp'" class="tag corp">机构</view>
            <view class="tag outline" @click.stop="preview(p)">详情</view>
          </view>
          <view class="desc">应用范围：{{ p.planDetail }}</view>
        </view>
        <view class="btn" @click="select(p)">选择</view>
      </view>
      <view style="height: 24px;"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const archiveId = ref('');

const list = ref([
  {
    id: 'p1',
    planName: '复诊提醒模板',
    planType: 'corp',
    planDetail: '适用于复诊提醒人群',
    eventType: 'revisit',
    taskContent: '请于本周内完成复诊预约与提醒。',
  },
  {
    id: 'p2',
    planName: '随访回访模板',
    planType: 'team',
    planDetail: '适用于普通随访',
    eventType: 'followup',
    taskContent: '请电话回访患者，确认恢复情况并记录结果。',
  },
]);

onLoad((options) => {
  archiveId.value = options?.archiveId ? String(options.archiveId) : '';
});

function select(plan) {
  uni.setStorageSync('select-mamagement-plan', plan);
  uni.navigateTo({ url: `/pages/case/new-followup?archiveId=${encodeURIComponent(archiveId.value)}&fromPlan=1` });
}

function preview(plan) {
  uni.showModal({
    title: plan.planName || '回访计划',
    content: plan.taskContent || plan.planDetail || '',
    showCancel: false,
  });
}
</script>

<style scoped>
.page {
  height: 100vh;
  background: #fff;
}
.scroll {
  height: 100vh;
}
.item {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #f2f2f2;
}
.left {
  flex: 1;
  min-width: 0;
  margin-right: 10px;
}
.name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}
.tag.corp {
  background: #4f6ef7;
  color: #fff;
}
.tag.outline {
  border: 1px solid #4f6ef7;
  color: #4f6ef7;
  background: #fff;
}
.desc {
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #4f6ef7;
  color: #4f6ef7;
  font-size: 13px;
}
.empty {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.empty-img {
  width: 160px;
  height: 160px;
  opacity: 0.9;
}
.empty-text {
  margin-top: 10px;
  font-size: 13px;
  color: #9aa0a6;
}
</style>