zhywpt-h5/components/Hetong/Hetong.vue

<template>
	<view class="hetong-container">
		<view class="check-content">
			<view class="posi">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle">
					</u-checkbox>
				</u-checkbox-group>

				<view class="content">
					我已阅读并同意 <text class="item-line" @click="isShow = true">{{`《${linkName}》`}}</text>
					<!-- 					和<text class="item-line"
						@click="handleDialog('risk')">《风险提示告知书》</text> -->
				</view>
			</view>
		</view>
		<u-modal v-model="isShow" width='700rpx' mask-close-able :show-title='false' :show-confirm-button='false'>
			<view class="slot-content">
				<Protocol :url='typeUrl' />
				<!-- <ETCUserAgreement v-if='type=="etc"' /> -->
			</view>
		</u-modal>
	</view>
</template>
<script setup lang='ts'>
	import {
		ref,
		computed
	} from 'vue'
	import Protocol from './Protocol.vue'
	interface PropsType {
		modelValue: any
		link: any
	}
	const props = defineProps < PropsType > ()
	const emit = defineEmits(['update:modelValue'])

	const checked = computed({
		get: function() {
			return props.modelValue
		},
		set: function(newValue) {
			emit('update:modelValue', newValue)
		},
	})
	//获取页面配置
	const isShow = ref(false)
	const typeUrl = ref('')
	const linkName = computed(() => {
		let name = ''
		if (props.link) {
			console.log(props.link);
			typeUrl.value = props.link
			let arr = props.link.split('/')
			arr = arr[arr.length - 1].split('_')
			if(arr.length <= 1){
				name = arr[0]
			}else{
				arr.splice(0, 1)
				arr = arr.join('_')
				arr = arr.split('.')
				arr.pop()
				name = arr.join('.')
			}

		}
		return name
	})

	function handleDialog(types) {
		isShow.value = true
		if (types == 'etc') {
			typeUrl.value = '/sett-minio/template/ETC用户协议(阳光行A).docx'
		} else {
			typeUrl.value = '/sett-minio/template/风险提示告知书.docx'
		}
	}
</script>
<!-- 签约管理 -->
<style lang='scss' scoped>
	.sig-manage {
		height: 100vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hetong-container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	:deep(.u-checkbox__label) {
		margin: 0;
		margin-right: 5rpx;
	}

	.check-content {
		flex: 1 1 auto;

		.posi {
			bottom: 30rpx;
			left: 0;
			width: 100%;
		}
	}

	.content {
		display: inline;
		word-wrap: break-word;

	}

	.item-line {
		color: $u-type-primary;
		cursor: pointer;
	}

	.btn {
		height: 80rpx;
		opacity: 1;
		border-radius: 100rpx;
		margin: 20rpx;
	}

	.btn-text {
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.nav-bg {
		/* background: linear-gradient(to right, #13E7C1, #43A1E0); */
		border: 1px solid #FFFFFF;
		background: #1AAC1B;
	}

	.btn-buttom {
		flex: 0 0 auto;
	}

	.slot-content {
		height: 82vh;
		overflow-y: auto;
	}
</style>