hongze_yb_xcx/pages-report/signUpPage/signUpPage.vue

<template>
  <view class="sign-up-page" v-if="!isSignStatus">
    <block>
      <view class="content-sign">
        <view class="sign-title">{{ dataInfo.Title }}</view>
        <view class="sign-info-txt">报名信息</view>
        <view class="sign-info">
          <view class="lable">姓名</view>
          <van-field
            class="input-custom-class"
            clearable
            :value="form.name"
            placeholder="请输入姓名"
            @change="inputChange('name', $event)"
          />
          <view class="lable">公司名称</view>
          <van-field
            class="input-custom-class"
            clearable
            :value="form.companyName"
            placeholder="请输入公司名"
            @change="inputChange('companyName', $event)"
          />
          <view class="lable">手机号</view>
          <van-field
            class="input-custom-class"
            clearable
            type="number"
            :value="form.mobile"
            placeholder="请输入手机号"
            @change="inputChange('mobile', $event)"
          />
        </view>
      </view>
      <view class="content-share-user">
        <view class="user-info-txt">分享人信息</view>
        <view class="user-item">姓名：{{ dataInfo.RealName }} </view>
        <view class="user-item">联系方式：{{ dataInfo.Mobile }}</view>
      </view>
      <image
        class="sign-up-logo"
        src="https://hzstatic.hzinsights.com/yb_xcx/sign-up-logo.png"
      ></image>
      <view class="sign-button">
        <view class="button" @click="submit">提交报名</view>
      </view>
    </block>
  </view>
  <view class="status-sign-box" v-else>
    <image
      class="sign-success"
      src="https://hzstatic.hzinsights.com/yb_xcx/sign-success.png"
    ></image>
    <view class="success-txt">报名成功</view>
    <view>对口销售会尽快联系您！</view>
  </view>
</template>

<script>
import { bannerSignup } from "@/api/report";

export default {
  data() {
    return {
      form: {
        name: "",
        companyName: "",
        mobile: "",
      },
      isSignStatus: false,
      dataInfo: {
        BannerId: "",
        CompanyName: "",
        Mobile: "",
        RealName: "",
        Title: "",
      },
    };
  },
  methods: {
    // 双向绑定输入框
    inputChange(key, event) {
      this.form[key] = event.detail;
    },
    // 提交报名信息
    async submit() {
      let params = {
        RealName: this.dataInfo.RealName,
        CompanyName: this.dataInfo.CompanyName,
        Mobile: this.dataInfo.Mobile,
        BannerId: this.dataInfo.BannerId,
        CustomName: this.form.name,
        CustomMobile: this.form.mobile,
        CustomCompanyName: this.form.companyName,
      };
      if (!params.CustomCompanyName) {
        uni.showToast({
          title: "请填写公司名",
          icon: "none",
        });
        return;
      }
      if (!params.CustomName) {
        uni.showToast({
          title: "请填写姓名",
          icon: "none",
        });
        return;
      }
      if (!params.CustomMobile) {
        uni.showToast({
          title: "请填写手机号",
          icon: "none",
        });
        return;
      }
      const res = await bannerSignup(params);
      if (res.code == 200) {
        this.isSignStatus = true;
      }
    },
  },
  onLoad(op) {
    this.dataInfo = op;
    this.dataInfo.Title = decodeURIComponent(op.Title);
    this.dataInfo.CompanyName = decodeURIComponent(op.CompanyName);
  },
};
</script>
<style>
page {
  padding: 0;
}
.input-custom-class .van-cell {
  border: 1rpx solid #dcdfe6;
  border-radius: 8rpx;
  margin-bottom: 40rpx;
}
</style>
<style lang="scss" scoped>
.sign-up-page {
  position: relative;
  background: #f4f5fa;
  padding: 70rpx 34rpx 0;
  height: 100vh;
  .content-sign {
    background-color: #fff;
    padding: 40rpx;
    border-radius: 16rpx;
    color: #333;
    .sign-title {
      width: 100%;
      font-size: 34rpx;
      font-weight: 500;
      text-align: center;
    }
    .sign-info-txt {
      font-size: 28rpx;
      font-weight: 500;
      margin: 40rpx 0 20rpx;
    }
    .sign-info {
      .lable {
        font-size: 28rpx;
        line-height: 36rpx;
        margin-bottom: 20rpx;
      }
    }
  }
  .content-share-user {
    margin-top: 30rpx;
    background-color: #fff;
    color: #333333;
    width: 100%;
    height: 208rpx;
    padding: 40rpx;
    border-radius: 8rpx;
    .user-info-txt {
      font-size: 28rpx;
      font-weight: 500;
      margin-bottom: 20rpx;
    }
  }
  .sign-up-logo {
    display: block;
    width: 588rpx;
    height: 305rpx;
    margin: 0 auto;
  }
  view {
    box-sizing: border-box;
  }
  .sign-button {
    position: sticky;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% + 80rpx);
    margin-left: -40rpx;
    height: 176rpx;
    color: #fff;
    background-color: #fff;
    z-index: 9;
    .button {
      width: 654rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 12rpx;
      background-color: #0052d9;
    }
  }
}
.status-sign-box {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  padding-top: 333rpx;
  text-align: center;
  color: #333;
  font-size: 34rpx;
  font-weight: 600;
  .sign-success {
    width: 200rpx;
    height: 200rpx;
  }
  .success-txt {
    margin: 40rpx 0 50rpx;
  }
}
</style>
s