ykt-team-wxapp/pages/message/components/consult-cancel.vue

<template>
  <view class="consult-cancel-container">
    <view class="cancel-card">
      <view class="cancel-content">
        <text class="cancel-text">您的咨询申请已发送，等待医生接诊</text>
      </view>
      <view class="cancel-actions">
        <button class="btn-cancel" @click="handleCancel">取消申请</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['cancel']);

const handleCancel = () => {
  emit('cancel');
};
</script>

<style scoped lang="scss">
.consult-cancel-container {
  width: 100%;
  padding: 20rpx 32rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.cancel-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.cancel-content {
  margin-bottom: 32rpx;
}

.cancel-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.cancel-actions {
  display: flex;
  justify-content: center;
}

.btn-cancel,
.btn-reapply {
  width: 100%;
  heiger-radius: 8rpx;
  font-size: 28rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff4d4f;
  color: #fff;
}

.btn-cancel::after {
  border: none;
}
</style>