themeActivity.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. <template>
  2. <block>
  3. <view class="container theme-container">
  4. <!-- 筛选部分 -->
  5. <view class="select-content-activity">
  6. <view class="top-title" v-if="!type && isUserBindingPhoneNumber">
  7. <view :class="['content-title', !contentDetail.IsJump && 'jump-title']" @click="jumpHandler">
  8. <text class="jump-label">{{ contentDetail.Label }}</text>
  9. <text v-if="contentDetail.IsJump" class="jump-text"> 查看资源包>></text>
  10. <image v-if="contentDetail.IndustryNewLabel" class="new_icon" src="https://hzstatic.hzinsights.com/cygx/icon/new_report.png" mode=""></image>
  11. </view>
  12. </view>
  13. <view :class="['screen-item', (isEndActivity || !type) && 'end-select-item']">
  14. <block v-if="!isEndActivity && type">
  15. <text :class="[isShowJurisdiction ? 'active' : '', 'text-item']" @click="permissioActivity" v-if="isUserBindingPhoneNumber">有权限行业</text>
  16. <!-- 各种状态选择 -->
  17. <view class="select-conyent" ref="select-conyent">
  18. <van-dropdown-menu active-color="#333333">
  19. <van-dropdown-item id="industry" :title="chartPermissionName">
  20. <view class="menu-items">
  21. <view class="menu-items-box" v-for="item in listChartPermission" :key="item.ChartPermissionId" @click="overallClick(item)">
  22. <view class="items-box">
  23. <u-icon v-if="item.IsChoose" name="checkbox-mark" :color="isShowJurisdiction ? '#ccc' : '#376cbb'" size="24"></u-icon>
  24. </view>
  25. <text>{{ item.PermissionName }}</text>
  26. </view>
  27. </view>
  28. <view class="replacement">
  29. <text @click="replacementBtn" class="replacement-box">重置</text>
  30. <text @click="replacementConfirm">确定</text>
  31. </view>
  32. </van-dropdown-item>
  33. </van-dropdown-menu>
  34. </view>
  35. </block>
  36. <block v-if="isEndActivity">
  37. <text @click="selectMultipleHandler(item, '类型')" v-for="item in activityTypeList" :key="item.Id" :class="['select-item-multiple', item.IsChoose && 'active']">{{ item.StatusName }}</text>
  38. </block>
  39. <block v-else>
  40. <text @click="selectMultipleHandler(item, '日期')" v-for="item in activityTimeList" :key="item.Id" :class="['select-item-multiple', item.IsChoose && 'active']">{{ item.StatusName }}</text>
  41. </block>
  42. </view>
  43. <view class="research-external-item" v-if="!isEndActivity && type && contentDetail.IsShowResearchPoints">
  44. <text @click="selectMultipleHandler(item, '扣点')" v-for="item in ResearchExternal" :key="item.Id" :class="['select-item-multiple', item.IsChoose && 'active']">{{ item.StatusName }}</text>
  45. </view>
  46. <view class="screen-item screen-item-ul" v-if="isEndActivity">
  47. <text @click="monthWeekHandler(item)" v-for="item in activityMonthWeekList" :key="item.Id" :class="['text-item', item.IsChoose && 'active']">{{ item.StatusName }}</text>
  48. </view>
  49. </view>
  50. <!-- 活动列表 -->
  51. <view>
  52. <view class="collect-ul" v-if="haveData">
  53. <view class="collect-ltem global_card_content" v-for="(item, index) in collectList" :key="index">
  54. <image class="top-img-box" v-if="detailData.IsResearchPoints" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/research_points.png"></image>
  55. <image class="top-img-box" v-else-if="detailData.IsResearch" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/Research_normal.png"></image>
  56. <view class="title-date" @click="goDetail(item)">
  57. <text :class="item.ActivityType == 1 ? '' : 'xianxia'">{{ item.ActivityType == 1 ? "线上" : "线下" }}</text>
  58. {{ item.SourceType == 2 ? "" : item.ActivityTimeText }}
  59. <view class="audio-back" v-if="item.AudioLink" @click.stop="playBack(item)">
  60. <view class="audio-box">
  61. <block v-if="item.FileType == 2">
  62. <image class="audio-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/video_play.png"></image>
  63. </block>
  64. <image
  65. v-else
  66. class="audio-img"
  67. :src="
  68. curVoiceId === item.ActivityId && !curAudioPaused
  69. ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/stop_play.png'
  70. : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/audio_play.png'
  71. "
  72. ></image>
  73. {{ curVoiceId === item.ActivityId && !curAudioPaused ? "暂停" : "回放" }}
  74. </view>
  75. </view>
  76. </view>
  77. <view class="item-li">
  78. <view class="item-img" @click="goDetail(item)">
  79. <image :src="item.ImgUrl"></image>
  80. <image v-if="item.ActiveState == 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/not_started_activity.png" class="img-status"></image>
  81. <image v-else-if="item.ActiveState == 2" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/in_progress_activity.png" class="img-status"></image>
  82. <block v-else>
  83. <image v-if="item.TripStatus != 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/end_activity.png" class="img-status"></image>
  84. </block>
  85. <view class="img-type">
  86. <image :src="item.ImgUrlText" mode=""></image>
  87. </view>
  88. </view>
  89. <view class="item">
  90. <view class="item-text" @click="goDetail(item)">
  91. <view class="activity-title text_twoLine">
  92. <image v-if="item.IsResearchPoints" src="https://hzstatic.hzinsights.com/cygx/icon/Research_Points.png"></image>
  93. <image v-else-if="item.IsResearch" src="https://hzstatic.hzinsights.com/cygx/icon/Research_normal.png"></image>
  94. <image v-else-if="item.IsExternalLabel" src="https://hzstatic.hzinsights.com/cygx/icon/activity_external.png"></image>
  95. {{ item.ActivityName }}
  96. </view>
  97. <text class="global_activity_content text_twoLine" v-if="item.Expert && item.SourceType == 1">专家背景:{{ item.Expert }} </text>
  98. <text class="global_activity_content text_twoLine" v-if="item.DistinguishedGuest">嘉宾:{{ item.DistinguishedGuest }} </text>
  99. <text class="global_activity_content text_twoLine" v-if="item.Speaker">主讲人:{{ item.Speaker }}</text>
  100. <view style="display: flex" class="global_activity_content text_twoLine" v-if="item.ActivityTimeText && item.SourceType == 2">
  101. <text style="flex-shrink: 0"> 活动时间:</text>
  102. <text> {{ item.ActivityTimeText }}</text>
  103. </view>
  104. </view>
  105. <block v-if="item.SourceType == 1 && isUserBindingPhoneNumber">
  106. <block v-if="item.ActiveState == 1">
  107. <view :class="['bottom-box', isEndBtn(item) > 3 && 'expert-item', item.City && 'city']">
  108. <view class="city-img" v-if="item.City">
  109. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/position.png"></image>
  110. {{ item.City }}
  111. </view>
  112. <view style="display: flex">
  113. <text v-if="item.IsShowOutboundCall && item.ActivityTypeId == 1" class="button" @click="signupCheck(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
  114. <text v-if="item.IsShowAppointment" @click="summaryHandelCheck(item)">{{ item.IsAppointment == 1 ? "取消纪要" : "预约纪要" }}</text>
  115. <text v-if="item.IsShowMeetingReminder" @click="meetingReminderCheck(item.ActivityId, item.IsCancelMeetingReminder)">
  116. {{ item.IsCancelMeetingReminder == 0 ? "消息提醒" : "取消提醒" }}
  117. </text>
  118. <text v-if="item.IsShowHelpSsk" @click="askingCheck(item)">帮我带问</text>
  119. <text v-if="item.IsShowOutboundCall && item.ActivityTypeId != 1" class="button" @click="signupCheck(item, 1)">{{ item.IsSignup == 1 ? "取消外呼" : "预约外呼" }}</text>
  120. <text v-if="item.IsShowDetails" @click="goDetailCheck(item)" class="button">查看详情</text>
  121. <block v-if="item.IsShowSignup">
  122. <block v-if="item.IsCClassMeeting && !item.IsYidongConduct">
  123. <text class="button" @click="signupCheck(item, 3, 'CClass')">{{ item.IsSignup == 1 ? "取消报名" : "我要报名" }}</text>
  124. </block>
  125. <block v-else>
  126. <text class="button" v-if="item.IsSignup !== 1" @click="wanttosignupCheck(item)">我要报名</text>
  127. <text class="button" v-else @click="signupCheck(item, 2)">{{ item.SignupType == 1 ? "取消外呼" : "取消报名" }}</text>
  128. </block>
  129. </block>
  130. </view>
  131. </view>
  132. </block>
  133. <block v-else>
  134. <view class="bottom-box city" v-if="item.City">
  135. <view class="city-img">
  136. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png"></image>
  137. {{ item.City }}
  138. </view>
  139. </view>
  140. <view class="bottom-box real-time" v-if="item.ActiveState == 2 && item.ActivityTypeId == 1">
  141. <text class="button" @click="askingGo(item, '提问')">实时提问</text>
  142. </view>
  143. </block>
  144. </block>
  145. <block v-if="item.SourceType == 2 && isUserBindingPhoneNumber">
  146. <view class="bottom-box">
  147. <view class="" style="width: 130rpx"> </view>
  148. <text @click="lookImg(item)">行程安排</text>
  149. </view>
  150. </block>
  151. </view>
  152. </view>
  153. <view class="reminder-item" v-if="item.SourceType == 2">
  154. <image class="item" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/confirm_XC.png"></image>
  155. </view>
  156. </view>
  157. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
  158. </view>
  159. <view class="nodata" v-else>
  160. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
  161. <text>暂时没有符合条件的活动</text>
  162. </view>
  163. <SelectPopup :selectShow.sync="selectShow" @signupIsAddOfCancel="signupIsAddOfCancel" :selectYdong="selectYdong" />
  164. <!-- 所有自定义弹框 -->
  165. <modalDialog
  166. :isShow="isShow"
  167. :signupType="signupType"
  168. :goFollow="goFollow"
  169. :hasPermission="hasPermission"
  170. :jurisdictionList="jurisdictionList"
  171. :editIsShow="editIsShow"
  172. :isCancelShow="isCancelShow"
  173. :idTypeCancel="idTypeCancel"
  174. :countryCode="countryCode"
  175. :mobileEdit="mobileEdit"
  176. :goOnNextStep="goOnNextStep"
  177. :isShowhasPermission="isShowhasPermission"
  178. :applyForIsShow="applyForIsShow"
  179. :mailboxBinding="mailboxBinding"
  180. />
  181. </view>
  182. <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  183. <view v-if="showAudioBox">
  184. <audioModule :showAudioPop.sync="showAudioPop" />
  185. </view>
  186. <videoModule :showVideoPop.sync="showVideoPop" :videoPopList="videoPopList" />
  187. </view>
  188. <!-- <not-have-login v-else /> -->
  189. <ShowResearchDlg :isResearchModalShow.sync="isResearchModalShow" :jurisdictionList="jurisdictionList" :checkResearchList.sync="checkResearchList" />
  190. <Loading />
  191. </block>
  192. </template>
  193. <script>
  194. import { activity, User } from "@/config/api.js";
  195. import { Throttle } from "@/config/util.js";
  196. import modalDialog from "@/components/modalDialog.vue";
  197. import myActivityMixin from "@/components/activity/indexActivity.js";
  198. import freeCharge from "@/components/freeCharge";
  199. import selectMixins from "../components/selectMixins.js";
  200. import audioModule from "@/components/audioModule/index";
  201. import mediaMixins from "@/components/activity/mediaMixins";
  202. import videoModule from "@/components/videoModule/index";
  203. import SelectPopup from "@/components/activity/selectPopup";
  204. import NotHaveLogin from "../../components/notHaveLogin.vue";
  205. import ShowResearchDlg from "@/components/activity/showResearchDlg.vue";
  206. export default {
  207. mixins: [myActivityMixin, selectMixins, mediaMixins],
  208. data() {
  209. return {
  210. hasPermission: "", //是否有权限
  211. contentImg: "",
  212. contentLabel: "",
  213. contentDetail: {},
  214. label: "",
  215. type: "",
  216. activityId: "",
  217. haveData: true,
  218. isEndActivity: false,
  219. hideResearch: false,
  220. };
  221. },
  222. components: {
  223. modalDialog,
  224. freeCharge,
  225. audioModule,
  226. videoModule,
  227. SelectPopup,
  228. NotHaveLogin,
  229. ShowResearchDlg,
  230. },
  231. methods: {
  232. // 判断几个按钮
  233. isEndBtn(item) {
  234. let isKeys = ["IsShowOutboundCall", "IsShowAppointment", "IsShowMeetingReminder", "IsShowHelpSsk", "IsShowDetails", "IsShowSignup"];
  235. let arr = [];
  236. Object.keys(item).forEach((key) => {
  237. if (isKeys.includes(key)) {
  238. item[key] && arr.push(item[key]);
  239. }
  240. });
  241. return arr.length;
  242. },
  243. // 获取列表数据
  244. async getActivityList() {
  245. const res = await activity.getActivityListNew({
  246. PageSize: this.pageSize,
  247. CurrentIndex: this.page_no,
  248. Label: this.type ? "" : this.label,
  249. ActiveState: this.isEndActivity ? 3 : 1,
  250. ActivityTypeId: this.type ? this.label : "",
  251. ChartPermissionIds: this.chartPermissionIds,
  252. WhichDay: this.whichDay,
  253. ActivityId: this.activityId,
  254. TypeName: this.selectActiveId,
  255. IsResearchPoints: this.ResearchExternalAct,
  256. });
  257. if (res.Ret === 200) {
  258. if (this.type) {
  259. uni.setNavigationBarTitle({
  260. title: this.type,
  261. });
  262. }
  263. this.contentImg = res.Data.ImgUrl;
  264. this.contentDetail = res.Data;
  265. this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
  266. if (this.page_no === 1) {
  267. this.collectList = res.Data.List || [];
  268. this.haveData = this.collectList.length ? true : false;
  269. if (this.refresh) {
  270. uni.stopPullDownRefresh();
  271. this.refresh = false;
  272. }
  273. } else {
  274. this.collectList = this.collectList.concat(res.Data.List);
  275. }
  276. }
  277. },
  278. // 点击了top的标签
  279. async jumpHandler() {
  280. await this.$store.dispatch("showLoginModal");
  281. if (this.contentDetail.IsJump) {
  282. if (this.contentDetail.IsResearch) {
  283. //严选
  284. uni.navigateTo({ url: "/reportPages/researchTheme/researchTheme?id=" + this.contentDetail.IndustrialManagementId });
  285. } else {
  286. //非严选
  287. uni.navigateTo({
  288. url: "/reportPages/IndustryReport/IndustryReport?id=" + this.contentDetail.IndustrialManagementId + "&entrance=活动详情",
  289. });
  290. }
  291. }
  292. },
  293. // 进入页面的筛选的方法
  294. selectInitHandler(value, list) {
  295. list.forEach((item) => {
  296. if (value.includes(item.Id)) {
  297. item.IsChoose = true;
  298. }
  299. });
  300. },
  301. //查看行程的事件
  302. lookImg(item) {
  303. this.getRecordTracking(this.$store.state.pageRouterActivity, { ActivityId: item.ActivityId, Source: "查看行程" });
  304. uni.previewImage({
  305. urls: [item.TripImgLink], //查看图片的数组
  306. });
  307. },
  308. // 进入页面的初始化
  309. loadInit(option) {
  310. this.label = option.title;
  311. this.type = option.type;
  312. this.chartPermissionIds = option.permissionIds || "";
  313. this.activityId = option.id;
  314. this.whichDay = option.whichDay || "";
  315. this.isShowJurisdiction = option.showJurisdiction == "show" ? true : false;
  316. this.isGetJurisdiction = this.isShowJurisdiction ? 1 : 2;
  317. this.whichDay && this.selectInitHandler(this.whichDay, this.activityTimeList);
  318. if (option.endList) {
  319. this.isEndActivity = true;
  320. let obj = JSON.parse(option.endList);
  321. this.whichDay = obj.data_activeId;
  322. this.selectActiveId = obj.select_activeId;
  323. this.selectInitHandler(this.whichDay, this.activityMonthWeekList);
  324. this.selectInitHandler(this.selectActiveId, this.activityTypeList);
  325. }
  326. // this.isUserBindingPhoneNumber &&
  327. this.getActivityList();
  328. },
  329. // 操作之前 是否登录判断
  330. async playBack(item) {
  331. await this.$store.dispatch("showLoginModal");
  332. this.PlayBackAll(item);
  333. },
  334. },
  335. onLoad(option) {
  336. this.loadInit(option);
  337. },
  338. onShow() {
  339. this.$store.commit("setRouterReport", "活动列表");
  340. this.$store.commit("setRouterActivity", "活动列表");
  341. this.$store.commit("audioBg/parseIntAudio", true);
  342. },
  343. onHide() {
  344. this.$store.commit("audioBg/parseIntAudio", false);
  345. },
  346. /* 触底 */
  347. onReachBottom: Throttle(function () {
  348. if (this.status === "nomore") return;
  349. this.status = "loading";
  350. this.page_no++;
  351. this.getActivityList();
  352. }),
  353. /* 下拉刷新 */
  354. onPullDownRefresh: Throttle(function () {
  355. this.page_no = 1;
  356. this.refresh = true;
  357. this.getActivityList();
  358. }),
  359. /** 用户点击分享 */
  360. onShareAppMessage: function (res) {
  361. return {
  362. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : this.type || this.label,
  363. path: "/activityPages/themeActivity/themeActivity?title=" + this.label + "&permissionIds=" + this.chartPermissionIds + "&whichDay=" + this.whichDay + "&type=" + this.type,
  364. };
  365. },
  366. };
  367. </script>
  368. <style lang="scss" scoped>
  369. .theme-container {
  370. background-color: $uni-bg-color;
  371. padding-bottom: 30rpx;
  372. position: relative;
  373. .top-title {
  374. position: sticky;
  375. top: 0;
  376. z-index: 99;
  377. background-color: #fff;
  378. display: flex;
  379. align-items: center;
  380. color: #376cbb;
  381. font-size: 30rpx;
  382. padding: 30rpx 30rpx 20rpx;
  383. border-bottom: 2rpx solid #dcdfe6;
  384. .content-title {
  385. display: flex;
  386. align-items: center;
  387. .jump-text {
  388. margin-left: 10rpx;
  389. font-size: 24rpx;
  390. color: #376cbb;
  391. }
  392. .jump-label {
  393. font-size: 28rpx;
  394. padding: 6rpx 18rpx;
  395. background-color: #376cbb;
  396. border-radius: 52rpx;
  397. color: #fff;
  398. }
  399. .new_icon {
  400. width: 60rpx;
  401. height: 30rpx;
  402. margin-left: 10rpx;
  403. }
  404. }
  405. .jump-title {
  406. .jump-label {
  407. background-color: #f8f8fa;
  408. color: #999;
  409. }
  410. }
  411. }
  412. .collect-ul {
  413. padding-top: 10rpx;
  414. }
  415. .research-external-item {
  416. width: 100%;
  417. background-color: #fff;
  418. height: 60rpx;
  419. padding: 0 34rpx 10rpx;
  420. font-size: 24rpx;
  421. margin-top: -15rpx;
  422. color: #333;
  423. display: flex;
  424. align-items: center;
  425. .select-item-multiple {
  426. margin-right: 20rpx;
  427. }
  428. .active {
  429. background-color: #376cbb !important;
  430. color: #fff !important;
  431. }
  432. }
  433. .end-select-item {
  434. flex-wrap: wrap !important;
  435. justify-content: flex-start !important;
  436. }
  437. @import "../components/selectCss.scss";
  438. @import "@/components/activity/indexActivity.scss";
  439. .title-date {
  440. position: relative;
  441. .audio-back {
  442. position: absolute;
  443. right: 0;
  444. top: 50%;
  445. transform: translateY(-50%);
  446. width: 125rpx;
  447. height: 90rpx;
  448. font-size: 24rpx;
  449. display: flex;
  450. align-items: center;
  451. justify-content: flex-end;
  452. color: #fff;
  453. .audio-box {
  454. width: 99rpx;
  455. height: 39rpx;
  456. display: flex;
  457. align-items: center;
  458. border-radius: 20rpx;
  459. padding-left: 4rpx;
  460. background-color: #376cbb;
  461. }
  462. }
  463. .audio-img {
  464. width: 30rpx;
  465. height: 30rpx;
  466. margin: 0 5rpx;
  467. }
  468. }
  469. }
  470. </style>