congzc 2 年之前
父節點
當前提交
c119c62a66
共有 16 個檔案被更改,包括 450 行新增2520 行删除
  1. +7
    -0
      public/index.html
  2. 二進制
      src/assets/icon/icon-down.png
  3. 二進制
      src/assets/icon/icon-sound.png
  4. 二進制
      src/assets/icon/icon-text.png
  5. 二進制
      src/assets/icon/icon-up.png
  6. +0
    -281
      src/components/CutImg copy 2.vue
  7. +0
    -272
      src/components/CutImg copy.vue
  8. +4
    -0
      src/components/CutImg.vue
  9. +13
    -1
      src/styles/index.scss
  10. +0
    -773
      src/views/login/login copy 2.vue
  11. +0
    -441
      src/views/login/login copy-old.vue
  12. +139
    -240
      src/views/login/login.vue
  13. +0
    -312
      src/views/model/chooseModel copy.vue
  14. +55
    -77
      src/views/model/chooseModel.vue
  15. +155
    -40
      src/views/model/editModel.vue
  16. +77
    -83
      src/views/myPage/myPage.vue

+ 7
- 0
public/index.html 查看文件

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


二進制
src/assets/icon/icon-down.png 查看文件

Before After
Width: 10  |  Height: 12  |  Size: 345 B

二進制
src/assets/icon/icon-sound.png 查看文件

Before After
Width: 200  |  Height: 200  |  Size: 2.1 KiB

二進制
src/assets/icon/icon-text.png 查看文件

Before After
Width: 200  |  Height: 200  |  Size: 6.1 KiB

二進制
src/assets/icon/icon-up.png 查看文件

Before After
Width: 10  |  Height: 12  |  Size: 348 B

+ 0
- 281
src/components/CutImg copy 2.vue 查看文件

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

+ 0
- 272
src/components/CutImg copy.vue 查看文件

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

+ 4
- 0
src/components/CutImg.vue 查看文件

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


+ 13
- 1
src/styles/index.scss 查看文件

@@ -40,4 +40,16 @@ p {
}
.noScroll {
overflow: hidden;
}
}

.vantLoadingBox {
position: relative;
width: 100%;
}
.vantLoading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}


+ 0
- 773
src/views/login/login copy 2.vue 查看文件

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

+ 0
- 441
src/views/login/login copy-old.vue 查看文件

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

+ 139
- 240
src/views/login/login.vue 查看文件

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


+ 0
- 312
src/views/model/chooseModel copy.vue 查看文件

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

+ 55
- 77
src/views/model/chooseModel.vue 查看文件

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


+ 155
- 40
src/views/model/editModel.vue 查看文件

@@ -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>
&nbsp;&nbsp;
@@ -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 {


+ 77
- 83
src/views/myPage/myPage.vue 查看文件

@@ -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" />&nbsp;编辑
</div> -->
<div @click="goDelete(item.id)">
<i class="el-icon-delete" />
&nbsp;删除
</div>
</van-popup>
</div>
<!-- 弹出层 -->
<van-popup v-if="clickItem == item.id" v-model="showPopup">
<!-- <div @click="closeDialog">
<i class="el-icon-edit" />&nbsp;编辑
</div> -->
<div @click="goDelete(item.id)">
<i class="el-icon-delete" />
&nbsp;删除
</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 {


Loading…
取消
儲存