You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

115 lines
2.1 KiB

  1. <template>
  2. <view class="service-remarks-card">
  3. <view class="card-title">
  4. <text>服务备注</text>
  5. </view>
  6. <view class="remarks-content">
  7. <view class="payment-method">
  8. <text class="label">付款方式:</text>
  9. <text class="value">{{remarks.paymentMethod}}</text>
  10. </view>
  11. <view class="urgent-flag" v-if="remarks.isUrgent">
  12. <view class="urgent-icon">
  13. <image src="/static/images/details/girl.svg" style="width: 32rpx; height: 32rpx;"></image>
  14. </view>
  15. <text class="urgent-text">是否紧急预约</text>
  16. </view>
  17. <view class="notes-section" v-if="remarks.notes">
  18. <text class="notes-text">{{remarks.notes}}</text>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. props: {
  26. remarks: {
  27. type: Object,
  28. default: () => ({
  29. paymentMethod: '',
  30. isUrgent: false,
  31. notes: ''
  32. })
  33. }
  34. }
  35. }
  36. </script>
  37. <style lang="scss" scoped>
  38. .service-remarks-card {
  39. background-color: #FFFFFF;
  40. border-radius: 20rpx;
  41. padding: 30rpx;
  42. margin-bottom: 20rpx;
  43. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  44. }
  45. .card-title {
  46. font-size: 32rpx;
  47. font-weight: bold;
  48. color: #333;
  49. margin-bottom: 20rpx;
  50. display: flex;
  51. align-items: center;
  52. &::before {
  53. content: '';
  54. display: inline-block;
  55. width: 8rpx;
  56. height: 32rpx;
  57. background-color: #FFAA48;
  58. margin-right: 16rpx;
  59. border-radius: 4rpx;
  60. }
  61. }
  62. .remarks-content {
  63. .payment-method {
  64. display: flex;
  65. align-items: center;
  66. margin-bottom: 20rpx;
  67. .label {
  68. font-size: 26rpx;
  69. color: #666;
  70. margin-right: 10rpx;
  71. }
  72. .value {
  73. font-size: 26rpx;
  74. color: #333;
  75. }
  76. }
  77. .urgent-flag {
  78. display: flex;
  79. align-items: center;
  80. margin-bottom: 20rpx;
  81. .urgent-icon {
  82. margin-right: 10rpx;
  83. }
  84. .urgent-text {
  85. font-size: 26rpx;
  86. color: #FF5252;
  87. }
  88. }
  89. .notes-section {
  90. padding: 20rpx;
  91. background-color: #FFF5E6;
  92. border-radius: 10rpx;
  93. .notes-text {
  94. font-size: 26rpx;
  95. color: #A94F20;
  96. line-height: 1.5;
  97. white-space: pre-wrap;
  98. }
  99. }
  100. }
  101. </style>