You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
9.8 KiB
322 lines
9.8 KiB
<template>
|
|
<BaseContainer class="activity">
|
|
<NavBar title="报名" />
|
|
<view class="header">
|
|
<view class="image">
|
|
<image class="img" mode="aspectFill" :src="activity.image" />
|
|
</view>
|
|
<view class="text">
|
|
<view class="name" v-text="activity.title"></view>
|
|
<view class="group">
|
|
<view class="money">¥<span class="num" v-text="activity.price"></span>
|
|
<span class="vip-price" style="color: #0a0a0a">¥{{ activity.member_price }}</span>
|
|
<image class="vip-price-icon" :src="getImgPath('/wap/first/zsff/images/vip.png')" />
|
|
</view>
|
|
<view>{{ activity.count }}人已报名</view>
|
|
</view>
|
|
</view>
|
|
<view class="info">
|
|
<view class="item">
|
|
<view class="iconfont iconshijian2"></view>
|
|
<view class="cont">报名时间：{{ activity.signup_start_time }} — {{
|
|
activity.signup_end_time
|
|
}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="iconfont iconshijian2"></view>
|
|
<view class="cont">活动时间：{{ activity.start_time }} — {{ activity.end_time }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="iconfont icondidian"></view>
|
|
<view class="cont">
|
|
活动地址：{{ activity.province }}{{ activity.city
|
|
}}{{ activity.district }}{{ activity.detail }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="chat" v-if="isPay">
|
|
<view class="text">赶紧加入活动群聊吧~</view>
|
|
<view class="btn" @click="open = true">加入群聊</view>
|
|
</view>
|
|
<!-- 相关讲师 -->
|
|
<related-lecturer v-if="lecturer" :lecturer="lecturer"></related-lecturer>
|
|
<view class="main">
|
|
<view class="nav-bar">
|
|
<view :class="{ on: navOn === 1 }" class="item" @click="navOn = 1">详情</view>
|
|
<view :class="{ on: navOn === 2 }" class="item" @click="navOn = 2">规则</view>
|
|
</view>
|
|
<view class="nav-cont">
|
|
<!-- 详情 -->
|
|
<mp-html v-show="navOn === 1" class="section" container-style="padding: 30rpx;background: #ffffff;"
|
|
:content="content"></mp-html>
|
|
<!-- 规则 -->
|
|
<mp-html v-show="navOn === 2" class="section" container-style="padding: 30rpx;background: #ffffff;"
|
|
:content="activity_rules"></mp-html>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<navigator class="link" url="/pages/index/index" open-type="switchTab">
|
|
<view class="cont">
|
|
<image :src="getImgPath('/wap/first/zsff/images/special01.png')" />
|
|
<view>首页</view>
|
|
</view>
|
|
</navigator>
|
|
<button class="button" type="button" v-if="activity.statu === 0" disabled>
|
|
未开始报名
|
|
</button>
|
|
<template v-else-if="activity.statu === 1">
|
|
<button class="button" type="button" v-if="activity.number > activity.count" @click="activitySign">
|
|
去报名
|
|
</button>
|
|
<button class="button" type="button" v-else disabled>报名结束</button>
|
|
</template>
|
|
<button class="button" type="button" v-else-if="activity.statu === 2 || activity.statu === 3" disabled>
|
|
报名结束
|
|
</button>
|
|
<button class="button" type="button" v-else disabled>活动结束</button>
|
|
</view>
|
|
<view class="groupCode" v-show="open">
|
|
<view class="code">
|
|
<image :src="activity.qrcode_img" />
|
|
</view>
|
|
<view class="codeTip">长按扫一扫<br />加进群哦</view>
|
|
</view>
|
|
<view :class="{ mask: open }" @click="open = false"></view>
|
|
<!-- <BaseLogin :login-show="loginShow" :site-name="siteName" @login-close="loginClose" /> -->
|
|
</BaseContainer>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getActivityDetail,
|
|
getActivityEvent,
|
|
getActivityType,
|
|
getShareConfig
|
|
} from "@/api/activity";
|
|
import { getLecturer } from "@/api/auth";
|
|
import RelatedLecturer from "@/components/RelatedLecturer/index.vue";
|
|
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
|
|
export default {
|
|
data() {
|
|
return {
|
|
navOn: 1,
|
|
isRestrictions: 0,
|
|
open: false,
|
|
activity: {
|
|
image: ''
|
|
},
|
|
siteName: "",
|
|
isPay: 0,
|
|
isMember: 0,
|
|
loginShow: false,
|
|
specialEvent: "",
|
|
lecturer: null,
|
|
activity_rules: "",
|
|
content: "",
|
|
};
|
|
},
|
|
components: {
|
|
RelatedLecturer,
|
|
mpHtml,
|
|
},
|
|
watch: {},
|
|
onLoad({ id }) {
|
|
this.id = id;
|
|
this.getActivityDetail();
|
|
this.share();
|
|
|
|
},
|
|
methods: {
|
|
share() {
|
|
const jweixin = require('jweixin-module');
|
|
var data = {
|
|
url: window.location.href
|
|
};
|
|
getShareConfig(data).then(res => {
|
|
jweixin.config({
|
|
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
appId: res.data.appId, // 必填，公众号的唯一标识
|
|
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
|
|
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
|
|
signature: res.data.signature, // 必填，签名
|
|
jsApiList: res.data.jsApiList
|
|
});
|
|
let _this = this;
|
|
jweixin.updateTimelineShareData({ //分享到朋友圈
|
|
title: _this.activity.title, // 分享标题
|
|
desc: _this.activity.province +
|
|
_this.activity.city +
|
|
_this.activity.district +
|
|
_this.activity.detail, // 分享描述
|
|
// 该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
|
|
link: window.location.href+"&l=1",
|
|
imgUrl: _this.activity.image, // 分享图标,只支持https
|
|
success(res) {
|
|
console.log(res)
|
|
},
|
|
cancel(res) {
|
|
console.log(res)
|
|
}
|
|
});
|
|
jweixin.updateAppMessageShareData({ //分享到朋友圈
|
|
title: _this.activity.title, // 分享标题
|
|
desc: _this.activity.province +
|
|
_this.activity.city +
|
|
_this.activity.district +
|
|
_this.activity.detail, // 分享描述
|
|
// 该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
|
|
link: window.location.href+"&l=1",
|
|
imgUrl: _this.activity.image, // 分享图标,只支持https
|
|
success(res) {
|
|
console.log(res)
|
|
},
|
|
cancel(res) {
|
|
console.log(res)
|
|
}
|
|
});
|
|
})
|
|
},
|
|
// 关闭登录弹窗
|
|
loginClose: function () {
|
|
this.loginShow = false;
|
|
},
|
|
getActivityDetail() {
|
|
getActivityDetail({ id: this.id })
|
|
.then((res) => {
|
|
let data = res.data;
|
|
// data.activity.signup_start_time = data.activity.signup_start_time && data.activity.signup_start_time.split(' ')[0];
|
|
// data.activity.signup_end_time = data.activity.signup_end_time && data.activity.signup_end_time.split(' ')[0];
|
|
// data.activity.start_time = data.activity.start_time && data.activity.start_time.split(' ')[0];
|
|
// data.activity.end_time = data.activity.end_time && data.activity.end_time.split(' ')[0];
|
|
this.activity = data.activity;
|
|
this.siteName = data.Auth_site_name;
|
|
this.isMember = data.is_member;
|
|
this.uid = data.uid;
|
|
this.activity_rules = data.activity_rules;
|
|
this.content = data.content;
|
|
this.activityType();
|
|
this.getLecturer();
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
activityType() {
|
|
var vm = this;
|
|
getActivityType({ id: this.id }).then((res) => {
|
|
var data = res.data;
|
|
vm.isPay = data.is_pay;
|
|
vm.isRestrictions = data.is_restrictions;
|
|
});
|
|
},
|
|
activitySign() {
|
|
var vm = this;
|
|
if (vm.isRestrictions) {
|
|
this.$util.showMsg("您的报名已超过限额");
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/activity/event?id=${this.id}`,
|
|
});
|
|
}
|
|
},
|
|
// 关闭登录弹窗
|
|
loginClose(data) {
|
|
this.loginShow = false;
|
|
if (data) {
|
|
uni.navigateTo({
|
|
url: `/pages/activity/event?id=${this.id}`,
|
|
});
|
|
}
|
|
},
|
|
// 相关讲师
|
|
getLecturer() {
|
|
console.log(this.activity);
|
|
var vm = this;
|
|
getLecturer(this.activity.mer_id).then((res) => {
|
|
vm.lecturer = res.data;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
body {
|
|
padding-bottom: 100rpx;
|
|
padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
|
background-color: #f5f5f5;
|
|
}
|
|
.header {
|
|
background: transparent;
|
|
.image {
|
|
width: 100%;
|
|
height: 270rpx;
|
|
}
|
|
.text, .info {
|
|
width: 690rpx;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
}
|
|
.text {
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
margin-top: 30rpx;
|
|
}
|
|
.info {
|
|
border-radius: 0 0 10rpx 10rpx;
|
|
border-top: none;
|
|
position: relative;
|
|
color: #999;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
height: 2rpx;
|
|
width: 635rpx;
|
|
background: #F6F6F6;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
.main {
|
|
width: 690rpx;
|
|
margin: 20rpx auto 0;
|
|
}
|
|
.link .cont {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-weight: 400;
|
|
font-size: 18rpx;
|
|
line-height: 36rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.link .cont image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: auto;
|
|
display: block;
|
|
}
|
|
|
|
.picker .picker-panel .picker-choose .cancel,
|
|
.picker .picker-panel .picker-choose .confirm {
|
|
top: 0 !important;
|
|
}
|
|
|
|
.picker .picker-panel .picker-choose .confirm {
|
|
color: #2c8eff !important;
|
|
}
|
|
|
|
.picker .picker-panel .wheel-wrapper .wheel {
|
|
font-size: 30rpx !important;
|
|
}
|
|
|
|
.picker .picker-panel .picker-choose {
|
|
font-size: 30rpx !important;
|
|
}
|
|
|
|
.activity .footer .button {
|
|
line-height: 76rpx;
|
|
}
|
|
</style> |