applet/components/contractConfirm/contractConfirm.vue

<template>
  <!-- 协议弹出层 -->
  <uv-popup ref="popupRef" mode="bottom" round="30rpx" closeable>
    <view class="popup-content">
      <view class="title"> 阅读并同意相关合同 </view>
      <view class="content">
        <text>我已阅读并同意</text>
        <text
          class="agreement-text"
          v-for="(item, index) in agreementList"
          :key="index"
          @click="emit('agreement', item.code)"
          >《{{ item.lable }}》</text
        >
      </view>
      <view class="notice"> 本协议采用第三方电子签章服务，具有法律效力 </view>
      <view class="btn">
        <view class="u-btn-two" @click="handleAgree">同意协议合同</view>
        <view class="u-btn-two btn-refuse" @click="popupRef.close()">
          不同意
        </view>
      </view>
    </view>
  </uv-popup>
</template>

<script setup name="contractConfirm">
import { ref } from "vue";

const emit = defineEmits(["agreement", "agree"]);
const props = defineProps({
  agreementList: {
    type: Array,
    default: () => [],
  },
});
const popupRef = ref(null);
const agreementList = ref(props.agreementList); // 协议列表

const handleAgree = () => {
  popupRef.value.close();
  emit("agree");
};

const open = () => {
  popupRef.value.open();
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.popup-content {
  padding: 30rpx 30rpx 20rpx 30rpx;
  .title {
    font-size: 32rpx;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 30rpx;
  }
  .content {
    font-size: 28rpx;
    text-align: center;
    color: #1a1a1a;
    .agreement-text {
      color: #0090ff;
    }
  }
  .notice {
    text-align: center;
    margin-top: 48rpx;
    margin-bottom: 20rpx;
    color: #999999;
    font-size: 28rpx;
  }
  .btn {
    .u-btn-two {
      height: 91rpx;
      line-height: 91rpx;
      margin-bottom: 20rpx;
    }
    .u-btn-two.btn-refuse {
      background: #ffffff;
      border: 1rpx solid #cccccc;
      border-radius: 47rpx;
      box-sizing: border-box;
      color: #1a1a1a;
    }
  }
}
</style>