323 lines
15 KiB
PHP
323 lines
15 KiB
PHP
@extends('layouts.base')
|
|
@section('title', '满额优惠设置')
|
|
@section('content')
|
|
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
|
|
|
|
<div class="all">
|
|
<div id="app" v-cloak>
|
|
<div class="vue-nav" style="margin-bottom:15px">
|
|
<el-tabs v-model="active_name" @tab-click="handleClick">
|
|
<el-tab-pane label="满额优惠设置" name="1"></el-tab-pane>
|
|
<el-tab-pane label="包邮分类设置" name="2"></el-tab-pane>
|
|
<el-tab-pane label="满件优惠设置" name="3"></el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
|
|
<div class="vue-main">
|
|
<div class="vue-main-title">
|
|
<div class="vue-main-title-left"></div>
|
|
<div class="vue-main-title-content">满额优惠设置</div>
|
|
</div>
|
|
<div class="vue-main-form">
|
|
<el-form ref="form" :rules="rules" :model="form" label-width="17%">
|
|
<el-form-item label="开启满额优惠">
|
|
<el-radio v-model.bool="form.open" :label=true>开启</el-radio>
|
|
<el-radio v-model.bool="form.open" :label=false>关闭</el-radio>
|
|
</el-form-item>
|
|
<template v-for="(enoughReduce,index) in form.enoughReduce">
|
|
|
|
<el-form-item label="满额减">
|
|
|
|
<el-form-item>
|
|
|
|
<el-row :gutter="3">
|
|
|
|
<el-col :span="6">
|
|
<el-form-item v-bind:prop="'enoughReduce.enough-'+index">
|
|
<el-input placeholder="金额"
|
|
v-model.number="enoughReduce.enough" size="medium">
|
|
<template slot="prepend">满</template>
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-form-item v-bind:prop="'enoughReduce.reduce-'+index">
|
|
<el-input placeholder="金额"
|
|
v-model.number="enoughReduce.reduce" size="medium">
|
|
<template slot="prepend">减</template>
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="3">
|
|
<el-button plain size="mini" @click="remove(index)">x</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item label="">
|
|
<el-row>
|
|
<el-button @click="add">增加满减规则</el-button>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="订单满额包邮">
|
|
|
|
<el-radio v-model.bool="form.freeFreight.open" :label=true>开启</el-radio>
|
|
<el-radio v-model.bool="form.freeFreight.open" :label=false>关闭</el-radio>
|
|
<div>订单总金额超过多少可以包邮,与商品单品满额包邮互不影响</div>
|
|
<el-form-item prop="freeFreight.enough">
|
|
<el-input placeholder="金额"
|
|
v-model.number="form.freeFreight.enough" size="medium"
|
|
style="width: 27%">
|
|
<template slot="prepend">满</template>
|
|
<template slot="append">元包邮</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="订单满额包邮计算金额">
|
|
<el-radio v-model.bool="form.freeFreight.amount_type" :label=0>订单折扣后价格</el-radio>
|
|
<el-radio v-model.bool="form.freeFreight.amount_type" :label=1>订单抵扣后价格</el-radio>
|
|
<p style="color: RGB(169, 169, 169);">折扣后价格(包含商品满减，会员折扣等)；抵扣后价格(积分抵扣，余额抵扣等)。使用订单抵扣后价格, 如果开启积分抵扣运费等抵扣运费方式，满额包邮无效</p>
|
|
</el-form-item>
|
|
<el-form-item label="不参与地区">
|
|
<el-row>
|
|
<el-tag
|
|
v-for="city in form.freeFreight.cities"
|
|
:key="city">
|
|
[[city]]
|
|
</el-tag>
|
|
</el-row>
|
|
|
|
<el-button @click="centerDialogVisible = true">编辑不参加包邮地区</el-button>
|
|
<el-dialog
|
|
title="请选择地区"
|
|
:visible.sync="centerDialogVisible"
|
|
center>
|
|
<el-tree
|
|
v-loading="loading"
|
|
:props="props"
|
|
node-key="id"
|
|
:default-checked-keys="form.freeFreight.city_ids"
|
|
:default-expanded-keys="form.freeFreight.province_ids"
|
|
show-checkbox
|
|
lazy
|
|
accordion
|
|
@check-change="checkAreas"
|
|
ref="addressTree"
|
|
:data="treeData"
|
|
:load="loadNode">
|
|
</el-tree>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="saveAreas">确 定</el-button>
|
|
</span>
|
|
|
|
</el-dialog>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="订单包邮商品推荐">
|
|
<el-radio-group v-model="form.freeFreight.postage_included_category_open" style="padding: 10px;">
|
|
<el-radio :label="1">开启</el-radio>
|
|
<el-radio :label="0">关闭</el-radio>
|
|
</el-radio-group>
|
|
<p style="color: RGB(169, 169, 169);">开启后, 如果未达到包邮条件, 则在预下单页显示满额包邮商品推荐 (开启后需到包邮分类页面进行分类设置)</p>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="vue-page">
|
|
<div class="vue-center">
|
|
<el-button type="primary" @click.native.prevent="onSubmit" v-loading="formLoading">提交</el-button>
|
|
<el-button @click="goBack()">返回</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="test-vue">
|
|
</div>
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
delimiters: ['[[', ']]'],
|
|
data() {
|
|
// 默认数据
|
|
let temp = JSON.parse('{!! $setting !!}');
|
|
if (!temp || temp.length === 0) {
|
|
temp = {
|
|
enoughReduce: [],
|
|
freeFreight: {
|
|
'open': false,
|
|
'amount_type': 0,
|
|
'enough': 0,
|
|
'cities': [],
|
|
'city_ids': [],
|
|
'province_ids': [],
|
|
postage_included_category_open: 0
|
|
},
|
|
}
|
|
}
|
|
//验证规则
|
|
let amountRules = {
|
|
type: 'number',
|
|
min: 0,
|
|
max: 999999999,
|
|
message: '请输入正确金额',
|
|
transform(value) {
|
|
console.log(value);
|
|
return Number(value)
|
|
}
|
|
};
|
|
let rules = {
|
|
'freeFreight.enough': [amountRules],
|
|
};
|
|
// for(enoughReduceIndex in temp.enoughReduce){
|
|
// rules['enoughReduce.reduce-'+enoughReduceIndex] = [amountRules];
|
|
// rules['enoughReduce.enough-'+enoughReduceIndex] = [amountRules];
|
|
// }
|
|
// console.log(rules);
|
|
return {
|
|
form: temp,
|
|
props: {
|
|
label: 'areaname',
|
|
children: 'children',
|
|
isLeaf: 'isLeaf'
|
|
},
|
|
loading: false,
|
|
formLoading: false,
|
|
centerDialogVisible: false,
|
|
treeData: [],
|
|
rules: rules,
|
|
active_name: '1'
|
|
}
|
|
},
|
|
mounted: function () {
|
|
console.log(this.form)
|
|
},
|
|
methods: {
|
|
add() {
|
|
this.form.enoughReduce.push(
|
|
{
|
|
'enough': '',
|
|
'reduce': ''
|
|
}
|
|
)
|
|
},
|
|
remove(itemIndex) {
|
|
// let i = this.form.enoughReduce.indexOf(item)
|
|
// console.log(this.form.enoughReduce,i,item);
|
|
this.form.enoughReduce.splice(itemIndex, 1)
|
|
},
|
|
onSubmit() {
|
|
if (this.formLoading) {
|
|
return;
|
|
}
|
|
this.formLoading = true;
|
|
|
|
this.$refs.form.validate((valid) => {
|
|
console.log(valid)
|
|
});
|
|
this.$http.post("{!! yzWebUrl('enoughReduce.store') !!}", {'setting': this.form}).then(response => {
|
|
//console.log(response.data);
|
|
// return;
|
|
if (response.data.result) {
|
|
this.$message({
|
|
message: response.data.msg,
|
|
type: 'success'
|
|
});
|
|
} else {
|
|
this.$message({
|
|
message: response.data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
|
|
this.formLoading = false;
|
|
}, response => {
|
|
console.log(response);
|
|
});
|
|
},
|
|
handleClose(area) {
|
|
this.form.areas.splice(this.form.areas.indexOf(area), 1);
|
|
},
|
|
loadNode(node, resolve) {
|
|
this.loading = true;
|
|
if (!node.data.id) {
|
|
//省份
|
|
node.data.id = 0;
|
|
this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> 0]) !!}").then(response => {
|
|
response.data.data.forEach(function (province) {
|
|
province.isLeaf = false;
|
|
});
|
|
resolve(response.data.data);
|
|
|
|
this.loading = false;
|
|
}, response => {
|
|
console.log(response);
|
|
});
|
|
} else {
|
|
//城市
|
|
this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + node.data.id).then(response => {
|
|
//城市没有子节点
|
|
response.data.data.forEach(function (city) {
|
|
city.isLeaf = true;
|
|
})
|
|
resolve(response.data.data);
|
|
// 载入数据后,刷新已选中
|
|
this.loading = false;
|
|
}, response => {
|
|
console.log(response);
|
|
});
|
|
}
|
|
},
|
|
checkAreas(node, checked, children) {
|
|
if (node.isLeaf) {
|
|
return;
|
|
}
|
|
if (checked) {
|
|
this.form.freeFreight.province_ids.push(node.id)
|
|
}
|
|
console.log(node, checked, children, this.form, 123);
|
|
},
|
|
saveAreas() {
|
|
let cities = [];
|
|
let city_ids = [];
|
|
let province_ids = [];
|
|
this.$refs.addressTree.getCheckedNodes().forEach(function (node) {
|
|
console.log(node, 'node');
|
|
if (node.level == 1) {
|
|
province_ids.push(node.id);
|
|
} else if (node.level == 2) {
|
|
city_ids.push(node.id);
|
|
cities.push(node.areaname)
|
|
}
|
|
});
|
|
this.form.freeFreight.city_ids = city_ids;
|
|
this.form.freeFreight.cities = cities;
|
|
this.form.freeFreight.province_ids = province_ids;
|
|
this.centerDialogVisible = false
|
|
console.log(this.form, 'this.form');
|
|
},
|
|
handleClick(val) {
|
|
if (val.name == 1) {
|
|
window.location.href = `{!! yzWebFullUrl('enoughReduce.index.index') !!}`;
|
|
} else if (val.name == 2) {
|
|
window.location.href = `{!! yzWebFullUrl('enoughReduce.postage-included-category.index') !!}`;
|
|
} else if (val.name == 3) {
|
|
window.location.href = `{!! yzWebFullUrl('enoughReduce.full-piece.index') !!}`;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|
|
|