123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675 |
- <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="index % 2 == 0">
- <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.ActivityTypeId,item.ActivityTypeName)">
- {{ item.ActivityTypeName }}
- </view>
- <view class="activity-li" v-for="val in item.List" :key="val.KeyWord" @click="goDetails(val.KeyWord)">
- <image class="item-image" lazy-load :src="val.ImgUrlBg"></image>
- <text class="text_oneLine"> {{ val.KeyWord }}</text>
- </view>
- </view>
- </view>
- </view>
- <view class="half">
- <view class="activity-ltem" v-for="(item, index) in collectTypeList" :key="index" v-if="index % 2 != 0">
- <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.ActivityTypeId,item.ActivityTypeName)">
- {{ item.ActivityTypeName }}
- </view>
- <view class="activity-li" v-for="val in item.List" :key="val.KeyWord" @click="goDetails(val.KeyWord)">
- <image class="item-image" lazy-load :src="val.ImgUrlBg"></image>
- <text class="text_oneLine"> {{ val.KeyWord }}</text>
- </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">
- <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>
- <view class="item">
- <view class="item-text" @click="goDetail(item)">
- <text class="activity-title"> {{ item.ActivityName }} </text>
- <text class="text_twoLine" v-if="item.ActivityTypeName == '专家电话会' || item.ActivityTypeName == '专家线下沙龙'">专家背景:{{ item.Expert }} </text>
- <text class="text_twoLine" v-if="item.ActivityTypeName == '公司调研电话会' || item.ActivityTypeName == '公司线下调研'">嘉宾:{{ item.DistinguishedGuest }} </text>
- <text class="text_twoLine" v-if="item.ActivityTypeName == '分析师电话会' || item.ActivityTypeName == '分析师线下沙龙'">主讲人:{{ item.Speaker }}</text>
- </view>
- <block v-if="item.ActiveState == 1">
- <view class="bottom-box city" v-if="item.ActiveState == 1 && item.IsLimitPeople == 1 && item.ActivityTypeName == '公司调研电话会'">
- <view class="city-img">
- <image v-if="item.City" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png" />
- {{ item.City }}
- </view>
- <text class="button" v-if="item.IsSignup !== 1" @click="wanttosignup(item.ActivityId)">我要报名</text>
- <text class="button" v-else @click="signupCancel(item.ActivityId, 2, item.ActivityTime)">{{ item.SignupType == 1 ? "取消外呼" : "取消报名" }}</text>
- </view>
- <view class="bottom-box" v-else-if="item.ActivityType == 1">
- <view class="" style="width: 130rpx">
- <text v-if="item.ActivityTypeId == 1" @click="askingGo(item)">帮我代问</text>
- </view>
- <text @click="meetingReminderAdd(item.ActivityId)" v-if="item.IsCancelMeetingReminder == 0">会议提醒</text>
- <text @click="meetingReminderCancel(item.ActivityId)" v-else>取消提醒</text>
- <text class="button" v-if="item.IsSignup !== 1" @click="signupAdd(item.ActivityId, 1)">预约外呼</text>
- <text class="button" @click="signupCancel(item.ActivityId, 1, item.ActivityTime)" v-else>取消外呼</text>
- </view>
- <view class="bottom-box city" v-else>
- <view class="city-img">
- <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png" />
- {{ item.City }}
- </view>
- <text class="button" v-if="item.IsSignup !== 1" @click="signupAdd(item.ActivityId, 3)">我要报名</text>
- <text class="button" v-else @click="signupCancel(item.ActivityId, 3, item.ActivityTime)">取消报名</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"
- />
- </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";
- let app = getApp();
- export default {
- mixins: [myActivityMixin],
- components: {
- modalDialog,
- },
- 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.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.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(key,type='') {
- this.$store.dispatch("checkHandle", "/activityPages/themeActivity/themeActivity?title=" + key + "&type=" + type + "&permissionIds=" + this.chartPermissionIds + "&whichDay="+ this.whichDay)
- },
- //去往搜索事件
- 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.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.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;
- 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;
- }
- }
- /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>
|