@@ -4,12 +4,14 @@ | |||||
<img src="../../assets/img/logoh.png" alt class="logo" /> | <img src="../../assets/img/logoh.png" alt class="logo" /> | ||||
<!-- <div class="logoTitle">metavatar</div> --> | <!-- <div class="logoTitle">metavatar</div> --> | ||||
</div> | </div> | ||||
<div class="loginBox"> | |||||
<!-- 短信验证码登录 --> | |||||
<div class="loginBox" v-if="isCodeLogin"> | |||||
<div class="welcome">登录邃芒</div> | <div class="welcome">登录邃芒</div> | ||||
<el-form ref="form" :rules="rules" :model="form"> | <el-form ref="form" :rules="rules" :model="form"> | ||||
<el-form-item class="phone" prop="phone"> | <el-form-item class="phone" prop="phone"> | ||||
<el-input class="phoneInput" v-model="form.phone"></el-input> | <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">{{ | <el-button class="getCode" type="text" @click="getCode">{{ | ||||
codeInfo | codeInfo | ||||
}}</el-button> | }}</el-button> | ||||
@@ -24,7 +26,46 @@ | |||||
<div class="inputCode">请输入短信验证码</div> | <div class="inputCode">请输入短信验证码</div> | ||||
</el-form-item> | </el-form-item> | ||||
<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-item> | ||||
</el-form> | </el-form> | ||||
</div> | </div> | ||||
@@ -41,6 +82,8 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
codeInfo: "获取验证码", | codeInfo: "获取验证码", | ||||
isCodeLogin: true, | |||||
// 短信验证码登录 | |||||
form: { | form: { | ||||
phone: "", | phone: "", | ||||
code: "", | 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 { | .getCode { | ||||
position: absolute; | position: absolute; | ||||
top: 1px; | |||||
right: 10px; | right: 10px; | ||||
color: #0068b7; | color: #0068b7; | ||||
} | } | ||||
@@ -230,10 +300,21 @@ export default { | |||||
padding: 9px; | padding: 9px; | ||||
background-color: #0068b7; | background-color: #0068b7; | ||||
border-radius: 5px; | border-radius: 5px; | ||||
&.inside { | |||||
top: 10px; | |||||
} | |||||
} | |||||
.forgetPwd { | |||||
position: relative; | |||||
top: -10px; | |||||
float: left; | |||||
font-size: 12px; | |||||
color: #0068b7; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
/deep/ .el-input__inner { | /deep/ .el-input__inner { | ||||
height: 42px; | |||||
border: 1px solid #0068b7; | border: 1px solid #0068b7; | ||||
} | } | ||||
</style> | </style> |
@@ -1,13 +1,14 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<HeadTop /> | <HeadTop /> | ||||
<div class="chooseModel"> | |||||
<!-- <div class="chooseModel"> | |||||
<div :class="phase == 1 ? 'active' : ''">选择模板</div> | <div :class="phase == 1 ? 'active' : ''">选择模板</div> | ||||
<div :class="phase == 2 ? 'active' : ''">录入文案</div> | <div :class="phase == 2 ? 'active' : ''">录入文案</div> | ||||
<div :class="phase == 3 ? '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"> | ||||
<div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | ||||
全部模板 | 全部模板 | ||||
@@ -18,23 +19,27 @@ | |||||
<div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | ||||
男性模板 | 男性模板 | ||||
</div> | </div> | ||||
<div style="background-color: #46464661">自建模板</div> | |||||
</div> | </div> | ||||
</div> | |||||
<div class="choose"> | |||||
<div class="modeList"> | <div class="modeList"> | ||||
<div | <div | ||||
class="model" | class="model" | ||||
:class="currentId == item.id ? 'active' : ''" | |||||
v-if="modeList.length >= 1" | v-if="modeList.length >= 1" | ||||
v-for="(item, index) in modeList" | v-for="(item, index) in modeList" | ||||
:key="index" | :key="index" | ||||
@click="goDetail(item.id)" | |||||
@click="selectModel(item.id)" | |||||
> | > | ||||
<img :src="item.coverImg" alt="" /> | <img :src="item.coverImg" alt="" /> | ||||
<div class="modelName">{{ item.title }}</div> | <div class="modelName">{{ item.title }}</div> | ||||
<div class="setPaper">录入文案</div> | |||||
</div> | </div> | ||||
<div class="alt" v-if="modeList.length == 0">暂无可用模板</div> | <div class="alt" v-if="modeList.length == 0">暂无可用模板</div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="blank" v-if="modeList.length <= 2"></div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -52,9 +57,95 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
phase: 1, | |||||
type: 0, | 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: { | computed: { | ||||
@@ -73,10 +164,13 @@ export default { | |||||
chooseModel(num) { | chooseModel(num) { | ||||
this.phase = num; | this.phase = num; | ||||
}, | }, | ||||
chooseType(num) { | chooseType(num) { | ||||
this.type = num; | this.type = num; | ||||
this.getModeList(num); | this.getModeList(num); | ||||
}, | }, | ||||
// 获取模板列表 | |||||
getModeList(sex) { | getModeList(sex) { | ||||
const AccessToken = localStorage.getItem("AccessToken"); | const AccessToken = localStorage.getItem("AccessToken"); | ||||
if (sex == 0) { | if (sex == 0) { | ||||
@@ -102,13 +196,84 @@ export default { | |||||
Toast.fail(err.message); | 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() { | 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 { | .type { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
align-items: center; | align-items: center; | ||||
padding: 0 30px; | |||||
padding: 0 25px; | |||||
margin-bottom: 20px; | margin-bottom: 20px; | ||||
div { | 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; | border-radius: 5px; | ||||
text-align: center; | text-align: center; | ||||
transition: all 0.3s; | |||||
&.active { | &.active { | ||||
color: #fff; | 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 { | .modeList { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
align-items: center; | align-items: center; | ||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
margin: auto; | margin: auto; | ||||
padding: 0 25px; | |||||
padding: 0 10px; | |||||
.model { | .model { | ||||
text-align: center; | |||||
position: relative; | |||||
text-align: left; | |||||
margin-bottom: 25px; | margin-bottom: 25px; | ||||
border: 1px solid #00000028; | |||||
padding: 8px; | |||||
border-radius: 8px; | |||||
transition: all 0.3s; | |||||
opacity: 0.9; | |||||
img { | img { | ||||
width: 150px; | width: 150px; | ||||
height: 220px; | height: 220px; | ||||
} | } | ||||
.modelName { | .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 { | .alt { | ||||
font-size: 18px; | font-size: 18px; | ||||
margin: 80px auto; | margin: 80px auto; | ||||
height: 450px; | |||||
line-height: 450px; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.blank { | |||||
width: 1px; | |||||
height: 1px; | |||||
margin-bottom: 240px; | |||||
} | |||||
</style> | </style> |
@@ -72,12 +72,16 @@ export default { | |||||
position: relative; | position: relative; | ||||
padding: 30px; | padding: 30px; | ||||
text-align: center; | text-align: center; | ||||
.title { | .title { | ||||
font-size: 18px; | font-size: 18px; | ||||
margin-bottom: 20px; | margin-bottom: 20px; | ||||
} | } | ||||
video { | video { | ||||
width: 80%; | |||||
width: 240px; | |||||
height: 427px; | |||||
border: 0.5px solid #000; | |||||
border-radius: 8px; | |||||
} | } | ||||
img { | img { | ||||
position: absolute; | position: absolute; | ||||
@@ -86,32 +90,39 @@ export default { | |||||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||||
} | } | ||||
.desc { | .desc { | ||||
font-size: 16px; | |||||
position: relative; | |||||
right: 45px; | |||||
bottom: 8px; | |||||
font-size: 12px; | |||||
margin-top: 20px; | margin-top: 20px; | ||||
span { | span { | ||||
color: #00ccff; | |||||
text-decoration: underline; | |||||
color: #0006ff; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.bottomBtn { | .bottomBtn { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
padding: 0 75px; | |||||
padding: 0 32.5px; | |||||
margin-top: 20px; | margin-top: 20px; | ||||
margin-bottom: 20px; | margin-bottom: 20px; | ||||
div { | div { | ||||
width: 100px; | |||||
height: 30px; | |||||
width: 142px; | |||||
height: 42px; | |||||
color: #484848; | color: #484848; | ||||
line-height: 30px; | |||||
line-height: 42px; | |||||
text-align: center; | text-align: center; | ||||
border: 1px solid #484848; | border: 1px solid #484848; | ||||
border-radius: 7px; | border-radius: 7px; | ||||
&.back { | |||||
color: #fff; | |||||
border: 1px solid #d2d2d2; | |||||
background-color: #d2d2d2; | |||||
} | |||||
&.next { | &.next { | ||||
color: #fff; | color: #fff; | ||||
border: 1px solid #00ccff; | |||||
background-color: #00ccff; | |||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -1,30 +1,22 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<HeadTop /> | <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> | ||||
<div class="bottomBtn"> | <div class="bottomBtn"> | ||||
<div class="back" @click="back">上一步</div> | <div class="back" @click="back">上一步</div> | ||||
<div class="next" @click="goNext">下一步</div> | <div class="next" @click="goNext">下一步</div> | ||||
@@ -112,7 +104,7 @@ export default { | |||||
// id: "", | // id: "", | ||||
type: 1, | type: 1, | ||||
personMouldId: this.modelDetail.id, //模板id | personMouldId: this.modelDetail.id, //模板id | ||||
personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||||
personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | |||||
paperwork: this.paperwork, | paperwork: this.paperwork, | ||||
title: this.modelDetail.title, | title: this.modelDetail.title, | ||||
// voiceMouldId: "", | // voiceMouldId: "", | ||||
@@ -144,6 +136,7 @@ export default { | |||||
}); | }); | ||||
}) | }) | ||||
.catch((err) => { | .catch((err) => { | ||||
console.log(err, "err"); | |||||
Toast.fail(err.message); | Toast.fail(err.message); | ||||
}); | }); | ||||
}, | }, | ||||
@@ -154,117 +147,88 @@ export default { | |||||
this.getDetailById(this.id); | this.getDetailById(this.id); | ||||
} else { | } else { | ||||
this.modelDetail = this.$route.query.modelDetail; | this.modelDetail = this.$route.query.modelDetail; | ||||
console.log(this.modelDetail); | |||||
} | } | ||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
<style lang="scss" scoped> | <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; | 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; | display: flex; | ||||
justify-content: space-between; | 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; | 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; | color: #0000004b; | ||||
border: 1px solid #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 { | .bottomBtn { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
padding: 0 75px; | |||||
margin-bottom: 20px; | |||||
padding: 0 32.5px; | |||||
margin-top: 50px; | |||||
margin-bottom: 30px; | |||||
div { | div { | ||||
width: 100px; | |||||
height: 30px; | |||||
color: #484848; | |||||
line-height: 30px; | |||||
width: 142px; | |||||
height: 42px; | |||||
color: #fff; | |||||
line-height: 42px; | |||||
text-align: center; | text-align: center; | ||||
border: 1px solid #484848; | |||||
border: 1px solid #d2d2d2; | |||||
border-radius: 7px; | border-radius: 7px; | ||||
background-color: #d2d2d2; | |||||
&.next { | &.next { | ||||
color: #fff; | color: #fff; | ||||
border: 1px solid #00ccff; | |||||
background-color: #00ccff; | |||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -104,7 +104,7 @@ export default { | |||||
// id: "", | // id: "", | ||||
type: 1, | type: 1, | ||||
personMouldId: this.modelDetail.id, //模板id | personMouldId: this.modelDetail.id, //模板id | ||||
personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||||
personMouldPath: this.modelDetail.mouldSmId, //模板标识 | |||||
// voiceMouldId: "", | // voiceMouldId: "", | ||||
// voiceMouldId: "", | // voiceMouldId: "", | ||||
}; | }; | ||||
@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<div class="page"> | <div class="page"> | ||||
<HeadTop /> | <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="item"> | ||||
<div class="title">我的视频作品</div> | <div class="title">我的视频作品</div> | ||||
<div class="itemList"> | <div class="itemList"> | ||||
@@ -18,21 +18,23 @@ | |||||
'https://smapitest.malls.iformall.com/myVideo/' + item.videoPath | '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> | ||||
<div class="videoInfo"> | <div class="videoInfo"> | ||||
<div class="videoName"> | <div class="videoName"> | ||||
{{ item.title || "暂无" }} | {{ item.title || "暂无" }} | ||||
</div> | </div> | ||||
<div class="createTime">视频时长:{{ item.videoTime }}</div> | |||||
<div class="createTime">视频容量{{ "46.5Mb" }}</div> | |||||
<div class="createTime"> | <div class="createTime"> | ||||
创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | ||||
</div> | </div> | ||||
</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> | ||||
<div v-if="videoList.length <= 0" class="noWork">暂无作品</div> | |||||
<div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<van-pagination | <van-pagination | ||||
@@ -113,7 +115,7 @@ export default { | |||||
const AccessToken = localStorage.getItem("AccessToken"); | const AccessToken = localStorage.getItem("AccessToken"); | ||||
this.$axios({ | this.$axios({ | ||||
method: "get", | method: "get", | ||||
url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=3`, | |||||
url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=4`, | |||||
headers: { | headers: { | ||||
"Content-Type": "application/json;charset=UTF-8", | "Content-Type": "application/json;charset=UTF-8", | ||||
token: AccessToken, | token: AccessToken, | ||||
@@ -177,9 +179,12 @@ export default { | |||||
width: 100%; | width: 100%; | ||||
} | } | ||||
.item { | .item { | ||||
padding: 15px; | |||||
padding-top: 15px; | |||||
padding-bottom: 15px; | |||||
.title { | .title { | ||||
font-size: 20px; | |||||
font-size: 15px; | |||||
font-weight: 600; | |||||
margin-left: 15px; | |||||
margin-bottom: 20px; | margin-bottom: 20px; | ||||
} | } | ||||
.itemList { | .itemList { | ||||
@@ -188,15 +193,25 @@ export default { | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
margin-bottom: 25px; | margin-bottom: 25px; | ||||
border: 1px solid #0000003a; | |||||
border-radius: 5px; | |||||
padding: 25px; | |||||
border-bottom: 1px solid #00000010; | |||||
padding: 0 20px 25px 25px; | |||||
.videoPrv { | .videoPrv { | ||||
width: 100px; | |||||
width: 150px; | |||||
height: 100px; | height: 100px; | ||||
// background-color: #979797; | |||||
video { | 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 { | .videoInfo { | ||||
@@ -205,7 +220,8 @@ export default { | |||||
justify-content: space-between; | justify-content: space-between; | ||||
margin-left: 10px; | margin-left: 10px; | ||||
.videoName { | .videoName { | ||||
font-size: 15px; | |||||
font-size: 16px; | |||||
font-weight: 600; | |||||
} | } | ||||
.createTime { | .createTime { | ||||
font-size: 11px; | font-size: 11px; | ||||
@@ -235,24 +251,28 @@ export default { | |||||
} | } | ||||
} | } | ||||
.noWork { | .noWork { | ||||
font-size: 20px; | |||||
width: 100%; | |||||
height: 450px; | |||||
line-height: 450px; | |||||
font-size: 14px; | |||||
font-weight: 600; | |||||
text-align: center; | text-align: center; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.goAdd { | .goAdd { | ||||
position: fixed; | position: fixed; | ||||
bottom: 30px; | |||||
bottom: 15px; | |||||
left: 50%; | left: 50%; | ||||
width: 300px; | width: 300px; | ||||
height: 30px; | |||||
line-height: 30px; | |||||
height: 42px; | |||||
line-height: 42px; | |||||
font-size: 15px; | font-size: 15px; | ||||
color: #fff; | color: #fff; | ||||
text-align: center; | text-align: center; | ||||
transform: translateX(-50%); | 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; | box-shadow: #60606082 1px 1px 1px 1px; | ||||
} | } | ||||
} | } | ||||