This commit is contained in:
parent
7236c27327
commit
55f21f25c2
|
|
@ -27,3 +27,4 @@ coverage
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
!/pnpm-lock.yaml
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@ export const getBookDetails = (id: string) => {
|
|||
return service.get('/maku/t_book/' + id)
|
||||
}
|
||||
|
||||
export const useT_bookApi = (id: number) => {
|
||||
return service.get('/maku/t_book/' + id)
|
||||
}
|
||||
|
||||
export const useT_bookSubmitApi = (dataForm: any) => {
|
||||
if (dataForm.id) {
|
||||
return service.put('/maku/t_book', dataForm)
|
||||
|
|
|
|||
|
|
@ -7,9 +7,6 @@
|
|||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="user-dropdown">
|
||||
<router-link to="/book/home">
|
||||
<el-dropdown-item> 商城首页</el-dropdown-item>
|
||||
</router-link>
|
||||
<router-link to="/profile">
|
||||
<el-dropdown-item> {{ $t('app.profile') }} </el-dropdown-item>
|
||||
</router-link>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,6 @@ const constantRoutes: RouteRecordRaw[] = [
|
|||
]
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/book/index'
|
||||
},
|
||||
{
|
||||
path: '/iframe/:query?',
|
||||
component: () => import('../layout/components/Router/Iframe.vue')
|
||||
},
|
||||
|
|
@ -35,48 +31,13 @@ const constantRoutes: RouteRecordRaw[] = [
|
|||
{
|
||||
path: '/404',
|
||||
component: () => import('../views/404.vue')
|
||||
},
|
||||
{
|
||||
path: '/book/index',
|
||||
component: () => import('../views/book/index.vue'),
|
||||
redirect: '/book/home',
|
||||
children: [
|
||||
{
|
||||
path: '/book/home',
|
||||
component: () => import('../views/book/component/home.vue')
|
||||
},
|
||||
{
|
||||
path: '/book/collection',
|
||||
component: () => import('../views/book/component/collection.vue')
|
||||
},
|
||||
{
|
||||
path: '/book/trolley',
|
||||
component: () => import('../views/book/component/trolley.vue')
|
||||
},
|
||||
{
|
||||
path: '/book/my',
|
||||
component: () => import('../views/book/component/my.vue')
|
||||
},
|
||||
{
|
||||
path: '/book/details',
|
||||
component: () => import('../views/book/component/details.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/book/login',
|
||||
component: () => import('../views/book/login.vue')
|
||||
},
|
||||
{
|
||||
path: '/book/personal',
|
||||
component: () => import('../views/user/index.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const asyncRoutes: RouteRecordRaw = {
|
||||
path: '/',
|
||||
component: () => import('../layout/index.vue'),
|
||||
redirect: '/book/index',
|
||||
redirect: '/dashboard/index',
|
||||
children: [
|
||||
{
|
||||
path: '/profile',
|
||||
|
|
@ -94,7 +55,7 @@ const asyncRoutes: RouteRecordRaw = {
|
|||
export const dashboardMenu = [
|
||||
{
|
||||
id: 100,
|
||||
name: '控制台',
|
||||
name: 'Dashboard',
|
||||
url: null,
|
||||
openStyle: 0,
|
||||
icon: 'icon-appstore',
|
||||
|
|
@ -205,17 +166,7 @@ export const router = createRouter({
|
|||
})
|
||||
|
||||
// 白名单列表
|
||||
const whiteList = [
|
||||
'/login',
|
||||
'/book/index',
|
||||
'/book/login',
|
||||
'/book/home',
|
||||
'/book/collection',
|
||||
'/book/trolley',
|
||||
'/book/my',
|
||||
'/book/personal',
|
||||
'/book/details'
|
||||
]
|
||||
const whiteList = ['/login']
|
||||
|
||||
// 路由跳转前
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
|
|
@ -253,9 +204,6 @@ router.beforeEach(async (to, from, next) => {
|
|||
asyncRoutes.children?.push(...keepAliveRoutes)
|
||||
router.addRoute(asyncRoutes)
|
||||
|
||||
// // 添加商城首页菜单
|
||||
// router.addRoute(bookIndexRouter)
|
||||
|
||||
// 错误路由
|
||||
router.addRoute(errorRoute)
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default {
|
|||
version: appPackage.version,
|
||||
|
||||
// 登录成功后，跳转页面
|
||||
loginPage: '/book/index',
|
||||
loginPage: '/',
|
||||
|
||||
// API地址
|
||||
apiUrl: import.meta.env.VITE_API_URL,
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
<template>
|
||||
<el-dropdown class="avatar-container" trigger="hover">
|
||||
<div class="avatar-wrapper">
|
||||
<el-avatar shape="circle" :size="30" :src="userStore.user.avatar"></el-avatar>
|
||||
<span>{{ userStore.user.realName }}</span>
|
||||
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="user-dropdown">
|
||||
<router-link to="/dashboard/workbench">
|
||||
<el-dropdown-item> 控制台 </el-dropdown-item>
|
||||
</router-link>
|
||||
<router-link to="/profile">
|
||||
<el-dropdown-item> {{ $t('app.profile') }} </el-dropdown-item>
|
||||
</router-link>
|
||||
|
||||
<el-dropdown-item divided @click="logout"> {{ $t('app.signOut') }} </el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import constant from '@/utils/constant'
|
||||
import { ElNotification } from 'element-plus'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
|
||||
const logout = () => {
|
||||
userStore.logoutAction().then(() => {
|
||||
ElNotification({
|
||||
title: '登出成功！！！',
|
||||
type: 'success'
|
||||
})
|
||||
router.push({ path: constant.loginPage })
|
||||
|
||||
// 刷新页面
|
||||
//location.reload()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: var(--theme-header-height);
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
color: var(--theme-header-text-color);
|
||||
span {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
//&:hover {
|
||||
// background: var(--theme-header-hover-color);
|
||||
//}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="p-outline">
|
||||
<div class="ppcc-x">
|
||||
<div class="img-collection"></div>
|
||||
<div class="info-collection">进口安佳淡奶油1L动物奶油新西兰家用生日蛋糕裱花蛋挞液专用烘焙</div>
|
||||
<div class="price-collection">
|
||||
<span class="price-un">¥</span>
|
||||
<span class="price-price">30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ppcc-x"></div>
|
||||
<div class="ppcc-x"></div>
|
||||
<div class="ppcc-x"></div>
|
||||
<div class="ppcc-x"></div>
|
||||
<div class="ppcc-x"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.search-suggest-combobox {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.input-search {
|
||||
width: 1004px;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid rgb(255, 80, 0);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
background: none;
|
||||
height: 38px;
|
||||
margin-left: 30px;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 72px;
|
||||
height: 34px;
|
||||
border: none;
|
||||
background: #ff6200;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-outline {
|
||||
background: #fff;
|
||||
width: 1552px;
|
||||
margin: 30px auto;
|
||||
border-radius: 18px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 24px;
|
||||
min-height: 300px;
|
||||
display: flex; /* 添加此行启用Flex布局 */
|
||||
flex-wrap: wrap; /* 允许Flex子项目换行 */
|
||||
box-sizing: border-box; /* 确保padding计算在总宽内 */
|
||||
}
|
||||
|
||||
.ppcc-x {
|
||||
border-radius: 12px;
|
||||
border: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
margin: 16px 0 16px 16px; /* 调整上边距以适应新的换行布局 */
|
||||
position: relative;
|
||||
transition: all 0.5s;
|
||||
width: 158px;
|
||||
height: 270px;
|
||||
padding: 5px;
|
||||
|
||||
.info-collection {
|
||||
height: 48px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
width: 96%;
|
||||
color: #11192d;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
max-height: 48px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.img-collection {
|
||||
background-image: url('https://img.alicdn.com/bao/uploaded/i1/3937219703/O1CN01FZXnRo2LY1zwkI3j0_!!3937219703-0-C2M.jpg');
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-color: #f3f6f8;
|
||||
border-radius: 8px;
|
||||
height: 148px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 148px;
|
||||
}
|
||||
|
||||
.price-collection {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 24px;
|
||||
margin-left: 8px;
|
||||
margin-top: 8px;
|
||||
|
||||
.price-un {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 2px;
|
||||
color: #ff5500;
|
||||
}
|
||||
|
||||
.price-price {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
color: #ff5500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { bookEntity, getBookDetails } from '@/api/maku/t_book'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const bookInfo = ref<bookEntity>({
|
||||
author: '',
|
||||
bookCover: '',
|
||||
bookName: '',
|
||||
createTime: '',
|
||||
description: '',
|
||||
id: 0,
|
||||
introduction: '',
|
||||
price: 0,
|
||||
store: 0,
|
||||
updateTime: ''
|
||||
})
|
||||
const commentList = ref([
|
||||
{
|
||||
id: 'string',
|
||||
comment: 'string',
|
||||
user: {
|
||||
id: 'string',
|
||||
username: 'string',
|
||||
avatar: 'https://gw.alicdn.com/imgextra/i3/2215468931119/O1CN019pzVLv1K8Y4vdSOVw_!!2215468931119.jpg'
|
||||
},
|
||||
children: {}
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
comment: 'string',
|
||||
user: {
|
||||
id: 'string',
|
||||
username: 'string',
|
||||
avatar: 'https://gw.alicdn.com/imgextra/i3/2215468931119/O1CN019pzVLv1K8Y4vdSOVw_!!2215468931119.jpg'
|
||||
},
|
||||
children: {}
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
comment: 'string',
|
||||
user: {
|
||||
id: 'string',
|
||||
username: 'string',
|
||||
avatar: 'https://gw.alicdn.com/imgextra/i3/2215468931119/O1CN019pzVLv1K8Y4vdSOVw_!!2215468931119.jpg'
|
||||
},
|
||||
children: {}
|
||||
}
|
||||
])
|
||||
onMounted(async () => {
|
||||
let id = route.query.id as string
|
||||
if (id) {
|
||||
const { data } = await getBookDetails(id)
|
||||
bookInfo.value = data
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="details-main">
|
||||
<div class="details-p">
|
||||
<div class="img-show">
|
||||
<img :src="bookInfo.bookCover" alt="" />
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<h1>{{ bookInfo.bookName }}</h1>
|
||||
<div class="text-price">
|
||||
<span class="price-unit">¥</span>
|
||||
<span class="price-count">{{ bookInfo.price }}</span>
|
||||
</div>
|
||||
<div class="book-introduction">{{ bookInfo.introduction }}</div>
|
||||
<div class="book-introduction">{{ bookInfo.description }}</div>
|
||||
<div class="botton-group">
|
||||
<button class="buy">立刻购买</button>
|
||||
<button class="shopping-card">加入购物车</button>
|
||||
<button class="collection">收藏</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 1000px">
|
||||
<div class="user-comment">用户评论</div>
|
||||
<div v-for="item in commentList" :key="item.id" class="user-comment-list">
|
||||
<img :src="item.user.avatar" alt="" />
|
||||
<div style="margin-left: 15px">
|
||||
<div style="font-size: 18px">{{ item.user.username }}</div>
|
||||
<div style="font-size: 25px">{{ item.comment }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.details-main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.details-p {
|
||||
width: 1552px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
margin-top: 30px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.text-right {
|
||||
text-align: left;
|
||||
width: 750px;
|
||||
|
||||
.text-price {
|
||||
margin-top: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.price-unit {
|
||||
font-size: 17px;
|
||||
color: #ff5500;
|
||||
}
|
||||
|
||||
.price-count {
|
||||
color: #ff5500;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-show {
|
||||
width: 624px;
|
||||
height: 624px;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 120px;
|
||||
|
||||
img {
|
||||
height: 624px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.botton-group {
|
||||
margin-top: 120px;
|
||||
|
||||
.buy {
|
||||
background: linear-gradient(90deg, rgb(255, 119, 0), rgb(255, 73, 0));
|
||||
width: 203px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.shopping-card {
|
||||
background: linear-gradient(90deg, rgb(255, 203, 0), rgb(255, 148, 2));
|
||||
width: 203px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collection {
|
||||
width: 94px;
|
||||
height: 48px;
|
||||
margin-left: 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #ccc;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.collection:hover {
|
||||
color: #ff5500;
|
||||
border: 2px solid #ff5500;
|
||||
}
|
||||
}
|
||||
|
||||
.user-comment {
|
||||
margin: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.user-comment-list {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 1000px;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.book-introduction {
|
||||
margin-top: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,165 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { bookEntity, bookList, bookSearchList } from '@/api/maku/t_book'
|
||||
|
||||
const router = useRouter()
|
||||
const books = ref<bookEntity[]>([])
|
||||
|
||||
const inputSearchValue = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await bookList()
|
||||
books.value = res.data
|
||||
})
|
||||
|
||||
const handleSearch = async () => {
|
||||
const res = await bookSearchList(inputSearchValue.value)
|
||||
books.value = res.data
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="search-suggest-combobox">
|
||||
<div class="input-search">
|
||||
<input v-model="inputSearchValue" placeholder="马嘉祺" />
|
||||
<button @click="handleSearch">搜索</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen-outer">
|
||||
<div v-for="item in books" :key="item.id" class="tb-pick-content-item" @click="router.push(`/book/details?id=${item.id}`)">
|
||||
<div class="img-wrapper">
|
||||
<img :src="item.bookCover" style="width: 100%; height: 120%" alt="Book Cover" />
|
||||
</div>
|
||||
<div class="info-wrapper">{{ item.bookName }}</div>
|
||||
<div class="price-wrapper">
|
||||
<span class="price-unit">¥</span>
|
||||
<span class="price-value">{{ item.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.search-suggest-combobox {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.input-search {
|
||||
width: 1004px;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid rgb(255, 80, 0);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
background: none;
|
||||
height: 38px;
|
||||
margin-left: 30px;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 72px;
|
||||
height: 34px;
|
||||
border: none;
|
||||
background: #ff6200;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen-outer {
|
||||
transform: translate(10px);
|
||||
background: #fff;
|
||||
width: 1552px;
|
||||
margin: 30px auto;
|
||||
border-radius: 18px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 24px;
|
||||
min-height: 300px;
|
||||
display: flex; /* 添加此行启用Flex布局 */
|
||||
flex-wrap: wrap; /* 允许Flex子项目换行 */
|
||||
box-sizing: border-box; /* 确保padding计算在总宽内 */
|
||||
}
|
||||
|
||||
.tb-pick-content-item {
|
||||
border-radius: 12px;
|
||||
border: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
margin: 16px 0 16px 16px; /* 调整上边距以适应新的换行布局 */
|
||||
position: relative;
|
||||
transition: all 0.5s;
|
||||
width: 240px;
|
||||
height: 358px;
|
||||
padding: 5px;
|
||||
|
||||
.info-wrapper {
|
||||
height: 48px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
width: 96%;
|
||||
color: #11192d;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
max-height: 48px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.tb-pick-content-item:hover {
|
||||
border: 1px solid #ff6200;
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
// background-image: url();
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-color: #f3f6f8;
|
||||
border-radius: 8px;
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.price-wrapper {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 24px;
|
||||
margin-left: 8px;
|
||||
margin-top: 8px;
|
||||
|
||||
.price-unit {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 2px;
|
||||
color: #ff5500;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
color: #ff5500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const active = ref(0)
|
||||
|
||||
const parentBorder = ref(false)
|
||||
const childBorder = ref(false)
|
||||
const tableData = [
|
||||
{
|
||||
id: 'string',
|
||||
trading_hour: 'string',
|
||||
total_price: 'string',
|
||||
book_details: [
|
||||
{
|
||||
id: 'string',
|
||||
book_name: 'string',
|
||||
price: 'string',
|
||||
book_cover: 'string',
|
||||
introduction: 'string',
|
||||
description: 'string',
|
||||
store: 'string',
|
||||
create_time: 'string',
|
||||
update_time: 'string'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="my-body">
|
||||
<ul class="nav-body">
|
||||
<li :class="{ active: active == 0 }" @click="active = 0">所有订单</li>
|
||||
<li :class="{ active: active == 1 }" @click="active = 1">待付款</li>
|
||||
<li :class="{ active: active == 2 }" @click="active = 2">待发货</li>
|
||||
<li :class="{ active: active == 3 }" @click="active = 3">待收货</li>
|
||||
<li :class="{ active: active == 4 }" @click="active = 4">待评价</li>
|
||||
</ul>
|
||||
|
||||
<el-table :data="tableData" :border="parentBorder" style="width: 1000px; margin-top: 50px">
|
||||
<el-table-column label="编号" prop="id" />
|
||||
<el-table-column label="交易时间" prop="trading_hour" />
|
||||
<el-table-column label="订单总额" prop="total_price" />
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<div style="margin: 20px; color: #ff5500; font-weight: bold">购买详情</div>
|
||||
<el-table :data="props.row.book_details" :border="childBorder">
|
||||
<el-table-column label="书本编号" prop="id" />
|
||||
<el-table-column label="封面" prop="book_cover" />
|
||||
<el-table-column label="书名" prop="book_name" />
|
||||
<el-table-column label="价格" prop="price" />
|
||||
<el-table-column label="介绍" prop="introduction" />
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-body {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.nav-body {
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
width: 1000px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
margin-right: 10px;
|
||||
width: 109px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #ff6600;
|
||||
border-bottom: 2px solid #ff6600 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const tableData = [
|
||||
{
|
||||
id: 'string',
|
||||
book_name: 'string',
|
||||
price: 'string',
|
||||
book_cover: 'string',
|
||||
introduction: 'string'
|
||||
}
|
||||
]
|
||||
|
||||
const handleSelect = item => {
|
||||
console.log(item)
|
||||
}
|
||||
|
||||
const handleSelectAll = item => {
|
||||
console.log(item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="trolley-main">
|
||||
<div class="torry-body">
|
||||
<div class="all">全部商品（30）</div>
|
||||
<el-button round>删除</el-button>
|
||||
<el-button round>移入收藏夹</el-button>
|
||||
<el-table :data="tableData" style="width: 100%" @select="handleSelect" @select-all="handleSelectAll">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="书本编号" width="120" property="id" />
|
||||
|
||||
<el-table-column property="book_cover" label="封面" width="120" />
|
||||
<el-table-column property="book_name" label="书名" width="240" />
|
||||
<el-table-column property="price" label="价格" />
|
||||
<el-table-column property="introduction" label="介绍" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="torry-sum">
|
||||
<div class="torry-top"><span class="title">结算明细</span> <span class="sp">已选0件商品</span></div>
|
||||
<div class="torry-b">
|
||||
<div style="color: #7c889c; text-align: center; margin-top: 80px">还没有待结算的商品</div>
|
||||
</div>
|
||||
<div class="torry-bottom">
|
||||
<div><span style="font-size: 14px; font-weight: bold">合计：</span><span style="font-size: 24px; color: #ff5500">0</span></div>
|
||||
<button>结算</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.trolley-main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
|
||||
.torry-body {
|
||||
width: 1000px;
|
||||
min-height: 18px;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
|
||||
.all {
|
||||
margin: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.torry-sum {
|
||||
width: 368px;
|
||||
min-height: 280px;
|
||||
position: fixed;
|
||||
background: white;
|
||||
z-index: 50;
|
||||
right: 40px;
|
||||
border-radius: 20px;
|
||||
box-shadow: rgba(180, 180, 180, 0.2) 3px 3px;
|
||||
padding: 20px;
|
||||
|
||||
.torry-top {
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sp {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.torry-b {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.torry-bottom {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 78px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
height: 48px;
|
||||
width: 120px;
|
||||
background-color: #ff5000;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import User from './component/User.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
// 记录切换值
|
||||
const changeValue = ref('/book/index')
|
||||
|
||||
const changeRouters = () => {
|
||||
if (changeValue.value == '/book/my') {
|
||||
changeValue.value = '/book/index'
|
||||
} else if (changeValue.value == '/book/index') {
|
||||
changeValue.value = '/book/my'
|
||||
}
|
||||
router.push(changeValue.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-color">
|
||||
<div class="nav-link">
|
||||
<div class="site-nav-bd">
|
||||
<ul>
|
||||
<li @click="changeRouters">{{ changeValue == '/book/my' ? '商城首页' : '我的淘宝' }}</li>
|
||||
<li @click="router.push('/book/trolley')">
|
||||
<el-icon>
|
||||
<ShoppingCart />
|
||||
</el-icon>
|
||||
购物车
|
||||
</li>
|
||||
<li @click="router.push('/book/collection')">
|
||||
<el-icon>
|
||||
<Collection />
|
||||
</el-icon>
|
||||
收藏夹
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li v-if="userStore?.token"><User></User></li>
|
||||
<li v-else @click="router.push('/login')">登录/注册</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 35px"></div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav-link {
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
|
||||
.site-nav-bd {
|
||||
margin: 0 auto;
|
||||
width: 1190px;
|
||||
height: 35px;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style-type: none;
|
||||
height: 35px;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
color: #ff4400;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f5f8fa;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useLogin } from '@/api/book'
|
||||
import { ElNotification } from 'element-plus'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loginForm = ref({
|
||||
username: 'admin1',
|
||||
password: '123456',
|
||||
rePassword: '123456'
|
||||
})
|
||||
const handleLogin = () => {
|
||||
if (active.value == '0') {
|
||||
console.log('登录')
|
||||
useLogin(loginForm.value).then(res => {
|
||||
ElNotification({
|
||||
title: '登录成功！！',
|
||||
type: 'success'
|
||||
})
|
||||
if (route.query.returnUrl) {
|
||||
router.push(route.query.returnUrl as string)
|
||||
}
|
||||
window.document.cookie = 'book_user=' + res.data
|
||||
})
|
||||
} else if (active.value == '1') {
|
||||
active.value = '0'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.status) {
|
||||
active.value = route.query.status as string
|
||||
}
|
||||
})
|
||||
const active = ref('0')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-color">
|
||||
<div class="login-main">
|
||||
<div class="login-c">
|
||||
<form id="login-form">
|
||||
<div class="login-choice">
|
||||
<div :class="{ active: active == '0' }" @click="active = '0'">用户登录</div>
|
||||
<div :class="{ active: active == '1' }" @click="active = '1'">用户注册</div>
|
||||
</div>
|
||||
<input v-model="loginForm.username" class="fm-text" placeholder="用户名" />
|
||||
<input v-model="loginForm.password" class="fm-text" placeholder="密码" type="password" />
|
||||
<input v-if="active == '1'" v-model="loginForm.rePassword" class="fm-text" placeholder="确认密码" type="password" />
|
||||
<button @click.prevent="handleLogin">{{ active == '0' ? '登录' : '注册' }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bg-color {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f5f8fa;
|
||||
overflow-y: scroll;
|
||||
|
||||
.login-main {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 200px;
|
||||
justify-content: center;
|
||||
|
||||
.login-c {
|
||||
width: 735px;
|
||||
height: 514px;
|
||||
border-radius: 18px;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
font-size: 25px;
|
||||
|
||||
.login-choice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 50px;
|
||||
font-weight: 900;
|
||||
div {
|
||||
width: 120px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #ff6200;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.fm-text {
|
||||
padding-left: 20px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
opacity: 1;
|
||||
border: none;
|
||||
background: #f3f6f8;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #ff5500;
|
||||
font-weight: 900;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,10 +10,10 @@
|
|||
<div class="login-form">
|
||||
<div class="login-title">
|
||||
<el-button link :class="loginType === 'account' ? 'account' : ''" @click="loginSwitch('account')">{{ $t('app.signIn') }}</el-button>
|
||||
<el-button link :class="loginType === 'register' ? 'account' : ''" @click="loginSwitch('register')">{{ $t('app.register') }}</el-button>
|
||||
<el-button link :class="loginType === 'register' ? 'account' : ''" @click="loginSwitch('register')">{{ $t('app.mobileSignIn') }}</el-button>
|
||||
</div>
|
||||
<account v-if="loginType === 'account'" />
|
||||
<register v-if="loginType === 'register'" />
|
||||
<mobile v-if="loginType === 'register'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user