|
@@ -1,252 +1,249 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
|
+ <!-- 协议 -->
|
|
|
+ <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)
|
|
|
- }
|
|
|
+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)
|
|
|
- }
|
|
|
- }
|
|
|
+ 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 + +location.pathname;
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
+.agreeProtocol {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #333333;
|
|
|
+ padding: 0.1rem 0.16rem;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ line-height: 1;
|
|
|
+ i {
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ .van-checkbox {
|
|
|
+ padding-right: 0.08rem;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- /deep/.van-checkbox__icon .van-icon {
|
|
|
- border-color: #e9eaef;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
+ /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;
|
|
|
- }
|
|
|
+ /deep/.van-checkbox__icon--checked .van-icon {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #f85043;
|
|
|
+ border-color: #f85043;
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- color: #01C1B5;
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ color: #01c1b5;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- @media screen and (max-width: 320px) {
|
|
|
- .agreeProtocol .van-checkbox img {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
+@media screen and (max-width: 320px) {
|
|
|
+ .agreeProtocol .van-checkbox img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|