Skip to content

O
op-web-service
Commit 357b4688 authored by mengwenhao's avatar mengwenhao
Browse files
Options

feature: 商品详情基本信息回显完成

parent 78820f96
Show whitespace changes
Inline Side-by-side
Showing with 236 additions and 44 deletions
server/controllers/goods.js
View file @ 357b4688
......@@ -56,3 +56,13 @@ exports.putOffline = async ctx => {
};
ctx.body = await req(ctx, opts);
};
// 获取商品详情列表
exports.getGoodsInfo = async ctx => {
const url = `${GOODS_URI}/goods/background/get_goods_info`;
const opts = {
url,
method: "GET",
qs: ctx.request.query
};
ctx.body = await req(ctx, opts);
};
server/router.js
View file @ 357b4688
......@@ -39,9 +39,10 @@ router.post(`${API_VERSION}/op_business_update`, enterprise.opBusinessUpdate);
/* 商品管理 */
router.get(`${API_VERSION}/get_goods_category_list`, goods.getCategoryList);
router.get(`${API_VERSION}/getGoodsList`, goods.getList);
router.get(`${API_VERSION}/goods/background/get_goods_list`, goods.getList);
router.post(`${API_VERSION}/goods/background/online`, goods.putOnline);
router.post(`${API_VERSION}/goods/background/offline`, goods.putOffline);
router.get(`${API_VERSION}/goods/background/get_goods_info`, goods.getGoodsInfo);
//生活号
router.post(`${API_VERSION}/merchant/lifeinner/life_info`, life.get_life_info)
......
src/pages/Goods/Detail/index.css
View file @ 357b4688
.detail {
margin-top: 30px;
height: 100%;
}
.detail .state {
display: flex;
align-items: center;
justify-content: flex-start;
}
.detail .state .some_state {
display: inline;
}
.detail .state .update_time {
margin: 0 20px;
}
.detail .message {
display: flex;
justify-content: flex-start;
}
.detail .message .message_form {
width: 50%;
}
.detail .message .message_form .el-input__inner {
width: 80%;
}
.detail .message .message_form .el-textarea {
width: 80%;
}
.detail .message .message_form .options {
width: 80%;
}
.detail .message .message_form .options .el-input__inner {
width: 100%;
}
.detail .message .message_image {
width: 50%;
}
.message_border {
border: 1px solid #000000;
border-radius: 10px;
padding: 30px;
margin: 10px 0;
}
src/pages/Goods/Detail/index.less
View file @ 357b4688
.detail {
margin-top: 30px;
height: 100%;
.state {
display: flex;
align-items: center;
justify-content: flex-start;
.some_state {
display: inline;
}
.update_time {
margin: 0 20px;
}
}
.message {
display: flex;
justify-content: flex-start;
.message_form {
width: 50%;
.el-input__inner {
width: 80%;
}
.el-textarea {
width: 80%;
}
.options {
width: 80%;
.el-input__inner {
width: 100%;
}
}
}
.message_image {
width: 50%;
......@@ -19,8 +36,5 @@
}
.message_border {
border: 1px solid #000000;
border-radius: 10px;
padding: 30px;
margin: 10px 0;
}
src/pages/Goods/Detail/index.vue
View file @ 357b4688
<template>
<el-card class="detail">
<!-- 状态区域 -->
<section class="state">
<h2>待审核</h2>
<span class="update_time">上次更新时间：2021-06-18</span>
<span>创建时间：2021-06-18</span>
</section>
<el-card class="state">
<h2 class="some_state">{{ status }}</h2>
<h2
class="some_state"
style="margin-left:20px"
>{{ onlineStatus }}</h2>
<span class="update_time">上次更新时间：{{ goodsObj.update_time }}</span>
<span>创建时间：{{ goodsObj.create_time }}</span>
</el-card>
<!-- 基本信息 -->
<section class="message_border">
<el-card class="message_border">
<h3>基本信息</h3>
<section class="message">
<!-- 商品列表修改区 -->
<el-form
class="message_form"
inline
label-position="left"
label-width="100px"
>
<el-form-item label="生活号名称：">
<el-input></el-input>
<el-input
disabled
:readonly="true"
v-model="goodsObj.life_account_name"
></el-input>
</el-form-item>
<el-form-item label="生活号认证：">
<el-input></el-input>
</el-form-item>
<el-form-item label="商品id：">
<el-input></el-input>
<el-input v-model="goodsObj.goods_spu_id"></el-input>
</el-form-item>
<el-form-item label="商品名称：">
<el-input></el-input>
<el-input v-model="goodsObj.name"></el-input>
</el-form-item>
<el-form-item label="一级分类：">
<el-input></el-input>
</el-form-item>
<el-form-item label="二级分类：">
<el-input></el-input>
<el-form-item label="分类：">
<el-cascader
v-model="optionsValue"
class="options"
:options="optionList"
:props="optionsProps"
@change="optionsChange"
clearable
></el-cascader>
</el-form-item>
<el-form-item label="描述：">
<textarea
name=""
id=""
cols="100"
rows="4"
></textarea>
<el-input
type="textarea"
maxlength="50"
show-word-limit
:autosize="{ minRows: 4 }"
v-model="goodsObj.desc"
></el-input>
</el-form-item>
</el-form>
<!-- 商品详情图 -->
<article class="message_image">
<h3>商品</h3>
<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-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</template>
</el-upload>
</article>
</section>
</section>
</el-card>
<!-- 商品详情 -->
<section class="message_border"></section>
<el-card class="message_border"></el-card>
<!-- 可用门店 -->
<section class="message_border"></section>
<el-card class="message_border"></el-card>
<!-- 使用规则 -->
<section class="message_border"></section>
<el-card class="message_border"></el-card>
<!-- 操作记录 -->
<section class="message_border"></section>
<el-card class="message_border"></el-card>
</el-card>
</template>
<style lang="less" src="./index.less" scope></style>
<script>
import { getGoodsInfo, getGoodsList } from "@/service/Goods/goods";
export default {
name: "GoodsDetail",
// beforeRouteEnter (to, from, next) {
// if (!to.params.operation) {
// next({ name: "GoodsList" });
// }
// else if (!to.params.spuId) {
// next({ name: "GoodsList" });
// }
// else {
// next();
// };
// },
created () {
this.getOptions();
this.getGoodsDetailList({ goods_spu_id: "2106231609050140001" });
},
computed: {
// 审核状态
status () {
if (this.goodsObj.status === 0) {
return "待审核";
} else if (this.goodsObj.status === 1) {
return "审核通过";
} else {
return "审核驳回";
}
},
// 上下架状态
onlineStatus () {
if (this.goodsObj.online_status === 0) {
return "未上架";
} else if (this.goodsObj.online_status === 1) {
return "已上架";
} else {
return "已下架";
}
}
},
watch: {
goodsObj (val) {
this.optionsValue = [val.category_1_id, val.category_2_id];
}
},
data () {
return {
// 商品分类选项
optionsProps: {
value: "category_id",
label: "name",
children: "sub_list"
},
optionsValue: [], // 商品分类的值
spuId: "", // 商品id
goodsObj: {}, // 商品回显信息
recordList: [], // 提交记录
optionList: [] // 商品分类选项
};
},
methods: {
// 获取级联选择商品列表
async getOptions () {
try {
const res = await getGoodsList();
if (res.code !== 0) return this.$message.error(res.reason);
this.optionList = res.result;
console.log(res);
} catch (error) {
console.error(error);
}
},
// 获取详情列表
async getGoodsDetailList (params) {
try {
const res = await getGoodsInfo(params);
console.log("商品详情列表", res);
if (res.code !== 0) return this.$message.error(res.reason);
const { goods_info, record_list } = res.result;
this.goodsObj = goods_info;
this.recordList = record_list;
} catch (error) {
console.error(error);
}
},
// 商品分类列表变化
optionsChange (value) {
console.log(value);
},
// 删除照片
handleRemove (file) {
console.log(file);
this.removePhoto(file)
}
}
};
</script>
src/pages/Goods/List/index.vue
View file @ 357b4688
......@@ -112,7 +112,7 @@
></el-table-column>
<el-table-column
label="发布者"
prop="user_id"
prop="publish_user_id"
align="center"
></el-table-column>
<el-table-column
......@@ -167,13 +167,13 @@
<template #default="scope">
<el-button
type="text"
@click="goDetail(`EDIT`)"
@click="goDetail(`EDIT`,scope.row.goods_spu_id)"
>编辑</el-button>
<el-button
v-if="scope.row.status == 0"
type="text"
@click="goDetail(`AUDIT`)"
@click="goDetail(`AUDIT`,scope.row.goods_spu_id)"
>审核</el-button>
<!-- v-if="scope.row.status == 1 && scope.row.online_status == 2 || scope.row.status == 1 && scope.row.online_status == 0" -->
......@@ -364,6 +364,7 @@ export default {
// 去往详情页
goDetail (operation, spuId) {
console.log(spuId);
this.$router.push({ name: "GoodsDetail", params: { operation, spuId } });
}
}
......
src/service/Goods/goods.js
View file @ 357b4688
......@@ -7,16 +7,25 @@ export async function getGoodsList () {
}
// 获取商品列表
export async function getList (params) {
const res = await axios.get("/api/v1/getGoodsList", { params });
const res = await axios.get("/api/v1/goods/background/get_goods_list", { params });
return res;
}
// 商品上架
export async function putOnline (query) {
const res = await axios.post("/api/v1/goods/background/online", { goods_spu_id: query });
const res = await axios.post("/api/v1/goods/background/online", {
goods_spu_id: query
});
return res;
}
// 商品下架
export async function putOffline (query) {
const res = await axios.post("/api/v1/goods/background/offline", { goods_spu_id: query });
const res = await axios.post("/api/v1/goods/background/offline", {
goods_spu_id: query
});
return res;
}
// 获取商品详情列表
export async function getGoodsInfo (params) {
const res = await axios.get("/api/v1/goods/background/get_goods_info", { params });
return res;
}
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