zhishifufei_uniapp/pages/activity/index.vue

<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>