1. 特色方

components/unpaid-register-drawer/UnpaidRegisterDrawer.vue

@@ -0,0 +1,181 @@
+<template>
+  <u-popup
+    v-model="popupVisible"
+    mode="bottom"
+    border-radius="24"
+    :safe-area-inset-bottom="true"
+    :closeable="true"
+    @close="onPopupClose"
+  >
+    <view class="drawer-inner">
+      <view class="drawer-header">
+        <text class="drawer-title">选择待支付挂号</text>
+      </view>
+      <view v-if="!list.length" class="drawer-empty">暂无待支付挂号订单</view>
+      <scroll-view v-else scroll-y class="drawer-scroll">
+        <view
+          v-for="item in list"
+          :key="item.id"
+          class="drawer-item"
+          @click="onSelect(item)"
+        >
+          <view class="item-main">
+            <view class="item-row">
+              <text class="item-label">就诊人</text>
+              <text class="item-value">{{ displayText(item.patient) }}</text>
+            </view>
+            <view class="item-row">
+              <text class="item-label">医生</text>
+              <text class="item-value">{{ displayText(item.doctor) }}</text>
+            </view>
+            <view class="item-row">
+              <text class="item-label">诊所</text>
+              <text class="item-value">{{ displayText(item.store) }}</text>
+            </view>
+            <view class="item-row">
+              <text class="item-label">挂号时间</text>
+              <text class="item-value">{{ displayText(item.created_at) }}</text>
+            </view>
+          </view>
+          <u-icon name="arrow-right" color="#94A3B8" size="28"></u-icon>
+        </view>
+      </scroll-view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+/**
+ * 待支付挂号订单选择抽屉
+ * 首页多条待付款挂号时，供用户选择具体订单前往支付
+ */
+export default {
+  name: 'UnpaidRegisterDrawer',
+  props: {
+    // v-model 控制抽屉显示隐藏
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    // 待支付挂号列表，字段来自 fetchUnpaidRegisterListApi
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    popupVisible: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      },
+    },
+  },
+  methods: {
+    /**
+     * 字段为空时显示占位符
+     * @param {string} val 展示值
+     */
+    displayText(val) {
+      const text = val != null ? String(val).trim() : '';
+      return text || '--';
+    },
+    /**
+     * 关闭抽屉
+     */
+    onPopupClose() {
+      this.$emit('input', false);
+    },
+    /**
+     * 选中某条挂号订单，通知父组件跳转支付
+     * @param {Object} item 挂号订单
+     */
+    onSelect(item) {
+      if (!item || item.id == null) return;
+      this.$emit('select', item.id);
+      this.$emit('input', false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.drawer-inner {
+  display: flex;
+  flex-direction: column;
+  max-height: 70vh;
+  box-sizing: border-box;
+  padding: 24rpx 24rpx 0;
+}
+
+.drawer-header {
+  padding-bottom: 20rpx;
+  text-align: center;
+}
+
+.drawer-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.drawer-empty {
+  padding: 48rpx 0 64rpx;
+  text-align: center;
+  color: #94a3b8;
+  font-size: 28rpx;
+}
+
+.drawer-scroll {
+  max-height: 60vh;
+  min-height: 200rpx;
+}
+
+.drawer-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 20rpx;
+  margin-bottom: 16rpx;
+  background: linear-gradient(90deg, rgba(65, 117, 238, 0.06) 0%, rgba(65, 117, 238, 0.02) 100%);
+  border: 1rpx solid rgba(65, 117, 238, 0.15);
+  border-radius: 16rpx;
+
+  &:active {
+    opacity: 0.85;
+  }
+}
+
+.item-main {
+  flex: 1;
+  min-width: 0;
+  margin-right: 16rpx;
+}
+
+.item-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 10rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.item-label {
+  flex-shrink: 0;
+  width: 140rpx;
+  font-size: 26rpx;
+  color: #64748b;
+}
+
+.item-value {
+  flex: 1;
+  font-size: 26rpx;
+  color: #0f172a;
+  line-height: 1.5;
+  word-break: break-all;
+}
+</style>