Skip to content

Commit a0014be

Browse files
author
puhui999
committed
商品管理初始界面结构设计
1 parent c14b5c5 commit a0014be

File tree

7 files changed

+608
-4
lines changed

7 files changed

+608
-4
lines changed

‎src/router/modules/remaining.ts

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { Layout } from '@/utils/routerHelper'
22

33
const { t } = useI18n()
44
/**
5-
* redirect: noredirect 当设置 noredirect 的时候该路由在面包屑导航中不可被点击
6-
* name:'router-name' 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
7-
* meta : {
5+
* redirect: noredirect 当设置 noredirect 的时候该路由在面包屑导航中不可被点击
6+
* name:'router-name' 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
7+
* meta : {
88
hidden: true 当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
99
1010
alwaysShow: true 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
@@ -31,7 +31,7 @@ const { t } = useI18n()
3131
3232
canTo: true 设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
3333
}
34-
**/
34+
**/
3535
const remainingRouter: AppRouteRecordRaw[] = [
3636
{
3737
path: '/redirect',
@@ -345,6 +345,29 @@ const remainingRouter: AppRouteRecordRaw[] = [
345345
meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
346346
}
347347
]
348+
},
349+
{
350+
path: '/product',
351+
component: Layout,
352+
name: 'ProductManagementEdit',
353+
meta: {
354+
hidden: true
355+
},
356+
children: [
357+
{
358+
path: 'productManagementAdd',
359+
component: () => import('@/views/mall/product/management/addForm.vue'),
360+
name: 'ProductManagementAdd',
361+
meta: {
362+
noCache: true,
363+
hidden: true,
364+
canTo: true,
365+
icon: 'ep:edit',
366+
title: '添加商品',
367+
activeMenu: '/product/product-management'
368+
}
369+
}
370+
]
348371
}
349372
]
350373

‎src/views/mall/product/management/addForm.vue

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<ContentWrap v-loading="formLoading">
3+
<el-tabs v-model="activeName">
4+
<el-tab-pane label="商品信息" name="basicInfo">
5+
<BasicInfoForm ref="basicInfoRef" />
6+
</el-tab-pane>
7+
<el-tab-pane label="商品详情" name="description">
8+
<DescriptionForm ref="DescriptionRef" />
9+
</el-tab-pane>
10+
<el-tab-pane label="其他设置" name="otherSettings">
11+
<OtherSettingsForm ref="otherSettingsRef" />
12+
</el-tab-pane>
13+
</el-tabs>
14+
<el-form>
15+
<el-form-item style="float: right">
16+
<el-button :loading="formLoading" type="primary" @click="submitForm">保存</el-button>
17+
<el-button @click="close">返回</el-button>
18+
</el-form-item>
19+
</el-form>
20+
</ContentWrap>
21+
</template>
22+
<script lang="ts" name="ProductManagementForm" setup>
23+
import { useTagsViewStore } from '@/store/modules/tagsView'
24+
import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
25+
26+
// const { t } = useI18n() // 国际化
27+
// const message = useMessage() // 消息弹窗
28+
const { push, currentRoute } = useRouter() // 路由
29+
// const { query } = useRoute() // 查询参数
30+
const { delView } = useTagsViewStore() // 视图操作
31+
32+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
33+
const activeName = ref('otherSettings') // Tag 激活的窗口
34+
const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
35+
const DescriptionRef = ref<ComponentRef<typeof DescriptionForm>>()
36+
37+
/** 获得详情 */
38+
const getDetail = async () => {}
39+
40+
/** 提交按钮 */
41+
const submitForm = async () => {}
42+
43+
/** 关闭按钮 */
44+
const close = () => {
45+
delView(unref(currentRoute))
46+
push('/product/product-management')
47+
}
48+
49+
/** 初始化 */
50+
onMounted(() => {
51+
getDetail()
52+
})
53+
</script>

‎src/views/mall/product/management/components/BasicInfoForm.vue

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<template>
2+
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
3+
<el-row>
4+
<el-col :span="12">
5+
<el-form-item label="商品名称" prop="name">
6+
<el-input v-model="formData.name" placeholder="请输入商品名称" />
7+
</el-form-item>
8+
</el-col>
9+
<el-col :span="12">
10+
<el-form-item label="商品分类" prop="categoryId">
11+
<el-tree-select
12+
v-model="formData.categoryId"
13+
:data="[]"
14+
:props="defaultProps"
15+
check-strictly
16+
node-key="id"
17+
placeholder="请选择商品分类"
18+
/>
19+
</el-form-item>
20+
</el-col>
21+
<el-col :span="12">
22+
<el-form-item label="商品关键字" prop="keyword">
23+
<el-input v-model="formData.keyword" placeholder="请输入商品关键字" />
24+
</el-form-item>
25+
</el-col>
26+
<el-col :span="12">
27+
<el-form-item label="单位" prop="unit">
28+
<el-input v-model="formData.unit" placeholder="请输入单位" />
29+
</el-form-item>
30+
</el-col>
31+
<el-col :span="12">
32+
<el-form-item label="商品简介" prop="introduction">
33+
<el-input
34+
v-model="formData.introduction"
35+
:rows="3"
36+
placeholder="请输入商品简介"
37+
type="textarea"
38+
/>
39+
</el-form-item>
40+
</el-col>
41+
<el-col :span="12">
42+
<el-form-item label="商品封面图" prop="picUrl">
43+
<div class="demo-image__preview pt-5px pb-5px pl-11x pr-11px">
44+
<el-image
45+
:initial-index="0"
46+
:preview-src-list="srcList"
47+
:src="url"
48+
:zoom-rate="1.2"
49+
fit="cover"
50+
style="width: 100%; height: 90px"
51+
/>
52+
</div>
53+
</el-form-item>
54+
</el-col>
55+
<el-col :span="24">
56+
<el-form-item label="商品轮播图" prop="sliderPicUrls">
57+
<el-button>添加轮播图</el-button>
58+
<el-carousel :interval="3000" height="200px" style="width: 100%" type="card">
59+
<el-carousel-item v-for="item in 6" :key="item">
60+
<h3 justify="center" text="2xl">{{ item }}</h3>
61+
</el-carousel-item>
62+
</el-carousel>
63+
</el-form-item>
64+
</el-col>
65+
<el-col :span="12">
66+
<el-form-item label="运费模板" prop="deliveryTemplateId">
67+
<el-select v-model="formData.deliveryTemplateId" placeholder="请选择" style="width: 100%">
68+
<el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.id" />
69+
</el-select>
70+
</el-form-item>
71+
</el-col>
72+
<el-col :span="12">
73+
<el-button class="ml-20px">运费模板</el-button>
74+
</el-col>
75+
<el-col :span="12">
76+
<el-form-item label="商品规格" props="specType">
77+
<el-radio-group v-model="formData.specType" @change="changeSpecType(formData.specType)">
78+
<el-radio :label="false" class="radio">单规格</el-radio>
79+
<el-radio :label="true">多规格</el-radio>
80+
</el-radio-group>
81+
</el-form-item>
82+
</el-col>
83+
<!-- TODO 商品规格和分销类型切换待定 -->
84+
<el-col :span="12">
85+
<el-form-item label="分销类型" props="subCommissionType">
86+
<el-radio-group
87+
v-model="formData.subCommissionType"
88+
@change="changeSubCommissionType(formData.subCommissionType)"
89+
>
90+
<el-radio :label="false">默认设置</el-radio>
91+
<el-radio :label="true" class="radio">自行设置</el-radio>
92+
</el-radio-group>
93+
</el-form-item>
94+
</el-col>
95+
<!-- 多规格添加-->
96+
<el-col v-if="formData.specType" :span="24">
97+
<el-form-item label="选择规格" prop="">
98+
<div class="acea-row">
99+
<el-select v-model="formData.selectRule">
100+
<el-option
101+
v-for="item in []"
102+
:key="item.id"
103+
:label="item.ruleName"
104+
:value="item.id"
105+
/>
106+
</el-select>
107+
<el-button class="mr-20px" type="primary" @click="confirm">确认</el-button>
108+
<el-button class="mr-15px" @click="addRule">添加规格</el-button>
109+
</div>
110+
</el-form-item>
111+
</el-col>
112+
</el-row>
113+
</el-form>
114+
</template>
115+
<script lang="ts" name="ProductManagementBasicInfoForm" setup>
116+
// TODO 商品封面测试数据
117+
import { defaultProps } from '@/utils/tree'
118+
119+
const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
120+
const srcList = ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']
121+
122+
const formRef = ref()
123+
const formData = ref({
124+
name: '', // 商品名称
125+
categoryId: '', // 商品分类
126+
keyword: '', // 关键字
127+
unit: '', // 单位
128+
picUrl: '', // 商品封面图
129+
sliderPicUrls: [], // 商品轮播图
130+
introduction: '', // 商品简介
131+
deliveryTemplateId: '', // 运费模版
132+
selectRule: '',
133+
specType: false, // 商品规格
134+
subCommissionType: false // 分销类型
135+
})
136+
const rules = reactive({
137+
name: [required],
138+
categoryId: [required],
139+
keyword: [required],
140+
unit: [required],
141+
picUrl: [required],
142+
sliderPicUrls: [required],
143+
deliveryTemplateId: [required],
144+
specType: [required],
145+
subCommissionType: [required]
146+
})
147+
// 选择规格
148+
const changeSpecType = (specType) => {
149+
console.log(specType)
150+
}
151+
// 分销类型
152+
const changeSubCommissionType = (subCommissionType) => {
153+
console.log(subCommissionType)
154+
}
155+
// 选择属性确认
156+
const confirm = () => {}
157+
// 添加规格
158+
const addRule = () => {}
159+
</script>
160+
<style scoped>
161+
/*TODO 商品轮播图测试样式*/
162+
.el-carousel__item h3 {
163+
color: #475669;
164+
opacity: 0.75;
165+
line-height: 200px;
166+
margin: 0;
167+
text-align: center;
168+
}
169+
170+
.el-carousel__item:nth-child(2n) {
171+
background-color: #99a9bf;
172+
}
173+
174+
.el-carousel__item:nth-child(2n + 1) {
175+
background-color: #d3dce6;
176+
}
177+
178+
/*TODO 商品封面测试样式*/
179+
.demo-image__error .image-slot {
180+
font-size: 30px;
181+
}
182+
183+
.demo-image__error .image-slot .el-icon {
184+
font-size: 30px;
185+
}
186+
187+
.demo-image__error .el-image {
188+
width: 100%;
189+
height: 200px;
190+
}
191+
</style>

‎src/views/mall/product/management/components/DescriptionForm.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<!--富文本编辑器组件-->
3+
<el-row>
4+
<Editor v-model="content" :editor-config="editorConfig" />
5+
</el-row>
6+
</template>
7+
<script lang="ts" name="DescriptionForm" setup>
8+
import { Editor } from '@/components/Editor'
9+
import { createEditorConfig } from '@/views/mp/draft/editor-config'
10+
// TODO 模拟参数
11+
const content = ref('')
12+
const editorConfig = createEditorConfig('', 1)
13+
</script>

0 commit comments

Comments
 (0)