fangliaoxiaochengxv/subPages/activityDetail/activitySave.vue

<template>
  <view style="height: 100%; background: #F8F9FA;">
    <view class="huodong-ccontent" >
      <view style=" height:144rpx;width:224rpx">
        <van-image
            height="144rpx"
            :src="activityInfo.pic"
            width="224rpx"
        />
      </view>
      <view class="activity-content">
        <view class="activity-title">{{activityInfo.name}}</view>
        <view class="activity-date">
          <span >{{activityInfo.start_time}}</span>

        </view>
        <view class="activity-price">
          <span ><span style="font-size: 32rpx;color: #C29556">￥{{activityInfo.fee}}</span></span>
        </view>

      </view>

    </view>
    <view  class="activity-content-title">
      活动介绍
    </view>
    <van-cell-group>
      <van-field
          v-model="formData.username"
          label="姓名"
          placeholder="请填写联系人姓名"
          input-align="right"
          @input="val => formData.username = val.detail"
      />
      <van-field
          v-model="formData.mobile"
          label="联系电话"
          type="number"
          placeholder="请填写电话号码"
          input-align="right"
          @input="val => formData.mobile = val.detail"
      />
      <van-cell title="报名人数" >
        <template #default>
          <van-stepper  v-model="formData.num" @change="onChangeStepper"/>
        </template>
      </van-cell>
    </van-cell-group>
    <van-toast id="van-toast"/>
    <view class="bottom-navigation">
      <view class="bottom-navigation-div">
        应付款： <span>￥<span style="font-size: 40rpx;">{{ activityInfo.fee * formData.num}}</span></span>
      </view>
      <button  class="activity-button" @click="handleRegister">立即报名</button>
    </view>
  </view>
</template>

<script>
import tabbarCom from "@/components/tabbar/tabbar.vue";
import Toast from "../../wxcomponents/vant/dist/toast/toast";
import {getActivityDetail} from "../../common/api/activity";


export default {
  components: {
    tabbarCom,
  },
  data() {
    return {
      data: [],
      activityId: 0,
      activityInfo:{},
      formData:{
        mobile:"",
        username:'',
        num:1,
      }


    };
  },

  onLoad: function (option) {
    this.activityId = option.activityId
    this.getActivityDetail()
  },
  onShow() {
    this.$nextTick(() => {
    });
  },
  onReachBottom() {
  },
  onShareAppMessage(res) {
    let params = {};
    params = {
      activityId: this.activityId
    };
    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/subPages/activityDetail/activityDetail${this.$stringPageOptions(params)}`
    };
  },
  onShareTimeline(res) {
    let params = {};
    params = {
      activityId: this.activityId
    };
    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/subPages/activityDetail/activityDetail${this.$stringPageOptions(params)}`
    };
  },
  computed: {},
  watch: {},
  methods: {
    getActivityDetail() {
      getActivityDetail({id: this.activityId}).then(({data}) => {
        this.activityInfo = data
        console.log(this.activityId)
        console.log(data)
      });
    },
    handleRegister() {
      if (!this.formData.username){
        Toast('请输入姓名');
      }
      if (!this.formData.mobile){
        Toast('请输入手机号');
      }

    },
    onChangeStepper(event){
      this.formData.num=event.detail
    }

  },
};
</script>

<style lang="scss" scoped>
.common-page {
  height: 100%;
  padding: 30rpx;
}
.bottom-navigation{
  position: fixed;
  // 文字垂直居中
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  height: 100rpx;
  width: calc(100% - 40rpx);
  background: #FFFFFF;
  box-shadow: 0rpx -2rpx 0rpx 0rpx #F1F3F6;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  border: 0rpx solid #979797;
  padding: 20rpx 20rpx 68rpx 20rpx ;
  &-div{
    height: 76rpx;
    width: 404rpx;
    // 文字垂直居中
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    span{
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #C29556;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

  }


  .activity-button {
    width: 264rpx;
    height: 80rpx;
    background: linear-gradient(315deg, #CA9359 0%, #E2B98E 100%);
    border-radius: 292rpx 292rpx 292rpx 292rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    // 文字垂直居中
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.activity-content-title {
  margin: 30rpx auto;
  width: 680rpx;
  // 垂直居中
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;

}
.huodong-ccontent {
  position: relative; /* 相对定位 */
  width: 650rpx;
  padding: 0rpx;
  margin: 30rpx auto;
  margin-bottom: 0;
  padding: 30rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  display: flex;
  align-items: center;
  .activity-content {
    margin: 30rpx 0rpx 0rpx 30rpx;

    .activity-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .activity-date {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 10rpx;
      display: flex;
      align-items: center;
    }
    .activity-price {
      height: 44rpx;
      font-weight: 400;
      font-size: 22rpx;
      color: #666666;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;
    }






  }

}

</style>