123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411 |
- <template>
- <div class="detail">
- <div class="detail-body">
- <div class="img-text">
- <img :src="activityDetail.annexArray[0]" alt="" />
- </div>
- <div class="collect-part">
- <div
- class="normal-tip by y-bg"
- v-if="activityDetail.registrationStatus === '1'"
- >
- 报名中
- </div>
- <div class="normal-tip by h-bg" v-else>报名已结束</div>
- <div class="right">
- <span class="num">{{ activityDetail.partakeNumber }}人参与</span>
- <div class="icon-collect" @click="changeCollectorsStatus()">
- <i
- :class="[
- 'iconfont icon-wujiaoxingxingxingshoucangdianji',
- active && 'blue',
- ]"
- ></i>
- </div>
- </div>
- </div>
- <div class="tel-part">
- <div class="tel-name" style="line-height: 74rpx; width: 300rpx">
- 联系电话
- </div>
- <TelNum :num="activityDetail.contactPhone" style="width: 60%" />
- </div>
- <div class="info-part">
- <div class="info-item">
- <div class="custom-item-tit">
- <span class="tit">活动举办</span>
- </div>
- <div class="text">{{ activityDetail.activityHold }}</div>
- </div>
- <div class="info-item">
- <div class="custom-item-tit"><span class="tit">活动内容</span></div>
- <div class="text vhtml" v-html="activityDetail.activityContent"></div>
- </div>
- <div class="info-item">
- <div class="custom-item-tit"><span class="tit">活动时间</span></div>
- <div class="text">
- {{ activityDetail.activityStartTime }} —
- {{ activityDetail.activityEndTime }}
- </div>
- </div>
- <div class="info-item">
- <div class="custom-item-tit"><span class="tit">活动地址</span></div>
- <div class="text">
- <span class="add">{{ activityDetail.activityAddress }}</span>
- <!-- <span class="dh" @click="goAddress(activityDetail.activityAddress)"
- >导航</span
- > -->
- </div>
- </div>
- <!--
- <div class="info-item">
- <div class="custom-item-tit"><span class="tit">报名条件</span></div>
- <div class="text">
- {{
- !activityDetail.registrationConditions
- ? "无条件"
- : activityDetail.registrationConditions
- }}
- </div>
- </div> -->
- <div class="info-item">
- <div class="custom-item-tit"><span class="tit">报名时间</span></div>
- <div class="text">
- {{ activityDetail.registrationStartTime }} —
- {{ activityDetail.registrationEndTime }}
- </div>
- </div>
- <div class="info-item">
- <div class="custom-item-tit"><span class="tit">活动参与</span></div>
- <div class="text">还有 {{ number }} 个名额</div>
- </div>
- <div class="info-item">
- <div class="custom-item-tit"><span class="tit">附件</span></div>
- <div class="text" style="16rpx 0px">
- <div
- v-for="item in activityDetail.activityFile"
- :key="item.uid"
- @click="openFile(item.url)"
- >
- {{ item.name }}
- </div>
- </div>
- </div>
- </div>
- </div>
- <div
- class="but-bottom"
- @click="getApply()"
- :signInfo="signInfo"
- v-if="signInfo.signInStatus == 1"
- >
- 到场签到
- </div>
- <div
- class="but-bottom"
- @click="getScanCode()"
- :signInfo="signInfo"
- v-if="!btnStatus"
- >
- 重新扫码
- </div>
- <!-- 申请弹框 -->
- <apply-popup ref="apply" />
- </div>
- </template>
-
- <script>
- import TelNum from "../subPackages/components/tel-number";
- import ApplyPopup from "./apply-popup.vue";
- import {
- getActivityById,
- clickCollect,
- getUserLocalStorageInfo,
- } from "@/js_sdk/http";
- export default {
- components: {
- TelNum,
- ApplyPopup,
- },
- data() {
- return {
- btnStatus: false,
- signInfo: {},
- signInCode: "",
- active: false,
- id: "",
- activityDetail: {
- referenceId: "",
- },
- number: 0,
- };
- },
- // onLoad() {
- // this.getScanCode();
- // },
- onTabItemTap() {
- this.getScanCode();
- },
- methods: {
- getScanCode() {
- let that = this;
- uni.scanCode({
- success: (e) => {
- that.signInCode = e.result;
- that.getActivityById();
- },
- fail: (fail) => {
- this.btnStatus = false;
- // uni.navigateTo({
- // url: "/pages/mine/mine",
- // });
- },
- });
- },
- openFile(url) {
- uni.downloadFile({
- url: url, // 网络文档地址
- success: (data) => {
- if (data.statusCode === 200) {
- uni.saveFile({
- tempFilePath: data.tempFilePath, //临时路径
- success: function (res) {
- // 保存路径
- setTimeout(() => {
- //打开文档查看
- uni.openDocument({
- filePath: res.savedFilePath,
- success: function (res) {},
- });
- }, 3000);
- },
- });
- }
- },
- fail: (err) => {
- uni.showToast({
- title: "失败请重新下载",
- });
- },
- });
- },
- getActivityById(a, b, c) {
- const _this = this;
- getActivityById(
- "1126547436026724352",
- _this.signInCode,
- getUserLocalStorageInfo().user.id
- ).then((res) => {
- if (res.data.info) {
- _this.annexArray = res.data.info.annexArray;
- _this.activityDetail = res.data.info;
- _this.activityDetail.activityContent =
- res.data.info.activityContent.replace(
- "<img",
- `<img style="max-width:100%;"`
- );
- _this.activityDetail.registrationStartTime =
- this.$common.transBaseDateTime(
- _this.activityDetail.registrationStartTime
- );
- _this.activityDetail.registrationEndTime =
- this.$common.transBaseToDateTime(
- _this.activityDetail.registrationEndTime
- );
- _this.activityDetail.activityStartTime =
- this.$common.transBaseDateTime(
- _this.activityDetail.activityStartTime
- );
- _this.activityDetail.activityEndTime =
- this.$common.transBaseToDateTime(
- _this.activityDetail.activityEndTime
- );
- if (_this.activityDetail.collectorsStatus === "2") {
- _this.active = true;
- } else {
- _this.active = false;
- }
- _this.number =
- _this.activityDetail.limitPersonNumber -
- _this.activityDetail.partakeNumber;
- _this.activityDetail.activityFile = JSON.parse(
- res.data.info.activityFile
- );
- }
- if (res.data.signInfo) {
- this.signInfo = res.data.signInfo;
- if (res.data.signInfo == 2) {
- this.$showToast("该企业已签到");
- }
- this.signInfo.signInCode = _this.signInCode;
- }
- });
- },
- getApply() {
- this.$refs.apply.init(this.signInfo);
- },
- goAddress(address) {
- if (address === null || undefined === address || address === "") {
- this.$showToast("地址不能为空");
- return false;
- } else {
- this.navigation(address);
- }
- },
- changeCollectorsStatus() {
- if (this.active) {
- const _this = this;
- clickCollect({
- id: this.id,
- userId: getUserLocalStorageInfo().user.id,
- collectorsStatus: "1",
- }).then((res) => {
- _this.getActivityById();
- });
- } else {
- const _this = this;
- clickCollect({
- id: this.id,
- userId: getUserLocalStorageInfo().user.id,
- collectorsStatus: "2",
- }).then((res) => {
- _this.getActivityById();
- });
- }
- },
- },
- };
- </script>
-
- <style lang="scss" type="text/scss" >
- // 底部按钮
- .but-bottom {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- line-height: 120rpx;
- background: $main;
- color: #fff;
- font-size: 36rpx;
- text-align: center;
- }
- .text {
- font-size: 24rpx;
- color: $text5;
- margin-top: 32rpx;
- }
- .detail {
- box-sizing: border-box;
- background-color: #f2f2f2;
- padding: 0 0 140rpx;
- overflow-y: auto;
- .detail-body {
- .img-text {
- img {
- height: 420rpx;
- width: 100%;
- }
- }
- .collect-part {
- background-color: #fff;
- height: 120rpx;
- padding: 0 30rpx;
- margin-bottom: 10rpx;
- @include flex;
- .normal-tip {
- }
- .right {
- @include flex;
- .num {
- margin-right: 20rpx;
- font-size: 24rpx;
- color: #333333;
- }
- }
- }
- .tel-part {
- display: flex;
- width: 100%;
- background-color: #fff;
- margin-bottom: 10rpx;
- padding: 0 30rpx;
- .tel-name {
- color: #333;
- font-size: 32rpx;
- font-weight: 700;
- }
- .custom-tel-component {
- width: 400rpx;
- .left {
- font-size: 26rpx;
- }
- }
- }
- }
- .info-part {
- background-color: #fff;
- overflow-y: auto;
- height: calc(100vh - 700rpx);
- box-sizing: border-box;
- padding: 40rpx 30rpx;
- .tit {
- padding-left: 2.667vw;
- position: relative;
- font-size: 4.267vw;
- &::after {
- content: "";
- width: 0.8vw;
- height: 90%;
- background-color: #976dec;
- border-radius: 0.4vw;
- position: absolute;
- left: 0;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
- }
- .info-item {
- padding: 10rpx 0rpx;
- margin-bottom: 20rpx;
- .custom-item-tit {
- font-size: 32rpx;
- font-weight: 700;
- }
- .text {
- font-size: 24rpx;
- color: $text5;
- margin-top: 32rpx;
- .add {
- margin-right: 40rpx;
- }
- .dh {
- width: 100rpx;
- text-align: center;
- display: inline-block;
- color: $main;
- border-left: 1rpx solid #666666;
- }
- }
- &:last-child {
- margin-bottom: 0rpx;
- }
- }
- }
- }
- </style>
- <style lang="scss">
- </style>
|