新增店铺设置
This commit is contained in:
159
src/views/product/add_shop.vue
Normal file
159
src/views/product/add_shop.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="商品类型" prop="type">
|
||||
<div class="shop_type_box">
|
||||
<div class="item" v-for="(item, index) in shopTypes" :key="index"
|
||||
:class="{ active: shopTypesActive == index }" @click="shopTypesActive = index">
|
||||
<div class="title">{{ item.label }}</div>
|
||||
<div class="intro">（{{ item.intro }}）</div>
|
||||
<div class="active_dot">
|
||||
<i class="el-icon-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入商品名称" style="width: 500px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位">
|
||||
<el-select v-model="form.unit" placeholder="请选择单位" style="width: 500px;">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" plain icon="el-icon-plus">添加单位</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" prop="classify">
|
||||
<el-select v-model="form.unit" placeholder="请选择商品分类" style="width: 500px;">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" plain icon="el-icon-plus">添加分类</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbShopUnit } from "@/api/shop";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopTypesActive: 0,
|
||||
shopTypes: [
|
||||
{
|
||||
label: '计量商品',
|
||||
intro: '单价购买'
|
||||
},
|
||||
{
|
||||
label: '多规格',
|
||||
intro: '多种不同规格'
|
||||
},
|
||||
{
|
||||
label: '套餐商品',
|
||||
intro: '选职多种组合'
|
||||
},
|
||||
{
|
||||
label: '称重商品',
|
||||
intro: '按重量售卖'
|
||||
},
|
||||
{
|
||||
label: '时价商品',
|
||||
intro: '按重量售卖'
|
||||
}
|
||||
],
|
||||
form: {
|
||||
type: 1,
|
||||
name: '',
|
||||
unit: ''
|
||||
},
|
||||
rules: {
|
||||
type: [
|
||||
{
|
||||
required: true
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入商品名称'
|
||||
}
|
||||
]
|
||||
},
|
||||
units: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tbShopUnit();
|
||||
},
|
||||
methods: {
|
||||
async tbShopUnit() {
|
||||
try {
|
||||
const res = await tbShopUnit({
|
||||
page: 0,
|
||||
size: 100
|
||||
})
|
||||
this.units = res.content
|
||||
} catch (error) { }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shop_type_box {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
$borderColor: #1890FF;
|
||||
margin-right: 14px;
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 4px;
|
||||
padding: 6px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border-color: $borderColor;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $borderColor;
|
||||
|
||||
.active_dot {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.active_dot {
|
||||
$size: 26px;
|
||||
background-color: $borderColor;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $size;
|
||||
height: $size;
|
||||
clip-path: polygon(100% 0, 0 0, 100% 100%);
|
||||
display: none;
|
||||
justify-content: flex-end;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.intro {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,15 +3,8 @@
|
||||
<div class="head-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请输入商品名称"
|
||||
style="width: 100%;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="toQuery"
|
||||
/>
|
||||
<el-input v-model="query.blurry" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
|
||||
class="filter-item" @keyup.enter.native="toQuery" />
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select v-model="query.class" placeholder="请选择商品分类" style="width: 100%;">
|
||||
@@ -34,19 +27,19 @@
|
||||
<div class="head-container">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-button type="primary" icon="el-icon-plus">添加商品</el-button>
|
||||
<router-link :to="{ name: 'add_shop' }">
|
||||
<el-button type="primary" icon="el-icon-plus">添加商品</el-button>
|
||||
</router-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.data">
|
||||
<el-table :data="tableData.data" v-loading="tableData.loading">
|
||||
<el-table-column label="商品信息">
|
||||
<template v-slot="scope">
|
||||
<div class="shop_info">
|
||||
<el-image
|
||||
:src="scope.row.coverImg"
|
||||
style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;"
|
||||
/>
|
||||
<el-image :src="scope.row.coverImg"
|
||||
style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;" />
|
||||
<div class="info">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</div>
|
||||
@@ -74,6 +67,10 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -88,22 +85,11 @@ export default {
|
||||
sku: ''
|
||||
},
|
||||
tableData: {
|
||||
data: [
|
||||
{
|
||||
url: 'https://cash-register.oss-cn-beijing.aliyuncs.com/shop/f12c3cc097e147daa33ac4b55aca8ef3/2023-08-21/20230821-110556-2425668054.png?x-oss-process=image/resize,w_50,h_50,m_fill',
|
||||
title: '套餐商品',
|
||||
class: '烤串',
|
||||
price: 2,
|
||||
xl: 0,
|
||||
kc: 0,
|
||||
area: '收银端',
|
||||
sort: 0,
|
||||
update: '2023-11-20 16:08'
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
page: 0,
|
||||
size: 10,
|
||||
loading: false
|
||||
loading: false,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -121,14 +107,22 @@ export default {
|
||||
this.query.class = ''
|
||||
this.query.sku = ''
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e
|
||||
this.tbProduct()
|
||||
},
|
||||
// 获取商品列表
|
||||
async tbProduct() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbProduct({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.data = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) { }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user