gypsy-crm-frontend-vu/pages/login/components/ImportModel.vue

<template>
  <cwg-popup
    :visible="visible"
    :title="t('CountryNotice.title')"
    :showClose="false"
    :maskClick="false"
    @close="handleClose"
    @confirm="handleConfirm"
    :confirmDisabled="!checked"
    :confirmText="t(`CountryNotice.${countryKey}.confirm`)"
  >
    <view class="dialog-content">
      <view class="notice-text">
        <text>{{ t(`CountryNotice.${countryKey}.notice1`) }}</text>
        <text style="font-weight: bold; display: inline;">{{ t(`CountryNotice.${countryKey}.notice2`) }}</text>
      </view>
      <view class="notice-text">
        <text>{{ t(`CountryNotice.${countryKey}.notice3`) }}</text>
        <text style="font-weight: bold; display: inline;">{{ t(`CountryNotice.${countryKey}.notice4`) }}</text>
      </view>
      <view class="notice-text">
        <text>{{ t(`CountryNotice.${countryKey}.notice5`) }}</text>
        <text style="font-weight: bold; display: inline;">{{ t(`CountryNotice.${countryKey}.notice6`) }}</text>
        <text>{{ t(`CountryNotice.${countryKey}.notice7`) }}</text>
      </view>
      <view class="checkbox-wrapper" @click="checked = !checked">
        <up-checkbox-group>
          <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a"
                       :checked="checked" :name="true"></up-checkbox>
        </up-checkbox-group>
        <text class="checkbox-label">{{ t(`CountryNotice.${countryKey}.checkbox`) }}</text>
      </view>
    </view>
  </cwg-popup>
</template>

<script setup>
  import { ref, computed, watch } from 'vue'
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false
    },
    countryCode: {
      type: String,
      default: 'MY'
    }
  })

  const emit = defineEmits(['update:visible', 'confirm'])

  const checked = ref(false)

  const countryKey = computed(() => {
    return props.countryCode ? props.countryCode.toLowerCase() : 'my'
  })

  watch(() => props.visible, (newVal) => {
    if (newVal) {
      checked.value = false
    }
  })

  const handleClose = () => {
    if (checked.value) {
      emit('update:visible', false)
    } else {
      uni.showToast({
        title: 'Please check the confirmation box first',
        icon: 'none'
      })
    }
  }

  const handleConfirm = () => {
    if (checked.value) {
      emit('update:visible', false)
      emit('confirm')
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/uni.scss";

  .dialog-content {
    padding: px2rpx(10) px2rpx(20);
  }

  .notice-text {
    font-size: px2rpx(14);
    line-height: 1.6;
    color: #606266;
    margin-bottom: px2rpx(10);
    text-align: justify;
    word-break: break-word;
  }

  .checkbox-wrapper {
    margin-top: px2rpx(20);
    margin-bottom: px2rpx(10);
    display: flex;
    align-items: center;
    cursor: pointer;

    .checkbox-label {
      font-size: px2rpx(14);
      color: #666666;
      margin-left: px2rpx(8);
      user-select: none;
    }

    :deep(.u-checkbox) {
      display: flex;
      align-items: flex-start;
    }
  }
</style>