@@ -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 获取图形验证码 | * @description 获取图形验证码 | ||||
* @returns data | * @returns data | ||||
*/ | */ | ||||
export const codeImg = | |||||
export const doCodeImg = | |||||
'https://smapitest.malls.iformall.com/C/api/user/captcha.jpg' | '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 { | } else { | ||||
Toast.fail(error.message) | |||||
return Promise.reject(response.data) | return Promise.reject(response.data) | ||||
} | } | ||||
} else { | } 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> | ||||
<el-col :span="9"> | <el-col :span="9"> | ||||
<!-- <div class="yzmImg" v-html="codeImg"></div> --> | <!-- <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> | ||||
<el-col :span="2"> | <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-col> | ||||
</el-form-item> | </el-form-item> | ||||
<!-- 短信登录和忘记密码 --> | <!-- 短信登录和忘记密码 --> | ||||
@@ -132,6 +132,13 @@ | |||||
placeholder="请输入验证码" | placeholder="请输入验证码" | ||||
></el-input> | ></el-input> | ||||
</el-col> | </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> | </el-form-item> | ||||
<div class="morePage greenColor"> | <div class="morePage greenColor"> | ||||
<span @click="loginType = 1">账户登录</span> | <span @click="loginType = 1">账户登录</span> | ||||
@@ -232,6 +239,28 @@ | |||||
</el-form-item> | </el-form-item> | ||||
</el-form> | </el-form> | ||||
</div> | </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> | <van-popup v-model="showDialog">内容</van-popup> | ||||
</div> | </div> | ||||
@@ -255,7 +284,7 @@ import { | |||||
getCaptcha, | getCaptcha, | ||||
doFindInviteCode, | doFindInviteCode, | ||||
doUpdateInviteCode, | doUpdateInviteCode, | ||||
codeImg | |||||
doCodeImg | |||||
} from '../../api/login' | } from '../../api/login' | ||||
Vue.use(Toast) | Vue.use(Toast) | ||||
@@ -268,7 +297,8 @@ export default { | |||||
codeInfo: '获取验证码', | codeInfo: '获取验证码', | ||||
inPage: false, | inPage: false, | ||||
codeImg: '', //随机验证码图片 | codeImg: '', //随机验证码图片 | ||||
loginType: 1, //显示页面字符 | |||||
loginType: 6, //显示页面字符 | |||||
showCodeImg: true, // 控制验证码的刷新 | |||||
// 短信验证码登录 | // 短信验证码登录 | ||||
form: { | form: { | ||||
phone: '', // 手机号 | phone: '', // 手机号 | ||||
@@ -278,7 +308,8 @@ export default { | |||||
phoneCode: '', // | phoneCode: '', // | ||||
code: '', // 短信验证码 | code: '', // 短信验证码 | ||||
code1: '', // 忘记密码的短信验证码 | code1: '', // 忘记密码的短信验证码 | ||||
yzCode: '' // 随机图片验证码 | |||||
yzCode: '', // 随机图片验证码 | |||||
inviteCode: '' //邀请码 | |||||
}, | }, | ||||
rules: { | rules: { | ||||
phone: [ | 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: { | computed: { | ||||
...mapState({ | ...mapState({ | ||||
characters: (state) => state.publicObj.characters | 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 = { | const data = { | ||||
phone: this.form.phone, | phone: this.form.phone, | ||||
password: this.form.password, | password: this.form.password, | ||||
yzCode: this.form.yzCode | |||||
code: this.form.yzCode | |||||
} | } | ||||
this.LoginByPhone(data) | this.LoginByPhone(data) | ||||
return | return | ||||
@@ -420,6 +473,7 @@ export default { | |||||
this.LoginByPhone(data) | this.LoginByPhone(data) | ||||
return | return | ||||
} | } | ||||
// 忘记密码第一步 | |||||
if (this.loginType == 3) { | if (this.loginType == 3) { | ||||
const data = { | const data = { | ||||
phone: this.form.phone, | phone: this.form.phone, | ||||
@@ -428,6 +482,7 @@ export default { | |||||
this.sendPhoneCode(data) | this.sendPhoneCode(data) | ||||
return | return | ||||
} | } | ||||
// 忘记密码之新密码 | |||||
if (this.loginType == 4) { | if (this.loginType == 4) { | ||||
const data = { | const data = { | ||||
phone: this.form.phone, | phone: this.form.phone, | ||||
@@ -437,16 +492,31 @@ export default { | |||||
this.updPass(data) | this.updPass(data) | ||||
return | return | ||||
} | } | ||||
// 注册 | |||||
if (this.loginType == 5) { | if (this.loginType == 5) { | ||||
if (this.form.newPassword1 != this.form.newPassword2) { | |||||
Toast('两次输入密码不一致') | |||||
return | |||||
} | |||||
const data = { | const data = { | ||||
phone: this.form.phone, | phone: this.form.phone, | ||||
newPassword1: this.form.newPassword1, | |||||
newPassword2: this.form.newPassword2 | |||||
password: this.form.newPassword1 | |||||
} | } | ||||
this.LoginByPhone(data) | |||||
this.registerByPhone(data) | |||||
return | 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) { | async sendPhoneCode(data) { | ||||
try { | try { | ||||
@@ -472,7 +542,7 @@ export default { | |||||
// 提交邀请码 | // 提交邀请码 | ||||
submitInviteCode() { | submitInviteCode() { | ||||
const data = { | const data = { | ||||
inviteCode: this.formIII.inviteCode | |||||
inviteCode: this.form.inviteCode | |||||
} | } | ||||
this.updateInviteCode(data) | this.updateInviteCode(data) | ||||
}, | }, | ||||
@@ -504,17 +574,26 @@ export default { | |||||
*/ | */ | ||||
async LoginByPhone(loginParams) { | async LoginByPhone(loginParams) { | ||||
try { | try { | ||||
//密码登录 | |||||
if (this.loginType == 1) { | if (this.loginType == 1) { | ||||
const res = await doLogin(loginParams) | 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) { | if (this.loginType == 2) { | ||||
const res = await doLoginByPhone(loginParams) | 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) { | } catch (error) { | ||||
console.log(error, 'error') | console.log(error, 'error') | ||||
Toast.fail(error.message) | Toast.fail(error.message) | ||||
@@ -527,11 +606,11 @@ export default { | |||||
async checkInviteCode() { | async checkInviteCode() { | ||||
try { | try { | ||||
const res = await doFindInviteCode() | const res = await doFindInviteCode() | ||||
console.log(res, '查询用户邀请码数据') | |||||
// console.log(res, '查询用户邀请码数据') | |||||
const status = res.data.status | const status = res.data.status | ||||
// 当没有邀请码时,切换输入验证码页面 | // 当没有邀请码时,切换输入验证码页面 | ||||
if (status == 0) { | if (status == 0) { | ||||
this.loginType = 3 | |||||
this.loginType = 6 | |||||
// 有邀请码直接前往我的页面 | // 有邀请码直接前往我的页面 | ||||
} else if (status == 1) { | } else if (status == 1) { | ||||
Toast.success('登录成功!') | Toast.success('登录成功!') | ||||
@@ -545,9 +624,9 @@ export default { | |||||
/** | /** | ||||
* @description:查询用户邀请码状态 | * @description:查询用户邀请码状态 | ||||
*/ | */ | ||||
async checkInviteCode() { | |||||
this.src = '/api/captcha.jpg?t=' + Date() | |||||
}, | |||||
// async checkInviteCode1() { | |||||
// this.src = '/api/captcha.jpg?t=' + Date() | |||||
// }, | |||||
/** | /** | ||||
* @description:更新邀请码 | * @description:更新邀请码 | ||||
*/ | */ | ||||
@@ -136,6 +136,7 @@ | |||||
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> | <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 主要内容 --> | <!-- 主要内容 --> | ||||
<div class="tabSheet-content"> | <div class="tabSheet-content"> | ||||
<!-- tab栏 --> | <!-- tab栏 --> | ||||
@@ -209,8 +210,8 @@ | |||||
</div> | </div> | ||||
</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-title">图片<i></i></div> | ||||
<div class="myTab-show-list"> | <div class="myTab-show-list"> | ||||
<!-- 上传 --> | <!-- 上传 --> | ||||
@@ -314,7 +315,7 @@ | |||||
</van-action-sheet> | </van-action-sheet> | ||||
<!-- 试听的mp3 --> | <!-- 试听的mp3 --> | ||||
<!-- <audio :src="audioUrl"></audio> --> | |||||
<audio autoplay :src="audioUrl"></audio> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -337,6 +338,7 @@ import { | |||||
doFindInviteCode, | doFindInviteCode, | ||||
saveOrUpdateUserVideo | saveOrUpdateUserVideo | ||||
} from '@/api/generateVideo' | } from '@/api/generateVideo' | ||||
import { videoDetial } from '@/api/editModel' | |||||
import { getModelDetailById } from '../../api/getPaper.js' | import { getModelDetailById } from '../../api/getPaper.js' | ||||
Vue.use(Toast) | Vue.use(Toast) | ||||
@@ -346,13 +348,14 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
audioUrl: null, // 声音试听 | |||||
inPage: false, | inPage: false, | ||||
imgUrl: null, | imgUrl: null, | ||||
modelId: null, | modelId: null, | ||||
mouldSmId: null, | mouldSmId: null, | ||||
saveID: null, // 作品id | saveID: null, // 作品id | ||||
inputTitle: '', | inputTitle: '', | ||||
textareaContent: 'qweqwe', // 输入框内容 | |||||
textareaContent: '', // 输入框内容 | |||||
bottomTabActive: 2, // 底部导航高亮 | bottomTabActive: 2, // 底部导航高亮 | ||||
showSubtitle: false, // 是否展示字幕 | showSubtitle: false, // 是否展示字幕 | ||||
showSynthesisDialog: false, //合成进度条窗口显示隐藏 | showSynthesisDialog: false, //合成进度条窗口显示隐藏 | ||||
@@ -415,10 +418,13 @@ export default { | |||||
} | } | ||||
}, | }, | ||||
// 点击声音列表中的某一项 | // 点击声音列表中的某一项 | ||||
clickSoundItem(index, item) { | |||||
async clickSoundItem(index, item) { | |||||
if (this.soundItemListAction != index) { | if (this.soundItemListAction != index) { | ||||
this.soundItemListAction = index | this.soundItemListAction = index | ||||
this.soundChoose = item | this.soundChoose = item | ||||
// 得到试听文件 | |||||
const res = await videoDetial(item.exampleVideoId) | |||||
this.audioUrl = res.data.videoUrl | |||||
} else { | } else { | ||||
this.soundItemListAction = -1 | this.soundItemListAction = -1 | ||||
this.soundChoose = {} | this.soundChoose = {} | ||||