feat: 增加作家注册功能

This commit is contained in:
xiongxiaoyang 2022-05-29 15:24:24 +08:00
parent 9fe9a6a0e7
commit 6535af4038
12 changed files with 1287 additions and 70 deletions

View File

@ -1,7 +1,7 @@
# 开发环境配置
ENV = 'development'
VUE_APP_BASE_API_URL = 'http://127.0.0.1:8888/api/front'
VUE_APP_BASE_API_URL = 'http://127.0.0.1:8888/api'
VUE_APP_BASE_IMG_URL = 'http://47.106.243.172:8888'
VUE_APP_BASE_UPLOAD_IMG_URL = 'http://127.0.0.1:8888'

9
src/api/author.js Normal file
View File

@ -0,0 +1,9 @@
import request from '../utils/request'
export function getAuthorStatus() {
return request.get('/author/status');
}
export function register(params) {
return request.post('/author/register', params);
}

View File

@ -1,58 +1,58 @@
import request from '../utils/request'
export function listCategorys(params) {
return request.get('/book/category/list', { params });
return request.get('/front/book/category/list', { params });
}
export function searchBooks(params) {
return request.get('/search/books', { params });
return request.get('/front/search/books', { params });
}
export function getBookById(bookId) {
return request.get(`/book/${bookId}`);
return request.get(`/front/book/${bookId}`);
}
export function addVisitCount(params) {
return request.post('/book/visit', params);
return request.post('/front/book/visit', params);
}
export function getLastChapterAbout(params) {
return request.get('/book/last_chapter/about', { params });
return request.get('/front/book/last_chapter/about', { params });
}
export function listRecBooks(params) {
return request.get('/book/rec_list', { params });
return request.get('/front/book/rec_list', { params });
}
export function listChapters(params) {
return request.get('/book/chapter/list', { params });
return request.get('/front/book/chapter/list', { params });
}
export function getBookContent(chapterId) {
return request.get(`/book/content/${chapterId}`);
return request.get(`/front/book/content/${chapterId}`);
}
export function getPreChapterId(chapterId) {
return request.get(`/book/pre_chapter_id/${chapterId}`);
return request.get(`/front/book/pre_chapter_id/${chapterId}`);
}
export function getNextChapterId(chapterId) {
return request.get(`/book/next_chapter_id/${chapterId}`);
return request.get(`/front/book/next_chapter_id/${chapterId}`);
}
export function listVisitRankBooks() {
return request.get('/book/visit_rank');
return request.get('/front/book/visit_rank');
}
export function listNewestRankBooks() {
return request.get('/book/newest_rank');
return request.get('/front/book/newest_rank');
}
export function listUpdateRankBooks() {
return request.get('/book/update_rank');
return request.get('/front/book/update_rank');
}
export function listNewestComments(params) {
return request.get('/book/comment/newest_list',{ params });
return request.get('/front/book/comment/newest_list',{ params });
}

View File

@ -1,11 +1,11 @@
import request from '../utils/request'
export function listHomeBooks() {
return request.get('/home/books');
return request.get('/front/home/books');
}
export function listHomeFriendLinks() {
return request.get('/home/friend_Link/list');
return request.get('/front/home/friend_Link/list');
}

View File

@ -1,9 +1,9 @@
import request from '../utils/request'
export function listLatestNews() {
return request.get('/news/latest_list');
return request.get('/front/news/latest_list');
}
export function getNewsById(newsId) {
return request.get(`/news/${newsId}`);
return request.get(`/front/news/${newsId}`);
}

View File

@ -1,5 +1,5 @@
import request from '../utils/request'
export function getImgVerifyCode() {
return request.get('/resource/img_verify_code');
return request.get('/front/resource/img_verify_code');
}

View File

@ -1,33 +1,33 @@
import request from '../utils/request'
export function register(params) {
return request.post('/user/register', params);
return request.post('/front/user/register', params);
}
export function login(params) {
return request.post('/user/login', params);
return request.post('/front/user/login', params);
}
export function submitFeedBack(params) {
return request.post('/user/feedback', params);
return request.post('/front/user/feedback', params);
}
export function comment(params) {
return request.post('/user/comment',params);
return request.post('/front/user/comment',params);
}
export function deleteComment(id) {
return request.delete(`/user/comment/${id}`);
return request.delete(`/front/user/comment/${id}`);
}
export function updateComment(id,content) {
return request.putForm(`/user/comment/${id}`,content);
return request.putForm(`/front/user/comment/${id}`,content);
}
export function getUserinfo() {
return request.get('/user');
return request.get('/front/user');
}
export function updateUserInfo(userInfo) {
return request.put('/user',userInfo);
return request.put('/front/user',userInfo);
}

View File

@ -346,16 +346,13 @@ select {
padding: 0 25px;
}
#head .nav a.topAdd {
background: url(../images/top_add.gif) no-repeat 15px top;
padding-left: 35px;
}
#head .nav a:hover, #head .nav a.cur {
background-color: #5f5f5f;
color: #FFF;
}
#head .nav a.topAdd:hover {
background: #60BBFF url(../images/top_add.gif) no-repeat 15px bottom;
}
#head .nav .noLeft {
border-left: 0;
}
@ -370,9 +367,7 @@ select {
background-color: #FFF;
color: #000;
}
#head .nav .active a.topAdd {
background: #FFF url(../images/top_add.gif) no-repeat 15px top;
}
#head .nav .drop {
display: none;
position: absolute;
@ -446,9 +441,7 @@ select {
height: 38px;
overflow: hidden;
}
#menu li.cur {
background: #60BBFF url(../images/menu_cur.gif) no-repeat right 50%;
}
#menu li.cur a {
color: #FFF;
}
@ -458,7 +451,6 @@ select {
line-height: 38px;
}
#menu li i {
background: url(../images/icon_menu.png) no-repeat 13px 0;
float: left;
display: block;
width: 42px;
@ -608,7 +600,6 @@ select {
font-weight: bold;
}
.mainBox h3 .add {
background: #28B779 url(../images/action_btn.gif) no-repeat 20px 50%;
padding-left: 40px;
}
.mainBox .filter {
@ -662,16 +653,12 @@ select {
position: absolute;
z-index: 1;
}
#maskBox .maskBg i {
background: url(../images/icon_picture_big.png) no-repeat;
}
#maskBox #mask {
position: absolute;
z-index: 2;
}
#maskBox #mask i {
background: url(../images/icon_picture_big.png) no-repeat left bottom;
}
#maskBox #success {
background: #60BBFF url();
display: none;
@ -727,7 +714,6 @@ select {
}
#index .indexBox .ipage a:hover {
border: 1px dotted #FFFFFF;
background: #60BBFF url(../images/icon_edit_white.png) no-repeat 12px 50%;
color: #FFF;
}
/*- help -*/
@ -854,7 +840,6 @@ select {
text-align:right;
}
#order .btnShow {
background: #FFFFFF url(../images/icon_edit_blue.png) no-repeat;
border: none;
width:16px;
height:16px;
@ -864,7 +849,6 @@ select {
margin-left:10px;
}
#order .btnHide {
background: #FFFFFF url(../images/icon_no.png) no-repeat;
border: none;
width:14px;
height:14px;
@ -879,7 +863,6 @@ select {
/*
----------------------------------------------- */
#manager .cloudAccount {
background: url(../images/icon_cloud_account.png) no-repeat center top;
text-align:center;
padding-top:80px;
margin-top:150px;
@ -939,7 +922,6 @@ select {
}
/*- handle -*/
#cloud .handle h2 {
background:url(../images/icon_cloud_handle.png) no-repeat left top;
height:46px;
padding-left:45px;
font-size:18px;
@ -955,7 +937,6 @@ select {
}
/*- order -*/
#cloud .order h2 {
background:url(../images/icon_cloud_order.png) no-repeat left top;
height:46px;
padding-left:45px;
font-size:18px;
@ -1014,7 +995,6 @@ select {
font-size:14px;
}
#douFrame .frame h2 .close {
background: url(../images/icon_fork.png) no-repeat;
width:12px;
height:12px;
display:block;
@ -1065,7 +1045,6 @@ select {
text-decoration:underline;
}
#module .uninstall .list h2 {
background:url(../images/icon_cloud_uninstall.png) no-repeat left top;
padding-left:40px;
height:30px;
color:#60BBFF;
@ -1193,7 +1172,6 @@ select {
margin-left: 120px;
}
#mobileBox #mMenu h3 {
background:#60BBFF url(../images/icon_mobile.png) no-repeat center 30px;
color:#FFF;
font-size:14px;
font-weight:bold;
@ -1222,7 +1200,6 @@ select {
overflow: hidden;
}
#login .dologo {
background: url(../images/logo.gif) no-repeat 0 0;
height: 50px;
margin-bottom: 30px;
}
@ -1301,7 +1278,6 @@ select {
----------------------------------------------- */
/*- douMsg -*/
#douMsg {
background: url(../images/icon_exc_small.gif) no-repeat left top;
padding: 27px 0 0 70px;
margin-top: 30px;
}
@ -1310,9 +1286,7 @@ select {
font-weight: bold;
color: #0574C7;
}
#douMsg dl {
background: url(../images/icon_back_arrow.gif) no-repeat right bottom;
}
#douMsg dt {
padding: 10px 0 25px 0;
font-size: 13px;
@ -1328,7 +1302,6 @@ select {
}
/*- outMsg -*/
#outMsg {
background: url(../images/icon_exc.gif) no-repeat left top;
margin: 0px auto;
width: 340px;
padding: 30px 0 0 80px;
@ -1345,7 +1318,7 @@ select {
color: #666666;
}
#outMsg dd {
background: url(../images/icon_back.gif) no-repeat left top;
padding-left: 25px;
font-size: 14px;
}

View File

@ -2,20 +2,52 @@
<div class="mainNav" id="mainNav">
<div class="box_center cf">
<ul class="nav" id="navModule">
<li ><router-link :to="{ name: 'home' }">首页</router-link></li>
<li> <router-link :to="{ name: 'bookclass' }">
全部作品
</router-link></li>
<li><router-link :to="{ name: 'home' }">首页</router-link></li>
<li>
<router-link :to="{ name: 'bookclass' }"> 全部作品 </router-link>
</li>
<li><router-link :to="{ name: 'bookRank' }">排行榜</router-link></li>
<!--<li class=""><a href="/pay/index.html">充值</a></li>
<li><a href="/author/index.html" target="_blank">作家专区</a></li>-->
<!--<li class=""><a href="/pay/index.html">充值</a></li>-->
<li><a @click="goAuthor" href="javascript:void(0)">作家专区</a></li>
</ul>
</div>
</div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getToken} from "@/utils/auth";
import {getAuthorStatus} from "@/api/author"
export default {
name: "Navbar"
name: "Navbar",
setup() {
const route = useRoute();
const router = useRouter();
const goAuthor = async () => {
if (!getToken()) {
router.push({
name: "login",
});
return;
}
const {data} = await getAuthorStatus();
if(data === null){
router.push({
name: "authorRegister",
});
return;
}
let routeUrl = router.resolve({
name: "authorBookList",
});
window.open(routeUrl.href, "_blank");
};
return {
goAuthor,
};
},
};
</script>

View File

@ -67,7 +67,17 @@ const router = createRouter({
name: 'userSetup',
component: () => import('@/views/UserSetup')
}
},
{
path: '/author/register',
name: 'authorRegister',
component: () => import('@/views/author/Register')
},
{
path: '/author/book_list',
name: 'authorBookList',
component: () => import('@/views/author/BookList')
},
]
})

View File

@ -0,0 +1,386 @@
<template>
<div class="header">
<Top @eventSerch="searchByK" />
<Navbar />
</div>
<div class="main box_center cf">
<div class="channelWrap classTable cf">
<div class="so_tag">
<ul class="list">
<li class="so_pd" id="workDirection">
<span class="tit">作品频道</span>
<a
filter-value="0"
href="javascript:void(0)"
@click="loadCategoryList(0)"
:class="`${workDirectionOn == 0 ? 'on' : ''}`"
>男频</a
>
<a
filter-value="1"
href="javascript:void(0)"
@click="loadCategoryList(1)"
:class="`${workDirectionOn == 1 ? 'on' : ''}`"
>女频</a
>
</li>
<li id="idGirl" class="so_class">
<span class="tit">作品分类</span>
<span class="so_boy" id="boyCategoryList">
<a
href="javascript:void(0)"
:class="`${categoryOn == 0 ? 'on' : ''}`"
@click="changeCategory(0)"
>不限</a
>
<a
v-for="(item, index) in bookCategorys"
:key="index"
href="javascript:void(0)"
:class="`${categoryOn == item.id ? 'on' : ''}`"
@click="changeCategory(item.id)"
>{{ item.name }}</a
>
</span>
</li>
<li class="so_progress">
<span class="tit">是否完结</span>
<a
href="javascript:void(0)"
:class="`${bookStatusOn == null ? 'on' : ''}`"
@click="changeBookStatus(null)"
>不限</a
>
<a
filter-value="0"
href="javascript:void(0)"
:class="`${bookStatusOn == 0 ? 'on' : ''}`"
@click="changeBookStatus(0)"
>连载中</a
>
<a
filter-value="1"
href="javascript:void(0)"
:class="`${bookStatusOn == 1 ? 'on' : ''}`"
@click="changeBookStatus(1)"
>已完结</a
>
</li>
<li class="so_words">
<span class="tit">作品字数</span>
<a
href="javascript:void(0)"
:class="`${wordCountOn == null ? 'on' : ''}`"
@click="changeWordCount(null, null)"
>不限</a
>
<a
filter-value-max="300000"
href="javascript:void(0)"
:class="`${wordCountOn == 0 ? 'on' : ''}`"
@click="changeWordCount(0, 300000)"
>30万字以下</a
>
<a
filter-value-min="300000"
filter-value-max="500000"
href="javascript:void(0)"
:class="`${wordCountOn == 300000 ? 'on' : ''}`"
@click="changeWordCount(300000, 500000)"
>30-50万字</a
>
<a
filter-value-min="500000"
filter-value-max="1000000"
href="javascript:void(0)"
:class="`${wordCountOn == 500000 ? 'on' : ''}`"
@click="changeWordCount(500000, 1000000)"
>50-100万字</a
>
<a
filter-value-min="1000000"
href="javascript:void(0)"
:class="`${wordCountOn == 1000000 ? 'on' : ''}`"
@click="changeWordCount(1000000, null)"
>100万字以上</a
>
</li>
<li class="so_update">
<span class="tit">更新时间</span>
<a
href="javascript:void(0)"
:class="`${updateTimeOn == null ? 'on' : ''}`"
@click="changeUpdateTime(null)"
>不限</a
>
<a
filter-value="3"
href="javascript:void(0)"
:class="`${updateTimeOn == 3 ? 'on' : ''}`"
@click="changeUpdateTime(3)"
>三日内</a
>
<a
filter-value="7"
href="javascript:void(0)"
:class="`${updateTimeOn == 7 ? 'on' : ''}`"
@click="changeUpdateTime(7)"
>七日内</a
>
<a
filter-value="15"
href="javascript:void(0)"
:class="`${updateTimeOn == 15 ? 'on' : ''}`"
@click="changeUpdateTime(15)"
>半月内</a
>
<a
filter-value="30"
href="javascript:void(0)"
:class="`${updateTimeOn == 30 ? 'on' : ''}`"
@click="changeUpdateTime(30)"
>一月内</a
>
</li>
<li class="so_sort">
<span class="tit">排序方式</span>
<a href="javascript:void(0)"
:class="`${sortOn == null ? 'on' : ''}`"
@click="changeSort(null)">不限</a>
<a
filter-value="last_index_update_time"
href="javascript:void(0)"
:class="`${sortOn == 'last_chapter_update_time desc' ? 'on' : ''}`"
@click="changeSort('last_chapter_update_time desc')"
>更新时间</a
>
<a filter-value="word_count" href="javascript:void(0)"
:class="`${sortOn == 'word_count desc' ? 'on' : ''}`"
@click="changeSort('word_count desc')"
>总字数</a
>
<a
filter-value="visit_count"
href="javascript:void(0)"
:class="`${sortOn == 'visit_count desc' ? 'on' : ''}`"
@click="changeSort('visit_count desc')"
>点击量</a
>
</li>
</ul>
</div>
</div>
<div class="channelWrap channelClassContent cf">
<div class="updateTable rankTable">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="rank">序号</th>
<th class="style">类别</th>
<th class="name">书名</th>
<th class="chapter">最新章节</th>
<th class="author">作者</th>
<th class="word">字数</th>
</tr>
</thead>
<tbody id="bookList">
<tr v-for="(item, index) in books" :key="index">
<td class="rank">
<i>{{ index + 1 }}</i>
</td>
<td class="style">
<a href="javascript:void(0)" @click="bookDetail(item.id)" cls="13"
>[{{ item.categoryName }}]</a
>
</td>
<td class="name">
<a href="javascript:void(0)" @click="bookDetail(item.id)" v-html="item.bookName"></a>
</td>
<td class="chapter">
<a href="javascript:void(0)" @click="bookDetail(item.id)">{{
item.lastChapterName
}}</a>
</td>
<td class="author">
<a href="javascript:void(0)" v-html="item.authorName"></a>
</td>
<td class="word">{{ wordCountFormat(item.wordCount) }}</td>
</tr>
</tbody>
</table>
<el-pagination
small
layout="prev, pager, next"
:background="backgroud"
:page-size="pageSize"
:total="total"
class="mt-4"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
<Footer />
</template>
<script>
import "@/assets/styles/book.css";
import { reactive, toRefs, onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { searchBooks, listCategorys } from "@/api/book";
import { addDay, dateFormat } from "@/utils";
import Top from "@/components/common/Top";
import Navbar from "@/components/common/Navbar";
import Footer from "@/components/common/Footer";
export default {
name: "authorBookList",
components: {
Top,
Navbar,
Footer,
},
setup() {
const route = useRoute();
const router = useRouter();
const state = reactive({
bookCategorys: [],
books: [],
searchCondition: {},
backgroud: true,
total: 0,
pageSize: 10,
imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
workDirectionOn: 0,
categoryOn: 0,
bookStatusOn: null,
wordCountOn: null,
updateTimeOn: null,
sortOn:null
});
onMounted(() => {
const key = route.query.key;
state.searchCondition.keyword = key;
state.searchCondition.pageSize = 10;
loadCategoryList(0);
});
const search = async () => {
const { data } = await searchBooks(state.searchCondition);
state.books = data.list;
state.searchCondition.pageNum = data.pageNum;
state.searchCondition.pageSize = data.pageSize;
state.total = Number(data.total);
};
const searchByK = (key) => {
state.searchCondition = { keyword: key };
search();
};
const bookDetail = (bookId) => {
router.push({ path: `/book/${bookId}` });
};
const handleCurrentChange = (pageNum) => {
state.searchCondition.pageNum = pageNum;
search();
};
const loadCategoryList = async (workDirection) => {
const { data } = await listCategorys({ workDirection: workDirection });
state.bookCategorys = data;
state.workDirectionOn = workDirection;
state.searchCondition.workDirection = workDirection;
state.categoryOn = 0;
state.searchCondition.categoryId = null;
search();
};
const changeCategory = async (categoryId) => {
state.categoryOn = categoryId;
if (categoryId > 0) {
state.searchCondition.categoryId = categoryId;
} else {
state.searchCondition.categoryId = null;
}
search();
};
const changeBookStatus = async (bookStatus) => {
state.bookStatusOn = bookStatus;
state.searchCondition.bookStatus = bookStatus;
search();
};
const changeWordCount = async (wordCountMin, wordCountMax) => {
state.wordCountOn = wordCountMin;
state.searchCondition.wordCountMin = wordCountMin;
state.searchCondition.wordCountMax = wordCountMax;
search();
};
const changeUpdateTime = async (days) => {
state.updateTimeOn = days;
if (days) {
state.searchCondition.updateTimeMin = dateFormat(
"YYYY-mm-dd",
addDay(-days)
);
} else {
state.searchCondition.updateTimeMin = null;
}
search();
};
const changeSort = async (sort) => {
state.sortOn = sort;
state.searchCondition.sort = sort;
search();
};
return {
...toRefs(state),
bookDetail,
searchByK,
search,
handleCurrentChange,
loadCategoryList,
changeCategory,
changeBookStatus,
changeWordCount,
changeUpdateTime,
changeSort
};
},
computed: {
wordCountFormat(wordCount) {
return (wordCount) => {
if (wordCount.length > 5) {
return parseInt(wordCount / 10000) + "万";
}
if (wordCount.length > 4) {
return parseInt(wordCount / 1000) + "千";
}
return wordCount;
};
},
},
};
</script>
<style>
.el-pagination {
justify-content: center;
}
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
background-color: #f80 !important;
}
.el-pagination {
--el-pagination-hover-color: #f80 !important;
}
</style>

View File

@ -0,0 +1,807 @@
<template>
<div
style="
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
"
>
<div id="main">
<table
width="100%"
border="0"
cellpadding="8"
cellspacing="0"
class="tableBasic"
style="line-height: 40px"
>
<tbody>
<tr>
<td colspan="3" style="text-align: left">
<div style="padding-left: 15px; height: 40px; line-height: 40px">
我是网络小说写手我要注册为小说精品屋签约作者
</div>
</td>
</tr>
<tr>
<td align="right">作者笔名</td>
<td>
<input
v-model="penName"
name="penName"
type="text"
maxlength="8"
id="TxtNiceName"
class="
easyui-validatebox
inpMain
validatebox-text validatebox-invalid
"
data-options="required:true"
validtype="checkPenName"
/>
</td>
<td><span class="notes"> *</span> 长度为2到8位的中英文</td>
</tr>
<tr>
<td align="right">手机号码</td>
<td>
<input
v-model="telPhone"
name="telPhone"
type="text"
id="TxtMobile"
class="
easyui-validatebox
inpMain
validatebox-text validatebox-invalid
"
data-options="required:true"
validtype="chinaMobile"
/>
</td>
<td>
<span class="notes"> *</span>
小说精品屋的编辑会通过这个号码与您联系
</td>
</tr>
<tr>
<td align="right">QQ或微信</td>
<td>
<input
v-model="chatAccount"
name="chatAccount"
type="text"
id="TxtQQ"
class="
easyui-validatebox
inpMain
validatebox-text validatebox-invalid
"
data-options="required:true"
/>
</td>
<td>
<span class="notes"> *</span>
小说精品屋的编辑会通过这个号码与您联系
</td>
</tr>
<tr>
<td align="right">电子邮箱</td>
<td>
<input
v-model="email"
name="email"
type="text"
id="TxtEmail"
class="
easyui-validatebox
inpMain
w300
validatebox-text validatebox-invalid
"
data-options="required:true"
validtype="email"
title=""
/>
</td>
<td><span class="notes"> *</span> 长度为2到15位的中英文数字</td>
</tr>
<tr>
<td align="right">男女主角</td>
<td>
<div>
<ul class="ipage">
<input v-model="workDirection" type="radio" name="workDirection" value="0" />男频
<input v-model="workDirection" type="radio" name="workDirection" value="1" />女频
</ul>
</div>
</td>
<td><span class="notes"> *</span> 请选择作品方向</td>
</tr>
</tbody>
</table>
</div>
<table
width="100%"
border="0"
cellpadding="8"
cellspacing="0"
class="tableBasic"
>
<tbody>
<tr>
<td>
<div
style="padding-left: 110px; margin-top: 10px; margin-bottom: 5px"
>
<input
@click="registerAuthor"
type="button"
name="btnSubmit"
value="立即开始您的作者生涯"
id="btnSubmit"
class="btn"
/>
</div>
</td>
</tr>
<tr>
<td>
<span id="LabErr"></span>
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="HidUId" id="HidUId" value="1095" />
</div>
</template>
<script>
import "@/assets/styles/public.css";
import { reactive, toRefs, onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { getImgVerifyCode } from "@/api/resource";
import { register } from "@/api/author";
import { setToken, setNickName, setUid } from "@/utils/auth";
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
export default {
name: "authorRegister",
components: {
Header,
Footer,
},
setup() {
const route = useRoute();
const router = useRouter();
const state = reactive({
penName: "",
telPhone: "",
chatAccount: "",
email: "",
workDirection: "0",
});
const registerAuthor = async () => {
if (!state.penName) {
ElMessage.error("笔名不能为空!");
return;
}
if (!state.telPhone) {
ElMessage.error("手机号不能为空!");
return;
}
if (!/^1[3-9]\d{9}$/.test(state.telPhone)) {
ElMessage.error("手机号格式不正确!");
return;
}
if (!state.chatAccount) {
ElMessage.error("QQ或微信账号不能为空");
return;
}
if (!state.email) {
ElMessage.error("电子邮箱不能为空!");
return;
}
if (
!/^[A-Za-z0-9\-_]+[A-Za-z0-9\.\-_]*[A-Za-z0-9\-_]+@[A-Za-z0-9]+[A-Za-z0-9\.\-_]*(\.[A-Za-z0-9\.\-_]+)*[A-Za-z0-9]+\.[A-Za-z0-9]+[A-Za-z0-9\.\-_]*[A-Za-z0-9]+$/.test(
state.email
)
) {
ElMessage.error("电子邮箱格式不正确!");
return;
}
const { data } = await register(state);
router.push({ name: "authorBookList" });
};
return {
...toRefs(state),
registerAuthor,
};
},
};
</script>
<style scoped>
.avatar-uploader .avatar {
width: 178px;
height: 178px;
display: block;
}
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
.updateTable .style a {
color: #999;
}
.updateTable .author a {
color: #999;
cursor: text;
}
.bind,
.updateTable .style a:hover {
color: #f65167;
}
.userBox {
/*width: 998px; border: 1px solid #eaeaea;*/
margin: 0 auto 50px;
background: #fff;
border-radius: 6px;
}
.channelViewhistory .userBox {
margin: 0 auto;
}
.user_l {
width: 350px;
float: left;
padding: 100px 124px;
}
.user_l h3 {
font-size: 23px;
font-weight: normal;
line-height: 1;
text-align: center;
}
.user_l #LabErr {
color: #ff4040;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
}
.user_l .log_list {
width: 350px;
}
.user_l .s_input {
margin-bottom: 25px;
font-size: 14px;
}
.s_input {
width: 348px;
height: 38px;
line-height: 38px\9;
vertical-align: middle;
border: 1px solid #ddd;
border-radius: 2px;
}
.icon_name,
.icon_key,
.icon_code {
width: 312px;
padding-left: 36px;
}
.icon_key {
background-position: 13px -51px;
}
.icon_code {
background-position: 13px -117px;
width: 200px;
float: left;
}
.code_pic {
height: 38px;
float: right;
}
.btn_phone {
height: 40px;
width: 100px;
float: right;
cursor: pointer;
padding: 0;
text-align: center;
border-radius: 2px;
background: #dfdfdf;
}
.log_code {
*padding-bottom: 25px;
}
.user_l .btn_red {
width: 100%;
font-size: 19px;
padding: 12px;
}
.autologin {
color: #999;
line-height: 1;
margin-bottom: 18px;
}
.autologin em {
vertical-align: 2px;
margin-left: 4px;
}
.user_r {
width: 259px;
margin: 80px 0;
padding: 20px 70px;
border-left: 1px dotted #e3e3e3;
float: right;
text-align: center;
}
.user_r .tit {
font-size: 16px;
line-height: 1;
padding: 6px 0 25px;
}
.user_r .btn_ora {
padding: 10px 34px;
}
.fast_login {
padding: 60px 0 0;
}
.fast_list {
text-align: center;
padding: 0.5rem;
}
.fast_list li {
display: inline-block;
*display: inline;
zoom: 1;
}
.fast_list li .img {
width: 48px;
height: 48px;
margin: 20px 0 5px;
}
.fast_list li a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}
.fast_list li span {
display: block;
}
.fast_list .login_qq {
margin: 0 42px;
}
.fast_list .login_wb a {
color: #f55c5b;
}
.fast_list .login_qq a {
color: #51b7ff;
}
.fast_list .login_wx a {
color: #66d65e;
}
.fast_tit {
position: relative;
overflow: hidden;
}
.fast_tit .lines {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
line-height: 1;
background: #eaeaea;
}
.fast_tit .title {
background: #fff;
font-size: 16px;
padding: 3px 14px;
position: relative;
display: inline-block;
z-index: 999;
}
/*userinfo*/
.my_l {
width: 198px;
float: left;
font-size: 13px;
padding-top: 20px;
}
.my_l li a {
display: block;
height: 42px;
line-height: 42px;
padding-left: 62px;
border-left: 4px solid #fff;
margin-bottom: 5px;
color: #666;
}
.my_l li .on {
background-color: #fafafa;
border-left: 2px solid #f80;
color: #000;
border-radius: 0 2px 2px 0;
}
.my_l .link_1 {
background-position: 32px -188px;
}
.my_l .link_2 {
background-position: 32px -230px;
}
.my_l .link_3 {
background-position: 32px -272px;
}
.my_l .link_4 {
background-position: 32px -314px;
}
.my_l .link_5 {
background-position: 32px -356px;
}
.my_l .link_6 {
background-position: 32px -397px;
}
.my_l .link_7 {
background-position: 32px -440px;
}
.my_l .link_8 {
background-position: 32px -481px;
}
.my_r {
width: 739px;
padding: 0 30px 30px;
float: right;
border-left: 1px solid #efefef;
min-height: 470px;
}
.my_info {
padding: 30px 0 5px;
}
.user_big_head {
/*width:110px; height:110px; padding:4px; border:1px solid #eaeaea;*/
margin-right: 30px;
float: left;
width: 80px;
height: 80px;
border-radius: 50%;
}
.my_r .my_name {
font-size: 18px;
line-height: 1;
padding: 5px 0 12px 0;
}
.my_r .s_input {
width: 318px;
padding: 0 10px;
}
.my_list li {
line-height: 28px;
}
.my_list li i,
.my_list li em.red {
margin-right: 6px;
}
.my_list .binded {
color: #999;
margin-left: 6px;
}
.my_list .btn_link {
margin-left: 12px;
}
.mytab_list li {
line-height: 30px;
padding: 10px 0;
font-size: 14px;
}
.mytab_list li .tit {
width: 70px;
color: #aaa;
text-align: right;
display: inline-block;
margin-right: 18px;
}
.mytab_list .user_img {
width: 48px;
height: 48px;
vertical-align: middle;
border-radius: 50%;
}
.my_bookshelf .title {
padding: 20px 0 15px;
line-height: 30px;
}
.my_bookshelf h4 {
font-size: 14px;
color: #666;
}
.my_bookshelf h2 {
font-size: 18px;
font-weight: normal;
}
.updateTable {
width: 739px;
color: #999;
}
.updateTable table {
width: 100%;
margin-bottom: 14px;
}
.updateTable th,
.updateTable td {
height: 40px;
line-height: 40px;
vertical-align: middle;
padding-left: 6px;
font-weight: normal;
text-align: left;
}
.updateTable th {
background: #f9f9f9;
color: #333;
border-top: 1px solid #eee;
}
.updateTable td {
height: 40px;
line-height: 40px;
}
.updateTable .style {
width: 80px;
padding-left: 10px;
}
.updateTable .name {
width: 178px;
padding-right: 10px;
}
.updateTable .name a,
.updateTable .chapter a {
max-width: 168px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.updateTable .chapter {
padding-right: 5px;
}
.updateTable .chapter a {
max-width: 220px;
float: left;
}
.updateTable .author {
width: 72px;
text-align: left;
}
.updateTable .goread {
width: 80px;
text-align: center;
}
.updateTable .time {
width: 86px;
}
.updateTable .word {
width: 64px;
padding-right: 10px;
text-align: right;
}
.updateTable .rank {
width: 30px;
padding-right: 10px;
text-align: center;
}
.updateTable .name a,
.updateTable .chapter a,
.updateTable .author a {
height: 40px;
line-height: 40px;
display: inline-block;
overflow: hidden;
}
.updateTable tr:nth-child(2n) td {
background: #fafafa;
}
.dataTable {
width: 739px;
}
.dataTable table {
width: 100%;
margin-bottom: 14px;
border-collapse: collapse;
}
.dataTable th,
.dataTable td {
height: 40px;
line-height: 40px;
vertical-align: middle;
padding: 0 10px;
font-weight: normal;
text-align: center;
border: 1px solid #eaeaea;
}
.dataTable th {
background: #f8f8f8;
}
.nodate {
border-top: 1px solid #eaeaea;
padding: 60px 0;
}
.viewhistoryBox {
/*padding: 0 30px 30px; */
padding: 0 20px 10px;
}
.viewhistoryBox .updateTable {
width: 100%;
}
/*.btn_gray, .btn_red, .btn_ora { font-size:14px; padding:8px 28px }*/
.book_tit {
height: 48px;
line-height: 48px;
margin: 0 14px;
border-bottom: 1px solid #eaeaea;
overflow: hidden;
}
.book_tit .fl {
font-size: 14px;
color: #999;
}
.book_tit .fl h3 {
font-size: 18px;
color: #333;
font-weight: normal;
margin-right: 5px;
display: inline;
}
.book_tit .fr {
font-size: 14px;
}
.commentBar,
.feedback_list {
border-top: 1px solid #eee;
margin-bottom: 15px;
}
/*.comment_list { padding: 16px 0; border-bottom: 1px solid #eee }
.comment_list .user_head { width:54px; height:54px; border-radius:50%; float: left; margin-right: 14px }
.comment_list .li_1 { overflow: hidden }
.comment_list .user_name { color: #ed4259 }
.comment_list .li_2 { padding:3px 0; color:#999 }
.comment_list .li_3, .comment_list .li_4 { margin-left:68px }
.comment_list .reply { padding-left: 12px }
.comment_list .num { color: #ed4259; margin: 0 3px }
.comment_list .li_4 { line-height:34px; padding-top:8px; margin-top:15px; border-top:1px solid #eaeaea }
.comment_list .li_4 .more { background:#f7f7f7; border-radius:2px; color:#ed4259; text-align:center }*/
.no_contet {
padding: 190px 0 40px;
text-align: center;
color: #999;
border-top: 1px solid #eee;
}
.comment_list {
padding: 20px 0;
border-bottom: 1px solid #eee;
}
.comment_list:last-child {
border: none;
}
.comment_list .user_heads {
/*width: 54px; height: 54px; float: left;*/
position: relative;
margin-right: 20px;
}
.comment_list .user_head {
width: 50px;
height: 50px;
border-radius: 50%;
background: #f6f6f6;
}
.comment_list .user_heads span {
display: block;
margin: 0;
position: absolute;
left: 12px;
bottom: 0;
}
.comment_list ul {
/*width: 640px;*/
width: 660px;
}
.comment_list .li_0 {
font-family: "宋体";
}
.comment_list .li_0 strong {
font-size: 14px;
color: #f00;
}
.comment_list .li_1 {
overflow: hidden;
}
.comment_list .user_name {
color: #ed4259;
}
.comment_list .li_2 {
padding: 6px 0;
}
.comment_list .li_3 {
color: #999;
}
.comment_list .reply {
padding-left: 12px;
}
.comment_list .num {
color: #ed4259;
margin: 0 3px;
}
.comment_list .li_4 {
line-height: 34px;
padding-top: 8px;
margin-top: 15px;
border-top: 1px solid #eaeaea;
}
.pl_bar li {
display: block;
}
.pl_bar .name {
color: #666;
padding-top: 2px;
font-size: 14px;
}
.pl_bar .dec {
font-size: 14px;
line-height: 1.8;
padding: 12px 0;
}
.pl_bar .other {
line-height: 24px;
color: #999;
font-size: 13px;
}
.pl_bar .other a {
display: inline-block;
color: #999;
}
.pl_bar .reply {
padding-left: 22px;
}
/*.no_comment { padding: 70px 14px 115px; color: #CCCCCC; text-align: center; font-size: 14px; }*/
.reply_bar {
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 6px;
padding: 10px;
line-height: 1.8;
}
</style>