@@ -0,0 +1,59 @@ | |||
import request from './request' | |||
/* eslint-disable */ | |||
let baseUrl = 'https://www.meta-autotv.com' | |||
/** | |||
* 密码登录 | |||
* @returns request | |||
*/ | |||
export const loginApi = (data) => { | |||
return request({ | |||
method: 'POST', | |||
url: baseUrl + `/C/api/user/login`, | |||
data | |||
}) | |||
} | |||
/** | |||
* 发送短信 | |||
* @returns request | |||
*/ | |||
export const sendLoginPhoneCodeApi = (phone) => { | |||
return request({ | |||
method: 'get', | |||
url: baseUrl + `/C/api/user/sendLoginPhoneCode?phone=${phone}` | |||
}) | |||
} | |||
/** | |||
* 短信登录 | |||
* @returns request | |||
*/ | |||
export const doLoginByPhoneApi = (data) => { | |||
return request({ | |||
method: 'POST', | |||
url: baseUrl + `/C/api/user/doLoginByPhone`, | |||
data | |||
}) | |||
} | |||
/** | |||
* 注册 | |||
* @returns request | |||
*/ | |||
export function doRegisterByPhoneAPi(data) { | |||
return request({ | |||
method: 'POST', | |||
url: baseUrl + `/C/api/user/doRegisterByPhone`, | |||
data | |||
}) | |||
} | |||
/** | |||
* 当前用户 | |||
* @returns request | |||
*/ | |||
export const getUserInfoApi = () => { | |||
return request({ | |||
method: 'get', | |||
url: baseUrl + `/C/api/user/getUserInfo` | |||
}) | |||
} |
@@ -1,162 +0,0 @@ | |||
<template> | |||
<div class="s-canvas"> | |||
<canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'SIdentify', | |||
props: { | |||
identifyCode: { | |||
type: String, | |||
default: '1234' | |||
}, | |||
fontSizeMin: { | |||
type: Number, | |||
default: 28 | |||
}, | |||
fontSizeMax: { | |||
type: Number, | |||
default: 40 | |||
}, | |||
backgroundColorMin: { | |||
type: Number, | |||
default: 180 | |||
}, | |||
backgroundColorMax: { | |||
type: Number, | |||
default: 240 | |||
}, | |||
colorMin: { | |||
type: Number, | |||
default: 50 | |||
}, | |||
colorMax: { | |||
type: Number, | |||
default: 160 | |||
}, | |||
lineColorMin: { | |||
type: Number, | |||
default: 40 | |||
}, | |||
lineColorMax: { | |||
type: Number, | |||
default: 180 | |||
}, | |||
dotColorMin: { | |||
type: Number, | |||
default: 0 | |||
}, | |||
dotColorMax: { | |||
type: Number, | |||
default: 255 | |||
}, | |||
contentWidth: { | |||
type: Number, | |||
default: 110 | |||
}, | |||
contentHeight: { | |||
type: Number, | |||
default: 40 | |||
} | |||
}, | |||
methods: { | |||
// 生成一个随机数 | |||
randomNum (min, max) { | |||
return Math.floor(Math.random() * (max - min) + min) | |||
}, | |||
// 生成一个随机的颜色 | |||
randomColor (min, max) { | |||
var r = this.randomNum(min, max) | |||
var g = this.randomNum(min, max) | |||
var b = this.randomNum(min, max) | |||
return 'rgb(' + r + ',' + g + ',' + b + ')' | |||
}, | |||
drawPic () { | |||
var canvas = document.getElementById('s-canvas') | |||
var ctx = canvas.getContext('2d') | |||
ctx.textBaseline = 'bottom' | |||
// 绘制背景 | |||
ctx.fillStyle = this.randomColor( | |||
this.backgroundColorMin, | |||
this.backgroundColorMax | |||
) | |||
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) | |||
// 绘制文字 | |||
for (let i = 0; i < this.identifyCode.length; i++) { | |||
this.drawText(ctx, this.identifyCode[i], i) | |||
} | |||
this.drawLine(ctx) | |||
this.drawDot(ctx) | |||
}, | |||
drawText (ctx, txt, i) { | |||
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax) | |||
ctx.font = | |||
this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' | |||
var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) | |||
var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) | |||
var deg = this.randomNum(-30, 30) | |||
// 修改坐标原点和旋转角度 | |||
ctx.translate(x, y) | |||
ctx.rotate(deg * Math.PI / 270) | |||
ctx.fillText(txt, 0, 0) | |||
// 恢复坐标原点和旋转角度 | |||
ctx.rotate(-deg * Math.PI / 270) | |||
ctx.translate(-x, -y) | |||
}, | |||
drawLine (ctx) { | |||
// 绘制干扰线 | |||
for (let i = 0; i < 2; i++) { | |||
ctx.strokeStyle = this.randomColor( | |||
this.lineColorMin, | |||
this.lineColorMax | |||
) | |||
ctx.beginPath() | |||
ctx.moveTo( | |||
this.randomNum(0, this.contentWidth), | |||
this.randomNum(0, this.contentHeight) | |||
) | |||
ctx.lineTo( | |||
this.randomNum(0, this.contentWidth), | |||
this.randomNum(0, this.contentHeight) | |||
) | |||
ctx.stroke() | |||
} | |||
}, | |||
drawDot (ctx) { | |||
// 绘制干扰点 | |||
for (let i = 0; i < 20; i++) { | |||
ctx.fillStyle = this.randomColor(0, 255) | |||
ctx.beginPath() | |||
ctx.arc( | |||
this.randomNum(0, this.contentWidth), | |||
this.randomNum(0, this.contentHeight), | |||
1, | |||
0, | |||
2 * Math.PI | |||
) | |||
ctx.fill() | |||
} | |||
} | |||
}, | |||
watch: { | |||
identifyCode () { | |||
this.drawPic() | |||
} | |||
}, | |||
mounted () { | |||
this.drawPic() | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.s-canvas { | |||
width: 130px; | |||
height: 38px; | |||
cursor: pointer; | |||
} | |||
.s-canvas canvas{ | |||
margin-top: 1px; | |||
margin-left: 8px; | |||
} | |||
</style> |
@@ -0,0 +1,248 @@ | |||
<template> | |||
<el-dialog title="" :visible.sync="dialogVisible" width="512px" > | |||
<div class="login"> | |||
<div class="top"> | |||
登录体验更多 | |||
<i class="icon el-icon-close" @click="dialogVisible = false"></i> | |||
</div> | |||
<h6>会员登录</h6> | |||
<el-form ref="form" :rules="rules" :model="form" label-width="0px"> | |||
<el-form-item prop="phone"> | |||
<el-input v-model="form.phone" placeholder="手机号"></el-input> | |||
</el-form-item> | |||
<el-form-item prop="password" v-if="loginFlag !== 2"> | |||
<el-input v-model="form.password" show-password placeholder="登录密码"></el-input> | |||
</el-form-item> | |||
<el-form-item prop="code" v-if="loginFlag !== 3"> | |||
<el-input class="identify" v-model="form.code" placeholder="验证码"></el-input> | |||
<img v-if="loginFlag === 1" :src="verifyCodeUrl" class="code" @click='getCode' alt=""> | |||
<el-button v-else class="btn" @click="sendCode">获取验证码</el-button> | |||
</el-form-item> | |||
<el-form-item class="nomargin"> | |||
<el-button type="primary" @click="login('form')">{{loginFlag === 3 ? "注册" : "登录"}}</el-button> | |||
</el-form-item> | |||
<el-form-item class="nomargin" v-if="loginFlag !== 3"> | |||
<a v-if="loginFlag === 1" @click="changeLoginType(2)">使用短信登录</a> | |||
<a v-else @click="changeLoginType(1)">使用密码登录</a> | |||
<a @click="changeLoginType(3)">注册</a> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
</el-dialog> | |||
</template> | |||
<script> | |||
/* eslint-disable */ | |||
import { loginApi, sendLoginPhoneCodeApi, doLoginByPhoneApi, doRegisterByPhoneAPi, getUserInfoApi } from '@/api/login.js' | |||
export default { | |||
props: {}, | |||
data() { | |||
return { | |||
dialogVisible: true, | |||
form: { | |||
phone: '', | |||
password: '', | |||
code: '' | |||
}, | |||
verifyCodeUrl: 'https://www.meta-autotv.com/C/api/user/captcha.jpg', | |||
rules: { | |||
phone: [ | |||
{ required: true, message: '请输入手机号', trigger: 'blur' } | |||
], | |||
password: [ | |||
{ required: true, message: '请输入密码', trigger: 'blur' } | |||
], | |||
code: [ | |||
{ required: true, message: '请输入验证码', trigger: 'blur' } | |||
] | |||
}, | |||
loginFlag: 1 // 1 密码登录 2 短信登录 | |||
} | |||
}, | |||
created() {}, | |||
methods: { | |||
getCode() { | |||
this.verifyCodeUrl = 'https://www.meta-autotv.com/C/api/user/captcha.jpg?time=' + Math.random() | |||
}, | |||
changeLoginType(val) { | |||
this.loginFlag = val | |||
}, | |||
sendCode() { | |||
if (!this.form.phone) { | |||
this.$message({ | |||
message: '请输入手机号', | |||
type: 'warning' | |||
}); | |||
return | |||
} | |||
sendLoginPhoneCodeApi(this.form.phone).then(res => { | |||
if (res.data.coode === 200) { | |||
this.$message({ | |||
message: '发送成功', | |||
type: 'success' | |||
}); | |||
}else { | |||
debugger | |||
this.$message({ | |||
message: res.data.message, | |||
type: 'warning' | |||
}); | |||
} | |||
}) | |||
}, | |||
async login(formName) { | |||
this.$refs[formName].validate(async(valid) => { | |||
if (valid) { | |||
if(this.loginFlag === 3) { | |||
let resData = { | |||
password: this.form.password, | |||
phone: this.form.phone | |||
} | |||
doRegisterByPhoneAPi(resData).then(res => { | |||
if (res.data.code === 200) { | |||
this.$message({ | |||
message: '注册成功', | |||
type: 'success' | |||
}); | |||
this.dialogVisible = false | |||
} else { | |||
this.$message({ | |||
message: res.data.message, | |||
type: 'warning' | |||
}); | |||
} | |||
}) | |||
} else { | |||
loginApi(this.form).then(res => { | |||
if (res.data.code === 200) { | |||
this.$message({ | |||
message: '登录成功', | |||
type: 'success' | |||
}); | |||
this.dialogVisible = false | |||
} | |||
}) | |||
} | |||
} else { | |||
console.log('error submit!!'); | |||
return false; | |||
} | |||
}); | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
::v-deep .el-dialog{ | |||
padding: 0; | |||
position: relative; | |||
border-radius: 15px; | |||
} | |||
.login { | |||
h6{ | |||
margin: 0; | |||
text-align: left; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #000000; | |||
line-height: 48px; | |||
margin-left: 22px; | |||
margin-top: 30px; | |||
} | |||
.top { | |||
background-image: url('../../assets/loginTop.png'); | |||
background-size: cover; | |||
height: 80px; | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
right: 0; | |||
color: #fff; | |||
font-size: 18px; | |||
line-height: 80px; | |||
text-align: left; | |||
padding-left: 43px; | |||
.icon{ | |||
color: #fff; | |||
font-size: 25px; | |||
position: absolute; | |||
right:22px ; | |||
top: 25px; | |||
font-weight: bold; | |||
cursor: pointer; | |||
} | |||
} | |||
} | |||
.el-form { | |||
width: 420px; | |||
margin: 0 auto; | |||
.el-form-item { | |||
width: 420px; | |||
margin-bottom: 12px; | |||
::v-deep .el-input__inner{ | |||
width: 420px; | |||
height: 44px; | |||
background: #F5F5F5; | |||
border-radius: 4px; | |||
border: none; | |||
} | |||
.identify{ | |||
::v-deep .el-input__inner{ | |||
width: 266px; | |||
} | |||
} | |||
.btn { | |||
width: 137px; | |||
height: 44px; | |||
background: #00ADEB; | |||
border-radius: 4px; | |||
color: #fff; | |||
font-size: 16px; | |||
margin: 0; | |||
margin-left: 42px; | |||
} | |||
.code{ | |||
width: 137px; | |||
height: 44px; | |||
border-radius: 4px; | |||
margin-left: 42px; | |||
} | |||
} | |||
.el-form-item:nth-child(3) { | |||
:deep .el-form-item__content { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
} | |||
.el-button { | |||
width: 420px; | |||
height: 54px; | |||
background: #000000; | |||
border-radius: 4px; | |||
color: #fff; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #FFFFFF; | |||
border: none; | |||
margin-top: 20px; | |||
} | |||
.createai { | |||
background-color:#07CAAF | |||
} | |||
.nomargin { | |||
margin-bottom: 0px !important; | |||
a{ | |||
display: block; | |||
line-height: 14px; | |||
cursor: pointer; | |||
padding-top: 10px; | |||
} | |||
} | |||
.identify { | |||
width: 240px; | |||
} | |||
} | |||
</style> |
@@ -4,26 +4,36 @@ | |||
<div class="header"> | |||
<img src="@/assets/logo.png" id="logo" /> | |||
<yqheaders/> | |||
<el-button plain class="login" size="small">注册 / 登陆</el-button> | |||
<el-button plain class="login" size="small" @click="loginFn">注册 / 登录</el-button> | |||
</div> | |||
</el-header> | |||
<el-main> | |||
<router-view /> | |||
</el-main> | |||
<yqfooters/> | |||
<login v-if="loginFlag" /> | |||
</el-container> | |||
</template> | |||
<script> | |||
import yqheaders from '@/components/header.vue' | |||
import yqfooters from '@/components/footer.vue' | |||
import login from '@/components/login' | |||
export default { | |||
name: 'layouts', | |||
data () { | |||
return {} | |||
return { | |||
loginFlag: false | |||
} | |||
}, | |||
components: { | |||
yqheaders, | |||
yqfooters | |||
yqfooters, | |||
login | |||
}, | |||
methods: { | |||
loginFn () { | |||
this.loginFlag = true | |||
} | |||
} | |||
} | |||
</script> | |||
@@ -0,0 +1,15 @@ | |||
/* | |||
* @Date: 2021-07-16 17:52:04 | |||
* @LastEditTime: 2022-07-27 10:48:11 | |||
* @Description: | |||
*/ | |||
const getters = { | |||
sidebar: state => state.app.sidebar, | |||
device: state => state.app.device, | |||
token: state => state.user.token, | |||
avatar: state => state.user.avatar, | |||
name: state => state.user.name, | |||
isChild: state => state.user.isChild, | |||
roles: state => state.user.roles | |||
} | |||
export default getters |
@@ -0,0 +1,15 @@ | |||
import Vue from 'vue' | |||
import Vuex from 'vuex' | |||
import getters from './getters' | |||
import user from './modules/user' | |||
Vue.use(Vuex) | |||
const store = new Vuex.Store({ | |||
modules: { | |||
user | |||
}, | |||
getters | |||
}) | |||
export default store |
@@ -0,0 +1,76 @@ | |||
import { login, logout, getInfo } from '@/api/user' | |||
import { getToken, removeToken } from '@/utils/auth' | |||
import { resetRouter } from '@/router' | |||
const getDefaultState = () => { | |||
return { | |||
loginFlag: false, | |||
phone: '' | |||
} | |||
} | |||
const state = getDefaultState() | |||
const mutations = { | |||
RESET_STATE: (state) => { | |||
Object.assign(state, getDefaultState()) | |||
}, | |||
SET_TOKEN: (state, token) => { | |||
state.token = token | |||
}, | |||
SET_NAME: (state, name) => { | |||
state.name = name | |||
}, | |||
SET_AVATAR: (state, avatar) => { | |||
state.avatar = avatar | |||
}, | |||
SET_ISCHILD: (state, isChild) => { | |||
state.isChild = isChild | |||
}, | |||
SET_Login: (state, roles) => { | |||
state.roles = roles | |||
} | |||
} | |||
const actions = { | |||
setChild({ commit }, isChild) { | |||
commit('SET_ISCHILD', isChild) | |||
}, | |||
setRoles({ commit }, roles) { | |||
commit('SET_ROLES', roles) | |||
}, | |||
setToken({ commit }, token) { | |||
commit('SET_TOKEN', token) | |||
}, | |||
// user login | |||
/* login({ commit }, userInfo) { | |||
const { username, password } = userInfo | |||
return new Promise((resolve, reject) => { | |||
login({ username: username.trim(), password: password }).then(response => { | |||
const { data } = response | |||
commit('SET_TOKEN', data.token) | |||
setToken(data.token) | |||
resolve() | |||
}).catch(error => { | |||
reject(error) | |||
}) | |||
}) | |||
}, */ | |||
// remove token | |||
resetToken({ commit }) { | |||
return new Promise(resolve => { | |||
removeToken() // must remove token first | |||
commit('RESET_STATE') | |||
resolve() | |||
}) | |||
} | |||
} | |||
export default { | |||
namespaced: true, | |||
state, | |||
mutations, | |||
actions | |||
} | |||
@@ -2,27 +2,27 @@ | |||
<div class="aigc"> | |||
<div id="top"> | |||
<Swiper :banner-array="carouselList" /> | |||
<el-form ref="form" :model="form" label-width="0px"> | |||
<!-- <el-form ref="form" :model="form" label-width="0px"> | |||
<el-form-item> | |||
<el-input v-model="form.name" placeholder="手机号"></el-input> | |||
<el-input v-model="form.phone" placeholder="手机号"></el-input> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-input v-model="form.name" placeholder="登陆密码"></el-input> | |||
<el-input v-model="form.password" placeholder="登录密码"></el-input> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-input class="identify" v-model="form.name" placeholder="验证码"></el-input> | |||
<s-identify :identifyCode="identifyCode"></s-identify> | |||
<el-input class="identify" v-model="form.code" placeholder="验证码"></el-input> | |||
<img :src="verifyCodeUrl" class="code" alt=""> | |||
</el-form-item> | |||
<el-form-item class="nomargin"> | |||
<el-button type="primary" >登陆</el-button> | |||
<el-button type="primary" @click="login">登录</el-button> | |||
</el-form-item> | |||
<el-form-item class="nomargin"> | |||
<a>使用短信登陆</a> | |||
<a>使用短信登录</a> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button type="primary" class="createai">制作数字人</el-button> | |||
</el-form-item> | |||
</el-form> | |||
</el-form> --> | |||
</div> | |||
<div id="hot"> | |||
<div class="content"> | |||
@@ -76,15 +76,12 @@ | |||
<script> | |||
import Swiper from '@/components/swiper' | |||
import SwiperHor from '@/components/swiperHor' | |||
import SIdentify from '@/components/identify' | |||
import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js' | |||
export default { | |||
name: 'aigc', | |||
data () { | |||
return { | |||
carouselList: [], | |||
identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz', | |||
identifyCode: '', | |||
rules: { | |||
verifycode: [{ | |||
required: true, | |||
@@ -93,38 +90,30 @@ export default { | |||
}] | |||
}, | |||
form: { | |||
name: '', | |||
region: '', | |||
date1: '', | |||
date2: '', | |||
delivery: false, | |||
type: [], | |||
resource: '', | |||
desc: '' | |||
phone: '', | |||
code: '', | |||
password: '' | |||
}, | |||
ailist: [], | |||
aitxt: {}, | |||
aigczb: [], | |||
aigcsp: [], | |||
gg1: {}, | |||
gg2: {} | |||
gg2: {}, | |||
verifyCodeUrl: 'https://www.meta-autotv.com/C/api/user/captcha.jpg' | |||
} | |||
}, | |||
components: { | |||
SIdentify, | |||
Swiper, | |||
SwiperHor | |||
}, | |||
mounted () { | |||
this.identifyCode = '' | |||
this.makeCode(this.identifyCodes, 4) | |||
this.getguanggao() | |||
this.getshuzirenremark() | |||
this.getshuzirenList() | |||
this.getshuzirenZhiBoList() | |||
this.getvideoList() | |||
this.getlunboList() | |||
// this.yidong() | |||
}, | |||
methods: { | |||
async getlunboList () { | |||
@@ -178,35 +167,6 @@ export default { | |||
}, | |||
randomNum (min, max) { | |||
return Math.floor(Math.random() * (max - min) + min) | |||
}, | |||
// 切换验证码 | |||
refreshCode () { | |||
this.identifyCode = '' | |||
this.makeCode(this.identifyCodes, 4) | |||
}, | |||
// 生成随机验证码 | |||
makeCode (o, l) { | |||
for (let i = 0; i < l; i++) { | |||
this.identifyCode += this.identifyCodes[ | |||
Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0) | |||
] | |||
} | |||
}, | |||
yidong () { | |||
const contentBox = document.getElementById('zbitem') | |||
const scrollBox = document.getElementById('zb') | |||
const imgWidth = 220 | |||
this.scroll(contentBox, scrollBox, imgWidth) | |||
}, | |||
scroll (contentBox, scrollBox, imgWidth) { | |||
setInterval(() => { | |||
scrollBox.scrollLeft++ | |||
// 当一张图片恰好滚动至可视区域外 | |||
if (scrollBox.scrollLeft % imgWidth === 0) { | |||
var el = contentBox.firstElementChild // 获取处于前面的图片 | |||
contentBox.appendChild(el) // appendChild()具备剪切功能,无需手动删除旧节点 | |||
} | |||
}, 2000) | |||
} | |||
} | |||
} | |||
@@ -215,6 +175,11 @@ export default { | |||
.aigc{ | |||
background: #E3E5EA; | |||
} | |||
.code { | |||
width: 138px; | |||
height: 40px; | |||
margin-left: 15px; | |||
} | |||
.el-carousel__container { | |||
height: 590px; | |||
} | |||
@@ -42,7 +42,7 @@ export default { | |||
data () { | |||
return { | |||
total: 0, | |||
pageSize: 10, | |||
pageSize: 9, | |||
pageNum: 1, | |||
carouselList: [], | |||
articleList: [], | |||