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