@@ -4,9 +4,16 @@ | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
<meta http-equiv="pragram" content="no-cache"> | |||
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> | |||
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | |||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||
<!-- <link rel="icon" href="/favicon.ico" type="image/x-icon" /> | |||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> --> | |||
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css"> | |||
<script src="http://g.alicdn.com/de/prismplayer/{version}/aliplayer-h5-min.js"></script> | |||
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js"> | |||
@@ -1,281 +0,0 @@ | |||
<template> | |||
<div class="uploder"> | |||
<div class="change-photo-setter"> | |||
<van-uploader class="sett-item" :before-read="beforeRead"> | |||
<div style="height: 100%"><img :src="ImgUrl" alt="" /></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="onClickRight" | |||
/> | |||
</div> | |||
</van-popup> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { awsImgUpload } from '@/api/editModel' | |||
import { Toast } from 'vant' | |||
import { VueCropper } from 'vue-cropper' | |||
export default { | |||
name: 'uploadAva', | |||
components: { | |||
VueCropper | |||
}, | |||
props: { | |||
showAta: { | |||
default: false, | |||
type: Boolean | |||
}, | |||
avaUrl: { | |||
default: '', | |||
type: String | |||
} | |||
}, | |||
data() { | |||
return { | |||
ImgUrl: '', | |||
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) { | |||
console.log(file) | |||
if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||
this.$toast('请上传 jpg/png 格式图片') | |||
return false | |||
} | |||
let data = window.URL.createObjectURL(new Blob([file])) | |||
this.option.img = data //给裁剪图片的路径 | |||
this.showCropper = true | |||
return false | |||
}, | |||
// 点击裁剪的选择 | |||
onClickRight() { | |||
let that = this | |||
this.loadingShow = true | |||
this.$refs.cropper.getCropBlob(async (data) => { | |||
let formData = new FormData() | |||
formData.append('file', data) | |||
let file = formData.get('file') | |||
// 转为 base64 | |||
let reader = new FileReader() | |||
reader.onload = async () => { | |||
// base64结果 | |||
that.ImgUrl = this.result | |||
that.loading = false | |||
} | |||
reader.readAsDataURL(file) | |||
// await that.toBase64(file) | |||
console.log(that.ImgUrl, 'dasdasd') | |||
// 发请求 | |||
const AccessToken = localStorage.getItem('AccessToken') | |||
that | |||
.$axios({ | |||
method: 'post', | |||
// url: `https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload`, | |||
url: `http://m.metavatar.cc/C/api/upload/awsImgUpload`, | |||
headers: { | |||
// 'Content-Type': 'application/json;charset=UTF-8', | |||
'content-type': 'multipart/form-data', | |||
token: AccessToken, | |||
'Access-Control-Allow-Credentials': true | |||
}, | |||
data: { file: that.base64ToBinary(that.ImgUrl) } | |||
}) | |||
.then((res) => { | |||
console.log(res) | |||
console.log(that.ImgUrl) | |||
console.log(that.base64ToBinary(that.ImgUrl)) | |||
that.loadingShow = false | |||
that.showCropper = false | |||
Toast.success('上传成功') | |||
}) | |||
}) | |||
}, | |||
// 点击取消 | |||
onClickLeft() { | |||
this.loadingShow = false | |||
this.showCropper = false | |||
this.$parent.showPhotoUploader = false | |||
}, | |||
// 上传图片 | |||
async pushImg(data) { | |||
try { | |||
const res = await awsImgUpload(data) | |||
this.loadingShow = false | |||
this.showCropper = false | |||
Toast.success('上传成功') | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
//图片转base64,异步 | |||
toBase64(file) { | |||
let that = this | |||
return new Promise((resolve, reject) => { | |||
const reader = new FileReader() | |||
reader.onload = () => { | |||
// base64结果 | |||
that.ImgUrl = this.result | |||
that.loading = false | |||
} | |||
reader.onerror = reject | |||
reader.readAsDataURL(file) | |||
}) | |||
}, | |||
// base64 转二进制 | |||
base64ToBinary(base64) { | |||
console.log(base64) | |||
const binaryString = window.atob(base64) | |||
const binaryLength = binaryString.length | |||
const bytes = new Uint8Array(binaryLength) | |||
for (let i = 0; i < binaryLength; i++) { | |||
bytes[i] = binaryString.charCodeAt(i) | |||
} | |||
return bytes | |||
} | |||
} | |||
} | |||
</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; | |||
} | |||
.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,272 +0,0 @@ | |||
<template> | |||
<div class="uploder"> | |||
<div class="change-photo-setter"> | |||
<van-uploader class="sett-item" :before-read="beforeRead"> | |||
<div style="height: 100%"><img :src="ImgUrl" alt="" /></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="onClickRight" | |||
/> | |||
</div> | |||
</van-popup> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { awsImgUpload } from '@/api/editModel' | |||
import { Toast } from 'vant' | |||
import { VueCropper } from 'vue-cropper' | |||
export default { | |||
name: 'uploadAva', | |||
components: { | |||
VueCropper | |||
}, | |||
props: { | |||
showAta: { | |||
default: false, | |||
type: Boolean | |||
}, | |||
avaUrl: { | |||
default: '', | |||
type: String | |||
} | |||
}, | |||
data() { | |||
return { | |||
ImgUrl: '', | |||
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) { | |||
console.log(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 | |||
} | |||
}, | |||
onClickRight() { | |||
// let formData = new FormData() | |||
this.loadingShow = true | |||
console.log(this.option) | |||
// const AccessToken = localStorage.getItem('AccessToken') | |||
// this.$axios({ | |||
// method: 'post', | |||
// url: `https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload`, | |||
// headers: { | |||
// // 'Content-Type': 'application/json;charset=UTF-8', | |||
// 'content-type': 'multipart/form-data', | |||
// token: AccessToken, | |||
// 'Access-Control-Allow-Credentials': true | |||
// }, | |||
// data: { file: this.option.img } | |||
// }).then((res) => { | |||
// console.log(res) | |||
// this.loadingShow = false | |||
// this.showCropper = false | |||
// Toast.success('上传成功') | |||
// }) | |||
// this.pushImg({ file: this.option.img }) | |||
// this.pushImg({ file: require('../assets/icon/icon-yes.png') }) | |||
// this.$refs.cropper.getCropBlob((data) => { | |||
console.log(this.$refs.cropper) | |||
this.$refs.cropper.getCroppedCanvas((data) => { | |||
this.ImgUrl = data | |||
console.log(data, 'blob') | |||
// let blob = window.URL.createObjectURL(data) | |||
// console.log(blob) | |||
// formData.append('File', data, this.imageFileName) | |||
// formData.append('id', this.$store.getters.user.userId) | |||
// console.log(formData.getAll('File')) | |||
// console.log(data) | |||
// this.pushImg({ file: blob }) | |||
// uploadAva(formData).then((res) => { | |||
// this.showCropper = false | |||
// this.$emit('update:showAta', false) | |||
// this.$emit('update:avaUrl', res.data) | |||
// }) | |||
}) | |||
// this.$refs.cropper.getCroppedCanvas().toBlob((blob) => { | |||
// const formData = new FormData() | |||
// formData.append('file', blob, 'avatar.png') | |||
// this.pushImg({ file: blob }) | |||
// }) | |||
}, | |||
onClickLeft() { | |||
this.loadingShow = false | |||
this.showCropper = false | |||
this.$parent.showPhotoUploader = false | |||
}, | |||
// 上传图片 | |||
async pushImg(data) { | |||
try { | |||
const res = await awsImgUpload(data) | |||
this.loadingShow = false | |||
this.showCropper = false | |||
Toast.success('上传成功') | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
} | |||
} | |||
} | |||
</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; | |||
} | |||
.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> |
@@ -34,6 +34,10 @@ | |||
:fixedBox="option.fixedBox" | |||
:high="option.high" | |||
:mode="option.mode" /> | |||
<!-- <div style="display: flex; justify-content: space-between; padding: 10px; height: 8vh"> | |||
<div @click="onClickLeft">取消</div> | |||
<div @click="onClickRight">确定</div> | |||
</div> --> | |||
<van-nav-bar left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | |||
</div> | |||
</van-popup> | |||
@@ -40,4 +40,16 @@ p { | |||
} | |||
.noScroll { | |||
overflow: hidden; | |||
} | |||
} | |||
.vantLoadingBox { | |||
position: relative; | |||
width: 100%; | |||
} | |||
.vantLoading { | |||
position: absolute; | |||
left: 50%; | |||
top: 50%; | |||
transform: translate(-50%, -50%); | |||
} | |||
@@ -1,773 +0,0 @@ | |||
<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> |
@@ -1,441 +0,0 @@ | |||
<template> | |||
<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> | |||
<!-- 短信验证码登录 --> | |||
<div class="loginBox" v-if="loginType == 1"> | |||
<div class="welcome">登录邃芒</div> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<el-form-item class="phone" prop="phone"> | |||
<el-input class="phoneInput" v-model="form.phone"></el-input> | |||
<div class="inputPhone">请输入您的手机号</div> | |||
<el-button class="getCode" type="text" @click="getCode">{{ | |||
codeInfo | |||
}}</el-button> | |||
</el-form-item> | |||
<el-form-item class="code" prop="code"> | |||
<el-input | |||
class="codeInput" | |||
v-model="form.code" | |||
maxlength="10" | |||
clearable | |||
></el-input> | |||
<div class="inputCode">请输入短信验证码</div> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>登录/注册</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<!-- 用户名密码登录 --> | |||
<div class="loginBox" v-if="loginType == 2"> | |||
<div class="welcome">登录邃芒</div> | |||
<el-form ref="form" :rules="rulesII" :model="formII"> | |||
<el-form-item class="phone" prop="phone"> | |||
<el-input class="phoneInput" v-model="formII.phone"></el-input> | |||
<div class="inputPhone">请输入您的手机号</div> | |||
<!-- <el-button class="getCode" type="text" @click="getCode">{{ | |||
codeInfo | |||
}}</el-button> --> | |||
</el-form-item> | |||
<el-form-item class="code" prop="code"> | |||
<el-input | |||
class="codeInput" | |||
v-model="form.pwd" | |||
maxlength="10" | |||
clearable | |||
></el-input> | |||
<div class="inputCode">请输入密码</div> | |||
</el-form-item> | |||
<el-form-item class="code" prop="code"> | |||
<el-input | |||
class="codeInput" | |||
v-model="form.code" | |||
maxlength="10" | |||
clearable | |||
></el-input> | |||
<div class="inputCode">请输入验证码</div> | |||
</el-form-item> | |||
<span class="forgetPwd">忘记密码?</span> | |||
<el-form-item> | |||
<el-button class="submitBtn inside" @click="loginByPhoneCode" | |||
>登录/注册</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<!-- 用户名密码登录 --> | |||
<div class="loginBox" v-if="loginType == 3"> | |||
<div class="welcome">登录邃芒</div> | |||
<el-form ref="form" :model="formIII"> | |||
<el-form-item class="code" prop="code"> | |||
<el-input | |||
class="codeInput" | |||
v-model="formIII.inviteCode" | |||
maxlength="10" | |||
clearable | |||
></el-input> | |||
<div class="inputCode">请输入您的邀请码</div> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button class="skipBtn skip" @click="skip">跳过</el-button> | |||
<el-button class="skipBtn submit" @click="submitInviteCode" | |||
>确定</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
// 组件 | |||
import Vue from "vue"; | |||
import { Toast } from "vant"; | |||
import { mapState, mapActions } from "vuex"; | |||
// 工具 | |||
import { scrollToID } from "../../utils"; | |||
// 接口 | |||
import { | |||
getCodeByPhone, | |||
doLoginByPhone, | |||
doFindInviteCode, | |||
doUpdateInviteCode, | |||
} from "../../api/login"; | |||
Vue.use(Toast); | |||
export default { | |||
data() { | |||
return { | |||
codeInfo: "获取验证码", | |||
inPage: false, | |||
loginType: 1, | |||
// 短信验证码登录 | |||
form: { | |||
phone: "", | |||
code: "", | |||
}, | |||
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: "", | |||
}, | |||
}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
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); | |||
} | |||
}, | |||
// 手机验证码登录 | |||
loginByPhoneCode() { | |||
const data = { | |||
phone: this.form.phone, | |||
code: this.form.code, | |||
}; | |||
this.LoginByPhone(data); | |||
}, | |||
// 提交邀请码 | |||
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 { | |||
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 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 : ""; | |||
}, | |||
mounted() { | |||
this.inPage = true; | |||
scrollToID("top"); | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
opacity: 0; | |||
transition: all 0.5s; // global-transition | |||
&.active { | |||
opacity: 1; | |||
} | |||
.logoBox { | |||
// margin-top: 10px; | |||
margin-left: 5px; | |||
margin-top: 10px; | |||
margin-bottom: 30px; | |||
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; | |||
} | |||
.phone { | |||
position: relative; | |||
margin-bottom: 25px; | |||
.inputPhone { | |||
position: absolute; | |||
background-color: #fff; | |||
top: -5px; | |||
left: 12px; | |||
font-size: 12px; | |||
height: 10px; | |||
line-height: 10px; | |||
color: #0068b7; | |||
} | |||
.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; | |||
} | |||
} | |||
.submitBtn { | |||
position: relative; | |||
right: 10px; | |||
float: right; | |||
color: #fff; | |||
font-size: 15px; | |||
line-height: 15px; | |||
border: none; | |||
padding: 9px; | |||
background-color: #0068b7; | |||
border-radius: 5px; | |||
&.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: 1px solid #0068b7; | |||
} | |||
</style> |
@@ -12,28 +12,16 @@ | |||
<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-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-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-input v-model="form.yzCode" placeholder="请输入验证码"></el-input> | |||
</el-col> | |||
<el-col :span="9"> | |||
<!-- <div class="yzmImg" v-html="codeImg"></div> --> | |||
@@ -50,9 +38,7 @@ | |||
</div> | |||
<!-- 登录 --> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>登录/注册</el-button | |||
> | |||
<el-button class="submitBtn" @click="loginByPhoneCode">登录/注册</el-button> | |||
</el-form-item> | |||
<!-- 没有账号 --> | |||
<div> | |||
@@ -67,31 +53,13 @@ | |||
<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-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 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> | |||
<!-- 短信登录和忘记密码 --> | |||
@@ -100,9 +68,7 @@ | |||
</div> | |||
<!-- 登录 --> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>登录</el-button | |||
> | |||
<el-button class="submitBtn" @click="loginByPhoneCode">登录</el-button> | |||
</el-form-item> | |||
<!-- 没有账号 --> | |||
<div> | |||
@@ -117,20 +83,12 @@ | |||
<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-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-input maxlength="10" clearable v-model="form.yzCode" placeholder="请输入验证码"></el-input> | |||
</el-col> | |||
<el-col :span="9"> | |||
<!-- <div class="yzmImg" v-html="codeImg"></div> --> | |||
@@ -145,9 +103,7 @@ | |||
</div> | |||
<!-- 登录 --> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>获取短信验证码</el-button | |||
> | |||
<el-button class="submitBtn" @click="loginByPhoneCode">获取短信验证码</el-button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
@@ -157,41 +113,22 @@ | |||
<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-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-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-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-button class="submitBtn" @click="loginByPhoneCode">保存密码</el-button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
@@ -201,41 +138,22 @@ | |||
<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-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-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-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-button class="submitBtn" @click="loginByPhoneCode">注册</el-button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
@@ -245,22 +163,18 @@ | |||
<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-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-button class="submitBtn" @click="submitInviteCode">确定</el-button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<!-- <van-toast v-model="showToast" ref="myToast">请稍后...</van-toast> --> | |||
<!-- 弹出层 --> | |||
<van-popup v-model="showDialog">内容</van-popup> | |||
</div> | |||
@@ -268,29 +182,19 @@ | |||
<script> | |||
// 组件 | |||
import Vue from 'vue' | |||
import { Toast } from 'vant' | |||
import { mapState, mapActions } from 'vuex' | |||
import Vue from 'vue'; | |||
import { Toast } from 'vant'; | |||
import { mapState, mapActions } from 'vuex'; | |||
// 工具 | |||
import { scrollToID } from '../../utils' | |||
import { scrollToID } from '../../utils'; | |||
// 接口 | |||
import { | |||
doLogin, | |||
getCodeByPhone, | |||
doRegisterByPhone, | |||
doLoginByPhone, | |||
doSendPhoneCode, | |||
doUpdPass, | |||
getCaptcha, | |||
doFindInviteCode, | |||
doUpdateInviteCode, | |||
doCodeImg | |||
} from '../../api/login' | |||
import { doLogin, getCodeByPhone, doRegisterByPhone, doLoginByPhone, doSendPhoneCode, doUpdPass, getCaptcha, doFindInviteCode, doUpdateInviteCode, doCodeImg } from '../../api/login'; | |||
Vue.use(Toast) | |||
Vue.use(Toast); | |||
export default { | |||
data() { | |||
return { | |||
showToast: true, | |||
showDialog: false, //弹出层状态 | |||
countNum: 60, // 倒计时 | |||
countdownState: false, //倒计时状态 | |||
@@ -320,13 +224,13 @@ export default { | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = [] | |||
var errors = []; | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let phone = /^1[35789]\d{9}$/ | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('抱歉,请输入正确的手机号') | |||
callback('抱歉,请输入正确的手机号'); | |||
} | |||
callback(errors) | |||
callback(errors); | |||
} | |||
} | |||
] | |||
@@ -346,13 +250,13 @@ export default { | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = [] | |||
var errors = []; | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let phone = /^1[35789]\d{9}$/ | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('抱歉,请输入正确的手机号') | |||
callback('抱歉,请输入正确的手机号'); | |||
} | |||
callback(errors) | |||
callback(errors); | |||
} | |||
} | |||
] | |||
@@ -366,7 +270,7 @@ export default { | |||
formIII: { | |||
inviteCode: '' | |||
} | |||
} | |||
}; | |||
}, | |||
watch: { | |||
// type值改变,清空除手机号的其他值 | |||
@@ -381,12 +285,12 @@ export default { | |||
code1: '', // 忘记密码的短信验证码 | |||
yzCode: '', // 随机图片验证码 | |||
inviteCode: '' | |||
} | |||
}; | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters | |||
characters: state => state.publicObj.characters | |||
}) | |||
}, | |||
@@ -395,61 +299,61 @@ export default { | |||
// 发送短信验证码 | |||
triggerCountdown() { | |||
//调用接口 | |||
this.getCode() | |||
this.getCode(); | |||
// 切换文字 | |||
this.countdownState = !this.countdownState | |||
this.countdownState = !this.countdownState; | |||
// 定时器 | |||
let intervalBtn = setInterval(() => { | |||
// 倒数自减 | |||
this.countNum-- | |||
this.countNum--; | |||
if (this.countNum < 0) { | |||
// 清除定时器 | |||
clearInterval(intervalBtn) | |||
clearInterval(intervalBtn); | |||
// 更改状态 | |||
this.countdownState = !this.countdownState | |||
this.countdownState = !this.countdownState; | |||
// 重置倒计时状态 | |||
this.countNum = 60 | |||
this.countNum = 60; | |||
} | |||
// 倒计时 | |||
}, 1000) | |||
}, 1000); | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
this.$router.push(url); | |||
}, | |||
// 跳过填写邀请码 | |||
skip() { | |||
this.$router.push('/myPage') | |||
this.$router.push('/myPage'); | |||
}, | |||
// 获取手机短信验证码 | |||
getCode() { | |||
if (this.codeInfo != '获取验证码') { | |||
Toast.fail('请求过于频繁,请稍后再试') | |||
return | |||
Toast.fail('请求过于频繁,请稍后再试'); | |||
return; | |||
} | |||
const phoneValue = this.form.phone | |||
const phoneValue = this.form.phone; | |||
// 将手机号置入本地存储 | |||
localStorage.setItem('phoneValue', phoneValue) | |||
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ | |||
let phoneValide = phoneReg.test(phoneValue) | |||
localStorage.setItem('phoneValue', phoneValue); | |||
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; | |||
let phoneValide = phoneReg.test(phoneValue); | |||
if (!phoneValide) { | |||
Toast.fail('请输入正确的手机号!') | |||
Toast.fail('请输入正确的手机号!'); | |||
} else { | |||
this.getPhoneCode(phoneValue) | |||
this.getPhoneCode(phoneValue); | |||
} | |||
}, | |||
// 获取随机验证码图片 | |||
async getCodeImg() { | |||
this.showCodeImg = false | |||
this.showCodeImg = false; | |||
await this.$axios({ | |||
method: 'get', | |||
url: doCodeImg | |||
}).then((res) => { | |||
this.codeImg = doCodeImg | |||
}) | |||
this.showCodeImg = true | |||
}).then(res => { | |||
this.codeImg = doCodeImg; | |||
}); | |||
this.showCodeImg = true; | |||
}, | |||
// 点击登录 | |||
@@ -460,27 +364,27 @@ export default { | |||
phone: this.form.phone, | |||
password: this.form.password, | |||
code: this.form.yzCode | |||
} | |||
this.LoginByPhone(data) | |||
return | |||
}; | |||
this.LoginByPhone(data); | |||
return; | |||
} | |||
// 手机验证码登录 | |||
if (this.loginType == 2) { | |||
const data = { | |||
phone: this.form.phone, | |||
code: this.form.code | |||
} | |||
this.LoginByPhone(data) | |||
return | |||
}; | |||
this.LoginByPhone(data); | |||
return; | |||
} | |||
// 忘记密码第一步 | |||
if (this.loginType == 3) { | |||
const data = { | |||
phone: this.form.phone, | |||
code: this.form.yzCode | |||
} | |||
this.sendPhoneCode(data) | |||
return | |||
}; | |||
this.sendPhoneCode(data); | |||
return; | |||
} | |||
// 忘记密码之新密码 | |||
if (this.loginType == 4) { | |||
@@ -488,64 +392,64 @@ export default { | |||
phone: this.form.phone, | |||
code: this.form.code1, | |||
pwd: this.form.newPassword1 | |||
} | |||
this.updPass(data) | |||
return | |||
}; | |||
this.updPass(data); | |||
return; | |||
} | |||
// 注册 | |||
if (this.loginType == 5) { | |||
if (this.form.newPassword1 != this.form.newPassword2) { | |||
Toast('两次输入密码不一致') | |||
return | |||
Toast('两次输入密码不一致'); | |||
return; | |||
} | |||
const data = { | |||
phone: this.form.phone, | |||
password: this.form.newPassword1 | |||
} | |||
this.registerByPhone(data) | |||
return | |||
}; | |||
this.registerByPhone(data); | |||
return; | |||
} | |||
}, | |||
// 注册 | |||
async registerByPhone(data) { | |||
try { | |||
const res = await doRegisterByPhone(data) | |||
console.log(res) | |||
this.loginType = 1 | |||
const res = await doRegisterByPhone(data); | |||
console.log(res); | |||
this.loginType = 1; | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
// 忘记密码第一步,根据图片验证码和手机号获取短信 | |||
async sendPhoneCode(data) { | |||
try { | |||
const res = await doSendPhoneCode(data) | |||
console.log(res) | |||
this.loginType = 4 | |||
const res = await doSendPhoneCode(data); | |||
console.log(res); | |||
this.loginType = 4; | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
// 忘记密码第二部,提交验证码和新密码 | |||
async updPass(data) { | |||
try { | |||
const res = await doUpdPass(data) | |||
console.log(res) | |||
Toast.success('修改密码成功') | |||
this.loginType = 1 | |||
const res = await doUpdPass(data); | |||
console.log(res); | |||
Toast.success('修改密码成功'); | |||
this.loginType = 1; | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
// 提交邀请码 | |||
submitInviteCode() { | |||
const data = { | |||
inviteCode: this.form.inviteCode | |||
} | |||
this.updateInviteCode(data) | |||
}; | |||
this.updateInviteCode(data); | |||
}, | |||
/** | |||
@@ -553,20 +457,20 @@ export default { | |||
*/ | |||
async getPhoneCode(phone) { | |||
try { | |||
const res = await getCodeByPhone(phone) | |||
Toast.success('短信验证码发送成功!') | |||
this.codeInfo = 60 | |||
const res = await getCodeByPhone(phone); | |||
Toast.success('短信验证码发送成功!'); | |||
this.codeInfo = 60; | |||
const timer = setInterval(() => { | |||
if (this.codeInfo != 1) { | |||
this.codeInfo-- | |||
this.codeInfo--; | |||
} else { | |||
clearInterval(timer) | |||
this.codeInfo = '获取验证码' | |||
clearInterval(timer); | |||
this.codeInfo = '获取验证码'; | |||
} | |||
}, 1000) | |||
}, 1000); | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
@@ -577,27 +481,27 @@ export default { | |||
try { | |||
//密码登录 | |||
if (this.loginType == 1) { | |||
const res = await doLogin(loginParams) | |||
console.log(res.data.token, '登录数据') | |||
const token = res.data.token | |||
const res = await doLogin(loginParams); | |||
console.log(res.data.token, '登录数据'); | |||
const token = res.data.token; | |||
// 将token置入本地存储 | |||
localStorage.setItem('AccessToken', token) | |||
localStorage.setItem('AccessToken', token); | |||
// 查询有无邀请码 | |||
this.checkInviteCode() | |||
this.checkInviteCode(); | |||
} | |||
// 短信登录 | |||
if (this.loginType == 2) { | |||
const res = await doLoginByPhone(loginParams) | |||
console.log(res, '登录数据') | |||
const token = res.data.token | |||
const res = await doLoginByPhone(loginParams); | |||
console.log(res, '登录数据'); | |||
const token = res.data.token; | |||
// 将token置入本地存储 | |||
localStorage.setItem('AccessToken', token) | |||
localStorage.setItem('AccessToken', token); | |||
// 查询有无邀请码 | |||
this.checkInviteCode() | |||
this.checkInviteCode(); | |||
} | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
@@ -606,20 +510,20 @@ export default { | |||
*/ | |||
async checkInviteCode() { | |||
try { | |||
const res = await doFindInviteCode() | |||
const res = await doFindInviteCode(); | |||
// console.log(res, '查询用户邀请码数据') | |||
const status = res.data.status | |||
const status = res.data.status; | |||
// 当没有邀请码时,切换输入验证码页面 | |||
if (status == 0) { | |||
this.loginType = 6 | |||
this.loginType = 6; | |||
// 有邀请码直接前往我的页面 | |||
} else if (status == 1) { | |||
Toast.success('登录成功!') | |||
this.$router.push('/myPage') | |||
Toast.success('登录成功!'); | |||
this.$router.push('/myPage'); | |||
} | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
/** | |||
@@ -633,27 +537,27 @@ export default { | |||
*/ | |||
async updateInviteCode(inviteCodeData) { | |||
try { | |||
const res = await doUpdateInviteCode(inviteCodeData) | |||
console.log(res, '更新邀请码数据') | |||
Toast.success('登录成功!') | |||
this.$router.push('/myPage') | |||
const res = await doUpdateInviteCode(inviteCodeData); | |||
console.log(res, '更新邀请码数据'); | |||
Toast.success('登录成功!'); | |||
this.$router.push('/myPage'); | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
} | |||
}, | |||
created() { | |||
// 手机号记忆回填 | |||
const phoneValue = localStorage.getItem('phoneValue') | |||
this.form.phone = phoneValue ? phoneValue : '' | |||
this.getCodeImg() | |||
const phoneValue = localStorage.getItem('phoneValue'); | |||
this.form.phone = phoneValue ? phoneValue : ''; | |||
this.getCodeImg(); | |||
}, | |||
mounted() { | |||
this.inPage = true | |||
scrollToID('top') | |||
this.inPage = true; | |||
scrollToID('top'); | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
@@ -750,12 +654,7 @@ export default { | |||
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% | |||
); | |||
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; | |||
@@ -1,312 +0,0 @@ | |||
<template> | |||
<div :class="inPage ? 'page active' : 'page'"> | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<!-- <div class="chooseModel"> | |||
<div :class="phase == 1 ? 'active' : ''">选择模板</div> | |||
<div :class="phase == 2 ? 'active' : ''">录入文案</div> | |||
<div :class="phase == 3 ? 'active' : ''">合成视频</div> | |||
</div> --> | |||
<div class="title">选择模板</div> | |||
<div class="typeOutSide"> | |||
<div class="type"> | |||
<div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | |||
全部模板 | |||
</div> | |||
<div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | |||
女性模板 | |||
</div> | |||
<div :class="type == 1 ? 'active' : ''" @click="chooseType(1)"> | |||
男性模板 | |||
</div> | |||
</div> | |||
</div> | |||
<div class="choose"> | |||
<div class="modeList"> | |||
<div | |||
class="model" | |||
:class="currentId == item.id ? 'active' : ''" | |||
v-if="modeList.length >= 1" | |||
v-for="(item, index) in modeList" | |||
:key="index" | |||
@click="selectModel(item.id)" | |||
> | |||
<img :src="item.coverImg" alt="" /> | |||
<div class="modelName">{{ item.title }}</div> | |||
<div class="setPaper">录入文案</div> | |||
</div> | |||
<div class="alt" v-if="modeList.length == 0">暂无可用模板</div> | |||
</div> | |||
</div> | |||
<div class="blank" v-if="modeList.length <= 2"></div> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import { Toast } from "vant"; | |||
import { scrollToID } from "../../utils"; | |||
import { | |||
getModeList, | |||
getModeDetailById, | |||
saveOrUpdateUserVideo, | |||
} from "../../api/chooseModel"; | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
HeadTop, | |||
}, | |||
data() { | |||
return { | |||
inPage: false, | |||
type: 0, | |||
currentId: "", | |||
modeList: [], // 模板列表 | |||
}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
globalWatcher(e) { | |||
console.log(e, "e"); | |||
}, | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
chooseModel(num) { | |||
this.phase = num; | |||
}, | |||
chooseType(num) { | |||
this.type = num; | |||
this.loadModeList(num); | |||
}, | |||
selectModel(id) { | |||
if (this.currentId != id) { | |||
this.currentId = id; | |||
} else { | |||
this.getModeDetail(id); | |||
} | |||
}, | |||
// 获取模板列表 | |||
async loadModeList(sex) { | |||
try { | |||
sex = sex == 0 ? "" : sex; | |||
const res = await getModeList(sex); | |||
console.log(res, "获取模板列表"); | |||
this.modeList = res.data.list; | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
async getModeDetail(id) { | |||
try { | |||
const res = await getModeDetailById(id); | |||
console.log(res, "根据id获取模板详情"); | |||
const modelDetail = res.data; | |||
this.goSetPaperWork(modelDetail); | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
async saveToSetPaper(data, modelDetail) { | |||
try { | |||
const res = await saveOrUpdateUserVideo(data); | |||
console.log(res, "保存或修改用户作品"); | |||
this.$router.push({ | |||
path: "/getPaper", | |||
query: { | |||
modelDetail: JSON.stringify(modelDetail), | |||
saveID: res.data.id, | |||
}, | |||
}); | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
/** | |||
* @description:根据模板详情跳转至选择文案 | |||
* @param {type}modelDetail | |||
* @event:Go page => setPaperWork | |||
*/ | |||
goSetPaperWork(modelDetail) { | |||
const data = { | |||
// id: "", | |||
type: 1, | |||
personMouldId: modelDetail.id, //模板id | |||
personMouldSmId: modelDetail.mouldSmId, //模板标识 | |||
// voiceMouldId: "", | |||
// voiceMouldId: "", | |||
}; | |||
this.saveToSetPaper(data, modelDetail); | |||
}, | |||
}, | |||
mounted() { | |||
this.inPage = true; | |||
scrollToID("top"); | |||
}, | |||
created() { | |||
this.loadModeList(2); | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 0.5s; // global-transition | |||
padding-bottom: 25px; | |||
&.active { | |||
opacity: 1; | |||
transform: translateX(0); | |||
} | |||
.chooseModel { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
width: 350px; | |||
height: 32px; | |||
margin: auto; | |||
margin-top: 15px; | |||
margin-bottom: 15px; | |||
div { | |||
width: 33.33%; | |||
height: 100%; | |||
line-height: 32px; | |||
text-align: center; | |||
border: 1px solid #46464661; | |||
&.active { | |||
background-color: #00ccff; | |||
color: #fff; | |||
} | |||
} | |||
} | |||
.title { | |||
text-align: center; | |||
width: 70px; | |||
font-size: 16px; | |||
font-weight: 600; | |||
border-bottom: 3px solid #0068b7; | |||
padding-bottom: 7px; | |||
margin: 10px auto; | |||
margin-bottom: 25px; | |||
} | |||
.typeOutSide { | |||
position: sticky; | |||
top: 60px; | |||
z-index: 99; | |||
.type { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 0 25px; | |||
margin-bottom: 20px; | |||
div { | |||
width: 94px; | |||
height: 35px; | |||
line-height: 35px; | |||
color: #fff; | |||
border: 1px solid #bfbfbf; | |||
background-color: #bfbfbf; | |||
border-radius: 5px; | |||
text-align: center; | |||
transition: all 0.3s; | |||
&.active { | |||
color: #fff; | |||
border: 1px solid #0068b7; | |||
background-color: #0068b7; | |||
} | |||
} | |||
} | |||
} | |||
.choose { | |||
margin-bottom: 40px; | |||
.modeList { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
margin: auto; | |||
padding: 0 10px; | |||
.model { | |||
position: relative; | |||
text-align: left; | |||
margin-bottom: 25px; | |||
border: 1px solid #00000028; | |||
padding: 8px; | |||
border-radius: 8px; | |||
transition: all 0.3s; | |||
opacity: 0.9; | |||
img { | |||
width: 150px; | |||
height: 220px; | |||
} | |||
.modelName { | |||
margin-top: 4px; | |||
font-size: 13px; | |||
} | |||
.setPaper { | |||
position: absolute; | |||
top: 80%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
color: #fff; | |||
font-size: 14px; | |||
font-weight: 600; | |||
background-color: #00000042; | |||
padding: 3px 5px; | |||
border-radius: 5px; | |||
transition: all 0.3s; | |||
opacity: 0; | |||
} | |||
&.active { | |||
transform: translateY(-3px); | |||
box-shadow: #60606082 0px 2px 2px 1px; | |||
opacity: 1; | |||
.setPaper { | |||
opacity: 1; | |||
} | |||
} | |||
} | |||
.alt { | |||
font-size: 18px; | |||
margin: 80px auto; | |||
height: 450px; | |||
line-height: 450px; | |||
} | |||
} | |||
} | |||
.blank { | |||
width: 1px; | |||
height: 1px; | |||
margin-bottom: 240px; | |||
} | |||
} | |||
</style> |
@@ -3,30 +3,16 @@ | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<!-- 顶部tab栏 --> | |||
<van-tabs | |||
@click="chooseType1" | |||
class="typeOutSide" | |||
animated | |||
color="#7264F5" | |||
line-width="46" | |||
line-height="6" | |||
title-inactive-color="#666" | |||
title-active-color="#333" | |||
> | |||
<van-tab v-for="item in tabList" :key="item" :title="item"> </van-tab> | |||
<van-tabs @click="chooseType1" class="typeOutSide" animated color="#7264F5" line-width="46" line-height="6" title-inactive-color="#666" title-active-color="#333"> | |||
<van-tab v-for="item in tabList" :key="item" :title="item"></van-tab> | |||
</van-tabs> | |||
<div class="vantLoadingBox" style="height: 550px" v-show="showLoading"> | |||
<van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||
</div> | |||
<!-- 模板列表 --> | |||
<div class="choose" v-if="showModeList"> | |||
<div class="choose" v-if="showModeList && !showLoading"> | |||
<waterfall class="modeList" :col="2" :data="modeList"> | |||
<div | |||
class="model" | |||
:class="currentId == item.id ? 'active' : ''" | |||
v-if="modeList.length >= 1" | |||
v-for="(item, index) in modeList" | |||
:key="index" | |||
@click="selectModel(item.id)" | |||
> | |||
<div class="model" :class="currentId == item.id ? 'active' : ''" v-if="modeList.length >= 1" v-for="(item, index) in modeList" :key="index" @click="selectModel(item.id)"> | |||
<div class="model-padding"> | |||
<img :src="item.coverImg" alt="" /> | |||
<div class="modelName">{{ item.title }}</div> | |||
@@ -38,36 +24,26 @@ | |||
</div> | |||
<div class="blank" v-if="modeList.length <= 2"></div> | |||
<!-- 分页 --> | |||
<van-pagination | |||
v-model="currentPage" | |||
:total-items="total" | |||
:items-per-page="10" | |||
@change="pageChange" | |||
/> | |||
<van-pagination v-model="currentPage" :total-items="total" :items-per-page="10" @change="pageChange" /> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from 'vue' | |||
import { mapState, mapActions } from 'vuex' | |||
import HeadTop from './../../components/common/head.vue' | |||
import { Toast } from 'vant' | |||
import { scrollToID } from '../../utils' | |||
import { | |||
getModeList, | |||
getModeList1, | |||
getModeDetailById, | |||
saveOrUpdateUserVideo, | |||
personPatchApi | |||
} from '../../api/chooseModel' | |||
import Vue from 'vue'; | |||
import { mapState, mapActions } from 'vuex'; | |||
import HeadTop from './../../components/common/head.vue'; | |||
import { Toast } from 'vant'; | |||
import { scrollToID } from '../../utils'; | |||
import { getModeList, getModeList1, getModeDetailById, saveOrUpdateUserVideo, personPatchApi } from '../../api/chooseModel'; | |||
Vue.use(Toast) | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
HeadTop | |||
}, | |||
data() { | |||
return { | |||
showLoading: true, | |||
inPage: false, | |||
type: 0, | |||
currentId: '', | |||
@@ -77,11 +53,11 @@ export default { | |||
currentPage: 1, //当前页码 | |||
pageSize: 10, | |||
total: '' | |||
} | |||
}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters | |||
characters: state => state.publicObj.characters | |||
}) | |||
}, | |||
@@ -89,25 +65,25 @@ export default { | |||
...mapActions(['setCharacters']), | |||
//点击tab栏选择模板列表 | |||
chooseType1(name, title) { | |||
this.currentPage = 1 | |||
this.currentPage = 1; | |||
this.type = this.tabList.findIndex((item) => item == title) | |||
this.loadModeList(this.type, this.currentPage, this.pageSize) | |||
this.type = this.tabList.findIndex(item => item == title); | |||
this.loadModeList(this.type, this.currentPage, this.pageSize); | |||
}, | |||
globalWatcher(e) { | |||
console.log(e, 'e') | |||
console.log(e, 'e'); | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
this.$router.push(url); | |||
}, | |||
chooseModel(num) { | |||
this.phase = num | |||
this.phase = num; | |||
}, | |||
selectModel(id) { | |||
this.getModeDetail(id) | |||
this.getModeDetail(id); | |||
// if (this.currentId != id) { | |||
// this.currentId = id | |||
// } else { | |||
@@ -118,17 +94,19 @@ export default { | |||
// 获取模板列表 | |||
async loadModeList(sex, pageNum, pageSize) { | |||
try { | |||
sex = sex == 0 ? '' : sex | |||
this.showLoading = true; | |||
sex = sex == 0 ? '' : sex; | |||
// const res = await getModeList(sex) | |||
this.showModeList = false | |||
const res = await getModeList1(sex, pageNum, pageSize) | |||
this.showModeList = true | |||
this.total = res.data.total | |||
console.log(res, '获取模板列表') | |||
this.modeList = res.data.list | |||
this.showModeList = false; | |||
const res = await getModeList1(sex, pageNum, pageSize); | |||
this.showModeList = true; | |||
this.total = res.data.total; | |||
console.log(res, '获取模板列表'); | |||
this.modeList = res.data.list; | |||
this.showLoading = false; | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
// 根据id获取模板详情 | |||
@@ -136,10 +114,10 @@ export default { | |||
try { | |||
// const res = await getModeDetailById(id) | |||
// console.log(res, '根据id获取模板详情') | |||
const res = await personPatchApi(id) | |||
console.log(res, '根据id获取模板详情') | |||
const modelDetail = res.data | |||
await this.goSetPaperWork(modelDetail) | |||
const res = await personPatchApi(id); | |||
console.log(res, '根据id获取模板详情'); | |||
const modelDetail = res.data; | |||
await this.goSetPaperWork(modelDetail); | |||
// this.$router.push({ | |||
// path: '/previewModel', | |||
// query: { | |||
@@ -151,31 +129,31 @@ export default { | |||
// this.goSetPaperWork(modelDetail); | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
async saveToSetPaper(data, modelDetail) { | |||
try { | |||
console.log(modelDetail.coverImg, 11111111111111111) | |||
const res = await saveOrUpdateUserVideo(data) | |||
console.log(res, '保存或修改用户作品') | |||
console.log(modelDetail.coverImg, 11111111111111111); | |||
const res = await saveOrUpdateUserVideo(data); | |||
console.log(res, '保存或修改用户作品'); | |||
this.$router.push({ | |||
// path: '/previewModel', | |||
path: '/editModel', | |||
query: { | |||
id: res.data.id | |||
} | |||
}) | |||
}); | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
// 更改页码 | |||
pageChange() { | |||
this.loadModeList(this.type, this.currentPage, this.pageSize) | |||
this.loadModeList(this.type, this.currentPage, this.pageSize); | |||
}, | |||
/** | |||
* @description:根据模板详情跳转至选择文案 | |||
@@ -190,18 +168,18 @@ export default { | |||
personMouldSmId: modelDetail.mouldSmId //模板标识 | |||
// voiceMouldId: "", | |||
// voiceMouldId: "", | |||
} | |||
this.saveToSetPaper(data, modelDetail) | |||
}; | |||
this.saveToSetPaper(data, modelDetail); | |||
} | |||
}, | |||
mounted() { | |||
this.inPage = true | |||
scrollToID('top') | |||
this.inPage = true; | |||
scrollToID('top'); | |||
}, | |||
created() { | |||
this.loadModeList(this.type, this.currentPage, this.pageSize) | |||
this.loadModeList(this.type, this.currentPage, this.pageSize); | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
@@ -3,7 +3,10 @@ | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<!-- 中间内容区 --> | |||
<div class="content"> | |||
<div class="vantLoadingBox" style="height: 550px" v-show="contentLoading"> | |||
<van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||
</div> | |||
<div v-show="!contentLoading" class="content"> | |||
<!-- 展示图片 --> | |||
<div class="shouModelImg"> | |||
<div id="editPosition" class="editPosition" :class="videoType == 2 ? 'verticalmodel' : ''"> | |||
@@ -19,7 +22,10 @@ | |||
</div> | |||
<!-- 文字 --> | |||
<div class="addText"> | |||
<div class="addText-title">添加文案</div> | |||
<div class="addText-title"> | |||
<img src="../../assets/icon/icon-text.png" alt="" /> | |||
添加文案 | |||
</div> | |||
<div class="desalinate"> | |||
<span>已录入{{ textareaContent.length }}字</span> | |||
| |||
@@ -43,29 +49,35 @@ | |||
<!-- 播报声音 --> | |||
<div class="addText"> | |||
<div class="addText-title"> | |||
播报声音 | |||
<span class="redWord">(必选)</span> | |||
</div> | |||
<div v-if="soundChoose2.speakTypeStr"> | |||
<!-- {{ soundChoose.subTitle }}- --> | |||
{{ soundChoose.title }} | |||
<!-- -{{soundChoose.ageTypeStr}}- --> | |||
— {{ soundChoose2.speakTypeStr }} | |||
<img src="../../assets/icon/icon-sound.png" alt="" /> | |||
选择播报声音 | |||
<!-- <span class="redWord">(必选)</span> --> | |||
</div> | |||
<!-- 只有一级没有二级时 soundChoose.subTitle--> | |||
<div v-if="soundChoose.speakTypeStr && !soundChoose2">{{ soundChoose.title }} — {{ soundChoose.speakTypeStr }}</div> | |||
<!-- 有二级时 --> | |||
<div v-if="soundChoose2.speakTypeStr">{{ soundChoose2.title }} — {{ soundChoose2.speakTypeStr }}</div> | |||
</div> | |||
<button class="chooseSound" @click="clickBottomTab(1)"> | |||
<img class="img" src="../../assets/icon/icon-microphone.png" alt="" /> | |||
<span>选择声音</span> | |||
</button> | |||
<!-- 合成按钮 --> | |||
<div class="makeVideo" @click="submit(1)">立即制作</div> | |||
<!-- 上移下移 --> | |||
<div class="upAndBottomBtn"> | |||
<div class="moveLayer" :class="videoType == 2 ? 'moveLayer1' : ''"> | |||
<div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> | |||
<img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" alt="" /> | |||
<!-- <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" alt="" /> --> | |||
<img src="../../assets/icon/icon-up.png" alt="" /> | |||
上移一层 | |||
</div> | |||
</div> | |||
<div class="moveLayer below" :class="videoType == 2 ? 'below1' : ''"> | |||
<div class="btnContent" @click="$refs.EditPosition.controlImg(4)"> | |||
<img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" alt="" /> | |||
<!-- <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" alt="" /> --> | |||
<img src="../../assets/icon/icon-down.png" alt="" /> | |||
下移一层 | |||
</div> | |||
</div> | |||
@@ -73,14 +85,14 @@ | |||
</div> | |||
<!-- 底部导航栏 --> | |||
<div class="bottom"> | |||
<div v-show="!contentLoading" class="bottom"> | |||
<van-tabbar class="bottom-tab"> | |||
<van-tabbar-item @click="clickBottomTab(1)"> | |||
<!-- <van-tabbar-item @click="clickBottomTab(1)"> | |||
<span>选择声音</span> | |||
<template #icon="props"> | |||
<img src="../../assets/icon/icon-microphone.png" /> | |||
</template> | |||
</van-tabbar-item> | |||
</van-tabbar-item> --> | |||
<van-tabbar-item @click="clickBottomTab(2)"> | |||
<span>更改背景</span> | |||
<template #icon="props"> | |||
@@ -134,9 +146,13 @@ | |||
<van-tabs v-if="!showSoundList2" color="#7264F5" line-width="46" line-height="6" title-inactive-color="#666" title-active-color="#333" v-model="soundListAction" swipeable> | |||
<van-tab v-for="(item, index) in soundTabList" :title="item" :key="index"> | |||
<!-- 展示页 --> | |||
<div class="list"> | |||
<div class="vantLoadingBox" style="height: 150px" v-show="soundLoading1"> | |||
<van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||
</div> | |||
<div class="list" v-show="!soundLoading1"> | |||
<div v-if="textareaContent.length == 0">输入文案后才可以选择声音哦~ ~</div> | |||
<div v-if="soundItemList.length == 0 && textareaContent.length != 0">文字过少,难以识别</div> | |||
<div v-if="soundItemList.length == 0 && textareaContent.length != 0">{{ soundTips ? soundTips : '试试输入长一点的句子吧~ ~' }}</div> | |||
<template v-if="soundItemList.length != 0"> | |||
<div @click="clickSoundItem(index, item)" class="listItem" :class="{ active: soundItemListAction == index }" v-for="(item, index) in soundItemList" :key="index"> | |||
<img src="../../assets/icon/icon-earphone.png" alt="" /> | |||
@@ -153,7 +169,10 @@ | |||
<!-- 二级列表显示 --> | |||
<div v-if="showSoundList2" class="SoundList2"> | |||
<div class="list"> | |||
<div class="vantLoadingBox" style="height: 150px" v-show="soundLoading2"> | |||
<van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||
</div> | |||
<div class="list" v-show="!soundLoading2"> | |||
<div v-if="soundItemList2.length == 0">暂无数据</div> | |||
<template v-if="soundItemList.length != 0"> | |||
<div @click="clickSoundItem2(index, item)" class="listItem" :class="{ active: soundItemListAction2 == index }" v-for="(item, index) in soundItemList2" :key="index"> | |||
@@ -198,6 +217,9 @@ | |||
图片 | |||
<i></i> | |||
</div> | |||
<!-- <div class="vantLoadingBox" style="height: 50px" v-show="bjLoading1"> | |||
<van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||
</div> --> | |||
<div class="myTab-show-list"> | |||
<!-- 上传 --> | |||
<div v-if="bjAction == 1" class="myTab-show-list-upload"> | |||
@@ -326,6 +348,16 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
contentLoading: true, | |||
soundLoading1: true, | |||
soundLoading2: true, | |||
bjLoading1: true, | |||
bjLoading2: true, | |||
scLoading1: true, | |||
scLoading2: true, | |||
soundTips: '', | |||
timer: null, | |||
id: null, | |||
timeOuter: null, | |||
@@ -346,7 +378,7 @@ export default { | |||
personMouldId: null, //选择数字人id | |||
mouldSmId: null, | |||
saveID: null, // 作品id | |||
inputTitle: '', // 作品标题 | |||
inputTitle: '您的新数字人', // 作品标题 | |||
textareaContent: '', // 输入框内容 | |||
//底部 | |||
bottomTabActive: 2, // 底部导航高亮 | |||
@@ -419,6 +451,7 @@ export default { | |||
}, | |||
// 获取声音列表 | |||
async loadVoice() { | |||
this.soundTips = ''; | |||
if (this.textareaContent.length != 0) { | |||
const language = franc(this.textareaContent); | |||
console.log(language, '语种'); | |||
@@ -427,10 +460,17 @@ export default { | |||
paperwork: this.textareaContent | |||
}; | |||
try { | |||
this.soundLoading1 = true; | |||
const res = await voiceList(data); | |||
console.log(res, '获取声音列表'); | |||
this.soundItemList = res.data.list; | |||
this.soundLoading1 = false; | |||
} catch (error) { | |||
this.soundItemList = []; | |||
if (error.message == '暂不支持该语种') { | |||
this.soundTips = error.message; | |||
} | |||
this.soundLoading1 = false; | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
@@ -445,6 +485,7 @@ export default { | |||
this.soundChoose = item; | |||
this.showSoundList2 = true; | |||
this.soundLoading2 = true; | |||
const res = await voiceList2Api(item.id); | |||
let list = res.data.subVoiceMould ? res.data.subVoiceMould : []; | |||
@@ -454,7 +495,7 @@ export default { | |||
let list2 = [{ ...obj.data }, ...list]; | |||
this.soundItemList2 = list2 || []; | |||
this.soundLoading2 = false; | |||
// console.log(this.soundItemList2) | |||
// this.audioUrl = res.data.videoUrl | |||
} else { | |||
@@ -519,6 +560,11 @@ export default { | |||
}; | |||
console.log(data, '最终提交的参数'); | |||
if (type == 1) { | |||
Toast.loading({ | |||
duration: 5000, | |||
message: '加载中...', | |||
forbidClick: true | |||
}); | |||
if (!this.textareaContent) { | |||
Toast.fail('请输入文案内容!'); | |||
return; | |||
@@ -528,6 +574,11 @@ export default { | |||
Toast.fail('请选择声音!'); | |||
return; | |||
} | |||
// 当没有选择声音参数时 | |||
// if (!this.soundChoose2.id) { | |||
// Toast.fail('请选择声音!'); | |||
// return; | |||
// } | |||
// if (!this.inputTitle) { | |||
// Toast.fail('请输入文案标题!') | |||
// return | |||
@@ -550,8 +601,10 @@ export default { | |||
this.createVideo({ id: this.$route.query.id }); | |||
} | |||
} catch (error) { | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
if (error.message != '视频生成中') { | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
} | |||
}, | |||
/** | |||
@@ -636,6 +689,7 @@ export default { | |||
// 根据作品ID获取信息 | |||
async getDetailById(id) { | |||
try { | |||
this.contentLoading = true; | |||
const res = await getModelDetailById(id); | |||
// console.log(JSON.parse(res.data.personMouldSm)) | |||
@@ -661,13 +715,16 @@ export default { | |||
// this.imgUrl = res.data.personMould.coverImg | |||
this.personMouldId = res.data.personMouldId; | |||
this.mouldSmId = res.data.personMouldSmId; | |||
this.inputTitle = res.data.title; | |||
this.inputTitle = res.data.title ? res.data.title : '您的新数字人'; | |||
this.textareaContent = res.data.paperwork || ''; | |||
this.soundChoose.id = res.data.voiceMouldId; | |||
this.soundChoose.mouldSmId = res.data.voiceMouldSmId; | |||
// console.log(res.data.voiceMouldSm, 111111111111111); | |||
this.soundChoose.title = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).title : ''; | |||
this.soundChoose2.subTitle = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).subTitle : ''; | |||
this.soundChoose2.title = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).title : ''; | |||
this.soundChoose2.speakTypeStr = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).speakTypeStr : ''; | |||
this.soundChoose2.id = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).id : ''; | |||
// console.log(this.soundChoose.title, this.soundChoose2.speakTypeStr, '112233'); | |||
if (this.textareaContent.length != 0) { | |||
await this.loadVoice(); // 获取音频列表 | |||
@@ -675,7 +732,7 @@ export default { | |||
this.soundItemListAction = this.soundItemList.findIndex(item => { | |||
return item.id == this.soundChoose.id; | |||
}); //高亮处理 | |||
this.contentLoading = false; | |||
// backgroundMouldId: '', // 背景id | |||
// backgroundMouldSmId: '', //背景标识 | |||
// 如果视频生成了 | |||
@@ -815,34 +872,62 @@ export default { | |||
* @description:获取系统背景图 | |||
*/ | |||
async getSystemBGIList() { | |||
const res = await systemBGIListApi(this.pageNum, this.pageSize, this.videoType); | |||
this.systemBGIList = res.data.list; | |||
this.showBGIList = this.systemBGIList; | |||
try { | |||
this.bjLoading1 = true; | |||
const res = await systemBGIListApi(this.pageNum, this.pageSize, this.videoType); | |||
this.systemBGIList = res.data.list; | |||
this.showBGIList = this.systemBGIList; | |||
this.bjLoading1 = false; | |||
} catch (error) { | |||
console.log(error); | |||
this.bjLoading1 = false; | |||
} | |||
}, | |||
/** | |||
* @description:获取我上传的背景图 | |||
*/ | |||
async getMyBGIListApi() { | |||
const res = await myBGIListApi(this.pageNum, this.pageSize, this.videoType); | |||
this.myBGIList = res.data.list; | |||
try { | |||
this.bjLoading2 = true; | |||
const res = await myBGIListApi(this.pageNum, this.pageSize, this.videoType); | |||
this.myBGIList = res.data.list; | |||
this.bjLoading2 = false; | |||
} catch (error) { | |||
console.log(error); | |||
this.bjLoading2 = false; | |||
} | |||
}, | |||
/** | |||
* @description:获取系统素材 | |||
*/ | |||
async getSystemScList() { | |||
const res = await systemScListApi(this.pageNum, this.pageSize); | |||
this.systemScList = res.data.list; | |||
this.showScList = this.systemScList; | |||
try { | |||
this.scLoading1 = true; | |||
const res = await systemScListApi(this.pageNum, this.pageSize); | |||
this.systemScList = res.data.list; | |||
this.showScList = this.systemScList; | |||
this.scLoading1 = false; | |||
} catch (error) { | |||
console.log(error); | |||
this.scLoading1 = false; | |||
} | |||
}, | |||
/** | |||
* @description:获取我上传的素材 | |||
*/ | |||
async getMyScListApi() { | |||
const res = await myScListApi(this.pageNum, this.pageSize); | |||
this.myScList = res.data.list; | |||
try { | |||
this.scLoading2 = true; | |||
const res = await myScListApi(this.pageNum, this.pageSize); | |||
this.myScList = res.data.list; | |||
this.scLoading2 = false; | |||
} catch (error) { | |||
console.log(error); | |||
this.scLoading2 = false; | |||
} | |||
}, | |||
/** | |||
@@ -903,6 +988,24 @@ export default { | |||
</script> | |||
<style lang="scss" scoped> | |||
.chooseSound { | |||
position: absolute; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
margin-top: 10px; | |||
width: 225px; | |||
height: 50px; | |||
text-align: center; | |||
font-size: 20px; | |||
line-height: 50px; | |||
border: 1px solid #85a5f9; | |||
.img { | |||
margin-top: -3px; | |||
margin-right: 3px; | |||
width: 16px; | |||
height: 16px; | |||
} | |||
} | |||
.editPosition { | |||
position: relative; | |||
// transform: scale(0.2); | |||
@@ -944,7 +1047,7 @@ export default { | |||
position: relative; | |||
margin-top: 10px; | |||
padding: 0 10px; | |||
padding-bottom: 50px; | |||
padding-bottom: 190px; | |||
.shouModelImg { | |||
display: flex; | |||
@@ -983,6 +1086,11 @@ export default { | |||
font-size: 16px; | |||
font-weight: 600; | |||
color: #000; | |||
img { | |||
width: 24px; | |||
height: 24px; | |||
margin-right: 5px; | |||
} | |||
} | |||
} | |||
@@ -1031,8 +1139,12 @@ export default { | |||
} | |||
.makeVideo { | |||
margin: 15px 20px 0; | |||
position: fixed; | |||
bottom: 70px; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
// margin: 15px 20px 0; | |||
width: 325px; | |||
height: 50px; | |||
text-align: center; | |||
font-size: 20px; | |||
@@ -1061,7 +1173,7 @@ export default { | |||
border-radius: 11px; | |||
} | |||
.moveLayer1 { | |||
top: 38% !important; | |||
top: 35% !important; | |||
left: 20% !important; | |||
} | |||
img { | |||
@@ -1075,7 +1187,7 @@ export default { | |||
top: 25%; | |||
} | |||
.below1 { | |||
top: 38% !important; | |||
top: 35% !important; | |||
left: 60% !important; | |||
} | |||
@@ -1119,7 +1231,10 @@ export default { | |||
border-radius: 12px; | |||
::v-deep .van-button { | |||
float: right; | |||
border-radius: 12px; | |||
height: 40px; | |||
color: #fff; | |||
border-radius: 40px; | |||
background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%); | |||
} | |||
.progress { | |||
@@ -11,17 +11,6 @@ | |||
<img src="../../assets/img/myVideo.png" alt="" /> | |||
我的视频作品 | |||
</div> | |||
<!-- <span | |||
v-show="listActive == 1" | |||
class="floatRight" | |||
@click="listActive = 2" | |||
><img src="../../assets/icon/icon-list2.png" alt="" /></span | |||
><span | |||
@click="listActive = 1" | |||
v-show="listActive == 2" | |||
class="floatRight" | |||
><img src="../../assets/icon/icon-list1.png" alt="" | |||
/></span> --> | |||
<div class="title-change"> | |||
<div class="displayFlex"> | |||
<span v-show="listActive == 1" class="floatRight" :class="videoType == 1 ? 'wordColor' : ''" @click="getNewList(1)">只看竖屏</span> | |||
@@ -31,82 +20,84 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div class="vantLoadingBox" style="height: 550px" v-show="showLoading"> | |||
<van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||
</div> | |||
<!-- 具体内容 --> | |||
<!-- 列表样式--大图 --> | |||
<div v-if="videoList.length == 0">暂无数据</div> | |||
<!-- <div v-if="videoList.length != 0 && !showLoading">数据加载中</div> --> | |||
<!-- 新 修改v-if--> | |||
<div v-if="waterfallBug"> | |||
<waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList"> | |||
<div v-for="(item, index) in videoList" class="waterFall-item" :key="item.id ? item.id : index" @click="goDetail(item)"> | |||
<div class="waterFall-item-paddding"> | |||
<img :src="item.coverImg ? item.coverImg : item.videoType == 2 ? defaultImg : defaultImg1" alt="" /> | |||
<!-- 渐变遮罩层 --> | |||
<div class="waterFall-item-mask"> | |||
<div>{{ item.title || '无标题' }}</div> | |||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
<div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||
<div v-show="!showLoading"> | |||
<!-- 列表样式--大图 --> | |||
<div v-if="videoList.length == 0">暂无数据</div> | |||
<!-- 新 修改v-if--> | |||
<div v-if="waterfallBug"> | |||
<waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList"> | |||
<div v-for="(item, index) in videoList" class="waterFall-item" :key="item.id ? item.id : index" @click="goDetail(item)"> | |||
<div class="waterFall-item-paddding"> | |||
<img :src="item.coverImg ? item.coverImg : item.videoType == 2 ? defaultImg : defaultImg1" alt="" /> | |||
<!-- 渐变遮罩层 --> | |||
<div class="waterFall-item-mask"> | |||
<div>{{ item.title || '无标题' }}</div> | |||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
<div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||
</div> | |||
<!-- 视频状态 草稿还是未完成还是失败 --> | |||
<div class="waterFall-item-state" v-if="item.videoStatus == 2"> | |||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||
</div> | |||
<!-- 删除 --> | |||
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||
<img src="../../assets/icon/icon-trash.png" alt="" /> | |||
</div> | |||
</div> | |||
<!-- 视频状态 草稿还是未完成还是失败 --> | |||
<div class="waterFall-item-state" v-if="item.videoStatus == 2"> | |||
</div> | |||
</waterfall> | |||
</div> | |||
<!-- 列表样式--小图 --> | |||
<van-swipe-cell v-show="listActive == 2" loading v-for="(item, index) in videoList" :key="item.id ? item.id : index"> | |||
<div class="itemList"> | |||
<!-- 每一项 --> | |||
<div v-if="videoList.length > 0" class="videoModel" :key="index"> | |||
<!-- 左侧图片 --> | |||
<div class="videoPrv" @click="goDetail(item)"> | |||
<img src="../../assets/img/BG@2x.png" /> | |||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||
<!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | |||
</div> | |||
<!-- 删除 --> | |||
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||
<img src="../../assets/icon/icon-trash.png" alt="" /> | |||
<!-- 中间文字 --> | |||
<div class="videoInfo" @click="goDetail(item)"> | |||
<div class="videoName"> | |||
{{ item.title || '无标题' }} | |||
</div> | |||
<div class="createTime">视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
<div class="createTime">视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
<div class="createTime">创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||
</div> | |||
</div> | |||
</div> | |||
</waterfall> | |||
</div> | |||
<!-- 列表样式--小图 --> | |||
<van-swipe-cell v-show="listActive == 2" loading v-for="(item, index) in videoList" :key="item.id ? item.id : index"> | |||
<div class="itemList"> | |||
<!-- 每一项 --> | |||
<div v-if="videoList.length > 0" class="videoModel" :key="index"> | |||
<!-- 左侧图片 --> | |||
<div class="videoPrv" @click="goDetail(item)"> | |||
<img src="../../assets/img/BG@2x.png" /> | |||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||
<!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | |||
</div> | |||
<!-- 中间文字 --> | |||
<div class="videoInfo" @click="goDetail(item)"> | |||
<div class="videoName"> | |||
{{ item.title || '无标题' }} | |||
<!-- 右侧更多 --> | |||
<div class="showMore" @click.stop="showDialog(item.id)"> | |||
<div></div> | |||
<div></div> | |||
<div></div> | |||
</div> | |||
<div class="createTime">视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
<div class="createTime">视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
<div class="createTime">创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||
</div> | |||
<!-- 右侧更多 --> | |||
<div class="showMore" @click.stop="showDialog(item.id)"> | |||
<div></div> | |||
<div></div> | |||
<div></div> | |||
<!-- 弹出层 --> | |||
<van-popup v-if="clickItem == item.id" v-model="showPopup"> | |||
<!-- <div @click="closeDialog"> | |||
<i class="el-icon-edit" /> 编辑 | |||
</div> --> | |||
<div @click="goDelete(item.id)"> | |||
<i class="el-icon-delete" /> | |||
删除 | |||
</div> | |||
</van-popup> | |||
</div> | |||
<!-- 弹出层 --> | |||
<van-popup v-if="clickItem == item.id" v-model="showPopup"> | |||
<!-- <div @click="closeDialog"> | |||
<i class="el-icon-edit" /> 编辑 | |||
</div> --> | |||
<div @click="goDelete(item.id)"> | |||
<i class="el-icon-delete" /> | |||
删除 | |||
</div> | |||
</van-popup> | |||
<!-- 无数据处理 --> | |||
<div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||
</div> | |||
<!-- 无数据处理 --> | |||
<div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||
</div> | |||
</van-swipe-cell> | |||
</van-swipe-cell> | |||
</div> | |||
</div> | |||
<!-- 分页 --> | |||
<van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" @change="pageChange" /> | |||
@@ -132,7 +123,7 @@ | |||
<script> | |||
// 组件 | |||
import Vue from 'vue'; | |||
import { Toast, Dialog } from 'vant'; | |||
import { Toast, Dialog, Loading } from 'vant'; | |||
import { mapState, mapActions } from 'vuex'; | |||
import HeadTop from '@/components/common/head.vue'; | |||
// 工具 | |||
@@ -141,6 +132,7 @@ import { bytesToSize, timestampToTime, scrollToID, formatSeconds } from '../../u | |||
import { getVideoList, doGetVideoDetialById, doFindInviteCode, deleteVideoById } from '../../api/myPage'; | |||
Vue.use(Toast); | |||
Vue.use(Loading); | |||
export default { | |||
components: { | |||
HeadTop | |||
@@ -283,10 +275,8 @@ export default { | |||
message: '您确定要删除该作品吗?' | |||
}) | |||
.then(async () => { | |||
this.showLoading = true; | |||
await this.deleteVideoById(id); | |||
await this.loadVideoList(this.currentPage, this.pageSize, this.videoType); | |||
this.showLoading = false; | |||
}) | |||
.catch(() => { | |||
return; | |||
@@ -298,15 +288,16 @@ export default { | |||
*/ | |||
async loadVideoList(pageNum, pageSize, videoType) { | |||
try { | |||
this.showLoading = true; | |||
this.waterfallBug = false; | |||
// 根据listActive判断是不是看的草稿箱 | |||
let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3]; | |||
const res = await getVideoList(pageNum, pageSize, videoType, videoStatuss); | |||
console.log(res, '获取作品列表'); | |||
this.videoList = res.data.list; | |||
this.waterfallBug = true; | |||
this.total = res.data.total; | |||
this.showLoading = false; | |||
} catch (error) { | |||
console.log(error, 'error'); | |||
// Toast.fail(error.message) | |||
@@ -372,13 +363,16 @@ export default { | |||
scrollToID('top'); | |||
}, | |||
created() { | |||
this.loadVideoList(1, this.pageSize, this.videoType); | |||
async created() { | |||
await this.loadVideoList(1, this.pageSize, this.videoType); | |||
} | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.van-pagination { | |||
margin-top: 10px; | |||
} | |||
.floatRight { | |||
margin-left: 15px; | |||
img { | |||