pet-system-fulfiller-app/components/agreement/index.vue

<template>
  <view v-if="visible" class="agreement-mask" @touchmove.stop.prevent>
    <view class="agreement-container">
      <view class="agreement-header">
        <text class="agreement-title">{{ title || '协议详情' }}</text>
      </view>
      <scroll-view scroll-y class="agreement-body">
        <rich-text :nodes="content"></rich-text>
      </scroll-view>
      <view class="agreement-footer">
        <button class="confirm-btn" @click="handleClose">确 定</button>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 协议详情组件 (纯 UI 组件)
 * @property {Boolean} visible 控制显示隐藏
 * @property {String} title 协议标题
 * @property {String} content 协议内容 (支持 HTML)
 * @event {Function} close 关闭回调
 */
export default {
  name: 'Agreement',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  },
  methods: {
    /**
     * 关闭弹窗
     */
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.agreement-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-container {
  width: 600rpx;
  max-height: 80vh;
  background-color: #ffffff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

.agreement-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 2rpx solid #f5f5f5;
}

.agreement-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.agreement-body {
  flex: 1;
  padding: 30rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: #666666;
  max-height: 50vh;
}

.agreement-footer {
  padding: 30rpx;
  border-top: 2rpx solid #f5f5f5;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ff5722;
  color: #ffffff;
  border-radius: 40rpx;
  font-size: 28rpx;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>