qimall/addons/Pk/backend/views/personal/person-add.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-05-08
 * Time: 17:50
 */

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-select-cat');
ComponentHelper::loadComponentView('com-dialog-select');

?>
<script src="/resources/js/Sortable.min.js"></script>
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<div id="app" v-cloak>
    <el-card class="box-card"  shadow="never" style="border:0;min-width: 1200px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span style="color: #409EFF;cursor: pointer"
                          @click="$navigate({r:'pk/personal/index'})"><!--mall/stock/level  -->
                        个人PK
                    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{titleName}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body" v-loading="loading">
			<div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 300px;margin:10px 0 20px 0;">
				<div style="width: 5px;height: 20px;background-color: #03C5FF;margin-right: 5px;"></div>
				<div>基本信息</div>
			</div>
            <el-form :model="submitData" :rules="rules" ref="ruleForm" size="small"  label-width="150px" style="margin-left: 20px;"><!-- :model="ruleForm" :rules="rules" v-loading="btnLoading" ref="ruleForm"-->
                <el-form-item label="PK名称:" style="margin-bottom: 20px" prop="name" label-width="75px">
                    <el-input placeholder="请输入内容" style="width: 450px;" v-model="submitData.name" :maxlength="10"></el-input>
                </el-form-item>
				<el-form-item label="PK类型:"  style="margin-bottom: 20px" required  label-width="auto">
				    <el-radio v-model="submitData.performance_type" :disabled = "isDataSelect" :label="1">拉新PK</el-radio>
				    <el-radio v-model="submitData.performance_type" :disabled = "isDataSelect" :label="2">业绩PK</el-radio>
				</el-form-item>
				<el-form-item v-if="submitData.performance_type == 2" label="结算方式:" style="margin-bottom: 20px" required  label-width="auto">
					<el-radio v-model="submitData.settlement_type" :disabled = "isDataSelect" :label="1">支付后</el-radio>
					<el-radio v-model="submitData.settlement_type" :disabled = "isDataSelect" :label="2">订单完成</el-radio>
				</el-form-item>
				<el-form-item label="人员数量:" style="margin-bottom: 20px" label-width="85px" prop="people_max_amount">
				    <el-input placeholder="请输入人员数量"  style="width: 250px;margin-right: 20px;" type="number" v-model="submitData.people_max_amount" :disabled="people_max_amount_flag" @input="changeInput2"></el-input>
					<el-checkbox v-model="people_max_amount_flag" >不限制</el-checkbox>
				</el-form-item>
				<el-form-item label="报名费用(元):" style="margin-bottom: 20px" label-width="108px" prop="price">
				    <el-input placeholder="请输入费用" style="width: 250px;margin-right: 20px;" type="number" v-model="submitData.price" @input="changeInput3"></el-input>
				</el-form-item>
				<el-form-item label="活动时间段:" style="margin-bottom: 20px" label-width="98px" prop="time">
				     <el-date-picker
						  :disabled = "isDataSelect"
				          v-model="submitData.time"
						  @change="datetimeChange"
				          type="datetimerange"
				          :picker-options="pickerOptions"
				          range-separator="至"
				          start-placeholder="开始日期"
				          end-placeholder="结束日期"
						  value-format="yyyy-MM-dd HH:mm:ss"
				          align="center">
				        </el-date-picker>
				</el-form-item>
				<el-form-item label="是否开启:" style="margin-bottom: 20px" required  label-width="auto">
				    <el-switch
				            v-model="submitData.is_enable"
				            :active-value="1"
				            :inactive-value="0"
				    		active-text="开"
				    		inactive-text="关"
				    >
				    </el-switch>
				</el-form-item>
            </el-form>
			
			<div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 300px;margin:10px 0 20px 0;">
				<div style="width: 5px;height: 20px;background-color: #03C5FF;margin-right: 5px;"></div>
				<div>奖品设置</div>
			</div>
			
			<el-button type="primary" size="small" style="margin-left: 20px;" @click="addPrize">+奖品</el-button>
			
			<el-form v-for="(item,index) in submitData.prize" :key="index" size="small"  label-width="80px" style="margin-left: 20px;border-bottom: 1px solid #E4E7ED;position: relative;margin-top: 30px;">
				<el-form-item label="奖品等级" style="margin-bottom: 20px" required>
				    <el-input 
					   placeholder="请输入奖品等级"
					   style="width: 450px;"
					   v-model="item.prize_level"
					   type="textarea"
					    maxlength="10"
					    show-word-limit
					    :rows="2"
					   >
					   </el-input>
				</el-form-item>
				<el-form-item label="奖品名称" style="margin-bottom: 20px" required>
				    <el-input 
					 placeholder="请输入奖品名称" 
					  style="width: 450px;" 
					   v-model="item.prize_name"
					   type="textarea"
					    maxlength="20"
					    show-word-limit
					    :rows="2"
					   ></el-input>
				</el-form-item>
                <el-form-item label="奖品价值" style="margin-bottom: 20px" required>
                    <el-input placeholder="请输入奖品价值(元)" style="width: 450px;" v-model="item.prize_price" type="prize_price" @input="((val)=>{changeInput5(val, index)})"></el-input>
                </el-form-item>

				<el-form-item label="奖品数量" style="margin-bottom: 20px" required>
				    <el-input placeholder="请输入奖品数量" style="width: 450px;" v-model="item.prize_amount" type="number" @input="((val)=>{changeInput4(val, index)})"></el-input>
				</el-form-item>
				<el-form-item label="奖励人数" style="margin-bottom: 20px" required>
				    <el-input placeholder="请输入奖励人数" style="width: 450px;" v-model="item.winner_amount" type="number" @input="((val)=>{changeInput5(val, index)})"></el-input>
				</el-form-item>

                <el-form-item label="额外加赠" style="margin-bottom: 20px" required>
                    <el-switch
                            v-model="item.extra_add"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="是"
                            inactive-text="否"
                    >
                    </el-switch>
                </el-form-item>
				
				<div style="position: absolute;top: 0;left: 540px;">
					<el-tooltip effect="dark" content="删除该奖品" placement="top">
					   <img :src="diy_img_prefix + '/static/addons/Pk/del.png'" alt=""  @click="delPrize(index)">
					</el-tooltip>
				</div>
			</el-form>
			
			
			<div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 300px;margin:30px 0 20px 0;">
				<div style="width: 5px;height: 20px;background-color: #03C5FF;margin-right: 5px;"></div>
				<div>分享设置</div>
			</div>
			<el-form  size="small"  label-width="150px" style="margin-left: 20px;">
				<el-form-item label="自定义分享标题:" style="margin-bottom: 20px" label-width="auto">
				    <el-input placeholder="请输入自定义分享标题" style="width: 450px;" v-model="submitData.share_title"></el-input>
				</el-form-item>
				
				<el-form-item label="自定义分享图:" label-width="auto">
					<div  style="margin-top: 10px;"><!-- flex="dir:left" -->
					    <template v-if="submitData.share_pic"><!-- v-if="ruleForm.pic_url.length" -->
					        <draggable><!-- flex="dif:left" -->
					            <div style="margin-bottom: 20px;position: relative;cursor: move;background-color: #eee;display: flex;align-items: flex-end;width:100px"><!-- v-for="(item,index) in pic_url" :key="index" -->
					                
					                    <com-image mode="aspectFill" width="100px"
					                               height='100px' :src="submitData.share_pic">
					                    </com-image>
									
					                <el-button class="del-btn" size="mini" type="danger"
					                           icon="el-icon-close" circle style="position: absolute;top:-10px;right:-10px"
					                           @click="delPic()">
									</el-button>
					            </div>
					        </draggable>
					    </template>
					    <div v-if="!submitData.share_pic"><!-- v-if="ruleForm.pic_url.length < 9" -->
					        <com-attachment style="margin-bottom: 10px;" :multiple="false"
					                        :max="1" @selected="picUrl">
					            <!-- <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 750"
					                        placement="top"> -->
					                <div flex="main:center cross:center" class="add-image-btn">
					                    + 添加图片
					                </div>
					            <!-- </el-tooltip> -->
					        </com-attachment>
					    </div>
					</div>
				</el-form-item>
			</el-form>

            <el-input
                    placeholder="创建时间戳"
                    style="width: 450px;"
                    v-model="submitData.created_at"
                    type="hidden"
                    maxlength="10"
                    show-word-limit
                    :rows="2"
            >
            </el-input>
			
			
			
        </div>
		<el-button class="button-item" :loading="btnLoading" type="primary" @click="saveFun"
		           size="small">保存
		</el-button>
		
		
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
				isDataSelect:false,
				titleName:"添加个人PK",
				loading:false,
				submitData:{
					name:'',
					performance_type:1,
					/* team_max_amount:1, */
					people_max_amount:'',
					price:0,
					begin_time:'',
					settlement_type:1,
					end_time:'',
					is_enable:1,
					prize:[],
					share_title:'',
					share_pic:'',
					time:'',
					activity_type:1,
                    created_at: 0,
                    updated_at: 0,
				},
				
				 rules: {
				          name: [
				            { required: true, message: '请输入活动名称', trigger: 'blur' }
				          ],

						  people_max_amount: [
						    { required: true, message: '请输入人员数量', trigger: 'blur' }
						  ],
						  price: [
						    { required: true, message: '请输入报名费用，可为0元', trigger: 'blur' }
						  ],
						  time: [
						    { required: true, message: '请选择时间', trigger: 'blur' }
						  ],

				        },
				
				prizeObj:{
					"prize_level":"",
					"prize_name":"",
					"prize_amount":'',
					"winner_amount":'',
                    "prize_price": '',
                    "extra_add": 0
				},
				team_max_amount_flag:true,
				people_max_amount_flag:false,
				btnLoading:false,
				radio:2,
				is_no_restrictions:false,
				time:'',
				is_team_audit:1,
				pic_url: [],
				 pickerOptions: {
				          shortcuts: [{
				            text: '最近一周',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date();
				             /* start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				              picker.$emit('pick', [start, end]); */
							  end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
							   picker.$emit('pick', [start, end]);
				            }
				          }, {
				            text: '最近一个月',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date();
				              /* start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				              picker.$emit('pick', [start, end]); */
							  end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
							  picker.$emit('pick', [start, end]);
				            }
				          }, {
				            text: '最近三个月',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date();
				              /* start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
				              picker.$emit('pick', [start, end]); */
							  end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
							  picker.$emit('pick', [start, end]);
				            }
				          }]
				        },
            };
        },
        mounted() {
            this.submitData.created_at = Date.parse(new Date()) / 1000; // 新建数据的创建时间
            this.submitData.updated_at = Date.parse(new Date()) / 1000; // 新建数据的更新时间
			/* this.submitData.team_max_amount = -1;
			this.submitData.people_max_amount = -1; */
			this.people_max_amount_flag = true;
			this.submitData.prize.push(JSON.parse(JSON.stringify(this.prizeObj)));
			
			//console.log('进来页面获取的参数id='+getQuery('id'))
			if (getQuery('id')) {
				this.titleName="编辑个人PK";
				this.isDataSelect = true;
				//this.getWeightsLevel = getQuery('level');
			    this.loadData(getQuery('id'));//请求详情的数据
			}
			
			
        },
		watch:{

		},
        methods: {
			changeInput2(){
				 var pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
				      // 不符合正整数时
				      if (!pattern.test(this.submitData.people_max_amount)) {
				        // input 框绑定的内容为空
				        this.submitData.people_max_amount = ''
				      }
			},
			changeInput3(){
							var str = this.submitData.price;
					          var len1 = str.substr(0, 1)
					          var len2 = str.substr(1, 1)
					          //如果第一位是0，第二位不是点，就用数字把点替换掉
					          if (str.length > 1 && len1 == 0 && len2 != ".") {
					              str = str.substr(1, 1)
					          }
					          //第一位不能是.
					          if (len1 == ".") {
					              str = ""
					          }
					          //限制只能输入一个小数点
					          if (str.indexOf(".") != -1) {
					              var str_ = str.substr(str.indexOf(".") + 1)
					              if (str_.indexOf(".") != -1) {
					                  str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
					              }
					          }
					          //正则替换
					          str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
					          str = str.replace(/\.\d\d\d$/,'') // 小数点后只能输两位
							this.submitData.price = str;
			},
			changeInput4(val,index){
				var pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
				     // 不符合正整数时
				     if (!pattern.test(val)) {
				       // input 框绑定的内容为空
				       this.submitData.prize[index].prize_amount = '';
				     }
					 this.submitData.prize[index].prize_amount = this.submitData.prize[index].prize_amount.substr(0,6);
			},
			changeInput5(val,index){
				var pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
				     // 不符合正整数时
				     if (!pattern.test(val)) {
				       // input 框绑定的内容为空
				       this.submitData.prize[index].winner_amount = '';
				     }
					 this.submitData.prize[index].winner_amount = this.submitData.prize[index].winner_amount.substr(0,6);
			},
			saveFun(){
				if(this.people_max_amount_flag){
					this.submitData.people_max_amount = -1;
				}
				
				this.$refs['ruleForm'].validate((valid) => {
				          if (valid) {
							  
							 if(this.submitData.prize.length > 0){
							 	for(var i=0;i<this.submitData.prize.length;i++){
							 		for(let item2 in this.submitData.prize[i]){
							 			if(this.submitData.prize[i][item2] === '' || this.submitData.prize[i][item2] === null){
							 				return this.$message.error('请完善奖品信息');
							 				break;
							 			}
							 		}
							 	}
							 }
							  
				           /* if(this.pic_url[0]){
				            	this.submitData.share_pic = this.pic_url[0].pic_url;
				            } */
				           
							
							let data =JSON.parse(JSON.stringify(this.submitData));
							data.prize =JSON.stringify(data.prize);
							/* this.submitData.prize = JSON.stringify(this.submitData.prize) */
				            this.btnLoading = true;
							
							let url;
							if(this.submitData.id){//全更新
								url = 'pk/personal/patch'
							}else{//添加
								url = 'pk/personal/patch'
							}
				            request({
				                params: {
				                    r:url,
				                },
				                method: 'post',
				                data: data
				            }).then(e => {
				                this.btnLoading = false;
								
				                if (e.data.code == 0) {
				                    this.$message.success(e.data.msg);
									navigateTo({
									    r: 'pk/personal/index',
									});
				                } else {
				                    this.$message.error(e.data.msg);
				                }
				            }).catch(e => {
								
				                this.$message.error(e);
				                this.btnLoading = false;
				            })
				          } else {
				            this.$message.error('请填写必要的参数！');
				            return false;
				          }
				});
				
				
			},
			picUrl(e) {
				
			    if (e.length) {
			        /* let self = this;
			        e.forEach(function (item, index) {
			            if (self.pic_url.length >= 9) {
			                return;
			            }
			            self.pic_url.push({
							url:'',
			                pic_url: item.url
			            });
						)
			        }); */
					
					this.submitData.share_pic = e[0].url;
					
			    }
				
			},
			delPic(index) {
			    /* this.pic_url.splice(index, 1) */
				this.submitData.share_pic = '';
			},
			datetimeChange(){
				
				//console.log(this.time[0])
				if(this.submitData.time){
					this.submitData.begin_time = this.submitData.time[0];
					this.submitData.end_time = this.submitData.time[1];
				}
				
			},
			addPrize(){
				this.submitData.prize.push(JSON.parse(JSON.stringify(this.prizeObj)));
			},
			delPrize(index){
				
				this.submitData.prize.splice(index,1)
			},
			loadData(id){
				this.loading = true;
				request({
				    params: {
						r:'pk/personal/personal-add',
						id:id
					},
				    method: 'get',
				}).then(e => {
					
					this.loading = false;
				    if (e.data.code == 0) {
				        this.submitData = e.data.data;
						this.submitData.time = [e.data.data.begin_time,e.data.data.end_time]
						if(this.submitData.people_max_amount == -1){
							this.people_max_amount_flag = true;
							this.submitData.people_max_amount = '';
						}else{
							this.people_max_amount_flag = false;
						}
				    } else {
				        this.$message.error(e.data.msg);
				    }
				}).catch(e => {
					this.loading = false;
				});
			}
        }
    });
</script>

<style>
    .form-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 20%;
        min-width: 900px;
    }

    .form-body .el-form-item {
        padding-right: 25%;
        min-width: 850px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .button-item {
        padding: 9px 25px;
    }

    .check-group {
        font-size: 14px !important;
    }

    .check-group .el-col {
        display: flex;
    }

    .check-group .el-input {
        margin: 0 5px;
    }

    .check-group .el-col .el-checkbox {
        display: flex;
        align-items: center;
    }

    .check-group .el-col .el-input {
        width: 100px;
    }

    .check-group .el-col .el-input .el-input__inner {
        height: 30px;
        width: 100px;
    }

    .el-checkbox-group .el-col {
        margin-bottom: 10px;
    }
	
	.add-image-btn {
	    width: 100px;
	    height: 100px;
	    color: #419EFB;
	    border: 1px solid #e2e2e2;
	    cursor: pointer;
	}
</style>