Skip to content

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

添加商品-售后及服务；优化

上级 60cd4eb7
隐藏空白字符变更
内嵌 并排
正在显示 包含 204 行增加 和 30 行删除
src/views/system/goods/add/components/goodsaftersale.vue 0 → 100644
浏览文件 @ 500574a8
<template>
<div class="goods-after-sale">
<el-form ref="goodsAfterSaleForm" :model="goodsAfterSaleForm" :rules="goodsAfterSaleRules" label-width="150px" size="small">
<el-form-item label="服务标签：" prop="fwbq">
<el-checkbox-group v-model="goodsAfterSaleForm.fwbq">
<el-checkbox v-for="item in tagOptions" :label="item.id" true-label :key="item.id">{{item.tag}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="邮费模板：" prop="freightId">
<el-select v-model="goodsAfterSaleForm.freightId" placeholder="请选择邮费模板" style="width:400px;">
<el-option v-for="item in freightOptions" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发货时效：" prop="Delayompensate">
<el-select v-model="goodsAfterSaleForm.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="goodsAfterSaleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
<el-option label="7天" :value="7"></el-option>
<el-option label="15天" :value="15"></el-option>
<el-option label="30天" :value="30"></el-option>
</el-select>
</el-form-item>
<!-- <div style="width: 100%;height: 1000px;">我很高</div>-->
</el-form>
</div>
</template>
<script>
import { GetFreight } from '@/api/module/goods'
export default {
name: "goodsaftersale",
props: {
goodsaftersale: {
type: Object,
required: true
}
},
data() {
let checkFwbq = (rule, value, callback) => {
if (this.goodsAfterSaleForm.fwbq.length === 0) {
callback(new Error("请选择服务类型"));
} else {
callback();
}
};
return {
goodsAfterSaleForm: {
fwbq: [],
freightId: 310,
Delayompensate: 24,
aftersaleTime: 7
},
goodsAfterSaleRules: {
fwbq: [{required: true, validator: checkFwbq}],
freightId: [{required: true, message: '请选择邮费模板', trigger: 'change'}],
Delayompensate: [{required: true, message: '请选择发货时效', trigger: 'change'}],
aftersaleTime: [{required: true, message: '请选择售后时长', trigger: 'change'}]
},
tagOptions: [
{id: 2, tag: "假一赔十"},
{id: 4, tag: "不可退还"},
{id: 5, tag: "厂家直供"}
],
freightOptions: []
} // return end
},
mounted() {
this.getFreightData();
},
methods: {
// 运费模板
getFreightData() {
GetFreight().then(res => {
if(res.data) {
this.freightOptions = res.data
}else {
this.freightOptions = ''
}
});
},
// 商品信息 子组件 form表单校验, 在父组件中被调用
validateGoodsAfterSaleForm () {
let flag = null
this.$refs['goodsAfterSaleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
},
} // methods end
}
</script>
<style lang="scss" type="text/stylus" scoped>
.goods-after-sale {
padding: 15px 0px;
margin-top: 18px;
}
</style>
src/views/system/goods/add/components/goodsinfomation.vue
浏览文件 @ 500574a8
......@@ -112,8 +112,8 @@
},
data() {
let categoryIdCheck = (rule, value, callback) => {
if (this.goodsInfoForm.categoryId == 0 || !this.goodsInfoForm.categoryId) {
callback(new Error("请选择商品分类"));
if (this.goodsImgFileList.length < 1) {
callback(new Error("请上传商品图片"));
} else {
callback();
}
......@@ -142,7 +142,7 @@
producingArea:[{required: true, message: '请选择商品产地', trigger: 'change'}],
fhd: [{required: true, message: '请选择商品发货地', trigger: 'change'}],
goodsBrand: [{required: true, message: '请选择商品品牌', trigger: 'change'}],
sptp: [{required: true, message: '请选择商品分类', validator: categoryIdCheck}]
sptp: [{required: true, message: '请上传商品图片', validator: categoryIdCheck}]
},
goodsImgFileList: [], // 商品图片地址 集合list
goodsImgVisible: false, // 图片能否预览
......@@ -304,7 +304,7 @@
this.goodsImgFileList.push(urlObj);
this.$message({type:'success',message:'图片上传成功'});
// 只清除一次，不浪费哦
if(this.goodsImgFileList.length < 1) {
if(this.goodsImgFileList.length === 1) {
this.$refs.goodsInfoForm.clearValidate('sptp');
}
}
......@@ -312,7 +312,7 @@
});
},
// 商品信息 子组件 form表单校验, 在父组件中被调用
validateGoodsInfForm () {
validateGoodsInfoForm () {
let flag = null
this.$refs['goodsInfoForm'].validate(valid => {
if (valid) {
......
src/views/system/goods/add/index.vue
浏览文件 @ 500574a8
......@@ -36,21 +36,32 @@
<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>
<Goodsaftersale ref="goodsaftersale" :goodsaftersale="goodsaftersale" />
<div class="submit-type-con">
<el-radio-group v-model="submitType" size="small">
<el-radio :label="1" border>放入仓库</el-radio>
<el-radio :label="2" border>立即上架</el-radio>
</el-radio-group>
</div>
</div>
</div>
</div>
<div class="submit-cont">
<el-button type="primary" style="padding: 10px 30px;" @click="save">提 交</el-button>
......@@ -63,7 +74,8 @@
<script>
import { getAreaList } from '@/api/module/retreat/address';
import Goodsinfomation from './components/goodsinfomation'
let TIMER = null;
import Goodsaftersale from './components/goodsaftersale'
// let TIMER = null;
export default {
data() {
return {
......@@ -93,12 +105,22 @@
goodsinfodata: {
categoryList: [],
categoryStr: ''
}
}
},
/* 售后及服务 */
goodsaftersale: {
},
submitType: 1,
TIMER: null,
} // return end
},
components: {
Goodsinfomation,
Goodsaftersale
},
created() {
},
......@@ -187,27 +209,48 @@
this.isShowGoodsDetails = true;
},
//
// getGoodsAfterSaleData(data) {
// console.log("售后子组件给的：",data);
// },
//
save() {
let isGoodInfMsg = this.$refs['goodsInfo'].validateGoodsInfForm();
// 此处变量 有顺序 校验时，电梯至某处
// 商品信息 是否填写完整
let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm();
// 售后服务 是否填写完整
let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm();
//console.log(212,this.$refs.goodsaftersale.goodsAfterSaleForm) // 主动获取子组件数据
//console.log(2222,isGoodsAfterSaleMsg,isGoodsInfoMsg);
if(!isGoodsInfoMsg) {
this.$message({type:'error',message:'商品信息未填写完整'});
this.setFloorNavMountClick(0);
return
}
if(!isGoodsAfterSaleMsg) {
this.$message({type:'error',message:'售后及服务未填写完整'});
this.setFloorNavMountClick(4);
return
}
},
/* 添加商品详细 */
/* 设置楼层导航事件驱动方法* @params Number index 楼层下标 */
setFloorNavMountClick(index) {
let _this = this
this.isFIActive = index;
_this.isFIActive = index;
//debugger
clearInterval(_this.TIMER)
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: 45,
times: 18,
FLOOR_OFFSETTOP: floor_offsetTop
}
floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop,
window_scrollTop = _this.$refs.scrollview.scrollTop,
timer = { step: 45, times: 20, FLOOR_OFFSETTOP: floor_offsetTop };
console.log(3333,floor_item[0].offsetTop,floor_item[1].offsetTop,floor_item[2].offsetTop,floor_item[3].offsetTop,floor_item[4].offsetTop,document.body.scrollTop,document.documentElement.scrollTop);
//debugger
if (window_scrollTop > floor_offsetTop) {
_this.setFloorScrollArrowUp(timer)
} else if (window_scrollTop == floor_offsetTop) {
} else if (window_scrollTop === floor_offsetTop) {
return false
} else {
_this.setFloorScrollArrowDown(timer)
......@@ -217,28 +260,41 @@
setFloorScrollArrowUp(timer) {
//debugger
let _this = this
clearInterval(TIMER)
TIMER = setInterval(() => {
const window_scrollTop = this.$refs.scrollview.scrollTop
clearInterval(_this.TIMER)
_this.TIMER = setInterval(() => {
const window_scrollTop = _this.$refs.scrollview.scrollTop
if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(TIMER)
_this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(_this.TIMER)
} else {
this.$refs.scrollview.scrollTop = window_scrollTop - timer.step
_this.$refs.scrollview.scrollTop = window_scrollTop - timer.step
}
}, timer.times)
},
/* 设置楼层向下滚动@params Object timer 定时器配置 */
setFloorScrollArrowDown(timer) {
let floor_item = document.getElementsByClassName('floor-cont');
let fuck = 0;
let _this = this
clearInterval(TIMER)
TIMER = setInterval(() => {
const window_scrollTop = this.$refs.scrollview.scrollTop
clearInterval(_this.TIMER)
fuck = timer.FLOOR_OFFSETTOP
/**/
// if(_this.isFIActive === 4) {
// console.log(280,_this.$refs.scrollview.scrollTop);
// timer.FLOOR_OFFSETTOP = timer.FLOOR_OFFSETTOP - 333;
// }
console.log(999,floor_item[0].offsetHeight); //offsetHeight
/**/
_this.TIMER = setInterval(() => {
const window_scrollTop = _this.$refs.scrollview.scrollTop
if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(TIMER)
_this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(_this.TIMER)
} else {
this.$refs.scrollview.scrollTop = window_scrollTop + timer.step
_this.$refs.scrollview.scrollTop = window_scrollTop + timer.step
}
}, timer.times)
},
......@@ -366,6 +422,10 @@
min-height: 300px;
color: #333;
}
.submit-type-con {
width: 236px;
margin: 0 auto 20px;
}
.submit-cont {
width: calc(100% + 40px);
padding: 12px 0 8px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论