Skip to content

O
op-web-service
Commit 10e1b465 authored by your yuchenglong's avatar your yuchenglong
Browse files
Options

add:发布商品页面

parent e05683f5
Hide whitespace changes
Inline Side-by-side
Showing with 255 additions and 5 deletions
src/pages/Activity/releaseProduc/components/addProduc.vue
View file @ 10e1b465
<template>
<div class="addProduc">
添加商品
<!-- btnGroup -->
<div class="btnGroup">
<el-button class="addCommodityBtn" @click="commodity('add', '')"
>添加商品</el-button
>
<el-button class="commodLibraryAdd" @click="commodLibraryAdd"
>从商品库添加</el-button
>
</div>
<!-- Tab -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="显示顺序" align="center" width="140">
<template #default="scope">
<i class="el-icon-top" @click="upMove(scope.$index, scope.row)"></i>
<i
class="el-icon-bottom"
@click="upDown(scope.$index, scope.row)"
></i>
</template>
</el-table-column>
<el-table-column prop="commodity_ID" label="商品ID" width="180">
</el-table-column>
<el-table-column prop="commodity_title" label="商品标题" width="180">
</el-table-column>
<el-table-column prop="price" label="售价"> </el-table-column>
<el-table-column prop="business" label="商家"> </el-table-column>
<el-table-column prop="stock" label="库存"> </el-table-column>
<el-table-column prop="quantity_sold" label="已售数量"> </el-table-column>
<el-table-column prop="rema_inventory" label="剩余库存">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template #default="scope">
<el-button
@click="commodity('update', scope.row)"
type="text"
size="small"
>修改</el-button
>
<el-button type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
<!-- dialog -->
<el-dialog :title="addCommodityTitle" v-model="addCommodityPopup">
<el-form
ref="infoForm"
:inline="true"
class="demo-form-inline infoForm"
:model="commodityForm"
label-width="90px"
>
<el-form-item label="图片：">
<el-upload action="#" list-type="picture-card" :auto-upload="false">
<template #default>
<i class="el-icon-plus"></i>
</template>
<template #file="{ file }">
<div>
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</template>
</el-upload>
<el-dialog v-model="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
<el-form-item label="商品标题：">
<el-input v-model="commodityForm.title"></el-input>
</el-form-item>
<el-form-item label="售价：">
<el-input v-model="commodityForm.price" placeholder=""></el-input>
</el-form-item>
<el-form-item label="划线价：">
<el-input
v-model="commodityForm.scribingPrice"
placeholder=""
></el-input>
</el-form-item>
<br />
<el-form-item label="库存：">
<el-input v-model="commodityForm.stock" placeholder=""></el-input>
</el-form-item>
<div style="display: inline-block">
已售：<span>{{ sold }}</span> 剩余库存：<span>{{
RemaInventory
}}</span>
</div>
<br />
<el-form-item label="商家">
<el-select v-model="commodityForm.business" placeholder="请选择">
<el-option label="商家A" value="A"></el-option>
<el-option label="商家B" value="B"></el-option>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="addCommodityPopup = false">取 消</el-button>
<el-button type="primary" @click="commoditySave">保存</el-button>
</span>
</template>
</el-dialog>
<el-dialog title="选择商品" v-model="selCommodityPopup">
<el-table :data="tableData">
<el-table-column
property="commodity_ID"
label="商品ID"
width="150"
></el-table-column>
<el-table-column
property="commodity_title"
label="名称"
width="200"
></el-table-column>
<el-table-column property="price" label="售价"></el-table-column>
<el-table-column property="business" label="商家"></el-table-column>
<el-table-column property="stock" label="库存"></el-table-column>
<el-table-column
property="quantity_sold"
label="已售数量"
></el-table-column>
<el-table-column
property="rema_inventory"
label="剩余库存"
></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template #default="scope">
<el-button
@click="commodity('update', scope.row)"
type="text"
size="small"
>修改</el-button
>
</template>
</el-table-column>
</el-table>
<template #footer>
<span class="dialog-footer">
<el-button @click="selCommodityPopup = false">取 消</el-button>
<el-button type="primary" @click="commoditySave">保存</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
commodity_ID: "431315",
commodity_title: "丰盛的午餐",
price: "88",
business: "无极餐厅",
stock: "22",
quantity_sold: "22",
rema_inventory: "0",
},
],
selTableData: [],
}
</script>
addCommodityPopup: false, // 添加商品弹窗
selCommodityPopup: false, // 选额商品
commodityForm: {
title: "",
price: "",
scribingPrice: "",
stock: "",
business: "",
},
<style>
sold: "90", // 已售
RemaInventory: "21", // 剩余库存
dialogImageUrl: "",
dialogVisible: false,
disabled: false,
};
},
methods: {
// 上移
upMove(index) {
if (index <= 0) {
this.$message.error("不能继续向上移动");
} else {
const upData = this.tableData[index - 1];
this.tableData.splice(index - 1, 1);
this.tableData.splice(index, 0, upData);
}
},
// 下移
upDown(index) {
if (index === this.tableData.length - 1) {
this.$message.error("不能继续向下移动");
} else {
const downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
}
},
// 添加修改商品
commodity(type, val) {
this.addCommodityPopup = true;
if (type == "add") {
console.log("添加");
this.addCommodityTitle = "商品添加";
} else {
console.log(val);
this.addCommodityTitle = "商品编辑";
}
},
// 从商品库添加
commodLibraryAdd() {
this.selCommodityPopup = true;
},
// 商品保存
commoditySave() {},
},
};
</script>
<style scoped>
.btnGroup {
margin-bottom: 15px;
}
.addCommodityBtn {
margin-right: 20px;
}
.infoForm /deep/.el-form-item:nth-child(1),
.infoForm /deep/.el-form-item:nth-child(2) {
width: 100%;
}
</style>
\ No newline at end of file
src/pages/Activity/releaseProduc/index.vue
View file @ 10e1b465
......@@ -63,7 +63,9 @@ export default {
if (this.active++ > 2) this.active = 0;
},
// 取消
cancel() {},
cancel() {
this.$router.go(-1);
},
// 确认发布
confirmRelease() {},
},
......
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