@@ -1,38 +1,36 @@ | |||
<template> | |||
<div id="app"> | |||
<top/> | |||
<transition name="app" mode="out-in"> | |||
<router-view></router-view> | |||
</transition> | |||
<tail/> | |||
<tail /> | |||
</div> | |||
</template> | |||
<script> | |||
import top from "./components/common/top" | |||
import tail from "./components/common/tail" | |||
import top from "./components/common/top"; | |||
import tail from "./components/common/tail"; | |||
export default { | |||
components:{ | |||
components: { | |||
top, | |||
tail | |||
tail, | |||
}, | |||
data(){ | |||
return{} | |||
data() { | |||
return {}; | |||
}, | |||
} | |||
}; | |||
</script> | |||
<style lang="scss"> | |||
body,p{ | |||
body, | |||
p { | |||
margin: 0 0; | |||
padding: 0 0; | |||
} | |||
input{ | |||
background:none; | |||
outline:none; | |||
border:none; | |||
padding: 0; | |||
margin: 0; | |||
input { | |||
background: none; | |||
outline: none; | |||
border: none; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
</style> |
@@ -0,0 +1,2 @@ | |||
const baseUrl = ' https://smapitest.malls.iformall.com/C' | |||
export default baseUrl |
@@ -0,0 +1,71 @@ | |||
<template> | |||
<div class="page"> | |||
<div class="logoBox" @click="go('/')"> | |||
<img src="../../assets/img/LOGO1.png" class="logo" /> | |||
<div class="userInfo"> | |||
<div>用户名</div> | |||
<img class="userImg" src="../../assets/img/user center.png" /> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
Vue.use(Toast); | |||
export default { | |||
data() { | |||
return {}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
}, | |||
created() {}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
.logoBox { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
overflow: hidden; | |||
cursor: pointer; | |||
background-color: #606060; | |||
.logo { | |||
float: left; | |||
width: 140px; | |||
height: 40px; | |||
} | |||
.userInfo { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
color: #fff; | |||
.userImg { | |||
float: right; | |||
width: 30px; | |||
height: 30px; | |||
margin-top: 3px; | |||
margin-right: 10px; | |||
margin-left: 15px; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,5 +1,6 @@ | |||
<template> | |||
<div class="Box"> | |||
<top /> | |||
<div class="topBox"> | |||
<div class="more" @click="showPopup"> | |||
<div class="wire"></div> | |||
@@ -396,12 +397,17 @@ import "swiper/dist/js/swiper"; | |||
import "swiper/dist/css/swiper.css"; | |||
import Swiper from "swiper"; | |||
import { mapState, mapActions } from "vuex"; | |||
import top from "../common/top.vue"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import { Toast } from "vant"; | |||
import Vue from "vue"; | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
top, | |||
}, | |||
data() { | |||
return { | |||
userName: "", | |||
@@ -601,8 +607,30 @@ export default { | |||
...mapActions(["setCharacters"]), | |||
goLogin() { | |||
console.log(111); | |||
this.$router.push("/login"); | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
if (AccessToken) { | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/userVideo/list?pageNum=1&pageSize=3`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
} else { | |||
this.$router.push("/myPage"); | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
} else { | |||
this.$router.push("/login"); | |||
} | |||
}, | |||
showPopup() { | |||
@@ -0,0 +1,33 @@ | |||
<template> | |||
<div></div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
Vue.use(Toast); | |||
export default { | |||
data() { | |||
return {}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
}, | |||
created() {}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped></style> |
@@ -28,12 +28,28 @@ const routes = [ | |||
// component: Home | |||
component: () => import("../components/styleAdd/styleAdd"), | |||
}, | |||
// 登录 | |||
{ | |||
path: '/login', | |||
name: 'login', | |||
// component: Home | |||
component: () => import("../views/login/login"), | |||
}, | |||
// 创作中心首页 | |||
{ | |||
path: '/myPage', | |||
name: 'myPage', | |||
// component: Home | |||
component: () => import("../views/myPage/myPage"), | |||
}, | |||
// 创作中心首页 | |||
{ | |||
path: '/chooseModel', | |||
name: 'chooseModel', | |||
// component: Home | |||
component: () => import("../views/model/chooseModel"), | |||
}, | |||
] | |||
const router = new VueRouter({ | |||
@@ -1,7 +1,11 @@ | |||
<template> | |||
<div class="page"> | |||
<div class="logoBox" @click="go('/')"> | |||
<img src="../../assets/img/LOGO1.png" alt class="logo" /> | |||
<!-- <div class="logoTitle">metavatar</div> --> | |||
</div> | |||
<div class="loginBox"> | |||
<div class="welcome">欢迎加入MetAvatar</div> | |||
<div class="welcome">欢迎加入metAvatar</div> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<el-form-item class="phone" prop="phone"> | |||
<el-input | |||
@@ -35,7 +39,7 @@ | |||
import Vue from "vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
Vue.use(Toast); | |||
export default { | |||
data() { | |||
@@ -79,6 +83,7 @@ export default { | |||
getCode() { | |||
const phoneValue = this.form.phone; | |||
localStorage.setItem("phoneValue", phoneValue); | |||
let phoneReg = /^1[35789]\d{9}$/; | |||
let phoneValide = phoneReg.test(phoneValue); | |||
@@ -87,28 +92,36 @@ export default { | |||
} else { | |||
this.$axios({ | |||
method: "get", | |||
url: `https://smapitest.malls.iformall.com/C/api/user/sendLoginPhoneCode?phone=${phoneValue}`, | |||
url: `${baseUrl}/api/user/sendLoginPhoneCode?phone=${phoneValue}`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
}, | |||
}) | |||
.then((res) => { | |||
Toast.success("短信验证码发送成功!"); | |||
this.codeInfo = 60; | |||
const timer = setInterval(() => { | |||
if (this.codeInfo != 1) { | |||
this.codeInfo--; | |||
} else { | |||
clearInterval(timer); | |||
this.codeInfo = "获取验证码"; | |||
} | |||
}, 1000); | |||
console.log(res.data); | |||
if (res.data.code != 200) { | |||
Toast.fail(res.data.message); | |||
} else { | |||
Toast.success("短信验证码发送成功!"); | |||
this.codeInfo = 60; | |||
const timer = setInterval(() => { | |||
if (this.codeInfo != 1) { | |||
this.codeInfo--; | |||
} else { | |||
clearInterval(timer); | |||
this.codeInfo = "获取验证码"; | |||
} | |||
}, 1000); | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
} | |||
}, | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
login() { | |||
const data = { | |||
phone: this.form.phone, | |||
@@ -116,21 +129,21 @@ export default { | |||
}; | |||
this.$axios({ | |||
method: "post", | |||
url: `https://smapitest.malls.iformall.com/C/api/user/doLoginByPhone`, | |||
url: `${baseUrl}/api/user/doLoginByPhone`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
}, | |||
data, | |||
}) | |||
.then((res) => { | |||
console.log(res, "res"); | |||
if (res.data.code == 200) { | |||
// console.log(res, "res"); | |||
if (res.data.code != 200) { | |||
Toast.fail(res.data.message); | |||
} else { | |||
Toast.success("登录成功!"); | |||
const token = res.data.data.token; | |||
localStorage.setItem("AccessToken", token); | |||
this.$router.push("/"); | |||
} else { | |||
Toast.fail(res.data.message); | |||
this.$router.push("/myPage"); | |||
} | |||
}) | |||
.catch((err) => { | |||
@@ -138,13 +151,31 @@ export default { | |||
}); | |||
}, | |||
}, | |||
created() { | |||
const phoneValue = localStorage.getItem("phoneValue"); | |||
if (phoneValue) { | |||
this.form.phone = phoneValue; | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
background-color: #000000cd; | |||
padding-top: 36px; | |||
.logoBox { | |||
// margin-top: 10px; | |||
margin-left: 5px; | |||
margin-top: 10px; | |||
float: left; | |||
overflow: hidden; | |||
cursor: pointer; | |||
.logo { | |||
float: left; | |||
width: 140px; | |||
height: 40px; | |||
} | |||
} | |||
.loginBox { | |||
height: 500px; | |||
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||
@@ -0,0 +1,183 @@ | |||
<template> | |||
<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 v-show="phase == 1" class="choose"> | |||
<div class="type"> | |||
<div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | |||
全部模板 | |||
</div> | |||
<div :class="type == 1 ? 'active' : ''" @click="chooseType(1)"> | |||
女性模板 | |||
</div> | |||
<div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | |||
男性模板 | |||
</div> | |||
<div style="background-color: #46464661">自建模板</div> | |||
</div> | |||
<div class="modeList"> | |||
<div | |||
class="model" | |||
v-if="modeList.length >= 1" | |||
v-for="(item, index) in modeList" | |||
:key="index" | |||
@click="goDetail(item.id)" | |||
> | |||
<img :src="item.coverImg" alt="" /> | |||
<div class="modelName">{{ item.title }}</div> | |||
</div> | |||
<div class="alt" v-if="modeList.length == 0">暂无可用模板</div> | |||
</div> | |||
</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 baseUrl from "../../api/baseUrl"; | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
HeadTop, | |||
}, | |||
data() { | |||
return { | |||
phase: 1, | |||
type: 0, | |||
modeList: [], | |||
}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
chooseModel(num) { | |||
this.phase = num; | |||
}, | |||
chooseType(num) { | |||
this.type = num; | |||
this.getModeList(num); | |||
}, | |||
getModeList(sex) { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
if (sex == 0) { | |||
sex = ""; | |||
} | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/mouldPatch/list?sex=${sex}&type=1&pageNum=1&pageSize=10`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
} | |||
this.modeList = res.data.data.list; | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
goDetail(id) { | |||
console.log(id); | |||
}, | |||
}, | |||
created() { | |||
this.getModeList(0); | |||
}, | |||
}; | |||
</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: 100%; | |||
line-height: 32px; | |||
text-align: center; | |||
border: 1px solid #46464661; | |||
&.active { | |||
background-color: #00ccff; | |||
color: #fff; | |||
} | |||
} | |||
} | |||
.choose { | |||
margin-bottom: 40px; | |||
.type { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 0 30px; | |||
margin-bottom: 20px; | |||
div { | |||
width: 65px; | |||
height: 25px; | |||
line-height: 25px; | |||
border: 1px solid #797979; | |||
border-radius: 5px; | |||
text-align: center; | |||
&.active { | |||
color: #fff; | |||
border: 1px solid #9d00ff5d; | |||
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||
} | |||
} | |||
} | |||
.modeList { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
margin: auto; | |||
padding: 0 25px; | |||
.model { | |||
text-align: center; | |||
margin-bottom: 25px; | |||
img { | |||
width: 150px; | |||
height: 220px; | |||
} | |||
.modelName { | |||
font-size: 15px; | |||
margin-top: 10px; | |||
} | |||
} | |||
.alt { | |||
font-size: 18px; | |||
margin: 80px auto; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,182 @@ | |||
<template> | |||
<div class="page"> | |||
<HeadTop /> | |||
<img class="showIMG" src="../../assets/img/testIMG.png" alt="" /> | |||
<div class="item"> | |||
<div class="title">我的视频作品</div> | |||
<div class="itemList"> | |||
<div class="videoModel"> | |||
<div class="videoPrv"> | |||
<img src="../../assets/img/imgPrv.png" /> | |||
</div> | |||
<div class="videoInfo"> | |||
<div class="videoName"> | |||
视频名称视频名称视频名称视频名称视频名称视频名称 | |||
</div> | |||
<div class="createTime">创建时间:2022-10-18 12:13:14</div> | |||
</div> | |||
</div> | |||
<div class="videoModel"> | |||
<div class="videoPrv"> | |||
<img src="../../assets/img/imgPrv.png" /> | |||
</div> | |||
<div class="videoInfo"> | |||
<div class="videoName"> | |||
视频名称视频名称视频名称视频名称视频名称视频名称 | |||
</div> | |||
<div class="createTime">创建时间:2022-10-18 12:13:14</div> | |||
</div> | |||
</div> | |||
<div class="videoModel"> | |||
<div class="videoPrv"> | |||
<img src="../../assets/img/imgPrv.png" /> | |||
</div> | |||
<div class="videoInfo"> | |||
<div class="videoName"> | |||
视频名称视频名称视频名称视频名称视频名称视频名称 | |||
</div> | |||
<div class="createTime">创建时间:2022-10-18 12:13:14</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
HeadTop, | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
getVideoList() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/userVideo/list?pageNum=1&pageSize=3`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
console.log(res, "res"); | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
goCreateNew() { | |||
this.$router.push("/chooseModel"); | |||
}, | |||
}, | |||
created() { | |||
this.getVideoList(); | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
.logoBox { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
overflow: hidden; | |||
cursor: pointer; | |||
background-color: #606060; | |||
.logo { | |||
float: left; | |||
width: 140px; | |||
height: 40px; | |||
} | |||
.userInfo { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
color: #fff; | |||
.userImg { | |||
float: right; | |||
width: 30px; | |||
height: 30px; | |||
margin-top: 3px; | |||
margin-right: 10px; | |||
margin-left: 15px; | |||
} | |||
} | |||
} | |||
.item { | |||
padding: 15px; | |||
.title { | |||
font-size: 20px; | |||
margin-bottom: 20px; | |||
} | |||
.itemList { | |||
.videoModel { | |||
display: flex; | |||
justify-content: space-between; | |||
margin-bottom: 20px; | |||
.videoPrv { | |||
width: 320px; | |||
} | |||
.videoInfo { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-between; | |||
margin-left: 10px; | |||
.videoName { | |||
font-size: 15px; | |||
} | |||
.createTime { | |||
font-size: 11px; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.goAdd { | |||
position: fixed; | |||
bottom: 50px; | |||
left: 50%; | |||
width: 300px; | |||
height: 30px; | |||
line-height: 30px; | |||
font-size: 15px; | |||
color: #fff; | |||
text-align: center; | |||
transform: translateX(-50%); | |||
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||
border-radius: 8px; | |||
box-shadow: #60606082 1px 1px 1px 1px; | |||
} | |||
} | |||
</style> |