qimall/addons/Bargain/backend/views/default/edit.php

<!-- 引一个当前组件 -->
<?php
use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;

ComponentHelper::loadComponentView('com-dialog-select', AddonHelper::getAddonRootPath('Bargain') . 'backend/views/components/');
ComponentHelper::loadComponentView('com-rich-text');
?>

<div id="app"  v-loading.fullscreen.lock="pageLoading">
    <el-card shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><span style="color: #409EFF;cursor: pointer">添加商品</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form :model="cForm" :rules="cRule" ref="ruleForm" label-width="180px" size="small"
                 class="demo-ruleForm">
            <el-card shadow="never" class="mt-24">
                <el-form-item label="砍价活动名称">
                    <el-input class="width-200" v-model="cForm.title"></el-input>
                </el-form-item>
                <el-form-item label="砍价分类"  prop="parent_title">
                    <el-select v-model="cate_name" placeholder="请选择" @change="handleChange">
                        <el-option v-for="item,k in cateList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品信息获取" width="120" prop="goods_id" required>

                    <label slot="label">
                        商品信息获取
                    </label>
                    <div>
                        <el-row type="flex">
                            <com-dialog-select v-model="cForm.goods_id" :multiple="false" url="bargain/default/goods-list"
                                              @selected="selectGoodsWarehouse">
                                <el-button>选择商品</el-button>
                            </com-dialog-select>
                        </el-row>
                    </div>
                    <p class="tips-text">只能从商城中获取商品信息，且基本信息与商城商品保持一致</p>
                </el-form-item>
                <el-form-item v-if="formGoodsList.length>0" label="活动商品">
                    <div class="table-body">
                        <template>
                            <el-table
                                    :data="formGoodsList"
                                    border
                                    style="width: 800px">
                                <el-table-column
                                        label="商品"
                                        min-width="650">
                                    <template slot-scope="scope">
                                        <div flex="box:first">
                                            <div style="padding-right: 10px;">
                                                <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                            </div>
                                            <div>
                                                <div>
                                                    {{scope.row.goods_name}}
                                                </div>
                                                <div>
                                                <span style="color:red;margin-right: 10px;">
                                                    ￥{{scope.row.price}}
                                                </span>
                                                    <span>
                                                    库存：{{scope.row.stock}}
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="150">
                                    <template slot-scope="scope">
                                        <el-button @click="delGoods" type="text" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </template>
                    </div>
                </el-form-item>

                <el-form-item label="是否支持中途下单" prop="type">
                    <el-radio-group v-model.number="cForm.type">
                        <el-radio :label="1">允许中途下单</el-radio>
                        <el-radio :label="2">必须砍到最低价下单</el-radio>
                    </el-radio-group>
                    <p class="tips-text">若选择允许中途下单，下单后减少库存，若选择最低价下单，以砍价成功到最低价减少库存</p>
                </el-form-item>

                <el-col :xl="12" :lg="16">
                    <el-form-item label="活动库存" width="120" prop="stock">
                        <label slot="label">
                            活动库存
                        </label>
                        <el-input required type="number" v-model.number="cForm.stock" placeholder="请输入活动库存"  onkeyup="value=value.replace(/[^\d]/g,'')">
                        </el-input>
                        <p class="tips-text">活动库存与商城对应商品的总库存无关联</p>
                    </el-form-item>
                    <el-form-item label="砍价最低价" width="120" prop="min_price">
                        <el-input  required v-model="cForm.min_price"
                                  placeholder="请输入商品最低价" @input="priceChange" onInput="value=toNumber(value,2)"></el-input>
                    </el-form-item>
                    <el-form-item label="活动时间" width="120" prop="active_date" required>
                        <label slot="label">活动时间</label>

                        <el-date-picker
                                v-model="cForm.active_date"
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                        <p class="tips-text">商品砍价时间，到时间则活动结束</p>
                    </el-form-item>


                    <el-form-item label="砍价有效期" width="120" prop="time">
                        <label slot="label">砍价时间</label>
                        <el-input required type="number" v-model="cForm.time" placeholder="请输入砍价时间" onkeyup="value=value.replace(/[^\d]/g,'')">
                            <template slot="append">小时</template>
                        </el-input>
                        <p class="tips-text">若到时间没有购买，则视为砍价失败</p>
                    </el-form-item>

                    <el-form-item label="发起砍价参与等级"
                                  prop="join_limit_user_level"
                                  :rules="[{type: 'array', required: true, message: '请选择发起砍价参与等级'}]">
                        <el-select v-model="cForm.join_limit_user_level" multiple placeholder="请选择">
                            <el-option
                                    v-for="item in mall_join_members"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="发起次数" width="120" prop="join_time">
                        <label slot="label">发起次数</label>
                        <el-input-number v-model="cForm.join_time" :min="0" :precision="0" :step="1" label="请输入发起次数"></el-input-number>
                        <p class="tips-text">填0，则表示不限发起次数; 若填写发起次数，则发起次数必须大于等于1；</p>
                    </el-form-item>

                    <el-form-item label="自动首砍不考虑帮砍规则" prop="is_creator_exempt" required>
                        <el-switch
                                v-model="cForm.is_creator_exempt" :active-value="1" :inactive-value="0"
                        >
                        </el-switch>
                        <p class="tips-text">开启后，发起活动时，用户自身的砍价行为（即发起活动时的自动帮砍）不考虑帮砍等级计算，且不消耗帮砍次数；</p>
                    </el-form-item>

                    <el-form-item label="帮砍参与等级"
                                  prop="bargain_limit_user_level"
                                  :rules="[{type: 'array', required: true, message: '请选择帮砍参与等级'}]">
                        <el-select v-model="cForm.bargain_limit_user_level" multiple placeholder="请选择">
                            <el-option
                                    v-for="item in mall_members"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="可帮砍次数" width="120" prop="bargain_time">
                        <label slot="label">可帮砍次数</label>
                        <el-input-number v-model="cForm.bargain_time" :min="0" :precision="0" :step="1" label="请输入可帮砍次数"></el-input-number>
                        <p class="tips-text">填0，则表示不限帮砍次数; 若填写帮砍次数，则帮砍次数必须大于等于1；</p>
                    </el-form-item>

                    <el-form-item label="是否允许重复帮砍" prop="is_repeat_bargain" required>
                        <el-switch
                                v-model="cForm.is_repeat_bargain" :active-value="1" :inactive-value="0"
                        >
                        </el-switch>
                        <p class="tips-text">帮同个用户但不同砍价订单是否可以重复帮砍</p>
                    </el-form-item>

                    <el-form-item label="参与人数" width="120" prop="mode_data.bargain_people">
                        <label slot="label">参与人数</label>
                        <el-input required type="number" v-model.number="cForm.mode_data.bargain_people"
                                  placeholder="请输入参与人数" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
                        <p class="tips-text">填0，则表示不限参与人数，砍完为止; 若填写参与人数，则参与人数必须大于1； 刚好达到参与人数时砍价完成</p>

                    </el-form-item>
                    <el-form-item label="砍价方式" width="120">
                        <label slot="label">砍价方式</label>
                        <div>
                            <el-col :span="12">
                                <el-form-item prop="mode_data.bargain_human">
                                    <el-input required type="number" v-model.number="cForm.mode_data.bargain_human"
                                              placeholder="砍价人数" onkeyup="value=value.replace(/[^\d]/g,'')">
                                        <template slot="prepend">前</template>
                                        <template slot="append">人每人砍价</template>
                                    </el-input>
                                    <p class="tips-text">前N个人砍价波动值，剩余价格波动值</p>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item prop="mode_data.bargain_first_min_price">
                                    <el-input required type="number" v-model="cForm.mode_data.bargain_first_min_price">
                                        <template slot="append">~</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item prop="mode_data.bargain_first_max_price">
                                    <el-input required type="number" v-model="cForm.mode_data.bargain_first_max_price">
                                        <template slot="append">元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </div>
                        <div style="clear: both;"></div>
                        <div style="margin-top: 18px;">
                            <el-col :span="12">
                                <el-form-item prop="mode_data.bargain_second_min_price">
                                    <el-input required type="number" v-model="cForm.mode_data.bargain_second_min_price">
                                        <template slot="prepend">剩余每人砍价</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="mode_data.bargain_second_max_price">
                                    <el-input required type="number" v-model="cForm.mode_data.bargain_second_max_price">
                                        <template slot="prepend">~</template>
                                        <template slot="append">元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </div>
                        <div style="clear: both;"></div>
                    </el-form-item>

                    <el-form-item label="砍价者获得佣金" prop="mode_data.commission_type" required>
                        <el-switch
                                v-model="cForm.mode_data.commission_type" active-value="1" inactive-value="0"
                        >
                        </el-switch>
                    </el-form-item>

                    <el-form-item label="聚合页活动规则" prop="introduction">
                        <el-input type="textarea" :rows="3" placeholder="请输入聚合页活动规则" v-model="cForm.introduction" maxlength="200" show-word-limit></el-input>
                    </el-form-item>

                    <el-form-item label="完整活动规则" prop="description">
                        <com-rich-text v-model="cForm.description"></com-rich-text>
                    </el-form-item>

                </el-col>
            </el-card>
        </el-form>
        <div class="bottom-div" flex="cross:center">
            <el-button class="button-item" :loading="btnLoading" type="primary" size="small"
                       @click="store('ruleForm')">保存
            </el-button>
        </div>

    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id :0,
                pageLoading:false,
                btnLoading:false,
                goods_price:0,
                formGoodsList:[],
                cateList:[],//分类列表，
                cate_name: '',
                cate_id: 0,
                cForm:{
                    title:'',
                    cate_id:0,
                    goods_id:'',
                    type:1,
                    stock:'',
                    min_price:'',
                    time:'',
                    active_date: [],
                    mode_data:{

                    },
                    bargain_people: '',
                    bargain_human: '',
                    bargain_first_min_price: '',
                    bargain_first_max_price: '',
                    bargain_second_min_price: '',
                    bargain_second_max_price: '',
                    attr_setting_type: 0,
                    commission_type:'0',
                    join_limit_user_level: [],
                    join_time: 1,
                    is_creator_exempt: 1,
                    bargain_limit_user_level: [],
                    bargain_time: 1,
                    is_repeat_bargain: 1,
                    introduction : '',
                    description : '',
                },
                cRule:{
                    title: [
                        {
                            validator: (rule, value, callback) => {
                                if(value==''){
                                    callback('请输入砍价活动名称');
                                }
                                callback();
                            }
                        },
                    ],
                    goods_id: [
                        {
                            validator: (rule, value, callback) => {
                                if(value==0){
                                    callback('请选择商品');
                                }
                                callback();
                            }
                        },
                    ],
                    stock:[
                        {
                            validator: (rule, value, callback) => {
                                if(value<=0){
                                    callback('库存必须大于0');
                                }
                                callback();
                            },trigger: 'blur'
                        },
                    ],
                    min_price:[
                        {
                            validator: (rule, value, callback) => {
                                if(value<0){
                                    callback('请输入最低价格');
                                }
                                callback();
                            },trigger: 'blur'
                        },
                    ],
                    time:[
                        {
                            validator: (rule, value, callback) => {
                                if(value<=0){
                                    callback('请输入砍价时间');
                                }
                                callback();
                            },trigger: 'blur'
                        },
                    ],
                    mode_data:{
                        bargain_people: [
                            {
                                validator: (rule, value, callback) => {
                                    if(value<0){
                                        callback('请输入参与人数');
                                    }
                                    callback();
                                } ,trigger: 'blur'
                            }
                        ],
                        bargain_human: [
                            {
                                validator: (rule, value, callback) => {
                                    if(value<=0){
                                        callback('请输入前面人数');
                                    }
                                    callback();
                                },trigger: 'blur'
                            }
                        ],
                        bargain_first_min_price: [
                            {
                                validator: (rule, value, callback) => {
                                    if(value<=0){
                                        callback('必须大于0');
                                    }
                                    if (value > this.goods_price) {
                                        callback('前面砍价最低值不能大于商品售价');
                                    }
                                    callback();
                                },trigger: 'blur'
                            }
                        ],
                        bargain_first_max_price: [
                            {
                                validator: (rule, value, callback) => {
                                    if(value<=0){
                                        callback('必须大于0');
                                    }
                                    if (value > this.goods_price) {
                                        callback('前面砍价最高值不能大于商品售价');
                                    }
                                    callback();
                                },trigger: 'blur'
                            }
                        ],
                        bargain_second_min_price: [
                            {
                                validator: (rule, value, callback) => {
                                    if(value<=0){
                                        callback('必须大于0');
                                    }
                                    if (value > this.goods_price) {
                                        callback('后面砍价最低值不能大于商品售价');
                                    }
                                    callback();
                                },trigger: 'blur'
                            }
                        ],
                        bargain_second_max_price: [
                            {
                                validator: (rule, value, callback) => {
                                    if(value<=0){
                                        callback('必须大于0');
                                    }
                                    if (value > this.goods_price) {
                                        callback('后面砍价最高值不能大于商品售价');
                                    }
                                    callback();
                                },trigger: 'blur'
                            }
                        ],
                    },
                    active_date: [
                        {required: true, message: '请输入活动时间'}
                    ]
                },
                goodsDetail:{},
                mall_join_members: [],
                mall_members: [],
            };
        },
        methods: {
            loadData(){
                let self = this;
                self.pageLoading = true;
                request({
                    params: {
                        r: 'bargain/default/edit',
                        id: self.id,
                    },
                    method: 'get',
                }).then(e => {
                    self.pageLoading = false;
                    if (e.data.code == 0) {
                        self.cForm = e.data.data;
                        this.cateList = e.data.data.cate_list;
                        self.cate_name = e.data.data.cate.name;
                        self.cForm.mode_data.commission_type = self.cForm.mode_data.commission_type.toString();

                        self.mall_join_members = e.data.data.user_level_list;
                        self.mall_members = e.data.data.user_level_list;
                        delete e.data.data.user_level_list;

                        if(self.id!=0){
                            let formGoodsList = e.data.data.goods;
                            this.goods_price = e.data.data.goods.price;
                            self.formGoodsList.push(formGoodsList);
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                });
            },
            // 选择商品（清空弹窗已有商品）
            selectGoodsWarehouse(goods) {
                this.formGoodsList = [];
                this.cForm.goods_id = goods.id;
                this.goods_price = goods.price;
                this.formGoodsList.push(goods);
                //先验证商品
                this.$refs.ruleForm.validateField('goods_id');
            },
            //删除选中商品
            delGoods(){
                this.formGoodsList = [];
                this.cForm.goods_id = '';
                //先验证商品
                this.$refs.ruleForm.validateField('goods_id');
            },
            store(formName){
                let self = this;
                if(self.cForm.cate_id==0){
                    this.$message({
                        type: 'info',
                        message: '请选择砍价分类'
                    });
                    return false;
                }
                this.$refs[formName].validate(valid => {
                    if(valid){
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'bargain/default/edit',
                            },
                            method: 'post',
                            data: self.cForm
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code === 0) {
                                self.$message.success(e.data.msg);
                                navigateTo({
                                    r:'bargain/default/index'
                                });
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            console.log(e);
                        });
                    }
                })
            },
            handleChange(value) {
                this.cForm.cate_id = value;
            },
            priceChange(value){
                if(this.formGoodsList){
                    let goodsPrice = parseFloat(this.formGoodsList[0].price)
                    value = parseFloat(value)
                    if(value >=goodsPrice){
                        this.$message({type:'error',message:'砍价最低价格必须小于商品原价'})
                        this.cForm.min_price = goodsPrice - 1
                    }
                }
            }
        },
        created(){
            let id = getQuery("id");
            if(id){
                this.id = id;
                this.loadData();
            }else{
                this.id = 0;
            }
        }
    });
</script>