gypsy-crm-frontend-vu/pages/customer/components/ClauseNZTwoPopup.vue

<template>
  <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true" custom-class="clause-popup"
    :title="title">
    <view class="popup-content">
      <scroll-view scroll-y class="clause-content">
        <view>
          <view class="h4"><text v-t="'news_add_field1.activitiesNZTwo.item8'"></text>{{ startDate }} - {{ endDate }}
          </view>
          <view class="h4" v-t="'news_add_field1.activitiesNZTwo.item10'"></view>
          <view class="list">
            <view class="list-item" v-for="i in 6" :key="i" v-t="`news_add_field1.activitiesNZTwo.item1${i}`" />
            <view class="list-item">
              <view class="table-container">
                <view class="table">
                  <view class="tr">
                    <view class="th" v-for="th in 6" :key="th" v-t="`news_add_field1.activitiesNZTwo.item${3 + th}1`">
                    </view>
                  </view>
                  <view class="tr" v-for="r in 4" :key="r">
                    <view class="td" v-for="c in 6" :key="c" v-t="`news_add_field1.activitiesNZTwo.item${3 + r}${c}`">
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="list-item" v-for="i in 6" :key="i" v-t="`news_add_field1.activitiesNZTwo.item${17 + i - 1}`" />
          </view>
        </view>
      </scroll-view>
    </view>
    <template #footer>
      <button @click="close">{{ t('Btn.Cancel') }}</button>
      <button type="primary" @click="close">{{ t('Btn.Confirm') }}</button>
    </template>
  </cwg-popup>
</template>

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  visible: { type: Boolean, default: false },
  startDate: { type: String, default: '' },
  endDate: { type: String, default: '' },
  title: { type: String, default: '' }
});
const emit = defineEmits(['update:visible']);

const { t } = useI18n();
const visible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
});
const close = () => { visible.value = false; };
</script>