zhapp/pages/quote/specialAgreementPage.vue

<template>
	<view class="page">
		<!-- 头部吸顶内容 -->
		<u-sticky zIndex="999" customNavHeight="0">
			<view class="header dis a-c j-s">
				<u-icon name="arrow-left" color="#333" size="18" :bold="true" style="margin-right: 20rpx;"
					@click="back"></u-icon>
				<u-search placeholder="输入特别约定名称搜索" v-model="clauseName" bgColor="#f7f7f7"
					:actionStyle="{position: 'absolute',right:'20px',background:'#FDE935',padding:'8rpx 24rpx',boxSiting:'border-box',borderRadius:'100rpx'}"
					actionText="搜索" @search="search" @custom="custom" @clear="clear"></u-search>
			</view>
			<!-- 横版提示文字 -->
			<view class="hint dis a-c j-c">
				特别约定内容中，含有*号的内容，选中后可以编辑
			</view>
		</u-sticky>
		<!-- 特约内容 -->
		<view class="content">
			<view class="contentTabs">
				<!-- 交强商业切换选项 -->
				<u-tabs :list="contentTabslist" @click="tabsClick" :activeStyle="{color:'#333',fontWeight:'bold'}"
					:inactiveStyle="{color:'#999'}" :current="current" :scrollable="false" lineColor="#FDE935"
					lineWidth="60rpx" style="box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.04);"></u-tabs>
				<view class="scroll-content">
					<template v-if="current==0 && ['0330','0330034002','0330034001'].includes(productId)">
						<checkbox-group @change="checkboxChangejq">
							<view class="specialTermsList dis " v-for="(item,index) in jq" :key="index">
								<!-- 特约选择框 -->
								<checkbox :value="item.id" :checked="item.checked" activeBackgroundColor="#FDE935"
									iconColor="#333" activeBorderColor="#FDE935" />
								<!-- 特约内容 -->
								<view class="dis f-c view ml-1">
									<text class="name">特约名称：{{item.clauseName}}</text>
									<view class="Content">
										<u--textarea v-if=" item.isEdit==1 && item.checked" v-model="item.clauseContent"
											placeholder="请输入内容"></u--textarea>
										<text v-else>特约内容：{{item.clauseContent}}</text>
									</view>
								</view>
							</view>
						</checkbox-group>
					</template>
					<template v-if="current==1 && ['034001','0330034002','0330034001'].includes(productId)">
						<checkbox-group @change="checkboxChangesy">
							<view class="specialTermsList dis " v-for="(item,index) in sy" :key="index">
								<!-- 特约选择框 -->
								<checkbox :value="item.id" :checked="item.checked" activeBackgroundColor="#FDE935"
									iconColor="#333" activeBorderColor="#FDE935" />
								<!-- 特约内容 -->
								<view class="dis f-c view ml-1">
									<text class="name">特约名称：{{item.clauseName}}</text>
									<view class="Content">
										<u--textarea v-if="item.isEdit==1 && item.checked" v-model="item.clauseContent"
											placeholder="请输入内容"></u--textarea>
										<text v-else>特约内容：{{item.clauseContent}}</text>
									</view>
								</view>
							</view>
						</checkbox-group>
					</template>
				</view>
			</view>
		</view>
		<view class="footer dis a-c j-s">
			<view class="btn btns dis a-c j-c" @click="cancel">
				取消
			</view>
			<view class="btn dis a-c j-c " @click="submit">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clauseName: "",
				current: 0,
				contentTabslist: [{
					name: '交强险特别约定'
				}, {
					name: '商业险特别约定'
				}],
				ListData: [], //列表
				productId: "",
			}
		},
		onShow() {

		},
		computed: {
			jq() {
				return this.ListData.filter(item => item.riskCode === "0507");
			},
			sy() {
				return this.ListData.filter(item => item.riskCode === "0510");
			},
		},
		async onLoad(options) {

			if (options) {
				await this.specialTermsList(options.companyId);
				this.productId = options.productId;
				let list = JSON.parse(options.specialInfoVo).map(val => val.id);
				this.ListData.map(val => {
					if (list.includes(val.id)) {
						val.checked = true;
					}
					return val;
				})
			}

		},
		methods: {
			checkboxChangejq(value) {
				console.log(value.detail.value);
				let listId = value.detail.value;
				this.jq.map(ele => {
					if (listId.includes(ele.id)) {
						ele.checked = true;
					} else {
						ele.checked = false;
					}
					return ele;
				})
			},
			checkboxChangesy(value) {
				console.log(value.detail.value);
				let listId = value.detail.value;
				this.sy.map(ele => {
					if (listId.includes(ele.id)) {
						ele.checked = true;
					} else {
						ele.checked = false;
					}
					return ele;
				})
			},
			//取消
			cancel() {
				uni.navigateBack(-1)
			},
			//确定
			submit() {

				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.specialInfoVo = this.ListData.filter(val => val.checked == true); //替换特约
				uni.navigateBack(-1)

			},
			tabsClick(e) {
				this.current = e.index;
			},
			async specialTermsList(id) {
				let res = await this.$http.post('/manager/clause/getClausePage', {
					clauseName: this.clauseName,
					companyId: id,
					pages: 1,
					riskCode: 'all',
					size: 100,
				});
				res.data.records.map(val => {
					val.checked = false;
					return val;
				})
				this.ListData = res.data.records;
			},
			back() {
				uni.navigateBack(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;
		height: 100%;
	}

	.header {
		padding: 96rpx 30rpx 16rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		width: 100%;

	}

	/* 顶部提示 */
	.hint {
		width: 100%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		background: #FFFBD7;
		font-size: 30rpx;
		color: #333;
	}

	.content {
		padding: 20rpx;
		box-sizing: border-box;

		/* 选项卡容器 */
		.contentTabs {
			flex: 1;
			display: flex;
			flex-direction: column;
			height: 100%;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 0rpx 0rpx;

			/* 滚动区域 */
			.scroll-content {
				height: calc(100vh - 520rpx);
				overflow-y: auto;
				padding: 0 20rpx;
				/* 增加底部留白 */
				box-sizing: border-box;
				/* 确保padding计入高度 */

			}
		}
	}

	// 特约内容样式
	.specialTermsList {

		padding: 30rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #eee;

		.view {
			flex: 1;

			.name {
				font-size: 30rpx;
				color: #333;
				margin-bottom: 15rpx;
			}

			.Content {
				width: 100%;
				font-size: 28rpx;
				color: #666;
				flex: 1;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 25rpx 30rpx 55rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 254, 245, 0.7) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		backdrop-filter: blur(12rpx);

		.btn {
			width: 100%;
			background: #FDE935;
			padding: 25rpx 20rpx;
			box-sizing: border-box;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			font-size: 36rpx;
			color: #1F1F1F;
			margin: 0 10rpx;
		}

		//操作按钮特殊样式
		.btns {
			background: rgba(253, 233, 53, 0.2);
			border: 1rpx solid #FDE935;
			padding: 22rpx 20rpx;
		}
	}

	::v-deep {
		uni-checkbox {
			height: 32rpx;
		}

		uni-checkbox .uni-checkbox-input {
			width: 30rpx;
			height: 30rpx;
		}

		uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
			transform: translate(-50%, -48%) scale(.60)
		}
	}
</style>