horzi_rai_wxa/pages-signIn/isSignIn/components/uploadContact.vue

<template>
  <view class="content-upload-contact">
    <view class="title"> 您暂未绑定手机号<br />请按选择方式补充信息后确认签到</view>
    <radio-group style="margin-left: 35rpx" @change="radioChange">
      <radio v-for="item in radioList" :key="item.value" :class="['class-radio', radioValue === item.value && 'active-radio']" :value="item.value" color="#CAAF8B" :checked="item.value == 1">{{
        item.label
      }}</radio>
    </radio-group>
    <view class="content-bind" v-if="radioValue == 1">
      <view class="ipt-item" v-if="itemDetail.Mobile">
        <view class="show-mobile"> {{ itemDetail.Mobile }}</view>
      </view>
      <block v-else>
        <view class="ipt-item">
          <view class="item-label" @click="isAreaCode = true">
            {{ `+${countryCode}` }}
            <u-icon :name="isAreaCode ? 'arrow-up' : 'arrow-down'" color="#999999" size="28"></u-icon>
          </view>
          <input type="number" v-model="phoneNumber" placeholder="请输入手机号" />
        </view>
        <view class="ipt-item">
          <input type="number" v-model="phoneCode" placeholder="请输入4位手机号验证码" />
          <u-verification-code :seconds="seconds" ref="uCode" @change="codeTimeChange"></u-verification-code>
          <view class="item-code" @click="getCode">{{ tips }} </view>
        </view>
      </block>
      <view class="ipt-item">
        <input type="text" v-model="userName" placeholder="请输入您的姓名" />
      </view>
      <view class="ipt-item">
        <input type="text" v-model="corporateName" placeholder="请输入您的公司名称" />
      </view>
    </view>
    <view class="upload-card" v-else>
      <image v-if="fileUrl" :src="fileUrl"></image>
      <view v-else class="upload-content" @click="uploadCardHandler">
        <text>+</text>
        <text>点击上传名片</text>
      </view>
    </view>
    <view class="button-bind" @click="submitButton">确认签到</view>
    <view class="select-box">
      <u-popup v-model="isAreaCode" mode="bottom" @close="cancel">
        <view class="box" style="color: #333333; font-size: 28rpxrpx">请选择您的国际区号</view>
        <view class="box" v-for="item in mobileAreaCode" :key="item.code" style="color: #2c83ff" @click="areacode(item.code)">{{ item.name }}</view>
        <view class="box box-bottom" style="color: #a9afb8" @click="cancel">取消</view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { MobileAreaCode } from "@/utils/mobileCode";
import { uploadurl, User, Mine } from "@/config/api.js";
export default {
  data() {
    return {
      radioValue: 1,
      radioList: [
        {
          label: "填写手机号/机构名",
          value: 1,
        },
        {
          label: "上传名片",
          value: 2,
        },
      ],
      seconds: 60,
      tips: "获取验证码",
      countryCode: "86",
      isAreaCode: false,
      phoneCode: "",
      phoneNumber: "",
      userName: "",
      corporateName: "",
      fileUrl: "",
    };
  },
  computed: {
    mobileAreaCode() {
      return MobileAreaCode;
    },
  },
  props: {
    codeId: {},
    itemDetail: {
      type: Object,
      default: {},
    },
  },
  watch: {
    "itemDetail.Mobile": {
      handler(newVal) {
        this.phoneNumber = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    radioChange(e) {
      this.radioValue = e.detail.value;
    },
    // 选择区号的取消
    cancel() {
      this.isAreaCode = false;
    },
    // 选择了地区的区号
    areacode(num) {
      this.countryCode = num;
      this.isAreaCode = false;
    },
    codeTimeChange(val) {
      this.tips = val;
    },
    /* 获取邮箱验证码 */
    async getCode() {
      if (this.$refs.uCode.canGetCode) {
        if (!this.phoneNumber) {
          this.$util.toast("请先输入手机号");
          return;
        }
        const res = await User.getPhoneCode({
          Mobile: this.phoneNumber,
          AreaNum: this.countryCode,
        });
        if (res.Ret === 200) {
          this.$refs.uCode.start();
        }
      }
    },
    // 上传名片
    uploadCardHandler() {
      this.$util.upload.Single(uploadurl, (res) => {
        let data = JSON.parse(res.data);
        if (data.Ret === 200) {
          this.fileUrl = data.Data.ResourceUrl;
        }
      });
    },
    // 确认签到
    async submitButton() {
      if (this.radioValue == 1) {
        if (this.phoneNumber && (this.itemDetail.Mobile || this.phoneCode) && this.userName && this.corporateName) {
          this.submitPost();
        } else {
          let msg = !this.phoneNumber ? "请输入手机号" : !this.itemDetail.Mobile && this.phoneCode ? "请输入验证码" : !this.userName ? "请输入姓名" : !this.corporateName ? "请输入公司名称" : "";
          this.$util.toast(msg);
        }
      } else {
        if (!this.fileUrl) {
          this.$util.toast("请上传名片");
          return;
        }
        this.submitPost();
      }
    },
    async submitPost() {
      const res = await Mine.activity_signin_byHand({
        ActivityId: this.codeId, //活动ID
        CountryCode: this.countryCode, //区号
        Mobile: this.phoneNumber, //手机号
        VCode: this.phoneCode, //验证码
        CompanyName: this.corporateName, //公司名称
        BusinessCard: this.fileUrl, //名片地址
        RealName: this.userName, //姓名
        SigninType: Number(this.radioValue), //签到方式，1：填写手机号/机构名称；2：上传名片
      });
      if (res.Ret === 200) {
        this.$emit("getDetail");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content-upload-contact {
  .show-mobile {
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    position: absolute;
    width: 690rpx;
    height: 78rpx;
    background: #bfbfbf;
    border-radius: 8rpx;
    color: #333333;
  }
  .title {
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 42rpx;
    line-height: 60rpx;
    margin-bottom: 70rpx;
  }
  .class-radio {
    color: #fff;
    font-size: 32rpx;
    font-weight: normal;
    margin-right: 50rpx;
  }
  .active-radio {
    color: #caaf8b;
  }
  .content-bind {
    padding: 10rpx;
    margin-bottom: 50rpx;
  }
  .ipt-item {
    display: flex;
    align-items: center;
    font-size: 34rpx;
    height: 78rpx;
    margin-top: 30rpx;
    .item-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 167rpx;
      margin-right: 10rpx;
      height: 100%;
      background-color: #fff;
      color: #999;
      padding: 0 25rpx;
      border-radius: 8rpx;
    }
    input {
      flex: 1;
      background-color: $uni-bg-color;
      height: 100%;
      border-radius: 8rpx;
      padding-left: 30rpx;
    }
    .item-code {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 185rpx;
      height: 60rpx;
      border: 2rpx solid #caaf8b;
      border-radius: 4rpx;
      color: #caaf8b;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
  .button-bind {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 349rpx;
    height: 78rpx;
    background: linear-gradient(180deg, #e5cfb1 0%, #caaf8b 100%);
    border-radius: 4rpx;
    margin: 0 auto;
    color: #333333;
    font-weight: 500;
    font-size: 32rpx;
  }
  .upload-card {
    width: 690rpx;
    height: 431rpx;
    background: #333333;
    border: 4rpx solid #caaf8b;
    border-radius: 4rpx;
    margin: 25rpx auto 50rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    image {
      width: 100%;
      height: 100%;
    }
    .upload-content {
      width: 100%;
      color: #caaf8b;
      text {
        font-size: 80rpx;
        font-weight: 700;
        width: 100%;
        text-align: center;
      }
      text:last-child {
        font-weight: 400;
        font-size: 32rpx;
      }
    }
  }
}
</style>