@@ -0,0 +1,21 @@ | |||
import request from '@/utils/request' | |||
// 得到声音试听文件 | |||
export function videoDetial(data) { | |||
return request({ | |||
url: `/api/userVideo/videoDetial?videoId=${data}`, | |||
method: 'get', | |||
}) | |||
} | |||
// 得到声音试听文件 | |||
export function awsImgUpload(data) { | |||
return request({ | |||
url: `/api/upload/awsImgUpload | |||
file`, | |||
method: 'post', | |||
data:data | |||
}) | |||
} |
@@ -123,5 +123,5 @@ export function doLoginOut() { | |||
* @description 获取图形验证码 | |||
* @returns data | |||
*/ | |||
export const codeImg = | |||
export const doCodeImg = | |||
'https://smapitest.malls.iformall.com/C/api/user/captcha.jpg' |
@@ -0,0 +1,259 @@ | |||
<template> | |||
<div class="uploder"> | |||
<div class="change-photo-setter"> | |||
<van-uploader | |||
class="sett-item" | |||
:before-read="beforeRead" | |||
accept="image/*" | |||
> | |||
<div>照片图库</div> | |||
<img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||
</van-uploader> | |||
<van-uploader | |||
class="sett-item" | |||
:before-read="beforeRead" | |||
capture="camera" | |||
> | |||
<div>拍照</div> | |||
<img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||
</van-uploader> | |||
<van-uploader class="sett-item" :before-read="beforeRead"> | |||
<div>选取文件</div> | |||
<img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||
</van-uploader> | |||
</div> | |||
<div class="uploadava"> | |||
<van-popup | |||
duration="0" | |||
v-model="showCropper" | |||
position="top" | |||
:style="{ height: '100%' }" | |||
> | |||
<div class="cropper-container"> | |||
<van-loading | |||
v-show="loadingShow" | |||
size="50" | |||
color="#fff" | |||
vertical | |||
text-color="#fff" | |||
>上传中...</van-loading | |||
> | |||
<vueCropper | |||
ref="cropper" | |||
:img="option.img" | |||
:outputSize="option.outputSize" | |||
:outputType="option.outputType" | |||
:info="option.info" | |||
:full="option.full" | |||
:autoCropWidth="option.autoCropWidth" | |||
:autoCropHeight="option.autoCropHeight" | |||
:canMove="option.canMove" | |||
:canMoveBox="option.canMoveBox" | |||
:original="option.original" | |||
:autoCrop="option.autoCrop" | |||
:fixed="option.fixed" | |||
:fixedNumber="option.fixedNumber" | |||
:centerBox="option.centerBox" | |||
:infoTrue="option.infoTrue" | |||
:fixedBox="option.fixedBox" | |||
:high="option.high" | |||
:mode="option.mode" | |||
/> | |||
<van-nav-bar | |||
left-text="取消" | |||
right-text="选择" | |||
@click-left="onClickLeft" | |||
@click-right="getCropBlob" | |||
/> | |||
</div> | |||
</van-popup> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { VueCropper } from 'vue-cropper' | |||
export default { | |||
name: 'uploadAva', | |||
components: { | |||
VueCropper | |||
}, | |||
props: { | |||
showAta: { | |||
default: false, | |||
type: Boolean | |||
}, | |||
avaUrl: { | |||
default: '', | |||
type: String | |||
} | |||
}, | |||
data() { | |||
return { | |||
show: true, // 上传类型的弹窗 | |||
imageFileName: '', | |||
showCropper: false, // 裁剪的弹窗 | |||
option: { | |||
img: '', | |||
outputSize: 0.8, | |||
info: false, // 裁剪框的大小信息 | |||
outputType: 'jpeg', // 裁剪生成图片的格式 | |||
canScale: true, // 图片是否允许滚轮缩放 | |||
autoCrop: true, // 是否默认生成截图框 | |||
autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度 | |||
autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度 | |||
high: true, // 是否按照设备的dpr 输出等比例图片 | |||
fixedBox: false, // 固定截图框大小 不允许改变 | |||
fixed: true, // 是否开启截图框宽高固定比例 | |||
fixedNumber: [1, 1], // 截图框的宽高比例 | |||
full: true, // 是否输出原图比例的截图 | |||
canMoveBox: true, // 截图框能否拖动 | |||
original: false, // 上传图片按照原始比例渲染 | |||
centerBox: true, // 截图框是否被限制在图片里面 | |||
infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | |||
mode: '100% auto' // 图片默认渲染方式 | |||
}, | |||
loadingShow: false // 是否展示loading | |||
} | |||
}, | |||
methods: { | |||
beforeRead(file) { | |||
if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||
this.$toast('请上传 jpg/png 格式图片') | |||
return false | |||
} | |||
console.log(111, file) | |||
this.showCropper = true | |||
this.imageToBase64(file) | |||
this.imageFileName = file.name | |||
}, | |||
imageToBase64(file) { | |||
let reader = new FileReader() | |||
console.log(reader) | |||
reader.readAsDataURL(file) | |||
reader.onload = () => { | |||
this.option.img = reader.result | |||
} | |||
}, | |||
getCropBlob() { | |||
// let formData = new FormData() | |||
this.loadingShow = true | |||
console.log(this.option) | |||
this.$refs.cropper.getCropBlob((data) => { | |||
// formData.append('headFile', data, this.imageFileName) | |||
// formData.append('id', this.$store.getters.user.userId) | |||
console.log(data) | |||
// uploadAva(formData).then((res) => { | |||
// this.showCropper = false | |||
this.$emit('update:showAta', false) | |||
// this.$emit('update:avaUrl', res.data) | |||
// }) | |||
}) | |||
}, | |||
onClickLeft() { | |||
this.loadingShow = false | |||
this.showCropper = false | |||
this.$parent.showPhotoUploader = false | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
// .uploder{ | |||
// overflow: hidden; | |||
// } | |||
/deep/.cropper-view-box { | |||
outline: 2px dashed #fff !important; | |||
} | |||
/deep/.crop-point { | |||
background-color: auto !important; | |||
} | |||
/deep/.van-loading { | |||
position: absolute; | |||
// color: red; | |||
z-index: 9999; | |||
left: 50%; | |||
top: 50%; | |||
margin-left: -55px; | |||
margin-top: -30px; | |||
background: rgba(0, 0, 0, 0.3); | |||
padding: 10px 30px; | |||
border-radius: 25px; | |||
} | |||
.change-photo-setter { | |||
width: 400px; | |||
background: #fff; | |||
position: absolute; | |||
top: 11%; | |||
left: 40px; | |||
z-index: 300; | |||
.sett-item { | |||
width: 100%; | |||
} | |||
/deep/.van-uploader__input-wrapper { | |||
width: 100%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: 15px; | |||
img { | |||
width: 40px; | |||
height: 40px; | |||
display: block; | |||
} | |||
} | |||
.sett-item:first-child { | |||
border-bottom: 2px solid #ccc; | |||
} | |||
} | |||
.uploadava { | |||
.update-avatar { | |||
height: 100%; | |||
text-align: center; | |||
.update-avatar-line { | |||
width: 100%; | |||
height: 1px; | |||
background-color: #979797; | |||
} | |||
.avatar-select-type { | |||
background-color: #fff; | |||
width: 346px; | |||
border-radius: 12px; | |||
padding-bottom: 4px; | |||
.upload-avator { | |||
padding: 14px; | |||
} | |||
} | |||
p { | |||
margin: 15px 0 30px; | |||
background-color: #fff; | |||
width: 346px; | |||
border-radius: 12px; | |||
padding: 15px 0 18px; | |||
} | |||
} | |||
.cropper-container { | |||
height: 94vh; | |||
.van-nav-bar { | |||
background-color: rgba(0, 0, 0, 0.87); | |||
:global(.van-nav-bar__text) { | |||
color: #fff; | |||
// font-size: $font-size-normal-x; | |||
} | |||
:global(.van-nav-bar__text:nth-child(2)) { | |||
color: #000; | |||
font-weight: 500; | |||
} | |||
// :global(.van-icon) { | |||
// color: red; | |||
// } | |||
} | |||
} | |||
.vue-cropper { | |||
background: #000; | |||
height: 100%; | |||
padding-top: 46px; | |||
box-sizing: border-box; | |||
} | |||
} | |||
</style> |
@@ -52,7 +52,7 @@ request.interceptors.response.use( | |||
// 其他错误 | |||
} else { | |||
Toast.fail(error.message) | |||
return Promise.reject(response.data) | |||
} | |||
} else { | |||
@@ -0,0 +1,773 @@ | |||
<template> | |||
<!-- 手机号13797188591 --> | |||
<div :class="inPage ? 'page active' : 'page'"> | |||
<div id="top"></div> | |||
<div class="logoBox" @click="go('/')"> | |||
<img src="../../assets/img/logoh.png" alt class="logo" /> | |||
<!-- <div class="logoTitle">metavatar</div> --> | |||
</div> | |||
<!-- 首页登录 loginType=1 --> | |||
<div class="loginBox" v-if="loginType == 1"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<!-- 手机号 --> | |||
<el-form-item class="phone" prop="phone"> | |||
<el-input | |||
v-model="form.phone" | |||
placeholder="请输入您的手机号" | |||
></el-input> | |||
</el-form-item> | |||
<!-- 密码 --> | |||
<el-form-item class="code" prop="password"> | |||
<el-input | |||
type="password" | |||
maxlength="10" | |||
clearable | |||
v-model="form.password" | |||
placeholder="请输入密码" | |||
></el-input> | |||
</el-form-item> | |||
<!-- 随机验证码 --> | |||
<el-form-item class="yzCode" prop="yzCode"> | |||
<el-col :span="12"> | |||
<el-input | |||
v-model="form.yzCode" | |||
placeholder="请输入验证码" | |||
></el-input> | |||
</el-col> | |||
<el-col :span="9"> | |||
<!-- <div class="yzmImg" v-html="codeImg"></div> --> | |||
<img v-if="showCodeImg" class="yzmImg" :src="codeImg" alt="" /> | |||
</el-col> | |||
<el-col :span="2"> | |||
<i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | |||
</el-col> | |||
</el-form-item> | |||
<!-- 短信登录和忘记密码 --> | |||
<div class="morePage greenColor"> | |||
<span @click="loginType = 2">短信登录</span> | |||
<span @click="loginType = 3">忘记密码?</span> | |||
</div> | |||
<!-- 登录 --> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>登录/注册</el-button | |||
> | |||
</el-form-item> | |||
<!-- 没有账号 --> | |||
<div> | |||
<span>没有账号?</span> | |||
<span class="greenColor" @click="loginType = 5">立即注册</span> | |||
</div> | |||
</el-form> | |||
</div> | |||
<!-- 短信登录 loginType=2 --> | |||
<div class="loginBox" v-if="loginType == 2"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<!-- 手机号 --> | |||
<el-form-item class="phone" prop="phone"> | |||
<el-input | |||
v-model="form.phone" | |||
placeholder="请输入您的手机号" | |||
></el-input> | |||
</el-form-item> | |||
<!-- 短信验证码 --> | |||
<el-form-item class="code" prop="code"> | |||
<el-input | |||
maxlength="10" | |||
clearable | |||
v-model="form.code" | |||
placeholder="请输入短信验证码" | |||
> | |||
<div | |||
v-if="!countdownState" | |||
@click="triggerCountdown" | |||
class="greenColor" | |||
slot="suffix" | |||
type="primary" | |||
> | |||
获取验证码 | |||
</div> | |||
<div v-else slot="suffix" type="primary"> | |||
验证码已发送{{ countNum }}s | |||
</div> | |||
</el-input> | |||
</el-form-item> | |||
<!-- 短信登录和忘记密码 --> | |||
<div class="morePage greenColor inBoxEnd"> | |||
<span @click="loginType = 1">账号登录</span> | |||
</div> | |||
<!-- 登录 --> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>登录</el-button | |||
> | |||
</el-form-item> | |||
<!-- 没有账号 --> | |||
<div> | |||
<span>没有账号?</span> | |||
<span class="greenColor" @click="loginType = 5">立即注册</span> | |||
</div> | |||
</el-form> | |||
</div> | |||
<!-- 忘记密码 loginType=3--> | |||
<div class="loginBox" v-if="loginType == 3"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<!-- 手机号 --> | |||
<el-form-item class="phone" prop="phone"> | |||
<el-input | |||
v-model="form.phone" | |||
placeholder="请输入您的手机号" | |||
></el-input> | |||
</el-form-item> | |||
<!-- 随机验证码 --> | |||
<el-form-item class="code" prop="yzCode"> | |||
<el-col :span="12"> | |||
<el-input | |||
maxlength="10" | |||
clearable | |||
v-model="form.yzCode" | |||
placeholder="请输入验证码" | |||
></el-input> | |||
</el-col> | |||
<el-col :span="9"> | |||
<!-- <div class="yzmImg" v-html="codeImg"></div> --> | |||
<img class="yzmImg" :src="codeImg" alt="" /> | |||
</el-col> | |||
<el-col :span="2"> | |||
<i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | |||
</el-col> | |||
</el-form-item> | |||
<div class="morePage greenColor"> | |||
<span @click="loginType = 1">账户登录</span> | |||
</div> | |||
<!-- 登录 --> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>获取短信验证码</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<!-- 重设密码 loginType=4 --> | |||
<div class="loginBox" v-if="loginType == 4"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<!-- 短信验证码 --> | |||
<el-form-item class="phone" prop="code1"> | |||
<el-input | |||
v-model="form.code1" | |||
placeholder="请输入短信验证码" | |||
></el-input> | |||
</el-form-item> | |||
<!-- 新密码1 --> | |||
<el-form-item class="code" prop="newPassword1"> | |||
<el-input | |||
type="password" | |||
maxlength="10" | |||
clearable | |||
v-model="form.newPassword1" | |||
placeholder="请输入您的新密码" | |||
> | |||
</el-input> | |||
</el-form-item> | |||
<!-- 新密码2 --> | |||
<el-form-item class="code" prop="newPassword2"> | |||
<el-input | |||
type="password" | |||
maxlength="10" | |||
clearable | |||
v-model="form.newPassword2" | |||
placeholder="请再次确认您的新密码" | |||
> | |||
</el-input> | |||
</el-form-item> | |||
<div class="morePage greenColor"> | |||
<span @click="loginType = 1">账户登录</span> | |||
</div> | |||
<!-- 登录 --> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>保存密码</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<!-- 注册 loginType=5 --> | |||
<div class="loginBox" v-if="loginType == 5"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<!-- 短信验证码 --> | |||
<el-form-item class="phone" prop="phone"> | |||
<el-input | |||
v-model="form.phone" | |||
placeholder="请输入您的手机号" | |||
></el-input> | |||
</el-form-item> | |||
<!-- 新密码1 --> | |||
<el-form-item class="code" prop="newPassword1"> | |||
<el-input | |||
type="password" | |||
maxlength="10" | |||
clearable | |||
v-model="form.newPassword1" | |||
placeholder="请输入您的密码" | |||
> | |||
</el-input> | |||
</el-form-item> | |||
<!-- 新密码2 --> | |||
<el-form-item class="code" prop="newPassword2"> | |||
<el-input | |||
type="password" | |||
maxlength="10" | |||
clearable | |||
v-model="form.newPassword2" | |||
placeholder="请再次确认您的密码" | |||
> | |||
</el-input> | |||
</el-form-item> | |||
<div class="morePage greenColor"> | |||
<span @click="loginType = 1">账户登录</span> | |||
</div> | |||
<!-- 注册 --> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>注册</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<!-- 弹出层 --> | |||
<van-popup v-model="showDialog">内容</van-popup> | |||
</div> | |||
</template> | |||
<script> | |||
// 组件 | |||
import Vue from 'vue' | |||
import { Toast } from 'vant' | |||
import { mapState, mapActions } from 'vuex' | |||
// 工具 | |||
import { scrollToID } from '../../utils' | |||
// 接口 | |||
import { | |||
doLogin, | |||
getCodeByPhone, | |||
doRegisterByPhone, | |||
doLoginByPhone, | |||
doSendPhoneCode, | |||
doUpdPass, | |||
getCaptcha, | |||
doFindInviteCode, | |||
doUpdateInviteCode, | |||
doCodeImg | |||
} from '../../api/login' | |||
Vue.use(Toast) | |||
export default { | |||
data() { | |||
return { | |||
showDialog: false, //弹出层状态 | |||
countNum: 60, // 倒计时 | |||
countdownState: false, //倒计时状态 | |||
codeInfo: '获取验证码', | |||
inPage: false, | |||
codeImg: '', //随机验证码图片 | |||
loginType: 1, //显示页面字符 | |||
showCodeImg: true, // 控制验证码的刷新 | |||
// 短信验证码登录 | |||
form: { | |||
phone: '', // 手机号 | |||
password: '', // 密码 | |||
newPassword1: '', // 新密码1 | |||
newPassword2: '', // 新密码2 | |||
phoneCode: '', // | |||
code: '', // 短信验证码 | |||
code1: '', // 忘记密码的短信验证码 | |||
yzCode: '' // 随机图片验证码 | |||
}, | |||
rules: { | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'blur', | |||
message: '请先输手机号' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = [] | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let phone = /^1[35789]\d{9}$/ | |||
if (value && !phone.test(value)) { | |||
callback('抱歉,请输入正确的手机号') | |||
} | |||
callback(errors) | |||
} | |||
} | |||
] | |||
}, | |||
// 账号密码登录 | |||
formII: { | |||
phone: '', | |||
pwd: '', | |||
code: '' | |||
}, | |||
rulesII: { | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'blur', | |||
message: '请先输手机号' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = [] | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let phone = /^1[35789]\d{9}$/ | |||
if (value && !phone.test(value)) { | |||
callback('抱歉,请输入正确的手机号') | |||
} | |||
callback(errors) | |||
} | |||
} | |||
] | |||
}, | |||
// 短信登录 | |||
// 忘记密码 | |||
// 重设密码 | |||
// 注册 | |||
// 邀请码 | |||
formIII: { | |||
inviteCode: '' | |||
} | |||
} | |||
}, | |||
watch: { | |||
// type值改变,清空除手机号的其他值 | |||
loginType() { | |||
this.form = { | |||
phone: this.form.phone, // 手机号 | |||
password: '', // 密码 | |||
newPassword1: '', // 新密码1 | |||
newPassword2: '', // 新密码2 | |||
phoneCode: '', // | |||
code: '', // 短信验证码 | |||
code1: '', // 忘记密码的短信验证码 | |||
yzCode: '' // 随机图片验证码 | |||
} | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters | |||
}) | |||
}, | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
// 发送短信验证码 | |||
triggerCountdown() { | |||
//调用接口 | |||
this.getCode() | |||
// 切换文字 | |||
this.countdownState = !this.countdownState | |||
// 定时器 | |||
let intervalBtn = setInterval(() => { | |||
// 倒数自减 | |||
this.countNum-- | |||
if (this.countNum < 0) { | |||
// 清除定时器 | |||
clearInterval(intervalBtn) | |||
// 更改状态 | |||
this.countdownState = !this.countdownState | |||
// 重置倒计时状态 | |||
this.countNum = 60 | |||
} | |||
// 倒计时 | |||
}, 1000) | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
}, | |||
// 跳过填写邀请码 | |||
skip() { | |||
this.$router.push('/myPage') | |||
}, | |||
// 获取手机短信验证码 | |||
getCode() { | |||
if (this.codeInfo != '获取验证码') { | |||
Toast.fail('请求过于频繁,请稍后再试') | |||
return | |||
} | |||
const phoneValue = this.form.phone | |||
// 将手机号置入本地存储 | |||
localStorage.setItem('phoneValue', phoneValue) | |||
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ | |||
let phoneValide = phoneReg.test(phoneValue) | |||
if (!phoneValide) { | |||
Toast.fail('请输入正确的手机号!') | |||
} else { | |||
this.getPhoneCode(phoneValue) | |||
} | |||
}, | |||
// 获取随机验证码图片 | |||
async getCodeImg() { | |||
this.showCodeImg = false | |||
await this.$axios({ | |||
method: 'get', | |||
url: doCodeImg | |||
}).then((res) => { | |||
this.codeImg = doCodeImg | |||
}) | |||
this.showCodeImg = true | |||
}, | |||
// 点击登录 | |||
loginByPhoneCode() { | |||
// 密码登录 | |||
if (this.loginType == 1) { | |||
const data = { | |||
phone: this.form.phone, | |||
password: this.form.password, | |||
code: this.form.yzCode | |||
} | |||
this.LoginByPhone(data) | |||
return | |||
} | |||
// 手机验证码登录 | |||
if (this.loginType == 2) { | |||
const data = { | |||
phone: this.form.phone, | |||
code: this.form.code | |||
} | |||
this.LoginByPhone(data) | |||
return | |||
} | |||
// 忘记密码第一步 | |||
if (this.loginType == 3) { | |||
const data = { | |||
phone: this.form.phone, | |||
code: this.form.yzCode | |||
} | |||
this.sendPhoneCode(data) | |||
return | |||
} | |||
// 忘记密码之新密码 | |||
if (this.loginType == 4) { | |||
const data = { | |||
phone: this.form.phone, | |||
code: this.form.code1, | |||
pwd: this.form.newPassword1 | |||
} | |||
this.updPass(data) | |||
return | |||
} | |||
// 注册 | |||
if (this.loginType == 5) { | |||
if (this.form.newPassword1 != this.form.newPassword2) { | |||
Toast('两次输入密码不一致') | |||
return | |||
} | |||
const data = { | |||
phone: this.form.phone, | |||
password: this.form.newPassword1 | |||
} | |||
this.registerByPhone(data) | |||
return | |||
} | |||
}, | |||
// 注册 | |||
async registerByPhone(data) { | |||
try { | |||
const res = await doRegisterByPhone(data) | |||
console.log(res) | |||
this.loginType = 1 | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
// 忘记密码第一步,根据图片验证码和手机号获取短信 | |||
async sendPhoneCode(data) { | |||
try { | |||
const res = await doSendPhoneCode(data) | |||
console.log(res) | |||
this.loginType = 4 | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
// 忘记密码第二部,提交验证码和新密码 | |||
async updPass(data) { | |||
try { | |||
const res = await doUpdPass(data) | |||
console.log(res) | |||
this.loginType = 1 | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
// 提交邀请码 | |||
submitInviteCode() { | |||
const data = { | |||
inviteCode: this.formIII.inviteCode | |||
} | |||
this.updateInviteCode(data) | |||
}, | |||
/** | |||
* @description:获取手机验证码 | |||
*/ | |||
async getPhoneCode(phone) { | |||
try { | |||
const res = await getCodeByPhone(phone) | |||
Toast.success('短信验证码发送成功!') | |||
this.codeInfo = 60 | |||
const timer = setInterval(() => { | |||
if (this.codeInfo != 1) { | |||
this.codeInfo-- | |||
} else { | |||
clearInterval(timer) | |||
this.codeInfo = '获取验证码' | |||
} | |||
}, 1000) | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
/** | |||
* @description:短信验证码登录 | |||
*/ | |||
async LoginByPhone(loginParams) { | |||
try { | |||
//密码登录 | |||
if (this.loginType == 1) { | |||
const res = await doLogin(loginParams) | |||
console.log(res) | |||
} | |||
// 短信登录 | |||
if (this.loginType == 2) { | |||
const res = await doLoginByPhone(loginParams) | |||
} | |||
console.log(res, '登录数据') | |||
const token = res.data.token | |||
// 将token置入本地存储 | |||
localStorage.setItem('AccessToken', token) | |||
// 查询有无邀请码 | |||
this.checkInviteCode() | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
/** | |||
* @description:查询用户邀请码状态 | |||
*/ | |||
async checkInviteCode() { | |||
try { | |||
const res = await doFindInviteCode() | |||
console.log(res, '查询用户邀请码数据') | |||
const status = res.data.status | |||
// 当没有邀请码时,切换输入验证码页面 | |||
if (status == 0) { | |||
this.loginType = 3 | |||
// 有邀请码直接前往我的页面 | |||
} else if (status == 1) { | |||
Toast.success('登录成功!') | |||
this.$router.push('/myPage') | |||
} | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
/** | |||
* @description:查询用户邀请码状态 | |||
*/ | |||
async checkInviteCode() { | |||
this.src = '/api/captcha.jpg?t=' + Date() | |||
}, | |||
/** | |||
* @description:更新邀请码 | |||
*/ | |||
async updateInviteCode(inviteCodeData) { | |||
try { | |||
const res = await doUpdateInviteCode(inviteCodeData) | |||
console.log(res, '更新邀请码数据') | |||
Toast.success('登录成功!') | |||
this.$router.push('/myPage') | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
} | |||
}, | |||
created() { | |||
// 手机号记忆回填 | |||
const phoneValue = localStorage.getItem('phoneValue') | |||
this.form.phone = phoneValue ? phoneValue : '' | |||
this.getCodeImg() | |||
}, | |||
mounted() { | |||
this.inPage = true | |||
scrollToID('top') | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.shuaxin { | |||
margin-left: 10px; | |||
font-size: 25px; | |||
line-height: 40px; | |||
color: rgb(96, 208, 201); | |||
} | |||
.yzmImg { | |||
margin-left: 10px; | |||
height: 40px; | |||
width: 100%; | |||
} | |||
.greenColor { | |||
color: #5ed5c8; | |||
} | |||
.page { | |||
opacity: 0; | |||
transition: all 0.5s; // global-transition | |||
&.active { | |||
opacity: 1; | |||
} | |||
.logoBox { | |||
// margin-top: 10px; | |||
margin-left: 5px; | |||
margin-top: 25px; | |||
margin-bottom: 25px; | |||
overflow: hidden; | |||
cursor: pointer; | |||
text-align: center; | |||
.logo { | |||
width: 240px; | |||
height: 70px; | |||
} | |||
} | |||
.loginBox { | |||
height: 500px; | |||
// background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||
margin: auto; | |||
text-align: center; | |||
padding-left: 30px; | |||
padding-right: 30px; | |||
.welcome { | |||
font-size: 18px; | |||
color: #000; | |||
font-weight: 600; | |||
margin-bottom: 40px; | |||
} | |||
.inBoxEnd { | |||
display: flex; | |||
justify-content: end !important; | |||
} | |||
.phone { | |||
position: relative; | |||
margin-bottom: 25px; | |||
.getCode { | |||
position: absolute; | |||
top: 1px; | |||
right: 10px; | |||
color: #0068b7; | |||
} | |||
} | |||
.code { | |||
position: relative; | |||
.inputCode { | |||
position: absolute; | |||
background-color: #fff; | |||
top: -5px; | |||
left: 12px; | |||
font-size: 12px; | |||
height: 10px; | |||
line-height: 10px; | |||
color: #0068b7; | |||
} | |||
} | |||
.morePage { | |||
display: flex; | |||
justify-content: space-between; | |||
margin-top: -9px; | |||
} | |||
.submitBtn { | |||
position: relative; | |||
// right: 10px; | |||
// float: right; | |||
color: #fff; | |||
font-size: 15px; | |||
line-height: 15px; | |||
border: none; | |||
margin-top: 25px; | |||
// margin-bottom: 7.5px; | |||
padding: 9px; | |||
background-color: #0068b7; | |||
border-radius: 5px; | |||
background-image: linear-gradient( | |||
316deg, | |||
rgba(110, 228, 215, 1) 0, | |||
rgba(55, 196, 241, 1) 31.975823%, | |||
rgba(164, 154, 252, 1) 100% | |||
); | |||
border-radius: 25px; | |||
width: 315px; | |||
height: 50px; | |||
// padding: 12px 138px 12px 138px; | |||
&.inside { | |||
top: 10px; | |||
} | |||
} | |||
.skipBtn { | |||
position: relative; | |||
top: 10px; | |||
left: 70px; | |||
right: 10px; | |||
width: 78px; | |||
height: 30px; | |||
color: #fff; | |||
font-size: 15px; | |||
line-height: 15px; | |||
border: none; | |||
padding: 9px; | |||
background-color: #0068b7; | |||
border-radius: 3px; | |||
margin-top: 160px; | |||
&.skip { | |||
background-color: #a0a0a0; | |||
} | |||
} | |||
.forgetPwd { | |||
position: relative; | |||
top: -10px; | |||
float: left; | |||
font-size: 12px; | |||
color: #0068b7; | |||
} | |||
} | |||
} | |||
::v-deep .el-input__inner { | |||
height: 42px; | |||
border: 0px; | |||
background-color: #f6f6f6; | |||
} | |||
::v-deep .el-form-item { | |||
margin-bottom: 25px; | |||
} | |||
</style> |
@@ -37,10 +37,10 @@ | |||
</el-col> | |||
<el-col :span="9"> | |||
<!-- <div class="yzmImg" v-html="codeImg"></div> --> | |||
<img class="yzmImg" :src="codeImg" alt="" /> | |||
<img v-if="showCodeImg" class="yzmImg" :src="codeImg" alt="" /> | |||
</el-col> | |||
<el-col :span="2"> | |||
<i class="el-icon-refresh-right shuaxin"></i> | |||
<i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | |||
</el-col> | |||
</el-form-item> | |||
<!-- 短信登录和忘记密码 --> | |||
@@ -132,6 +132,13 @@ | |||
placeholder="请输入验证码" | |||
></el-input> | |||
</el-col> | |||
<el-col :span="9"> | |||
<!-- <div class="yzmImg" v-html="codeImg"></div> --> | |||
<img class="yzmImg" :src="codeImg" alt="" /> | |||
</el-col> | |||
<el-col :span="2"> | |||
<i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | |||
</el-col> | |||
</el-form-item> | |||
<div class="morePage greenColor"> | |||
<span @click="loginType = 1">账户登录</span> | |||
@@ -232,6 +239,28 @@ | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<!-- 邀请码 loginType=6 --> | |||
<div class="loginBox" v-if="loginType == 6"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<!-- 短信验证码 --> | |||
<el-form-item class="phone" prop="inviteCode"> | |||
<el-input | |||
v-model="form.inviteCode" | |||
placeholder="请输入您的邀请码" | |||
></el-input> | |||
</el-form-item> | |||
<div class="morePage greenColor"> | |||
<span @click="loginType = 1">账户登录</span> | |||
</div> | |||
<!-- 注册 --> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="submitInviteCode" | |||
>确定</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<!-- 弹出层 --> | |||
<van-popup v-model="showDialog">内容</van-popup> | |||
</div> | |||
@@ -255,7 +284,7 @@ import { | |||
getCaptcha, | |||
doFindInviteCode, | |||
doUpdateInviteCode, | |||
codeImg | |||
doCodeImg | |||
} from '../../api/login' | |||
Vue.use(Toast) | |||
@@ -268,7 +297,8 @@ export default { | |||
codeInfo: '获取验证码', | |||
inPage: false, | |||
codeImg: '', //随机验证码图片 | |||
loginType: 1, //显示页面字符 | |||
loginType: 6, //显示页面字符 | |||
showCodeImg: true, // 控制验证码的刷新 | |||
// 短信验证码登录 | |||
form: { | |||
phone: '', // 手机号 | |||
@@ -278,7 +308,8 @@ export default { | |||
phoneCode: '', // | |||
code: '', // 短信验证码 | |||
code1: '', // 忘记密码的短信验证码 | |||
yzCode: '' // 随机图片验证码 | |||
yzCode: '', // 随机图片验证码 | |||
inviteCode: '' //邀请码 | |||
}, | |||
rules: { | |||
phone: [ | |||
@@ -337,7 +368,22 @@ export default { | |||
} | |||
} | |||
}, | |||
watch: { | |||
// type值改变,清空除手机号的其他值 | |||
loginType() { | |||
this.form = { | |||
phone: this.form.phone, // 手机号 | |||
password: '', // 密码 | |||
newPassword1: '', // 新密码1 | |||
newPassword2: '', // 新密码2 | |||
phoneCode: '', // | |||
code: '', // 短信验证码 | |||
code1: '', // 忘记密码的短信验证码 | |||
yzCode: '', // 随机图片验证码 | |||
inviteCode: '' | |||
} | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters | |||
@@ -395,8 +441,15 @@ export default { | |||
} | |||
}, | |||
// 获取随机验证码图片 | |||
getCodeImg() { | |||
this.codeImg = codeImg | |||
async getCodeImg() { | |||
this.showCodeImg = false | |||
await this.$axios({ | |||
method: 'get', | |||
url: doCodeImg | |||
}).then((res) => { | |||
this.codeImg = doCodeImg | |||
}) | |||
this.showCodeImg = true | |||
}, | |||
// 点击登录 | |||
@@ -406,7 +459,7 @@ export default { | |||
const data = { | |||
phone: this.form.phone, | |||
password: this.form.password, | |||
yzCode: this.form.yzCode | |||
code: this.form.yzCode | |||
} | |||
this.LoginByPhone(data) | |||
return | |||
@@ -420,6 +473,7 @@ export default { | |||
this.LoginByPhone(data) | |||
return | |||
} | |||
// 忘记密码第一步 | |||
if (this.loginType == 3) { | |||
const data = { | |||
phone: this.form.phone, | |||
@@ -428,6 +482,7 @@ export default { | |||
this.sendPhoneCode(data) | |||
return | |||
} | |||
// 忘记密码之新密码 | |||
if (this.loginType == 4) { | |||
const data = { | |||
phone: this.form.phone, | |||
@@ -437,16 +492,31 @@ export default { | |||
this.updPass(data) | |||
return | |||
} | |||
// 注册 | |||
if (this.loginType == 5) { | |||
if (this.form.newPassword1 != this.form.newPassword2) { | |||
Toast('两次输入密码不一致') | |||
return | |||
} | |||
const data = { | |||
phone: this.form.phone, | |||
newPassword1: this.form.newPassword1, | |||
newPassword2: this.form.newPassword2 | |||
password: this.form.newPassword1 | |||
} | |||
this.LoginByPhone(data) | |||
this.registerByPhone(data) | |||
return | |||
} | |||
}, | |||
// 注册 | |||
async registerByPhone(data) { | |||
try { | |||
const res = await doRegisterByPhone(data) | |||
console.log(res) | |||
this.loginType = 1 | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
// 忘记密码第一步,根据图片验证码和手机号获取短信 | |||
async sendPhoneCode(data) { | |||
try { | |||
@@ -472,7 +542,7 @@ export default { | |||
// 提交邀请码 | |||
submitInviteCode() { | |||
const data = { | |||
inviteCode: this.formIII.inviteCode | |||
inviteCode: this.form.inviteCode | |||
} | |||
this.updateInviteCode(data) | |||
}, | |||
@@ -504,17 +574,26 @@ export default { | |||
*/ | |||
async LoginByPhone(loginParams) { | |||
try { | |||
//密码登录 | |||
if (this.loginType == 1) { | |||
const res = await doLogin(loginParams) | |||
console.log(res.data.token, '登录数据') | |||
const token = res.data.token | |||
// 将token置入本地存储 | |||
localStorage.setItem('AccessToken', token) | |||
// 查询有无邀请码 | |||
this.checkInviteCode() | |||
} | |||
// 短信登录 | |||
if (this.loginType == 2) { | |||
const res = await doLoginByPhone(loginParams) | |||
console.log(res, '登录数据') | |||
const token = res.data.token | |||
// 将token置入本地存储 | |||
localStorage.setItem('AccessToken', token) | |||
// 查询有无邀请码 | |||
this.checkInviteCode() | |||
} | |||
console.log(res, '登录数据') | |||
const token = res.data.token | |||
// 将token置入本地存储 | |||
localStorage.setItem('AccessToken', token) | |||
this.checkInviteCode() | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
@@ -527,11 +606,11 @@ export default { | |||
async checkInviteCode() { | |||
try { | |||
const res = await doFindInviteCode() | |||
console.log(res, '查询用户邀请码数据') | |||
// console.log(res, '查询用户邀请码数据') | |||
const status = res.data.status | |||
// 当没有邀请码时,切换输入验证码页面 | |||
if (status == 0) { | |||
this.loginType = 3 | |||
this.loginType = 6 | |||
// 有邀请码直接前往我的页面 | |||
} else if (status == 1) { | |||
Toast.success('登录成功!') | |||
@@ -545,9 +624,9 @@ export default { | |||
/** | |||
* @description:查询用户邀请码状态 | |||
*/ | |||
async checkInviteCode() { | |||
this.src = '/api/captcha.jpg?t=' + Date() | |||
}, | |||
// async checkInviteCode1() { | |||
// this.src = '/api/captcha.jpg?t=' + Date() | |||
// }, | |||
/** | |||
* @description:更新邀请码 | |||
*/ | |||
@@ -136,6 +136,7 @@ | |||
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> | |||
</div> | |||
</div> | |||
<!-- 主要内容 --> | |||
<div class="tabSheet-content"> | |||
<!-- tab栏 --> | |||
@@ -209,8 +210,8 @@ | |||
</div> | |||
</div> | |||
<!-- 展示 --> | |||
<div v-if="bjLibrary.length == 0">暂无数据</div> | |||
<div v-if="bjLibrary.length != 0" class="myTab-show"> | |||
<div v-if="!bjLibrary.length == 0">暂无数据</div> | |||
<div v-if="!bjLibrary.length != 0" class="myTab-show"> | |||
<div class="myTab-show-title">图片<i></i></div> | |||
<div class="myTab-show-list"> | |||
<!-- 上传 --> | |||
@@ -314,7 +315,7 @@ | |||
</van-action-sheet> | |||
<!-- 试听的mp3 --> | |||
<!-- <audio :src="audioUrl"></audio> --> | |||
<audio autoplay :src="audioUrl"></audio> | |||
</div> | |||
</template> | |||
@@ -337,6 +338,7 @@ import { | |||
doFindInviteCode, | |||
saveOrUpdateUserVideo | |||
} from '@/api/generateVideo' | |||
import { videoDetial } from '@/api/editModel' | |||
import { getModelDetailById } from '../../api/getPaper.js' | |||
Vue.use(Toast) | |||
@@ -346,13 +348,14 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
audioUrl: null, // 声音试听 | |||
inPage: false, | |||
imgUrl: null, | |||
modelId: null, | |||
mouldSmId: null, | |||
saveID: null, // 作品id | |||
inputTitle: '', | |||
textareaContent: 'qweqwe', // 输入框内容 | |||
textareaContent: '', // 输入框内容 | |||
bottomTabActive: 2, // 底部导航高亮 | |||
showSubtitle: false, // 是否展示字幕 | |||
showSynthesisDialog: false, //合成进度条窗口显示隐藏 | |||
@@ -415,10 +418,13 @@ export default { | |||
} | |||
}, | |||
// 点击声音列表中的某一项 | |||
clickSoundItem(index, item) { | |||
async clickSoundItem(index, item) { | |||
if (this.soundItemListAction != index) { | |||
this.soundItemListAction = index | |||
this.soundChoose = item | |||
// 得到试听文件 | |||
const res = await videoDetial(item.exampleVideoId) | |||
this.audioUrl = res.data.videoUrl | |||
} else { | |||
this.soundItemListAction = -1 | |||
this.soundChoose = {} | |||