mteacher/src/components/Protocol.vue

<template>
	<div class="protocol">
		<div class="agreeProtocol" v-show="isProtocol">
			<slot>
				<van-checkbox @click="onChange" :checked-color="checkedColor" v-model="checked" v-if="!exists">
					<template #icon="props">
						<!-- {{ props.checked }} -->
						<img :src="props.checked ? activeButtonIcon : inactiveButtonIcon" >
					</template>
				</van-checkbox>
				<i :style="leftStyle" @click="onClick" v-if="!exists">{{ leftString }}</i>
				<i :style="leftStyle" v-if="exists">查看</i>
				<span @click="onPopupClose" :style="rightStyle">《{{ rightString }}》</span>
			</slot>
		</div>

		<!-- 协议 -->
		<van-popup id="protocolPopup" v-model="popupStatus" position="bottom">
			<m-protocol :protocolHTML="protocolHTML" :popupStatus="popupStatus" :checked="checked" :tenantId="tenantId" @onClose="onPopupClose" @onPopupSure="onPopupSure" />
		</van-popup>
	</div>
</template>

<script>
	import MProtocol from './MProtocol'
	import {
		queryProduceContract,
		getContract
	} from '@/api/smallWeb'
	// import setLoading from '@/utils/loading'
	export default {
		name: 'mheader',
		components: {
			MProtocol
		},
		props: {
			value: {
				type: Boolean,
				default () {
					return false
				}
			},
			tenantId: [String, Number], // 机构签署协议
			type: {
				type: [String, Number],
				default: 0
			},
			musicGroupId: String,
			checkedColor: String,
			userId: String,
			activeIcon: String,
			inactiveIcon: String,
			leftStyle: String,
			leftString: {
				type: String,
				default () {
					return '我已阅读并同意'
				}
			},
			rightStyle: String,
			rightString: {
				type: String,
				default () {
					return '产品及服务协议'
				}
			}
		},
		data() {
			return {
				popupStatus: false,
				checked: this.value,
				exists: true, // 是否已经生成过协议
				protocolHTML: null, // 协议内容
				fullPath: null, //保存
				isProtocol: false // 是否有协议内容
			}
		},
		mounted() {
			this.__init()
			// window.onhashchange = () => {
			// 	this.popupStatus = false
			// }
			window.addEventListener('hashchange', this.onHash, false)
		},
		methods: {
			onHash() {
				this.popupStatus = false
			},
			async __init() {
				if(this.tenantId) {
					try {
						const res = await getContract({ id: this.tenantId, type: this.type })
						this.protocolHTML = res.data
						this.isProtocol = this.protocolHTML ? true : false
						this.exists = false
						this.checked = false
						this.$emit('input', this.exists)
					} catch(e) {
						//
					}
				} else {
					let params = {
						userId: this.userId ? this.userId : null,
						musicGroupId: this.musicGroupId ? this.musicGroupId : null
					}
					const token = sessionStorage.getItem('token')
					if(token) {
						localStorage.setItem('Authorization', token)
						localStorage.setItem('userInfo', token)
					}

					await queryProduceContract(params).then(res => {
						let result = res.data
						this.protocolHTML = '' // 重置协议
						if (result.code == 200) {
							this.protocolHTML = result.data.productContract
							this.isProtocol = this.protocolHTML ? true : false
							this.exists = result.data.exists
							this.checked = this.exists
							this.$emit('input', this.exists)
						}
					})
				}
				// 如果没有协议内容则不 显示协议
				if(!this.protocolHTML) {
					this.isProtocol = this.protocolHTML ? true : false
					this.checked = true // 默认选中，学生端则不用默认选中
					this.$emit('input', this.checked || this.exists)
				}
			},
			// onChange() {
			// 	this.$emit('input', this.checked)
			// },
			// onClick() {
			// 	this.checked = !this.checked
			// 	this.$emit('input', this.checked)
			// },
			onChange() {
				if(this.tenantId) {
					if(this.checked) {
						this.checked = false
						this.onPopupClose()
					} else {
						this.$emit('input', false)
					}
				} else {
					this.$emit('input', this.checked)
				}
			},
			onClick() {
				if(this.tenantId) {
					if(this.checked) {
						this.checked = false
						this.$emit('input', false)
					} else {
						this.onPopupClose()
					}
				} else {
					this.checked = !this.checked
					this.$emit('input', this.checked)
				}
			},
			onPopupSure() {
				this.$emit('input', true)
				this.checked = true
				this.onPopupClose()
			},
			onPopupClose() {
				// 判断是否有协议内容
				if(!this.protocolHTML) {
					return
				}
				this.popupStatus = !this.popupStatus
				// 打开弹窗
				if(this.popupStatus) {
					const route = this.$route
					let times = 0
					/* eslint-disable */
					for(let i in route.query) {
						times += 1
					}
					let fullPath = route.fullPath
					const origin = window.location.origin
					const url = times > 0 ? '&pto=1' : '?pto=1'
					history.pushState("", "", `${origin}/#${fullPath}${url}`)
				} else {
					window.history.go(-1)
				}
				let popup = document.querySelector('#protocolPopup')
				if (popup) {
					popup.scrollTop = 0
				}
			}
		},
		watch: {
			popupStatus(newValue) {
				this.$emit('changeCheck', newValue)
			},
			value(nowValue) {
				if (nowValue) {
					this.checked = nowValue
				}
			}
		},
		destroyed() {
			window.removeEventListener('hashchange', this.onHash)
		}
	}
</script>

<style lang="less" scoped>
	.agreeProtocol {
		display: flex;
		align-items: center;
		color: #333333;
		padding: .1rem .16rem;
		font-size: .14rem;
		line-height: 1;
		i {
			font-style: normal;
		}
		.van-checkbox {
			padding-right: .08rem;
			img {
				width: 20px;
				height: 20px;
			}
		}

		/deep/.van-checkbox__icon .van-icon {
			border-color: #e9eaef;
			background-color: #fff;
		}

		/deep/.van-checkbox__icon--checked .van-icon {
			color: #fff;
			background-color: #F85043;
			border-color: #F85043;
		}

		span {
			color: #01C1B5;
		}
	}

	@media screen and (max-width: 320px) {
		.agreeProtocol .van-checkbox img {
			width: 20px;
			height: 20px;
		}
	}
</style>