activity/src/view/IntangibleCulturalHeritageCeremony/index.vue

<template>
  <div class="IntangibleCulturalHeritageCeremony" ref="main">
    <van-image
      :width="image.width"
      :height="image.height"
      @load="onLoad"
      :src="banner"
    />
    <div class="body">
      <p>
        陕西省首届非遗年度盛典，以“激发非遗活力 焕发时代光彩”为活动主题，由陕西省文化和旅游厅指导，陕西省非遗保护中心主办，陕西广电融媒体集团（台）承办，活动内容包括非遗年度人物、年度典型案例、年度优秀非遗工坊推荐评选及颁奖盛典。
      </p>
      <div class="card">
        <h3>一、活动名称</h3>
        <p>陕西省首届非遗年度盛典</p>
      </div>
      <div class="card">
        <h3>二、活动主题</h3>
        <p>激发非遗活力 焕发时代光彩</p>
      </div>
      <div class="card">
        <h3>三、活动时间</h3>
        <p>征集报名：2024年3月5日—3月15日</p>
        <p>选拔评审：2024年3月16日—20日</p>
        <p>结果公布及公示期：2024年3月23日—27日</p>
        <p>盛典仪式：2024年4月上旬</p>
      </div>
      <div class="card">
        <h3>四、活动内容</h3>
        <p>（一）非遗年度人物、年度典型案例、年度优秀非遗工坊推荐评选。</p>
        <p>
          聚焦2023年度重要非遗传承实践，深入挖掘非遗人物、事件，通过线上报名、网上投票、专家委员会评审、综合评议等方式，评选出具有典型性、代表性、引领性的非遗年度人物、典型案例和优秀非遗工坊。通过评选，旨在弘扬非遗保护的工匠精神和创新精神，激励非遗战线工作者、传承人凝心聚力、砥砺前行，推动陕西非遗保护事业迈上新台阶。
        </p>
        <p>（二）非遗年度人物、年度典型案例、年度优秀非遗工坊颁奖盛典。</p>
        <p>
          在推荐评选基础上，对获奖的年度人物、典型案例、优秀非遗工坊进行表彰，通过颁奖盛典精彩展示陕西非遗保护年度重大成果，持续扩大陕西非遗传播力影响力，进一步促进全社会对非遗的关注和热爱，形成人人传承发展中华优秀传统文化的生动局面和浓厚社会氛围。
        </p>
      </div>
      <div class="card">
        <h3>五、活动组织</h3>
        <p>指导单位：陕西省文化和旅游厅</p>
        <p>主办单位：陕西省非遗保护中心</p>
        <p>承办单位：陕西广电融媒体集团（台）</p>
      </div>
      <div class="card">
        <h3>六、报名须知</h3>
        <p>
          推选材料需统一发送至组委会指定邮箱，邮件名必须以推选类别+推荐单位+被推荐对象人名/案例名命名。
        </p>
        <van-cell-group inset title="联系人">
          <van-cell title="王霞" value="85261298" label="陕西省文化和旅游厅" />
          <van-cell
            title="马树楠"
            value="13891858345"
            label="陕西广电融媒体集团（台）"
          />
        </van-cell-group>
        <van-cell-group inset title="邮箱">
          <van-cell title="4110569@qq.com" />
        </van-cell-group>
        <van-cell-group inset title="推荐表下载">
          <van-cell
            @click="() => down(item)"
            :title="item.title + '下载'"
            is-link
            v-for="item in downList"
            :key="item.title"
          />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
// import { onMounted, reactive } from "vue";
import { isWechat } from '../../utils/isTerminal';
import { showToast } from 'vant';
const main = ref(null);
const image = ref({
  width: 0,
  height: 0
});
const banner =
  'https://cxzx.smcic.net/topic/tool/img/%E9%9D%9E%E9%81%97%E7%9B%9B%E5%85%B8/Banner_1708331520.jpg?a=' +
  Date.now();
const downList = [
  {
    title: '非遗年度人物',
    downUrl:
      'https://cxzx.smcic.net/topic/tool/img/%E9%9D%9E%E9%81%97%E7%9B%9B%E5%85%B8/%E9%99%95%E8%A5%BF%E9%9D%9E%E9%81%97%E5%B9%B4%E5%BA%A6%E4%BA%BA%E7%89%A9%E6%8E%A8%E8%8D%90%E8%A1%A8.docx'
  },
  {
    title: '非遗项目保护实践典型案例',
    downUrl:
      'https://cxzx.smcic.net/topic/tool/img/%E9%9D%9E%E9%81%97%E7%9B%9B%E5%85%B8/%E9%99%95%E8%A5%BF%E9%9D%9E%E9%81%97%E9%A1%B9%E7%9B%AE%E4%BF%9D%E6%8A%A4%E5%AE%9E%E8%B7%B5%E5%85%B8%E5%9E%8B%E6%A1%88%E4%BE%8B%E6%8E%A8%E8%8D%90%E8%A1%A8.docx'
  },
  {
    title: '非遗与旅游融合发展典型案例',
    downUrl:
      'https://cxzx.smcic.net/topic/tool/img/%E9%9D%9E%E9%81%97%E7%9B%9B%E5%85%B8/%E9%99%95%E8%A5%BF%E9%9D%9E%E9%81%97%E4%B8%8E%E6%97%85%E6%B8%B8%E8%9E%8D%E5%90%88%E5%8F%91%E5%B1%95%E5%85%B8%E5%9E%8B%E6%A1%88%E4%BE%8B%E6%8E%A8%E8%8D%90%E8%A1%A8.docx'
  },
  {
    title: '非遗进校园典型案例',
    downUrl:
      'https://cxzx.smcic.net/topic/tool/img/%E9%9D%9E%E9%81%97%E7%9B%9B%E5%85%B8/%E9%99%95%E8%A5%BF%E9%9D%9E%E9%81%97%E8%BF%9B%E6%A0%A1%E5%9B%AD%E5%85%B8%E5%9E%8B%E6%A1%88%E4%BE%8B%E6%8E%A8%E8%8D%90%E8%A1%A8.docx'
  },
  {
    title: '非遗在社区典型案例',
    downUrl:
      'https://cxzx.smcic.net/topic/tool/img/%E9%9D%9E%E9%81%97%E7%9B%9B%E5%85%B8/%E9%99%95%E8%A5%BF%E9%9D%9E%E9%81%97%E5%9C%A8%E7%A4%BE%E5%8C%BA%E5%85%B8%E5%9E%8B%E6%A1%88%E4%BE%8B%E6%8E%A8%E8%8D%90%E8%A1%A8.docx'
  },
  {
    title: '非遗传播展示典型案例',
    downUrl:
      'https://cxzx.smcic.net/topic/tool/img/%E9%9D%9E%E9%81%97%E7%9B%9B%E5%85%B8/%E9%99%95%E8%A5%BF%E9%9D%9E%E9%81%97%E4%BC%A0%E6%92%AD%E5%B1%95%E7%A4%BA%E5%85%B8%E5%9E%8B%E6%A1%88%E4%BE%8B%E6%8E%A8%E8%8D%90%E8%A1%A8.docx'
  },
  {
    title: '优秀非遗工坊',
    downUrl:
      'https://cxzx.smcic.net/topic/tool/img/%E9%9D%9E%E9%81%97%E7%9B%9B%E5%85%B8/%E9%99%95%E8%A5%BF%E4%BC%98%E7%A7%80%E9%9D%9E%E9%81%97%E5%B7%A5%E5%9D%8A%E6%8E%A8%E8%8D%90%E8%A1%A8.docx'
  }
];
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
// console.log(window.$originData);

const onLoad = e => {
  const h =
    (main.value.offsetWidth / e.target.naturalWidth) * e.target.naturalHeight;
  image.value = {
    width: main.value.offsetWidth,
    height: h
  };
};

const down = item => {
  if (isWechat) return showToast('请使用浏览器打开本页面');
  window
    .fetch(item.downUrl)
    .then(response => {
      // 确保服务器返回的是blob类型的数据
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(blob => {
      // 创建一个可下载的链接
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = item.title || 'download.docx'; // 如果未指定文件名，则默认为'download.docx'
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url); // 释放URL对象
      document.body.removeChild(a);
      if (window.$originData.orginParames.SL)
        window.$originData.orginParames.SL.Interactive.AppClick({
          page_name: item.title + '下载',
          event_type: item.downUrl
        });
    })
    .catch(error => {
      console.error('Error downloading file:', error);
    });
};
</script>
<style>
.IntangibleCulturalHeritageCeremony {
  width: 100vw;
  height: 100vh;
  background-color: #faf8f7;
  overflow-y: auto;
}
.body {
  padding: 1em;
  line-height: 2em;
  font-size: 16px;
}
.body p {
  text-indent: 2em;
}

.body .card {
  padding: 1em;
  background-color: #b0aea930;
  border-radius: 10px;
  margin: 1.5em 0;
}
</style>