Commit 23651259 authored by your yuchenglong's avatar your yuchenglong

update:图片上传,搜商品,商家接口

parent 71ecc8f7
// const ACTIVITY_URI = require("../config.js").ACTIVITY_URI; const ACTIVITY_URI = require("../config.js").ACTIVITY_URI;
// const req = require("../utils/request").httpReq; const req = require("../utils/request").httpReq;
// 获取商家列表
exports.getBusinessList = async ctx => {
const url = `${ACTIVITY_URI}/goods/background/ota_list`;
const opts = {
url,
method: "GET"
};
ctx.body = await req(ctx, opts);
};
// 添加商品
exports.addGoods = async ctx => {
const url = `${ACTIVITY_URI}/goods/background/add_goods`;
const opts = {
url,
method: "POST",
json: true,
body: ctx.request.body
};
ctx.body = await req(ctx, opts);
};
// 商品库列表
exports.pindanGoods = async ctx => {
const url = `${ACTIVITY_URI}/goods/background/pindan_goods`;
const opts = {
url,
method: "GET"
};
ctx.body = await req(ctx, opts);
};
\ No newline at end of file
...@@ -63,4 +63,9 @@ router.get(`${API_VERSION}/merchant/lifeinner/life_list`, life.get_life_list) ...@@ -63,4 +63,9 @@ router.get(`${API_VERSION}/merchant/lifeinner/life_list`, life.get_life_list)
//用户 //用户
router.post(`${API_VERSION}/merchant/authority/get_user_info`, user.getUser_detail) router.post(`${API_VERSION}/merchant/authority/get_user_info`, user.getUser_detail)
//活动管理
router.get(`${API_VERSION}/goods/background/ota_list`, activity.getBusinessList);
router.post(`${API_VERSION}/goods/background/add_goods`, activity.addGoods);
router.get(`${API_VERSION}/goods/background/pindan_goods`, activity.pindanGoods);
module.exports = router; module.exports = router;
...@@ -178,6 +178,9 @@ export default { ...@@ -178,6 +178,9 @@ export default {
// 查看详情 // 查看详情
handleLook() {}, handleLook() {},
}, },
created(){
}
}; };
</script> </script>
<style lang="less" src="./index.less" scope></style> <style lang="less" src="./index.less" scope></style>
\ No newline at end of file
<template> <template>
<div class="addProduc"> <div class="addProduc">
<!-- btnGroup --> <!-- 按钮组 -->
<div class="btnGroup"> <div class="btnGroup">
<el-button class="addCommodityBtn" @click="commodity('add', '')" <el-button class="addCommodityBtn" @click="commodity('add', '')"
>添加商品</el-button >添加商品</el-button
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
> >
</div> </div>
<!-- Tab --> <!-- Tab -->
<el-table :data="tableData" border style="width: 100%"> <el-table :data="comTableData" border style="width: 100%">
<el-table-column label="显示顺序" align="center" width="140"> <el-table-column label="显示顺序" align="center" width="140">
<template #default="scope"> <template #default="scope">
<i class="el-icon-top" @click="upMove(scope.$index, scope.row)"></i> <i class="el-icon-top" @click="upMove(scope.$index, scope.row)"></i>
...@@ -20,80 +20,70 @@ ...@@ -20,80 +20,70 @@
></i> ></i>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="commodity_ID" label="商品ID" width="180"> <el-table-column
</el-table-column> prop="commodity_ID"
<el-table-column prop="commodity_title" label="商品标题" width="180"> label="商品ID"
</el-table-column> 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="price" label="售价"> </el-table-column>
<el-table-column prop="business" 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="stock" label="库存"> </el-table-column>
<el-table-column prop="quantity_sold" label="已售数量"> </el-table-column> <el-table-column prop="quantity_sold" label="已售数量"> </el-table-column>
<el-table-column prop="rema_inventory" label="剩余库存"> <el-table-column prop="rema_inventory" label="剩余库存"></el-table-column>
</el-table-column> <el-table-column label="操作">
<el-table-column fixed="right" label="操作" width="100">
<template #default="scope"> <template #default="scope">
<el-button <el-button
@click="commodity('update', scope.row)"
type="text" type="text"
size="small" size="small"
@click="commodity('update', scope.row)"
>修改</el-button >修改</el-button
> >
<el-button type="text" size="small">移除</el-button> <el-button type="text" size="small" @click="removeCom(scope.row)"
>移除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- dialog -->
<el-dialog :title="addCommodityTitle" v-model="addCommodityPopup"> <!-- 添加商品 -->
<el-dialog
:title="addCommodityTitle"
v-model="addCommodityPopup"
width="40%"
>
<el-form <el-form
ref="infoForm"
:inline="true" :inline="true"
class="demo-form-inline infoForm"
:model="commodityForm" :model="commodityForm"
label-width="90px" ref="infoForm"
class="demo-form-inline infoForm"
label-width="100px"
> >
<el-form-item label="图片:"> <el-form-item label="图片:">
<el-upload action="#" list-type="picture-card" :auto-upload="false"> <el-upload
:data="{ type: 1 }"
:action="uploadUrl"
:on-preview="previewImage"
:on-success="handleDetailSuccess"
:before-remove="removeDetailFiles"
:file-list="picUrlList"
auto-upload
ref="picUpload"
:limit="1"
list-type="picture-card"
multiple
>
<template #default> <template #default>
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</template> </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-upload>
<el-dialog v-model="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item> </el-form-item>
<el-form-item label="商品标题:"> <el-form-item label="商品标题:" prop="title">
<el-input v-model="commodityForm.title"></el-input> <el-input v-model="commodityForm.title" maxlength="30"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="售价:"> <el-form-item label="售价:">
<el-input v-model="commodityForm.price" placeholder=""></el-input> <el-input v-model="commodityForm.price" placeholder=""></el-input>
...@@ -115,37 +105,66 @@ ...@@ -115,37 +105,66 @@
</div> </div>
<br /> <br />
<el-form-item label="商家"> <el-form-item label="商家">
<el-select v-model="commodityForm.business" placeholder="请选择"> <el-select v-model="commodityForm.business1" placeholder="请选择">
<el-option label="商家A" value="A"></el-option> <el-option
<el-option label="商家B" value="B"></el-option> v-for="item in businessOpt"
:key="item.ota_id"
:label="item.ota_name"
:value="item.ota_id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="addCommodityPopup = false">取 消</el-button> <el-button @click="addCommodityPopup = false">取 消</el-button>
<el-button type="primary" @click="commoditySave">保存</el-button> <el-button type="primary" @click="commoditySave('infoForm')"
>保存</el-button
>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
<!-- 展示缩略图 -->
<el-dialog width="40%" v-model="isShowPopver">
<el-image :src="popoverImage" fit="fill" style="width: 100%"></el-image>
</el-dialog>
<el-dialog title="选择商品" v-model="selCommodityPopup"> <el-dialog title="选择商品" v-model="selCommodityPopup">
<el-table :data="tableData"> <div>
<span>商家:</span>
<el-select
v-model="commodityForm.business2"
placeholder="请选择"
@change="business2Sel"
>
<el-option
v-for="item in businessOpt"
:key="item.ota_id"
:label="item.ota_name"
:value="item.ota_id"
></el-option>
</el-select>
</div>
<el-table :data="comLibTableData">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column <el-table-column
property="commodity_ID" property="goods_sku_id"
label="商品ID" label="商品ID"
width="150" width="150"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
property="commodity_title" property="goods_name"
label="名称" label="名称"
width="200" width="200"
></el-table-column> ></el-table-column>
<el-table-column property="price" label="售价"></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="ota_id" label="商家"></el-table-column>
<el-table-column property="stock" label="库存"></el-table-column>
<el-table-column <el-table-column
property="quantity_sold" property="inventory_rest"
label="库存"
></el-table-column>
<el-table-column
property="total_amount_sold"
label="已售数量" label="已售数量"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
...@@ -166,7 +185,7 @@ ...@@ -166,7 +185,7 @@
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="selCommodityPopup = false">取 消</el-button> <el-button @click="selCommodityPopup = false">取 消</el-button>
<el-button type="primary" @click="commoditySave">保存</el-button> <el-button type="primary" @click="ac">保存</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
...@@ -174,78 +193,170 @@ ...@@ -174,78 +193,170 @@
</template> </template>
<script> <script>
import { GOODS_URI } from "../../../../../server/config";
import {
addGoods,
getBusinessList,
pindanGoods,
} from "../../../../service/Activity/index";
export default { export default {
data() { data() {
return { return {
tableData: [ // 商品列表
{ comTableData: [],
commodity_ID: "431315",
commodity_title: "丰盛的午餐",
price: "88",
business: "无极餐厅",
stock: "22",
quantity_sold: "22",
rema_inventory: "0",
},
],
selTableData: [],
// 商品库列表
comLibTableData: [],
// 添加商品
addCommodityPopup: false, // 添加商品弹窗 addCommodityPopup: false, // 添加商品弹窗
selCommodityPopup: false, // 选额商品 addCommodityTitle: "", // 标题
commodityForm: { commodityForm: {
title: "", title: "",
price: "", price: "",
scribingPrice: "", scribingPrice: "",
stock: "", stock: "",
business: "", business1: "",
}, },
business2: "",
businessOpt: [],
sold: "90", // 已售 sold: "90", // 已售
RemaInventory: "21", // 剩余库存 RemaInventory: "21", // 剩余库存
dialogImageUrl: "", picUploadList: [], // 上传详情图片列表
dialogVisible: false, isShowPopver: false, // 是否展示图片框
disabled: false, picUrlList: [], // 图片回显列表
uploadUrl: `${GOODS_URI}/ksy/ks3apiunencrypt/ks3api_upload`, // 金山云上传地址
selCommodityPopup: false, // 选择商品
}; };
}, },
methods: { methods: {
// 获取商家
async getBusinessListMet() {
let params = { ota_name: "", offset: "", limit: "" };
try {
const res = await getBusinessList(params);
this.businessOpt = res.data.list;
console.log(res);
} catch (error) {
this.$message.error("发生未知错误,请稍后再试一下吧~~~");
console.error(error);
}
},
// 上移 // 上移
upMove(index) { upMove(index) {
if (index <= 0) { if (index <= 0) {
this.$message.error("不能继续向上移动"); this.$message.error("不能继续向上移动");
} else { } else {
const upData = this.tableData[index - 1]; const upData = this.comTableData[index - 1];
this.tableData.splice(index - 1, 1); this.comTableData.splice(index - 1, 1);
this.tableData.splice(index, 0, upData); this.comTableData.splice(index, 0, upData);
} }
}, },
// 下移 // 下移
upDown(index) { upDown(index) {
if (index === this.tableData.length - 1) { if (index === this.comTableData.length - 1) {
this.$message.error("不能继续向下移动"); this.$message.error("不能继续向下移动");
} else { } else {
const downData = this.tableData[index + 1]; const downData = this.comTableData[index + 1];
this.tableData.splice(index + 1, 1); this.comTableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData); this.comTableData.splice(index, 0, downData);
} }
}, },
// 初始化上传图片列表
// formatUploadPictureList(fileStr) {
// if (!fileStr) {
// return [];
// } else {
// return fileStr.split(",");
// }
// },
// 展示商品大图
previewImage(file) {
this.popoverImage = file.url;
this.isShowPopver = true;
},
// 图片上传成功时
handleDetailSuccess(res) {
console.log(res);
this.picUploadList.push(res.result.image_id);
},
// 图片删除后
removeDetailFiles(file, fileList) {
for (let i = 0; i < fileList.length; i++) {
if (fileList[i].uid == file.uid) {
this.picUploadList.splice(i, 1);
}
}
},
// 添加修改商品 // 添加修改商品
commodity(type, val) { async commodity(type, val) {
this.addCommodityPopup = true; this.addCommodityPopup = true;
if (type == "add") { if (type == "add") {
console.log("添加");
this.addCommodityTitle = "商品添加"; this.addCommodityTitle = "商品添加";
} else { } else {
console.log(val); console.log(val);
this.addCommodityTitle = "商品编辑"; this.addCommodityTitle = "商品编辑";
} }
}, },
async pindanGoodsMet(otaID, goodsName) {
let params = { ota_id: otaID, goods_name: goodsName };
const res = await pindanGoods(params);
this.comLibTableData = res.list;
console.log(res);
},
// 从商品库添加 // 从商品库添加
commodLibraryAdd() { async commodLibraryAdd() {
this.selCommodityPopup = true; this.selCommodityPopup = true;
this.pindanGoodsMet();
},
// 移除
removeCom(val) {
for (var i in this.comTableData) {
if (this.comTableData[i].commodity_ID == val.commodity_ID) {
this.comTableData.splice(i, 1);
}
}
}, },
// 商品保存 // 商品保存
commoditySave() {}, async commoditySave() {
const res = await addGoods({
marketing_name: "22",
goods_name: this.commodityForm.title,
desc_pic_url: this.picUploadList.join(","),
desc: "",
inventory: 10,
original_price: this.commodityForm.scribingPrice,
marketing_type: "4",
price: this.commodityForm.price,
ota_id: this.commodityForm.business1,
op_cur_user: "v-yuchenglong@yidian-inc.com",
});
console.log(res);
},
// 商家选择(选择商品)
business2Sel(val) {
this.pindanGoodsMet(val, "");
},
},
created() {
this.getBusinessListMet();
}, },
}; };
</script> </script>
...@@ -254,7 +365,7 @@ export default { ...@@ -254,7 +365,7 @@ export default {
margin-bottom: 15px; margin-bottom: 15px;
} }
.addCommodityBtn { .addCommodityBtn {
margin-right: 20px; margin: 0 20px 0 0;
} }
.infoForm /deep/.el-form-item:nth-child(1), .infoForm /deep/.el-form-item:nth-child(1),
.infoForm /deep/.el-form-item:nth-child(2) { .infoForm /deep/.el-form-item:nth-child(2) {
......
...@@ -19,65 +19,76 @@ ...@@ -19,65 +19,76 @@
</el-form-item> </el-form-item>
<el-form-item label="图片:"> <el-form-item label="图片:">
<el-upload <el-upload
action="#" :data="{ type: 1 }"
:class="{ hide: hideUpload }" :action="uploadUrl"
:on-preview="previewImage"
:on-success="handleDetailSuccess"
:before-remove="removeDetailFiles"
:file-list="infoEditForm.picUrlList"
auto-upload
ref="picUpload"
:limit="9"
list-type="picture-card" list-type="picture-card"
:auto-upload="false" multiple
limit="9"
> >
<template #default> <template #default>
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</template> </template>
<template #file="{ file }">
<div>
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<span class="el-upload-list__item-actions">
<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-upload>
<el-dialog v-model="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 展示缩略图 -->
<el-dialog width="40%" v-model="isShowPopver">
<el-image :src="popoverImage" fit="fill" style="width: 100%"></el-image>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { GOODS_URI } from "../../../../../server/config";
export default { export default {
data() { data() {
return { return {
infoEditForm: { infoEditForm: {
title: "", title: "", // 标题
desc: "", desc: "", // 介绍
picUploadList: [], // 上传详情图片列表
}, },
dialogImageUrl: "",
dialogVisible: false, isShowPopver: false, // 是否展示图片框
disabled: false, picUrlList: [], // 图片回显列表
hideUpload: false, uploadUrl: `${GOODS_URI}/ksy/ks3apiunencrypt/ks3api_upload`, // 金山云上传地址
}; };
}, },
methods: { methods: {
validate(callback) { // 初始化上传图片列表
this.$refs.form.validate((valid) => { // formatUploadPictureList(fileStr) {
callback(valid); // if (!fileStr) {
}); // return [];
// } else {
// return fileStr.split(",");
// }
// },
// 展示商品大图
previewImage(file) {
this.popoverImage = file.url;
this.isShowPopver = true;
}, },
// 图片删除
handleRemove(file) { // 图片上传成功时
console.log(file); handleDetailSuccess(res) {
console.log(res);
this.infoEditForm.picUploadList.push(res.result.image_id);
},
// 图片删除后
removeDetailFiles(file, fileList) {
for (let i = 0; i < fileList.length; i++) {
if (fileList[i].uid == file.uid) {
this.infoEditForm.picUploadList.splice(i, 1);
}
}
}, },
}, },
}; };
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</el-steps> </el-steps>
<div class="content"> <div class="content">
<infoEditing ref="infoEdit" v-if="active === 1" /> <infoEditing ref="infoEdit" v-if="active === 1" />
<addProduc v-else-if="active === 2" /> <addProduc ref="addProduc" v-else-if="active === 2" />
<spellOrderSet v-else /> <spellOrderSet v-else />
</div> </div>
<div class="stepsBtn"> <div class="stepsBtn">
...@@ -33,10 +33,10 @@ ...@@ -33,10 +33,10 @@
</template> </template>
<script> <script>
import { ElMessage } from "element-plus";
import infoEditing from "./components/infoEditing.vue"; import infoEditing from "./components/infoEditing.vue";
import addProduc from "./components/addProduc.vue"; import addProduc from "./components/addProduc.vue";
import spellOrderSet from "./components/spellOrderSet.vue"; import spellOrderSet from "./components/spellOrderSet.vue";
import { ElMessage } from "element-plus";
export default { export default {
components: { components: {
infoEditing, infoEditing,
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
data() { data() {
return { return {
active: 1, // 步骤条状态 active: 1, // 步骤条状态
infoEditArr: [], infoEditArr: [], // 信息编辑数据
}; };
}, },
...@@ -58,23 +58,30 @@ export default { ...@@ -58,23 +58,30 @@ export default {
// 下一步 // 下一步
next() { next() {
if (this.active == "1") { if (this.active === 1) {
if (this.$refs.infoEdit.infoEditForm.title == "") { if (this.$refs.infoEdit.infoEditForm.title == "") {
ElMessage.error("请填写商品标题"); ElMessage.error("请填写商品标题");
// this.$refs["infoEdit"].validateForm(() => { return;
// this.active++; }
// }); // console.log(this.$refs.infoEdit.infoEditForm.picUploadList.join(","));
this.infoEditArr.push(this.$refs.infoEdit.infoEditForm);
} else if (this.active === 2) {
if (this.$refs.addProduc.comTableData.length == 0) {
ElMessage.error("请至少选择一个商品");
return; return;
} }
} }
this.active++; // 信息编辑中的图片
this.active++;
}, },
// 取消 // 取消
cancel() { cancel() {
this.$router.go(-1); this.$router.go(-1);
}, },
// 确认发布 // 确认发布
confirmRelease() {}, confirmRelease() {
this.$router.push({ path: "/op/activity/manage" });
},
}, },
created() {}, created() {},
}; };
......
import axios from "@/utils/request";
// 获取商家列表
export async function getBusinessList(params) {
const res = await axios.get("/api/v1/goods/background/ota_list",{
params
});
return res;
}
// 添加商品
export async function addGoods(params) {
const res = await axios.post(
"/api/v1/goods/background/add_goods",
params
);
return res;
}
// 商品库列表
export async function pindanGoods(params) {
const res = await axios.get("/api/v1/goods/background/pindan_goods",{
params
});
return res;
}
\ No newline at end of file
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