Skip to content

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

添加商品03

上级 36397264
隐藏空白字符变更
内嵌 并排
正在显示 包含 430 行增加 和 587 行删除
src/views/system/goods/add/components/goodsimg.vue
浏览文件 @ 1f1201d7
<template> <template>
<div class="app-container" v-loading="loading"> <div class="goods-img" v-loading="loading">
<div style="margin: auto"> <el-form ref="goodsDeForm" :model="goodsDeForm" :rules="goodsDeRules" label-width="150px" size="small">
<p><span class="tipH4">商品主图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片，大小在2M以内，支持png、jpg格式，尺寸要求为正方形。</span> <el-form-item label="商品详情：" prop="spxq">
</p> <span class="tip-span" style="display: block;line-height: 34px;">上传图片详情，用于商品详情页展示，建议尺寸宽度为750px或790px</span>
<el-upload <el-upload
class="uploadData" class="upload-img"
action="#" list-type="picture-card"
list-type="picture-card" action="#"
:file-list="ruleFormdialogImageUrlplus" :limit="10"
:http-request="uploadGoodsMain" :on-exceed="limitImg10"
:limit="1" :http-request="uploadGoodsDetailsImg"
:on-exceed="limitCount1" :on-preview="handlePicPreview"
:before-upload = "beforeUpGoodsMainImg" :on-remove="handleRemove"
:before-remove = "beforeRemoveMainImg" :file-list="goodsDetailsImgFileList"
:on-remove="removeMainImg" ><i class="el-icon-plus" />
:on-preview="handleMainImgPreview" </el-upload>
> <el-dialog :visible.sync="goodsDeImgVisible">
<i class="el-icon-plus"></i> <img width="100%" :src="goodsDeImgUrlDialog" alt="">
</el-upload> </el-dialog>
<el-dialog :visible.sync="dialogVisibleplus"> </el-form-item>
<img width="100%" :src="dialogImageUrlplus" alt=""/> </el-form>
</el-dialog>
</div>
<div>
<p><span class="tipH4">商品轮播图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片，大小在2M以内，支持png、jpg格式，尺寸要求为正方形。</span>
</p>
<el-upload
class="uploadData"
action="#"
list-type="picture-card"
:file-list="ruleFormdialogImageUrl"
:http-request="uploadSectionFile"
:limit="5"
:on-exceed="limitCount5"
:before-upload = "beforeUpCarouselImg"
:before-remove="beforeRemoveCarouselImg"
:on-remove="removeCarouseImg"
:on-preview="handlePictureCardPreview"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt=""/>
</el-dialog>
</div>
<div>
<el-button style="margin: 20px 0;" @click="resetGoodsImgForm">重置</el-button>
</div>
</div> </div>
</template> </template>
...@@ -54,7 +27,7 @@ ...@@ -54,7 +27,7 @@
import {UploadImg} from '@/api/module/goods' import {UploadImg} from '@/api/module/goods'
export default { export default {
name: "goodsimg", name: "Goodsimg",
props: { props: {
imgdata: { imgdata: {
type: Object, type: Object,
...@@ -62,276 +35,85 @@ ...@@ -62,276 +35,85 @@
} }
}, },
data() { data() {
let checkImg = (rule, value, callback) => {
if (this.goodsDetailsImgFileList.length < 1) {
callback(new Error("请上传商品详情的图片"));
} else {
callback();
}
};
return { return {
loading: false, // 全屏加载 loading: false,
picall: { goodsDeForm: {
ruleFormdialogImageUrl: [], spxq: ''
ruleFormdialogImageUrlplus: [], //主图 },
goodsDeRules: {
spxq:[{required: true, message: '请上传商品详情图片', validator: checkImg}]
}, },
ruleFormdialogImageUrl: [], //多图 goodsDeImgVisible: false,
dialogImageUrl: "", goodsDeImgUrlDialog: '',
dialogVisible: false, goodsDetailsImgFileList: [],
ruleFormdialogImageUrlplus: [], //主图
dialogImageUrlplus: "",
dialogVisibleplus: false,
}; };
}, },
components: {}, components: {},
mounted() { mounted() {
}, },
watch: { watch: {},
imgdata(curVal, oldVal) {
console.log(84,curVal);
if (curVal) {
if(curVal.ruleFormdialogImageUrl) {
curVal.ruleFormdialogImageUrl.forEach((itemName, nindex) => {
this.ruleFormdialogImageUrl.push({'url': itemName.thumbnailM})
})
}
if(this.ruleFormdialogImageUrlplus) {
this.ruleFormdialogImageUrlplus.push({'url': curVal.ruleFormdialogImageUrlplus});
}
}
},
picall: {
handler(val, oldVal) {
this.$emit('imgclicks', val)
},
deep: true
},
ruleFormdialogImageUrl: {
handler(val, oldVal) {
this.$set(this.picall, 'ruleFormdialogImageUrl', val)
},
deep: true
},
ruleFormdialogImageUrlplus: {
handler(val, oldVal) {
this.$set(this.picall, 'ruleFormdialogImageUrlplus', val)
},
deep: true
},
},
methods: { methods: {
// 商品主图 数量限制
limitCount1(files,fileList){
this.$message({message: '最多上传1张图片', type: 'warning'});
},
// 商品主图 大小格式样式校验
beforeUpGoodsMainImg(file,fileList){
if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
this.$message({
message: '上传图片格式只支持png/png格式',
type: "warning"
});
return false;
}
let isImgSize = (file.size / 1024 / 1024 ) > 2;
if(isImgSize) {
this.$message({
message: '上传图片大小不能超过2MB',
type: "warning"
});
return false;
}
// 图片宽高尺寸限制
return new Promise(function(resolve, reject){
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function(){
// 图片是否是正方形 宽高比为 1
let valid = img.width / img.height === 1;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(()=>{
return file;
}, ()=>{
this.$message({
message:'商品主图必须为正方形，请重新选择!',
type: 'warning'
});
return Promise.reject();
});
},
// 上传商品主图 // 上传 详情 图片
uploadGoodsMain(param) { uploadGoodsDetailsImg(param) {
this.loading = true; this.getBase64(param.file).then( res => {
this.getBase64(param.file).then((res) => {
let result = res.split(","); let result = res.split(",");
this.Base64img = result[1]; this.Base64img = result[1];
let data = {"image": this.Base64img} let data = {"image":this.Base64img};
UploadImg(data).then(res => { UploadImg(data).then( res=> {
this.loading = false; let urlObj = {'url': ''};
if (res && res.data.code == 1) { if(res.data) {
this.ruleFormdialogImageUrlplus.push({'url': res.data.data.imageUrl}) urlObj.url = res.data.data.imageUrl;
this.$message({ message:'上传成功',type:'success'}); this.goodsDetailsImgFileList.push(urlObj);
}else { this.$message({type:'success',message:'图片上传成功'});
this.ruleFormdialogImageUrlplus = []; // // 只清除一次，不浪费哦
this.$message({ message:'上传失败，请重新上传',type:'error'}); if(this.goodsDetailsImgFileList.length === 1) {
this.$refs.goodsDeForm.clearValidate('spxq');
}
} }
})
});
},
// 商品主图 删除移除前
beforeRemoveMainImg(file,fileList) {
if(file.status === "success") {
return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return res();
}).catch(() => {
this.$message({
type: 'success',
message: '取消删除!'
});
return rej();
});
}); });
}
},
// 主图删除
removeMainImg(file) {
if(file.status === "success") {
for(let i = 0; i < this.ruleFormdialogImageUrlplus.length; i++) {
if(file.uid === this.ruleFormdialogImageUrlplus[i].uid) {
this.ruleFormdialogImageUrlplus.splice(i,1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
}
},
// 商品主图 预览
handleMainImgPreview(file) {
this.dialogImageUrlplus = file.url;
this.dialogVisibleplus = true;
},
// 轮播图 数量限制
limitCount5(files,fileList){
this.$message({message: '最多上传5张图片', type: 'warning'});
},
// 轮播图 大小格式样式校验
beforeUpCarouselImg(file) {
if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
this.$message({
message: '上传图片格式只支持png/png格式',
type: "warning"
});
return false;
}
let isImgSize = (file.size / 1024 / 1024 ) > 2;
if(isImgSize) {
this.$message({
message: '上传图片大小不能超过2MB',
type: "warning"
});
return false;
}
// 图片宽高尺寸限制
return new Promise(function(resolve, reject){
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function(){
// 图片是否是正方形 宽高比为 1
let valid = img.width / img.height === 1;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(()=>{
return file;
}, ()=>{
this.$message({
message:'轮播图图必须为正方形，请重新选择!',
type: 'warning'
});
return Promise.reject();
}); });
}, },
// 详情图片，限制 20 张
// 轮播图上传 limitImg10() {
uploadSectionFile(param) { this.$message({ message: '最多上传10张图片', type: 'warning' })
this.loading = true;
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
this.loading = false;
})
});
}, },
// 详情图片 预览
// 轮播图 删除前 handlePicPreview(file) {
beforeRemoveCarouselImg(file,fileList) { this.goodsDeImgUrlDialog = file.url;
if(file.status === "success") { this.goodsDeImgVisible = true;
return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return res();
}).catch(() => {
this.$message({
type: 'success',
message: '取消删除!'
});
return rej();
});
});
}
}, },
// 商品轮播图删除 // 删除 详情图片
removeCarouseImg(file){ handleRemove(file) {
if(file.status === "success") { for (let i = 0; i < this.goodsDetailsImgFileList.length; i++) {
for(let i = 0; i < this.ruleFormdialogImageUrl.length; i++) { if (file.uid === this.goodsDetailsImgFileList[i].uid) {
if(file.uid === this.ruleFormdialogImageUrl[i].uid) { this.goodsDetailsImgFileList.splice(i, 1)
this.ruleFormdialogImageUrl.splice(i,1);
}
} }
this.$message({
type: 'success',
message: '删除成功!'
});
} }
}, if(this.goodsDetailsImgFileList.length === 0) {
// 轮播图预览 this.$refs.goodsDeForm.validateField('spxq')
handlePictureCardPreview(file) { }else {
this.dialogImageUrl = file.url; this.$refs.goodsDeForm.clearValidate('spxq');
this.dialogVisible = true;
},
handleinfomationclick() {
let pic = {
ruleFormdialogImageUrlplus: this.ruleFormdialogImageUrlplus,
ruleFormdialogImageUrl: this.ruleFormdialogImageUrl
} }
this.$emit('imgclicks', pic)
}, },
// 重置 // 商品详情 子组件 form表单校验, 在父组件中被调用
resetGoodsImgForm() { validateGoodsDeImgForm() {
this.ruleFormdialogImageUrl = []; let flag = null
this.ruleFormdialogImageUrlplus = []; this.$refs['goodsDeForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
}, },
// -------------------------通用 // -------------------------通用
// 图片转换为 base64 // 图片转换为 base64
...@@ -355,70 +137,14 @@ ...@@ -355,70 +137,14 @@
}; };
</script> </script>
<style lang="scss" type="text/stylus" scoped> <style lang="scss" type="text/stylus" scoped>
ul, .goods-img {
li { padding: 15px 0px;
list-style: none; margin-top: 18px;
margin: 0; }
padding: 0;
} /* 一般提示性文字 */
.tip-span {
.tipH4{ color: #909399;
font-size: 18px; font-size: 12px;
font-weight : 600; }
}
.tipText {
font-size : 14px;
color: #c9c9c9;
}
.tipIcon {
color: #e3c300;
font-size:16px;
padding: 0 8px;
}
.ullist {
border: 1px solid #e7eaec;
padding: 10px;
margin-bottom: 10px;
}
.el-input-group {
width: calc(100% - 60px);
}
// 上传图片样式重置 start
.uploadData {
display: inline-block;
/deep/ .el-upload--picture-card {
width: 100px;
height: 100px;
}
/deep/ .el-upload {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .avatar {
width: 100px;
height: 100px;
}
}
// 上传图片样式 重置 end
/deep/.el-upload-list__item .el-icon-close-tip {
display :none!important;
}
</style> </style>
src/views/system/goods/add/components/goodsparameter.vue
浏览文件 @ 1f1201d7
<template> <template>
<div class="app-container"> <div class="goods-parameter">
<el-row :gutter="20"> <p class="tip-p">
<el-col :span="4" > <el-link class="edit-type-span el-icon-search" type="primary" :underline="false">查看各类价格说明</el-link>
<div class="grid-content bg-purple"> <span class="tip-span">所有商品价格均为含税价，必须开具发票</span>
<p>参数</p> </p>
<p style="font-size:12px;">根据商品特性设置相符的商品参数</p> <div v-for="(item,index) in goodsPamPreList" :key="index" class="single-spe-con">
</div> <p style="margin: 10px 0;color: #333;font-size: 14px;font-weight: 400;">
</el-col> <span style="font-size: 12px;color: #909399;margin: 0 8px 0 0">第{{ index + 1 }}个规格</span>
<el-col :span="20" style="border-left:2px solid #fff;"> <span style="margin-right: 20px;" v-for="(itemGS,indexGS) in item" :key="itemGS">
<div class='tablessst'> <span>{{ goodsSpecNameList[indexGS] }}：</span>
<p class="col_p">参数名称</p> <span>{{ itemGS }}</span>
<p class='col_pr'>参数值 拖动行可进行排序</p> </span>
</div> </p>
<div v-for="(item,index) in goodsPram" :key="index" v-dragging="{ list: goodsPram, item: item, group: 'knowTab' }" class='tablesss'>
<p class="col_p"><el-input v-model="item.title" placeholder="如尺码,颜色等" style="width:calc(100% - 20px)"></el-input></p>
<p class='col_pr'>
<el-input v-model="item.value" placeholder="根据参数进行设置, 如 S/M/L/XL/XXl, 或红/黄/蓝" style="width:calc(100% - 200px)"></el-input>
<el-button icon="el-icon-close" style="margin-left:10px;" @click="deletearrinput(index)"></el-button>
<el-button style="margin-left:10px;">拖动排序</el-button>
</p>
</div>
<el-button @click="addguild()" icon="el-icon-plus" style="margin-top:20px;"> 添加参数</el-button> <el-table
</el-col> border
</el-row> size="small"
:data="goodsPamPreTable"
<!-- <el-button type="primary" @click="handleinfomationclick('ruleForm')">下一步</el-button>--> style="width: 80%"
<el-button >重置</el-button> >
<el-table-column align="center" prop="hh1" label="协议价">
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.agreementPrice/100 }}</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hh2" label="结算价">
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.guidePrice/100 }}</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hh3" label="指导价">
<!-- <template slot-scope="scope">-->
<!-- <el-input v-model="scope.row.salePrice" size="mini"/>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hh7" label="市场价">
<!-- <template slot-scope="scope">-->
<!-- <el-input v-model="scope.row.salePrice" size="mini"/>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hh4" label="库存量">
<!-- <template slot-scope="scope">-->
<!-- <span>{{ (scope.row.salePrice*100 + scope.row.freight - scope.row.agreementPrice)/100 }}</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hhh5" label="库存预警"></el-table-column>
<el-table-column align="center" prop="hh6" label="图片"></el-table-column>
</el-table>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'goodsmeter', name: 'goodsparameter',
props: { props: {
parameterdata: { parameterdata: {
type: Object, type: Object,
...@@ -41,102 +62,82 @@ export default { ...@@ -41,102 +62,82 @@ export default {
}, },
data() { data() {
return { return {
goodsPram:[{ goodsPam: [],
id:0, // 规格名称数组
title:'', goodsSpecNameList: [],
value:'' // 每一个规格，都是一张表格
}] goodsPamPreList:[],
goodsPamPreTable: [
{
} hh1: '',
hh2: '',
hh3: '',
hh4: '',
hh5: '',
hh6: '',
}
],
// goodsPamPreObj:
} // return end
}, },
components:{ watch:{
'hello':{ 'parameterdata.hu1': function(val) {
render:function(createElement){ this.goodsSpecNameList = val;
},
return createElement( 'parameterdata.hu2':function(val) {
'h'+this.level, console.log(100000,val)
this.$se this.goodsPamPreList = [];
) this.goodsPamPreList = val;
}
} }
}, },
mounted() { created() {
// this.driver = new Driver() //this.goodsSpecNameList = this.parameterdata
this.$dragging.$on('dragged', (value) => { // _this.$Bus.$on("calcSpeTable",function(val) {
//因为我这在排序的时候不需要做处理，所以空着就行 // console.log(37,val);
// debugger // _this.goodsSpecNameList = val.hu1;
}) // _this.goodsPamPreList = val.hu2;
// this.$forceUpdate()
// });
}, },
watch:{ mounted() {
goodsPram:{ console.log("9999",this.goodsPamPreList);
handler(val, oldVal){
this.$emit('parameterclicks',val)
},
deep:true
},
parameterdata(curVal,oldVal){
if(curVal){
this.goodsPram= curVal
}
}
}, },
methods: { methods: {
handleinfomationclick(formName) {
this.$emit('parameterclicks',this.goodsPram)
},
addguild(){
let arrchild={
id:0,
title:'',
value:''
}
this.$set(this.goodsPram, this.goodsPram.length,arrchild)
},
deletearrinput(index){
this.goodsPram.splice(index,1)
},
} } // methods end
} }
</script> </script>
<style scoped> <style scoped>
.app-container{ p {
width:100%;
height:100%;
background: #f8f8f8;
}
ul,li{
list-style: none;
margin: 0; margin: 0;
padding:0; padding: 0;
} }
.ullist{
border: 1px solid #e7eaec; .tip-p {
padding: 10px; margin: 0 0 20px 0;
margin-bottom: 10px;
}
.el-input-group{
width:calc(100% - 60px);
} }
.col_p{ .goods-parameter {
width:30%; padding: 15px 0;
float:left; margin-top: 18px;
} }
.col_pr{
width:70%; .edit-type-span {
float:left; display: inline-block;
cursor: pointer;
margin: 0 20px;
} }
.tablesss{
height:70px; .single-spe-con {
border-bottom: 1px solid #e6ebf5; margin: 25px 0;
} }
.tablessst{
height:50px; /* 一般提示性文字 */
border-bottom: 1px solid #e6ebf5; .tip-span {
color: #909399;
font-size: 12px;
} }
</style> </style>
src/views/system/goods/add/components/goodsspecifications.vue
浏览文件 @ 1f1201d7
<template> <template>
<div class="goods-specifications"> <div class="goods-specifications">
<div class="el-form-item-h" v-for="(speItem,index) in speData" :key="index"> <div class="spe-con" v-for="(speItem,index) in speData" :key="index">
<label class="el-form-item-h__label">规格名称：</label> <div class="el-form-item-h" >
<div class="el-form-item-h__content"> <label class="el-form-item-h__label">规格名称：</label>
<el-select <div class="el-form-item-h__content">
:ref="'speNameDom' + index " <div>
v-model="speItem.speName" <el-select
size="small" :ref="'speNameDom' + index "
style="width: 300px" v-model="speItem.specName"
filterable size="small"
allow-create style="width: 300px"
default-first-option filterable
:clearable="true" allow-create
@visible-change='bv=> visibleChange(bv,"speNameDom",index)' default-first-option
> :clearable="true"
<el-option @change="speNameChange"
v-for="(itemSN,indexSN) in speOptions" @visible-change='bv=> visibleChange(bv,"speNameDom",index)'
:key="itemSN.id" >
:label="itemSN.title" <el-option
:value="itemSN.id" v-for="(itemSN,indexSN) in speOptions"
> :key="itemSN.id"
<span style="float: left" class="span-style">{{ itemSN.title }}</span> :label="itemSN.title"
<div class="flag"> :value="itemSN.title"
<svg-icon icon="edit" iconClass="template_edit_style" @click="addSpeName(index)"/> >
<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>
<!--<span>数据填写不完整</span>-->
</div>
<div class="spe-params-con">
<div style="display: inline-block" v-for="(itemSV,indexSV) in speItem.specValue" :key="indexSV">
<el-input v-model="itemSV.value" size="small" placeholder="请输入规格参数" class="spe-params-input-item" @blur="paramNameInputBlur()">
<i v-if="indexSV !== 0" slot="suffix" class="el-input__icon el-icon-delete el-icon-delete-h" @click="deleteSpeParam(index,indexSV)"></i>
</el-input>
</div> </div>
</el-option>
</el-select> <el-button type="primary" plain class="el-icon-plus" size="mini" @click="addSpeParam(index)">添加规格参数</el-button>
<div class="spe-params-con"> </div>
<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> </div>
<div style="margin-right:auto;" v-if="(speData.length > 1) && speData.length !== 1">
<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="deleteSpe(index)">删除该规格</el-button>
</div>
</div> </div>
<el-button @click="fuc">增 加</el-button> <el-button @click="addSpe" class="el-icon-plus" size="mini">添加规格</el-button>
<!-- <el-button type="primary" plain class="el-icon-plus" size="mini" @click="hhxx()">生成数据</el-button>-->
</div> </div>
</template> </template>
...@@ -46,46 +59,85 @@ export default { ...@@ -46,46 +59,85 @@ export default {
name: "GoodsSpecifications", name: "GoodsSpecifications",
props: { props: {
specificationsdata: { specificationsdata: {
type: Object, type: Array,
required: true required: true
} }
}, },
data() { data() {
return { return {
speData: [], // 商品规格总数据 speData: [], // 商品规格总数据
singleSpeData: { specsGroup: {
speName: '', // 规格名称 specName: '', // 规格名称
score: '',
specValue: []
}, },
fuck:'', speParamName:{
value: ''
},
speOptions: [{ speOptions: [{
id: '1', id: '1',
title: '北京' title: '颜色'
}, { }, {
id: '2', id: '2',
title: '上海' title: '尺码'
}], }],
// 规格名称，value组成的数组
speNameList: []
}; };
}, },
created() { created() {
this.$set(this.specsGroup.specValue,this.specsGroup.specValue.length,this.speParamName);
this.speData = []; this.speData = [];
this.$set(this.speData,this.speData.length,this.singleSpeData); this.$set(this.speData,this.speData.length,this.specsGroup);
// console.log(71,this.speData); //console.log(71,this.specsGroup.specValue);
// this.$set(this.speData,this.speData.length,this.singleSpeData);
// this.speData.push(this.singleSpeData);
// this.speData.push(this.singleSpeData);
}, },
mounted() {}, mounted() {},
watch:{}, watch:{},
methods: { methods: {
/** 添加规格*/
fuc() { addSpe() {
let singleSpeData = { let specsGroup = {
speName: '', // 规格名称 specName: '', // 规格名称
score: '',
specValue: [{value: ''}]
}; };
//this.$set(this.speData,this.speData.length,singleSpeData); this.$set(this.speData,this.speData.length,specsGroup);
this.speData.push(singleSpeData); this.speNameListChange();
},
/** 删除 规格数据 */
deleteSpe(index) {
this.$confirm('是否删除当前规格的所有数据？', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
this.speData.splice(index,1);
this.speNameListChange();
}).catch(() => {})
},
// 规格名称，下拉选值时触发
speNameChange() {
this.speNameListChange();
},
// 规格名称，有变化时
speNameListChange() {
this.speNameList = [];
this.speData.forEach((item)=> {
if(item.specName) {
this.speNameList.push(item.specName);
}
});
},
// 添加规格参数
addSpeParam(index) {
let valueObj = { value: ''}
this.$set(this.speData[index].specValue,this.speData[index].specValue.length,valueObj);
},
/** 删除 规格参数 */
deleteSpeParam(index,indexSV) {
this.speData[index].specValue.splice(indexSV,1);
//console.log(119,this.speData[index].specValue);
}, },
/** /**
* 规格名称 下拉框 出现/隐藏 触发 * 规格名称 下拉框 出现/隐藏 触发
...@@ -99,7 +151,6 @@ export default { ...@@ -99,7 +151,6 @@ export default {
let _this = this; let _this = this;
let realRefName = refName + index; let realRefName = refName + index;
//console.log(realRefName); //console.log(realRefName);
// debugger
if(visible) { if(visible) {
// 动态绑定 ref的值的时候，下面的dom需要 加一个 [0],非常重要 // 动态绑定 ref的值的时候，下面的dom需要 加一个 [0],非常重要
const speNameDom = _this.$refs[realRefName][0]; const speNameDom = _this.$refs[realRefName][0];
...@@ -134,19 +185,70 @@ export default { ...@@ -134,19 +185,70 @@ export default {
addSpeName(index) { addSpeName(index) {
//console.log(index); //console.log(index);
}, },
//
change(index) { /** 规格参数 失焦时，进行笛卡尔积算法，并渲染 商品售价 */
console.log(127,index); paramNameInputBlur() {
//this.speData[index] // 商品规格原始数据
let orgSpeData = this.deepClone(this.speData);
// 进行数据处理后的数据,
let proSpeData = this.processData(orgSpeData);
// 笛卡尔积 生成所有规格组合数据
let goodsParametersList = this.cartesian(proSpeData);
if(this.speNameList.length > 0 && goodsParametersList.length > 0) {
let hufei = {
hu1: [],
hu2: []
}
hufei.hu1 = this.speNameList;
hufei.hu2 = goodsParametersList;
this.$emit('calcSpeTable',hufei);
// console.log("规格名称：",hufei);
}
}, },
/** /** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */
* 删除 规格参数 processData(list) {
* let result = [];
* */ if(list && list.length > 0) {
deleteSpeParam() { for(let i = 0; i < list.length; i++) {
console.log("点击啦"); let childList = [];
// 规格名称填写，数据才奏效
if(list[i].specName) {
for(let j = 0; j < list[i].specValue.length; j++) {
// 剔除为空的数据
if( list[i].specValue[j].value ) {
childList.push(list[i].specValue[j].value);
}
}
// if(childList.length > 0) {
result.push(childList);
// }
}
}
}
return result;
},
/** 笛卡尔积算法 */
cartesian(arr) {
if(arr.length < 2) {
return arr[0] || [];
}
return [].reduce.call(arr, function(col, set) {
let res = [];
col.forEach( c => {
set.forEach(s => {
let t = [].concat(Array.isArray(c) ? c : [c]);
t.push(s);
res.push(t);
});
});
return res
});
} }
}, // methods end }, // methods end
}; };
</script> </script>
...@@ -155,10 +257,15 @@ export default { ...@@ -155,10 +257,15 @@ export default {
padding: 15px 0; padding: 15px 0;
margin-top: 18px; margin-top: 18px;
} }
.spe-con {
display: flex;
justify-content: flex-start;
}
/* 仿 element 的from-item 样式，注意，size为 samll */ /* 仿 element 的from-item 样式，注意，size为 samll */
.el-form-item-h { .el-form-item-h {
margin: 0 0 20px 0; width:80%;
margin: 0 20px 20px 0;
padding: 20px 0 0; padding: 20px 0 0;
background: #F7F8FA; background: #F7F8FA;
border: 1px solid #E5E5E5; border: 1px solid #E5E5E5;
......
src/views/system/goods/add/index.vue
浏览文件 @ 1f1201d7
...@@ -35,19 +35,21 @@ ...@@ -35,19 +35,21 @@
<div class="floor-item"> <div class="floor-item">
<div class="floor-item-box"> <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> <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品规格</p>
<GoodsSpecifications :specificationsdata="specificationsdata"/> <GoodsSpecifications ref="goodsspecifications" :specificationsdata="specificationsdata" @calcSpeTable="calcSpeTable"/>
</div> </div>
</div> </div>
<!-- 商品售价 --> <!-- 商品售价 -->
<div class="floor-item"> <div class="floor-item">
<div class="floor-item-box"> <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> <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品售价</p>
<GoodsParameter ref="goodsparameter" :parameterdata="parameterdata" />
</div> </div>
</div> </div>
<!-- 商品详情 -->
<div class="floor-item"> <div class="floor-item">
<div class="floor-item-box"> <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> <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品详情</p>
<Goodsimg ref="goodsdetailsimg" :imgdata="imgdata"/>
</div> </div>
</div> </div>
<!-- 售后及服务 --> <!-- 售后及服务 -->
...@@ -77,6 +79,8 @@ ...@@ -77,6 +79,8 @@
import { getAreaList } from '@/api/module/retreat/address'; import { getAreaList } from '@/api/module/retreat/address';
import Goodsinfomation from './components/goodsinfomation'; import Goodsinfomation from './components/goodsinfomation';
import GoodsSpecifications from './components/goodsspecifications'; import GoodsSpecifications from './components/goodsspecifications';
import GoodsParameter from './components/goodsparameter';
import Goodsimg from './components/goodsimg';
import Goodsaftersale from './components/goodsaftersale'; import Goodsaftersale from './components/goodsaftersale';
export default { export default {
...@@ -84,6 +88,8 @@ ...@@ -84,6 +88,8 @@
components: { components: {
Goodsinfomation, Goodsinfomation,
GoodsSpecifications, GoodsSpecifications,
GoodsParameter,
Goodsimg,
Goodsaftersale, Goodsaftersale,
}, },
data() { data() {
...@@ -108,7 +114,7 @@ ...@@ -108,7 +114,7 @@
{ id: 2, name: '商品规格' }, { id: 2, name: '商品规格' },
{ id: 3, name: '商品售价' }, { id: 3, name: '商品售价' },
{ id: 4, name: '商品详情' }, { id: 4, name: '商品详情' },
{ id: 5, name: '售后及服务' }, { id: 5, name: '售后及服务' }
], ],
/* 商品信息 */ /* 商品信息 */
goodsinfodata: { goodsinfodata: {
...@@ -116,9 +122,11 @@ ...@@ -116,9 +122,11 @@
categoryStr: '' categoryStr: ''
}, },
/* 商品规格 */ /* 商品规格 */
specificationsdata: { specificationsdata: [],
/* 商品售价 */
}, parameterdata: {},
/* 商品详情 */
imgdata: {},
/* 售后及服务 */ /* 售后及服务 */
goodsaftersale: { goodsaftersale: {
...@@ -138,6 +146,25 @@ ...@@ -138,6 +146,25 @@
}, },
methods: { methods: {
// 规格子组件，传给父组件的数据
calcSpeTable(data) {
let data1 = data;
this.parameterdata = data1;
console.log(153,this.parameterdata);
this.parameterdata['']
let obj = {
hh1: '',
hh2: '',
hh3: '',
hh4: '',
hh5: '',
hh6: '',
}
// for(let i = 0; i < this.data1.hu2.length; i++) {
// this.data1.hu2[i]['obj'] = obj;
// }
},
// 只有点击完最后一级，才会有值 // 只有点击完最后一级，才会有值
SSQChange() { SSQChange() {
if(this.SSQList && this.SSQList.length > 0) { if(this.SSQList && this.SSQList.length > 0) {
...@@ -225,22 +252,37 @@ ...@@ -225,22 +252,37 @@
// //
save() { save() {
// 此处变量 有顺序 校验时，电梯至某处 // 此处变量 有顺序 校验时，电梯至某处
// 商品信息 是否填写完整
let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm(); // // 商品信息 是否填写完整
// 售后服务 是否填写完整 // let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm();
let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm(); // // 商品详情
//console.log(212,this.$refs.goodsaftersale.goodsAfterSaleForm) // 主动获取子组件数据 // let isGoodsDetailsImgMsg = this.$refs['goodsdetailsimg'].validateGoodsDeImgForm();
//console.log(2222,isGoodsAfterSaleMsg,isGoodsInfoMsg); // // 售后服务 是否填写完整
if(!isGoodsInfoMsg) { // let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm();
this.$message({type:'error',message:'商品信息未填写完整'}); //
this.setFloorNavMountClick(0); // //console.log(212,this.$refs.goodsaftersale.goodsAfterSaleForm) // 主动获取子组件数据
return //
} // if(!isGoodsInfoMsg) {
if(!isGoodsAfterSaleMsg) { // this.$message({type:'error',message:'商品信息未填写完整'});
this.$message({type:'error',message:'售后及服务未填写完整'}); // this.setFloorNavMountClick(0);
this.setFloorNavMountClick(4); // return
return // }
} // if(!isGoodsDetailsImgMsg) {
// this.$message({type:'error',message:'商品详情未填写完整'});
// this.setFloorNavMountClick(3);
// return
// }
// if(!isGoodsAfterSaleMsg) {
// this.$message({type:'error',message:'售后及服务未填写完整'});
// this.setFloorNavMountClick(4);
// return
// }
// 所有校验通过，整理数据
this.specificationsdata = this.$refs.goodsspecifications.speData
console.log("商品规格数据：",this.specificationsdata);
}, },
/*-----------------------*/ /*-----------------------*/
...@@ -255,15 +297,13 @@ ...@@ -255,15 +297,13 @@
// 可以通过 floor-cont的父元素，高度减去上下两个div的高度，来准确计算出来了，需要wtach监听,暂时用初步高来计算，一般问题不大 // 可以通过 floor-cont的父元素，高度减去上下两个div的高度，来准确计算出来了，需要wtach监听,暂时用初步高来计算，一般问题不大
let floor_cont = document.getElementsByClassName('floor-cont')[0]; let floor_cont = document.getElementsByClassName('floor-cont')[0];
let floor_item = document.getElementsByClassName('floor-item'), let floor_item = document.getElementsByClassName('floor-item'),
// 电梯层数，即需要滚动的dom个数
fiLength = floor_item.length,
// 每次点击，对应dom需要滚动的高度 // 每次点击，对应dom需要滚动的高度
floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop, floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop,
window_scrollTop = _this.$refs.scrollview.scrollTop, window_scrollTop = _this.$refs.scrollview.scrollTop,
// 基本滚动动画配置 // 基本滚动动画配置
timer = { step: 45, times: 20, FLOOR_OFFSETTOP: 0 }; timer = { step: 45, times: 20, FLOOR_OFFSETTOP: 0 };
// floor_cont 可是窗口的 高 // floor_cont 可是窗口的 高
let hxz = 0; let hxz = 0;
let resList = []; let resList = [];
let list = []; let list = [];
...@@ -280,7 +320,6 @@ ...@@ -280,7 +320,6 @@
if( hxz > floor_cont.offsetHeight) { if( hxz > floor_cont.offsetHeight) {
timer.FLOOR_OFFSETTOP = floor_offsetTop; timer.FLOOR_OFFSETTOP = floor_offsetTop;
}else { }else {
//let maxScrollTopDom = _this.comMaxScrollTop(0,floor_item,floor_cont.offsetHeight);
timer.FLOOR_OFFSETTOP = floor_cont.scrollHeight - floor_cont.offsetHeight timer.FLOOR_OFFSETTOP = floor_cont.scrollHeight - floor_cont.offsetHeight
} }
...@@ -323,36 +362,7 @@ ...@@ -323,36 +362,7 @@
}, timer.times) }, timer.times)
}, },
/*-----------*/
//
comMaxScrollTop(jsq,listDom,floor_cont) {
let result = {
index: 0,
scrollTop: 0,
};
jsq++
let total = 0;
let orgIndex = 5 - jsq;
let List = [];
for(let i =0; i < listDom.length; i++) {
List.push( Number(listDom[i].offsetHeight) );
}
// 得到，所有dom的盒子高度
let resList = [];
resList = List.slice(orgIndex);
for(let j = 0; j < resList.length; j++) {
total += Number(resList[j])
}
if(total < floor_cont) {
return this.comMaxScrollTop(jsq,listDom,floor_cont);
}else if(total >= floor_cont) {
result.index = jsq;
result.scrollTop = total;
return result ;
}
},
} // methods end } // methods end
} }
...@@ -474,7 +484,6 @@ ...@@ -474,7 +484,6 @@
.floor-item { .floor-item {
padding: 0 20px 0 0; padding: 0 20px 0 0;
margin: 15px auto; margin: 15px auto;
min-height: 300px;
color: #333; color: #333;
} }
.submit-type-con { .submit-type-con {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论