Skip to content

O
op-web-service
Commit e852740c authored by mengwenhao's avatar mengwenhao
Browse files
Options

feature:add commodity detail

parent 2c397f04
Show whitespace changes
Inline Side-by-side
Showing with 340 additions and 3 deletions
src/pages/Commodity/List/index.less 0 → 100644
View file @ e852740c
.list {
margin-top: 30px;
.commodity {
margin-top: 30px;
padding: 0 30px;
.search_condition {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-items: center;
.search_button {
display: flex;
align-items: center;
.el-form-item__content {
display: flex;
justify-content: space-around;
}
}
}
.commodity_list {
margin-top: 30px;
}
.pagination {
margin-top: 30px;
}
}
}
src/pages/Commodity/List/index.vue 0 → 100644
View file @ e852740c
<template>
<div class="list">
<el-card class="commodity">
<!-- 筛选区 -->
<el-form
inline
class="search_condition"
>
<!-- 商品id -->
<el-form-item label="商品id">
<el-input></el-input>
</el-form-item>
<!-- 商品名称 -->
<el-form-item label="商品名称">
<el-input></el-input>
</el-form-item>
<!-- 所属分类 -->
<el-form-item label="所属分类">
<el-cascader
:options="options"
:props="cascaderProps"
collapse-tags
clearable
></el-cascader>
</el-form-item>
<!-- 生活号ID -->
<el-form-item label="生活号id">
<el-input></el-input>
</el-form-item>
<!-- 生活号名称 -->
<el-form-item label="生活号名称">
<el-input></el-input>
</el-form-item>
<!-- 商品状态 -->
<el-form-item label="商品状态">
<el-select
v-model="stateValue"
multiple
collapse-tags
>
<el-option
v-for="item in option"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- 按钮操作 -->
<el-form-item class="search_button">
<el-button type="primary">搜索</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
<!-- 列表区 -->
<el-table
class="commodity_list"
:data="commodityList"
border
stripe
>
<el-table-column
label="商品id"
prop="commodity_id"
align="center"
></el-table-column>
<el-table-column
label="商品名称"
prop="commodity_name"
align="center"
></el-table-column>
<el-table-column
label="一级分类"
prop="first_classify"
align="center"
></el-table-column>
<el-table-column
label="二级分类"
prop="second_classify"
align="center"
></el-table-column>
<el-table-column
label="关联门店"
prop="shop"
align="center"
></el-table-column>
<el-table-column
label="活动营销价"
prop="sale_prise"
align="center"
></el-table-column>
<el-table-column
label="售价"
prop="prise"
align="center"
></el-table-column>
<el-table-column
label="原价"
prop="perprise"
align="center"
></el-table-column>
<el-table-column
label="库存"
prop="inventory"
align="center"
></el-table-column>
<el-table-column
label="状态"
prop="state"
align="center"
></el-table-column>
<el-table-column
label="生活号id"
prop="life_no_id"
align="center"
></el-table-column>
<el-table-column
label="生活号名称"
prop="life_no_name"
align="center"
></el-table-column>
<el-table-column
label="发布者"
prop="publisher"
align="center"
></el-table-column>
<el-table-column
label="状态更新时间"
prop="state_update_time"
align="center"
></el-table-column>
<el-table-column
label="商品创建时间"
prop="commodity_create_time"
align="center"
></el-table-column>
<!-- 操作快捷键 -->
<el-table-column
label="操作"
align="center"
fixed="right"
width="200"
>
<template #default="scope">
<el-button
type="text"
v-if="scope.row.state === 1"
@click="goDetail(`EDIT`)"
>编辑</el-button>
<el-button
type="text"
v-if="scope.row.state === 1"
@click="goDetail(`AUDIT`)"
>审核</el-button>
<el-button
type="text"
v-if="scope.row.state === 1"
@click="changeCommodityState('GROUNDING')"
>上架</el-button>
<el-button
type="text"
v-if="scope.row.state === 1"
@click="changeCommodityState('UNDERCARRIAGE')"
>下架</el-button>
</template>
</el-table-column>
</el-table>
<!-- 页码区 -->
<el-pagination
class="pagination"
@current-change="handleCurrentChange"
v-model:currentPage="currentPage"
:page-size="100"
layout="prev, pager, next, jumper"
:total="1000"
>
</el-pagination>
</el-card>
</div>
</template>
<style lang="less" src="./index.less" scope></style>
<script>
export default {
name: "CommodityList",
created () { },
data () {
return {
cascaderProps: { multiple: true },
// 级联选择器
options: [
{
value: 1,
label: "东南",
children: [
{
value: 2,
label: "上海",
children: [
{ value: 3, label: "普陀" },
{ value: 4, label: "黄埔" },
{ value: 5, label: "徐汇" }
]
},
{
value: 7,
label: "江苏",
children: [
{ value: 8, label: "南京" },
{ value: 9, label: "苏州" },
{ value: 10, label: "无锡" }
]
},
{
value: 12,
label: "浙江",
children: [
{ value: 13, label: "杭州" },
{ value: 14, label: "宁波" },
{ value: 15, label: "嘉兴" }
]
}
]
},
{
value: 17,
label: "西北",
children: [
{
value: 18,
label: "陕西",
children: [
{ value: 19, label: "西安" },
{ value: 20, label: "延安" }
]
},
{
value: 21,
label: "新疆维吾尔族自治区",
children: [
{ value: 22, label: "乌鲁木齐" },
{ value: 23, label: "克拉玛依" }
]
}
]
}
],
option: [
{ value: 1, label: "待审核" },
{ value: 2, label: "审核通过" },
{ value: 3, label: "审核驳回" },
{ value: 4, label: "已上架" },
{ value: 5, label: "已下架" }
],
// 商品状态
stateValue: [],
// 商品列表
commodityList: [
{
commodity_id: 1,
commodity_name: "威化",
first_classify: 1,
second_classify: 1,
life_no_id: 1,
shop: "楼下小卖部",
life_no_name: "1的生活号",
publisher: "蒙文昊",
sale_prise: 300,
prise: 200,
perprise: 500,
inventory: 999,
state: 1,
state_update_time: "2021-06-17",
commodity_create_time: "2021-06-17"
}
],
currentPage: 1 // 当前页码
};
},
methods: {
// 获取列表信息
getCommodityList () {
console.log("我是准备获取信息的!!!");
},
// 上架/下架操作
changeCommodityState (state) {
console.log(state);
},
// 页码变化
handleCurrentChange (e) {
this.currentPage = e;
// 获取信息
this.getCommodityList();
},
// 去往详情页
goDetail (where) {
this.$router.push({ name: "CommodityDetail", params: { operation: where } });
}
}
};
</script>
src/router/index.js
View file @ e852740c
...@@ -61,9 +61,9 @@ const routes = [ ...@@ -61,9 +61,9 @@ const routes = [
}, },
// 商品详情管理 // 商品详情管理
{ {
path: "/commodity/detail", path: "/commodity/list",
name: "CommodityDetail", name: "CommodityList",
component: () => import(/* webpackChunkName: "commodity" */ "@/pages/Commodity/Detail") component: () => import(/* webpackChunkName: "commodity" */ "@/pages/Commodity/List")
}, },
//生活号管理 //生活号管理
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment