qimall/addons/Seed/backend/views/setting/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-store-list',Yii::getAlias('@addons').'/Store/backend/views/compoents/store');
?>
<style>
  .form_box{
	  background:#fff;
	  padding:15px ;
  }
  .flexcenter{
	  display:flex;
	  justify-content: center;
  }
</style>
<div id="app" v-cloak>
  <div>
	<el-row >
		<el-col :span="24">
			<div class="form_box">
				<el-form :model="settingConfig" ref="settingConfig" :rules="rules" label-width="172px" style="position: relative" size="small">
					<div class="title">基础设置</div>
					<el-form-item label="种子金：" >
					    <el-switch :active-value="1" :inactive-value="0" v-model="settingConfig.seed_status">
					    </el-switch>
					</el-form-item>
					<el-form-item label="种子金初始价值:" prop="basic_unit_price" class="coupon-item" >
					    <el-input  onkeyup="value=toNumber(value,2)" :min="0" class="member-money" v-model="settingConfig.basic_unit_price" placeholder="" style="width: 260px;margin-right: 20px;">
					        <template slot="append">元</template>
					    </el-input>
					</el-form-item>
					<el-form-item label="种子金最高增长倍数:" prop="multiple" class="coupon-item" >
					    <el-input class="member-money" v-model.number="settingConfig.multiple" placeholder="" style="width: 260px;margin-right: 20px;">
					    </el-input>
					</el-form-item>
					<el-form-item label="能量池释放周期设置:" prop="release_cycle" class="coupon-item" >
					    <el-input class="member-money" v-model="settingConfig.release_cycle" placeholder="" style="width: 260px;margin-right: 20px;">
					        <template slot="append">小时</template>
					    </el-input>
					</el-form-item>
					<el-form-item label="能量池订单扣除设置:" prop="pool_percent" class="coupon-item" >
					    <el-input onkeyup="value=toNumber(value,2)" :min="0" class="member-money" v-model="settingConfig.pool_percent" placeholder="" style="width: 260px;margin-right: 20px;">
					        <template slot="append">%</template>
					    </el-input>
					</el-form-item>
					<el-form-item label="广告收益扣除设置:" prop="ad_percent" class="coupon-item" >
					    <el-input onkeyup="value=toNumber(value,2)" :min="0" class="member-money" v-model="settingConfig.ad_percent" placeholder="" style="width: 260px;margin-right: 20px;">
					        <template slot="append">%</template>
					    </el-input>
					</el-form-item>
                    <el-form-item label="种子金收取时间:" prop="collect_type" class="coupon-item" >
                        <el-radio-group  v-model="settingConfig.collect_type" size="small">
                            <el-radio :label="1" border>支付完成后</el-radio>
                            <el-radio :label="2" border>订单完成后</el-radio>
                        </el-radio-group>
                    </el-form-item>
					<el-form-item label="不参与种子金活动:" class="coupon-item" >
                        <com-store-list :multiple="true" title="商品选择" :List="StoreList" @selected="storeSelect">
                            <el-button type="primary" size="small">添加商家</el-button>
                        </com-store-list>
                        <el-table v-if="StoreList && StoreList.length > 0" :data="StoreList" stripe style="width: 50%;margin-top:10px;">
                            <el-table-column prop="id" label="门店ID" width="80"></el-table-column>
                            <el-table-column prop="store_name" label="门店名称" width="200"></el-table-column>
                            <el-table-column label="LOGO">
                                <template slot-scope="scope">
                                    <div flex>
                                        <el-image fit="cover" style="width: 40px;height: 40px;display: block;margin-right: 5px;" :src="scope.row.logo_img"></el-image>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="80">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="delteGoods(scope.row,scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
					</el-form-item>
					<el-form-item label="订单额度" prop="status">
					    <el-form-item  class="coupon-item" style="display: flex;align-items: center;" v-for="(item,index) in settingConfig.quota_setting" :key="index">
					        <el-input onkeyup="value=toNumber(value,2)" :min="0" class="member-money" v-model="item.start_pay_money" placeholder="" style="width: 80px;margin-right: 20px;">
					        </el-input>
							<span >至</span>
							<el-input onkeyup="value=toNumber(value,2)" :min="0" class="member-money" v-model="item.end_pay_money" placeholder="" style="width: 80px;margin: 0 20px">
							</el-input>
							<span>获得种子金数量</span>
							<el-input onkeyup="value=toNumber(value)" :min="0" :max="100"  class="member-money" v-model="item.start_percent" placeholder="" style="width: 120px;margin-right: 20px;">
								<template slot="append">%</template>
							</el-input>
							<span style="margin-right：20px">至</span>
							<el-input onkeyup="value=toNumber(value)" :min="0" :max="100" class="member-money" v-model="item.end_percent" placeholder="" style="width: 120px;margin: 0 20px;">
								<template slot="append">%</template>
							</el-input>
					        <el-button  size="mini" type="danger"
									   v-if="settingConfig.quota_setting && settingConfig.quota_setting.length>1 && index > 0"
					                   icon="el-icon-close" circle
					                   @click="delItem(index)"></el-button> 
					    </el-form-item>
						<el-form-item v-if="settingConfig.quota_setting && settingConfig.quota_setting.length<9">
							<el-button  style="margin-bottom: 10px;" type="primary" size="small" @click="addquotaSetting">添加更多额度设置
							</el-button>
						</el-form-item>
					</el-form-item>
					<div class="flexcenter">
					   <el-button type="primary" @click="saveBasic('settingConfig')">保存</el-button>
					</div>
				</el-form>
				</div>
			</div>
			 
		</el-col>
	</el-row>
   </div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
			dialogVisible:false,
			settingConfig:{
                basic_unit_price: 0.01,
                multiple: 1,
                release_cycle: 1,
                pool_percent: 0,
                ad_percent: 0,
                collect_type: 1,// 收取时间[1=支付完成后，2=定完成后]
                quota_setting:[{
                    start_pay_money:0,
                    end_pay_money:0,
                    start_percent:0,
                    end_percent:0
                }]
            },
			basicForm:{
				quota_setting:[{
					start_pay_money:0,
					end_pay_money:0,
					start_percent:0,
					end_percent:0
				}]
			},
			listLoading: false,
			pagination:null,
			time:[],
			basicFormRules:{},
			StoreList:[],
			no_partake_stores:[],
            rules: {
                basic_unit_price: [
                    { required: true, message: '请输入种子金初始价值', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value <= 0) {
                                callback('种子金初始价值必须大于0');
                            }
                            callback();
                        }
                    }
                ],
                multiple: [
                    { required: true, message: '请输入种子金最高增长倍数', trigger: 'change' },
                    { type: 'number', min: 1, message: '最高增长倍数不能小于1', trigger: 'blur' }
                ],
                release_cycle: [
                    { required: true, message: '请输入能量池释放周期', trigger: 'change' },
                    // { type: 'number', min: 0, message: '释放周期不能小于1', trigger: 'blur' }
                ],
                pool_percent: [
                    { required: true, message: '请输入能量池订单扣除设置', trigger: 'change' },
                ],
                ad_percent: [
                    { required: true, message: '请输入广告收益扣除', trigger: 'change' },
                ]
            }
        },
        mounted() {
			this.getBasic()
        },
        methods: {
			delteGoods(row,index){ //删除已选商家
				console.log(row,index)
				this.settingConfig.no_partake_stores = []
				this.StoreList.splice(index,1)
				for(let i = 0 ; i<this.StoreList.length ;i++ ){
					this.settingConfig.no_partake_stores.push(this.StoreList[i].id)
				}
			},
			changeswitch(e){
				this.settingConfig.seed_status = e
			},
			storeSelect(storeList){
				this.settingConfig.no_partake_stores = []
				this.StoreList.push(...storeList)
			    for(let i = 0 ; i<this.StoreList.length ;i++ ){
					this.settingConfig.no_partake_stores.push(this.StoreList[i].id)
				}
			},
			delItem(index){
				this.settingConfig.quota_setting.splice(index,1)
			},
			saveBasic(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let self = this;
                        self.listLoading = true;
                        request({
                            method: 'post',
                            params: {
                                r: 'seed/setting/index',
                            },
                            data:{
                                basic:this.settingConfig
                            }
                        }).then(e => {
                            this.$message.success('保存成功');
                        }).catch(e => {
                            console.log(e);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
			},
			addquotaSetting(){
				let flag = true;
				let totalProportion = 0
				this.settingConfig.quota_setting.forEach((item, index)=>{
					 
					if(item.start_percent > item.end_percent){
						this.$message.error('种子金百分比只能递增');
					}
				})
				if(!flag) return
				let item = {start_pay_money:0,end_pay_money:0,start_percent:0,end_percent:0}
				this.settingConfig.quota_setting.push(item)
			},
           searchs(){
			  this.page = 1;
			  this.getList(); 
		   },
		   
		   toOrderDetail(order_no){
			   this.$navigate({
			       r: 'seed/index/change-log',
			       order_no: order_no
			   })	
		   },
		   getBasic() {  //种子金用户记录
		       let self = this;
		       self.listLoading = true;
		       request({
		           method: 'get',
		           params: {
		               r: 'seed/setting/index',
		           },
		       }).then(e => {
		           self.listLoading = false;
		           self.basicForm = e.data.data
                   if (!isEmpty(e.data.data.config)) {
                       self.settingConfig = e.data.data.config
                       self.settingConfig.quota_setting = JSON.parse(e.data.data.config.quota_setting)
                       if(self.settingConfig.quota_setting == null){
                           self.settingConfig.quota_setting = []
                           let item = {start_pay_money:0,end_pay_money:0,start_percent:0,end_percent:0}
                           self.settingConfig.quota_setting.push(item)
                       }
                   }
				   this.StoreList = e.data.data.stores
				  // this.settingConfig.no_partake_stores = 
				   if(self.settingConfig.seed_status == null){
						self.settingConfig.seed_status = 0
				   }
		       }).catch(e => {
		           console.log(e);
		       });
		   },
		   pageChange(currentPage) {
		       let self = this;
		       self.page = currentPage;
		       self.getList();
		   },
        }
    });
</script>