切换7.2

activityPages/activityDetail/activityDetail.vue

@@ -8,6 +8,25 @@
       <!-- 内容部分 -->
       <view class="content">
         <view v-if="detailData.ActivityName" class="dialog-title" :class="1 == 1 ? 'brackets-title' : ''">{{ detailData.ActivityName }}</view>
+        <view class="audio-card" v-if="1 == 2">
+          <view class="card-title text_oneLine"> {{ title }}.mp3 </view>
+          <slider activeColor="#3385FF" :max="audioTime" :value="curTime" @change="handleAudioSliderChange($event)" block-size="16" class="slider" />
+          <view class="card-time">
+            <text class="time">{{ curTime | formatVoiceTime }}</text>
+            <text class="time">{{ audioTime | formatVoiceTime }}</text>
+          </view>
+          <view class="is-paly-card">
+            <image
+              @click.stop="audioPlayBack"
+              class=""
+              :src="
+                curVoiceId === detailData.ActivityId && !curAudioPaused
+                  ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/suspend_icon.png'
+                  : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/play_icon.png'
+              "
+            ></image>
+          </view>
+        </view>
         <view class="city-box">
           <text v-if="detailData.ActivityTypeName">活动类型：</text>
           <view class="city">
@@ -244,6 +263,13 @@ import jurisdiction from "./jurisdiction/components.vue";
 import freeCharge from "@/components/freeCharge";
 let app = getApp({ allowDefault: true });
 export default {
+  filters: {
+    formatVoiceTime(e) {
+      let m = parseInt(e / 60);
+      let s = parseInt(e % 60);
+      return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
+    },
+  },
   data() {
     return {
       id: "",
@@ -278,8 +304,21 @@ export default {
       mobileEdit: "", //外呼手机号
       goOnNextStep: "", //设置外呼号后弹出哪个
       mailboxBinding: false, //是否绑定邮箱
+      curTime: 0,
+      audioTime: 0, //当前音频总时长
+      play: false,
     };
   },
+  computed: {
+    curVoiceId() {
+      //当前正在播放的音频id
+      return this.$store.state.audioBg.activityId;
+    },
+    curAudioPaused() {
+      //当前音频是否暂停状态
+      return this.$store.state.audioBg.paused;
+    },
+  },
   components: {
     modalDialog,
     jurisdiction,
@@ -332,114 +371,13 @@ export default {
           }
         });
     },
+    //拨打电话
     phonebtn(phone) {
       uni.makePhoneCall({
         phoneNumber: phone,
       });
     },
-    //报名
-    signupAdd(type = 1) {
-      if (this.isNeedAddCountryCode) {
-        this.isAreaCode = true;
-        this.areaCode = {
-          id: Number(this.id),
-          type,
-        };
-      } else {
-        activity
-          .signupAdd({
-            ActivityId: Number(this.id),
-            SignupType: type,
-          })
-          .then((res) => {
-            if (res.Ret == 200) {
-              this.signupType = res.Data.SignupType;
-              this.signupStatus = res.Data.SignupStatus;
-              this.countryCode = res.Data.CountryCode;
-              this.mobileEdit = res.Data.Mobile;
-              this.goOnNextStep = res.Data.GoFollow;
-              this.idTypeCancel = {
-                cutId: res.Data.ActivityId,
-                state: 1,
-              };
-              if (res.Data.GoBindEmail) {
-                this.mailboxBinding = true;
-                return;
-              }
-              if (res.Data.SignupStatus !== "Success") {
-                this.isShow = true;
-              } else {
-                if (res.Data.GoOutboundMobile) {
-                  this.editIsShow = true;
-                } else if (res.Data.GoFollow) {
-                  this.goFollow = res.Data.GoFollow;
-                } else if (res.Data.SignupStatus == "Success") {
-                  this.isShow = true;
-                }
-              }
-            }
-          });
-      }
-      this.selectShow = false;
-    },
-    //取消报名
-    signupCancel(type) {
-      if (this.detailData.IsSignup == 1) {
-        this.isCancelShow = true;
-        this.idTypeCancel = {
-          id: Number(this.id),
-          type,
-          cutId: "",
-          state: 0,
-        };
-      } else {
-        this.signupAdd();
-      }
-    },
-    //预约/取消
-    async summaryIsHandel() {
-      if (this.detailData.IsAppointment == 0) {
-        const res = await activity.postAppointmentAdd({ ActivityId: Number(this.id) });
-        if (res.Ret == 200) {
-          this.signupType = "summaryIsHandel";
-          this.signupStatus = res.Data.SignupStatus;
-          this.idTypeCancel = {
-            cutId: res.Data.ActivityId,
-            state: 1,
-          };
-          if (res.Data.GoBindEmail) {
-            this.mailboxBinding = true;
-            return;
-          }
-          if (res.Data.SignupStatus !== "Success") {
-            this.isShow = true;
-          } else {
-            if (res.Data.GoOutboundMobile) {
-              this.editIsShow = true;
-            } else if (res.Data.GoFollow) {
-              this.goFollow = res.Data.GoFollow;
-            } else if (res.Data.SignupStatus == "Success") {
-              this.isShow = true;
-            }
-          }
-        }
-        this.selectShow = false;
-      } else {
-        uni.showModal({
-          content: "确定要取消预约本场调研的纪要吗?",
-          confirmColor: "#3385FF",
-          cancelColor: "#606266",
-          success: async (res) => {
-            if (res.confirm) {
-              const res = await activity.postAppointmentCancel({ ActivityId: Number(this.id) });
-              if (res.Ret === 200) {
-                this.getActivityDetail();
-              }
-            }
-          },
-        });
-      }
-    },
+    //  跳转新的小程序
     networkBtn() {
       if (this.detailData.OnlineParticipation.includes("http")) {
         uni.navigateTo({
@@ -460,65 +398,7 @@ export default {
         url: "/pageMy/reportDetail/reportDetail?id=" + id,
       });
     },
-    askingGo(type = "") {
-      uni.navigateTo({
-        url: "/activityPages/generationAsk/generationAsk?id=" + this.id + "&type=" + type,
-      });
-    },
-    meetingReminderAdd() {
-      activity
-        .meetingReminderAdd({
-          ActivityId: Number(this.id),
-        })
-        .then((res) => {
-          if (res.Ret == 200) {
-            uni.showModal({
-              confirmText: "知道了",
-              confirmColor: "#3385FF",
-              content: res.Msg,
-              showCancel: false,
-              success: (res) => {
-                if (res.confirm) {
-                  this.getActivityDetail();
-                }
-              },
-            });
-          }
-        });
-    },
-    //取消会议提醒接口
-    meetingReminderCancel() {
-      if (this.detailData.IsCancelMeetingReminder == 1) {
-        activity
-          .meetingReminderCancel({
-            ActivityId: Number(this.id),
-          })
-          .then((res) => {
-            if (res.Ret == 200) {
-              uni.showModal({
-                confirmText: "知道了",
-                confirmColor: "#3385FF",
-                content: res.Msg,
-                showCancel: false,
-                success: (res) => {
-                  if (res.confirm) {
-                    this.getActivityDetail();
-                  }
-                },
-              });
-            }
-          });
-      } else {
-        this.meetingReminderAdd();
-      }
-    },
-    wanttosignup() {
-      if (this.detailData.IsLimitPeople == 1 && this.detailData.ActivityTypeName == "公司调研电话会") {
-        this.selectShow = true;
-      } else {
-        this.signupAdd(3);
-      }
-    },
+
     //点击了严选
     strictSelection() {
       activity.descriptionOfResearch().then((res) => {
@@ -556,6 +436,82 @@ export default {
         this.$store.dispatch("checkHandle", "/reportPages/IndustryReport/IndustryReport?id=" + item.IndustrialManagementId);
       }
     },
+    init() {
+      let delyTime = 0;
+      if (this.showAudioPop) {
+        this.globalBgAudioManager.stop();
+        delyTime = 300;
+      }
+      // const curAudio = this.$store.state.audioBg.list;
+      setTimeout(() => {
+        // if (this.globalBgAudioManager.src != curAudio.Url) {
+        //   this.globalBgAudioManager.src = curAudio.Url;
+        //   this.globalBgAudioManager.title = curAudio.Title;
+        // }
+        // this.audioTime = curAudio.Time;
+        // this.title = curAudio.Title;
+        // this.activityTitle = this.$store.state.audioBg.activityTitle;
+        // this.curTime = parseInt(this.globalBgAudioManager.currentTime);
+        // this.play = !this.globalBgAudioManager.paused;
+        this.listenAudio();
+      }, delyTime);
+    },
+    //音频播放事件
+    listenAudio() {
+      console.log("设置监听事件");
+      this.globalBgAudioManager.onPlay(() => {
+        console.log("开始播放");
+        this.play = true;
+        this.$store.commit("audioBg/updateAudioPause", false);
+      });
+      this.globalBgAudioManager.onPause(() => {
+        console.log("音频暂停");
+        this.play = false;
+        this.$store.commit("audioBg/updateAudioPause", true);
+      });
+      this.globalBgAudioManager.onStop(() => {
+        console.log("音频停止");
+        this.$store.commit("audioBg/removeAudio");
+      });
+      this.globalBgAudioManager.onEnded(() => {
+        console.log("音频onEnded");
+        this.$store.commit("audioBg/removeAudio");
+      });
+      this.globalBgAudioManager.onError((e) => {
+        console.log("音频onError", e);
+        this.$store.commit("audioBg/removeAudio");
+        uni.showToast({
+          title: "音频播放错误",
+          icon: "none",
+        });
+      });
+      this.globalBgAudioManager.onTimeUpdate(() => {
+        this.curTime = parseInt(this.globalBgAudioManager.currentTime);
+        this.$store.commit("audioBg/updateAudioTime", this.curTime);
+      });
+    },
+    //音频点击暂停播放
+    audioPlayBack() {
+      if (this.$store.state.audioBg.activityId == this.detailData.ActivityId) {
+        if (this.globalBgAudioManager.paused) {
+          this.globalBgAudioManager.play();
+        } else {
+          this.globalBgAudioManager.pause();
+        }
+      } else {
+        item.VideoList = {
+          Url: "https://hzstatic.hzinsights.com/static/yb_wx/voice_broadcast/o0hlQa36oHH61sTY3rkBPc9XyT98.mp3",
+          Time: "30.80",
+          Title: "测试测试",
+        };
+        this.$store.commit("audioBg/addAudio", { list: this.detailData.VideoList, activityId: this.detailData.ActivityId, activityTitle: this.detailData.ActivityName });
+      }
+    },
+    //拖动进度条
+    handleAudioSliderChange(e) {
+      const value = e.detail.value;
+      this.globalBgAudioManager.seek(value);
+    },
   },
   onLoad(option) {
     this.id = option.id || "";
@@ -819,5 +775,47 @@ export default {
     border-radius: 4rpx;
     color: #3385ff;
   }
+
+  .audio-card {
+    width: 100%;
+    height: 282rpx;
+    background: #f5f9ff;
+    border-radius: 16rpx;
+    margin: 0 auto;
+    padding: 30rpx !important;
+
+    .slider {
+      width: 100%;
+      margin: 0;
+    }
+    .card-title {
+      color: #3385ff;
+      font-size: 26rpx;
+      padding: 0 66rpx;
+      text-align: center;
+      margin-bottom: 35rpx;
+    }
+    .card-time {
+      display: flex;
+      justify-content: space-between;
+      color: #999999;
+      font-size: 20rpx;
+      padding-left: 0;
+      .time {
+        padding: 0;
+        line-height: 26rpx;
+      }
+    }
+    .is-paly-card {
+      width: 100%;
+      text-align: center;
+      padding-left: 0;
+      image {
+        margin-top: 5rpx;
+        width: 100rpx;
+        height: 100rpx;
+      }
+    }
+  }
 }
 </style>

activityPages/activityDetail/manageMixin.js

@@ -0,0 +1,171 @@
+import { activity, User } from "@/config/api.js";
+let app = getApp();
+export default {
+  methods: {
+    //报名
+    signupAdd(type = 1) {
+      if (this.isNeedAddCountryCode) {
+        this.isAreaCode = true;
+        this.areaCode = {
+          id: Number(this.id),
+          type,
+        };
+      } else {
+        activity
+          .signupAdd({
+            ActivityId: Number(this.id),
+            SignupType: type,
+          })
+          .then((res) => {
+            if (res.Ret == 200) {
+              this.signupType = res.Data.SignupType;
+              this.signupStatus = res.Data.SignupStatus;
+              this.countryCode = res.Data.CountryCode;
+              this.mobileEdit = res.Data.Mobile;
+              this.goOnNextStep = res.Data.GoFollow;
+              this.idTypeCancel = {
+                cutId: res.Data.ActivityId,
+                state: 1,
+              };
+              if (res.Data.GoBindEmail) {
+                this.mailboxBinding = true;
+                return;
+              }
+              if (res.Data.SignupStatus !== "Success") {
+                this.isShow = true;
+              } else {
+                if (res.Data.GoOutboundMobile) {
+                  this.editIsShow = true;
+                } else if (res.Data.GoFollow) {
+                  this.goFollow = res.Data.GoFollow;
+                } else if (res.Data.SignupStatus == "Success") {
+                  this.isShow = true;
+                }
+              }
+            }
+          });
+      }
+      this.selectShow = false;
+    },
+    //取消报名
+    signupCancel(type) {
+      if (this.detailData.IsSignup == 1) {
+        this.isCancelShow = true;
+        this.idTypeCancel = {
+          id: Number(this.id),
+          type,
+          cutId: "",
+          state: 0,
+        };
+      } else {
+        this.signupAdd();
+      }
+    },
+    //预约/取消
+    async summaryIsHandel() {
+      if (this.detailData.IsAppointment == 0) {
+        const res = await activity.postAppointmentAdd({ ActivityId: Number(this.id) });
+        if (res.Ret == 200) {
+          this.signupType = "summaryIsHandel";
+          this.signupStatus = res.Data.SignupStatus;
+          this.idTypeCancel = {
+            cutId: res.Data.ActivityId,
+            state: 1,
+          };
+          if (res.Data.GoBindEmail) {
+            this.mailboxBinding = true;
+            return;
+          }
+          if (res.Data.SignupStatus !== "Success") {
+            this.isShow = true;
+          } else {
+            if (res.Data.GoOutboundMobile) {
+              this.editIsShow = true;
+            } else if (res.Data.GoFollow) {
+              this.goFollow = res.Data.GoFollow;
+            } else if (res.Data.SignupStatus == "Success") {
+              this.isShow = true;
+            }
+          }
+        }
+        this.selectShow = false;
+      } else {
+        uni.showModal({
+          content: "确定要取消预约本场调研的纪要吗?",
+          confirmColor: "#3385FF",
+          cancelColor: "#606266",
+          success: async (res) => {
+            if (res.confirm) {
+              const res = await activity.postAppointmentCancel({ ActivityId: Number(this.id) });
+              if (res.Ret === 200) {
+                this.getActivityDetail();
+              }
+            }
+          },
+        });
+      }
+    },
+    //取消会议提醒接口
+    meetingReminderCancel() {
+      if (this.detailData.IsCancelMeetingReminder == 1) {
+        activity
+          .meetingReminderCancel({
+            ActivityId: Number(this.id),
+          })
+          .then((res) => {
+            if (res.Ret == 200) {
+              uni.showModal({
+                confirmText: "知道了",
+                confirmColor: "#3385FF",
+                content: res.Msg,
+                showCancel: false,
+                success: (res) => {
+                  if (res.confirm) {
+                    this.getActivityDetail();
+                  }
+                },
+              });
+            }
+          });
+      } else {
+        this.meetingReminderAdd();
+      }
+    },
+    //添加会议提醒
+    meetingReminderAdd() {
+      activity
+        .meetingReminderAdd({
+          ActivityId: Number(this.id),
+        })
+        .then((res) => {
+          if (res.Ret == 200) {
+            uni.showModal({
+              confirmText: "知道了",
+              confirmColor: "#3385FF",
+              content: res.Msg,
+              showCancel: false,
+              success: (res) => {
+                if (res.confirm) {
+                  this.getActivityDetail();
+                }
+              },
+            });
+          }
+        });
+    },
+    //我要报名
+    wanttosignup() {
+      if (this.detailData.IsLimitPeople == 1 && this.detailData.ActivityTypeName == "公司调研电话会") {
+        this.selectShow = true;
+      } else {
+        this.signupAdd(3);
+      }
+    },
+    //提问
+    askingGo(type = "") {
+      uni.navigateTo({
+        url: "/activityPages/generationAsk/generationAsk?id=" + this.id + "&type=" + type,
+      });
+    },
+  },
+};

activityPages/playBack/playBack.vue

@@ -31,7 +31,14 @@
           <text :class="item.ActivityType == 1 ? '' : 'xianxia'">{{ item.ActivityType == 1 ? "线上" : "线下" }}</text>
           {{ item.ActivityTimeText }}
           <view class="audio-back" v-if="!item.AudioLink" @click.stop="audioPlayBack(item)">
-            <image class="audio-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group.png"></image>
+            <image
+              class="audio-img"
+              :src="
+                curVoiceId === item.ActivityId && !curAudioPaused
+                  ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop.png'
+                  : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group.png'
+              "
+            ></image>
             回放
           </view>
         </view>
@@ -83,7 +90,7 @@ export default {
         loading: "加载中",
         nomore: "已经到底了",
       },
-      showAudioPop: true,
+      showAudioPop: false,
     };
   },
   components: { audioModule },
@@ -154,6 +161,10 @@ export default {
         this.chartPermissionIds = arr.join(",");
       }
     },
+    //去往详情页面
+    goDetail(item) {
+      this.$store.dispatch("checkHandle", "/activityPages/activityDetail/activityDetail?id=" + item.ActivityId);
+    },
     //下拉选择的确定事件
     replacementConfirm() {
       const arr = [];
@@ -198,15 +209,25 @@ export default {
         }
       } else {
         item.VideoList = {
-          Url:'https://hzstatic.hzinsights.com/static/yb_wx/voice_broadcast/o0hlQa36oHH61sTY3rkBPc9XyT98.mp3',
-          Time:'3.80',
-          Title:'测试测试'
-        }
+          Url: "https://hzstatic.hzinsights.com/static/yb_wx/voice_broadcast/o0hlQa36oHH61sTY3rkBPc9XyT98.mp3",
+          Time: "30.80",
+          Title: "测试测试",
+        };
         this.showAudioPop = true;
-        this.$store.commit("audioBg/addAudio", { list: item.VideoList, activityId: item.ActivityId , activityTitle:item.ActivityName});
+        this.$store.commit("audioBg/addAudio", { list: item.VideoList, activityId: item.ActivityId, activityTitle: item.ActivityName });
       }
     },
   },
+  computed: {
+    curVoiceId() {
+      //当前正在播放的音频id
+      return this.$store.state.audioBg.activityId;
+    },
+    curAudioPaused() {
+      //当前音频是否暂停状态
+      return this.$store.state.audioBg.paused;
+    },
+  },
   onLoad() {
     this.getActivityList();
     this.getUserSearchContent();

components/audioModule/index.vue

@@ -2,17 +2,29 @@
   <van-overlay :show="showAudioPop" @click="isShowMaskHandler" z-index="999">
     <view class="container global-audio-box">
       <view class="audio-box">
-        <view class="activity-title">
+        <view class="activity-title text_oneLine">
           {{ activityTitle }}
-          <van-icon name="cross" />
+          哈哈哈
+          <view class="icon-cross" @click="isShowMaskHandler">
+            <van-icon name="cross" font-size="32" />
+          </view>
         </view>
         <view class="audio-card">
-          <view class="card-title">{{ title }}</view>
+          <view class="card-title text_oneLine">
+            {{ title }}.mp3
+          </view>
           <slider activeColor="#3385FF" :max="audioTime" :value="curTime" @change="handleAudioSliderChange($event)" block-size="16" class="slider" />
           <view class="card-time">
             <text class="time">{{ curTime | formatVoiceTime }}</text>
             <text class="time">{{ audioTime | formatVoiceTime }}</text>
           </view>
+          <view class="is-paly-card">
+            <image
+              @click.stop="handleChangePlayStatus"
+              class=""
+              :src="play ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/suspend_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/play_icon.png'"
+            ></image>
+          </view>
         </view>
       </view>
     </view>
@@ -72,18 +84,17 @@ export default {
       this.$emit("update:showAudioPop", false);
     },
     init() {
-      console.log(this.$store.state.audioBg.activityTitle);
       let delyTime = 0;
       if (this.showAudioPop) {
         this.globalBgAudioManager.stop();
         delyTime = 300;
       }
-      const curAudio = {
-        Url: "https://hzstatic.hzinsights.com/static/yb_wx/voice_broadcast/o0hlQa36oHH61sTY3rkBPc9XyT98.mp3",
-        Time: "300.80",
-        Title: "测试测试",
-      };
-      // this.$store.state.audioBg.list;
+      // const curAudio = {
+      //   Url: "https://hzstatic.hzinsights.com/static/yb_wx/voice_broadcast/o0hlQa36oHH61sTY3rkBPc9XyT98.mp3",
+      //   Time: "300.80",
+      //   Title: "测试测试",
+      // };
+      const curAudio = this.$store.state.audioBg.list;
       setTimeout(() => {
         if (this.globalBgAudioManager.src != curAudio.Url) {
           this.globalBgAudioManager.src = curAudio.Url;
@@ -93,7 +104,9 @@ export default {
         this.title = curAudio.Title;
         this.activityTitle = this.$store.state.audioBg.activityTitle;
         this.curTime = parseInt(this.globalBgAudioManager.currentTime);
+        console.log(this.globalBgAudioManager);
         this.play = !this.globalBgAudioManager.paused;
+        console.log(this.play, "this.play");
         this.listenAudio();
       }, delyTime);
     },
@@ -136,6 +149,14 @@ export default {
       const value = e.detail.value;
       this.globalBgAudioManager.seek(value);
     },
+    //音频点击暂停播放
+    handleChangePlayStatus() {
+      if (!this.globalBgAudioManager.paused) {
+        this.globalBgAudioManager.pause();
+      } else {
+        this.globalBgAudioManager.play();
+      }
+    },
   },
 };
 </script>
@@ -145,9 +166,19 @@ export default {
   height: 100%;
   position: relative;
   .activity-title {
+    position: relative;
+    width: 100%;
     font-size: 30rpx;
     font-weight: 500;
     margin-bottom: 35rpx;
+    text-align: center;
+    .icon-cross {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      padding: 10rpx;
+    }
   }
   .audio-box {
     position: absolute;
@@ -175,6 +206,10 @@ export default {
     }
     .card-title {
       color: #3385ff;
+      font-size: 26rpx;
+      padding: 0 66rpx;
+      text-align: center;
+      margin-bottom: 35rpx;
     }
     .card-time {
       display: flex;
@@ -182,6 +217,15 @@ export default {
       color: #999999;
       font-size: 20rpx;
     }
+    .is-paly-card {
+      width: 100%;
+      text-align: center;
+      image {
+        margin-top: 5rpx;
+        width: 100rpx;
+        height: 100rpx;
+      }
+    }
   }
 }
 </style>

pages.json

@@ -29,7 +29,8 @@
       "path": "pages/activity/activity",
       "style": {
         "navigationBarTitleText": "活动",
-        "enablePullDownRefresh": true
+        "enablePullDownRefresh": true,
+        "navigationStyle": "custom"
       }
     },
     {
@@ -116,17 +117,15 @@
             "navigationBarTitleText": "活动详情",
             "enablePullDownRefresh": false
           }
+        },
+        {
+          "path": "playBack/playBack",
+          "style": {
+            "navigationBarTitleText": "活动回放",
+            "enablePullDownRefresh": false
+          }
         }
-          ,{
-                    "path" : "playBack/playBack",
-                    "style" :                                                                                    
-                {
-                    "navigationBarTitleText": "活动回放",
-                    "enablePullDownRefresh": false
-                }
-                
-                }
-            ]
+      ]
     },
     {
       "root": "reportPages",

pages/activity/activity.vue

@@ -1,42 +1,47 @@
 <template>
   <view class="container activity-content">
-    <!--  活动、日程 -->
-    <view class="top-content" id="idtop">
-      <view class="tab">
-        <view class="tab-item" v-for="(item, index) in tabs" :key="item.id">
-          <view class="scroll-tab-item" :class="{ active: tabsActive == index }" @click="toggleTab(item, index)">
-            {{ item.name }}
-            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" class="border_act" v-if="tabsActive == index" mode=""> </image>
+    <view class="top-content-box">
+      <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
+        <view class="content">
+          <view class="activity-back" @click="activityPlayBack">
+            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/foreshow_icon.png"></image>
+            活动回放
+          </view>
+          <view class="activity-search" @click="goSearch">
+            <icon type="search" size="15" class="search_ico" />
+            活动搜索
           </view>
         </view>
       </view>
-    </view>
-    <!-- 筛选状态 -->
-    <view class="screen-item" v-if="tabsActive == 0">
-      <text :class="isShowJurisdiction ? 'active' : ''" @click="permissioActivity">有权限行业</text>
-      <!-- 各种状态选择 -->
-      <view class="select-conyent">
-        <van-dropdown-menu active-color="#333333">
-          <van-dropdown-item id="industry" :title="chartPermissionName">
-            <view class="menu-items">
-              <view class="menu-items-box" v-for="item in listChartPermission" :key="item.ChartPermissionId" @click="overallClick(item)">
-                <view class="items-box">
-                  <u-icon v-if="item.IsChoose" name="checkbox-mark" :color="isShowJurisdiction ? '#ccc' : '#2C83FF'" size="24"></u-icon>
+      <view class="screen-item" v-if="tabsActive == 0">
+        <text :class="isShowJurisdiction ? 'active' : ''" @click="permissioActivity">有权限行业</text>
+        <!-- 各种状态选择 -->
+        <view class="select-conyent">
+          <van-dropdown-menu active-color="#333333">
+            <van-dropdown-item id="industry" :title="chartPermissionName">
+              <view class="menu-items">
+                <view class="menu-items-box" v-for="item in listChartPermission" :key="item.ChartPermissionId" @click="overallClick(item)">
+                  <view class="items-box">
+                    <u-icon v-if="item.IsChoose" name="checkbox-mark" :color="isShowJurisdiction ? '#ccc' : '#2C83FF'" size="24"></u-icon>
+                  </view>
+                  <text>{{ item.PermissionName }}</text>
                 </view>
-                <text>{{ item.PermissionName }}</text>
               </view>
-            </view>
-            <view class="replacement">
-              <text @click="replacementBtn" class="replacement-box">重置</text>
-              <text @click="replacementConfirm">确定</text>
-            </view>
-          </van-dropdown-item>
-        </van-dropdown-menu>
+              <view class="replacement">
+                <text @click="replacementBtn" class="replacement-box">重置</text>
+                <text @click="replacementConfirm">确定</text>
+              </view>
+            </van-dropdown-item>
+          </van-dropdown-menu>
+        </view>
+        <text v-for="item in activityTimeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''" @click="isActivityDate(item.Id)">{{ item.StatusName }}</text>
       </view>
-      <text v-for="item in activityTimeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''" @click="isActivityDate(item.Id)">{{ item.StatusName }}</text>
     </view>
+
+    <!-- 筛选状态 -->
+
     <!-- 活动列表 -->
-    <view class="collect-activity" v-if="haveData && tabsActive == 0">
+    <view class="collect-activity" v-if="haveData">
       <view class="content-list">
         <view class="half">
           <view class="activity-ltem" v-for="(item, index) in collectTypeList" :key="index" v-if="item.Position == 1">
@@ -75,97 +80,10 @@
       </view>
       <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
     </view>
-    <view class="collect-ul" v-else-if="haveData && tabsActive !== 0">
-      <view class="collect-ltem" v-for="(item, index) in collectList" :key="index">
-        <view class="title-date" @click="goDetail(item)">
-          <text :class="item.ActivityType == 1 ? '' : 'xianxia'">{{ item.ActivityType == 1 ? "线上" : "线下" }}</text>
-          {{ item.ActivityTimeText }}
-        </view>
-        <view class="item-li">
-          <view class="item-img" @click="goDetail(item)">
-            <image :src="item.ImgUrl"></image>
-            <text v-if="item.ActiveState == 1" class="img-status begin">未开始</text>
-            <text v-else-if="item.ActiveState == 2" class="img-status proceed">进行中</text>
-            <text v-else class="img-status">已结束</text>
-            <view class="img-type">
-              <image :src="item.ImgUrlText" mode=""></image>
-            </view>
-          </view>
-          <view class="item">
-            <view class="item-text" @click="goDetail(item)">
-              <text class="activity-title"> {{ item.ActivityName }} </text>
-              <text class="text_twoLine" v-if="item.Expert">专家背景：{{ item.Expert }} </text>
-              <text class="text_twoLine" v-if="item.DistinguishedGuest">嘉宾：{{ item.DistinguishedGuest }} </text>
-              <text class="text_twoLine" v-if="item.Speaker">主讲人：{{ item.Speaker }}</text>
-            </view>
-            <block v-if="item.ActiveState == 1">
-              <view :class="['bottom-box', item.ActivityTypeId == 1 && 'expert-item', item.City && 'city']">
-                <view class="city-img" v-if="item.City">
-                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png"></image>
-                  {{ item.City }}
-                </view>
-                <view style="display: flex">
-                  <text v-if="item.IsShowOutboundCall && item.ActivityTypeId == 1" class="button" @click="signupIsAddOfCancel(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
-                  <text v-if="item.IsShowAppointment" @click="summaryIsHandel(item)">{{ item.IsAppointment == 1 ? "取消纪要" : "预约纪要" }}</text>
-                  <text v-if="item.IsShowMeetingReminder" @click="meetingReminderAdd(item.ActivityId, item.IsCancelMeetingReminder)">
-                    {{ item.IsCancelMeetingReminder == 0 ? "会议提醒" : "取消提醒" }}
-                  </text>
-                  <view v-if="item.IsShowHelpSsk" style="width: 130rpx">
-                    <text @click="askingGo(item)">帮我带问</text>
-                  </view>
-                  <text v-if="item.IsShowOutboundCall && item.ActivityTypeId != 1" class="button" @click="signupIsAddOfCancel(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
-                  <block v-if="item.IsShowSignup">
-                    <block v-if="item.IsCClassMeeting">
-                      <text class="button" @click="signupIsAddOfCancel(item, 3, 'CClass')">{{ item.IsSignup == 1 ? "取消报名" : "我要报名" }}</text>
-                    </block>
-                    <block v-else>
-                      <text class="button" v-if="item.IsSignup !== 1" @click="wanttosignup(item.ActivityId)">我要报名</text>
-                      <text class="button" v-else @click="signupIsAddOfCancel(item, 2)">{{ item.SignupType == 1 ? "取消外呼" : "取消报名" }}</text>
-                    </block>
-                  </block>
-                </view>
-              </view>
-            </block>
-            <block v-else>
-              <view class="bottom-box city" v-if="item.City">
-                <view class="city-img">
-                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png"></image>
-                  {{ item.City }}
-                </view>
-              </view>
-              <view class="bottom-box real-time" v-if="item.ActiveState == 2 && item.ActivityTypeId == 1">
-                <text class="button" @click="askingGo(item, '提问')">实时提问</text>
-              </view>
-            </block>
-          </view>
-        </view>
-      </view>
-      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
-    </view>
     <view class="nodata" v-if="!haveData">
       <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
       <text>{{ tabsActive == 0 ? "暂时没有符合条件的活动" : "暂无我的日程" }}</text>
     </view>
-    <view class="more" v-if="tabsActive == 0" @click="goSearch">更多进行中和已结束的主题>></view>
-    <!-- 所有自定义弹框 -->
-    <modalDialog
-      :isShow="isShow"
-      :signupType="signupType"
-      :goFollow="goFollow"
-      :signupStatus="signupStatus"
-      :hasPermission="hasPermission"
-      :jurisdictionList="jurisdictionList"
-      :editIsShow="editIsShow"
-      :isCancelShow="isCancelShow"
-      :idTypeCancel="idTypeCancel"
-      @cancelShowBtn="cancelEnsure"
-      :countryCode="countryCode"
-      :mobileEdit="mobileEdit"
-      :goOnNextStep="goOnNextStep"
-      :isShowhasPermission="isShowhasPermission"
-      :applyForIsShow="applyForIsShow"
-      :mailboxBinding="mailboxBinding"
-    />
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
   </view>
 </template>
@@ -185,16 +103,6 @@ export default {
   },
   data() {
     return {
-      tabs: [
-        {
-          name: "全部活动",
-          id: 1,
-        },
-        {
-          name: "我的日程",
-          id: 2,
-        },
-      ],
       collectTypeList: [],
       chartPermissionName: "所有行业",
       haveData: true,
@@ -221,6 +129,15 @@ export default {
     },
   },
   methods: {
+    //获取胶囊位置
+    initNavBar() {
+      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+      this.navBarStyle = {
+        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
+        paddingTop: menuButtonInfo.top - 4 + "px",
+        paddingBottom: "4px",
+      };
+    },
     async getUserSearchContent() {
       const res = await activity.getUserSearchContent({
         IsShowJurisdiction: this.isGetJurisdiction,
@@ -235,6 +152,7 @@ export default {
         }
       }
     },
+    //获取列表数据
     async getActivityLabelTypeList() {
       const res = await activity.getActivityLabelTypeList({
         ChartPermissionIds: this.chartPermissionIds,
@@ -252,45 +170,6 @@ export default {
         }
       }
     },
-    async getActivityList() {
-      const res = await activity.getScheduleList({ PageSize: this.pageSize, CurrentIndex: this.page_no });
-      if (res.Ret === 200) {
-        this.contentImg = res.Data.ImgUrl;
-        this.contentLabel = res.Data.Label;
-        this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
-        if (this.page_no === 1) {
-          this.collectList = res.Data.List || [];
-          this.haveData = this.collectList.length ? true : false;
-          if (this.refresh) {
-            uni.stopPullDownRefresh();
-            this.refresh = false;
-          }
-        } else {
-          this.collectList = this.collectList.concat(res.Data.List);
-        }
-      }
-    },
-    //头部tabs切换
-    toggleTab(item, index) {
-      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
-        //已授权已绑定
-        if (index != this.tabsActive) {
-          this.tabsActive = index;
-          this.page_no = 1;
-          this.collectTypeList = [];
-          this.collectList = [];
-          this.tabsActive == 0 ? this.getActivityLabelTypeList() : this.getActivityList();
-          if (this.tabsActive !== 0) {
-            this.selectComponent("#industry").toggle(false);
-          }
-        }
-      } else {
-        //已授权未绑定
-        uni.navigateTo({
-          url: "/pageMy/login/login",
-        });
-      }
-    },
     // 下拉的选择的关闭事件
     closeTheWindow() {
       const types = this.chartPermissionIds ? this.chartPermissionIds.split(",").map(Number) : [];
@@ -421,12 +300,17 @@ export default {
     goSearch() {
       this.$store.dispatch("checkHandle", "/activityPages/activitySearch/activitySearch");
     },
+    //去往 活动回放activityPlayBack
+    activityPlayBack(){
+      this.$store.dispatch("checkHandle", "/activityPages/playBack/playBack");
+    }
   },
   //load
   onLoad(option) {
     this.loadShare(option);
     this.getUserSearchContent();
     this.getActivityLabelTypeList();
+    this.initNavBar();
   },
   async onShow() {
     await this.$store.dispatch("checkHandle", "noGO");
@@ -438,18 +322,11 @@ export default {
       path: "/pages/activity/activity?whichDay=" + this.whichDay + "&chartPermissionIds=" + this.chartPermissionIds + "&isGetJurisdiction=" + this.isGetJurisdiction,
     };
   },
-  /* 触底 */
-  onReachBottom: Throttle(function () {
-    if (this.status === "nomore") return;
-    this.status = "loading";
-    this.page_no++;
-    this.tabsActive == 1 && this.getActivityList();
-  }),
   /* 下拉刷新 */
   onPullDownRefresh: Throttle(function () {
     this.page_no = 1;
     this.refresh = true;
-    this.tabsActive == 0 ? this.getActivityLabelTypeList() : this.getActivityList();
+    this.getActivityLabelTypeList();
   }),
   // 页面滚动事件
   onPageScroll() {},
@@ -457,69 +334,55 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// image{will-change: transform}
 .activity-content {
   background-color: #f7f7f7;
   padding-bottom: 90rpx;
   position: relative;
-  .top-content {
+  .top-content-box {
     position: sticky;
     top: 0;
     left: 0;
+    width: 100%;
     z-index: 99;
-    padding-bottom: 2rpx;
     background-color: #fff;
-    .tab {
-      display: flex;
-      font-size: 32rpx;
-      color: #707070;
-      .tab-item {
-        flex: 1;
-        text-align: center;
-        .scroll-tab-item {
-          height: 78rpx;
-          line-height: 48rpx;
-          position: relative;
-          .border_act {
-            position: absolute;
-            height: 6rpx;
-            width: 340rpx;
-            left: 0;
-            bottom: 0rpx;
+    .nav-bar-wrap {
+      background-color: #fff;
+      width: 100%;
+      .content {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding-left: 30rpx;
+        .activity-back {
+          display: flex;
+          flex-shrink: 0;
+          align-items: center;
+          color:#3385FF;
+          font-size: 30rpx;
+          image {
+            width: 28rpx;
+            height: 28rpx;
+            margin-right: 10rpx;
           }
         }
-        .active {
-          color: #3385ff;
-          font-weight: bold;
-          font-size: 34rpx;
+        .activity-search {
+          margin-left: 20rpx;
+          width: 46%;
+          height: 62rpx;
+          color: #999999;
+          font-size: 26rpx;
+          display: flex;
+          align-items: center;
+          padding-left: 20rpx;
+          background: #f3f3f3;
+          border-radius: 82rpx;
+          border: 1px solid #dcdfe6;
         }
       }
     }
-    .index-fixed {
-      margin-top: 40rpx;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      height: 70rpx;
-      background: #f6f6f6;
-      border: 1rpx solid #e5e5e5;
-      opacity: 1;
-      border-radius: 35rpx;
-      padding-left: 34rpx;
-      color: #8d8d8d;
-      font-size: 28rpx;
-      .search_ico {
-        padding-right: 16rpx;
-      }
-    }
   }
   .screen-item {
-    position: sticky;
-    top: 78rpx;
-    left: 0;
-    z-index: 99;
-    background-color: #fff;
-    height: 111rpx;
+    height: 100rpx;
     padding: 0 34rpx;
     font-size: 24rpx;
     color: #333;
@@ -629,7 +492,7 @@ export default {
       left: 0;
       width: 100%;
       // padding-bottom: 30rpx;
-      border-radius:15rpx;
+      border-radius: 15rpx;
       overflow: hidden;
       z-index: 3;
     }

pages/activity/index.vue

@@ -0,0 +1,708 @@
+<template>
+  <view class="container activity-content">
+    <!--  活动、日程 -->
+    <view class="top-content" id="idtop">
+      <view class="tab">
+        <view class="tab-item" v-for="(item, index) in tabs" :key="item.id">
+          <view class="scroll-tab-item" :class="{ active: tabsActive == index }" @click="toggleTab(item, index)">
+            {{ item.name }}
+            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" class="border_act" v-if="tabsActive == index" mode=""> </image>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 筛选状态 -->
+    <view class="screen-item" v-if="tabsActive == 0">
+      <text :class="isShowJurisdiction ? 'active' : ''" @click="permissioActivity">有权限行业</text>
+      <!-- 各种状态选择 -->
+      <view class="select-conyent">
+        <van-dropdown-menu active-color="#333333">
+          <van-dropdown-item id="industry" :title="chartPermissionName">
+            <view class="menu-items">
+              <view class="menu-items-box" v-for="item in listChartPermission" :key="item.ChartPermissionId" @click="overallClick(item)">
+                <view class="items-box">
+                  <u-icon v-if="item.IsChoose" name="checkbox-mark" :color="isShowJurisdiction ? '#ccc' : '#2C83FF'" size="24"></u-icon>
+                </view>
+                <text>{{ item.PermissionName }}</text>
+              </view>
+            </view>
+            <view class="replacement">
+              <text @click="replacementBtn" class="replacement-box">重置</text>
+              <text @click="replacementConfirm">确定</text>
+            </view>
+          </van-dropdown-item>
+        </van-dropdown-menu>
+      </view>
+      <text v-for="item in activityTimeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''" @click="isActivityDate(item.Id)">{{ item.StatusName }}</text>
+    </view>
+    <!-- 活动列表 -->
+    <view class="collect-activity" v-if="haveData && tabsActive == 0">
+      <view class="content-list">
+        <view class="half">
+          <view class="activity-ltem" v-for="(item, index) in collectTypeList" :key="index" v-if="item.Position == 1">
+            <image class="zindex-one" :src="item.ImgUrl"></image>
+            <!-- <image class="zindex-two" :src="item.ImgUrlBg"></image> -->
+            <view class="content">
+              <view class="item-img" @click="goDetails(item)">
+                {{ item.ActivityTypeName }}
+              </view>
+              <view :style="{ 'background-image': 'url(' + item.ImgUrlBg + ')' }" class="activity-ui">
+                <view class="activity-li" v-for="val in item.List" :key="val.KeyWord" @click="goDetails(val, item.Resource)">
+                  <image class="item-image" lazy-load :src="val.ImgUrlBg"></image>
+                  <text class="text_oneLine"> {{ val.KeyWord }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="half">
+          <view class="activity-ltem" v-for="(item, index) in collectTypeList" :key="index" v-if="item.Position == 2">
+            <image class="zindex-one" :src="item.ImgUrl"></image>
+            <!-- <image class="zindex-two" :src="item.ImgUrlBg"></image> -->
+            <view class="content">
+              <view class="item-img" @click="goDetails(item)">
+                {{ item.ActivityTypeName }}
+              </view>
+              <view :style="{ 'background-image': 'url(' + item.ImgUrlBg + ')' }" class="activity-ui">
+                <view class="activity-li" v-for="val in item.List" :key="val.KeyWord" @click="goDetails(val, item.Resource)">
+                  <image class="item-image" lazy-load :src="val.ImgUrlBg"></image>
+                  <text class="text_oneLine"> {{ val.KeyWord }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
+    </view>
+    <view class="collect-ul" v-else-if="haveData && tabsActive !== 0">
+      <view class="collect-ltem" v-for="(item, index) in collectList" :key="index">
+        <view class="title-date" @click="goDetail(item)">
+          <text :class="item.ActivityType == 1 ? '' : 'xianxia'">{{ item.ActivityType == 1 ? "线上" : "线下" }}</text>
+          {{ item.ActivityTimeText }}
+        </view>
+        <view class="item-li">
+          <view class="item-img" @click="goDetail(item)">
+            <image :src="item.ImgUrl"></image>
+            <text v-if="item.ActiveState == 1" class="img-status begin">未开始</text>
+            <text v-else-if="item.ActiveState == 2" class="img-status proceed">进行中</text>
+            <text v-else class="img-status">已结束</text>
+            <view class="img-type">
+              <image :src="item.ImgUrlText" mode=""></image>
+            </view>
+          </view>
+          <view class="item">
+            <view class="item-text" @click="goDetail(item)">
+              <text class="activity-title"> {{ item.ActivityName }} </text>
+              <text class="text_twoLine" v-if="item.Expert">专家背景：{{ item.Expert }} </text>
+              <text class="text_twoLine" v-if="item.DistinguishedGuest">嘉宾：{{ item.DistinguishedGuest }} </text>
+              <text class="text_twoLine" v-if="item.Speaker">主讲人：{{ item.Speaker }}</text>
+            </view>
+            <block v-if="item.ActiveState == 1">
+              <view :class="['bottom-box', item.ActivityTypeId == 1 && 'expert-item', item.City && 'city']">
+                <view class="city-img" v-if="item.City">
+                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png"></image>
+                  {{ item.City }}
+                </view>
+                <view style="display: flex">
+                  <text v-if="item.IsShowOutboundCall && item.ActivityTypeId == 1" class="button" @click="signupIsAddOfCancel(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
+                  <text v-if="item.IsShowAppointment" @click="summaryIsHandel(item)">{{ item.IsAppointment == 1 ? "取消纪要" : "预约纪要" }}</text>
+                  <text v-if="item.IsShowMeetingReminder" @click="meetingReminderAdd(item.ActivityId, item.IsCancelMeetingReminder)">
+                    {{ item.IsCancelMeetingReminder == 0 ? "会议提醒" : "取消提醒" }}
+                  </text>
+                  <view v-if="item.IsShowHelpSsk" style="width: 130rpx">
+                    <text @click="askingGo(item)">帮我带问</text>
+                  </view>
+                  <text v-if="item.IsShowOutboundCall && item.ActivityTypeId != 1" class="button" @click="signupIsAddOfCancel(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
+                  <block v-if="item.IsShowSignup">
+                    <block v-if="item.IsCClassMeeting">
+                      <text class="button" @click="signupIsAddOfCancel(item, 3, 'CClass')">{{ item.IsSignup == 1 ? "取消报名" : "我要报名" }}</text>
+                    </block>
+                    <block v-else>
+                      <text class="button" v-if="item.IsSignup !== 1" @click="wanttosignup(item.ActivityId)">我要报名</text>
+                      <text class="button" v-else @click="signupIsAddOfCancel(item, 2)">{{ item.SignupType == 1 ? "取消外呼" : "取消报名" }}</text>
+                    </block>
+                  </block>
+                </view>
+              </view>
+            </block>
+            <block v-else>
+              <view class="bottom-box city" v-if="item.City">
+                <view class="city-img">
+                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png"></image>
+                  {{ item.City }}
+                </view>
+              </view>
+              <view class="bottom-box real-time" v-if="item.ActiveState == 2 && item.ActivityTypeId == 1">
+                <text class="button" @click="askingGo(item, '提问')">实时提问</text>
+              </view>
+            </block>
+          </view>
+        </view>
+      </view>
+      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
+    </view>
+    <view class="nodata" v-if="!haveData">
+      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
+      <text>{{ tabsActive == 0 ? "暂时没有符合条件的活动" : "暂无我的日程" }}</text>
+    </view>
+    <view class="more" v-if="tabsActive == 0" @click="goSearch">更多进行中和已结束的主题>></view>
+    <!-- 所有自定义弹框 -->
+    <modalDialog
+      :isShow="isShow"
+      :signupType="signupType"
+      :goFollow="goFollow"
+      :signupStatus="signupStatus"
+      :hasPermission="hasPermission"
+      :jurisdictionList="jurisdictionList"
+      :editIsShow="editIsShow"
+      :isCancelShow="isCancelShow"
+      :idTypeCancel="idTypeCancel"
+      @cancelShowBtn="cancelEnsure"
+      :countryCode="countryCode"
+      :mobileEdit="mobileEdit"
+      :goOnNextStep="goOnNextStep"
+      :isShowhasPermission="isShowhasPermission"
+      :applyForIsShow="applyForIsShow"
+      :mailboxBinding="mailboxBinding"
+    />
+    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
+  </view>
+</template>
+
+<script>
+import { activity } from "@/config/api.js";
+import { Throttle } from "@/config/util.js";
+import myActivityMixin from "@/activityPages/components/indexActivity.js";
+import modalDialog from "@/components/modalDialog.vue";
+import freeCharge from "@/components/freeCharge";
+let app = getApp();
+export default {
+  mixins: [myActivityMixin],
+  components: {
+    modalDialog,
+    freeCharge,
+  },
+  data() {
+    return {
+      tabs: [
+        {
+          name: "全部活动",
+          id: 1,
+        },
+        {
+          name: "我的日程",
+          id: 2,
+        },
+      ],
+      collectTypeList: [],
+      chartPermissionName: "所有行业",
+      haveData: true,
+      activityTimeList: [
+        { Id: 1, IsChoose: false, StatusName: "今日活动" },
+        { Id: 2, IsChoose: false, StatusName: "明日活动" },
+      ],
+      whichDay: "",
+      listChartPermission: [],
+      listChartPermissionInit: [],
+      chartPermissionIds: "",
+      isShowJurisdiction: false, //
+      isGetJurisdiction: 0,
+      isrefresh: true,
+      activityTypeId: "",
+    };
+  },
+  computed: {
+    messageTitle() {
+      let arr = this.whichDay ? this.whichDay.split(",") : [];
+      let whichData = arr.length == 2 ? "今日活动,明日活动" : arr == "1" ? "今日活动" : arr == "2" ? "明日活动" : "";
+      let title = whichData ? whichData + "," + this.chartPermissionName : this.chartPermissionName !== "所有行业" ? this.chartPermissionName : "";
+      return title || "近期所有行业活动预告";
+    },
+  },
+  methods: {
+    async getUserSearchContent() {
+      const res = await activity.getUserSearchContent({
+        IsShowJurisdiction: this.isGetJurisdiction,
+      });
+      if (res.Ret === 200) {
+        this.isShowJurisdiction = res.Data.IsShowJurisdiction;
+        this.listChartPermission = res.Data.ListChartPermission;
+        this.listChartPermissionInit = res.Data.ListChartPermission2;
+        this.clickPermission();
+        if (this.chartPermissionIds) {
+          this.closeTheWindow();
+        }
+      }
+    },
+    async getActivityLabelTypeList() {
+      const res = await activity.getActivityLabelTypeList({
+        ChartPermissionIds: this.chartPermissionIds,
+        IsShowJurisdiction: this.isGetJurisdiction,
+        ActiveState: "1",
+        WhichDay: this.whichDay,
+        IsPower: this.isGetJurisdiction,
+      });
+      if (res.Ret === 200) {
+        this.collectTypeList = res.Data.List || [];
+        this.haveData = this.collectTypeList.length ? true : false;
+        if (this.refresh) {
+          uni.stopPullDownRefresh();
+          this.refresh = false;
+        }
+      }
+    },
+    async getActivityList() {
+      const res = await activity.getScheduleList({ PageSize: this.pageSize, CurrentIndex: this.page_no });
+      if (res.Ret === 200) {
+        this.contentImg = res.Data.ImgUrl;
+        this.contentLabel = res.Data.Label;
+        this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
+        if (this.page_no === 1) {
+          this.collectList = res.Data.List || [];
+          this.haveData = this.collectList.length ? true : false;
+          if (this.refresh) {
+            uni.stopPullDownRefresh();
+            this.refresh = false;
+          }
+        } else {
+          this.collectList = this.collectList.concat(res.Data.List);
+        }
+      }
+    },
+    //头部tabs切换
+    toggleTab(item, index) {
+      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+        //已授权已绑定
+        if (index != this.tabsActive) {
+          this.tabsActive = index;
+          this.page_no = 1;
+          this.collectTypeList = [];
+          this.collectList = [];
+          this.tabsActive == 0 ? this.getActivityLabelTypeList() : this.getActivityList();
+          if (this.tabsActive !== 0) {
+            this.selectComponent("#industry").toggle(false);
+          }
+        }
+      } else {
+        //已授权未绑定
+        uni.navigateTo({
+          url: "/pageMy/login/login",
+        });
+      }
+    },
+    // 下拉的选择的关闭事件
+    closeTheWindow() {
+      const types = this.chartPermissionIds ? this.chartPermissionIds.split(",").map(Number) : [];
+      if (types.length > 0) {
+        const str = [];
+        this.listChartPermission.forEach((item) => {
+          if (types.includes(item.ChartPermissionId)) {
+            item.IsChoose = true;
+            str.push(item.PermissionName);
+          } else {
+            item.IsChoose = false;
+          }
+        });
+        this.chartPermissionName = str.length == 6 ? "所有行业" : str.join(",");
+      }
+    },
+    // 下拉的选择的选中事件
+    overallClick(item) {
+      if (this.isShowJurisdiction) return;
+      this.listChartPermission.forEach((key) => {
+        if (key.ChartPermissionId == item.ChartPermissionId) {
+          key.IsChoose = !key.IsChoose;
+        }
+      });
+    },
+    // 下拉的选择的重置事件
+    replacementBtn() {
+      this.listChartPermission = this.listChartPermissionInit;
+      this.chartPermissionIds = "";
+      this.isShowJurisdiction = false;
+      this.listChartPermission.map((item) => (item.IsChoose = false));
+      this.chartPermissionName = "所有行业";
+      this.getActivityLabelTypeList();
+    },
+    //下拉选择的确定事件
+    replacementConfirm() {
+      const arr = [];
+      const str = [];
+      this.listChartPermission &&
+        this.listChartPermission.forEach((key) => {
+          if (key.IsChoose) {
+            arr.push(key.ChartPermissionId);
+            str.push(key.PermissionName);
+          }
+        });
+      if ((str.length == 6 && this.listChartPermission.length == 6) || str.length <= 0) {
+        this.chartPermissionName = "所有行业";
+      } else {
+        this.chartPermissionName = str.join(",");
+      }
+      this.chartPermissionIds = arr.join(",");
+      this.getActivityLabelTypeList();
+      this.selectComponent("#industry").toggle(false);
+    },
+    //今日明日的点击事件
+    isActivityDate(id) {
+      this.selectComponent("#industry").toggle(false);
+      this.activityTimeList.forEach((item) => {
+        if (item.Id == id) item.IsChoose = !item.IsChoose;
+      });
+      const arr = [];
+      this.activityTimeList.forEach((item) => item.IsChoose && arr.push(item.Id));
+      this.whichDay = arr.join(",");
+      this.getActivityLabelTypeList();
+    },
+    //是否有权限的点击事件
+    async permissioActivity() {
+      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+        this.selectComponent("#industry").toggle(false);
+        this.isShowJurisdiction = !this.isShowJurisdiction;
+        this.isGetJurisdiction = this.isShowJurisdiction ? 1 : 2;
+        await this.getUserSearchContent();
+        this.selectComponent("#industry").toggle(false);
+        if (this.isShowJurisdiction) {
+          this.getActivityLabelTypeList();
+        } else {
+          this.replacementBtn();
+        }
+      } else {
+        //已授权未绑定
+        uni.navigateTo({
+          url: "/pageMy/login/login",
+        });
+      }
+    },
+    //点击后有权限的
+    clickPermission() {
+      if (this.isShowJurisdiction) {
+        const arr = [];
+        this.listChartPermission &&
+          this.listChartPermission.forEach((key) => {
+            if (key.IsChoose) {
+              arr.push(key.ChartPermissionId);
+            }
+          });
+        this.chartPermissionIds = arr.join(",");
+      }
+    },
+    loadShare(option) {
+      if (option && Object.keys(option).length !== 0) {
+        this.whichDay = option.whichDay || "";
+        this.chartPermissionIds = option.chartPermissionIds || "";
+        this.isGetJurisdiction = option.isGetJurisdiction;
+        this.$nextTick(() => {
+          let day = this.whichDay ? this.whichDay.split(",").map(Number) : [];
+          this.activityTimeList.forEach((item) => {
+            if (day.includes(item.Id)) {
+              item.IsChoose = true;
+            }
+          });
+        });
+      }
+    },
+    goDetails(item, key) {
+      if (item.Resource === 1 || key === 1) {
+        let type = item.ActivityTypeName || "";
+        let key = item.ActivityTypeId || item.KeyWord;
+        this.$store.dispatch("checkHandle", "/activityPages/themeActivity/themeActivity?title=" + key + "&type=" + type + "&permissionIds=" + this.chartPermissionIds + "&whichDay=" + this.whichDay);
+      } else {
+        if (key) {
+          this.$store.dispatch("checkHandle", "/activityPages/specialDetail/specialDetail?id=" + item.ActivityId);
+        } else {
+          this.$store.dispatch("checkHandle", "/activityPages/specialResearchPage/specialResearchPage");
+        }
+      }
+    },
+    //去往搜索事件
+    goSearch() {
+      this.$store.dispatch("checkHandle", "/activityPages/activitySearch/activitySearch");
+    },
+  },
+  //load
+  onLoad(option) {
+    this.loadShare(option);
+    this.getUserSearchContent();
+    this.getActivityLabelTypeList();
+  },
+  async onShow() {
+    await this.$store.dispatch("checkHandle", "noGO");
+  },
+  /** 用户点击分享 */
+  onShareAppMessage: function (res) {
+    return {
+      title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : this.messageTitle,
+      path: "/pages/activity/activity?whichDay=" + this.whichDay + "&chartPermissionIds=" + this.chartPermissionIds + "&isGetJurisdiction=" + this.isGetJurisdiction,
+    };
+  },
+  /* 触底 */
+  onReachBottom: Throttle(function () {
+    if (this.status === "nomore") return;
+    this.status = "loading";
+    this.page_no++;
+    this.tabsActive == 1 && this.getActivityList();
+  }),
+  /* 下拉刷新 */
+  onPullDownRefresh: Throttle(function () {
+    this.page_no = 1;
+    this.refresh = true;
+    this.tabsActive == 0 ? this.getActivityLabelTypeList() : this.getActivityList();
+  }),
+  // 页面滚动事件
+  onPageScroll() {},
+};
+</script>
+
+<style scoped lang="scss">
+// image{will-change: transform}
+.activity-content {
+  background-color: #f7f7f7;
+  padding-bottom: 90rpx;
+  position: relative;
+  .top-content {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    padding-bottom: 2rpx;
+    background-color: #fff;
+    .tab {
+      display: flex;
+      font-size: 32rpx;
+      color: #707070;
+      .tab-item {
+        flex: 1;
+        text-align: center;
+        .scroll-tab-item {
+          height: 78rpx;
+          line-height: 48rpx;
+          position: relative;
+          .border_act {
+            position: absolute;
+            height: 6rpx;
+            width: 340rpx;
+            left: 0;
+            bottom: 0rpx;
+          }
+        }
+        .active {
+          color: #3385ff;
+          font-weight: bold;
+          font-size: 34rpx;
+        }
+      }
+    }
+    .index-fixed {
+      margin-top: 40rpx;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      height: 70rpx;
+      background: #f6f6f6;
+      border: 1rpx solid #e5e5e5;
+      opacity: 1;
+      border-radius: 35rpx;
+      padding-left: 34rpx;
+      color: #8d8d8d;
+      font-size: 28rpx;
+      .search_ico {
+        padding-right: 16rpx;
+      }
+    }
+  }
+  .screen-item {
+    position: sticky;
+    top: 78rpx;
+    left: 0;
+    z-index: 99;
+    background-color: #fff;
+    height: 111rpx;
+    padding: 0 34rpx;
+    font-size: 24rpx;
+    color: #333;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text {
+      width: 150rpx;
+      text-align: center;
+      line-height: 51rpx;
+      background-color: #f8f8fa;
+      box-sizing: border-box;
+      border-radius: 26rpx;
+    }
+    .active {
+      background-color: #3385ff;
+      color: #fff;
+    }
+  }
+  .select-conyent {
+    .decide {
+      background-color: #f8f8fa;
+      display: flex;
+      align-items: center;
+      margin: 0 auto;
+      height: 110rpx;
+      width: 100%;
+      padding-left: 30rpx;
+    }
+    .items-box {
+      width: 40rpx;
+    }
+    .menu-items {
+      background-color: #f8f8fa;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      padding: 30rpx 30rpx 0;
+      .menu-items-box {
+        display: flex;
+        width: 50%;
+        font-size: 28rpx;
+        font-weight: 400;
+        margin-bottom: 40rpx;
+      }
+      text {
+        text-align: left;
+      }
+    }
+    .replacement {
+      margin: 0rpx 30rpx 20rpx;
+      display: flex;
+      background-color: #2c83ff;
+      height: 60rpx;
+      font-size: 28rpx;
+      font-weight: 400;
+      color: #ffffff;
+      border-radius: 30rpx;
+      box-sizing: border-box;
+      text {
+        flex: 1;
+        line-height: 58rpx;
+        background-color: #2c83ff;
+      }
+      .replacement-box {
+        border: 1rpx solid #2c83ff;
+        color: #2c83ff;
+        background: #ffffff;
+        border-radius: 28rpx 0rpx 28rpx 28rpx;
+      }
+    }
+  }
+  .nodata_ico {
+    width: 374rpx;
+    height: 288rpx;
+  }
+  .content-list {
+    display: flex;
+    padding: 34rpx;
+  }
+  .half {
+    width: 50%;
+  }
+  .activity-ltem {
+    width: 331rpx;
+    position: relative;
+    margin-bottom: 30rpx;
+    .zindex-one {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 250rpx;
+      width: 100%;
+      z-index: 1;
+    }
+    .zindex-two {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+    .content {
+      position: sticky;
+      top: 0;
+      left: 0;
+      width: 100%;
+      // padding-bottom: 30rpx;
+      border-radius:15rpx;
+      overflow: hidden;
+      z-index: 3;
+    }
+    .item-img {
+      width: 100%;
+      height: 147rpx;
+      margin-bottom: 30rpx;
+      font-size: 34rpx;
+      color: #fff;
+      padding: 30rpx 0 0 20rpx;
+    }
+    .activity-li {
+      width: 100%;
+      height: 86rpx;
+      position: relative;
+      .item-image {
+        width: 100%;
+        height: 100%;
+      }
+      .text_oneLine {
+        position: absolute;
+        width: 100%;
+        height: 50rpx;
+        padding: 0 30rpx;
+        text-align: center;
+        font-size: 28rpx;
+        top: 15rpx;
+        color: #fff;
+      }
+      // &::before {
+      //   content: "";
+      //   width: 0;
+      //   height: 0;
+      //   border-top: 8rpx solid transparent;
+      //   border-left: 17rpx solid #fff;
+      //   border-bottom: 8rpx solid transparent;
+      //   margin-right: 10rpx;
+      // }
+    }
+  }
+  .more {
+    width: 100%;
+    text-align: center;
+    font-size: 34rpx;
+    color: #3385ff;
+    margin-top: 90rpx;
+  }
+  .activity-ui {
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+/deep/.van-dropdown-menu {
+  background-color: #fff;
+  box-shadow: none !important;
+  align-items: center !important;
+}
+/deep/.van-dropdown-menu__item {
+  box-sizing: border-box;
+  width: 166rpx;
+  padding-right: 20rpx;
+  height: 51rpx;
+  border-radius: 26rpx;
+  background: #f8f8fa;
+}
+/deep/.van-dropdown-item {
+  margin-top: -10rpx;
+}
+/deep/[data-index="2"] {
+  margin-right: 0rpx;
+}
+/deep/ .van-ellipsis {
+  font-size: 24rpx;
+}
+@import "@/activityPages/components/indexActivity.scss";
+</style>