feat: 职工福利优化2

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;

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">
+                            <div v-if="hasDeliveryOptions" class="confirm-delivery">
-                                <el-radio-group v-if="projectInfo.provideMode === 3" v-model="deliveryMethod">
+                                <div class="confirm-delivery-options" role="radiogroup" aria-label="领取方式">
-                                    <el-radio-button label="pickup">实物发放</el-radio-button>
+                                    <label v-for="option in deliveryOptions" :key="option.value" class="confirm-delivery-option"
-                                    <el-radio-button label="mail">邮寄到家</el-radio-button>
+                                           :class="{'is-selected': deliveryMethod === option.value}">
-                                </el-radio-group>
+                                        <input v-model="deliveryMethod" type="radio" name="welfare-delivery-method" :value="option.value">
-                                <div v-else-if="deliveryMethod === 'mail'">邮寄到家</div>
+                                        <span class="confirm-delivery-icon" aria-hidden="true"><i :class="option.icon"></i></span>
-                                <div v-if="deliveryMethod === 'pickup'">
+                                        <span class="confirm-delivery-copy">
-                                    {{ projectInfo.provideMode === 1 ? '实物发放 · ' : '' }}学校自提，请在学校指定地点领取
+                                            <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>
+                                <div v-if="deliveryMethod === 'mail'" class="confirm-delivery-note">
-                            </el-form-item>
+                                    <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"
         },

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;
+}

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;

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;