| <template> | |
|   <view> | |
| 		<uv-popup ref="popup" :round="24"> | |
|       <view class="popup__view"> | |
|         <view class="header"> | |
|           用户隐私保护提示 | |
|         </view> | |
|         <view class="content"> | |
|           在你使用 普兆医疗服务之前,请仔细阅读我已阅读并同意 | |
|           <text class="highlight" @click="$refs.modal.open('config_agreement', '服务协议与隐私条款')">《服务协议与隐私条款》</text> | |
|           和 | |
|           <text class="highlight" @click="$refs.modal.open('config_privacy', '个人信息保护指引')">《个人信息保护指引》</text> | |
|           如你同意该指引,请点击“同意“开始使用本小程序。 | |
|         </view> | |
|         <view class="footer"> | |
|           <button class="btn" @click="onConfirm(false)">拒绝</button> | |
|           <button class="btn btn-confirm" @click="onConfirm(true)">同意</button> | |
|         </view> | |
|       </view> | |
| 		</uv-popup> | |
| 
 | |
| 		<agreementModal ref="modal" @confirm="onConfirmSingle"></agreementModal> | |
| 
 | |
|   </view> | |
| </template> | |
| 
 | |
| <script> | |
| import agreementModal from '@/pages_order/components/agreementModal.vue' | |
| 
 | |
| export default { | |
|   name: 'agreementModal', | |
| 	components: { | |
| 		agreementModal, | |
| 	}, | |
|   data() { | |
|     return { | |
|       confirmSet: new Set(), | |
|     } | |
|   }, | |
|   methods: { | |
|     open() { | |
|       this.$refs.popup.open('bottom'); | |
|     }, | |
|     onConfirm(confirm) { | |
|       this.$emit('confirm', confirm) | |
|       this.$refs.popup.close(); | |
|     }, | |
|     onConfirmSingle(confirm, key) { | |
|       if (!this.confirmSet.has(key) && confirm) { | |
|         this.confirmSet.add(key) | |
|       } else if (this.confirmSet.has(key) && !confirm) { | |
|         this.confirmSet.delete(key) | |
|       } | |
|       if (this.confirmSet.size === 2) { | |
|         this.onConfirm(true) | |
|       } | |
|     } | |
|   }, | |
| } | |
| </script> | |
| 
 | |
| <style lang="scss" scoped> | |
| .popup__view { | |
|   display: flex; | |
|   flex-direction: column; | |
|   padding: 44rpx 46rpx 128rpx 46rpx; | |
| } | |
| 
 | |
| .header { | |
|   font-size: 32rpx; | |
|   font-family: PingFang SC; | |
|   font-weight: 600; | |
|   line-height: 1.5; | |
|   color: #000000; | |
| } | |
| 
 | |
| .content { | |
|   margin-top: 30rpx; | |
|   font-size: 32rpx; | |
|   font-family: PingFang SC; | |
|   font-weight: 400; | |
|   line-height: 1.5; | |
|   text-align: left; | |
|   color: #000000; | |
|    | |
|   .highlight { | |
|     color: #4C6EAE; | |
|   } | |
| } | |
| 
 | |
| .footer { | |
|   margin-top: 122rpx; | |
|   text-align: center; | |
|   .btn { | |
|     display: inline-flex; | |
|     align-items: center; | |
|     justify-content: center; | |
|     border-radius: 8rpx; | |
|     width: 232rpx; | |
|     padding: 18rpx 84rpx; | |
|     font-size: 32rpx; | |
|     font-family: PingFang SC; | |
|     font-weight: 500; | |
|     background: #F5F5F5; | |
|     color: #07C160; | |
|     &-confirm { | |
|       background: #07C160; | |
|       color: #FFFFFF; | |
|     } | |
|   } | |
|   .btn + .btn { | |
|     margin-left: 30rpx; | |
|   } | |
| } | |
| </style> |