zhapp/pages/quote/modules/standardPlan.vue

<template>
	<view class="standard-body">
		<!-- 交强险/车船税 -->
		<view class="standardView" 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 dis f-c ">
				<view class="rowItem dis a-c j-s ">
					<text>交强险</text>
					<text>投保</text>
				</view>
				<view class="rowItem dis a-c j-s " @click="vehicleTaxShow=true">
					<text>车船税</text>
					<view class="dis a-c">
						<text class="vehicleTaxName">{{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 ml-1">
								<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="standardView mt-2" v-if="['单商','交三','交商','单三'].includes(productName)">
			<!-- 标题 -->
			<view class="header dis a-c j-start"
				style="background: linear-gradient( 180deg, #FFFCEA 0%, #FFFFFF 100%);border-top: 1rpx solid #FFE1A4;">
				<view class="link"></view>
				<text class="title">商业险</text>
			</view>
			<!-- 内容 -->
			<view class="content-body dis f-c ">
				<view class="rowItem dis a-c j-s" v-for="(item,index) in planDataExpansion.genericPlanInfo.kinds"
					:key="index">
					<text>{{item.kindName}}</text>
					<text v-if="['A','SY_WBDWGZ'].includes(item.kindCode)" class="td">投保</text>
					<text v-else-if="['D4', 'SY_FJ_YBW2'].includes(item.kindCode)"
						class="td">{{convertedValue(item.amount)}}</text>
					<text v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(item.kindCode)"
						class="td">{{item.amount}}%</text>
					<text v-else-if="['TY1', 'TY2', 'TY3', 'TY4'].includes(item.kindCode)"
						class="td">{{item.serviceTimes}}次</text>
					<text v-else class="td">{{convertedValue(item.amount)}}</text>
				</view>
			</view>
		</view>
		<!-- 驾意险 -->
		<view class="standardView mt-2 mb-2"
			v-if="planDataExpansion.genericPlanInfo && planDataExpansion.genericPlanInfo.drivings && planDataExpansion.genericPlanInfo.drivings.length">
			<!-- 标题 -->
			<view class="header dis a-c j-start"
				style="background: linear-gradient( 180deg, #F9F6FF 0%, #FFFFFF 100%);;border-top: 1rpx solid #E3D5FF;">
				<view class="link"></view>
				<text class="title">驾意险</text>
			</view>
			<!-- 内容 -->
			<view class="content-body dis f-c ">
				<view class="dirving-rowItem dis f-c "
					v-for="(item,index) in planDataExpansion.genericPlanInfo.drivings" :key="index">
					<view class="dis a-c j-s">
						<text>{{item.productName}}</text>
						<text class="quantity dis a-c j-end ">x{{item.quantity}}份</text>
					</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>{{item.premium}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 车船税类型弹窗 -->
		<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>
		<!-- 填发日期 -->
		<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, //减免税原因
			// 方案综合数据
			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, //完税地区
				taxDocumentDateValue: Number(new Date()),
			}
		},
		onShow() {

		},
		async mounted() {},
		onLoad() {

		},
		methods: {
			//完税地区
			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;
			},
			// 数字单位转化
			convertedValue(num) {
				if (num < 10000) {
					return num.toString();
				} else if (num < 100000000) {
					return (Math.floor(num / 10000 * 10) / 10) + '万';
				} else {
					return (Math.floor(num / 100000000 * 10) / 10) + '亿';
				}
			},
		}
	}
</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;
		}
	}

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

	.standardView {
		background-color: #fff;
		border-radius: 20rpx;

		.header {
			padding: 20rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #FFF8F8 0%, #FFFFFF 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			border-top: 1rpx solid #FFD9D9;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}

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

			.rowItem {

				>text:first-child {
					font-size: 30rpx;
					color: #666;
				}

				>text:last-child,
				.vehicleTaxName {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}
			}

			.vehicleTaxInfo {
				padding: 0 10rpx;
				box-sizing: border-box;
				background: #FFFAFA;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}

			.dirving-rowItem {
				font-size: 30rpx;
				color: #333;

				.dirving-accountability {
					padding: 15rpx 10rpx;
					box-sizing: border-box;
					background: #FCFAFF;
					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;
						}
					}
				}

				.quantity {
					margin-left: 60rpx;
					width: 70rpx;
				}

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

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

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