提交

src/view/AEROSPACE2023/index copy.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="AEROSPACE2023" @touchmove="touchmove">
+    <div ref="main" class="page" @touchstart="touchstart" @touchend="touchend">
+      <page0
+        :class="{
+          animate__animated: page === 0,
+          animate__fadeInUp: isUp && page === 0,
+          animate__fadeInDown: !isUp && page === 0,
+        }"
+        v-if="page === 0"
+      />
+      <page1
+        :class="{
+          animate__animated: page === 1,
+          animate__fadeInUp: isUp && page === 1,
+          animate__fadeInDown: !isUp && page === 1,
+        }"
+        v-if="page === 1"
+      />
+      <page2
+        :class="{
+          animate__animated: page === 2,
+          animate__fadeInUp: isUp && page === 2,
+          animate__fadeInDown: !isUp && page === 2,
+        }"
+        v-if="page === 2"
+      />
+      <page4
+        :class="{
+          animate__animated: page === 4,
+          animate__fadeInUp: isUp && page === 4,
+          animate__fadeInDown: !isUp && page === 4,
+        }"
+        v-if="page === 4"
+      />
+      <page5
+        :class="{
+          animate__animated: page === 5,
+          animate__fadeInUp: isUp && page === 5,
+          animate__fadeInDown: !isUp && page === 5,
+        }"
+        v-if="page === 5"
+      />
+      <page6
+        :class="{
+          animate__animated: page === 6,
+          animate__fadeInUp: isUp && page === 6,
+          animate__fadeInDown: !isUp && page === 6,
+        }"
+        v-if="page === 6"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import page0 from './page0.vue';
+import page1 from './page1.vue';
+import page2 from './page2.vue';
+import page4 from './page4.vue';
+import page5 from './page5.vue';
+import page6 from './page6.vue';
+// import { onMounted, reactive } from "vue";
+// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
+
+/**
+ * window.$originData.orginParames.title 页面标题
+ * window.$originData.orginParames.parameters 固定参数值
+ * window.$originData.urlParames url参数
+ */
+// console.log(window.$originData);
+// const play_stats = ref(false);
+const main = ref(null);
+const page = ref(0);
+const isUp = ref(true);
+let startStats = 0;
+let time = Date.now();
+let startY = 0;
+const isChangePage = cha => {
+  let out = false; // false 不能翻页  true 能翻页
+  let sondiv = getinnerele();
+  // 视口高度 main.value.offsetHeight
+  // 内容高度 sondiv.offsetHeight
+
+  // 视口基本大于内容  则可以翻页
+  /**
+   * 初始化y值或结束y值不在翻页区间，则不能翻页
+   * 翻页区间是scrolltop 10 以内 和 底部剩余空间10 以内
+   */
+  let h = main.value.offsetHeight + main.value.scrollTop;
+  //   if (Math.pow(cha, 2) < 6400) out = true;
+  let timeRange = Date.now() - time > 50;
+  if (cha < -80 && startStats < 10 && timeRange) {
+    // 下滑
+    /**
+     * 下滑初始滚动小于10 -翻页
+     */
+    out = true;
+  } else {
+    // 上滑
+    /**
+     * 下滑剩余小于10 -翻页
+     */
+    if (sondiv.offsetHeight - h < 10 && cha > 80 && timeRange) out = true;
+  }
+  return out;
+};
+const touchstart = e => {
+  time = Date.now();
+  startStats = main.value.scrollTop;
+  startY = e.changedTouches[0].clientY;
+};
+
+const touchend = e => {
+  const cha = startY - e.changedTouches[0].clientY;
+  if (!isChangePage(cha)) return;
+  //  cha > 0    向上滑动手指
+  //  cha < 0    向下滑动手指
+  //  初始位置滚动为0的，则判断距离25即可
+  // 距离足够则滑动到下一页；
+  let n = cha > 0 ? 1 : -1;
+  let dn = n + page.value;
+  let len = 5;
+  //   if (dn < 0) dn = len;
+  //   if (dn > len) dn = 0;
+  if (dn < 0) return;
+  if (dn > len) return;
+  isUp.value = n === 1;
+  page.value = dn;
+  main.value.scrollTop = 0;
+};
+
+const touchmove = e => {
+  const cha = startY - e.changedTouches[0].clientY;
+  if (main.value.scrollTop <= 1 && cha < 0) e.preventDefault();
+  const ele = getinnerele()
+  if (cha > 0 && main.value.offsetHeight + main.value.scrollTop >= ele.offsetHeight ) e.preventDefault();
+};
+
+const getinnerele = () => {
+  let nodes = main.value.childNodes || [];
+  return nodes[page.value];
+};
+</script>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+// 字体库
+@import url(./sass/base.scss);
+// @import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css);
+
+.AEROSPACE2023 {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-image: url(./img/background.jpg);
+  background-size: 100% 100%;
+  max-width: 750px;
+  min-width: 330px;
+  margin: 0 auto;
+  display: block;
+
+  .imgbtn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    z-index: 10;
+  }
+
+  .page {
+    width: 100%;
+    height: 100vh;
+    margin: 0 auto;
+    overflow-y: auto;
+
+    & > div {
+      width: 100%;
+    }
+  }
+
+  .excess-enter-active,
+  .excess-leave-active {
+    transition: opacity 0.1s ease;
+  }
+
+  .excess-enter-from,
+  .excess-leave-to {
+    opacity: 0;
+  }
+}
+</style>

src/view/AEROSPACE2023/index.vue

@@ -41,9 +41,26 @@
         }"
         v-if="page === 4"
       />
+      <page5
+        :class="{
+          animate__animated: page === 5,
+          animate__fadeInUp: isUp && page === 5,
+          animate__fadeInDown: !isUp && page === 5,
+        }"
+        v-if="page === 5"
+      />
+      <page6
+        :class="{
+          animate__animated: page === 6,
+          animate__fadeInUp: isUp && page === 6,
+          animate__fadeInDown: !isUp && page === 6,
+        }"
+        v-if="page === 6"
+      />
     </div>
   </div>
 </template>
+
 <script setup>
 import { ref } from 'vue';
 import page0 from './page0.vue';
@@ -51,6 +68,8 @@ import page1 from './page1.vue';
 import page2 from './page2.vue';
 import page3 from './page3.vue';
 import page4 from './page4.vue';
+import page5 from './page5.vue';
+import page6 from './page6.vue';
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 
@@ -62,7 +81,7 @@ import page4 from './page4.vue';
 // console.log(window.$originData);
 // const play_stats = ref(false);
 const main = ref(null);
-const page = ref(4);
+const page = ref(3);
 const isUp = ref(true);
 let startStats = 0;
 let time = Date.now();
@@ -111,7 +130,7 @@ const touchend = e => {
   // 距离足够则滑动到下一页；
   let n = cha > 0 ? 1 : -1;
   let dn = n + page.value;
-  let len = 4;
+  let len = 6;
   //   if (dn < 0) dn = len;
   //   if (dn > len) dn = 0;
   if (dn < 0) return;

src/view/AEROSPACE2023/page2.vue

@@ -1,6 +1,6 @@
 <template>
   <skeleton title="诚挚邀请" titleLine="">
-    <div class="bg bg5 animate__animated animate__backInUp">
+    <div class="bg bg2 animate__animated animate__backInUp">
       <p class="duanluo shouh">尊敬的&nbsp;&nbsp;先生/女士：</p>
       <p class="duanluo">
         鉴于您在行业的卓越成就和广泛影响力，特此诚邀您出席2023年8月22日（星期二）15:00在西安航天国际会议中心举办的“聚力空天
@@ -23,7 +23,7 @@ h2 {
   margin-bottom: 10px;
 }
 
-.bg5 {
+.bg2 {
   margin-top: 11.7vh;
 
   .shouh {

src/view/AEROSPACE2023/page3.vue

@@ -1,101 +1,41 @@
 <template>
-  <skeleton title="活动安排" titleLine="">
-    <div style="margin-top: 0;" class="bg bg4 animate__animated animate__backInUp">
-      <p class="duanluo">时间：8月22日 15:00-16:10</p>
-      <p class="duanluo">地点：西安航天国际会议中心东方红会议厅</p>
-      <p class="duanluo">规模：230人</p>
+  <skeleton title="" titleLine="">
+    <div class="bg bg3 animate__animated animate__backInUp">
+      <p class="duanluo shouh">指导单位</p>
     </div>
-    <div class="bg bg4 animate__animated animate__backInUp">
-      <p class="duanluo">会议议程</p>
-    </div>
-    <div class="link bg4 animate__animated animate__backInUp" v-for="(item, index) in list" :key="index">
-      <div class="link_icon"></div>
-      <p class="duanluo" v-text="item.key"></p>
-      <p class="duanluo" v-text="item.value"></p>
+    <p class="line-item">省商务厅</p>
+    <div class="bg bg3 animate__animated animate__backInUp">
+      <p class="duanluo shouh">主办单位</p>
     </div>
+    <p class="line-item">西安市投资合作局</p>
+    <p class="line-item">西安市阎良区人民政府</p>
+    <p class="line-item">西安阎良国家航空高技术产业基地管理委员会</p>
+    <p class="line-item">西安国家民用航天产业基地管理委员会</p>
+    <p class="line-item">富阎产业合作园区管理委员会</p>
   </skeleton>
 </template>
 <script setup>
 import skeleton from './skeleton.vue';
-const list = [
-    {
-        key: '15:00 - 15:05',
-        value: '阎良区（航空基地）领导致辞省商务厅领导致辞'
-    },
-    {
-        key: '15:05 - 15:20',
-        value: '领导致辞'
-    },
-    {
-        key: '15:20 - 15:30',
-        value: '阎良区（航空基地）投资环境推介'
-    },
-    {
-        key: '15:30 - 15:40',
-        value: '航天基地投资环境推介'
-    },
-    {
-        key: '15:40 - 16:00',
-        value: '阎良区（航空基地）、航天基地区域资源发布'
-    },
-    {
-        key: '16:00 - 16:05',
-        value: '专家解读西安空天产业发展机遇'
-    },
-    {
-        key: '16:05 - 16:10',
-        value: '集中签约'
-    }
-]
 </script>
 <style lang="scss">
 // 动画库
 @import url(./sass/animation.scss);
 @import url(./sass/base.scss);
-.bg4 {
-  margin-top: 9px;
-  margin-bottom: 9px;
-  padding-top: 7px!important;
-  padding-bottom: 7px!important;
-
-  .duanluo {
-    text-indent: 0 !important;
-    line-height: 1.5em;
-  }
+h2 {
+  margin-bottom: 10px;
 }
 
-.link {
-  padding-left: 20px;
-  font-size: 14px;
+.bg3 {
+  margin-top: 7px;
+  margin-bottom: 7px;
+  padding-top: 7px !important;
+  padding-bottom: 7px !important;
 
-  .link_icon {
-    width: 4.2px;
-    height: 4.2px;
-    background-color: #fff;
-    float: left;
-    transform: rotate(45deg);
-    margin-left: -10px;
-    margin-top: 0.5em;
-    position: relative;
-
-    &::after,
-    &::before {
-      content: ' ';
-      display: block;
-      width: 4.2px;
-      height: 4.2px;
-      position: absolute;
-      background-color: rgba($color: #ffffff, $alpha: 0.5);
-      top: 8px;
-      left: 8px;
-    }
-
-    
-    &::before {
-      background-color: rgba($color: #ffffff, $alpha: 0.2);
-      top: 16px;
-      left: 16px;
-    }
+  .shouh {
+    text-indent: 0 !important;
   }
 }
+.line-item {
+  padding: 7px 10px 7px 11px;
+}
 </style>

src/view/AEROSPACE2023/page4.vue

@@ -1,85 +1,100 @@
 <template>
   <skeleton title="活动安排" titleLine="">
-    <div class="location animate__animated animate__backInUp">
-      <img src="./img/location.jpg" />
+    <div style="margin-top: 0;" class="bg bg4 animate__animated animate__backInUp">
+      <p class="duanluo">时间：8月22日 15:00-16:10</p>
+      <p class="duanluo">地点：西安航天国际会议中心东方红会议厅</p>
+      <p class="duanluo">规模：230人</p>
     </div>
-
     <div class="bg bg4 animate__animated animate__backInUp">
-      <p class="duanluo">嘉宾入场时间：8月22日 14:30</p>
-      <div class="duanluo">
-        <p class="left">地址：</p>
-        <p class="right">航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅</p>
-      </div>
+      <p class="duanluo">会议议程</p>
+    </div>
+    <div class="link bg4 animate__animated animate__backInUp" v-for="(item, index) in list" :key="index">
+      <div class="link_icon"></div>
+      <p class="duanluo" v-text="item.key"></p>
+      <p class="duanluo" v-text="item.value"></p>
     </div>
-
-    <van-button style="margin-top: 7.9vh;" type="primary" block color="#61BFE9" @click="toDaohang">
-      一键导航
-    </van-button>
   </skeleton>
 </template>
 <script setup>
 import skeleton from './skeleton.vue';
-
-function toDaohang() {
-  if (!window.wx) return;
-  window.wx.checkJsApi({
-    jsApiList: ['openLocation'],
-    success: () => {
-      //打开指定位置
-      window.wx.openLocation({
-        latitude: 34.140384, // 纬度，浮点数，范围为90 ~ -90
-        longitude: 108.98944, // 经度，浮点数，范围为180 ~ -180。
-        name: '航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅', // 位置名
-        address: '', // 地址详情说明
-        scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
-        infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
-      });
+const list = [
+    {
+        key: '15:00 - 15:05',
+        value: '阎良区（航空基地）领导致辞省商务厅领导致辞'
     },
-  });
-}
+    {
+        key: '15:05 - 15:20',
+        value: '领导致辞'
+    },
+    {
+        key: '15:20 - 15:30',
+        value: '阎良区（航空基地）投资环境推介'
+    },
+    {
+        key: '15:30 - 15:40',
+        value: '航天基地投资环境推介'
+    },
+    {
+        key: '15:40 - 16:00',
+        value: '阎良区（航空基地）、航天基地区域资源发布'
+    },
+    {
+        key: '16:00 - 16:05',
+        value: '专家解读西安空天产业发展机遇'
+    },
+    {
+        key: '16:05 - 16:10',
+        value: '集中签约'
+    }
+]
 </script>
 <style lang="scss">
 // 动画库
 @import url(./sass/animation.scss);
 @import url(./sass/base.scss);
+.bg4 {
+  margin-top: 9px;
+  margin-bottom: 9px;
+  padding-top: 7px!important;
+  padding-bottom: 7px!important;
 
-.location {
-  font-family: PingFangSC-Regular, PingFang SC;
-  text-align: center;
-  background: #0007461a;
-  line-height: 1.5em;
-  width: 72vw;
-  height: 72vw;
-  padding: 10px;
-  margin: 0 auto;
-  border-radius: 6px;
-  border: 1px solid;
-  border-image: linear-gradient(
-      225deg,
-      rgba(50, 197, 255, 1),
-      rgba(25, 52, 178, 1)
-    )
-    1 1;
-
-  img {
-    width: 100%;
-    border-radius: 6px;
+  .duanluo {
+    text-indent: 0 !important;
+    line-height: 1.5em;
   }
 }
 
-.bg4 {
-  .duanluo {
-    text-indent: 0 !important;
+.link {
+  padding-left: 20px;
+  font-size: 14px;
+
+  .link_icon {
+    width: 4.2px;
+    height: 4.2px;
+    background-color: #fff;
+    float: left;
+    transform: rotate(45deg);
+    margin-left: -10px;
+    margin-top: 0.5em;
+    position: relative;
 
-    .left,
-    .right {
-        display: inline-block;
-        width: 3.3em;
-        vertical-align: top;
+    &::after,
+    &::before {
+      content: ' ';
+      display: block;
+      width: 4.2px;
+      height: 4.2px;
+      position: absolute;
+      background-color: rgba($color: #ffffff, $alpha: 0.5);
+      top: 8px;
+      left: 8px;
     }
 
-    .right {
-        width: calc(100% - 3.3em);
+    
+    &::before {
+      background-color: rgba($color: #ffffff, $alpha: 0.2);
+      top: 16px;
+      left: 16px;
     }
   }
 }

src/view/AEROSPACE2023/page5.vue

@@ -0,0 +1,86 @@
+<template>
+  <skeleton title="地址导航" titleLine="">
+    <div class="location animate__animated animate__backInUp">
+      <img src="./img/location.jpg" />
+    </div>
+
+    <div class="bg bg4 animate__animated animate__backInUp">
+      <p class="duanluo">嘉宾入场时间：8月22日 14:30</p>
+      <div class="duanluo">
+        <p class="left">地址：</p>
+        <p class="right">航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅</p>
+      </div>
+    </div>
+
+    <van-button style="margin-top: 7.9vh;" type="primary" block color="#61BFE9" @click="toDaohang">
+      一键导航
+    </van-button>
+  </skeleton>
+</template>
+<script setup>
+import skeleton from './skeleton.vue';
+
+function toDaohang() {
+  if (!window.wx) return;
+  window.wx.checkJsApi({
+    jsApiList: ['openLocation'],
+    success: () => {
+      //打开指定位置
+      window.wx.openLocation({
+        latitude: 34.140384, // 纬度，浮点数，范围为90 ~ -90
+        longitude: 108.98944, // 经度，浮点数，范围为180 ~ -180。
+        name: '航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅', // 位置名
+        address: '', // 地址详情说明
+        scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
+        infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
+      });
+    },
+  });
+}
+</script>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+@import url(./sass/base.scss);
+
+.location {
+  font-family: PingFangSC-Regular, PingFang SC;
+  text-align: center;
+  background: #0007461a;
+  line-height: 1.5em;
+  width: 72vw;
+  height: 72vw;
+  padding: 10px;
+  margin: 0 auto;
+  border-radius: 6px;
+  border: 1px solid;
+  border-image: linear-gradient(
+      225deg,
+      rgba(50, 197, 255, 1),
+      rgba(25, 52, 178, 1)
+    )
+    1 1;
+
+  img {
+    width: 100%;
+    border-radius: 6px;
+  }
+}
+
+.bg4 {
+  .duanluo {
+    text-indent: 0 !important;
+
+    .left,
+    .right {
+        display: inline-block;
+        width: 3.3em;
+        vertical-align: top;
+    }
+
+    .right {
+        width: calc(100% - 3.3em);
+    }
+  }
+}
+</style>

src/view/AEROSPACE2023/page6.vue

@@ -0,0 +1,99 @@
+<template>
+  <skeleton title="报名申请" titleLine="">
+    <div class="bg bg5 animate__animated animate__backInUp">
+      <p class="duanluo">
+        姓名：
+        <input v-model="Data.name" type="text" class="save" />
+      </p>
+    </div>
+    <div class="bg bg5 animate__animated animate__backInUp">
+      <p class="duanluo">
+        电话：
+        <input v-model="Data.tel" type="text" class="save" />
+      </p>
+    </div>
+    <div class="bg bg5 animate__animated animate__backInUp">
+      <p class="duanluo">
+        单位：
+        <input v-model="Data.university" type="text" class="save" />
+      </p>
+    </div>
+    <div class="bg bg5 animate__animated animate__backInUp">
+      <p class="duanluo">
+        职务：
+        <input v-model="Data.type" type="text" class="save" />
+      </p>
+    </div>
+
+    <van-button
+      style="margin-top: 7.9vh"
+      type="primary"
+      block
+      color="#61BFE9"
+      @click="toBaoMing"
+    >
+      我要报名
+    </van-button>
+  </skeleton>
+</template>
+<script setup>
+import axios from 'axios';
+import { ref } from 'vue';
+import { showLoadingToast, closeToast, showToast } from 'vant';
+import skeleton from './skeleton.vue';
+const Data = ref({});
+function toBaoMing() {
+  const oriData = new FormData();
+  oriData.append('operateId', window.$originData.orginParames.operateId);
+  oriData.append('name', Data.value.name);
+  oriData.append('phone', Data.value.tel);
+  oriData.append('university', Data.value.university);
+  oriData.append('type', Data.value.type);
+  showLoadingToast({
+    message: '报名中...',
+    forbidClick: true,
+    duration: 0,
+  });
+  axios({
+    method: 'post',
+    url: 'https://topic.smcic.net/operate/enroll/store',
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    data: oriData,
+  })
+    .then(r => {
+      console.log(r);
+      closeToast();
+      showToast('报名成功');
+    })
+    .catch(() => {
+      closeToast();
+      showToast('报名失败');
+    });
+}
+</script>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+@import url(./sass/base.scss);
+.bg5 {
+  padding-top: 7px !important;
+  padding-bottom: 7px !important;
+  margin-top: 19px;
+  margin-bottom: 19px;
+
+  .duanluo {
+    text-align: left !important;
+    text-indent: 0 !important;
+
+    .save {
+      outline: none !important;
+      border: none;
+      width: calc(100% - 4em);
+      display: inline-block;
+      background-color: #ffffff00;
+    }
+  }
+}
+</style>