<template>
	<view class="flex-col page">
		<!-- <image src="/static/common/img/16530269846087107196.png" class="image" /> -->
		<u-navbar title="注册"></u-navbar>
		<view class="flex-col group">
			<text class="text">手机号注册</text>
			<view class="flex-col group_7">
				<view class="flex-col">
					<!-- <text class="text_1">手机号</text> -->
					<view class="text-wrapper flex-row view" style="padding: 0">
						<u-input type="number" v-model="userName" placeholder="请输入手机号" maxlength="11" :disabled="disabled" />
						
					</view>
				</view>
				<view class="flex-col group_6" v-show="showCap">
					<view class="text-wrapper flex-row view" style="padding: 0">
						<u-input type="text" v-model="captchaCode" placeholder="请输入图形验证码" />
						<image :src="captchaImg" class="captcha-img" @click="refreshCaptcha" />
					</view>
				</view>
				<view class="flex-col group_6">
					<!-- <text class="text_1">短信验证码</text> -->
					<view class="text-wrapper flex-row view" style="padding: 0">
						<u-input type="text" v-model="passWord" placeholder="请输入短信验证码"  />
						<u-button style='background:transparent;' class="custom-style" :disabled="!(send == '获取验证码')" @click="sendCode">{{ send }}
						</u-button>
					</view>
				</view>
			</view>
			<u-button class="flex-col items-center text-wrapper_1" throttle-time="1000" type="primary" shape="circle"
				@click="login"><text class="text_7">注册</text></u-button>
				<view class="justify-center group_1">
					<text class="text_8">已有账号</text>
					<navigator class="text_9" url="/pages/login/login/login">立即登录</navigator>
				</view>
			<!-- <view class="flex-row group_2">
				<u-checkbox-group class="section_1" :size="34">
					<u-checkbox v-model="agreement"> </u-checkbox>
				</u-checkbox-group>
				<view class="group_3">
					<text class="text_10">已阅读并同意</text>
					<text class="text_11">《用户服务协议》</text>
					<text class="text_12">＆</text>
					<text class="text_13">《用户隐私保护政策》</text>
				</view>
			</view> -->
		</view>
		<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import md5 from "js-md5";
	export default {
		data() {
			return {
				show: false,
				userName: "",
				passWord: "",
				agreement: false,
				send: "获取验证码",
				disabled: false,
				captchaCode: "", // 图形验证码
				captchaImg: "", // 验证码图片
				captchaId: "", // 验证码ID
				showCap: false,
			};
		},
		onLoad(e) {
			// this.refreshCaptcha();
		},
		methods: {
			// 刷新验证码
			refreshCaptcha() {
				const timestamp = Date.now();
				this.captchaId = timestamp;
				uni.request({
					url: 'http://sl.vrgon.com:8003/api/Token/Captcha?id=' + timestamp,
					method: 'GET',
					responseType: 'arraybuffer',
					headers: {
						'Accept': '*/*',
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data) {
							// res.data 是 ArrayBuffer 类型，将其转换为 Blob
							const blob = new Blob([res.data], { type: 'image/gif' }); // 根据实际图片类型调整
							const reader = new FileReader();
							reader.onload = () => {
								// 将 Blob 读取为 Data URL (Base64 编码的图片)
								this.captchaImg = reader.result;
							};
							reader.onerror = (e) => {
								console.error("FileReader error:", e);
								this.$refs.uToast.show({
									title: '图片转换失败',
									type: "error",
								});
							};
							reader.readAsDataURL(blob);
						} else {
							console.error('获取验证码失败，状态码或数据异常:', res);
							this.$refs.uToast.show({
								title: '获取验证码失败',
								type: "error",
							});
						}
					},
					fail: (err) => {
						console.error('验证码请求失败:', err);
						this.$refs.uToast.show({
							title: '获取验证码失败，请检查网络或CORS设置',
							type: "error",
						});
					}
				});
			},
			// 获取验证码
			sendCode() {
				var reg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$", "g"); //手机号
				if (this.userName === "" || !reg.test(this.userName)) {
					this.$refs.uToast.show({
						title: "请输入正确的手机号码",
						type: "error",
					});
					return;
				}
				
				// if (!this.captchaCode) {
				// 	this.$refs.uToast.show({
				// 		title: "请输入图形验证码",
				// 		type: "error",
				// 	});
				// 	return;
				// }
				
				// 生成13位时间戳
				const timestamp = Date.now();
				// 生成签名
				const base64Key = btoa('xiaoyout!#@12345');
				const signStr = this.userName + timestamp + base64Key;
				const sign = md5(signStr);

				this.$u.apiList.GetPhoneValidateCode({
					phone: this.userName,
					t: timestamp.toString(),
					sign: sign,
					captchaCode: this.showCap ? this.captchaCode : ''	,
					captchaId: this.showCap ? this.captchaId.toString() : ''
				}).then((res)=>{
					//中间数字加密
					// let result =this.userName.replace(this.userName.substring(3,7),"****")
					// this.userName = result
					this.disabled = true
					// this.$tips("发送成功");
					this.$refs.uToast.show({
					title: "发送成功",
					type: "success",
				});
					var second = 60;
					this.send = second + "秒后重试";
					var time = setInterval(() => {
						this.send = second + "秒后重试";
						second--;
						if (second <= 0) {
							this.disabled = false
							this.send = "获取验证码";
							clearInterval(time);
						}
					}, 1000);
				})
				.catch((err)=>{
					console.log('err-----',err)
					if(err?.data?.needcap && !this.showCap) {
						this.showCap = true
						this.$refs.uToast.show({
							title: '请输入图形验证码',
							type: "error",
						});
						this.refreshCaptcha()
						return
					} 
					this.$refs.uToast.show({
						title: err.error,
						type: "error",
					});
					this.refreshCaptcha()
				})
			},
			
			login() {
        // uni.navigateTo({
				// 			url: "/pages/login/confirmPwd/confirmPwd?phone="+this.userName,
				// 		});
        // return
				var reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$", "g"); //手机号
				if (this.userName === "" || !reg.test(this.userName)) {
				//   this.$tips("请输入正确的手机号码", "error");
				  this.$refs.uToast.show({
					title: "请输入正确的手机号码",
					type: "error",
				});
				  return;
				}
				if (this.passWord === "") {
					// return this.$tips("请输入验证码", "error");
					return this.$refs.uToast.show({
					title: "请输入验证码",
					type: "error",
				});
				}
				// if (!this.agreement) {
				// 	return this.$tips("请同意用户服务协议及用户隐私保护政策", "error");
				// }
				const data = {
					phone:this.userName,
					code : this.passWord
				}
				this.$u.apiList.IsPhoneCode(data).then((res)=>{
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/confirmPwd/confirmPwd?phone="+this.userName+"&code="+this.passWord,
						});
					}, 1000);
				})
				.catch((err)=>{
					// this.$tips(err.error, "error");
					this.$refs.uToast.show({
						title: err.error,
						type: "error",
					});
				})
				
			},
		},
	};
</script>

<style scoped lang="scss">
	.custom-style {
		color: #3CB5FB !important;
		padding: 0 !important;
		height: 70rpx !important;
		line-height: 60rpx !important;
	}

	.custom-style::after {
		border: none;
	}

	.page {
		padding-bottom: 0.015rem;
		background-color: rgb(255, 255, 255);
		overflow-y: auto;
		width: 100%;
		overflow-x: hidden;
		height: 100%;

		.image {
			flex-shrink: 0;
			align-self: flex-start;
			width: 102%;
		}

		.group {
			padding: 0.7rem 0.29rem;

			.text {
				align-self: left;
				// color: rgb(46, 155, 255);
				color: #000;
				font-size: 0.22rem;
				font-family: PingFang;
				line-height: 0.17rem;
				font-weight: 600;
			}

			.group_7 {
				margin-top: 0.29rem;

				.text-wrapper {
					border: solid 2rpx #dcdfe6;
					border-radius: 100rpx;
					background: #f6f8fa;
				}

				.group_6 {
					margin-top: 0.2rem;
				}

				.text_1 {
					margin-left: 0.01rem;
					align-self: flex-start;
					color: rgb(51, 51, 51);
					font-size: 0.15rem;
					font-family: PingFang;
					line-height: 0.14rem;
				}

				.view {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					padding: 20rpx 50rpx !important;
				}
			}

			.text_6 {
				margin-left: 0.01rem;
				margin-top: 0.13rem;
				align-self: flex-start;
				color: rgb(25, 140, 255);
				font-size: 0.13rem;
				font-family: PingFang;
				line-height: 0.13rem;
			}

			.text-wrapper_1 {
				margin: 50rpx 0rpx 40rpx;
				padding: 50rpx 0 50rpx;
				// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
				background: #3cb4fb;
				box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
				border-radius: 100rpx;

				.text_7 {
					color: rgb(255, 255, 255);
					font-size: 32rpx;
					font-family: PingFang;
					line-height: 32rpx;
				}
			}

			.group_1 {
				margin-top: 0.12rem;

				.text_8 {
					color: rgb(102, 102, 102);
					font-size: 0.14rem;
					font-family: PingFang;
					line-height: 0.13rem;
				}

				.text_9 {
					margin-left: 0.035rem;
					color: rgb(25, 140, 255);
					font-size: 0.14rem;
					font-family: PingFang;
					line-height: 0.13rem;
				}
			}

			.group_2 {
				margin-top: 0.36rem;
				justify-content: center;

				.section_1 {
					flex-shrink: 0;
					width: 0.17rem;
				}

				.group_3 {
					margin-left: 0.11rem;
					height: 0.18rem;
					line-height: 0.18rem;
					font-size: 0;

					.text_10 {
						color: rgb(153, 153, 153);
						font-size: 0.11rem;
						font-family: PingFang;
					}

					.text_11 {
						color: rgb(25, 140, 255);
						font-size: 0.11rem;
						font-family: PingFang;
					}

					.text_12 {
						color: rgb(102, 102, 102);
						font-size: 0.11rem;
						font-family: PingFang;
					}

					.text_13 {
						color: rgb(25, 140, 255);
						font-size: 0.11rem;
						font-family: PingFang;
					}
				}
			}
		}

		.captcha-img {
			width: 200rpx;
			height: 70rpx;
			margin-right: 20rpx;
		}
	}
</style>



<!-- <template>
  <view class="flex-col page">
    <view class="flex-col group">
      <text class="text">注册账号</text>
      <view class="flex-col group_1">
        <view class="flex-col group_2">
          <u-select
            @click="show = true"
            :mode="'single-column'"
            v-model="show"
            :list="shoolList"
            @confirm="confirm"
            @cancel="cancel"
          ></u-select>
          <view class="justify-between section_1" @click="show = true">
            <text
              :style="{ color: this.shoolname !== '' ? '#000' : '#c1c4cc' }"
              >{{ this.shoolname != "" ? this.shoolname : "请选择学校" }}</text
            >
            <image
              src="/static/common/img/select.png"
              class="image_1"
            />
          </view>
          <view class="text-wrapper flex-col">
            <u-input
              v-model="userName"
              type="text"
              placeholder="请输入用户名"
            />
          </view>
          <view class="text-wrapper flex-col view_1">
            <u-input
              v-model="passWord"
              type="password"
              placeholder="请输入密码"
            />
          </view>
          <view class="text-wrapper flex-col">
            <u-input
              v-model="twopassWord"
              type="password"
              placeholder="请确认密码"
            />
          </view>
        </view>
        <view class="flex-row group_3">
          <view class="flex-col text-wrapper_1">
            <u-input
              v-model="Code"
              type="text"
              placeholder="请输入验证码"
            />
            <text class="text_6"></text>
          </view>
          <view class="flex-col items-end text-wrapper_2">
            <text>6789</text>
          </view>
        </view>
      </view>
      <view>
        <u-button  class="flex-col items-center text-wrapper_3" @click="register" :throttle-time='1000'>注册</u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      userName: "",
      passWord: "",
      twopassWord: "",
      Code: "",
      shoolname: "",
      shoolList: [
        {
          value: "1",
          label: "学校一",
        },
        {
          value: "2",
          label: "学校二",
        },
        {
          value: "3",
          label: "学校三",
        },
        {
          value: "4",
          label: "学校四",
        }
      ],
    };
  },
  onLoad(e) {
    ;
  },
  methods: {
    confirm(e) {
      this.shoolname = "";
      e.map((val, index) => {
        this.shoolname += this.shoolname == "" ? val.label : "-" + val.label;
      });
    },
    cancel(e) {
      ;
    },
    register(){
      uni.showLoading({
        title: '注册中'
      });

      setTimeout(()=>{
        uni.hideLoading();
         uni.showToast({
        title: '注册成功',
        duration: 2000
      });
      },1000)
     
    }
  },
};
</script>

<style scoped lang="css">
.text-wrapper {
  margin-top: 0.095rem;
  padding: 0.03rem 0.17rem;
  background-color: rgb(246, 247, 250);
  border-radius: 0.1rem;
}
.text_2 {
  margin-left: 0.17rem;
}
.page {
  padding: 0.045rem 0 1.5rem;
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.image {
  margin-left: 0.26rem;
  margin-right: 0.23rem;
  width: 3.27rem;
  height: 0.09rem;
}
.group {
  margin-top: 0.72rem;
  padding-left: 0.34rem;
  padding-right: 0.31rem;
}
.text {
  margin-left: 0.045rem;
  color: rgb(0, 0, 0);
  font-size: 0.24rem;
  line-height: 0.23rem;
  letter-spacing: 0.024rem;
  white-space: nowrap;
}
.group_1 {
  margin-top: 0.67rem;
}
.text-wrapper_3 {
  margin-top: 0.54rem;
  padding: 0.13rem 0;
  color: rgb(255, 255, 255);
  font-size: 0.15rem;
  line-height: 0.14rem;
  letter-spacing: 0.03rem;
  white-space: nowrap;
  background-color: rgba(46, 155, 255, 0.5);
  border-radius: 0.1rem;
}
.group_2 {
  color: rgb(193, 196, 204);
  font-size: 0.15rem;
  line-height: 0.14rem;
  white-space: nowrap;
}
.group_3 {
  margin-top: 0.08rem;
}
.section_1 {
  padding: 0.13rem 0.17rem;
  background-color: rgb(246, 247, 250);
  border-radius: 0.1rem;
}
.view_1 {
  margin-top: 0.09rem;
}
.text-wrapper_1 {
  padding: 0 0.17rem;
  flex: 1 1 auto;
  color: rgb(193, 196, 204);
  font-size: 0.15rem;
  line-height: 0.14rem;
  white-space: nowrap;
  background-color: rgb(246, 247, 250);
  border-radius: 0.1rem;
  height: 0.4rem;
}
.text-wrapper_2 {
  margin-left: 0.08rem;
  padding: 0.14rem 0.1rem ;
  color: rgb(106, 134, 241);
  font-size: 0.18rem;
  line-height: 0.14rem;
  letter-spacing: 0.036rem;
  white-space: nowrap;
  background-color: rgba(211, 220, 255, 0.5);
  border-radius: 0.1rem;
  height: 0.4rem;
}
.image_1 {
  margin-right: 0.035rem;
  margin-top: 0.05rem;
  width: 0.14rem;
  height: 0.09rem;
}
.text_6 {
  margin-left: 0.17rem;
}
</style> -->
