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="MyActivityInfo.created_at"/>
      <van-cell title="报名状态"  v-if="  (MyActivityInfo.status==4||MyActivityInfo.status==0||MyActivityInfo.status==-1)" :value="statusDisplay"/>
    </van-cell-group>
    <van-toast id="van-toast"/>
    <view class="bottom-navigation" v-if=" !(MyActivityInfo.status==4|| MyActivityInfo.status==0|| MyActivityInfo.status==-1)" >
      <view class="bottom-navigation-div" v-if="!is_entry">
        应付款： <span>￥<span style="font-size: 40rpx;">{{ (activityInfo.fee && formData.num ? (activityInfo.fee * formData.num).toFixed(2) : '0.00') }}</span></span>
      </view>
      <view class="bottom-navigation-div" v-else-if="is_entry&&(MyActivityInfo.status==1||MyActivityInfo.status==1)">
        应付款： <span>￥<span style="font-size: 40rpx;">{{parseFloat(MyActivityInfo.amount_real) .toFixed(2)}}</span></span>
      </view>
      <view class="bottom-navigation-div" v-else-if="is_entry&&MyActivityInfo.status==3">
        已付款： <span>￥<span style="font-size: 40rpx;">{{ parseFloat(MyActivityInfo.amount_real).toFixed(2)}}</span></span>
      </view>
      <button  class="activity-button" v-if="!is_entry" @click="handleRegister">立即报名</button>
      <button  class="activity-button" v-if="is_entry&&3!==MyActivityInfo.status" style="margin-right: 12rpx;min-width: 260rpx!important;" @click="handleEntryUpdate">修改报名信息</button>
      <button  class="activity-button" v-if="is_entry&&[1, 2].includes(MyActivityInfo.status)" @click="toPay">立即付款</button>
    </view>
  </view>
</template>

<script>

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


export default {
  components: {
  },
  data() {
    return {
      data: [],
      activityId: 0,
      activityInfo:{},
      MyActivityInfo:{},
      orderFlag:false,
      is_entry:false,
      entryId:0,
      formData:{
        mobile:"",
        username:'',
        num:1,
      }


    };
  },

  onLoad: function (option) {
    this.activityId = option.activityId
    this.entryId = option.orderId
    if (option.orderFlag){
      this.orderFlag = true
    }

  },
  onShow() {

    this.getActivityDetail()

  },
  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: {
    statusDisplay() {
      switch (this.MyActivityInfo.status) {
        case -1:
          return '已退款'
        case 0:
          return '已取消'
        case 1:
          return '待支付'
        case 2:
          return '支付中'
        case 3:
          return '已支付'
        case 4:
          return '已成功'
        default:
          return ''
      }
    },
  },
  watch: {},
  methods: {
    toPay() {
      // 立即付款
      toWechatPayActivitySave(this.MyActivityInfo.order_no)
    },
    getActivityDetail() {

      if (this.orderFlag){
        this.getMyActivity()
      }else{
        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', ' ');
          var entryInfo = data.entry_info;
          if (entryInfo){
            entryInfo.sort(function(a, b) {
              return b.id - a.id;
            });
            entryInfo=entryInfo[0]
            if (entryInfo != []&&entryInfo.id &&(entryInfo.status!=-1&&entryInfo.status!=0)) {
              this.entryId=entryInfo.id
              this.is_entry=true
              this.getMyActivity()
              this.MyActivityInfo = entryInfo
              this.formData.username=entryInfo.username
              this.formData.mobile=entryInfo.mobile
              this.formData.num=entryInfo.num
            }
          }
        });
      }



    },
    getMyActivity() {
      getMyActivity({id:this.entryId}).then(({data}) => {
        this.MyActivityInfo = data
        this.is_entry=true
        this.formData.username=data.username
        this.formData.mobile=data.mobile
        this.formData.num=data.num
        if (data.activity){
          this.activityInfo = data.activity
          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', ' ');
        }
      });
    },


    addActivityEntry() {
      addActivityEntry(this.formData).then(({data}) => {
        if (data.status !== 3) {
          Toast('报名成功，请尽快支付！');
          toWechatPayActivitySave(data.order_no, data.order_remark)
        }else{
          Toast('报名成功！');
        }
        this.getActivityDetail()
      });
    }, handleRegister() {
      if (!this.formData.username){
        Toast('请输入姓名');
      }
      if (!this.formData.mobile){
        Toast('请输入手机号');
      }
      // 正则判断纯数字
      if (!/^[0-9]*$/.test(this.formData.mobile)) {
        Toast('手机号格式不正确');
        return;
      }
      // 正则判断纯数字
      if (this.formData.mobile.length!==11) {
        Toast('请输入11位的手机号');
        return;
      }

      this.formData.id=this.activityId

      this.addActivityEntry();
    },
    handleEntryUpdate() {
      if (!this.formData.username){
        Toast('请输入姓名');
      }
      if (!this.formData.mobile){
        Toast('请输入手机号');
      }
      // 正则判断纯数字
      if (!/^[0-9]*$/.test(this.formData.mobile)) {
        Toast('手机号格式不正确');
        return;
      }
      // 正则判断纯数字
      if (this.formData.mobile.length!==11) {
        Toast('请输入11位的手机号');
        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>