work/book-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: work:4ba7f85676ba45595408dd9f8e7ac42187728906
Branches Tags
work:main
..
compare: work:22daba05c8589fd977d261e04d9866c090b25d2d
Branches Tags
work:main

No commits in common. "4ba7f85676ba45595408dd9f8e7ac42187728906" and "22daba05c8589fd977d261e04d9866c090b25d2d" have entirely different histories.
4ba7f85676 ... 22daba05c8

25 changed files with 186 additions and 691 deletions
Show Stats Expand all files Collapse all files

67
src/icons/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

20
src/router/index.ts
View File

@ -56,20 +56,12 @@ const constantRoutes: RouteRecordRaw[] = [
{ {
path: '/book/my', path: '/book/my',
component: () => import('../views/book/component/my.vue') component: () => import('../views/book/component/my.vue')
},
{
path: '/book/details',
component: () => import('../views/book/component/details.vue')
} }
] ]
}, },
{ {
path: '/book/login', path: '/book/login',
component: () => import('../views/book/login.vue') component: () => import('../views/book/login.vue')
},
{
path: '/book/personal',
component: () => import('../views/user/index.vue')
} }
] ]
@ -205,17 +197,7 @@ export const router = createRouter({
}) })
// 白名单列表 // 白名单列表
const whiteList = [ const whiteList = ['/login', '/book/index', '/book/login', '/book/home', '/book/collection', '/book/trolley', '/book/my']
'/login',
'/book/index',
'/book/login',
'/book/home',
'/book/collection',
'/book/trolley',
'/book/my',
'/book/personal',
'/book/details'
]
// 路由跳转前 // 路由跳转前
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {

184
src/views/book/component/details.vue
View File

@ -1,184 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue'
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: {}
}
])
</script>
<template>
<div class="details-main">
<div class="details-p">
<div class="img-show">
<img src="https://gw.alicdn.com/imgextra/i3/2215468931119/O1CN019pzVLv1K8Y4vdSOVw_!!2215468931119.jpg" />
</div>
<div class="text-right">
<h1>纯种银渐层幼猫活体宠物猫英国短毛猫银渐层英短银渐层银渐层猫咪</h1>
<div class="text-price">
<span class="price-unit">¥</span>
<span class="price-count">300</span>
</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" />
<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;
}
}
</style>

92
src/views/book/component/my.vue
View File

@ -1,91 +1,5 @@
<script setup lang="ts"> <script setup lang="ts"></script>
import { ref } from 'vue'
const active = ref(0) <template></template>
const parentBorder = ref(false) <style scoped lang="scss"></style>
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>

129
src/views/book/component/trolley.vue
View File

@ -1,128 +1,5 @@
<script setup lang="ts"> <script setup lang="ts"></script>
const tableData = [
{
id: 'string',
book_name: 'string',
price: 'string',
book_cover: 'string',
introduction: 'string'
}
]
const handleSelect = item => { <template></template>
console.log(item)
}
const handleSelectAll = item => { <style scoped lang="scss"></style>
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>

2
src/views/book/index.vue
View File

@ -44,7 +44,6 @@ const changeRouters = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div style="height: 35px"></div>
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
@ -55,7 +54,6 @@ const changeRouters = () => {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
width: 100%; width: 100%;
height: 35px; height: 35px;
position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 10000; z-index: 10000;

42
src/views/maku/t_book/add-or-update.vue
View File

@ -11,16 +11,7 @@
<el-input v-model="dataForm.price" placeholder=""></el-input> <el-input v-model="dataForm.price" placeholder=""></el-input>
</el-form-item> </el-form-item>
<el-form-item label="封面" prop="bookCover"> <el-form-item label="封面" prop="bookCover">
<el-upload <el-input v-model="dataForm.bookCover" placeholder=""></el-input>
class="avatar-uploader"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="dataForm.bookCover" :src="dataForm.bookCover" style="width: 150px" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item> </el-form-item>
<el-form-item label="书籍介绍" prop="introduction"> <el-form-item label="书籍介绍" prop="introduction">
<el-input v-model="dataForm.introduction" placeholder=""></el-input> <el-input v-model="dataForm.introduction" placeholder=""></el-input>
@ -29,7 +20,13 @@
<el-input v-model="dataForm.description" placeholder=""></el-input> <el-input v-model="dataForm.description" placeholder=""></el-input>
</el-form-item> </el-form-item>
<el-form-item label="库存" prop="store"> <el-form-item label="库存" prop="store">
<el-input-number v-model="dataForm.store" min="0" max="1000"></el-input-number> <el-input v-model="dataForm.store" placeholder=""></el-input>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-input v-model="dataForm.createTime" placeholder=""></el-input>
</el-form-item>
<el-form-item label="修改时间" prop="updateTime">
<el-input v-model="dataForm.updateTime" placeholder=""></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -43,30 +40,12 @@
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es' import { ElMessage } from 'element-plus/es'
import { useT_bookApi, useT_bookSubmitApi } from '@/api/maku/t_book' import { useT_bookApi, useT_bookSubmitApi } from '@/api/maku/t_book'
import { UploadProps } from 'element-plus'
const emit = defineEmits(['refreshDataList']) const emit = defineEmits(['refreshDataList'])
const visible = ref(false) const visible = ref(false)
const dataFormRef = ref() const dataFormRef = ref()
const imageUrl = ref('')
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
if (rawFile.type !== 'image/jpeg') {
ElMessage.error('Avatar picture must be JPG format!')
return false
} else if (rawFile.size / 1024 / 1024 > 2) {
ElMessage.error('Avatar picture size can not exceed 2MB!')
return false
}
return true
}
const dataForm = reactive({ const dataForm = reactive({
id: '', id: '',
bookName: '', bookName: '',
@ -77,8 +56,7 @@ const dataForm = reactive({
description: '', description: '',
store: '', store: '',
createTime: '', createTime: '',
updateTime: '' updateTime: ''})
})
const init = (id?: number) => { const init = (id?: number) => {
visible.value = true visible.value = true
@ -103,7 +81,7 @@ const getT_book = (id: number) => {
const dataRules = ref({ const dataRules = ref({
bookName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }], bookName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
price: [{ required: true, message: '必填项不能为空', trigger: 'blur' }], price: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
store: [{ required: true, message: '必填项不能为空', trigger: 'blur' }] store: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
}) })
// 表单提交 // 表单提交

7
src/views/maku/t_book_collection/add-or-update.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false"> <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px" @keyup.enter="submitHandle()"> <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px" @keyup.enter="submitHandle()">
<el-form-item label="用户编号" prop="userId"> <el-form-item label="用户编号" prop="userId">
<el-input v-model="dataForm.userId" placeholder=""></el-input> <el-input v-model="dataForm.userId" placeholder=""></el-input>
</el-form-item> </el-form-item>
@ -36,8 +37,7 @@ const dataForm = reactive({
userId: '', userId: '',
bookId: '', bookId: '',
createTime: '', createTime: '',
updateTime: '' updateTime: ''})
})
const init = (id?: number) => { const init = (id?: number) => {
visible.value = true visible.value = true
@ -59,7 +59,8 @@ const getT_book_collection = (id: number) => {
}) })
} }
const dataRules = ref({}) const dataRules = ref({
})
// 表单提交 // 表单提交
const submitHandle = () => { const submitHandle = () => {

2
src/views/maku/t_book_collection/index.vue
View File

@ -50,7 +50,7 @@
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update> <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
</el-card> </el-card>
</template> </template>

6
src/views/maku/t_book_comment/add-or-update.vue
View File

@ -44,8 +44,7 @@ const dataForm = reactive({
comment: '', comment: '',
parentId: '', parentId: '',
createTime: '', createTime: '',
updateTime: '' updateTime: ''})
})
const init = (id?: number) => { const init = (id?: number) => {
visible.value = true visible.value = true
@ -67,7 +66,8 @@ const getT_book_comment = (id: number) => {
}) })
} }
const dataRules = ref({}) const dataRules = ref({
})
// 表单提交 // 表单提交
const submitHandle = () => { const submitHandle = () => {

2
src/views/maku/t_book_comment/index.vue
View File

@ -51,7 +51,7 @@
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update> <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
</el-card> </el-card>
</template> </template>

6
src/views/maku/t_purchase/add-or-update.vue
View File

@ -36,8 +36,7 @@ const dataForm = reactive({
tradingHour: '', tradingHour: '',
totalPrice: '', totalPrice: '',
createTime: '', createTime: '',
updateTime: '' updateTime: ''})
})
const init = (id?: number) => { const init = (id?: number) => {
visible.value = true visible.value = true
@ -59,7 +58,8 @@ const getT_purchase = (id: number) => {
}) })
} }
const dataRules = ref({}) const dataRules = ref({
})
// 表单提交 // 表单提交
const submitHandle = () => { const submitHandle = () => {

6
src/views/maku/t_purchase_details/add-or-update.vue
View File

@ -32,8 +32,7 @@ const dataForm = reactive({
id: '', id: '',
purchaseId: '', purchaseId: '',
bookId: '', bookId: '',
price: '' price: ''})
})
const init = (id?: number) => { const init = (id?: number) => {
visible.value = true visible.value = true
@ -55,7 +54,8 @@ const getT_purchase_details = (id: number) => {
}) })
} }
const dataRules = ref({}) const dataRules = ref({
})
// 表单提交 // 表单提交
const submitHandle = () => { const submitHandle = () => {

2
src/views/maku/t_purchase_details/index.vue
View File

@ -49,7 +49,7 @@
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update> <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
</el-card> </el-card>
</template> </template>

6
src/views/maku/t_shopping_trolley/add-or-update.vue
View File

@ -36,8 +36,7 @@ const dataForm = reactive({
userId: '', userId: '',
bookId: '', bookId: '',
createTime: '', createTime: '',
updateTime: '' updateTime: ''})
})
const init = (id?: number) => { const init = (id?: number) => {
visible.value = true visible.value = true
@ -59,7 +58,8 @@ const getT_shopping_trolley = (id: number) => {
}) })
} }
const dataRules = ref({}) const dataRules = ref({
})
// 表单提交 // 表单提交
const submitHandle = () => { const submitHandle = () => {

5
src/views/maku/t_user/add-or-update.vue
View File

@ -48,8 +48,7 @@ const dataForm = reactive({
balance: '', balance: '',
status: '', status: '',
createTime: '', createTime: '',
updateTime: '' updateTime: ''})
})
const init = (id?: number) => { const init = (id?: number) => {
visible.value = true visible.value = true
@ -75,7 +74,7 @@ const dataRules = ref({
username: [{ required: true, message: '必填项不能为空', trigger: 'blur' }], username: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
password: [{ required: true, message: '必填项不能为空', trigger: 'blur' }], password: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
balance: [{ required: true, message: '必填项不能为空', trigger: 'blur' }], balance: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
status: [{ required: true, message: '必填项不能为空', trigger: 'blur' }] status: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
}) })
// 表单提交 // 表单提交

2
src/views/maku/t_user/index.vue
View File

@ -51,7 +51,7 @@
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update> <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
</el-card> </el-card>
</template> </template>

5
src/views/user/index.vue
View File

@ -1,5 +0,0 @@
<script setup lang="ts"></script>
<template></template>
<style scoped lang="scss"></style>