322 lines
8.4 KiB
Vue
322 lines
8.4 KiB
Vue
<template>
|
||
<view class="logincontent">
|
||
<view class="title">登录观看</view>
|
||
<up-form labelPosition="left" :model="model" ref="form" labelWidth="115rpx">
|
||
<up-form-item
|
||
label="手机号"
|
||
prop="userInfo.name"
|
||
borderBottom
|
||
v-if="!isPhoneLogin"
|
||
>
|
||
<up-input
|
||
v-model="model.name"
|
||
placeholder="请输入肝胆相照专家版手机号"
|
||
></up-input>
|
||
</up-form-item>
|
||
<!-- <view v-if="isPhoneLogin" class="pwdbox">
|
||
<up-form-item label="密码" prop="userInfo.name" borderBottom>
|
||
<up-input
|
||
v-model="model.name"
|
||
type="password"
|
||
placeholder="请输入密码"
|
||
></up-input>
|
||
</up-form-item>
|
||
<up-form-item
|
||
label="图形验证码"
|
||
prop="userInfo.name"
|
||
borderBottom
|
||
v-if="isPwdPic"
|
||
>
|
||
<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>
|
||
</view> -->
|
||
<view class="smsbox" v-if="!isPhoneLogin">
|
||
<!-- <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>
|
||
</view>
|
||
</up-form>
|
||
|
||
<view class="row" v-if="!isPhoneLogin">
|
||
<up-button
|
||
:customStyle="customStyle"
|
||
class="custom-style"
|
||
type="success"
|
||
text="登录"
|
||
color="#3cc7c0"
|
||
size="large"
|
||
></up-button>
|
||
</view>
|
||
<view class="row" style="margin-top: 120rpx" v-else>
|
||
<up-button
|
||
:customStyle="customStyle"
|
||
class="custom-style"
|
||
type="success"
|
||
@getphonenumber="getPhoneNumber"
|
||
open-type="getPhoneNumber"
|
||
text="手机号快捷登录"
|
||
color="#3cc7c0"
|
||
size="large"
|
||
></up-button>
|
||
</view>
|
||
<view class="row">
|
||
<view class="left" @click="switchType">
|
||
{{ isPhoneLogin ? "用短信验证码登录" : "快捷登录" }}
|
||
</view>
|
||
<view class="right" @click="goRegister"> 注册 </view>
|
||
</view>
|
||
<view class="row" style="margin-top:10rpx">
|
||
<up-radio-group v-model="checked">
|
||
<up-radio
|
||
label="我已阅读并同意<a>《用户协议》</a>"
|
||
></up-radio>
|
||
</up-radio-group>
|
||
</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 { onShow } from "@dcloudio/uni-app";
|
||
import api from "@/api/api";
|
||
import auth from "@/utils/auth";
|
||
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 checked = ref(false);
|
||
const getPhoneNumber = (e) => {
|
||
if (e.detail.errMsg === "getPhoneNumber:ok") {
|
||
console.log(e.target.code)
|
||
auth().then((res) => {
|
||
console.log(res);
|
||
api.wxLogin({
|
||
phone_code: e.target.code,
|
||
wx_code: res,
|
||
})
|
||
.then((data) => {
|
||
const { envVersion } = uni.getAccountInfoSync().miniProgram;
|
||
if (envVersion == "release") {
|
||
uni.setStorageSync("AUTH_TOKEN", data.token);
|
||
} else {
|
||
uni.setStorageSync("DEV_AUTH_TOKEN", data.token);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
};
|
||
const isPhoneNum = (phonenum) => {
|
||
let reg = /^1[3456789]\d{9}$/;
|
||
if (!reg.test(phonenum)) {
|
||
uni.showToast({
|
||
title: "请输入有效的手机号码！",
|
||
icon: "none",
|
||
});
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
};
|
||
const codeChange = (text) => {
|
||
tips.value = text;
|
||
};
|
||
const switchType = () => {
|
||
isPhoneLogin.value = !isPhoneLogin.value;
|
||
};
|
||
const goRegister = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/register/register",
|
||
});
|
||
};
|
||
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;
|
||
};
|
||
</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: 30rpx;
|
||
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> |