Skip to content

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

添加商品-1、电梯效果优化完成；2、商品规格50%

上级 9fb20cbc
隐藏空白字符变更
内嵌 并排
正在显示 包含 174 行增加 和 79 行删除
src/views/system/goods/add/components/goodsspecifications.vue
浏览文件 @ 36397264
<template>
<div class="app-container">
<!-- <div v-for="(item, index) in speData" :key="index">-->
<!-- <p>-->
<!-- <span>规格名称：</span>-->
<!-- <el-select v-model="fuck" placeholder="请选择">-->
<!-- <el-option-->
<!-- v-for="item in cities"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value">-->
<!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </p>-->
<!-- </div>-->
<div class="goods-specifications">
<div class="el-form-item-h" v-for="(speItem,index) in speData" :key="index">
<label class="el-form-item-h__label">规格名称：</label>
<div class="el-form-item-h__content">
<el-select
:ref="'speNameDom' + index "
v-model="speItem.speName"
size="small"
style="width: 300px"
filterable
allow-create
default-first-option
:clearable="true"
@visible-change='bv=> visibleChange(bv,"speNameDom",index)'
>
<el-option
v-for="(itemSN,indexSN) in speOptions"
:key="itemSN.id"
:label="itemSN.title"
:value="itemSN.id"
>
<span style="float: left" class="span-style">{{ itemSN.title }}</span>
<div class="flag">
<svg-icon icon="edit" iconClass="template_edit_style" @click="addSpeName(index)"/>
</div>
</el-option>
</el-select>
<div class="spe-params-con">
<el-input v-model="fuck" size="small" placeholder="请输入规格参数" class="spe-params-input-item">
<i slot="suffix" class="el-input__icon el-icon-delete el-icon-delete-h" @click="deleteSpeParam()"></i>
</el-input>
<el-button type="primary" plain class="el-icon-plus" size="mini">添加规格参数</el-button>
</div>
</div>
</div>
<p>
<span>规格名称：</span>
<el-select v-model="input3" placeholder="请选择">
<el-option
v-for="(item,index) in cities"
:key="item.value"
:label="item.label"
:value="item.value">
<el-button style="float: bottom; color: #8492a6; font-size: 13px; padding: 10px 20px;"
v-if="index === cities.length-1" @click="fuck">新增</el-button>
</el-option>
</el-select>
</p>
<el-button @click="fuc">增 加</el-button>
</div>
</template>
......@@ -45,63 +53,150 @@ export default {
data() {
return {
speData: [], // 商品规格总数据
input3: '',
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
},{
value: '',
label: ''
}],
/**/
arrtdall:[],
nopeimg: require("@/assets/image/nopic100.jpg"),
checked: false,
type: "",
imgname: "",
indeximg: "",
indexsimg: "",
shopType: [],
shopTypes: [],
newList: [],
newData: [],
tableData7: [], // 规格列表表格
goodsNowStock: "",
jsPrice: "", //协议价
price: "", //指导价
scPrice: "", //市场价
weight: "",
spanArr: [],
pos: "",
spanArr1: [],
pos1: "",
tablearr: [],
spanArrS: {
spanArr0: [],
spanArr1: [],
},
posS: {
pos0: "",
pos1: "",
singleSpeData: {
speName: '', // 规格名称
},
fuck:'',
speOptions: [{
id: '1',
title: '北京'
}, {
id: '2',
title: '上海'
}],
};
},
components: {},
created() {
this.speData = [];
this.$set(this.speData,this.speData.length,this.singleSpeData);
// console.log(71,this.speData);
// this.$set(this.speData,this.speData.length,this.singleSpeData);
// this.speData.push(this.singleSpeData);
// this.speData.push(this.singleSpeData);
},
mounted() {},
watch:{},
methods: {
fuck() {
this.cities.push({
label: '哈哈',
value: "hh"
});
fuc() {
let singleSpeData = {
speName: '', // 规格名称
};
//this.$set(this.speData,this.speData.length,singleSpeData);
this.speData.push(singleSpeData);
},
/**
* 规格名称 下拉框 出现/隐藏 触发
* 为element-ui的Select和Cascader添加弹层底部操作按钮
* @param visible
* @param refName 设定的ref名称
* @param index 保证操作是当前的下拉框
* @param addname 底部按钮名称, 可不用
*/
visibleChange(visible, refName, index) {
let _this = this;
let realRefName = refName + index;
//console.log(realRefName);
// debugger
if(visible) {
// 动态绑定 ref的值的时候，下面的dom需要 加一个 [0],非常重要
const speNameDom = _this.$refs[realRefName][0];
let popper = speNameDom.$refs.popper;
if( popper.$el ) {
popper = popper.$el;
}
if(!Array.from(popper.children).some(v => v.className === 'el-template-menu__list')) {
const el = document.createElement('ul');
el.className = 'el-template-menu__list';
el.style = 'border-top\:1px solid rgb(219 225 241)\; padding\:0\;margin\:0\; color\:rgb(64 158 255)\;font-size\: 14px';
el.innerHTML = '<li class="el-cascader-node text-center" style="height:40px;line-height: 40px">'
+ '<span class="el-cascader-node__label"><i class="el-icon-plus"></i>添加规格名称</span>'
+ '</li>';
popper.appendChild(el)
el.onclick = () => {
// 底部按钮的点击事件
_this.addSpeName(index);
//
if(speNameDom.toggleDropDownVisible) {
speNameDom.toggleDropDownVisible(false);
} else {
speNameDom.visible = false;
}
}
}
}
},
/* 增加 规格名称 */
addSpeName(index) {
//console.log(index);
},
//
change(index) {
console.log(127,index);
//this.speData[index]
},
/**
* 删除 规格参数
*
* */
deleteSpeParam() {
console.log("点击啦");
}
},
}, // methods end
};
</script>
<style scoped>
.goods-specifications {
padding: 15px 0;
margin-top: 18px;
}
/* 仿 element 的from-item 样式，注意，size为 samll */
.el-form-item-h {
margin: 0 0 20px 0;
padding: 20px 0 0;
background: #F7F8FA;
border: 1px solid #E5E5E5;
border-radius: 2px;
}
.el-form-item-h__label {
width: 150px;
text-align: right;
vertical-align: middle;
float: left;
font-size:14px;
color: #606266;
line-height: 32px;
padding: 0 12px 0 0;
box-sizing: border-box;
}
.el-form-item-h__label:before {
content: '*';
color: #ff4949;
margin-right: 4px;
}
.el-form-item-h__content {
margin-left: 150px;
position: relative;
font-size: 14px;
}
.spe-params-con {
margin: 20px 0;
}
/* 商品规格 - 规格名称 - 参数input */
.spe-params-input-item {
width: 150px;
margin: 0 10px 20px 0;
}
.el-icon-delete-h:hover {
font-size: 14px;
color: #ff4949;
cursor: pointer;
}
</style>
src/views/system/goods/add/index.vue
浏览文件 @ 36397264
......@@ -38,19 +38,19 @@
<GoodsSpecifications :specificationsdata="specificationsdata"/>
</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>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论