Skip to content

Commit 4d9ccb2

Browse files
hucccthuccct
committed
feat(trademark): 静态页面搭建
1 parent 4983b3d commit 4d9ccb2

File tree

7 files changed

+212
-8
lines changed

7 files changed

+212
-8
lines changed

‎components.d.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ declare module '@vue/runtime-core' {
1616
ElCard: typeof import('element-plus/es')['ElCard']
1717
ElCol: typeof import('element-plus/es')['ElCol']
1818
ElContainer: typeof import('element-plus/es')['ElContainer']
19+
ElDialog: typeof import('element-plus/es')['ElDialog']
1920
ElDropdown: typeof import('element-plus/es')['ElDropdown']
2021
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
2122
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -27,9 +28,15 @@ declare module '@vue/runtime-core' {
2728
ElMain: typeof import('element-plus/es')['ElMain']
2829
ElMenu: typeof import('element-plus/es')['ElMenu']
2930
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
31+
ElOption: typeof import('element-plus/es')['ElOption']
32+
ElPagination: typeof import('element-plus/es')['ElPagination']
3033
ElRow: typeof import('element-plus/es')['ElRow']
3134
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
35+
ElSelect: typeof import('element-plus/es')['ElSelect']
3236
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
37+
ElTable: typeof import('element-plus/es')['ElTable']
38+
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
39+
ElUpload: typeof import('element-plus/es')['ElUpload']
3340
RouterLink: typeof import('vue-router')['RouterLink']
3441
RouterView: typeof import('vue-router')['RouterView']
3542
Src: typeof import('./src/components/Pagination/src/index.vue')['default']

‎src/api/product/trademark/index.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import request from '@/utils/request'
2+
import type { TradeMarkResponseData } from './type'
3+
enum API {
4+
TRADEMARK_URL = '/admin/product/baseTrademark/',
5+
}
6+
7+
export const reqHasTradeMark = (page: number, limit: number) =>
8+
request.get<any, TradeMarkResponseData>(
9+
API.TRADEMARK_URL + `${page}/${limit}`,
10+
)

‎src/api/product/trademark/type.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export interface ResponseData {
2+
code: number
3+
message: string
4+
ok: boolean
5+
}
6+
7+
export interface TradeMark {
8+
id?: number
9+
tmName: string
10+
logoUrl: string
11+
}
12+
13+
export type Records = TradeMark[]
14+
15+
export interface TradeMarkResponseData extends ResponseData {
16+
data: {
17+
records: Records
18+
total: number
19+
size: number
20+
current: number
21+
searchCount: boolean
22+
pages: number
23+
}
24+
}

‎src/layout/index.vue

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
<!--
2+
* @Description: Stay hungry，Stay foolish
3+
* @Author: Huccct
4+
* @Date: 2023-05-20 20:25:03
5+
* @LastEditors: Huccct
6+
* @LastEditTime: 2023-05-24 10:47:52
7+
-->
18
<script setup lang="ts">
29
import Logo from './logo/index.vue'
310
import Menu from './menu/index.vue'
@@ -36,7 +43,12 @@ let LayOutSettingStore = useLayOutSettingStore()
3643
<el-container>
3744
<TabBar style="width: 100%" />
3845
<el-main
39-
:style="{ left: !LayOutSettingStore.isCollapse ? '200px' : '56px' }"
46+
:style="{
47+
left: !LayOutSettingStore.isCollapse ? '200px' : '56px',
48+
width: LayOutSettingStore.isCollapse
49+
? 'calc(100% - 56px)'
50+
: 'calc(100% - 200px)',
51+
}"
4052
>
4153
<el-scrollbar>
4254
<Main />
@@ -51,10 +63,11 @@ let LayOutSettingStore = useLayOutSettingStore()
5163
}
5264
.layout-container-demo .el-main {
5365
position: absolute;
54-
padding: 0;
66+
padding: 20px;
5567
left: 200px;
5668
top: 60px;
5769
transition: all 0.3s;
70+
width: calc(100% - $base-menu-width);
5871
}
5972
6073
.el-aside {

‎src/styles/variable.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@ $base-menu-logo-height: 50px;
55

66
// 左侧logo文字大小
77
$base-logo-title-fontSize: 20px;
8+
9+
$base-menu-width: 200px;

‎src/views/home/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: Huccct
44
* @Date: 2023-05-19 17:38:54
55
* @LastEditors: Huccct
6-
* @LastEditTime: 2023-05-22 20:44:30
6+
* @LastEditTime: 2023-05-24 10:19:00
77
-->
88
<script setup lang="ts">
99
import { onMounted } from 'vue'
@@ -16,6 +16,6 @@ onMounted(() => {
1616
})
1717
</script>
1818
<template>
19-
<h1>qweqweqweqweqweqwe</h1>
19+
<h1></h1>
2020
</template>
2121
<style lang="scss" scoped></style>

‎src/views/product/trademark/index.vue

Lines changed: 152 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,158 @@
33
* @Author: Huccct
44
* @Date: 2023-05-21 16:19:15
55
* @LastEditors: Huccct
6-
* @LastEditTime: 2023-05-21 16:19:19
6+
* @LastEditTime: 2023-05-24 16:08:56
77
-->
8-
<script setup lang="ts"></script>
8+
<script setup lang="ts">
9+
import { ref, onMounted } from 'vue'
10+
import { reqHasTradeMark } from '@/api/product/trademark'
11+
import type {
12+
Records,
13+
TradeMarkResponseData,
14+
} from '@/api/product/trademark/type'
15+
let pageNo = ref<number>(1)
16+
17+
let limit = ref<number>(3)
18+
let total = ref<number>(0)
19+
let dialogFormVisible = ref<boolean>(false)
20+
21+
let tradeMarkArr = ref<Records>([])
22+
const getHasTradeMark = async (pager = 1) => {
23+
pageNo.value = pager
24+
let res: TradeMarkResponseData = await reqHasTradeMark(
25+
pageNo.value,
26+
limit.value,
27+
)
28+
if (res.code === 200) {
29+
total.value = res.data.total
30+
tradeMarkArr.value = res.data.records
31+
}
32+
}
33+
34+
onMounted(() => {
35+
getHasTradeMark()
36+
})
37+
38+
const sizeChange = () => {
39+
getHasTradeMark()
40+
}
41+
42+
const addTradeMark = () => {
43+
dialogFormVisible.value = true
44+
}
45+
const updateTradeMark = () => {
46+
dialogFormVisible.value = true
47+
}
48+
49+
const cancel = () => {
50+
dialogFormVisible.value = false
51+
}
52+
53+
const confirm = () => {
54+
dialogFormVisible.value = false
55+
}
56+
</script>
957
<template>
10-
<h1>品牌管理</h1>
58+
<el-card class="box-card">
59+
<!-- 添加品牌 -->
60+
<el-button type="primary" size="default" icon="Plus" @click="addTradeMark">
61+
添加品牌
62+
</el-button>
63+
<el-table style="margin: 10px 0" border :data="tradeMarkArr">
64+
<el-table-column
65+
label="序号"
66+
width="80px"
67+
align="center"
68+
type="index"
69+
></el-table-column>
70+
<el-table-column label="品牌名称" prop="tmName"></el-table-column>
71+
<el-table-column label="品牌LOGO">
72+
<template #="{ row, $index }">
73+
<img
74+
:src="row.logoUrl"
75+
alt="图片丢失了~"
76+
style="width: 100px; height: 100px"
77+
/>
78+
</template>
79+
</el-table-column>
80+
<el-table-column label="品牌操作">
81+
<template #="{ row, $index }">
82+
<el-button
83+
type="primary"
84+
size="small"
85+
icon="Edit"
86+
@click="updateTradeMark"
87+
></el-button>
88+
<el-button type="danger" size="small" icon="Delete"></el-button>
89+
</template>
90+
</el-table-column>
91+
</el-table>
92+
93+
<!-- pagination -->
94+
<el-pagination
95+
v-model:current-page="pageNo"
96+
v-model:page-size="limit"
97+
:page-sizes="[3, 5, 7, 9]"
98+
:background="true"
99+
layout="prev, pager, next, jumper, ->, sizes, total"
100+
:total="total"
101+
@current-change="getHasTradeMark"
102+
@size-change="sizeChange"
103+
/>
104+
</el-card>
105+
106+
<el-dialog v-model="dialogFormVisible" title="添加品牌">
107+
<el-form style="width: 90%">
108+
<el-form-item label="品牌名称" label-width="80px">
109+
<el-input placeholder="请您输入品牌名称"></el-input>
110+
</el-form-item>
111+
<el-form-item label="品牌Logo" label-width="80px">
112+
<el-upload
113+
class="avatar-uploader"
114+
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
115+
:show-file-list="false"
116+
:on-success="handleAvatarSuccess"
117+
:before-upload="beforeAvatarUpload"
118+
>
119+
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
120+
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
121+
</el-upload>
122+
</el-form-item>
123+
</el-form>
124+
<template #footer>
125+
<el-button type="primary" size="default" @click="cancel">取消</el-button>
126+
<el-button type="primary" size="default" @click="confirm">确定</el-button>
127+
</template>
128+
</el-dialog>
11129
</template>
12-
<style lang="scss" scoped></style>
130+
131+
<style scoped>
132+
.avatar-uploader .avatar {
133+
width: 178px;
134+
height: 178px;
135+
display: block;
136+
}
137+
</style>
138+
139+
<style>
140+
.avatar-uploader .el-upload {
141+
border: 1px dashed var(--el-border-color);
142+
border-radius: 6px;
143+
cursor: pointer;
144+
position: relative;
145+
overflow: hidden;
146+
transition: var(--el-transition-duration-fast);
147+
}
148+
149+
.avatar-uploader .el-upload:hover {
150+
border-color: var(--el-color-primary);
151+
}
152+
153+
.el-icon.avatar-uploader-icon {
154+
font-size: 28px;
155+
color: #8c939d;
156+
width: 178px;
157+
height: 178px;
158+
text-align: center;
159+
}
160+
</style>

0 commit comments

Comments
 (0)