|
@@ -0,0 +1,259 @@
|
|
|
+<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">
|
|
|
+ <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>
|
|
|
+ <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 } from "@/config/api.js";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ radioValue: "1",
|
|
|
+ radioList: [
|
|
|
+ {
|
|
|
+ label: "填写手机号/机构名",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "上传名片",
|
|
|
+ value: "2",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ seconds: 60,
|
|
|
+ tips: "获取验证码",
|
|
|
+ countryCode: "86",
|
|
|
+ isAreaCode: false,
|
|
|
+ phoneNumber: "",
|
|
|
+ phoneCode: "",
|
|
|
+ userName: "",
|
|
|
+ corporateName: "",
|
|
|
+ fileUrl: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ mobileAreaCode() {
|
|
|
+ return MobileAreaCode;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ radioChange(e) {
|
|
|
+ console.log(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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 确认签到
|
|
|
+ submitButton() {
|
|
|
+ if (this.radioValue == "1") {
|
|
|
+ if (this.phoneNumber && this.phoneCode && this.userName && this.corporateName) {
|
|
|
+ } else {
|
|
|
+ let msg = !this.phoneNumber
|
|
|
+ ? "请输入手机号"
|
|
|
+ : !this.phoneCode
|
|
|
+ ? "请输入验证码"
|
|
|
+ : !this.userName
|
|
|
+ ? "请输入姓名"
|
|
|
+ : !this.corporateName
|
|
|
+ ? "请输入公司名称"
|
|
|
+ : "";
|
|
|
+ this.$util.toast(msg);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!this.fileUrl) {
|
|
|
+ this.$util.toast("请上传名片");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.content-upload-contact {
|
|
|
+ .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: #f7f7f7;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ }
|
|
|
+ .item-code {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 168rpx;
|
|
|
+ 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>
|