Skip to content

Y
ybf
Commit 5b5d275a authored by Z's avatar Z
Browse files
Options

Z: Dot: PC: Goods's page style done.

parent de8711f9
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 133 deletions
ybf_admin/src/pages/goods/main/components/add_goods.vue
View file @ 5b5d275a
<template>
<div class="dialogs">
<el-dialog title="创建任务" :visible.sync="dialogVisible" width="480px"
<!-- <el-dialog title="创建任务" :visible.sync="dialogVisible" width="480px" -->
<el-dialog title="佣金配置" :visible.sync="dialogVisible" width="480px"
:before-close="handleClose" class="addGoods">
<div class="dialogMain">
<el-form :model="form" :rules="formRules" ref="addform" label-width="130px">
<el-form-item label="商品:" prop="goods">
<el-input v-model="form.goods"></el-input>
<el-input v-model="form.goodName"></el-input>
</el-form-item>
<el-form-item label="价格:">
<el-input v-model="form.price"></el-input>
<el-input disabled="true" v-model="form.goodPrice"></el-input>
</el-form-item>
<el-form-item label="库存:">
<el-input v-model.number="form.num"></el-input>
<el-input v-model.number="form.goodNum"></el-input>
</el-form-item>
<el-form-item label="佣金:" prop="charges">
<el-radio-group v-model="form.charges">
<el-radio-group v-model="form.goodBackType">
<el-radio :label="1">佣金</el-radio>
<el-radio :label="2">百分比</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.charges===1" label="金额:" label-width="176px" class="chargeInput" >
<el-input v-model="form.num"></el-input>
<el-form-item v-if="form.goodBackType===1" label="金额:" label-width="176px" class="chargeInput" >
<el-input v-model="form.goodBackPrice"></el-input>
<span class="unit">元 ( ¥ )</span>
</el-form-item>
<el-form-item v-if="form.charges===2" label="佣金比例:" label-width="176px" class="chargeInput" >
<el-input v-model="form.num"></el-input>
<el-form-item v-if="form.goodBackType===2" label="佣金比例:" label-width="176px" class="chargeInput" >
<el-input v-model="form.goodBackPercent"></el-input>
<span class="unit">( % )</span>
</el-form-item>
</el-form>
......@@ -44,10 +45,18 @@
return{
dialogVisible:false,
form:{
goods:'',
price:'',
goodName: '膳魔师',
goodPrice: '200',
goodNum: '44',
goodBackType: 2,
goodBackPrice: '20',
goodBackPercent: '10',
goods:'膳魔师',
price:'200',
charges:1,
num:0
num:44
},
formRules:{
goods: [
......
ybf_admin/src/pages/goods/main/index.vue
View file @ 5b5d275a
<template>
<d2-container class="pRelative">
<template slot="header">
全部商品（ 共5个 ）
</template>
<template slot="header">全部商品（ 共5个 ）</template>
<div class="searchs">
<div class="buttons">
<el-button class="button buttonlight" size="small" @click="handleAdd">添加商品</el-button>
<el-button class="button buttondark" size="small">批量删除</el-button>
<!-- <el-button class="button buttonlight" size="small" @click="handleAdd">添加商品</el-button> -->
<!-- <el-button class="button buttondark" size="small">批量删除</el-button> -->
</div>
<!-- 搜索区 -->
<el-form class="searchzone" :inline="true" :model="formData" label-width="auto">
......@@ -25,36 +24,53 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-input
size="small"
v-model="formData.keys"
style="width:160px"
placeholder="请输入关键词"
/>
<el-form-item label>
<el-input size="small" v-model="formData.keys" style="width:160px" placeholder="请输入关键词" />
</el-form-item>
<el-button class="button buttondark" size="small">搜索</el-button>
</el-form>
</div>
<el-table :data="data" class="list" style="width: 100%" empty-text="暂无商品信息" height="calc(100% - 120px)">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="name" label="商品图片"></el-table-column>
<el-table-column prop="name" label="商品名称"></el-table-column>
<el-table-column prop="name" label="商品价格"></el-table-column>
<el-table-column prop="name" label="库存"></el-table-column>
<el-table-column prop="name" label="佣金"></el-table-column>
<el-table-column prop="message" label="状态"></el-table-column>
<el-table
:data="data"
class="list"
style="width: 100%"
empty-text="暂无商品信息"
height="calc(100% - 120px)"
>
<!-- <el-table-column type="selection" width="55"> </el-table-column> -->
<el-table-column prop="name" label="商品图片" align="center">
<template slot-scope="scope">
<span>
<img :src="scope.row.imgUrl" alt style="height: 60px; width: 60px;" />
</span>
</template>
</el-table-column>
<el-table-column prop="goodName" label="商品名称" align="center"></el-table-column>
<el-table-column prop="goodPrice" label="商品价格" align="center"></el-table-column>
<el-table-column prop="goodNum" label="库存" align="center"></el-table-column>
<el-table-column prop="goodBackMoney" label="佣金" align="center"></el-table-column>
<!-- <el-table-column prop="goodStatus" label="状态" align="center"></el-table-column> -->
<el-table-column prop="goodStatus" label="状态" align="center">
<template slot-scope="scope">
<span>{{scope.row.goodStatus === 'up' ? '上线' : '下线'}}</span>
</template>
</el-table-column>
<!-- 查看详情 -->
<el-table-column
fixed="right"
align="center"
label="操作"
width="140"
@selection-change="listPick">
@selection-change="listPick"
>
<template slot-scope="scope">
<el-button type="text" @click="">详情</el-button>
<el-button type="text" @click="">编辑</el-button>
<el-button type="text" @click="" class="listButtonRed">删除</el-button>
<!-- <el-button type="text" @click="">详情</el-button> -->
<!-- <el-button type="text" @click="">编辑</el-button> -->
<el-button type="text" @click="handleAdd">佣金配置</el-button>
<el-button type="text" @click="handleAdd">{{scope.row.goodStatus === 'up' ? '下线' : '上线'}}</el-button>
<!-- <el-button type="text" @click="" class="listButtonRed">删除</el-button> -->
</template>
</el-table-column>
</el-table>
......@@ -63,113 +79,131 @@
:current-page="page.currentPage"
:page-size="page.size"
layout="total, prev, pager, next, jumper"
:total="page.total">
</el-pagination>
:total="page.total"
></el-pagination>
<add-goods ref="addGoods"></add-goods>
</d2-container>
</template>
<script>
import addGoods from './components/add_goods'
export default {
data () {
return {
formData:{
status:'',
keys:''
import addGoods from "./components/add_goods";
export default {
data() {
return {
formData: {
status: "",
keys: ""
},
statusList: [],
data: [
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "up"
},
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "down"
},
statusList:[],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
],
page:{
currentPage:1,
size:20,
total:100
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "down"
},
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "up"
},
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "up"
},
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "down"
},
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "up"
},
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "up"
},
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "down"
},
{
imgUrl:
"http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
goodName: "膳魔师",
goodPrice: "200元",
goodNum: "44",
goodBackMoney: "20元",
goodStatus: "up"
}
],
page: {
currentPage: 1,
size: 20,
total: 100
}
};
},
components: { addGoods },
methods: {
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
components:{ addGoods },
methods: {
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
listPick() {
},
handleAdd(){
this.$refs.addGoods.dialogVisible = true
}
listPick() {},
handleAdd() {
this.$refs.addGoods.dialogVisible = true;
}
}
};
</script>
<style lang="scss">
</style>
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