feat: 职工福利优化2

This commit is contained in:
2026-11-11 17:55:30 +08:00
parent a7a7aa5e3a
commit 2ee171b4f3
5 changed files with 130 additions and 11 deletions
@@ -177,6 +177,7 @@ layout("/layouts/platform.html"){
})
</script>
<style>
<!--#include("optionSelectDialog.css"){}#-->
/* 全局变量 */
:root {
--primary-color: #409EFF;
@@ -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"
},
@@ -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;
}
@@ -244,6 +244,7 @@ layout("/layouts/platform.html"){
</script>
<style>
<!--#include("../select/optionSelectDialog.css"){}#-->
/* 全局变量 */
:root {
--primary-color: #409EFF;
@@ -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;