asan-service/pages/download/_item+.vue

<template>
  <div class="download-details--page page">
    <section class="s1">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="item">
              <div class="title">
                <h1>{{ download.title }}</h1>
              </div>
              <div class="description">
                <div class="ck-content" v-html="download.description"></div>
                <div class="imgBox">
                  <img :src="download.image" :alt="download.title" />
                </div>
              </div>
              <div class="download">
                <div class="row">
                  <div class="col-12 mb-4">
                    <h3>دانلود با لینک مستقیم:</h3>
                  </div>
                  <div v-if="filteredFilesByOs('windows')" class="col-12 col-md-4 mb-5">
                    <div class="title">
                      <img src="/assets/img/download/windows.png" alt="نسخه ویندوز" />
                      <h3>نسخه ویندوز</h3>
                    </div>
                    <ul>
                      <li v-for="item in filteredFilesByOs('windows')" :key="item._id">
                        <a :href="item.file" download target="_blank">
                          <i class="fal fa-cloud-download"></i>
                          <span>{{ item.name }}</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div v-if="filteredFilesByOs('mac').length" class="col-12 col-md-4 mb-5">
                    <div class="title">
                      <img src="/assets/img/download/mac.png" alt="نسخه مک" />
                      <h3>نسخه مک</h3>
                    </div>
                    <ul>
                      <li v-for="item in filteredFilesByOs('mac')" :key="item._id">
                        <a :href="item.file" download target="_blank">
                          <i class="fal fa-cloud-download"></i>
                          <span>{{ item.name }}</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div v-if="filteredFilesByOs('linux').length" class="col-12 col-md-4 mb-5">
                    <div class="title">
                      <img src="/assets/img/download/linux.png" alt="نسخه لینوکس" />
                      <h3>نسخه لینوکس</h3>
                    </div>
                    <ul>
                      <li v-for="item in filteredFilesByOs('linux')" :key="item._id">
                        <a :href="item.file" download target="_blank">
                          <i class="fal fa-cloud-download"></i>
                          <span>{{ item.name }}</span>
                        </a>
                      </li>
                    </ul>
                  </div>

                  <div v-if="filteredFilesByOs('android').length" class="col-12 col-md-4 mb-5">
                    <div class="title">
                      <img src="/assets/img/download/android.svg" alt="نسخه اندروید" />
                      <h3>نسخه اندروید</h3>
                    </div>
                    <ul>
                      <li v-for="item in filteredFilesByOs('android')" :key="item._id">
                        <a :href="item.file" download target="_blank">
                          <i class="fal fa-cloud-download"></i>
                          <span>{{ item.name }}</span>
                        </a>
                      </li>
                    </ul>
                  </div>

                  <div v-if="filteredFilesByOs('ios').length" class="col-12 col-md-4 mb-5">
                    <div class="title">
                      <img src="/assets/img/download/ios.svg" alt="نسخه iOS" />
                      <h3>نسخه iOS</h3>
                    </div>
                    <ul>
                      <li v-for="item in filteredFilesByOs('ios')" :key="item._id">
                        <a :href="item.file" download target="_blank">
                          <i class="fal fa-cloud-download"></i>
                          <span>{{ item.name }}</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="zip-pass">
                <p>پسورد فایل فشرده: www.asan-service.com</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'DownloadDetailesPage',
  async asyncData({ $axios, params, error }) {
    try {
      const download = await $axios.get(`/api/public/downloads/${encodeURIComponent(params.item)}`)
      return {
        download: download.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      download: null
    }
  },
  head() {
    return {
      title: 'دانلود ' + this.download.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.download.title
        }
      ]
    }
  },
  methods: {
    filteredFilesByOs(os) {
      return this.download.files.filter(item => item.os === os)
    }
  }
}
</script>