增加分享和转发功能

小程序/jingtailan/src/main.ts

@@ -1,11 +1,14 @@
 import { createSSRApp } from "vue";
 import App from "./App.vue";
+import share from './util/share'
 import 'animate.css';
 
 
+
 export function createApp() {
   const app = createSSRApp(App);
+  app.mixin(share)
   return {
-    app,
+    app, 
   };
 }

小程序/jingtailan/src/pages/home/index.vue

@@ -1,32 +1,32 @@
-<script setup lang='ts'>
-import TabBarTopHome from '@/components/TabBarTopHome.vue';
-import { baseIMGUrl } from '@/api/request';
-import { HomeApi } from '@/api/api/home/index';
-import { onLoad, onShow } from '@dcloudio/uni-app';
-import { ref } from 'vue';
+<script setup lang="ts">
+import TabBarTopHome from "@/components/TabBarTopHome.vue";
+import { baseIMGUrl } from "@/api/request";
+import { HomeApi } from "@/api/api/home/index";
+import { onLoad, onShareAppMessage, onShow } from "@dcloudio/uni-app";
+import { ref } from "vue";
 import TabBar from "@/components/TabBar.vue";
 import commonn from "@/static/data/common";
 
-const models = ref([] as any)
+const models = ref([] as any);
 
-const timer = ref()
+const timer = ref();
 
-const baseUrl = `https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/`
+const baseUrl = `https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/`;
 // 背景动画
-const bgAnimaled = ref(false)
-const changeAnimaled = ref(false)
+const bgAnimaled = ref(false);
+const changeAnimaled = ref(false);
 // 瓶子动画
-const bottleAnimaled = ref(false)
+const bottleAnimaled = ref(false);
 // 切换动画
-const changBottleAn = ref(false)
-const nameChangeAn = ref(false)
+const changBottleAn = ref(false);
+const nameChangeAn = ref(false);
 // 瓶子放大动画
-const bottleBig = ref(false)
+const bottleBig = ref(false);
 // 月光动画
-const moonAn1 = ref(false) // 放大过程
-const moonAn2 = ref(false) // 下跌过程
+const moonAn1 = ref(false); // 放大过程
+const moonAn2 = ref(false); // 下跌过程
 
-const musicState = ref(false)
+const musicState = ref(false);
 
 // 瓶子切换列表
 const bottles = ref([
@@ -34,92 +34,93 @@ const bottles = ref([
     id: 1,
     namePic: `${baseUrl}text2.png`,
     bottlePic: `${baseUrl}2.png`,
-    disc1: '国家主席习近平在达沃斯国际会议中心出席世界经济论坛2017年年会开幕式，',
-    disc2: '向世界经济论坛赠送了一座《四面方尊》',
+    disc1:
+      "国家主席习近平在达沃斯国际会议中心出席世界经济论坛2017年年会开幕式，",
+    disc2: "向世界经济论坛赠送了一座《四面方尊》",
     bgUrl: `${baseUrl}bg2.png`,
-    detailId: 47
+    detailId: 47,
   },
   {
     id: 0,
     namePic: `${baseUrl}text1.png`,
     bottlePic: `${baseUrl}1.png`,
-    disc1: '中央政府',
-    disc2: '赠送西藏自治区大型礼品',
+    disc1: "中央政府",
+    disc2: "赠送西藏自治区大型礼品",
     bgUrl: `${baseUrl}bg1.png`,
-    detailId: 49
+    detailId: 49,
   },
   {
     id: 4,
     namePic: `${baseUrl}text5.png`,
     bottlePic: `${baseUrl}5.png`,
-    disc1: '中央政府',
-    disc2: '赠送宁夏回族自治区大型礼品',
+    disc1: "中央政府",
+    disc2: "赠送宁夏回族自治区大型礼品",
     bgUrl: `${baseUrl}bg2.png`,
-    detailId: 48
-  }, {
+    detailId: 48,
+  },
+  {
     id: 2,
     namePic: `${baseUrl}text3.png`,
     bottlePic: `${baseUrl}3.png`,
-    disc1: '中央政府',
-    disc2: '赠送新疆维吾尔自治区大型礼品',
+    disc1: "中央政府",
+    disc2: "赠送新疆维吾尔自治区大型礼品",
     bgUrl: `${baseUrl}bg3.png`,
-    detailId: 50
-  }, {
+    detailId: 50,
+  },
+  {
     id: 3,
     namePic: `${baseUrl}text4.png`,
     bottlePic: `${baseUrl}4.png`,
-    disc1: '中央政府',
-    disc2: '赠送广西壮族自治区大型礼品',
+    disc1: "中央政府",
+    disc2: "赠送广西壮族自治区大型礼品",
     bgUrl: `${baseUrl}bg3.png`,
-    detailId: 43
-  }
-])
+    detailId: 43,
+  },
+]);
 
 // 开始滑动的y
-const startY = ref(0)
-const endY = ref(0)
+const startY = ref(0);
+const endY = ref(0);
 
 const handleTouchStart = (event: any) => {
-  startY.value = event.changedTouches[0].pageY
-}
+  startY.value = event.changedTouches[0].pageY;
+};
 
-const handleTouchMove = (event: any) => {
-
-}
+const handleTouchMove = (event: any) => {};
 const handleTouchEnd = (event: any) => {
-  endY.value = event.changedTouches[0].pageY
-  console.log(endY.value - startY.value)
-  if (endY.value - startY.value < -20) {
-    changBottleAn.value = true
-    moonAn1.value = true
+  endY.value = event.changedTouches[0].pageY;
+  console.log(endY.value - startY.value);
+  if (endY.value - startY.value <script -20) {
+    changBottleAn.value = true;
+    moonAn1.value = true;
     setTimeout(() => {
-      moonAn2.value = true
-      moonAn1.value = false
+      moonAn2.value = true;
+      moonAn1.value = false;
       setTimeout(() => {
-        moonAn2.value = false
-      }, 500)
-    }, 300)
+        moonAn2.value = false;
+      }, 500);
+    }, 300);
     setTimeout(() => {
-      curIndex.value = curIndex.value == (bottles.value.length - 1) ? 0 : curIndex.value + 1
+      curIndex.value =
+        curIndex.value == bottles.value.length - 1 ? 0 : curIndex.value + 1;
       setTimeout(() => {
-        nameChangeAn.value = true
+        nameChangeAn.value = true;
         setTimeout(() => {
-          nameChangeAn.value = false
-        }, 500)
-      }, 500)
-    }, 500)
+          nameChangeAn.value = false;
+        }, 500);
+      }, 500);
+    }, 500);
     setTimeout(() => {
-      changBottleAn.value = false
-      bottleBig.value = true
+      changBottleAn.value = false;
+      bottleBig.value = true;
       setTimeout(() => {
-        bottleBig.value = false
-      }, 500)
-    }, 1000)
+        bottleBig.value = false;
+      }, 500);
+    }, 1000);
   }
-}
-
+};
 
-const curIndex = ref(0)
+const curIndex = ref(0);
 
 // 预加载所有图片
 const preloadImg = (bottles: any) => {
@@ -127,19 +128,17 @@ const preloadImg = (bottles: any) => {
   //   const img = new Image()
   //   img.src = item.bgUrl
   // })
-}
-
-
+};
 
 onLoad(async (options) => {
   const res: any = await HomeApi.getExplore();
   if (res.data.code === 0) {
     models.value = res.data.data;
   }
-  preloadImg(bottles.value)
+  preloadImg(bottles.value);
   // 分配第一个瓶子
   // curBottle.value = bottles.value[0]
-  curIndex.value = 0
+  curIndex.value = 0;
 
   const res2: any = await HomeApi.sendVisit();
 
@@ -153,97 +152,164 @@ onLoad(async (options) => {
   //     })
   //   }
   // }, 3000)
-
-})
+});
 
 const musicPlay = () => {
   // console.log('背景音乐播放')
-  commonn.innerAudioContext.play()
-  commonn.musicSta = true
-  musicState.value = true
-}
+  commonn.innerAudioContext.play();
+  commonn.musicSta = true;
+  musicState.value = true;
+};
 
 const musicPause = () => {
   // console.log('背景音乐关闭')
-  commonn.innerAudioContext.pause()
-  commonn.musicSta = false
-  musicState.value = false
-}
+  commonn.innerAudioContext.pause();
+  commonn.musicSta = false;
+  musicState.value = false;
+};
 
-const page = ref('')
+const page = ref("");
 onShow(() => {
-  page.value = '/pages/home/index'
-  musicState.value = commonn.musicSta
+  page.value = "/pages/home/index";
+  musicState.value = commonn.musicSta;
   if (!commonn.musicSta) {
-    commonn.innerAudioContext.currentTime = 0
-    commonn.innerAudioContext.play()
-    commonn.musicSta = true
-    musicState.value = true
+    commonn.innerAudioContext.currentTime = 0;
+    commonn.innerAudioContext.play();
+    commonn.musicSta = true;
+    musicState.value = true;
   }
-  bottleAnimaled.value = true
+  bottleAnimaled.value = true;
   setTimeout(() => {
     // 背景动画开启
-    bgAnimaled.value = true
-    changeAnimaled.value = true
+    bgAnimaled.value = true;
+    changeAnimaled.value = true;
     setTimeout(() => {
-      changeAnimaled.value = false
-      bgAnimaled.value = false
-      bottleAnimaled.value = false
-    }, 2000)
-  }, 100)
-})
+      changeAnimaled.value = false;
+      bgAnimaled.value = false;
+      bottleAnimaled.value = false;
+    }, 2000);
+  }, 100);
+});
 
 // 跳转至国礼详情页
 const goDetail = (path: string, id: number) => {
-  console.log('跳转')
-  uni.navigateTo({ url: path + "?id=" + id });
-}
+  console.log("跳转");
+  uni.navigateTo({ url: path + "?id=" + id }); 
+};
+
 </script>
-  
+
 <template>
   <scroll-view class="all" :show-scrollbar="false">
-    <view class="all" v-if="models" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
-      @touchend="handleTouchEnd">
+    <view
+      class="all"
+      v-if="models"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+    >
       <!-- <TabBarTop title="今日" />、 -->
       <TabBarTopHome title="探索" />
       <!-- <img class="parclose-box" :class="{ 'parclose-box-an': bgAnimaled }"
       src="https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/parclose.png" alt="" mode="widthFix"> -->
-      <div class="parclose-box" :class="{ 'parclose-box-an': bgAnimaled && bottles[curIndex].id == 0, }">
-        <img class="bgImg" :src="bottles[curIndex].bgUrl" alt="" mode="widthFix">
-        <img class="moonImg" :class="{ 'parclose-change-an': moonAn1, 'parclose-change-an2': moonAn2 }"
-          :src="`${baseUrl}moon.png`" alt="" mode="heightFix">
+      <div
+        class="parclose-box"
+        :class="{ 'parclose-box-an': bgAnimaled && bottles[curIndex].id == 0 }"
+      >
+        <img
+          class="bgImg"
+          :src="bottles[curIndex].bgUrl"
+          alt=""
+          mode="widthFix"
+        />
+        <img
+          class="moonImg"
+          :class="{
+            'parclose-change-an': moonAn1,
+            'parclose-change-an2': moonAn2,
+          }"
+          :src="`${baseUrl}moon.png`"
+          alt=""
+          mode="heightFix"
+        />
       </div>
       <!-- 背景层 -->
       <div class="bg-coverage">
         <!-- 故宫 -->
-        <img class="gugon" :class="{ 'bg-coverage-gugon': bgAnimaled }"
-          src="https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/gugong.png" alt="" mode="widthFix">
+        <img
+          class="gugon"
+          :class="{ 'bg-coverage-gugon': bgAnimaled }"
+          src="https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/gugong.png"
+          alt=""
+          mode="widthFix"
+        />
         <!-- 山下 -->
-        <img class="shanxia" :class="{ 'bg-coverage-gugon': bgAnimaled }"
-          src="https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/mDown.png" alt="" mode="widthFix">
+        <img
+          class="shanxia"
+          :class="{ 'bg-coverage-gugon': bgAnimaled }"
+          src="https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/mDown.png"
+          alt=""
+          mode="widthFix"
+        />
         <!-- 山上 -->
-        <img class="shanshang" :class="{ 'bg-coverage-shanshang': bgAnimaled }"
-          src="https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/mUp.png" alt="" mode="widthFix">
+        <img
+          class="shanshang"
+          :class="{ 'bg-coverage-shanshang': bgAnimaled }"
+          src="https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/mUp.png"
+          alt=""
+          mode="widthFix"
+        />
         <!-- 云 -->
-        <img class="cloud" :class="{ 'bg-coverage-cloud': bgAnimaled }"
-          src="https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/cloud.png" alt="" mode="widthFix">
+        <img
+          class="cloud"
+          :class="{ 'bg-coverage-cloud': bgAnimaled }"
+          src="https://houseoss.4dkankan.com/project/bjfljtl/img/data/A1Day/cloud.png"
+          alt=""
+          mode="widthFix"
+        />
       </div>
       <!-- 瓶子层 -->
       <div class="bottle-coverage">
         <!-- 作品名称 -->
-        <img class="bottle-name" :class="{ 'bottle-name-an': changeAnimaled, 'name-change-an': nameChangeAn }"
-          :style="{ display: changBottleAn && !nameChangeAn ? 'none' : '' }" :src="bottles[curIndex].namePic" alt=""
-          @tap="goDetail('/pages/explore/gift/detail/index', bottles[curIndex].detailId)" mode="widthFix">
+        <img
+          class="bottle-name"
+          :class="{
+            'bottle-name-an': changeAnimaled,
+            'name-change-an': nameChangeAn,
+          }"
+          :style="{ display: changBottleAn && !nameChangeAn ? 'none' : '' }"
+          :src="bottles[curIndex].namePic"
+          alt=""
+          @tap="
+            goDetail(
+              '/pages/explore/gift/detail/index',
+              bottles[curIndex].detailId
+            )
+          "
+          mode="widthFix"
+        />
         <view v-show="!changBottleAn && !nameChangeAn" class="bottle-name-view">
-
         </view>
         <!-- 文字 -->
-        <div class="disc-box" :class="{ 'bottle-change-an': changBottleAn }"
-          :style="{ fontSize: bottles[curIndex].id == 1 ? '25rpx' : 'auto', height: bottles[curIndex].id == 4 ? '45%' : '' }">
+        <div
+          class="disc-box"
+          :class="{ 'bottle-change-an': changBottleAn }"
+          :style="{
+            fontSize: bottles[curIndex].id == 1 ? '25rpx' : 'auto',
+            height: bottles[curIndex].id == 4 ? '45%' : '',
+          }"
+        >
           <!-- 作品 -->
-          <img class="bottle-box"
-            :class="{ 'bottle-box-an': bottleAnimaled && bottles[curIndex].id == 0, 'bottleItem-change-an': bottleBig }"
-            :src="bottles[curIndex].bottlePic" alt="" mode="heightFix">
+          <img
+            class="bottle-box"
+            :class="{
+              'bottle-box-an': bottleAnimaled && bottles[curIndex].id == 0,
+              'bottleItem-change-an': bottleBig,
+            }"
+            :src="bottles[curIndex].bottlePic"
+            alt=""
+            mode="heightFix"
+          />
           <div :class="{ 'disc-boxx': bgAnimaled }">
             <div class="disc-top">{{ bottles[curIndex].disc1 }}</div>
             <div class="disc-bottom">{{ bottles[curIndex].disc2 }}</div>
@@ -253,14 +319,24 @@ const goDetail = (path: string, id: number) => {
     </view>
     <TabBar :page="page" />
     <div class="music-box">
-      <image v-show="!musicState" @click="musicPlay()" src="@/static/img/bottomInco/musicAc.png" alt="" />
-      <image v-show="musicState" @click="musicPause()" src="@/static/img/bottomInco/music.png" alt="" />
+      <image
+        v-show="!musicState"
+        @click="musicPlay()"
+        src="@/static/img/bottomInco/musicAc.png"
+        alt=""
+      />
+      <image
+        v-show="musicState"
+        @click="musicPause()"
+        src="@/static/img/bottomInco/music.png"
+        alt=""
+      />
     </div>
     <!-- <audio src="https://houseoss.4dkankan.com/project/bjfljtl/audio/bgMusic.mp3" style="display: none;" autoplay></audio> -->
   </scroll-view>
 </template>
-  
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
 div,
 image {
   overflow: hidden;
@@ -270,19 +346,16 @@ image {
   will-change: transform;
 }
 
-
 ::-webkit-scrollbar {
   display: none !important;
 }
 
-
 .all {
   width: 100vw;
   height: calc(100vh - 150rpx);
   background-color: #ffffff;
   overflow: hidden;
 
-
   .parclose-box {
     width: 100vw;
     height: calc(100vh - 150rpx);
@@ -346,7 +419,7 @@ image {
   }
 
   .parclose-box-an {
-    animation: parclose-box-animal .7s;
+    animation: parclose-box-animal 0.7s;
   }
 
   @keyframes parclose-box-animal {
@@ -356,13 +429,9 @@ image {
 
     100% {
       transform: scale(1);
-
     }
   }
 
-
-
-
   .bg-coverage {
     width: 100%;
     height: 100%;
@@ -397,7 +466,6 @@ image {
       }
     }
 
-
     .bg-coverage-cloud {
       animation: animateingItemCloud 1.5s;
     }
@@ -411,7 +479,6 @@ image {
       100% {
         display: block;
         transform: scale(1);
-
       }
     }
 
@@ -473,7 +540,7 @@ image {
     }
 
     .bottle-name-an {
-      animation: bottle-name-animal .5s;
+      animation: bottle-name-animal 0.5s;
     }
 
     @keyframes bottle-name-animal {
@@ -522,7 +589,6 @@ image {
       }
 
       100% {
-
         transform: scale(1);
       }
     }
@@ -536,7 +602,7 @@ image {
       transform: translate(-50%, -50%);
       text-align: center;
       color: #ffffff;
-      font-family: 'SOURCEHANSERIFCN-BOLD';
+      font-family: "SOURCEHANSERIFCN-BOLD";
 
       image {
         width: 100%;
@@ -595,9 +661,6 @@ image {
           margin-bottom: 0;
         }
       }
-
-
-
     }
 
     .bottle-change-an {
@@ -632,4 +695,4 @@ image {
     height: 100%;
   }
 }
-</style>
+</style>

小程序/jingtailan/src/util/share.ts

@@ -0,0 +1,17 @@
+const onShareTimeline=(res:any)=> {
+  return {
+  title: '北京法郎厂景泰蓝艺术博物馆',
+  path: '/pages/home/index',
+  }
+  }
+  //发送给朋友
+  const onShareAppMessage =(res:any)=>{
+  return {
+    title: '北京法郎厂景泰蓝艺术博物馆',
+    path: '/pages/home/index',
+  }
+  }
+  export default{
+  onShareTimeline ,
+  onShareAppMessage ,
+  }