|
|
@@ -0,0 +1,344 @@
|
|
|
+<template>
|
|
|
+ <view class="container container-play-back">
|
|
|
+ <!-- 筛选部分 -->
|
|
|
+ <view class="screen-item">
|
|
|
+ <text :class="[isShowJurisdiction ? 'active' : '', 'text-item']" @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-ul">
|
|
|
+ <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 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>
|
|
|
+ 回放
|
|
|
+ </view>
|
|
|
+ </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>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
|
|
|
+ </view>
|
|
|
+ <audioModule :showAudioPop.sync="showAudioPop" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { activity, User } from "@/config/api.js";
|
|
|
+import { Throttle } from "@/config/util.js";
|
|
|
+import audioModule from "@/components/audioModule/index";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ page_no: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ collectList: [],
|
|
|
+ status: "loadmore",
|
|
|
+ refresh: false, //正在下拉
|
|
|
+ isShowJurisdiction: false,
|
|
|
+ isGetJurisdiction: 0,
|
|
|
+ listChartPermission: [],
|
|
|
+ chartPermissionName: "所有行业",
|
|
|
+ chartPermissionIds: "",
|
|
|
+ loadText: {
|
|
|
+ loadmore: "上拉加载更多",
|
|
|
+ loading: "加载中",
|
|
|
+ nomore: "已经到底了",
|
|
|
+ },
|
|
|
+ showAudioPop: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: { audioModule },
|
|
|
+ methods: {
|
|
|
+ //获取活动
|
|
|
+ async getActivityList() {
|
|
|
+ const res = await activity.getActivityList({
|
|
|
+ PageSize: this.pageSize,
|
|
|
+ CurrentIndex: this.page_no,
|
|
|
+ ActiveState: "3",
|
|
|
+ IsShowJurisdiction: this.isGetJurisdiction,
|
|
|
+ ChartPermissionIds: this.chartPermissionIds,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.clickPermission();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //是否有权限的点击事件
|
|
|
+ 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();
|
|
|
+
|
|
|
+ if (this.isShowJurisdiction) {
|
|
|
+ this.getActivityList();
|
|
|
+ } 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(",");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //下拉选择的确定事件
|
|
|
+ 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.getActivityList();
|
|
|
+ this.selectComponent("#industry").toggle(false);
|
|
|
+ },
|
|
|
+ // 下拉的选择的重置事件
|
|
|
+ replacementBtn() {
|
|
|
+ this.chartPermissionIds = "";
|
|
|
+ this.isShowJurisdiction = false;
|
|
|
+ this.listChartPermission.map((item) => (item.IsChoose = false));
|
|
|
+ this.chartPermissionName = "所有行业";
|
|
|
+ this.getActivityList();
|
|
|
+ },
|
|
|
+ // 选择的选中事件
|
|
|
+ overallClick(item) {
|
|
|
+ if (this.isShowJurisdiction) return;
|
|
|
+ item.IsChoose = !item.IsChoose;
|
|
|
+ },
|
|
|
+ //点击了回放
|
|
|
+ audioPlayBack(item) {
|
|
|
+ // 判断是否为同一个音频
|
|
|
+ if (this.$store.state.audioBg.activityId == item.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:'3.80',
|
|
|
+ Title:'测试测试'
|
|
|
+ }
|
|
|
+ this.showAudioPop = true;
|
|
|
+ this.$store.commit("audioBg/addAudio", { list: item.VideoList, activityId: item.ActivityId , activityTitle:item.ActivityName});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getActivityList();
|
|
|
+ this.getUserSearchContent();
|
|
|
+ },
|
|
|
+ /* 触底 */
|
|
|
+ onReachBottom: Throttle(function () {
|
|
|
+ if (this.status === "nomore") return;
|
|
|
+ this.status = "loading";
|
|
|
+ this.page_no++;
|
|
|
+ this.getActivityList();
|
|
|
+ }),
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container-play-back {
|
|
|
+ background: #f7f7f7;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ .title-date {
|
|
|
+ position: relative;
|
|
|
+ .audio-back {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 99rpx;
|
|
|
+ height: 39rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #3385ff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .audio-img {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin: 0 5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-item {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 111rpx;
|
|
|
+ padding: 0 34rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .text-item {
|
|
|
+ width: 150rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 51rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ background-color: #f8f8fa;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #3385ff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-conyent {
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .replacement {
|
|
|
+ margin: 0rpx 30rpx 20rpx;
|
|
|
+ display: flex;
|
|
|
+ background-color: #2c83ff;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 58rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ text {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ .replacement-box {
|
|
|
+ border: 1rpx solid #2c83ff;
|
|
|
+ line-height: 58rpx;
|
|
|
+ color: #2c83ff;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 28rpx 0rpx 28rpx 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @import "../components/indexActivity.scss";
|
|
|
+}
|
|
|
+/deep/.van-dropdown-menu {
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: none !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+/deep/.van-dropdown-menu__item {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 190rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+</style>
|
小彬