hemall.terabimsoft.com.cn/plugins/fight-groups/views/admin/create.blade.php

@extends('layouts.base')
@section('title', "活动创建")
@section('content')
<style>
    .rightlist #app .rightlist-head{line-height:50px;padding:15px 0;}
    .rightlist #app{margin-left:30px;}
    .rightlist #app .el-breadcrumb{padding:30px 0;font-size:16px;}
    .el-form-item__label{padding-right:30px;}
    .tip{font-size:12px;color:#999;font-weight:500}
    .rightlist-head-con{padding-right:20px;font-size:16px;color:#888;}
    /* .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;} */
    .el-tag{font-weight:700;font-size:15px;margin-bottom:30px;}
    .el-icon-edit{font-size:16px;padding:0 15px;color:#409EFF;cursor: pointer;}
    /* 滑块选择小白点 */
    .el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
    .el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
    .tip1{font-size:12px;color:red;font-weight:500}
    [v-cloak]{
        display:none;
    }
</style>
<div class="rightlist">
    <div id="app"  v-cloak>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups.index') }}">活动列表</a></el-breadcrumb-item>
            <el-breadcrumb-item>添加修改</el-breadcrumb-item>
        </el-breadcrumb>
        <template>
            <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                <div v-show="step==1">
                    <el-form-item label="活动商品" prop="has_one_goods.title">
                        <el-input v-model="form.has_one_goods.title" style="width:70%" disabled></el-input>
                        <el-button @click="add" type="primary">选择商品</el-button>
                        <div v-if="form.has_one_goods.title">
                            <img :src="form.has_one_goods.title.thumb" style="width:70px;height:70px;">
                            <div style="display:inline-block;line-height:18px;font-size:13px;padding-left:10px;font-weight:600">
                                <div>[[form.has_one_goods.title]]</div>
                                <div>库存：[[form.has_one_goods.sku]]</div>
                                <div>价格：￥[[form.has_one_goods.price]]</div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="活动标题" prop="title">
                        <el-input v-model="form.title" style="width:70%" ></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间" prop="assessed_at">
                        <el-row>
                            <el-col :span="8">
                                <el-date-picker v-model="form.start_time" type="datetime" format="yyyy-MM-dd hh:mm:ss"
                                value-format="timestamp" placeholder="选择开始时间" style="width:90%"></el-date-picker>
                            </el-col>
                            <el-col :span="10">
                            <div style="display:inline-block;padding-right:30px;font-size: 14px;color: #333;font-weight:400">结束时间</div>
                            <el-date-picker v-model="form.end_time" type="datetime" format="yyyy-MM-dd hh:mm:ss"
                                value-format="timestamp" placeholder="选择结束时间" style="width:70%"></el-date-picker>
                            </el-col>
                            <el-col :span="24">
                                <div class="tip1">说明：结束时间可不填，若不填商品详情页也不展示结束时间；不填则活动不会自动结束，需手动结束。</div>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="商家说明" prop="note">
                        <el-input v-model="form.note" type="textarea" rows="5" style="width:70%" ></el-input>   
                    </el-form-item>

                    <el-form-item label="拼团层级" prop="worth">
                        <!-- 表格start -->
                        <div style="padding:10px;background:#e9e9e9;width:70%;">
                            <el-table :data="form.has_many_level" style="width: 100%"  v-loading="table_loading">
                                <el-table-column prop="level_num" label="层级" width="80" align="center"></el-table-column>
                                <el-table-column prop="member_num" label="拼团人数"  min-width="100">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.member_num">
                                            <template slot="append">人</template>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="" label="拼团时间(团长开团后，有多少小时可以召集团员参团购买。)" min-width="180"  align="center">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.expire_in">
                                            <template slot="append">小时</template>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="80" align="center">
                                    <template slot-scope="scope">                          
                                        <el-button type="danger" @click="delTier(scope.$index)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        
                        <div>
                            <el-button size="mini" type="primary" icon="el-icon-plus" @click="addTier">新增一个拼团层级 </el-button>
                            <div class="tip" style="display:inline-block">最多可设置3个阶梯</div>
                        </div>
                        <!-- 表格end -->
                    </el-form-item>

                    <el-form-item label="展示设置" prop="menu_show">
                        <el-checkbox v-model.number="form.menu_show" :true-label="1" :false-label="0">隐藏开关</el-checkbox>
                        <div style="display:inline-block;font-weight:500;font-size:14px;margin-left:30px;" v-show="form.menu_show">
                            <span>
                                当可参的团数达到 
                                <input v-model="form.show_setting_number" style="height:25px;" />
                                时，不显示开团按钮
                            </span>
                        </div>
                        <div class="tip">勾选此选项则手机端商品详情页底部仅展示“去参团”，不展示“一键开团”</div>
                    </el-form-item>
                    <el-form-item label="团长福利" prop="is_integral">
                        <el-checkbox v-model.number="form.is_integral" :true-label="1" :false-label="0">团长送积分</el-checkbox>
                        <div style="display:inline-block;font-weight:500;font-size:14px;margin-left:30px;" v-show="form.is_integral">
                            <span>
                                送 
                                <input v-model="form.integral_num" style="height:25px;" />
                                分
                            </span>
                        </div>
                    </el-form-item>
                    <el-form-item label="老拉新" prop="is_lead">
                        <el-checkbox v-model.number="form.is_lead" :true-label="1" :false-label="0">开启老拉新</el-checkbox>
                        <div class="tip1">参与过该活动一次的视为老用户，老用户只允许开团不允许参团。此场景适合设置特价商品，用于鼓励老用户开团，协助店铺拉新。</div>
                    </el-form-item>
                    <el-form-item label="拼团设置" prop="setting" v-if="!form.is_lead">
                        <el-input v-model="form.setting" style="width:70%" ></el-input>
                        <div class="tip">每人最多参与几次不同的团</div>
                    </el-form-item>
                    <el-form-item label="弹幕设置" prop="barrage">
                        <el-radio v-model.munber="form.barrage" :label="1" >开启</el-radio>
                        <el-radio v-model.munber="form.barrage" :label="0" >关闭</el-radio>
                    </el-form-item>


                    <h5 style="border-bottom:1px solid #e9e9e9;">
                        活动分享
                    </h5>

                    <el-form-item label="标题" prop="share_title">
                        <el-input v-model="form.share_title" style="width:70%" ></el-input>
                        <div style="font-size:14px;font-weight:600;">
                            点击添加数据
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                        </div>
                    </el-form-item>

                    <el-form-item label="商家说明" prop="share_content">
                        <el-input v-model="form.share_content" type="textarea" rows="5" style="width:70%" ></el-input>   
                        <div style="font-size:14px;font-weight:600;">
                            点击添加数据
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                        </div>
                    </el-form-item>

                    <h5 style="border-bottom:1px solid #e9e9e9;">
                        活动详情分享
                    </h5>

                    <el-form-item label="标题" prop="desc_title">
                        <el-input v-model="form.desc_title" style="width:70%" ></el-input>
                        <div style="font-size:14px;font-weight:600;">
                            点击添加数据
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                        </div>
                    </el-form-item>

                    <el-form-item label="商家说明" prop="desc_content">
                        <el-input v-model="form.desc_content" type="textarea" rows="5" style="width:70%" ></el-input>   
                        <div style="font-size:14px;font-weight:600;">
                            点击添加数据
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                            <a href="#" style="margin:0 15px;">拼团活动名称</a>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <a href="#">
                            <el-button type="success" @click="next">
                                下一步
                            </el-button>
                        </a>
                        <el-button @click="goBack()">
                            返回列表
                        </el-button>
                    </el-form-item>
                </div>
                <!-- 第二页start -->
                <div v-show="step==2">
                    <div class="list-title" style="display:flex;width:100%;background:#f9f9f9;padding:15px 10px;font-weight:900;border:1px solid #e9e9e9;">
                        <div style="flex:1;display:flex;align-items:center;justify-content: center;">原价(元)</div>
                        <div style="flex:1;display:flex;align-items:center;justify-content: center;">拼团价格</div>
                        <div style="flex:1;display:flex;align-items:center;justify-content: center;">活动库存</div>
                        <div style="flex:1;display:flex;align-items:center;justify-content: center;">限购件数</div>
                    </div>
                    <div style="display:flex;flex;align-items:center;justify-content: center;padding:10px 0;border-bottom:1px solid #e9e9e9;">
                        <div style="flex:1;display:flex;flex;align-items:center;justify-content: center;">
                            [[form.has_one_goods.price]]
                        </div>
                        <div style="flex:1;display:flex;align-items:center;justify-content: center; flex-wrap: wrap;">
                            <el-input v-for="(item,index) in form.has_many_level" :key="index" v-model="form.has_many_level[index].group_price" style="flex:0 0 90%;padding:5px 0">
                                <template slot="prepend">[[item.member_num]]人团：</template>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                        <div style="flex:1;display:flex;align-items:center;justify-content: center;">
                            <el-input style="flex:0 0 90%;" v-model="form.stock"></el-input>
                        </div>
                        <div style="flex:1;display:flex;align-items:center;justify-content: center;">
                            <el-input style="flex:0 0 90%;" v-model="form.buy_limit"></el-input>
                        </div>
                    </div>
                    <div style="text-align:center;margin-top:22px;">
                        <a href="#">
                            <el-button type="primary">
                                上一步
                            </el-button>
                        </a>
                        <el-button @click="submitForm('form')">
                            保存
                        </el-button>
                    </div>
                </div>

                <!-- 第二页end -->
            </el-form>
        </template>
        <!-- 新增活动弹出框 -->
        <el-dialog title="选择商品" :visible.sync="new_url" width="60%" v-loading="dialog_loading">
            <div>
                <el-form :inline="true" :model="search_goods" ref="search_goods" style="padding:20px 0 0 0;">
                    <el-form-item label="" prop="">
                        <el-select v-model="search_form.category" placeholder="请选择分类" clearable>
                            <el-option v-for="item in category_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" prop="">
                        <el-input v-model="search_goods.goods_name" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <a href="#">
                        <el-button type="success" icon="el-icon-search" @click="searchGoods()">搜索</el-button>
                    </a>
                </el-form>
                <template>
                    <!-- 表格start -->
                    <el-table :data="goods_list" style="width: 100%;height:600px;overflow-y:auto"  v-loading="table_loading">
                        <el-table-column prop="id" label="" width="110" align="center">
                            <template slot-scope="scope">
                                <img :src="scope.row.thumb" alt="" style="width:50px;height:50px;">
                            </template> 
                        </el-table-column>
                        <el-table-column prop="title" label="商品"  min-width="120"></el-table-column>
                        <el-table-column prop="" label="价格"  min-width="80"  align="center">
                            <template slot-scope="scope">
                                <div style="color:red">￥[[scope.row.price]]</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stock" label="库存"  min-width="80"  align="center"></el-table-column>
                        <el-table-column label="操作" min-width="80" align="center">
                            <template slot-scope="scope">                          
                                <el-button type="primary" @click="choose(scope.row,scope.$index)">选取</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 表格end -->
                </template> 
                    <!-- 分页 -->
                <el-row>
                    <el-col :span="24" align="right" style="padding:15px 5% 15px 0">
                        <el-pagination layout="prev, pager, next" @current-change="currentChangeGoods" :current-page="goods_current_page" :total="goods_total" :page-size="goods_per_size" background v-loading="loading"></el-pagination>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="new_url = false">取 消</el-button>
                <!-- <el-button type="primary" @click="img_text_url = false">确 定</el-button> -->
            </span>
        </el-dialog>

    </div>
<script>
    var app = new Vue({
        el:"#app",     
        delimiters: ['[[', ']]'],
        data() {
            let data = {!! $data?:'{}' !!};
            console.log(data);
            return{
                tab:"all",
                new_url:false,//新增活动弹出框
                step:1,//下一步
                search_form:{},
                search_goods:{},
                category_list:[],
                goods_list:[],
                list:[],
                form:{
                    has_one_goods:{},
                    has_many_level:[],
                },
                //商品分页
                goods_total:0,
                goods_per_size:0,
                goods_current_page:0,

                loading:false,
                dialog_loading:false,
                table_loading:false,
                rules:{
                    title:{required: true, message: '请输入活动标题',}
                },
            }
        },
        methods: {
            add() {
                var that = this;
                that.new_url = true;
                if(that.category_list.length==0){
                    that.getCategory();
                }
                if(that.goods_list.length==0){
                    this.search_goods = {};
                    let json = this.search_goods;
                    that.getGoodsInfo(json);
                }
                
            },
            //获得分类
            getCategory(){
                var that = this;
                that.$http.get("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups.get-category') !!}",{}).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        that.category_list = response.data.data;
                    }
                    else{
                        that.$message.error(response.data);
                    }
                }),function(res){
                    console.log(res);
                };
            },
            //获得商品列表
            getGoodsInfo(json){
                var that = this;
                that.table_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups.search-goods') !!}",json).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        that.goods_total = response.data.data.total;
                        that.goods_per_size = response.data.data.per_page;
                        that.goods_current_page = response.data.data.current_page;
                        that.goods_list = response.data.data.data;
                    }
                    else{
                        that.$message.error(response.data);
                    }
                    console.log(that.goods_list);
                    that.table_loading = false;
                }),function(res){
                    console.log(res);
                    that.table_loading = false;
                };

            },
            //搜索商品
            searchGoods() {
                console.log(this.search_goods);
                this.getGoodsInfo(this.search_goods)
            },
            // 商品分页
            currentChangeGoods() {
                
            },
            // 选择商品
            choose(row,index) {
                this.new_url = false,
                this.form.has_one_goods.title = this.goods_list[index].title;
                this.form.has_one_goods.id = this.goods_list[index].id;
                this.form.has_one_goods.thumb = this.goods_list[index].thumb;
                this.form.has_one_goods.price = this.goods_list[index].price;
                this.form.has_one_goods.sku = this.goods_list[index].sku;
                console.log(this.form)
            },
            // 下一步
            next() {
                console.log(this.form);
                if(!this.form.title) {
                    this.$message.error("活动标题不能为空！")
                    return false;
                }
                if(!this.form.has_one_goods.title) {
                    this.$message.error("请选择活动商品！")
                    return false;
                }
                if(this.form.has_many_level.length == 0) {
                    this.$message.error("层级不能为空！")
                    return false;
                }
                if(!this.form.start_time || !this.form.end_time) {
                    this.$message.error("时间不能为空！")
                    return false;
                }
                if(this.form.start_time >= this.form.end_time) {
                    this.$message.error("开始时间不能大于或者等于结束时间！")
                    return false;
                }
                this.form.has_many_level.some(item => {
                    if(!item.member_num || !item.expire_in){
                        this.$message.error("层级信息不完成！");
                        return true;
                    }
                    else if(item.member_num == 1){
                        this.$message.error("拼团人数不能为1");
                        return true;
                    }
                    else {
                        this.step = 2;
                    }
                });
            },
            goBack() {
                history.go(-1);
            },
            // 新增层级
            addTier() {
                if(this.form.has_many_level.length>=3){
                    this.$message.error("最多可设置3个阶梯");
                    return;
                }
                this.form.has_many_level.push({
                    level_num : this.form.has_many_level.length+1, 
                    member_num : "", 
                    expire_in : "", 
                    group_price : "", 
                })
            },
            delTier(index) {
                this.form.has_many_level.splice(index,1);
                // 层级重新排序
                this.form.has_many_level.forEach((item,index1) => {
                    item.level_num = index1+1;
                })
            },
            submitForm(){
                var that = this;
                that.all_loading = true;
                console.log(this.data);
                that.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.reply.controller.default-reply.add') !!}",{keywords_id:that.data.id}).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        that.keyword_list = response.data.data;
                        that.$message.success("保存成功！");
                        window.location.href='{!! yzWebFullUrl('plugin.wechat.admin.reply.controller.default-reply.index') !!}';
                    }
                    else{
                        that.$message.error(response.data);
                    }
                    that.all_loading = false;
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },
        },
    })

</script>
@endsection