@@ -4,12 +4,14 @@ | |||
<img src="../../assets/img/logoh.png" alt class="logo" /> | |||
<!-- <div class="logoTitle">metavatar</div> --> | |||
</div> | |||
<div class="loginBox"> | |||
<!-- 短信验证码登录 --> | |||
<div class="loginBox" v-if="isCodeLogin"> | |||
<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> | |||
<div class="inputPhone">请输入您的手机号</div> | |||
<el-button class="getCode" type="text" @click="getCode">{{ | |||
codeInfo | |||
}}</el-button> | |||
@@ -24,7 +26,46 @@ | |||
<div class="inputCode">请输入短信验证码</div> | |||
</el-form-item> | |||
<el-form-item> | |||
<button class="submitBtn" @click.native="login">登录/注册</button> | |||
<button class="submitBtn" @click="login">登录/注册</button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<!-- 用户名密码登录 --> | |||
<div class="loginBox" v-else> | |||
<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> | |||
<button class="submitBtn inside" @click="login">登录/注册</button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
@@ -41,6 +82,8 @@ export default { | |||
data() { | |||
return { | |||
codeInfo: "获取验证码", | |||
isCodeLogin: true, | |||
// 短信验证码登录 | |||
form: { | |||
phone: "", | |||
code: "", | |||
@@ -65,6 +108,32 @@ export default { | |||
}, | |||
], | |||
}, | |||
// 账号密码登录 | |||
formII: { | |||
phone: "", | |||
pwd: "", | |||
code: "", | |||
}, | |||
rulesII: { | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: "change", | |||
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); | |||
}, | |||
}, | |||
], | |||
}, | |||
}; | |||
}, | |||
@@ -201,6 +270,7 @@ export default { | |||
} | |||
.getCode { | |||
position: absolute; | |||
top: 1px; | |||
right: 10px; | |||
color: #0068b7; | |||
} | |||
@@ -230,10 +300,21 @@ export default { | |||
padding: 9px; | |||
background-color: #0068b7; | |||
border-radius: 5px; | |||
&.inside { | |||
top: 10px; | |||
} | |||
} | |||
.forgetPwd { | |||
position: relative; | |||
top: -10px; | |||
float: left; | |||
font-size: 12px; | |||
color: #0068b7; | |||
} | |||
} | |||
} | |||
/deep/ .el-input__inner { | |||
height: 42px; | |||
border: 1px solid #0068b7; | |||
} | |||
</style> |
@@ -1,13 +1,14 @@ | |||
<template> | |||
<div> | |||
<HeadTop /> | |||
<div class="chooseModel"> | |||
<!-- <div class="chooseModel"> | |||
<div :class="phase == 1 ? 'active' : ''">选择模板</div> | |||
<div :class="phase == 2 ? 'active' : ''">录入文案</div> | |||
<div :class="phase == 3 ? 'active' : ''">合成视频</div> | |||
</div> | |||
</div> --> | |||
<div v-show="phase == 1" class="choose"> | |||
<div class="title">选择模板</div> | |||
<div class="typeOutSide"> | |||
<div class="type"> | |||
<div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | |||
全部模板 | |||
@@ -18,23 +19,27 @@ | |||
<div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | |||
男性模板 | |||
</div> | |||
<div style="background-color: #46464661">自建模板</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="goDetail(item.id)" | |||
@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> | |||
@@ -52,9 +57,95 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
phase: 1, | |||
type: 0, | |||
modeList: [], | |||
currentId: "", | |||
// modeList: [ | |||
// { | |||
// id: 1, | |||
// salePriceStr: "0", | |||
// priceStr: "0", | |||
// type: 1, | |||
// coverImg: | |||
// "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg", | |||
// coverPicture: | |||
// '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]', | |||
// title: "测试1", | |||
// sex: 2, | |||
// age: 10, | |||
// colour: 1, | |||
// salePrice: 0, | |||
// price: 0, | |||
// sendType: 1, | |||
// mouldSmId: "16739389169485046_nVi875Ej", | |||
// status: 1, | |||
// createDate: 1673976448000, | |||
// updateDate: 1673976448000, | |||
// }, | |||
// { | |||
// id: 2, | |||
// salePriceStr: "0", | |||
// priceStr: "0", | |||
// type: 1, | |||
// coverImg: | |||
// "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg", | |||
// coverPicture: | |||
// '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]', | |||
// title: "测试1", | |||
// sex: 2, | |||
// age: 10, | |||
// colour: 1, | |||
// salePrice: 0, | |||
// price: 0, | |||
// sendType: 1, | |||
// mouldSmId: "16739389169485046_nVi875Ej", | |||
// status: 1, | |||
// createDate: 1673976448000, | |||
// updateDate: 1673976448000, | |||
// }, | |||
// { | |||
// id: 3, | |||
// salePriceStr: "0", | |||
// priceStr: "0", | |||
// type: 1, | |||
// coverImg: | |||
// "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg", | |||
// coverPicture: | |||
// '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]', | |||
// title: "测试1", | |||
// sex: 2, | |||
// age: 10, | |||
// colour: 1, | |||
// salePrice: 0, | |||
// price: 0, | |||
// sendType: 1, | |||
// mouldSmId: "16739389169485046_nVi875Ej", | |||
// status: 1, | |||
// createDate: 1673976448000, | |||
// updateDate: 1673976448000, | |||
// }, | |||
// { | |||
// id: 4, | |||
// salePriceStr: "0", | |||
// priceStr: "0", | |||
// type: 1, | |||
// coverImg: | |||
// "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg", | |||
// coverPicture: | |||
// '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]', | |||
// title: "测试1", | |||
// sex: 2, | |||
// age: 10, | |||
// colour: 1, | |||
// salePrice: 0, | |||
// price: 0, | |||
// sendType: 1, | |||
// mouldSmId: "16739389169485046_nVi875Ej", | |||
// status: 1, | |||
// createDate: 1673976448000, | |||
// updateDate: 1673976448000, | |||
// }, | |||
// ], | |||
modeList: [], // 模板列表 | |||
}; | |||
}, | |||
computed: { | |||
@@ -73,10 +164,13 @@ export default { | |||
chooseModel(num) { | |||
this.phase = num; | |||
}, | |||
chooseType(num) { | |||
this.type = num; | |||
this.getModeList(num); | |||
}, | |||
// 获取模板列表 | |||
getModeList(sex) { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
if (sex == 0) { | |||
@@ -102,13 +196,84 @@ export default { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
goDetail(id) { | |||
this.$router.push({ | |||
path: "/modelDetail", | |||
query: { | |||
id: id, | |||
/** | |||
* @description:根据id获取模板详情 | |||
* @param {type} id | |||
* @return:data | |||
*/ | |||
getModeDetail(id) { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/mouldPatch/findById?id=${id}`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
const modelDetail = res.data.data; | |||
this.goSetPaperWork(modelDetail); | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
/** | |||
* @description:根据模板详情跳转至选择文案 | |||
* @param {type}modelDetail | |||
* @event:Go page => setPaperWork | |||
*/ | |||
goSetPaperWork(modelDetail) { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
const data = { | |||
// id: "", | |||
type: 1, | |||
personMouldId: modelDetail.id, //模板id | |||
personMouldSmId: modelDetail.mouldSmId, //模板标识 | |||
// voiceMouldId: "", | |||
// voiceMouldId: "", | |||
}; | |||
this.$axios({ | |||
method: "post", | |||
url: `${baseUrl}/api/userVideo/saveOrUpdate`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}); | |||
data, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.$router.push({ | |||
path: "/getPaper", | |||
query: { | |||
modelDetail: modelDetail, | |||
}, | |||
}); | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
selectModel(id) { | |||
if (this.currentId != id) { | |||
this.currentId = id; | |||
} else { | |||
this.getModeDetail(id); | |||
} | |||
}, | |||
}, | |||
created() { | |||
@@ -139,51 +304,111 @@ export default { | |||
} | |||
} | |||
} | |||
.choose { | |||
margin-bottom: 40px; | |||
.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: fixed; | |||
left: 0; | |||
right: 0; | |||
bottom: 10px; | |||
z-index: 99; | |||
.type { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 0 30px; | |||
padding: 0 25px; | |||
margin-bottom: 20px; | |||
div { | |||
width: 65px; | |||
height: 25px; | |||
line-height: 25px; | |||
border: 1px solid #797979; | |||
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 #9d00ff5d; | |||
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||
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 25px; | |||
padding: 0 10px; | |||
.model { | |||
text-align: center; | |||
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 { | |||
font-size: 15px; | |||
margin-top: 10px; | |||
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(-5px); | |||
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> |
@@ -72,12 +72,16 @@ export default { | |||
position: relative; | |||
padding: 30px; | |||
text-align: center; | |||
.title { | |||
font-size: 18px; | |||
margin-bottom: 20px; | |||
} | |||
video { | |||
width: 80%; | |||
width: 240px; | |||
height: 427px; | |||
border: 0.5px solid #000; | |||
border-radius: 8px; | |||
} | |||
img { | |||
position: absolute; | |||
@@ -86,32 +90,39 @@ export default { | |||
transform: translate(-50%, -50%); | |||
} | |||
.desc { | |||
font-size: 16px; | |||
position: relative; | |||
right: 45px; | |||
bottom: 8px; | |||
font-size: 12px; | |||
margin-top: 20px; | |||
span { | |||
color: #00ccff; | |||
text-decoration: underline; | |||
color: #0006ff; | |||
} | |||
} | |||
} | |||
.bottomBtn { | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 0 75px; | |||
padding: 0 32.5px; | |||
margin-top: 20px; | |||
margin-bottom: 20px; | |||
div { | |||
width: 100px; | |||
height: 30px; | |||
width: 142px; | |||
height: 42px; | |||
color: #484848; | |||
line-height: 30px; | |||
line-height: 42px; | |||
text-align: center; | |||
border: 1px solid #484848; | |||
border-radius: 7px; | |||
&.back { | |||
color: #fff; | |||
border: 1px solid #d2d2d2; | |||
background-color: #d2d2d2; | |||
} | |||
&.next { | |||
color: #fff; | |||
border: 1px solid #00ccff; | |||
background-color: #00ccff; | |||
border: 1px solid #0068b7; | |||
background-color: #0068b7; | |||
} | |||
} | |||
} | |||
@@ -1,30 +1,22 @@ | |||
<template> | |||
<div> | |||
<HeadTop /> | |||
<div class="chooseModel"> | |||
<div class="active">选择模板</div> | |||
<div class="active">录入文案</div> | |||
<div>合成视频</div> | |||
</div> | |||
<div class="img"> | |||
<img :src="modelDetail.coverImg" /> | |||
<div class="title">{{ modelDetail.title }}</div> | |||
</div> | |||
<div class="inpuType"> | |||
<div class="text">文字输入</div> | |||
<div class="voice">语音输入</div> | |||
</div> | |||
<div class="textarea"> | |||
<input v-model="title" type="text" placeholder="请输入标题" /> | |||
<textarea | |||
v-model="paperwork" | |||
cols="55" | |||
rows="15" | |||
placeholder="写点什么" | |||
></textarea> | |||
<div class="limit">15000字 约100分钟</div> | |||
<div class="try">试听</div> | |||
<div class="title">录入文案</div> | |||
<div class="content"> | |||
<div class="img"> | |||
<img :src="modelDetail.coverImg" /> | |||
</div> | |||
<div class="textarea"> | |||
<textarea | |||
v-model="paperwork" | |||
cols="55" | |||
rows="15" | |||
placeholder="写点什么" | |||
></textarea> | |||
<div class="limit">已录入150字 约1分钟</div> | |||
</div> | |||
</div> | |||
<div class="bottomBtn"> | |||
<div class="back" @click="back">上一步</div> | |||
<div class="next" @click="goNext">下一步</div> | |||
@@ -112,7 +104,7 @@ export default { | |||
// id: "", | |||
type: 1, | |||
personMouldId: this.modelDetail.id, //模板id | |||
personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||
personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | |||
paperwork: this.paperwork, | |||
title: this.modelDetail.title, | |||
// voiceMouldId: "", | |||
@@ -144,6 +136,7 @@ export default { | |||
}); | |||
}) | |||
.catch((err) => { | |||
console.log(err, "err"); | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
@@ -154,117 +147,88 @@ export default { | |||
this.getDetailById(this.id); | |||
} else { | |||
this.modelDetail = this.$route.query.modelDetail; | |||
console.log(this.modelDetail); | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.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: 90%; | |||
line-height: 32px; | |||
text-align: center; | |||
border: 1px solid #46464661; | |||
&.active { | |||
background-color: #00ccff; | |||
color: #fff; | |||
} | |||
} | |||
} | |||
.img { | |||
margin: 25px auto; | |||
.title { | |||
text-align: center; | |||
img { | |||
width: 300px; | |||
height: 180px; | |||
background-color: grey; | |||
} | |||
.title { | |||
font-size: 15px; | |||
margin-top: 15px; | |||
} | |||
width: 70px; | |||
font-size: 16px; | |||
font-weight: 600; | |||
border-bottom: 3px solid #0068b7; | |||
padding-bottom: 7px; | |||
margin: 10px auto; | |||
margin-bottom: 25px; | |||
} | |||
.inpuType { | |||
.content { | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 0 90px; | |||
margin-bottom: 25px; | |||
div { | |||
width: 80px; | |||
height: 28px; | |||
line-height: 28px; | |||
padding: 0 15px; | |||
.img { | |||
img { | |||
width: 76px; | |||
height: 135.5px; | |||
border: 1px solid #999999; | |||
border-radius: 8px; | |||
} | |||
.title { | |||
font-size: 15px; | |||
margin-top: 15px; | |||
} | |||
} | |||
.textarea { | |||
position: relative; | |||
text-align: center; | |||
border: 1px solid #000; | |||
border-radius: 5px; | |||
&.text { | |||
color: #fff; | |||
border: 1px solid #00ccff; | |||
background-color: #00ccff; | |||
border: none; | |||
margin-bottom: 60px; | |||
textarea { | |||
width: 250px; | |||
height: 367.5px; | |||
border: 1px solid #00000080; | |||
border-radius: 8px; | |||
} | |||
&.voice { | |||
.limit { | |||
position: absolute; | |||
left: 0px; | |||
bottom: -15px; | |||
} | |||
.try { | |||
position: absolute; | |||
left: 20px; | |||
bottom: -35px; | |||
width: 80px; | |||
height: 25px; | |||
line-height: 25px; | |||
text-align: center; | |||
color: #0000004b; | |||
border: 1px solid #0000004b; | |||
border-radius: 5px; | |||
} | |||
} | |||
} | |||
.textarea { | |||
position: relative; | |||
text-align: center; | |||
margin-bottom: 60px; | |||
input { | |||
height: 20px; | |||
border: 1px solid #000; | |||
margin-bottom: 15px; | |||
} | |||
textarea { | |||
border: 1px solid #00000080; | |||
} | |||
.limit { | |||
position: absolute; | |||
left: 25px; | |||
bottom: 10px; | |||
} | |||
.try { | |||
position: absolute; | |||
left: 20px; | |||
bottom: -35px; | |||
width: 80px; | |||
height: 25px; | |||
line-height: 25px; | |||
text-align: center; | |||
color: #0000004b; | |||
border: 1px solid #0000004b; | |||
border-radius: 5px; | |||
} | |||
} | |||
.bottomBtn { | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 0 75px; | |||
margin-bottom: 20px; | |||
padding: 0 32.5px; | |||
margin-top: 50px; | |||
margin-bottom: 30px; | |||
div { | |||
width: 100px; | |||
height: 30px; | |||
color: #484848; | |||
line-height: 30px; | |||
width: 142px; | |||
height: 42px; | |||
color: #fff; | |||
line-height: 42px; | |||
text-align: center; | |||
border: 1px solid #484848; | |||
border: 1px solid #d2d2d2; | |||
border-radius: 7px; | |||
background-color: #d2d2d2; | |||
&.next { | |||
color: #fff; | |||
border: 1px solid #00ccff; | |||
background-color: #00ccff; | |||
border: 1px solid #0068b7; | |||
background-color: #0068b7; | |||
} | |||
} | |||
} | |||
@@ -104,7 +104,7 @@ export default { | |||
// id: "", | |||
type: 1, | |||
personMouldId: this.modelDetail.id, //模板id | |||
personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||
personMouldPath: this.modelDetail.mouldSmId, //模板标识 | |||
// voiceMouldId: "", | |||
// voiceMouldId: "", | |||
}; | |||
@@ -1,7 +1,7 @@ | |||
<template> | |||
<div class="page"> | |||
<HeadTop /> | |||
<img class="showIMG" src="../../assets/img/BG@2x.png" alt="" /> | |||
<img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | |||
<div class="item"> | |||
<div class="title">我的视频作品</div> | |||
<div class="itemList"> | |||
@@ -18,21 +18,23 @@ | |||
'https://smapitest.malls.iformall.com/myVideo/' + item.videoPath | |||
" | |||
/> | |||
<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"> | |||
<div class="videoName"> | |||
{{ item.title || "暂无" }} | |||
</div> | |||
<div class="createTime">视频时长:{{ item.videoTime }}</div> | |||
<div class="createTime">视频容量{{ "46.5Mb" }}</div> | |||
<div class="createTime"> | |||
创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | |||
</div> | |||
</div> | |||
<div v-if="item.videoStatus == 0" class="tag text">草稿</div> | |||
<div v-if="item.videoStatus == 1" class="tag generating">生成中</div> | |||
<div v-if="item.videoStatus == 2" class="tag finish">已完成</div> | |||
<div v-if="item.videoStatus == 3" class="tag fail">失败</div> | |||
</div> | |||
<div v-if="videoList.length <= 0" class="noWork">暂无作品</div> | |||
<div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||
</div> | |||
</div> | |||
<van-pagination | |||
@@ -113,7 +115,7 @@ export default { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=3`, | |||
url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=4`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
@@ -177,9 +179,12 @@ export default { | |||
width: 100%; | |||
} | |||
.item { | |||
padding: 15px; | |||
padding-top: 15px; | |||
padding-bottom: 15px; | |||
.title { | |||
font-size: 20px; | |||
font-size: 15px; | |||
font-weight: 600; | |||
margin-left: 15px; | |||
margin-bottom: 20px; | |||
} | |||
.itemList { | |||
@@ -188,15 +193,25 @@ export default { | |||
display: flex; | |||
justify-content: space-between; | |||
margin-bottom: 25px; | |||
border: 1px solid #0000003a; | |||
border-radius: 5px; | |||
padding: 25px; | |||
border-bottom: 1px solid #00000010; | |||
padding: 0 20px 25px 25px; | |||
.videoPrv { | |||
width: 100px; | |||
width: 150px; | |||
height: 100px; | |||
// background-color: #979797; | |||
video { | |||
width: 100%; | |||
height: 100%; | |||
position: absolute; | |||
width: 150px; | |||
height: 100px; | |||
} | |||
.cover { | |||
position: absolute; | |||
width: 150px; | |||
height: 100px; | |||
line-height: 100px; | |||
background-color: #00000034; | |||
text-align: center; | |||
color: #fff; | |||
} | |||
} | |||
.videoInfo { | |||
@@ -205,7 +220,8 @@ export default { | |||
justify-content: space-between; | |||
margin-left: 10px; | |||
.videoName { | |||
font-size: 15px; | |||
font-size: 16px; | |||
font-weight: 600; | |||
} | |||
.createTime { | |||
font-size: 11px; | |||
@@ -235,24 +251,28 @@ export default { | |||
} | |||
} | |||
.noWork { | |||
font-size: 20px; | |||
width: 100%; | |||
height: 450px; | |||
line-height: 450px; | |||
font-size: 14px; | |||
font-weight: 600; | |||
text-align: center; | |||
} | |||
} | |||
} | |||
.goAdd { | |||
position: fixed; | |||
bottom: 30px; | |||
bottom: 15px; | |||
left: 50%; | |||
width: 300px; | |||
height: 30px; | |||
line-height: 30px; | |||
height: 42px; | |||
line-height: 42px; | |||
font-size: 15px; | |||
color: #fff; | |||
text-align: center; | |||
transform: translateX(-50%); | |||
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||
border-radius: 8px; | |||
background-color: #0068b7; | |||
border-radius: 5px; | |||
box-shadow: #60606082 1px 1px 1px 1px; | |||
} | |||
} | |||