fangliaoxiaochengxv/subPages/activityDetail/activitySave.vue

<template>
  <view style="height: 100%; background: #F8F9FA;">
    <view class="huodong-ccontent" >
      <view style=" height:176rpx;width:176rpx">
        <van-image
            height="176rpx"
            :src="activityInfo.cover"
            width="176rpx"
        />
      </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="请填写联系人姓名"
          :readonly="is_entry&&MyActivityInfo.status==3"
          input-align="right"
          @change="onChangeUsername"
      />
      <van-field
          v-model="formData.mobile"
          :readonly="is_entry&&MyActivityInfo.status==3"
          label="联系电话"
          type="number"
          placeholder="请填写电话号码"
          input-align="right"
          @change="onChangeMobiler"
      />
      <van-cell title="报名人数" >
        <template #default>
          <van-stepper  v-model="formData.num" :disabled="is_entry"  @change="onChangeStepper"/>
        </template>
      </van-cell>
      <van-cell title="报名时间"  v-if="is_entry" :value="activityInfo.entry_info.created_at"/>
    </van-cell-group>
    <van-toast id="van-toast"/>
    <view class="bottom-navigation">
      <view class="bottom-navigation-div" v-if="!is_entry">
        应付款： <span>￥<span style="font-size: 40rpx;">{{ activityInfo.fee * formData.num}}</span></span>
      </view>
      <view class="bottom-navigation-div" v-else-if="is_entry&&MyActivityInfo.status!=3">
        应付款： <span>￥<span style="font-size: 40rpx;">{{ MyActivityInfo.amount_real}}</span></span>
      </view>
      <view class="bottom-navigation-div" v-else-if="is_entry&&MyActivityInfo.status==3">
        已付款： <span>￥<span style="font-size: 40rpx;">{{ MyActivityInfo.amount_real}}</span></span>
      </view>
      <button  class="activity-button" v-if="!is_entry" @click="handleRegister">立即报名</button>
      <button  class="activity-button" v-else-if="is_entry&&MyActivityInfo.status!=3" @click="handleEntryUpdate">修改报名信息</button>
    </view>
  </view>
</template>

<script>

import Toast from "../../wxcomponents/vant/dist/toast/toast";
import {getActivityDetail,addActivityEntry,getMyActivity,entryUpdate} from "../../common/api/activity";


export default {
  components: {
  },
  data() {
    return {
      data: [],
      activityId: 0,
      activityInfo:{},
      MyActivityInfo:{},
      is_entry:false,
      entryId:0,
      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
        this.activityInfo.start_time = (new Date(this.activityInfo.start_time.replace(' ', 'T'))).toISOString().slice(0, 16).replace('T', ' ');
        this.activityInfo.end_time = (new Date(this.activityInfo.end_time.replace(' ', 'T'))).toISOString().slice(0, 16).replace('T', ' ');
        this.activityInfo.entry_end = (new Date(this.activityInfo.entry_end.replace(' ', 'T'))).toISOString().slice(0, 16).replace('T', ' ');
        if (data.entry_info != []&&data.entry_info.id) {
          this.entryId=data.entry_info.id
          this.is_entry=true
          this.getMyActivity()
        }
      });
    },
    getMyActivity() {
      getMyActivity({id:this.entryId}).then(({data}) => {
        this.MyActivityInfo = data
        this.formData.username=data.username
        this.formData.mobile=data.mobile
        this.formData.num=data.num
      });
    },


    handleRegister() {
      if (!this.formData.username){
        Toast('请输入姓名');
      }
      if (!this.formData.mobile){
        Toast('请输入手机号');
      }
      // 正则判断纯数字
      if (!/^[0-9]*$/.test(this.formData.mobile)) {
        Toast('手机号格式不正确');
        return;
      }
      this.formData.id=this.activityId
      addActivityEntry(this.formData).then(({data}) => {
        Toast('报名成功');
        this.getActivityDetail()
      });
    },
    handleEntryUpdate() {
      if (!this.formData.username){
        Toast('请输入姓名');
      }
      if (!this.formData.mobile){
        Toast('请输入手机号');
      }
      // 正则判断纯数字
      if (!/^[0-9]*$/.test(this.formData.mobile)) {
        Toast('手机号格式不正确');
        return;
      }
      this.formData.id=this.entryId
      entryUpdate(this.formData).then(({data}) => {
        Toast('修改成功');
        this.getActivityDetail()
      });
    },
    onChangeStepper(event){
      this.formData.num=event.detail
    },
    onChangeMobiler(event){
      this.formData.mobile=event.detail
    },
    onChangeUsername(event){
      this.formData.username=event.detail
    }

  },
};
</script>

<style lang="scss" scoped>
.common-page {
  height: 100%;
  padding: 30rpx;
}
.bottom-navigation{
  position: fixed;
  // 文字垂直居中
  display: flex;
  align-items: 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;
    padding-top: 10rpx;
    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>