Commit 23651259 authored by your yuchenglong's avatar your yuchenglong

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

parent 71ecc8f7
// const ACTIVITY_URI = require("../config.js").ACTIVITY_URI;
// const req = require("../utils/request").httpReq;
const ACTIVITY_URI = require("../config.js").ACTIVITY_URI;
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)
//用户
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;
......@@ -178,6 +178,9 @@ export default {
// 查看详情
handleLook() {},
},
created(){
}
};
</script>
<style lang="less" src="./index.less" scope></style>
\ No newline at end of file
<template>
<div class="addProduc">
<!-- btnGroup -->
<!-- 按钮组 -->
<div class="btnGroup">
<el-button class="addCommodityBtn" @click="commodity('add', '')"
>添加商品</el-button
......@@ -10,7 +10,7 @@
>
</div>
<!-- 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">
<template #default="scope">
<i class="el-icon-top" @click="upMove(scope.$index, scope.row)"></i>
......@@ -20,80 +20,70 @@
></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="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">
<el-table-column prop="rema_inventory" label="剩余库存"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button
@click="commodity('update', scope.row)"
type="text"
size="small"
@click="commodity('update', scope.row)"
>修改</el-button
>
<el-button type="text" size="small">移除</el-button>
<el-button type="text" size="small" @click="removeCom(scope.row)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- dialog -->
<el-dialog :title="addCommodityTitle" v-model="addCommodityPopup">
<!-- 添加商品 -->
<el-dialog
:title="addCommodityTitle"
v-model="addCommodityPopup"
width="40%"
>
<el-form
ref="infoForm"
:inline="true"
class="demo-form-inline infoForm"
:model="commodityForm"
label-width="90px"
ref="infoForm"
class="demo-form-inline infoForm"
label-width="100px"
>
<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>
<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 label="商品标题:" prop="title">
<el-input v-model="commodityForm.title" maxlength="30"></el-input>
</el-form-item>
<el-form-item label="售价:">
<el-input v-model="commodityForm.price" placeholder=""></el-input>
......@@ -115,37 +105,66 @@
</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 v-model="commodityForm.business1" placeholder="请选择">
<el-option
v-for="item in businessOpt"
:key="item.ota_id"
:label="item.ota_name"
:value="item.ota_id"
></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>
<el-button type="primary" @click="commoditySave('infoForm')"
>保存</el-button
>
</span>
</template>
</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-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
property="commodity_ID"
property="goods_sku_id"
label="商品ID"
width="150"
></el-table-column>
<el-table-column
property="commodity_title"
property="goods_name"
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="ota_id" label="商家"></el-table-column>
<el-table-column
property="quantity_sold"
property="inventory_rest"
label="库存"
></el-table-column>
<el-table-column
property="total_amount_sold"
label="已售数量"
></el-table-column>
<el-table-column
......@@ -166,7 +185,7 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="selCommodityPopup = false">取 消</el-button>
<el-button type="primary" @click="commoditySave">保存</el-button>
<el-button type="primary" @click="ac">保存</el-button>
</span>
</template>
</el-dialog>
......@@ -174,78 +193,170 @@
</template>
<script>
import { GOODS_URI } from "../../../../../server/config";
import {
addGoods,
getBusinessList,
pindanGoods,
} from "../../../../service/Activity/index";
export default {
data() {
return {
tableData: [
{
commodity_ID: "431315",
commodity_title: "丰盛的午餐",
price: "88",
business: "无极餐厅",
stock: "22",
quantity_sold: "22",
rema_inventory: "0",
},
],
selTableData: [],
// 商品列表
comTableData: [],
// 商品库列表
comLibTableData: [],
// 添加商品
addCommodityPopup: false, // 添加商品弹窗
selCommodityPopup: false, // 选额商品
addCommodityTitle: "", // 标题
commodityForm: {
title: "",
price: "",
scribingPrice: "",
stock: "",
business: "",
business1: "",
},
business2: "",
businessOpt: [],
sold: "90", // 已售
RemaInventory: "21", // 剩余库存
dialogImageUrl: "",
dialogVisible: false,
disabled: false,
picUploadList: [], // 上传详情图片列表
isShowPopver: false, // 是否展示图片框
picUrlList: [], // 图片回显列表
uploadUrl: `${GOODS_URI}/ksy/ks3apiunencrypt/ks3api_upload`, // 金山云上传地址
selCommodityPopup: false, // 选择商品
};
},
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) {
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);
const upData = this.comTableData[index - 1];
this.comTableData.splice(index - 1, 1);
this.comTableData.splice(index, 0, upData);
}
},
// 下移
upDown(index) {
if (index === this.tableData.length - 1) {
if (index === this.comTableData.length - 1) {
this.$message.error("不能继续向下移动");
} else {
const downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
const downData = this.comTableData[index + 1];
this.comTableData.splice(index + 1, 1);
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;
if (type == "add") {
console.log("添加");
this.addCommodityTitle = "商品添加";
} else {
console.log(val);
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.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>
......@@ -254,7 +365,7 @@ export default {
margin-bottom: 15px;
}
.addCommodityBtn {
margin-right: 20px;
margin: 0 20px 0 0;
}
.infoForm /deep/.el-form-item:nth-child(1),
.infoForm /deep/.el-form-item:nth-child(2) {
......
......@@ -19,65 +19,76 @@
</el-form-item>
<el-form-item label="图片:">
<el-upload
action="#"
:class="{ hide: hideUpload }"
:data="{ type: 1 }"
: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"
:auto-upload="false"
limit="9"
multiple
>
<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
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>
<!-- 展示缩略图 -->
<el-dialog width="40%" v-model="isShowPopver">
<el-image :src="popoverImage" fit="fill" style="width: 100%"></el-image>
</el-dialog>
</div>
</template>
<script>
import { GOODS_URI } from "../../../../../server/config";
export default {
data() {
return {
infoEditForm: {
title: "",
desc: "",
title: "", // 标题
desc: "", // 介绍
picUploadList: [], // 上传详情图片列表
},
dialogImageUrl: "",
dialogVisible: false,
disabled: false,
hideUpload: false,
isShowPopver: false, // 是否展示图片框
picUrlList: [], // 图片回显列表
uploadUrl: `${GOODS_URI}/ksy/ks3apiunencrypt/ks3api_upload`, // 金山云上传地址
};
},
methods: {
validate(callback) {
this.$refs.form.validate((valid) => {
callback(valid);
});
// 初始化上传图片列表
// formatUploadPictureList(fileStr) {
// 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 @@
</el-steps>
<div class="content">
<infoEditing ref="infoEdit" v-if="active === 1" />
<addProduc v-else-if="active === 2" />
<addProduc ref="addProduc" v-else-if="active === 2" />
<spellOrderSet v-else />
</div>
<div class="stepsBtn">
......@@ -33,10 +33,10 @@
</template>
<script>
import { ElMessage } from "element-plus";
import infoEditing from "./components/infoEditing.vue";
import addProduc from "./components/addProduc.vue";
import spellOrderSet from "./components/spellOrderSet.vue";
import { ElMessage } from "element-plus";
export default {
components: {
infoEditing,
......@@ -46,7 +46,7 @@ export default {
data() {
return {
active: 1, // 步骤条状态
infoEditArr: [],
infoEditArr: [], // 信息编辑数据
};
},
......@@ -58,23 +58,30 @@ export default {
// 下一步
next() {
if (this.active == "1") {
if (this.active === 1) {
if (this.$refs.infoEdit.infoEditForm.title == "") {
ElMessage.error("请填写商品标题");
// this.$refs["infoEdit"].validateForm(() => {
// this.active++;
// });
return;
}
// 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;
}
}
this.active++;
// 信息编辑中的图片
this.active++;
},
// 取消
cancel() {
this.$router.go(-1);
},
// 确认发布
confirmRelease() {},
confirmRelease() {
this.$router.push({ path: "/op/activity/manage" });
},
},
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