themeActivity.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  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. console.log(option);
  311. this.label = option.title;
  312. this.type = option.type;
  313. this.chartPermissionIds = option.permissionIds || "";
  314. this.activityId = option.id;
  315. this.whichDay = option.whichDay || "";
  316. this.isShowJurisdiction = option.showJurisdiction == "show" ? true : false;
  317. this.isGetJurisdiction = this.isShowJurisdiction ? 1 : 2;
  318. this.whichDay && this.selectInitHandler(this.whichDay, this.activityTimeList);
  319. if (option.endList) {
  320. this.isEndActivity = true;
  321. let obj = JSON.parse(option.endList);
  322. this.whichDay = obj.data_activeId;
  323. this.selectActiveId = obj.select_activeId;
  324. this.selectInitHandler(this.whichDay, this.activityMonthWeekList);
  325. this.selectInitHandler(this.selectActiveId, this.activityTypeList);
  326. }
  327. // this.isUserBindingPhoneNumber &&
  328. this.getActivityList();
  329. },
  330. // 操作之前 是否登录判断
  331. async playBack(item) {
  332. await this.$store.dispatch("showLoginModal");
  333. this.PlayBackAll(item);
  334. },
  335. },
  336. onLoad(option) {
  337. this.loadInit(option);
  338. },
  339. onShow() {
  340. this.$store.commit("setRouterReport", "活动列表");
  341. this.$store.commit("setRouterActivity", "活动列表");
  342. this.$store.commit("audioBg/parseIntAudio", true);
  343. },
  344. onHide() {
  345. this.$store.commit("audioBg/parseIntAudio", false);
  346. },
  347. /* 触底 */
  348. onReachBottom: Throttle(function () {
  349. if (this.status === "nomore") return;
  350. this.status = "loading";
  351. this.page_no++;
  352. this.getActivityList();
  353. }),
  354. /* 下拉刷新 */
  355. onPullDownRefresh: Throttle(function () {
  356. this.page_no = 1;
  357. this.refresh = true;
  358. this.getActivityList();
  359. }),
  360. /** 用户点击分享 */
  361. onShareAppMessage: function (res) {
  362. return {
  363. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : this.type || this.label,
  364. path: "/activityPages/themeActivity/themeActivity?title=" + this.label + "&permissionIds=" + this.chartPermissionIds + "&whichDay=" + this.whichDay + "&type=" + this.type,
  365. };
  366. },
  367. };
  368. </script>
  369. <style lang="scss" scoped>
  370. .theme-container {
  371. background-color: $uni-bg-color;
  372. padding-bottom: 30rpx;
  373. position: relative;
  374. .top-title {
  375. position: sticky;
  376. top: 0;
  377. z-index: 99;
  378. background-color: #fff;
  379. display: flex;
  380. align-items: center;
  381. color: #376cbb;
  382. font-size: 30rpx;
  383. padding: 30rpx 30rpx 20rpx;
  384. border-bottom: 2rpx solid #dcdfe6;
  385. .content-title {
  386. display: flex;
  387. align-items: center;
  388. .jump-text {
  389. margin-left: 10rpx;
  390. font-size: 24rpx;
  391. color: #376cbb;
  392. }
  393. .jump-label {
  394. font-size: 28rpx;
  395. padding: 6rpx 18rpx;
  396. background-color: #376cbb;
  397. border-radius: 52rpx;
  398. color: #fff;
  399. }
  400. .new_icon {
  401. width: 60rpx;
  402. height: 30rpx;
  403. margin-left: 10rpx;
  404. }
  405. }
  406. .jump-title {
  407. .jump-label {
  408. background-color: #f8f8fa;
  409. color: #999;
  410. }
  411. }
  412. }
  413. .collect-ul {
  414. padding-top: 10rpx;
  415. }
  416. .research-external-item {
  417. width: 100%;
  418. background-color: #fff;
  419. height: 60rpx;
  420. padding: 0 34rpx 10rpx;
  421. font-size: 24rpx;
  422. margin-top: -15rpx;
  423. color: #333;
  424. display: flex;
  425. align-items: center;
  426. .select-item-multiple {
  427. margin-right: 20rpx;
  428. }
  429. .active {
  430. background-color: #376cbb !important;
  431. color: #fff !important;
  432. }
  433. }
  434. .end-select-item {
  435. flex-wrap: wrap !important;
  436. justify-content: flex-start !important;
  437. }
  438. @import "../components/selectCss.scss";
  439. @import "@/components/activity/indexActivity.scss";
  440. .title-date {
  441. position: relative;
  442. .audio-back {
  443. position: absolute;
  444. right: 0;
  445. top: 50%;
  446. transform: translateY(-50%);
  447. width: 125rpx;
  448. height: 90rpx;
  449. font-size: 24rpx;
  450. display: flex;
  451. align-items: center;
  452. justify-content: flex-end;
  453. color: #fff;
  454. .audio-box {
  455. width: 99rpx;
  456. height: 39rpx;
  457. display: flex;
  458. align-items: center;
  459. border-radius: 20rpx;
  460. padding-left: 4rpx;
  461. background-color: #376cbb;
  462. }
  463. }
  464. .audio-img {
  465. width: 30rpx;
  466. height: 30rpx;
  467. margin: 0 5rpx;
  468. }
  469. }
  470. }
  471. </style>