Skip to content

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

feature:商户图片

parent e852740c
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 306 deletions
src/pages/Commodity/Detail/index.css
View file @ 49142d00
.detail {
margin-top: 30px;
}
.detail .state {
display: flex;
align-items: center;
}
.detail .state .update_time {
margin: 0 20px;
}
.detail .message {
display: flex;
}
.detail .message .message_form {
width: 50%;
}
.detail .message .message_image {
width: 50%;
}
.message_border {
border: 1px solid #000000;
border-radius: 10px;
padding: 30px;
margin: 10px 0;
}
src/pages/Commodity/Detail/index.less
View file @ 49142d00
.detail {
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;
}
}
.state {
display: flex;
align-items: center;
.update_time {
margin: 0 20px;
}
.commodity_list {
margin-top: 30px;
}
.message {
display: flex;
.message_form {
width: 50%;
}
.pagination {
margin-top: 30px;
.message_image {
width: 50%;
}
}
}
.message_border {
border: 1px solid #000000;
border-radius: 10px;
padding: 30px;
margin: 10px 0;
}
src/pages/Commodity/Detail/index.vue
View file @ 49142d00
<template>
<div class="detail">
<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"
<el-card class="detail">
<!-- 状态区域 -->
<section class="state">
<h2>待审核</h2>
<span class="update_time">上次更新时间：2021-06-18</span>
<span>创建时间：2021-06-18</span>
</section>
<!-- 基本信息 -->
<section class="message_border">
<h3>基本信息</h3>
<section class="message">
<!-- 商品列表修改区 -->
<el-form
class="message_form"
inline
>
<template #default="scope">
<el-button
type="text"
v-if="scope.row.state === 1"
>编辑</el-button>
<el-button
type="text"
v-if="scope.row.state === 1"
>审核</el-button>
<el-button
type="text"
v-if="scope.row.state === 1"
>上架</el-button>
<el-button
type="text"
v-if="scope.row.state === 1"
>下架</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>
<el-form-item label="生活号名称：">
<el-input></el-input>
</el-form-item>
<el-form-item label="生活号认证：">
<el-input></el-input>
</el-form-item>
<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-input></el-input>
</el-form-item>
<el-form-item label="二级分类：">
<el-input></el-input>
</el-form-item>
<el-form-item label="描述：">
<textarea
name=""
id=""
cols="100"
rows="4"
></textarea>
</el-form-item>
</el-form>
<!-- 商品详情图 -->
<article class="message_image">
<h3>商品</h3>
</article>
</section>
</section>
<!-- 商品详情 -->
<section class="message_border"></section>
<!-- 可用门店 -->
<section class="message_border"></section>
<!-- 使用规则 -->
<section class="message_border"></section>
<!-- 操作记录 -->
<section class="message_border"></section>
</el-card>
</template>
<style lang="less" src="./index.less" scope></style>
<script>
export default {
name: "CommodityDetail",
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: {
// 页码变化
handleCurrentChange (e) {
console.log("currentPage", e);
console.log(this.currentPage);
}
}
};
</script>
<style lang="less" src="./index.less" scope></style>
\ No newline at end of file
src/router/index.js
View file @ 49142d00
......@@ -65,6 +65,12 @@ const routes = [
name: "CommodityList",
component: () => import(/* webpackChunkName: "commodity" */ "@/pages/Commodity/List")
},
// 商品详情管理
{
path: "/commodity/detail",
name: "CommodityDetail",
component: () => import(/* webpackChunkName: "commodity" */ "@/pages/Commodity/Detail")
},
//生活号管理
{
path: "/lifeNo",
......
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