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