Pārlūkot izejas kodu

登录注册和音频试听功能

master
congzc pirms 1 gada
vecāks
revīzija
262a2bed77
8 mainītis faili ar 1168 papildinājumiem un 30 dzēšanām
  1. +21
    -0
      src/api/editModel.js
  2. +1
    -1
      src/api/login.js
  3. +259
    -0
      src/components/CutImg.vue
  4. +1
    -1
      src/utils/request.js
  5. +773
    -0
      src/views/login/login copy 2.vue
  6. +0
    -0
      src/views/login/login copy-old.vue
  7. +102
    -23
      src/views/login/login.vue
  8. +11
    -5
      src/views/model/editModel.vue

+ 21
- 0
src/api/editModel.js Parādīt failu

@@ -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
})
}

+ 1
- 1
src/api/login.js Parādīt failu

@@ -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'

+ 259
- 0
src/components/CutImg.vue Parādīt failu

@@ -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>

+ 1
- 1
src/utils/request.js Parādīt failu

@@ -52,7 +52,7 @@ request.interceptors.response.use(

// 其他错误
} else {
Toast.fail(error.message)
return Promise.reject(response.data)
}
} else {


+ 773
- 0
src/views/login/login copy 2.vue Parādīt failu

@@ -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>

src/views/login/login copy.vue → src/views/login/login copy-old.vue Parādīt failu


+ 102
- 23
src/views/login/login.vue Parādīt failu

@@ -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:更新邀请码
*/


+ 11
- 5
src/views/model/editModel.vue Parādīt failu

@@ -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 = {}


Notiek ielāde…
Atcelt
Saglabāt