case-data/pages/register/register.vue

<template>
  <view class="logincontent">
    <web-view :src="src"></web-view>
    <!-- <up-form labelPosition="left" :model="model" ref="form" labelWidth="115rpx">
      <up-form-item
        label="手机号"
        prop="userInfo.name"
        borderBottom
        
      >
        <up-input v-model="model.name"   placeholder="请输入肝胆相照专家版手机号"></up-input>
      </up-form-item>
      
	   <view class="smsbox" >
		   <up-form-item label="图形验证码" prop="userInfo.name" borderBottom >
				<up-input v-model="model.name" placeholder="请输入图形验证码"></up-input>
				<template #right>
					<up-image :show-loading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="160rpx" height="74rpx" ></up-image>
				</template>
			</up-form-item>
			<up-form-item label="验证码" prop="userInfo.name" borderBottom >
				<up-input v-model="model.name" placeholder="请输入验证码"></up-input>
				<template #right>
					<view class="wrap">
						<up-toast ref="uToastRef"></up-toast>
						<up-code :seconds="seconds" @end="end" @start="start" ref="uCodeRef" 
						@change="codeChange" ></up-code>
						<up-button @tap="getCode"  :customStyle="customCode" color="#e2e2e2" class="custom-code"><text class="codetext">{{tips}}</text></up-button>
				</view>
				</template>
			</up-form-item>
			<up-form-item label="密码" prop="userInfo.name" borderBottom >
				<up-input v-model="model.name" type="password" placeholder="请输入6-16位字母、数字组合"></up-input>
			</up-form-item>
			
	   </view>
    </up-form>
   
	<view class="row">
		<up-button :customStyle="customStyle" class="custom-style" type="success" text="下一步" color="#3cc7c0" size="large" @click="goApply"></up-button>
	</view>
	<view class="row">
		<view class="tip">操作说明</view>
	</view>
	<view class="line">
		<view class="qq">1、</view>
		肝胆相照注册账号与微信绑定，肝胆相照相关直播、视频无忧随心看
	</view>
	<view class="line">
		<view class="qq">2、</view>
		仅需操作一次，后续通过微信观看直播、视频无需额外操作，立即进入
	</view>
	<view class="line">
		<view class="qq">3、</view>
		若您还未注册肝胆相照专家版App, 请直接点击“注册”进行注册操作
	</view>
	<view class="desc">
		若您有任何疑问或需要我们协助，请与您的小助手联系或直接微信联系<text class="red">igandan1000</text>
	</view> -->
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const src = ref("https://dev-wx.igandan.com/hcp/toRegister?fromType=wx");
const model = reactive({
  name: "",
});

const isPwdPic = ref(false);
const isPhoneLogin = ref(true);
const customStyle = reactive({
  height: "90rpx",
  fontSize: "36rpx",
});
const customCode = reactive({
  color: "#3ec7c0",
  height: "64rpx",
  fontSize: "28rpx",
  borderColor: "#e2e2e2",
  opcity: "1",
});
const tips = ref("");
const seconds = ref(10);
const uCodeRef = ref(null);
const isPhoneNum = (phonenum) => {
  let reg = /^1[3456789]\d{9}$/;
  if (!reg.test(phonenum)) {
    uni.showToast({
      title: "请输入有效的手机号码！",
      icon: "none",
    });
    return false;
  } else {
    return true;
  }
};
const validate = () => {
  if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(pwd)) {
    uni.showToast({
      title: "密码应为6-16位数字或字母组合",
      icon: "none",
    });
    return false;
  }
};
const codeChange = (text) => {
  tips.value = text;
};
const goApply = () => {
  uni.navigateTo({
    url: "/pages/apply/apply",
  });
};
const getCode = () => {
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    setTimeout(() => {
      uni.hideLoading();
      // 这里此提示会被start()方法中的提示覆盖
      uni.$u.toast("验证码已发送");
      // 通知验证码组件内部开始倒计时
      uCodeRef.value.start();
    }, 2000);
  } else {
    uni.$u.toast("倒计时结束后再发送");
  }
};
const end = () => {
  customCode.opacity = 1;
};

const start = () => {
  customCode.opacity = 0.5;
};
onLoad(() => {
  const { envVersion } = uni.getAccountInfoSync().miniProgram;
  
  if(options.src){
	  src.value=options.src
  }else{
	 if (envVersion == "release") {
	   src.value = "https://wx.igandan.com/hcp/toRegister?fromType=weChat";
	 } else {
	   src.value = "https://dev-wx.igandan.com/hcp/toRegister?fromType=weChat";
	 } 
  }
  
});
</script>

<style lang="scss" scoped>
.logincontent {
  width: 100%;
  height: 100vh;
  background: #fff;
  .pwdbox ::v-deep .u-form-item:nth-child(2) .u-form-item__body__left {
    width: 180rpx !important;
  }
  .smsbox ::v-deep .u-form-item:first-child .u-form-item__body__left {
    width: 180rpx !important;
  }
  ::v-deep .u-form-item__body__left__content__label {
    font-size: 34rpx;
    color: #000;
  }
  .title {
    padding: 124rpx 0 64rpx 30rpx;
    //padding-left: 30rpx;
    font-size: 46rpx;
    font-stretch: normal;
    letter-spacing: 2rpx;
    color: #000000;
  }
  ::v-deep .u-form {
    padding: 0 30rpx;
  }
  .row {
    margin-top: 60rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    .left {
      flex: 1;
      color: #3cc7c0;
      text-align: left;
    }
    .right {
      flex: 1;
      color: #666;
      text-align: right;
    }
    ::v-deep .u-button--large .u-button__text {
      font-size: 36rpx !important;
    }
    .tip {
      color: rgb(51, 51, 51);
      font-size: 26rpx;
    }
  }
  ::v-deep .wrap {
    border-radius: 16rpx;
    overflow: hidden;
    border: none;
  }
  //   ::v-deep .custom-code .codetext,::v-deep .custom-code .u-button{
  // 	display: flex;
  // 	justify-content: center;
  // 	align-content: center;
  // 	color:#3ec7c0!important;
  // 	height:64rpx!important;
  // 	font-size: 28rpx!important;
  // 	border:none!important;

  //   }

  .line {
    padding: 0 30rpx;
    margin-top: 10rpx;
    color: rgb(153, 153, 153);
    line-height: 44rpx;
    font-size: 26rpx;
    display: flex;
    letter-spacing: 1px;
  }
  .desc {
    padding: 0 30rpx;
    color: rgb(153, 153, 153);
    line-height: 44rpx;
    font-size: 26rpx;
    letter-spacing: 2rpx;
    .red {
      color: rgb(255, 0, 0);
    }
  }
}
</style>