feat: 职工福利优化2
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user