Skip to content

O
op-web-service
Commit 3e8d32a4 authored by mengwenhao's avatar mengwenhao
Browse files
Options

feature:商品详情页ui完成

parent 357b4688
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 49 deletions
src/pages/Enterprise/Audit/index.vue
View file @ 3e8d32a4
......@@ -413,6 +413,7 @@ export default {
async getHistory () {
const res = await getLog({ enterprise_auth_record_id: this.auditId });
if (res.code !== 0) return this.$message.error(res.reason);
console.log("提交历史", res);
this.historyList = [...res.result];
},
......
src/pages/Goods/Detail/index.css
View file @ 3e8d32a4
......@@ -37,3 +37,10 @@
.message_border {
margin: 10px 0;
}
.width50p {
width: 50%;
padding: 20px;
}
.el-textarea .el-textarea__inner {
resize: none;
}
src/pages/Goods/Detail/index.less
View file @ 3e8d32a4
......@@ -38,3 +38,11 @@
.message_border {
margin: 10px 0;
}
.width50p {
width: 50%;
padding: 20px;
}
.el-textarea .el-textarea__inner {
resize: none;
}
src/pages/Goods/Detail/index.vue
View file @ 3e8d32a4
......@@ -12,14 +12,14 @@
</el-card>
<!-- 基本信息 -->
<el-card class="message_border">
<h3>基本信息</h3>
<section class="message">
<!-- 商品列表修改区 -->
<el-form
class="message_form"
class="message_form width50p"
label-position="left"
label-width="100px"
>
<h3>基本信息</h3>
<el-form-item label="生活号名称：">
<el-input
disabled
......@@ -34,7 +34,7 @@
<el-input v-model="goodsObj.goods_spu_id"></el-input>
</el-form-item>
<el-form-item label="商品名称：">
<el-input v-model="goodsObj.name"></el-input>
<el-input v-model="goodsObj.goods_name"></el-input>
</el-form-item>
<el-form-item label="分类：">
<el-cascader
......@@ -57,44 +57,225 @@
</el-form-item>
</el-form>
<!-- 商品详情图 -->
<article class="message_image">
<article class="message_image width50p">
<h4 style="margin-bottom:20px">商品详情图</h4>
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="9"
list-type="picture-card"
multiple
:on-remove="handleRemove"
@change="handleUploadChange"
>
<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>
<i class="el-icon-plus"></i>
</el-upload>
</article>
</section>
</el-card>
<!-- 商品详情 -->
<el-card class="message_border"></el-card>
<el-card class="message_border">
<h3>商品详情</h3>
<section class="message">
<section class="width50p">
<h4>套餐商品</h4>
<el-table>
<el-table-column
align="center"
label="商品名称"
></el-table-column>
<el-table-column
align="center"
label="数量"
></el-table-column>
<el-table-column
align="center"
label="单位"
></el-table-column>
<el-table-column
align="center"
label="单价"
></el-table-column>
</el-table>
</section>
<section class="width50p">
<h4 style="margin-bottom:20px">商品介绍图</h4>
<el-upload
action="#"
:auto-upload="false"
:limit="9"
list-type="picture-card"
multiple
:on-remove="handleRemove"
@change="handleUploadChange"
>
<i class="el-icon-plus"></i>
</el-upload>
<h4 style="margin-top:20px">商品介绍</h4>
<el-input
type="textarea"
:readonly="true"
v-model="goodsObj.introduce"
></el-input>
</section>
</section>
</el-card>
<!-- 可用门店 -->
<el-card class="message_border"></el-card>
<el-card class="message_border">
<section class="message">
<section class="width50p">
<h3>可用门店</h3>
<el-table>
<el-table-column
label="门店名称"
align="center"
></el-table-column>
<el-table-column
label="联系电话"
align="center"
></el-table-column>
<el-table-column
label="地址"
align="center"
></el-table-column>
<el-table-column
label="地理定位"
align="center"
></el-table-column>
<el-table-column
label="操作"
align="center"
>
<template>
<el-button type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button
type="primary"
style="border-radius:20px;margin:20px 0 0 50%;transform: translate(-50%,0);"
>添加门店</el-button>
</section>
<section class="width50p">
<h4 style="margin-bottom:20px">价格信息</h4>
<el-form
inline
label-width="100px"
>
<el-form-item label="秒杀价">
<el-input
:readonly="true"
disabled
></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>
<h4 style="margin:20px 0">库存信息</h4>
<el-form-item label="剩余库存量:">
<el-input-number
v-model="inventoryNumber"
:min="0"
></el-input-number>
</el-form-item>
<el-form-item label="已购买量:">
<span>{{ 12 }}</span>
</el-form-item>
<el-form-item label="总库存量:">
<span>{{ 13 }}</span>
</el-form-item>
</el-form>
</section>
</section>
</el-card>
<!-- 使用规则 -->
<el-card class="message_border"></el-card>
<el-card class="message_border">
<h3>使用规则</h3>
<el-form
style="width:480px"
:model="rulesForm"
label-position="left"
label-width="120px"
>
<el-form-item label="单人可买上限：">
<el-input v-model="rulesForm.upperLimit"></el-input>
</el-form-item>
<el-form-item label="退款规则：">
<el-select
v-model="rulesForm.rulesValue"
placeholder="请选择"
>
<el-option
v-for="item in rulesForm.rulesOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="使用日期：">
<el-radio-group v-model="rulesForm.useDate">
<el-radio
label="周末、节假日通用"
:value="1"
></el-radio>
<el-radio
label="线下场地免费"
value="2"
></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="使用时间：">
<el-time-picker
is-range
v-model="rulesForm.useTime"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
>
</el-time-picker>
</el-form-item>
<el-form-item label="使用规则：">
<el-input
type="textarea"
maxlength="100"
show-word-limit
v-model="rulesForm.desc"
></el-input>
</el-form-item>
</el-form>
</el-card>
<!-- 操作记录 -->
<el-card class="message_border"></el-card>
<el-card class="message_border">
<h3>操作记录</h3>
<el-table
border
stripe
:data="recordLits"
>
</el-table>
<el-table-column
label="状态"
prop="state"
></el-table-column>
<el-table-column
label="操作者"
prop="author"
></el-table-column>
<el-table-column
label="审核时间"
prop="time"
></el-table-column>
<el-table-column
label="审核描述"
prop="desc"
></el-table-column>
</el-card>
</el-card>
</template>
......@@ -162,7 +343,34 @@ export default {
spuId: "", // 商品id
goodsObj: {}, // 商品回显信息
recordList: [], // 提交记录
optionList: [] // 商品分类选项
optionList: [], // 商品分类选项
uploadFileList: [], // 上传图片列表
inventoryNumber: 0, // 库存数量
// 使用规则表单
rulesForm: {
upperLimit: "", // 单人可买上限
rulesValue: "", // 退款规则
// 退款选项
rulesOptions: [
{ value: 1, label: "到期自动退款" },
{ value: 2, label: "购买后不允许退款" },
{ value: 3, label: "到期后不退款" }
],
useDate: "", // 使用日期
useTime: "",// 使用时间
desc: "", // 使用描述
},
recordLits: [
{
state: "审核通过",
author: "我自己",
time: "2021-06-25",
desc: "那就通过了呗,还咋?"
}
], // 操作记录
};
},
......@@ -196,9 +404,12 @@ export default {
console.log(value);
},
// 删除照片
handleRemove (file) {
console.log(file);
this.removePhoto(file)
handleRemove (file, fileList) {
console.log(fileList);
},
// 上传图片更改
handleUploadChange (file, fileList) {
console.log(fileList);
}
}
};
......
src/pages/Goods/List/index.vue
View file @ 3e8d32a4
......@@ -12,7 +12,7 @@
</el-form-item>
<!-- 商品名称 -->
<el-form-item label="商品名称">
<el-input v-model="searchProps.name"></el-input>
<el-input v-model="searchProps.goods_name"></el-input>
</el-form-item>
<!-- 所属分类 -->
<el-form-item label="所属分类">
......@@ -35,7 +35,7 @@
<!-- 商品状态 -->
<el-form-item label="商品状态">
<el-select
v-model="status"
v-model="audit_status"
multiple
collapse-tags
@change="handleStatusChange"
......@@ -69,7 +69,7 @@
@click="searchList"
type="primary"
>搜索</el-button>
<el-button>重置</el-button>
<el-button @click="resetList">重置</el-button>
</el-form-item>
</el-form>
......@@ -87,7 +87,7 @@
></el-table-column>
<el-table-column
label="商品名称"
prop="name"
prop="goods_name"
align="center"
></el-table-column>
<el-table-column
......@@ -121,15 +121,15 @@
>
<template #default="scope">
<span
v-if="scope.row.status == 0"
v-if="scope.row.audit_status == 0"
style="color:#FF982C;"
>待审核</span>
<span
v-if="scope.row.status == 1"
v-if="scope.row.audit_status == 1"
style="color:#5CC247;"
>审核通过</span>
<span
v-if="scope.row.status == 2"
v-if="scope.row.audit_status == 2"
style="color:#FD6B6F;"
>审核驳回</span>
&nbsp;&nbsp;&nbsp;
......@@ -171,12 +171,12 @@
>编辑</el-button>
<el-button
v-if="scope.row.status == 0"
v-if="scope.row.audit_status == 0"
type="text"
@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" -->
<!-- v-if="scope.row.audit_status == 1 && scope.row.online_status == 2 || scope.row.audit_status == 1 && scope.row.online_status == 0" -->
<el-popconfirm
title="您确定要上架该商品吗？"
cancelButtonType="default"
......@@ -251,12 +251,12 @@ export default {
page: 1, // 页码
page_size: 20, // 页数大小
goods_spu_id: "", // 后台商品id
name: "", // 商品名称
goods_name: "", // 商品名称
category_1_id: "", // 一级分类id
category_2_id: "", // 二级分类id
life_account_id: "",
life_account_name: "",
status: "", // 商品状态
audit_status: "", // 商品状态
online_status: "" // 上架状态
},
......@@ -276,8 +276,8 @@ export default {
{ value: 2, label: "已下架" }
],
status: [],
onlineStatus: [],
audit_status: [], // 审核状态
onlineStatus: [], // 上/下架状态
// 商品列表
goodsList: [],
......@@ -329,7 +329,7 @@ export default {
},
// 商品状态赋值
handleStatusChange (val) {
this.searchProps.status = this.getValue(val);
this.searchProps.audit_status = this.getValue(val);
},
// 上架状态赋值
handleOnlineStatusChange (val) {
......@@ -337,20 +337,37 @@ export default {
},
// 按条件搜索
searchList () {
console.log(this.searchProps);
this.getCommodityList();
},
// 重置表单
resetList () {
this.searchProps = {
page: 1, // 页码
page_size: 20, // 页数大小
goods_spu_id: "", // 后台商品id
goods_name: "", // 商品名称
category_1_id: "", // 一级分类id
category_2_id: "", // 二级分类id
life_account_id: "",
life_account_name: "",
audit_status: "", // 商品状态
online_status: "" // 上架状态
},
this.getCommodityList();
},
// 上架/下架操作
async changeGoodsState (state, spuId) {
// 上架操作
if (state === "GROUNDING") {
const res = await putOnline(spuId);
if (res.code !== 0) return this.$message.error(res.status);
if (res.code !== 0) return this.$message.error(res.reason);
this.$message.success("商品上架成功");
}
// 下架操作
else if (state === "UNDERCARRIAGE") {
const res = await putOffline(spuId);
if (res.code !== 0) return this.$message.error(res.status);
if (res.code !== 0) return this.$message.error(res.reason);
this.$message.success("商品下架成功");
}
},
......
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