Skip to content

S
shop-new
提交 e3d51d21 authored 作者: huaxinzhu's avatar huaxinzhu
浏览文件
操作

添加商品结构梳理，楼层效果

上级 b4310939
显示空白字符变更
内嵌 并排
正在显示 包含 243 行增加 和 292 行删除
src/views/system/goods/add/addIndex.vue deleted 100644 → 0
浏览文件 @ b4310939
<template>
<div>
<p>hi，你好</p>
</div>
</template>
<script>
export default {
name: "AddIndex",
data() {
return {}
}
}
</script>
<style lang="scss" type="text/stylus" scoped>
</style>
src/views/system/goods/add/components/goodsinfomation.vue
浏览文件 @ e3d51d21
<template>
<div class="app-container">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="ruleForm.goodsName" style="width:400px;"></el-input>
<el-popover
placement="top-start" width="300" trigger="hover" content="最多允许输入30个汉字（60字符），建议标题内包含与商品相关的关键词">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<el-cascader v-model="ruleForm.categoryId" :props='propsaddress' :options="options1" @change="handleChange"
style="width:400px;"></el-cascader>
</el-form-item>
<el-form-item label="市场原价" prop="scPrice">
<el-input v-model="ruleForm.scPrice" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="市场原价起到参考的作用">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="指导售价" prop="price">
<el-input v-model="ruleForm.price" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="您建议下游商家售卖的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="结算价格" prop="jsPrice">
<el-input v-model="ruleForm.jsPrice" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="您与云仓平台最终结算的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="运费模板" prop="freightId">
<el-radio-group v-model="ruleForm.resource" @change="freightIdTypeChange">
<el-radio label='1'>运费模板</el-radio>
<el-radio label='0'>单独运费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="统一运费" v-if="ruleForm.resource==0" prop="wlPrice">
<el-input v-model="ruleForm.wlPrice" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="运费模板" v-if="ruleForm.resource==1">
<el-select v-model="ruleForm.freightId" placeholder="请选择运费模板" style="width:400px;" @change="selectTm">
<el-option v-for="item in freightList" :key="item.Id" :label="item.Name" :value="item.Id"
style="text-align:center;"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发货时效" prop="Delayompensate">
<el-select v-model="ruleForm.Delayompensate" style="width:400px;" placeholder="请选择发货时效">
<el-option label="24小时" value="24" ></el-option>
<el-option label="48小时" value="48" ></el-option>
<el-option label="72小时" value="72" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="售后时长" prop="aftersaleTime">
<el-select v-model="ruleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
<el-option label="7天" value="7" style="text-align:center;"></el-option>
<el-option label="15天" value="15" style="text-align:center;"></el-option>
<el-option label="30天" value="30" style="text-align:center;"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- right -->
<el-col :span="12">
<el-form-item label="商品库存" prop="goodsNowStock">
<el-input v-model.number="ruleForm.goodsNowStock" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品产地" prop="producingArea">
<el-input v-model="ruleForm.producingArea " style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品重量" prop="weight">
<el-input v-model="ruleForm.weight" style="width:400px;"></el-input>
克（g）
</el-form-item>
<el-form-item label="商品单位" prop="unit">
<el-input v-model="ruleForm.unit" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品品牌" prop="goodsBrand">
<el-select v-model="ruleForm.goodsBrand" style="width:400px;" filterable @change="goodsBrandChange" placeholder="请选择品牌">
<el-option
v-for="item in brandOtions"
:key="item.id"
:label="item.brand_cn"
:value="item.id">
</el-option>
</el-select>
<el-link type="primary" @click="toBrand" :underline="false">添加品牌</el-link>
</el-form-item>
<el-form-item label="三方编号" prop="outGoodsId">
<el-input v-model="ruleForm.outGoodsId" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="附加运费" prop="pywlPrice" v-if="ruleForm.resource==0">
<el-input v-model="ruleForm.pywlPrice" style="width:400px;" placeholder="偏远地区六省"></el-input>
元
</el-form-item>
</el-col>
</el-row>
<el-form-item label="商品备注" prop="mark">
<el-input type="textarea" v-model="ruleForm.mark"></el-input>
</el-form-item>
<el-form-item label="服务标签" prop="serviceagsTags">
<el-checkbox-group v-model="serviceagsTags">
<el-checkbox v-for="item in tags" :label="item.id" true-label :key="item.id" :disabled="item.isdc" @change="serviceSingleChange(item.id)">{{item.tag}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="详情描述" style="height:550px;" prop="description" v-loading="quillUpdateImg">
<el-upload
class="avatar-uploader2"
action="#"
auto-upload
:http-request="uploadSectionFile"
name="file"
multiple
:show-file-list="false"
:file-list="ruleFormdialogImageUrl"
:before-upload="beforeUploadEdit">
</el-upload>
<input class="uploadImg" style="display: none;" type="file" ref="file" accept="image/*" @change="fileChange($event)" name="file" multiple id="file">
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange" style="height:500px;margin-top:-30px;"></quill-editor>
</el-form-item>
<el-form-item style="margin-bottom: 0;">
<el-button @click="resetGoodsInfForm('ruleForm')">重 置</el-button>
<div class="goods-info">
<el-form :model="goodsInfoForm" :rules="rules" ref="goodsInfoForm" label-width="120px" class="demo-goodsInfoForm">
<el-form-item label="商品分类：">
<span class="type-text-span">{{ categoryStr }}</span><el-link class="edit-type-span el-icon-edit" :underline="false">修改所在类目</el-link>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
// [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
// [{'header': [1, 2, 3, 4, 5, 6, false]}],
// [{'color': []}, {'background': []}], // dropdown with defaults from theme
// [{'font': []}],
// [{'align': []}],
['image', 'video'],
['clean'] // remove formatting button
]
import {
GetCategory,
GetFreight,
......@@ -176,38 +18,25 @@
export default {
name: 'goods',
props: {
infomationdatas: {
goodsinfodata: {
type: Object,
required: true
}
},
data() {
let categoryIdCheck = (rule, value, callback) => {
if (this.ruleForm.categoryId == 0 || !this.ruleForm.categoryId) {
if (this.goodsInfoForm.categoryId == 0 || !this.goodsInfoForm.categoryId) {
callback(new Error("请选择商品分类"));
} else {
callback();
}
};
return {
tags: [
{id: 2, tag: "假一赔十", isdc: false},
{id: 3, tag: "7天退换", isdc: false},
{id: 4, tag: "不可退还", isdc: false},
{id: 5, tag: "厂家直供", isdc: false},
{id: 6, tag: "售后无忧", isdc: false}
],
propsaddress: {
label: 'label',
value: 'id',
},
content: '',
// editorOption: {
// placeholder: '编辑内容'
// },
brandOtions: [],
serviceagsTags: [],
ruleForm: {
categoryStr: '',
/*------------------------------*/
goodsInfoForm: {
outGoodsId: '',
value: [],
goodsId: 0,
......@@ -250,76 +79,18 @@
// 运费模板列表
freightList: [],
options1: [],
/*8888888888888*/
index:0,
indexall:0,
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('#file').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
quillUpdateImg:false,
ruleFormdialogImageUrl:[]
}
},
components: {},
watch: {
serviceagsTags: {
handler(val, oldVal) {
this.$set(this.ruleForm, 'serviceagsTags', val)
},
deep: true
},
content: {
handler(val, oldVal) {
this.$set(this.ruleForm, 'description', val)
},
deep: true
},
ruleForm: {
handler(val, oldVal) {
val.description = this.content;
val.serviceagsTags = this.serviceagsTags;
this.$emit('infomationclick', val);
},
deep: true
},
infomationdatas(curVal, oldVal) {
console.log("商品信息子组件：",curVal);
if (curVal) {
this.ruleForm = curVal;
if(curVal.freightId == 0) {
this.ruleForm.resource = '0';
}else {
this.ruleForm.resource = '1';
}
this.content = this.ruleForm.description;
// 初始化
this.serviceagsTags = [];
if(this.ruleForm.serviceagsTags) {
this.ruleForm.serviceagsTags.forEach((val) => {
if (val) {
let nid = parseInt(val);
this.serviceagsTags.push(nid);
}
})
}
}
}
// serviceagsTags: {
// handler(val, oldVal) {
// this.$set(this.goodsInfoForm, 'serviceagsTags', val)
// },
// deep: true
// },
},
created() {
......@@ -345,7 +116,7 @@
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.index++
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.goodsInfoFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
// 获取富文本组件实例
let quill = this.$refs.myTextEditor.quill;
......@@ -385,7 +156,7 @@
this.quillUpdateImg = true;
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.goodsInfoFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
// 获取富文本组件实例
let quill = this.$refs.myTextEditor.quill;
......@@ -439,8 +210,8 @@
freightIdTypeChange(val) {
// 0 单独运费 1 是运费模板
if(val === '1') {
if(this.ruleForm.freightId == 0) {
this.ruleForm.freightId = "全国包邮通用模板";
if(this.goodsInfoForm.freightId == 0) {
this.goodsInfoForm.freightId = "全国包邮通用模板";
}
}
},
......@@ -465,7 +236,7 @@
});
},
handleChange(value) {
this.ruleForm.categoryId = value[value.length - 1]
this.goodsInfoForm.categoryId = value[value.length - 1]
},
setTreeData(arr) {
// 删除所有 children,以防止多次调用
......@@ -498,7 +269,7 @@
obj = this.brandOtions.find((item)=>{//这里的userList就是上面遍历的数据源
return item.id === indexId;//筛选出匹配数据
});
this.ruleForm.goodsBrand = obj.brand_cn;
this.goodsInfoForm.goodsBrand = obj.brand_cn;
},
// 维护品牌
toBrand() {
......@@ -511,12 +282,12 @@
this.content = '';
// 服务标签
this.serviceagsTags = [];
//console.log("重置后的数据：",this.ruleForm);
//console.log("重置后的数据：",this.goodsInfoForm);
},
// 商品信息 子组件 form表单校验
validateGoodsInfForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
this.$refs['goodsInfoForm'].validate(valid => {
if (valid) {
flag = true
} else {
......@@ -525,8 +296,6 @@
})
return flag
},
selectTm(indexId) {
},
......@@ -535,13 +304,15 @@
}
</script>
<style scoped>
ul, li {
list-style: none;
/*margin: 0;*/
/*padding: 0;*/
.goods-info {
padding: 15px 0px;
}
.el-input-group {
width: calc(100% - 60px);
.type-text-span {
display: inline-block;
width: 300px;
}
.edit-type-span {
display: inline-block;
cursor: pointer;
}
</style>
src/views/system/goods/add/index.vue
浏览文件 @ e3d51d21
<template>
<div class="app-container">
<el-card class="box-card">
<!-- 选择商品类目 start -->
<el-card class="box-card" v-if="!isShowGoodsDetails">
<div slot="header" class="clearfix">
<p class="card-header-title"><span class="blue-block-goods"></span>确认商品所在目录</p>
</div>
......@@ -9,22 +10,66 @@
<p class="goods-type-tip">为商品设置正确的类目，能让商品快速的被搜索到</p>
</div>
<div class="goods-type-options" v-loading="loading">
<el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="hxz"></el-cascader-panel>
<el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="ssqCascader" @blur="handleAddressFun"></el-cascader-panel>
</div>
<el-button type="primary" class="next-step" :disabled="isNextStep" @click="nextStep">下一步</el-button>
</div>
</el-card>
<!-- 选择商品类目 end -->
<!-- 添加商品 start -->
<el-card class="box-card good-details-body" v-show="isShowGoodsDetails">
<div class="floor-nav" id="floorNavList" :class="{'is-fixed': isFixed}">
<ul class="nav-list">
<li class="nav-list-item" :class="{'floor-item-active': isFIActive === index}" v-for="(item, index) in floorNav" :key="item.id" @click="setFloorNavMountClick(index)">{{ item.name }}</li>
</ul>
</div>
<div class="floor-cont" ref="scrollview">
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品信息</p>
<Goodsinfomation ref="GoodsInfo" :goodsinfodata='goodsinfodata'/>
</div>
</div>
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品规格</p>
</div>
</div>
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品售价</p>
</div>
</div>
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品详情</p>
</div>
</div>
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>售后及服务</p>
</div>
</div>
</div>
<div class="submit-cont">
<el-button type="primary" style="padding: 10px 30px;">提 交</el-button>
</div>
</el-card>
<!-- 添加商品 end -->
</div>
</template>
<script>
import { getAreaList } from '@/api/module/retreat/address';
import Goodsinfomation from './components/goodsinfomation'
let TIMER = null;
export default {
data() {
return {
loading: false,
SSQList: [], // 省市区
SSQStr: '', // 省市区 拼接
props: {
expandTrigger: 'click',
lazy: true,
......@@ -33,12 +78,33 @@
label: 'name',
leaf: 'leaf'
},
isNextStep: true
isNextStep: true,
isFixed: false,
scrollHeight: 0,
isShowGoodsDetails: false,
isFIActive: 0,
/**/
floorNav: [ // 自定义左侧楼层数
{ id: 1, name: '商品信息' },
{ id: 2, name: '商品规格' },
{ id: 3, name: '商品售价' },
{ id: 4, name: '商品详情' },
{ id: 5, name: '售后及服务' },
],
/* 商品信息 */
goodsinfodata: {}
}
},
components: {
Goodsinfomation,
},
created() {
},
mounted() {
},
methods: {
// 只有点击完最后一级，才会有值
SSQChange() {
......@@ -51,6 +117,7 @@
},
lazyLoad(node, resolve) {
this.SSQList = [];
this.SSQStr = '';
this.getArea(node, resolve);
if(this.SSQList && this.SSQList.length > 0) {
this.isNextStep = false
......@@ -72,7 +139,9 @@
}
this.loading = true;
getAreaList(limboNode).then(res => {
let result = {};
// debugger
if (level === 0) {
result = res.data
result.forEach(item => {
......@@ -108,12 +177,75 @@
this.loading = false;
});
},
// handleAddressFun: function(e,form,this.ssqStr){
// // thsAreaCode = this.form.areaCode // 注意1：获取value值
// thsAreaCode = this.$refs['ssqCascader'].currentLabels //注意2： 获取label值
// console.log(thsAreaCode) // 注意3： 最终结果是个一维数组对象
//
// },
nextStep() {
// 注意数据格式 [1,2,3] 数组，且里面是数字类型
console.log(111,this.SSQList);
// let a1 = []
// a1.push(this.SSQList[0]);
//let fuck1 = this.$refs['ssqCascader'].getCheckedNodes(this.SSQList)
// console.log(111,this.SSQList);
//console.log(222,fuck1);
this.isShowGoodsDetails = true;
},
/* 添加商品详细 */
/* 设置楼层导航事件驱动方法* @params Number index 楼层下标 */
setFloorNavMountClick(index) {
let _this = this
this.isFIActive = index;
let floor_item = document.getElementsByClassName('floor-item'),
floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop,
window_scrollTop = this.$refs.scrollview.scrollTop,
timer = {
step: 50,
times: 15,
FLOOR_OFFSETTOP: floor_offsetTop
}
if (window_scrollTop > floor_offsetTop) {
_this.setFloorScrollArrowUp(timer)
} else if (window_scrollTop == floor_offsetTop) {
return false
} else {
_this.setFloorScrollArrowDown(timer)
}
},
/* 设置楼层向上滚动* @params Object timer 定时器配置 */
setFloorScrollArrowUp(timer) {
//debugger
let _this = this
clearInterval(TIMER)
TIMER = setInterval(() => {
const window_scrollTop = this.$refs.scrollview.scrollTop
if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(TIMER)
} else {
this.$refs.scrollview.scrollTop = window_scrollTop - timer.step
}
}, timer.times)
},
/* 设置楼层向下滚动@params Object timer 定时器配置 */
setFloorScrollArrowDown(timer) {
let _this = this
clearInterval(TIMER)
TIMER = setInterval(() => {
const window_scrollTop = this.$refs.scrollview.scrollTop
if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(TIMER)
} else {
this.$refs.scrollview.scrollTop = window_scrollTop + timer.step
}
}, timer.times)
},
} // methods end
}
</script>
......@@ -128,14 +260,14 @@
flex-direction: row;
justify-content: start;
align-items: center;
font-size: 20px;
font-size: 18px;
color: #333;
font-weight: 400;
height: 24px;
}
.blue-block-goods {
width: 5px;
height: 20px;
height: 24px;
background: #3A84FF;
margin: 0 7px 0 0;
border-radius: 2px;
......@@ -181,4 +313,70 @@
margin: 0 auto;
display: block;
}
/* 电梯效果 样式 */
.floor-nav {
width: 100%;
}
.floor-nav .nav-list {
padding: 0;
margin:0;
display: flex;
justify-content: start;
flex-direction: row;
border-bottom:1px solid #eee;
}
.floor-nav .nav-list .nav-list-item {
font-size: 18px;
font-weight: 400;
color: #333333;
padding: 0 25px 15px;
list-style: none;
vertical-align: middle;
align-self: center;
border-bottom: 2px solid #fff;
cursor: pointer;
}
.floor-nav .nav-list .floor-item-active,
.floor-nav .nav-list .nav-list-item:hover {
color: #3A84FF;
font-weight: bold;
border-bottom: 2px solid #3A84FF;
}
.floor-item-box-title {
background: #F1F1F6;
height: 45px;
}
.blue-block-goods-title {
margin: 0 20px 0 0;
}
/deep/.good-details-body .el-card__body {
height: 100%;
padding: 15px 20px 0px 20px;
overflow: hidden;
}
.floor-cont{
height: calc(100% - 98px);
overflow: auto;
}
.floor-item {
padding: 0 20px 0 0;
margin: 15px auto;
min-height: 300px;
color: #333;
}
.submit-cont {
width: calc(100% + 40px);
padding: 12px 0 8px;
margin-left: -20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/*align-content: center;*/
box-shadow: 0px -8px 9px 1px rgba(51, 51, 51, 0.06);
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论