chutingting há 1 ano
ascendente
cometimento
97cca86bab
10 ficheiros alterados com 445 adições e 219 eliminações
  1. +59
    -0
      src/api/login.js
  2. BIN
      src/assets/loginTop.png
  3. +0
    -162
      src/components/identify.vue
  4. +248
    -0
      src/components/login/index.vue
  5. +13
    -3
      src/layouts/index.vue
  6. +15
    -0
      src/store/getters.js
  7. +15
    -0
      src/store/index.js
  8. +76
    -0
      src/store/modules/user.js
  9. +18
    -53
      src/views/aigc/index.vue
  10. +1
    -1
      src/views/article/list.vue

+ 59
- 0
src/api/login.js Ver ficheiro

@@ -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`
})
}

BIN
src/assets/loginTop.png Ver ficheiro

Antes Depois
Largura: 511  |  Altura: 85  |  Tamanho: 7.0 KiB

+ 0
- 162
src/components/identify.vue Ver ficheiro

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

+ 248
- 0
src/components/login/index.vue Ver ficheiro

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

+ 13
- 3
src/layouts/index.vue Ver ficheiro

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


+ 15
- 0
src/store/getters.js Ver ficheiro

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

+ 15
- 0
src/store/index.js Ver ficheiro

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

+ 76
- 0
src/store/modules/user.js Ver ficheiro

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


+ 18
- 53
src/views/aigc/index.vue Ver ficheiro

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


+ 1
- 1
src/views/article/list.vue Ver ficheiro

@@ -42,7 +42,7 @@ export default {
data () {
return {
total: 0,
pageSize: 10,
pageSize: 9,
pageNum: 1,
carouselList: [],
articleList: [],


Carregando…
Cancelar
Guardar