xk-client-wx/subPackages/my/components/TransferPrescriptionCard.vue

<template>
  <view class="transfer-card">
    <view class="card-header">
      <view class="header-icon">
        <text class="iconfont icon-mendian"></text>
      </view>
      <view class="header-title">转诊处方</view>
      <view class="status-tag" :class="statusClass">
        {{ statusText }}
      </view>
    </view>
    
    <view class="card-body">
      <view class="info-row" v-if="transferData.transfer_store">
        <view class="info-icon">
          <text class="iconfont icon-mendian"></text>
        </view>
        <view class="info-content">
          <view class="info-label">转诊诊所</view>
          <view class="info-value">{{ transferData.transfer_store.name || '未知诊所' }}</view>
        </view>
      </view>
      
      <view class="info-row" v-if="transferData.delegate_store">
        <view class="info-icon">
          <text class="iconfont icon-mendian"></text>
        </view>
        <view class="info-content">
          <view class="info-label">委托诊所</view>
          <view class="info-value">{{ transferData.delegate_store.name || '未知诊所' }}</view>
        </view>
      </view>
      
      <view class="info-row" v-if="transferData.prescription_no">
        <view class="info-icon">
          <text class="iconfont icon-chufang"></text>
        </view>
        <view class="info-content">
          <view class="info-label">处方编号</view>
          <view class="info-value">{{ transferData.prescription_no }}</view>
        </view>
      </view>
      
      <view class="info-row" v-if="transferData.transfer_time">
        <view class="info-icon">
          <text class="iconfont icon-shijian"></text>
        </view>
        <view class="info-content">
          <view class="info-label">转诊时间</view>
          <view class="info-value">{{ transferData.transfer_time }}</view>
        </view>
      </view>
    </view>
    
    <view class="card-footer" v-if="transferData.status === 0">
      <button class="agree-btn" @click="handleAgree">同意转诊</button>
      <button class="reject-btn" @click="handleReject">拒绝转诊</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TransferPrescriptionCard',
  props: {
    transferData: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  computed: {
    statusText() {
      const status = this.transferData.status;
      const statusMap = {
        0: '待确认',
        1: '已确认',
        2: '已导入',
        3: '已取消'
      };
      return statusMap[status] || '未知';
    },
    statusClass() {
      const status = this.transferData.status;
      const classMap = {
        0: 'status-pending',
        1: 'status-confirmed',
        2: 'status-imported',
        3: 'status-cancelled'
      };
      return classMap[status] || '';
    }
  },
  methods: {
    handleAgree() {
      this.$emit('agree', this.transferData);
    },
    handleReject() {
      this.$emit('reject', this.transferData);
    }
  }
}
</script>

<style scoped>
.transfer-card {
  width: 100%;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-radius: 16rpx;
  border: 2rpx solid #fed7aa;
  margin: 20rpx 0;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 24rpx 30rpx;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

.header-icon {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: 600;
}

.status-tag {
  padding: 8rpx 20rpx;
  border-radius: 40rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.status-pending {
  background: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
}

.status-confirmed {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.status-imported {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.status-cancelled {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.card-body {
  padding: 30rpx;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  padding: 24rpx 30rpx;
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  border: 2rpx solid #fed7aa;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-icon {
  width: 56rpx;
  height: 56rpx;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f97316;
  font-size: 28rpx;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
  min-width: 0;
}

.info-label {
  font-size: 24rpx;
  color: #64748b;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.info-value {
  font-size: 28rpx;
  color: #1e293b;
  line-height: 1.6;
  word-break: break-word;
}

.card-footer {
  padding: 24rpx 30rpx;
  background: #fff7ed;
  border-top: 2rpx solid #fed7aa;
  display: flex;
  gap: 20rpx;
  justify-content: flex-end;
}

.agree-btn,
.reject-btn {
  padding: 16rpx 40rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
}

.agree-btn {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

.reject-btn {
  background: white;
  color: #64748b;
  border: 2rpx solid #cbd5e1;
}
</style>