zhapp/pages/quote/modules/customPlan.vue

<template>
	<view class="custom-body">
		<!-- 交强险/车船税 -->
		<view class="customView" v-if="['单交','交三','交商'].includes(productName)">
			<!-- 标题 -->
			<view class="header dis a-c j-start">
				<view class="link"></view>
				<text class="title">交强险/车船税</text>
			</view>
			<!-- 内容区 -->
			<view class="content-body">
				<view class="rowItem dis a-c j-s ">
					<text>交强险</text>
					<text>投保</text>
				</view>
				<view class="rowItem dis a-c j-s " @click="vehicleTaxShow=true" style="border-bottom: none;">
					<text>车船税</text>
					<view class="dis a-c">
						<text>{{vehicleAndVesselTaxModel.taxRelifFlag}}</text>
						<u-icon name="arrow-right" class="ml-1 " color="#333" size="11"></u-icon>
					</view>
				</view>
				<!-- 车船税详细信息 -->
				<view class="vehicleTaxInfo" v-if="vehicleAndVesselTaxVo.taxRelifFlag!=1">
					<u--form labelPosition="left" :model="vehicleAndVesselTaxVo" ref="uForm" labelWidth="130"
						:labelStyle="{color:'#333',fontSize:'28rpx'}">
						<u-form-item
							v-show="vehicleAndVesselTaxVo.taxRelifFlag == 2 || vehicleAndVesselTaxVo.taxRelifFlag == 3"
							label="减免税凭证号">
							<u--input v-model="vehicleAndVesselTaxVo.extendChar2" border="none" clearable
								placeholder="请输入" placeholderStyle="text-align:right;font-size:28rpx;"></u--input>
						</u-form-item>
						<u-form-item v-show="vehicleAndVesselTaxVo.taxRelifFlag == 4" label="完税凭证号">
							<u--input v-model="vehicleAndVesselTaxVo.paidFreeCertificate" border="none" clearable
								placeholder="请输入" placeholderStyle="text-align:right;font-size:28rpx;"></u--input>
						</u-form-item>
						<u-form-item
							v-show="vehicleAndVesselTaxVo.taxRelifFlag == 2 || vehicleAndVesselTaxVo.taxRelifFlag == 3"
							label="减免税原因" @click="relifReasonShow=true">
							<u--input v-model="vehicleAndVesselTaxModel.relifReason" disabled
								disabledColor="transparent" suffixIcon='arrow-right'
								suffixIconStyle="color:#333;font-size:22rpx" placeholder="请选择"
								placeholderStyle="text-align:right;font-size:28rpx;" clearable border="none"
								style="pointer-events: none;"></u--input>
						</u-form-item>
						<u-form-item v-show="vehicleAndVesselTaxVo.taxRelifFlag != 1" label="税务机关代码">
							<u--input v-model="vehicleAndVesselTaxVo.taxComCode" border="none" clearable
								placeholder="请输入" placeholderStyle="text-align:right;font-size:28rpx;"></u--input>
						</u-form-item>
						<u-form-item v-show="vehicleAndVesselTaxVo.taxRelifFlag != 1" label="税务机关名称">
							<u--input v-model="vehicleAndVesselTaxVo.taxComName" border="none" clearable
								placeholder="请输入" placeholderStyle="text-align:right;font-size:28rpx;"></u--input>
						</u-form-item>
						<u-form-item v-show="vehicleAndVesselTaxVo.taxRelifFlag == 4" label="完税凭证填发日期"
							@click="taxDocumentDateShow=true">
							<u--input v-model="vehicleAndVesselTaxVo.taxDocumentDate" disabled
								disabledColor="transparent" clearable :holdKeyboard="true" placeholder="请选择"
								placeholderStyle="text-align:right;font-size:28rpx;" border="none"
								style="pointer-events: none;">
							</u--input>
							<view class="suffixClass">
								<image src="/static/icon/quote/dateIcon.png" mode="">
								</image>
							</view>
						</u-form-item>
						<u-form-item v-show="vehicleAndVesselTaxVo.taxRelifFlag == 4" label="完税凭证地区"
							@click="taxPaidAreaCodeShow=true">
							<u--input v-model="vehicleAndVesselTaxModel.taxPaidAreaCode" disabled
								disabledColor="transparent" clearable :holdKeyboard="true" placeholder="请选择"
								suffixIcon='arrow-right' suffixIconStyle="color:#333;font-size:22rpx"
								placeholderStyle="text-align:right; font-size:28rpx;" border="none"
								style="pointer-events: none;">

							</u--input>
						</u-form-item>
						<u-form-item v-show="vehicleAndVesselTaxVo.taxRelifFlag == 3" label="减税比例">
							<u--input v-model="vehicleAndVesselTaxVo.taxRelief" border="none" clearable
								placeholder="请输入" placeholderStyle="text-align:right; font-size:28rpx;"></u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>
		<!-- 商业险 -->
		<view class="customView " v-if="['单商','交三','交商','单三'].includes(productName)">
			<view class="header dis a-c j-start">
				<view class="link"></view>
				<text class="title">商业险</text>
			</view>
			<!-- 内容区 -->
			<view class="content-body">
				<!-- 商业险险别 -->
				<view class="rowItem dis  j-s f-c"
					v-for="(kindsItem,kindsIndex) in planDataExpansion.genericPlanInfo.kinds" :key="kindsIndex">
					<view class="dis a-c j-s ">
						<text>{{kindsItem.kindName}}</text>
						<view v-if="kindsItem.kindCode=='A' && kindsItem.options"
							class="kindsOptions dis a-c j-s f-wrap">
							<view class="selectItem" @click="selectedLimit(kindsIndex,optionsIndex)"
								:class="kindsItem.amount==optionsItem.value?'itemactive':''"
								v-for="(optionsItem,optionsIndex) in kindsItem.options" :key="optionsIndex">
								{{optionsItem.label}}
							</view>
						</view>
						<text v-else class="extraCoverage" @click="extraCoverage(kindsIndex)">更多保额</text>
					</view>
					<!-- 险种保额 -->
					<view v-if="kindsItem.kindCode!='A' && kindsItem.options" class="kindsOptions dis a-c j-s "
						:class="[kindsItem.kindCode!='A'?'optionspP24':'']">
						<view class="selectItem" @click="selectedLimit(kindsIndex,optionsIndex)"
							:class="kindsItem.amount==optionsItem.value?'itemactive':''"
							v-for="(optionsItem,optionsIndex) in kindsItem.options.slice(0,4)" :key="optionsIndex">
							{{optionsItem.label}}
						</view>
					</view>
					<!-- 永安车损验车事项 -->
					<view
						v-if="kindsItem.kindCode=='A' &&  kindsItem.amount=='1' && planDataExpansion.nameSimple=='永安财险'"
						class="carDamageInspection dis j-s a-c" @click="carDamagePopup=true">
						<text>车损验车事项</text>
						<text>{{carCheckerName}}</text>
						<u-icon name="arrow-right" class="ml-1 " color="#333" size="11"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 驾意险 -->
		<view class="customView">
			<view class="header dis a-c j-start"
				:style="{borderBottom: accidentalDrivingVo.length>0?'1rpx solid #eee':'none'}">
				<view class="link"></view>
				<text class="title">意外险</text>
				<view class="add-Btn dis a-c" @click="goDriving">
					<u-icon name="plus-circle" color="#FFAC1D" size="16"></u-icon>
					<text>添加驾意险</text>
				</view>
			</view>
			<view class="content-body">
				<view class="dirving-rowItem dis  f-c " v-for="(dirvingItem,dirvingIndex) in accidentalDrivingVo"
					:key="dirvingIndex">
					<view class="dis a-c j-s">
						<text class="mr-4">{{dirvingItem.productName}}</text>
						<u-number-box v-model="dirvingItem.quantity" :min="0">
							<view slot="minus" class="numberBoxMinus dis a-c j-c ">
								<u-icon name="minus" size="12" color="#333" bold></u-icon>
							</view>
							<text slot="input" class="numberBoxInput">
								{{dirvingItem.quantity}}
							</text>
							<view slot="plus" class="numberBoxPlus dis a-c j-c ">
								<u-icon name="plus" color="#333" size="12" bold></u-icon>
							</view>
						</u-number-box>
					</view>
					<!-- 驾意险详细保额 -->
					<!-- 	<view class="dirving-accountability">
						<view class="item dis a-c j-s ">
							<text>驾乘人员团体人身意外伤害保险(意外医疗)</text>
							<text>30万</text>
						</view>
					</view> -->
					<!-- 驾意险金额 -->
					<view class="dirving-premium  dis a-c j-s ">
						<text>费用</text>
						<text>{{dirvingItem.premium}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 更多保额 -->
		<uni-Popup :show="extraCoveragePopup" @close='extraCoveragePopup=false' headerTitle="选择保额" overflow="auto"
			maxHeight="580rpx">
			<template #content>
				<view class="p-4 dis f-c extraCoveragePopup">
					<text class="title mb-4">{{extraCoverageList.kindName}}</text>
					<view class="dis a-c j-s f-wrap">
						<view class="extra-item  dis a-c j-c "
							:class="planDataExpansion.genericPlanInfo.kinds[kindIndex].amount==item.value?'extra-active':''"
							@click="extraCoverageLimit(index)" v-for="(item,index) in extraCoverageList.kindOptions"
							:key="index">
							{{item.label}}
						</view>
					</view>
				</view>
			</template>
		</uni-Popup>
		<!-- 车船税类型弹窗 -->
		<uni-Popup :show="vehicleTaxShow" @close='vehicleTaxShow=false' headerTitle="选择车船税" overflow="auto"
			:closeable="false" maxHeight="580rpx" :closeOnClickOverlay="false">
			<template #content>
				<view class="p-4">
					<u-radio-group v-model="vehicleAndVesselTaxVo.taxRelifFlag" placement="column" iconPlacement="right"
						@change="vehicleTaxPopupChange" style="gap: 30rpx 0">
						<view class="dis a-c" v-for="(item, index) in car_tax_codeoptions" :key="index">
							<u-radio activeColor="#FDE935" iconColor='#333' :name="item.value" style="width: 100%;">
								<view class="textregion dis f-c ">
									<text style="font-size: 30rpx;color: #333;">{{item.label}}</text>
								</view>
							</u-radio>
						</view>
					</u-radio-group>
				</view>
			</template>
		</uni-Popup>
		<!-- 减免税原因 -->
		<uni-Popup :show="relifReasonShow" @close='relifReasonShow=false' headerTitle="选择减免税原因" overflow="auto"
			:closeable="false" maxHeight="580rpx" :closeOnClickOverlay="false">
			<template #content>
				<view class="p-4">
					<u-radio-group v-model="vehicleAndVesselTaxVo.relifReason" placement="column" iconPlacement="right"
						@change="relifReasonPopupChange" style="gap: 30rpx 0">
						<view class="dis a-c" v-for="(item, index) in car_tax_reason_codeoptions" :key="index">
							<u-radio activeColor="#FDE935" iconColor='#333' :name="item.value" style="width: 100%;">
								<view class="textregion dis f-c ">
									<text style="font-size: 30rpx;color: #333;">{{item.label}}</text>
								</view>
							</u-radio>
						</view>
					</u-radio-group>
				</view>
			</template>
		</uni-Popup>
		<!-- 车损验车事项 -->
		<uni-Popup :show="carDamagePopup" @close='carDamagePopup=false' headerTitle="车损验车事项" overflow="auto"
			:closeable="false" maxHeight="580rpx" :closeOnClickOverlay="false">
			<template #content>
				<view class="p-4">
					<u-radio-group v-model="carChecker" placement="column" iconPlacement="right"
						@change="carCheckerPopupChange" style="gap: 30rpx 0">
						<view class="dis a-c" v-for="(item, index) in ya_damage_verificationoptions" :key="index">
							<u-radio activeColor="#FDE935" iconColor='#333' :name="item.value" style="width: 100%;">
								<view class="textregion dis f-c ">
									<text style="font-size: 30rpx;color: #333;">{{item.label}}</text>
								</view>
							</u-radio>
						</view>
					</u-radio-group>
				</view>
			</template>
		</uni-Popup>
		<!-- 填发日期 -->
		<u-datetime-picker :show="taxDocumentDateShow" v-model="taxDocumentDateValue" mode="date" :formatter="formatter"
			@cancel="taxDocumentDateShow=false" @close="taxDocumentDateShow=false" :closeOnClickOverlay="true"
			@confirm="taxDocumentDateconfirm" confirmText="确定"></u-datetime-picker>
		<!-- 完税地区 -->
		<u-picker :show="taxPaidAreaCodeShow" :columns="regionlist" @cancel="taxPaidAreaCodeShow=false" keyName="name"
			@confirm="taxPaidAreaCodeconfirm" @close="taxPaidAreaCodeShow=false" :closeOnClickOverlay="true"></u-picker>
	</view>
</template>
<script>
	export default {
		props: {
			//车船税信息
			vehicleAndVesselTaxVo: {
				type: Object,
				default: () => ({}),
			},
			productName: {
				type: String,
				default: "",
			},
			car_tax_codeoptions: Array, //车船税类型
			car_tax_reason_codeoptions: Array, //减免税原因
			ya_damage_verificationoptions: Array, //车损验车事项
			drivingInsuranceData: { //驾意险列表
				type: Array,
				default: () => [],
			},
			accidentalDrivingVo: { //已选驾意险
				type: Array,
				default: () => [],
			},
			// 方案综合数据
			planDataExpansion: {
				type: Object,
				default: () => ({}),
			},
			vehicleAndVesselTaxModel: {
				type: Object,
				default: () => ({}),
			}

		},
		data() {
			return {
				regionlist: [ //完税凭证地区
					[{
							"name": "北京市",
							"value": "110000"
						},
						{
							"name": "天津市",
							"value": "120000"
						},
						{
							"name": "河北省",
							"value": "130000"
						},
						{
							"name": "山西省",
							"value": "140000"
						},
						{
							"name": "内蒙古自治区",
							"value": "150000"
						},
						{
							"name": "辽宁省",
							"value": "210000"
						},
						{
							"name": "吉林省",
							"value": "220000"
						},
						{
							"name": "黑龙江省",
							"value": "230000"
						},
						{
							"name": "上海市",
							"value": "310000"
						},
						{
							"name": "江苏省",
							"value": "320000"
						},
						{
							"name": "浙江省",
							"value": "330000"
						},
						{
							"name": "安徽省",
							"value": "340000"
						},
						{
							"name": "福建省",
							"value": "350000"
						},
						{
							"name": "江西省",
							"value": "360000"
						},
						{
							"name": "山东省",
							"value": "370000"
						},
						{
							"name": "河南省",
							"value": "410000"
						},
						{
							"name": "湖北省",
							"value": "420000"
						},
						{
							"name": "湖南省",
							"value": "430000"
						},
						{
							"name": "广东省",
							"value": "440000"
						},
						{
							"name": "广西壮族自治区",
							"value": "450000"
						},
						{
							"name": "海南省",
							"value": "460000"
						},
						{
							"name": "重庆市",
							"value": "500000"
						},
						{
							"name": "四川省",
							"value": "510000"
						},
						{
							"name": "贵州省",
							"value": "520000"
						},
						{
							"name": "云南省",
							"value": "530000"
						},
						{
							"name": "西藏自治区",
							"value": "540000"
						},
						{
							"name": "陕西省",
							"value": "610000"
						},
						{
							"name": "甘肃省",
							"value": "620000"
						},
						{
							"name": "青海省",
							"value": "630000"
						},
						{
							"name": "宁夏回族自治区",
							"value": "640000"
						},
						{
							"name": "新疆维吾尔自治区",
							"value": "650000"
						},
						{
							"name": "台湾省",
							"value": "710000"
						},
						{
							"name": "香港特别行政区",
							"value": "810000"
						},
						{
							"name": "澳门特别行政区",
							"value": "820000"
						}
					]
				],
				vehicleTaxShow: false, //车船税弹窗
				relifReasonShow: false, //减免税原因弹窗
				taxDocumentDateShow: false, //填发日期
				taxPaidAreaCodeShow: false, //完税地区
				carDamagePopup: false, //车损验车弹窗
				extraCoveragePopup: false, //更多保额弹窗
				taxDocumentDateValue: Number(new Date()),
				carChecker: "",
				carCheckerName: "", //车损选中事项
				kindIndex: 0, //险别下标
				extraCoverageList: { //更多保额
					kindName: "",
					kindOptions: [],
				},
			}
		},
		onShow() {},
		async mounted() {},
		onLoad() {},
		methods: {
			goDriving() {
				uni.navigateTo({
					url: '/pages/quote/selectDriving?list=' + JSON.stringify(this.drivingInsuranceData)
				})
			},
			// 更多保额
			extraCoverage(index) {
				this.kindIndex = index; //获取当前险种下标
				this.extraCoverageList.kindName = this.planDataExpansion.genericPlanInfo.kinds[index].kindName;
				this.extraCoverageList.kindOptions = this.planDataExpansion.genericPlanInfo.kinds[index].options;
				this.extraCoveragePopup = true;
			},
			// 更多保额回调
			extraCoverageLimit(index) {
				this.planDataExpansion.genericPlanInfo.kinds[this.kindIndex].amount = this.extraCoverageList.kindOptions[
					index].value;
				const options = this.planDataExpansion.genericPlanInfo.kinds[this.kindIndex].options;
				const targetId = this.extraCoverageList.kindOptions[index].id;
				const activeIndex = options.findIndex(item => item.id === targetId);
				if (activeIndex !== -1) {
					const [targetItem] = options.splice(activeIndex, 1);
					options.unshift(targetItem);
				}
				this.extraCoveragePopup = false;

			},
			//完税地区
			taxPaidAreaCodeconfirm(e) {
				this.vehicleAndVesselTaxVo.taxPaidAreaCode = e.value[0].value;
				this.vehicleAndVesselTaxModel.taxPaidAreaCode = e.value[0].name;
				this.taxPaidAreaCodeShow = false;
			},
			//填发日期选择
			taxDocumentDateconfirm(e) {
				this.vehicleAndVesselTaxVo.taxDocumentDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.taxDocumentDateShow = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			//选择车船税类型
			vehicleTaxPopupChange(name) {
				this.vehicleAndVesselTaxModel.taxRelifFlag = this.car_tax_codeoptions.find(val => val.value == name).label;
				this.vehicleTaxShow = false;
			},
			// 选择减免税原因
			relifReasonPopupChange(name) {
				this.vehicleAndVesselTaxModel.relifReason = this.car_tax_reason_codeoptions.find(val => val.value == name)
					.label;
				this.relifReasonShow = false;
			},
			// 车损验车事项
			carCheckerPopupChange(name) {
				this.$emit('carCheckerUpdate', name)
				this.carCheckerName = this.ya_damage_verificationoptions.find(val => val.value == name).label;
				this.carDamagePopup = false;
			},
			//商业险险别选择回调
			selectedLimit(parentIndex, childIndex) {
				this.planDataExpansion.genericPlanInfo.kinds[parentIndex].amount = this.planDataExpansion.genericPlanInfo
					.kinds[parentIndex].options[childIndex].value
			},

			// 险别选中样式回调
			limitActiveMatch(parentIndex, childIndex) {},
			// 车船税信息
			/**
			 * @param {Object} value 选中选项
			 * @param {Object} name 表单操作字段
			 * @param {Object} showName 弹窗关闭标识
			 */
			dictionaryConfirm(value, name, showName) {
				this.vehicleAndVesselTaxVo[name] = value.value[0].value;
				this.model[name] = value.value[0].label;
				this[showName] = false;

			},

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-input__content__subfix-icon {
			margin-left: 12rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.u-form-item .uni-input-input {
			text-align: right !important;
			font-weight: bold;
			font-size: 28rpx;
			color: #333;
		}

		.u-form-item .u-form-item__body {
			padding: 15rpx 0;
			box-sizing: border-box;
		}
	}

	.custom-body {
		padding: 20rpx 30rpx 166rpx;
		box-sizing: border-box;
	}

	.customView {
		width: 100%;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin-bottom: 20rpx;

		.header {
			padding: 25rpx 30rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;

			.link {
				width: 6rpx;
				height: 30rpx;
				background: #FDE935;
				border-radius: 0rpx 6rpx 6rpx 0rpx;
				margin-right: 10rpx;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.add-Btn {
				margin-left: auto;
				font-size: 30rpx;
				color: #FFAC1D;

				text {
					margin-left: 4rpx;
					line-height: 1.4;
				}
			}
		}

		.content-body {
			padding: 0 30rpx;
			box-sizing: border-box;

			>.rowItem,
			.dirving-rowItem {
				font-size: 30rpx;
				color: #333;
				padding: 24rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #eee;

				.extraCoverage {
					font-size: 28rpx;
					color: #FFAC1D;
				}

				.optionspP24 {
					margin-top: 24rpx;
				}

				.kindsOptions {
					gap: 0 30rpx;
				}

				.carDamageInspection {
					width: 100%;
					background: #FFFAFA;
					padding: 15rpx 10rpx;
					box-sizing: border-box;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-top: 24rpx;

					text:first-child {
						font-size: 28rpx;
						color: #333;
						margin-right: auto;
					}

					text:nth-child(2) {
						font-size: 28rpx;
						color: #333;
					}
				}
			}

			>.rowItem:last-child,
			.dirving-rowItem:last-child {
				border: none;
			}

			.dirving-premium {
				margin-top: 16rpx;

				text:last-child {
					color: #FF540A;
					font-weight: bold;
				}
			}

			.dirving-accountability {
				padding: 15rpx 10rpx;
				box-sizing: border-box;
				background: #FFFAFA;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-top: 16rpx;

				.item {
					text:first-child {
						font-size: 26rpx;
						color: #666;
					}

					text:last-child {
						font-size: 26rpx;
						color: #333;
					}
				}
			}

			.vehicleTaxInfo {
				flex: 1;
				width: 100%;
				background: #FFFAFA;
				padding: 0 10rpx;
				box-sizing: border-box;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-bottom: 25rpx;
				display: inline-block;

				.item {
					padding: 15rpx 0;
					box-sizing: border-box;

					text:first-child {
						font-size: 28rpx;
						color: #333;
					}

					text:last-child {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}
				}
			}


			.selectItem {
				padding: 9rpx 22rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #eee;
				font-size: 30rpx;
				color: #333;
			}

			.itemactive {
				position: relative;
				border: 1px solid #FDE935;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				background-color: rgba(253, 233, 53, 0.15);

				&::after {
					content: '';
					position: absolute;
					right: 0;
					bottom: 0;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 0 24rpx 24rpx;
					/* 调整三角形大小 */
					border-color: transparent transparent #FDE935 transparent;
					/* 黄色三角形 */
				}

				&::before {
					content: '✓';
					position: absolute;
					right: 3rpx;
					/* 微调位置 */
					bottom: 0;
					font-size: 14rpx;
					/* 调整对勾大小 */
					color: #333;
					/* 对勾颜色 */
					z-index: 1;
					/* 确保对勾在三角形上方 */
				}

			}

		}
	}

	.extraCoveragePopup {
		>.f-wrap {
			gap: 40rpx 30rpx;
		}

		.title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}

		.extra-item {
			padding: 9rpx 24rpx;
			box-sizing: border-box;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 1rpx solid #EEEEEE;
			font-size: 30rpx;
			color: #666;
		}

		.extra-active {
			background-color: #FDE935;
			border: 1rpx solid #FDE935;
			color: #333;
		}
	}

	// 步进器自定义样式
	.numberBoxMinus {
		padding: 6rpx;
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #FDE935;
	}

	.numberBoxInput {
		font-size: 30rpx;
		color: #333;
		padding: 0 20rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.numberBoxPlus {
		padding: 6rpx;
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #FDE935;
		border: 1rpx solid #FDE935;
	}

	.suffixClass {
		margin-left: 10rpx;
		font-size: 30rpx;
	}
</style>