Explorar el Código

创作中心

release
HolyKnightIX hace 2 años
padre
commit
4675b3b135
Se han modificado 12 ficheros con 585 adiciones y 41 borrados
  1. +16
    -18
      src/App.vue
  2. +2
    -0
      src/api/baseUrl.js
  3. BIN
      src/assets/img/imgPrv.png
  4. BIN
      src/assets/img/modelPrv.png
  5. BIN
      src/assets/img/testIMG.png
  6. +71
    -0
      src/components/common/head.vue
  7. +30
    -2
      src/components/home/home.vue
  8. +33
    -0
      src/copy.vue
  9. +16
    -0
      src/router/index.js
  10. +52
    -21
      src/views/login/login.vue
  11. +183
    -0
      src/views/model/chooseModel.vue
  12. +182
    -0
      src/views/myPage/myPage.vue

+ 16
- 18
src/App.vue Ver fichero

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

+ 2
- 0
src/api/baseUrl.js Ver fichero

@@ -0,0 +1,2 @@
const baseUrl = ' https://smapitest.malls.iformall.com/C'
export default baseUrl

BIN
src/assets/img/imgPrv.png Ver fichero

Antes Después
Anchura: 321  |  Altura: 219  |  Tamaño: 12 KiB

BIN
src/assets/img/modelPrv.png Ver fichero

Antes Después
Anchura: 331  |  Altura: 576  |  Tamaño: 14 KiB

BIN
src/assets/img/testIMG.png Ver fichero

Antes Después
Anchura: 747  |  Altura: 185  |  Tamaño: 11 KiB

+ 71
- 0
src/components/common/head.vue Ver fichero

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

+ 30
- 2
src/components/home/home.vue Ver fichero

@@ -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() {


+ 33
- 0
src/copy.vue Ver fichero

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

+ 16
- 0
src/router/index.js Ver fichero

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


+ 52
- 21
src/views/login/login.vue Ver fichero

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


+ 183
- 0
src/views/model/chooseModel.vue Ver fichero

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

+ 182
- 0
src/views/myPage/myPage.vue Ver fichero

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

Cargando…
Cancelar
Guardar