250 lines
12 KiB
PHP
250 lines
12 KiB
PHP
@extends('layouts.base')
|
||
@section('title', '基本设置')
|
||
@section('content')
|
||
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
|
||
<link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
|
||
<style>
|
||
.shortInput{
|
||
width: 500px!important;
|
||
}
|
||
.quarter-block{
|
||
border: 1px solid #DCDFE6;
|
||
margin-top: 20px;
|
||
padding: 0 15px;
|
||
}
|
||
.quarter-block .tips{
|
||
font-size: 12px;
|
||
color: #737373;
|
||
line-height: 20px;
|
||
width: 100%;
|
||
}
|
||
.quarter-block .title{
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
padding-left: 10px;
|
||
position: relative;
|
||
}
|
||
.quarter-block .title:after{
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 11px;
|
||
width: 4px;
|
||
height: 18px;
|
||
background: #29ba9c;
|
||
}
|
||
.quarter-block .isRepurchase{
|
||
margin-top: 15px;
|
||
margin-right: 50px;
|
||
}
|
||
.quarter-block .monthInput{
|
||
min-width: 350px;
|
||
width: calc((100% - 30px) / 4);
|
||
margin-bottom: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
.quarter-block .monthInput:nth-child(4n){
|
||
margin-right: 0!important;
|
||
}
|
||
.quarter-block .monthInput .prepend-month{
|
||
font-weight: bold;
|
||
}
|
||
.quarter-block .monty-list{
|
||
margin-top: 15px;
|
||
}
|
||
|
||
|
||
</style>
|
||
<div class="all">
|
||
<div id="app">
|
||
<el-form :model="set" label-width="15%">
|
||
<div class="vue-head">
|
||
<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-item label="是否开启消费返利" prop="is_switch">
|
||
<div style="line-height:40px">
|
||
<el-radio v-model.number="set.is_switch" :label="0">不开启</el-radio>
|
||
<el-radio v-model.number="set.is_switch" :label="1">开启</el-radio>
|
||
</div>
|
||
</el-form-item>
|
||
<template v-if="set.is_switch == 1">
|
||
<el-form-item label="我的收入海报">
|
||
<el-select v-model="set.poster_id">
|
||
<el-option v-for="(poster,poster_index) in poster_list" :key="poster_index" :label="poster.title" :value="poster.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="复购限制时间">
|
||
<el-input v-model.number="set.repurchase_day" min="0" type="number" class="shortInput">
|
||
<template slot="prepend">需要在复购返利结算后</template>
|
||
<template slot="append">天内复购</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="返利季度">
|
||
<el-input placeholder="请输入返利总季度" v-model.number="set.total_quarter" min="0" type="number" class="shortInput">
|
||
<template slot="prepend">总共返利</template>
|
||
<template slot="append">个季度</template>
|
||
</el-input>
|
||
{{-- 循环每个季度 --}}
|
||
<div v-for="(quarter,index) in set.quarter_list" :key="index" class="quarter-block">
|
||
<div class="title">第 [[ index ]] 季度</div>
|
||
<el-input v-model.number="quarter.total_month" min="0" type="number" class="shortInput">
|
||
<template slot="prepend">本季度总</template>
|
||
<template slot="append">个月</template>
|
||
</el-input>
|
||
<div class="tips">本季度总的月数，必须大于等于1</div>
|
||
<div class="isRepurchase">
|
||
是否需要复购：
|
||
<el-radio-group v-model.number="quarter.is_repurchase">
|
||
<el-radio :label="0">不需要</el-radio>
|
||
<el-radio :label="1">需要</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<template v-if="quarter.is_repurchase == 1">
|
||
<el-input v-model.number="quarter.repurchase_money" type="number" class="shortInput">
|
||
<template slot="prepend">复购需要支付</template>
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</template>
|
||
<div class="tips">不需要复购：在下一个季度开始返利时可以直接领取；需要复购：在本季度最后一笔返利领取后指定时间内需要重新购买指定产品，否则后续不在返利，后续未领取返利全部失效！</div>
|
||
<div class="monty-list" v-if="Object.values(quarter.month_list).length > 0">
|
||
<el-input
|
||
v-for="(month,monthIndex) in quarter.month_list"
|
||
:value="month"
|
||
:key="monthIndex"
|
||
placeholder="返利金额"
|
||
type="number"
|
||
step="0.01"
|
||
class="monthInput"
|
||
v-model="quarter.month_list[monthIndex]"
|
||
>
|
||
<template slot="prepend">第 <span class="prepend-month">[[ monthIndex ]]</span> 个月返利</template>
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</template>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" @click="onSubmit">保存</el-button>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var app = new Vue({
|
||
el:"#app",
|
||
delimiters: ['[[', ']]'],
|
||
name: 'test',
|
||
data() {
|
||
return{
|
||
poster_list: JSON.parse('{!! json_encode($poster_list) !!}') || {},
|
||
// 设置信息
|
||
set:{
|
||
is_switch: Number("{{ $set['is_switch'] ?? 0 }}"),
|
||
repurchase_day: Number("{{ $set['repurchase_day'] ?? 0 }}"),
|
||
poster_id: Number("{{ $set['poster_id'] ?? '' }}"),
|
||
total_quarter: "{{ $set['total_quarter'] ?? '' }}",
|
||
quarter_list: JSON.parse('{!! json_encode($set['quarter_list']) !!}') || {},
|
||
},
|
||
}
|
||
},
|
||
computed:{
|
||
countTotalMonth(){
|
||
let set = Object.assign({}, this.set);
|
||
let quarterList = Object.assign({}, set.quarter_list);
|
||
|
||
return Object.values(quarterList).reduce((sum, item) => sum + item.total_month, 0);
|
||
}
|
||
},
|
||
watch:{
|
||
// 总季度信息变更
|
||
'set.total_quarter':{
|
||
handler(val, olVal) {
|
||
let value = Number(val) >= 0 ? Number(val) : 0;
|
||
let newQuarterList = {};
|
||
if(Number(value) > 0){
|
||
let quarterList = Object.assign({}, this.set.quarter_list);
|
||
for(value;value > 0;value--){
|
||
let currentQuarter = quarterList[value] || {};
|
||
if(Object.values(currentQuarter).length <= 0){
|
||
// 当前季度信息不存在
|
||
newQuarterList[value] = {
|
||
total_month: 0,// 本季度总多少月
|
||
is_repurchase: 0,// 是否需要复购
|
||
repurchase_money: 0,// 复购支付金额
|
||
month_list: {},// 每月返利金额
|
||
};
|
||
}else{
|
||
// 当前季度信息存在
|
||
newQuarterList[value] = currentQuarter;
|
||
}
|
||
}
|
||
}
|
||
|
||
this.$set(this.set, 'quarter_list', newQuarterList)
|
||
this.$forceUpdate();
|
||
},
|
||
deep:true
|
||
},
|
||
// 月度信息变更
|
||
countTotalMonth:{
|
||
handler(val, olVal) {
|
||
if(Number(val) !== Number(olVal)){
|
||
let set = Object.assign({}, this.set);
|
||
let quarterList = Object.assign({}, set.quarter_list);
|
||
// 循环处理每个季度
|
||
for(const index in quarterList){
|
||
let currentMonthInfo = quarterList[index] || {};
|
||
let totalMonth = Number(currentMonthInfo.total_month) || 0;
|
||
let monthList = currentMonthInfo.month_list || {};
|
||
let newMonthList = {};
|
||
if(totalMonth > 0){
|
||
for(totalMonth;totalMonth > 0;totalMonth--){
|
||
let currentMonth = monthList[totalMonth] || '';
|
||
newMonthList[totalMonth] = currentMonth || '';
|
||
}
|
||
}
|
||
|
||
quarterList[index].month_list = newMonthList;
|
||
}
|
||
|
||
this.$set(this.set, 'quarter_list', quarterList)
|
||
this.$forceUpdate();
|
||
}
|
||
},
|
||
deep:true
|
||
},
|
||
},
|
||
created() {},
|
||
mounted() {},
|
||
methods: {
|
||
// 提交
|
||
onSubmit() {
|
||
let _this = this;
|
||
_this.$http.post('{!! yzWebFullUrl('plugin.rebate.admin.index.set') !!}', {
|
||
rebate: _this.set
|
||
}).then(function (response) {
|
||
let res = response.body;
|
||
_this.$message({
|
||
message: res.msg,
|
||
type: res.result == 1 ? 'success' : 'error'
|
||
});
|
||
});
|
||
},
|
||
|
||
|
||
},
|
||
})
|
||
</script>
|
||
@endsection
|
||
|
||
|