From 2ee171b4f34ad69d1a33146150e694d152324e00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=8C=E5=85=88=E8=88=9C?= <2499071264@qq.com>
Date: Wed, 11 Nov 2026 17:55:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=81=8C=E5=B7=A5=E7=A6=8F=E5=88=A9?=
 =?UTF-8?q?=E4=BC=98=E5=8C=962?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../platform/zhgh/welfare/select/index.html   |  1 +
 .../zhgh/welfare/select/optionSelect.js       | 49 ++++++++---
 .../welfare/select/optionSelectDialog.css     | 88 +++++++++++++++++++
 .../welfare/selectionSituation/index.html     |  1 +
 .../platform/zhghh5/welfare/select/index.html |  2 +-
 5 files changed, 130 insertions(+), 11 deletions(-)
 create mode 100644 src/main/resources/views/platform/zhgh/welfare/select/optionSelectDialog.css

diff --git a/src/main/resources/views/platform/zhgh/welfare/select/index.html b/src/main/resources/views/platform/zhgh/welfare/select/index.html
index e8d543a..98f9f6a 100644
--- a/src/main/resources/views/platform/zhgh/welfare/select/index.html
+++ b/src/main/resources/views/platform/zhgh/welfare/select/index.html
@@ -177,6 +177,7 @@ layout("/layouts/platform.html"){
     })
 </script>
 <style>
+    <!--#include("optionSelectDialog.css"){}#-->
     /* 全局变量 */
     :root {
         --primary-color: #409EFF;
diff --git a/src/main/resources/views/platform/zhgh/welfare/select/optionSelect.js b/src/main/resources/views/platform/zhgh/welfare/select/optionSelect.js
index 9f429e6..abd6647 100644
--- a/src/main/resources/views/platform/zhgh/welfare/select/optionSelect.js
+++ b/src/main/resources/views/platform/zhgh/welfare/select/optionSelect.js
@@ -144,17 +144,24 @@ const optionSelect = {
                     <div class="confirm-mobile-section">
                         <div class="confirm-section-title">{{ hasDeliveryOptions ? '领取方式' : '联系信息' }}</div>
                         <el-form :model="contactForm" ref="contactForm" :rules="contactRules" label-width="80px">
-                            <el-form-item v-if="hasDeliveryOptions" label-width="0px">
-                                <el-radio-group v-if="projectInfo.provideMode === 3" v-model="deliveryMethod">
-                                    <el-radio-button label="pickup">实物发放</el-radio-button>
-                                    <el-radio-button label="mail">邮寄到家</el-radio-button>
-                                </el-radio-group>
-                                <div v-else-if="deliveryMethod === 'mail'">邮寄到家</div>
-                                <div v-if="deliveryMethod === 'pickup'">
-                                    {{ projectInfo.provideMode === 1 ? '实物发放 · ' : '' }}学校自提，请在学校指定地点领取
+                            <div v-if="hasDeliveryOptions" class="confirm-delivery">
+                                <div class="confirm-delivery-options" role="radiogroup" aria-label="领取方式">
+                                    <label v-for="option in deliveryOptions" :key="option.value" class="confirm-delivery-option"
+                                           :class="{'is-selected': deliveryMethod === option.value}">
+                                        <input v-model="deliveryMethod" type="radio" name="welfare-delivery-method" :value="option.value">
+                                        <span class="confirm-delivery-icon" aria-hidden="true"><i :class="option.icon"></i></span>
+                                        <span class="confirm-delivery-copy">
+                                            <strong>{{ option.title }}</strong>
+                                            <span>{{ option.description }}</span>
+                                        </span>
+                                        <i v-if="deliveryMethod === option.value" class="el-icon-success confirm-delivery-check" aria-hidden="true"></i>
+                                    </label>
                                 </div>
-                                <div v-if="deliveryMethod === 'mail'" style="margin-top: 8px; padding: 8px 12px; border-radius: 6px; line-height: 1.5; background: #fff3e8; color: #9c451c">超出江浙沪不包邮，超出部分自理，具体金额联系供应商。</div>
-                            </el-form-item>
+                                <div v-if="deliveryMethod === 'mail'" class="confirm-delivery-note">
+                                    <i class="el-icon-info" aria-hidden="true"></i>
+                                    <span>超出江浙沪不包邮，超出部分自理，具体金额联系供应商。</span>
+                                </div>
+                            </div>
                             <el-row :gutter="10">
                                 <el-col :span="20" v-if="deliveryMethod === 'mail'">
                                     <el-form-item prop="receiveAddress"
@@ -306,6 +313,28 @@ const optionSelect = {
             return [1, 3, 5].includes(this.projectInfo.provideMode)
         },
 
+        deliveryOptions() {
+            const options = []
+            const mode = this.projectInfo.provideMode
+            if (mode === 1 || mode === 3) {
+                options.push({
+                    value: "pickup",
+                    title: "实物发放",
+                    description: "学校自提，请在学校指定地点领取",
+                    icon: "el-icon-present"
+                })
+            }
+            if (mode === 3 || mode === 5) {
+                options.push({
+                    value: "mail",
+                    title: "邮寄到家",
+                    description: "配送到您填写的收货地址",
+                    icon: "el-icon-truck"
+                })
+            }
+            return options
+        },
+
         requiresContactInfo() {
             return !this.hasDeliveryOptions || this.deliveryMethod === "mail"
         },
diff --git a/src/main/resources/views/platform/zhgh/welfare/select/optionSelectDialog.css b/src/main/resources/views/platform/zhgh/welfare/select/optionSelectDialog.css
new file mode 100644
index 0000000..ef3c208
--- /dev/null
+++ b/src/main/resources/views/platform/zhgh/welfare/select/optionSelectDialog.css
@@ -0,0 +1,88 @@
+.welfare-confirm-dialog .confirm-delivery {
+    margin-bottom: 20px;
+}
+
+.welfare-confirm-dialog .confirm-delivery-options {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+    gap: 12px;
+}
+
+.welfare-confirm-dialog .confirm-delivery-option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    box-sizing: border-box;
+    min-height: 66px;
+    padding: 8px 36px 8px 18px;
+    border: 1px solid #d6deec;
+    border-radius: 8px;
+    background: #f7f9fc;
+    cursor: pointer;
+}
+
+.welfare-confirm-dialog .confirm-delivery-option.is-selected {
+    border-color: #1677ff;
+    background: #e6f0ff;
+}
+
+.welfare-confirm-dialog .confirm-delivery-option:focus-within {
+    outline: 2px solid #1677ff;
+    outline-offset: 2px;
+}
+
+.welfare-confirm-dialog .confirm-delivery-option input {
+    position: absolute;
+    opacity: 0;
+}
+
+.welfare-confirm-dialog .confirm-delivery-icon {
+    display: grid;
+    place-items: center;
+    flex: 0 0 46px;
+    height: 46px;
+    border-radius: 50%;
+    background: #e5f0ff;
+    color: #086ee8;
+    font-size: 28px;
+}
+
+.welfare-confirm-dialog .confirm-delivery-copy {
+    display: grid;
+    gap: 3px;
+    color: #596579;
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+.welfare-confirm-dialog .confirm-delivery-copy strong {
+    color: #152238;
+    font-size: 15px;
+}
+
+.welfare-confirm-dialog .confirm-delivery-check {
+    position: absolute;
+    top: 8px;
+    right: 10px;
+    color: #0868d9;
+    font-size: 18px;
+}
+
+.welfare-confirm-dialog .confirm-delivery-note {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    margin-top: 14px;
+    padding: 8px 16px;
+    border-radius: 8px;
+    background: #fff1e3;
+    color: #a64b08;
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.welfare-confirm-dialog .confirm-delivery-note i {
+    flex: none;
+    color: #e87516;
+}
diff --git a/src/main/resources/views/platform/zhgh/welfare/selectionSituation/index.html b/src/main/resources/views/platform/zhgh/welfare/selectionSituation/index.html
index b4494f6..f022837 100644
--- a/src/main/resources/views/platform/zhgh/welfare/selectionSituation/index.html
+++ b/src/main/resources/views/platform/zhgh/welfare/selectionSituation/index.html
@@ -244,6 +244,7 @@ layout("/layouts/platform.html"){
 </script>
 
 <style>
+    <!--#include("../select/optionSelectDialog.css"){}#-->
     /* 全局变量 */
     :root {
         --primary-color: #409EFF;
diff --git a/src/main/resources/views/platform/zhghh5/welfare/select/index.html b/src/main/resources/views/platform/zhghh5/welfare/select/index.html
index 0dc3d70..336e491 100644
--- a/src/main/resources/views/platform/zhghh5/welfare/select/index.html
+++ b/src/main/resources/views/platform/zhghh5/welfare/select/index.html
@@ -544,7 +544,7 @@ layout("/layouts/platform_h5.html"){
         display: flex;
         align-items: baseline;
         gap: 6px;
-        margin: 10px 14px 14px;
+        margin: 0 14px 14px;
         padding: 8px 10px;
         border-radius: 8px;
         background: #fff3e8;