index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. <template>
  2. <div class="detail">
  3. <div class="detail-body">
  4. <div class="img-text">
  5. <img :src="activityDetail.annexArray[0]" alt="" />
  6. </div>
  7. <div class="collect-part">
  8. <div
  9. class="normal-tip by y-bg"
  10. v-if="activityDetail.registrationStatus === '1'"
  11. >
  12. 报名中
  13. </div>
  14. <div class="normal-tip by h-bg" v-else>报名已结束</div>
  15. <div class="right">
  16. <span class="num">{{ activityDetail.partakeNumber }}人参与</span>
  17. <div class="icon-collect" @click="changeCollectorsStatus()">
  18. <i
  19. :class="[
  20. 'iconfont icon-wujiaoxingxingxingshoucangdianji',
  21. active && 'blue',
  22. ]"
  23. ></i>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="tel-part">
  28. <div class="tel-name" style="line-height: 74rpx; width: 300rpx">
  29. 联系电话
  30. </div>
  31. <TelNum :num="activityDetail.contactPhone" style="width: 60%" />
  32. </div>
  33. <div class="info-part">
  34. <div class="info-item">
  35. <div class="custom-item-tit">
  36. <span class="tit">活动举办</span>
  37. </div>
  38. <div class="text">{{ activityDetail.activityHold }}</div>
  39. </div>
  40. <div class="info-item">
  41. <div class="custom-item-tit"><span class="tit">活动内容</span></div>
  42. <div class="text vhtml" v-html="activityDetail.activityContent"></div>
  43. </div>
  44. <div class="info-item">
  45. <div class="custom-item-tit"><span class="tit">活动时间</span></div>
  46. <div class="text">
  47. {{ activityDetail.activityStartTime }} —
  48. {{ activityDetail.activityEndTime }}
  49. </div>
  50. </div>
  51. <div class="info-item">
  52. <div class="custom-item-tit"><span class="tit">活动地址</span></div>
  53. <div class="text">
  54. <span class="add">{{ activityDetail.activityAddress }}</span>
  55. <!-- <span class="dh" @click="goAddress(activityDetail.activityAddress)"
  56. >导航</span
  57. > -->
  58. </div>
  59. </div>
  60. <!--
  61. <div class="info-item">
  62. <div class="custom-item-tit"><span class="tit">报名条件</span></div>
  63. <div class="text">
  64. {{
  65. !activityDetail.registrationConditions
  66. ? "无条件"
  67. : activityDetail.registrationConditions
  68. }}
  69. </div>
  70. </div> -->
  71. <div class="info-item">
  72. <div class="custom-item-tit"><span class="tit">报名时间</span></div>
  73. <div class="text">
  74. {{ activityDetail.registrationStartTime }} —
  75. {{ activityDetail.registrationEndTime }}
  76. </div>
  77. </div>
  78. <div class="info-item">
  79. <div class="custom-item-tit"><span class="tit">活动参与</span></div>
  80. <div class="text">还有 {{ number }} 个名额</div>
  81. </div>
  82. <div class="info-item">
  83. <div class="custom-item-tit"><span class="tit">附件</span></div>
  84. <div class="text" style="16rpx 0px">
  85. <div
  86. v-for="item in activityDetail.activityFile"
  87. :key="item.uid"
  88. @click="openFile(item.url)"
  89. >
  90. {{ item.name }}
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. <div
  97. class="but-bottom"
  98. @click="getApply()"
  99. :signInfo="signInfo"
  100. v-if="signInfo.signInStatus == 1"
  101. >
  102. 到场签到
  103. </div>
  104. <div
  105. class="but-bottom"
  106. @click="getScanCode()"
  107. :signInfo="signInfo"
  108. v-if="!btnStatus"
  109. >
  110. 重新扫码
  111. </div>
  112. <!-- 申请弹框 -->
  113. <apply-popup ref="apply" />
  114. </div>
  115. </template>
  116. <script>
  117. import TelNum from "../subPackages/components/tel-number";
  118. import ApplyPopup from "./apply-popup.vue";
  119. import {
  120. getActivityById,
  121. clickCollect,
  122. getUserLocalStorageInfo,
  123. } from "@/js_sdk/http";
  124. export default {
  125. components: {
  126. TelNum,
  127. ApplyPopup,
  128. },
  129. data() {
  130. return {
  131. btnStatus: false,
  132. signInfo: {},
  133. signInCode: "",
  134. active: false,
  135. id: "",
  136. activityDetail: {
  137. referenceId: "",
  138. },
  139. number: 0,
  140. };
  141. },
  142. // onLoad() {
  143. // this.getScanCode();
  144. // },
  145. onTabItemTap() {
  146. this.getScanCode();
  147. },
  148. methods: {
  149. getScanCode() {
  150. let that = this;
  151. uni.scanCode({
  152. success: (e) => {
  153. that.signInCode = e.result;
  154. that.getActivityById();
  155. },
  156. fail: (fail) => {
  157. this.btnStatus = false;
  158. // uni.navigateTo({
  159. // url: "/pages/mine/mine",
  160. // });
  161. },
  162. });
  163. },
  164. openFile(url) {
  165. uni.downloadFile({
  166. url: url, // 网络文档地址
  167. success: (data) => {
  168. if (data.statusCode === 200) {
  169. uni.saveFile({
  170. tempFilePath: data.tempFilePath, //临时路径
  171. success: function (res) {
  172. // 保存路径
  173. setTimeout(() => {
  174. //打开文档查看
  175. uni.openDocument({
  176. filePath: res.savedFilePath,
  177. success: function (res) {},
  178. });
  179. }, 3000);
  180. },
  181. });
  182. }
  183. },
  184. fail: (err) => {
  185. uni.showToast({
  186. title: "失败请重新下载",
  187. });
  188. },
  189. });
  190. },
  191. getActivityById(a, b, c) {
  192. const _this = this;
  193. getActivityById(
  194. "1126547436026724352",
  195. _this.signInCode,
  196. getUserLocalStorageInfo().user.id
  197. ).then((res) => {
  198. if (res.data.info) {
  199. _this.annexArray = res.data.info.annexArray;
  200. _this.activityDetail = res.data.info;
  201. _this.activityDetail.activityContent =
  202. res.data.info.activityContent.replace(
  203. "<img",
  204. `<img style="max-width:100%;"`
  205. );
  206. _this.activityDetail.registrationStartTime =
  207. this.$common.transBaseDateTime(
  208. _this.activityDetail.registrationStartTime
  209. );
  210. _this.activityDetail.registrationEndTime =
  211. this.$common.transBaseToDateTime(
  212. _this.activityDetail.registrationEndTime
  213. );
  214. _this.activityDetail.activityStartTime =
  215. this.$common.transBaseDateTime(
  216. _this.activityDetail.activityStartTime
  217. );
  218. _this.activityDetail.activityEndTime =
  219. this.$common.transBaseToDateTime(
  220. _this.activityDetail.activityEndTime
  221. );
  222. if (_this.activityDetail.collectorsStatus === "2") {
  223. _this.active = true;
  224. } else {
  225. _this.active = false;
  226. }
  227. _this.number =
  228. _this.activityDetail.limitPersonNumber -
  229. _this.activityDetail.partakeNumber;
  230. _this.activityDetail.activityFile = JSON.parse(
  231. res.data.info.activityFile
  232. );
  233. }
  234. if (res.data.signInfo) {
  235. this.signInfo = res.data.signInfo;
  236. if (res.data.signInfo == 2) {
  237. this.$showToast("该企业已签到");
  238. }
  239. this.signInfo.signInCode = _this.signInCode;
  240. }
  241. });
  242. },
  243. getApply() {
  244. this.$refs.apply.init(this.signInfo);
  245. },
  246. goAddress(address) {
  247. if (address === null || undefined === address || address === "") {
  248. this.$showToast("地址不能为空");
  249. return false;
  250. } else {
  251. this.navigation(address);
  252. }
  253. },
  254. changeCollectorsStatus() {
  255. if (this.active) {
  256. const _this = this;
  257. clickCollect({
  258. id: this.id,
  259. userId: getUserLocalStorageInfo().user.id,
  260. collectorsStatus: "1",
  261. }).then((res) => {
  262. _this.getActivityById();
  263. });
  264. } else {
  265. const _this = this;
  266. clickCollect({
  267. id: this.id,
  268. userId: getUserLocalStorageInfo().user.id,
  269. collectorsStatus: "2",
  270. }).then((res) => {
  271. _this.getActivityById();
  272. });
  273. }
  274. },
  275. },
  276. };
  277. </script>
  278. <style lang="scss" type="text/scss" >
  279. // 底部按钮
  280. .but-bottom {
  281. position: fixed;
  282. bottom: 0;
  283. left: 0;
  284. width: 100%;
  285. line-height: 120rpx;
  286. background: $main;
  287. color: #fff;
  288. font-size: 36rpx;
  289. text-align: center;
  290. }
  291. .text {
  292. font-size: 24rpx;
  293. color: $text5;
  294. margin-top: 32rpx;
  295. }
  296. .detail {
  297. box-sizing: border-box;
  298. background-color: #f2f2f2;
  299. padding: 0 0 140rpx;
  300. overflow-y: auto;
  301. .detail-body {
  302. .img-text {
  303. img {
  304. height: 420rpx;
  305. width: 100%;
  306. }
  307. }
  308. .collect-part {
  309. background-color: #fff;
  310. height: 120rpx;
  311. padding: 0 30rpx;
  312. margin-bottom: 10rpx;
  313. @include flex;
  314. .normal-tip {
  315. }
  316. .right {
  317. @include flex;
  318. .num {
  319. margin-right: 20rpx;
  320. font-size: 24rpx;
  321. color: #333333;
  322. }
  323. }
  324. }
  325. .tel-part {
  326. display: flex;
  327. width: 100%;
  328. background-color: #fff;
  329. margin-bottom: 10rpx;
  330. padding: 0 30rpx;
  331. .tel-name {
  332. color: #333;
  333. font-size: 32rpx;
  334. font-weight: 700;
  335. }
  336. .custom-tel-component {
  337. width: 400rpx;
  338. .left {
  339. font-size: 26rpx;
  340. }
  341. }
  342. }
  343. }
  344. .info-part {
  345. background-color: #fff;
  346. overflow-y: auto;
  347. height: calc(100vh - 700rpx);
  348. box-sizing: border-box;
  349. padding: 40rpx 30rpx;
  350. .tit {
  351. padding-left: 2.667vw;
  352. position: relative;
  353. font-size: 4.267vw;
  354. &::after {
  355. content: "";
  356. width: 0.8vw;
  357. height: 90%;
  358. background-color: #976dec;
  359. border-radius: 0.4vw;
  360. position: absolute;
  361. left: 0;
  362. top: 50%;
  363. -webkit-transform: translateY(-50%);
  364. transform: translateY(-50%);
  365. }
  366. }
  367. .info-item {
  368. padding: 10rpx 0rpx;
  369. margin-bottom: 20rpx;
  370. .custom-item-tit {
  371. font-size: 32rpx;
  372. font-weight: 700;
  373. }
  374. .text {
  375. font-size: 24rpx;
  376. color: $text5;
  377. margin-top: 32rpx;
  378. .add {
  379. margin-right: 40rpx;
  380. }
  381. .dh {
  382. width: 100rpx;
  383. text-align: center;
  384. display: inline-block;
  385. color: $main;
  386. border-left: 1rpx solid #666666;
  387. }
  388. }
  389. &:last-child {
  390. margin-bottom: 0rpx;
  391. }
  392. }
  393. }
  394. }
  395. </style>
  396. <style lang="scss">
  397. </style>