qimall/addons/Store/client/views/coupon/edit.php

<?php defined('YII_ENV') or exit('Access Denied'); ?>
<style>
    .list {
        margin-top: 10px;
        width: 100%;
    }

    .choose {
        border: 1px solid #e2e2e2;
        height: 125px;
        width: 120px;
        padding-top: 15px;
        text-align: center;
        margin: 0 10px 20px 0;
        border-radius: 0 !important;
        position: relative;
    }

    .choose i {
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
    }

    .choose .name {
        margin-top: -10px;
    }

    .item .el-checkbox-button__inner {
        border: 1px solid #e2e2e2;
        height: 125px;
        width: 120px;
        padding-top: 15px;
        text-align: center;
        margin: 0 20px 20px 0;
        cursor: pointer;
        border-radius: 0 !important;
    }

    .item.active {
        background-color: #50A0E4;
        color: #fff;
    }

    .list .img {
        height: 60px;
        width: 60px;
        border-radius: 30px;
    }

    .name {
        margin-top: 10px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .el-tabs__header {
        padding: 0 20px;
        height: 56px;
        line-height: 56px;
        background-color: #fff;
        margin-bottom: 0;
    }

    .form-body {
        background-color: #fff;
        /* padding: 20px 50% 20px 20px; */
        padding: 0;
        min-width: 1000px;
    }

    .el-form-item{
        padding-right: 40%
    }

    .button-item {
        /*margin-top: 12px;*/
        padding: 9px 25px;
    }

    .del-btn {
        position: absolute;
        right: -8px;
        top: -8px;
        padding: 4px 4px !important;
    }

    .header-box {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 10px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .el-card,
    .el-message {
        border-radius: 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .text {
        cursor: pointer;
        color: #419EFB;
    }

    .coupon-type {
        border: 1px solid #E0E0E0;
        padding: 20px 16px;
        font-size: 16px;
        line-height: 30px;
        margin-right: 24px;
        min-width: 160px;
        border-radius: 8px;
        color: #E0E0E0;
        font-weight: 400;
    }

    .coupon-type-name {
        color: #666;
        font-size: 24px;
        font-weight: bold;
    }

    .coupon-type-img{
        margin-right: 12px;
    }

    .coupon-type:hover,
    .click-so {
        cursor: pointer;
    }

    .sel-coupon-type {
        border: 2px solid #409EFF;
        color: #666;
    }

    .sel-coupon-type-name {
        color: #409EFF;
    }

    .discount-text {
        line-height: 30px;
    }

    .add-goods-info{
        margin-left: 12px;
        font-size: 16px;
        color: #333;
        line-height: 24px;
    }

    .coupon-form .el-input-group__prepend{
        background: transparent;
    }

    .coupon-form  .el-input-group__append{
        background: #F2F3F4;
        border: 1px solid #E0E0E0;
        border-left: 0;
        font-size: 14px;
        color: #666666;

    }

    .coupon-form .el-input__inner[type="number"]{
        padding-right: 0;
    }

    .expire_type_model{
        margin-bottom: 10px;
    }

    .coupon_expire_type,.coupon_expire_type_text{
        display: flex;
        align-items: center;
    }

    .coupon_expire_type .el-input-group{
        margin: 0 6px;
    }

    .coupon-model-title{
        padding: 0 16px 20px;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 500;
        line-height: 31px;
        color: #333333;
        border-bottom: 1px solid #F2F2F2;
    }

    .coupon-model-title:first-child{
        padding-top: 20px;
    }


    .coupon-award>div{
        margin-bottom: 20px;
    }

</style>

<div id="app" v-cloak>
    <div slot="header" class="header-box">
        <div flex="cross:center box:first">
            <div><span @click="$navigate({r:'mall/coupon/index'})" class="text">优惠券管理</span> / 优惠券编辑</div>
            <div flex="dir:right">
                <div>
                    <el-button :disabled="!is_can_edit" class="button-item" type="primary" size="small" :loading=submitLoading @click="onSubmit">保存</el-button>
                    <el-button :disabled="!is_can_edit" class="button-item" type="primary" size="small" :loading=submitLoading v-if="coupon_id>0"@click="delCoupon(coupon_id)">删除</el-button>
                </div>
            </div>
        </div>
    </div>
    <el-card v-loading="loading" style="border:0" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;">
        <el-form class="coupon-form" :model="form" label-width="10.5rem" :rules="FormRules" ref="form">
            <div class="form-body">
                <div class="coupon-model-title">
                    规则设置
                </div>
                <el-form-item  label="优惠券类型" prop="type">
                    <div flex>
                        <div class="coupon-type" flex :class="{'sel-coupon-type': form.type == 2}" @click="selectType(2)">
                            <div class="coupon-type-img">
                                <el-image style="width: 52px; height: 52px" :src="form.type == 2?'resources/img/plugins/coupon/selCoupon.png':'resources/img/plugins/coupon/noCoupon.png'"></el-image>
                            </div>
                            <div>
                                <div class="coupon-type-name" :class="{'sel-coupon-type-name': form.type == 2}">满减券</div>
                                <div>例：满100减20</div>
                            </div>
                        </div>
                        <div class="coupon-type" flex :class="{'sel-coupon-type': form.type == 1}" @click="selectType(1)">
                            <div class="coupon-type-img">
                                <el-image style="width: 52px; height: 52px" :src="form.type == 1?'resources/img/plugins/coupon/selCoupon.png':'resources/img/plugins/coupon/noCoupon.png'"></el-image>
                            </div>
                            <div>
                                <div class="coupon-type-name" :class="{'sel-coupon-type-name': form.type == 1}">折扣券</div>
                                <div>例：满100打9折</div>
                            </div>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item prop="discount">
                    <template slot='label'>
                        <span class="discount-text">优惠内容</span>
                    </template>
                    <!-- 满减 -->
                    <div v-if="form.type == 2" style="display: flex;">
                        <el-input size="small" @input="handleMinPrice" ref="min_price" style="width: 30%;margin-right: 6px;" type="number" v-model="form.min_price" autocomplete="off">
                            <div class="discount-text" slot="prepend">消费满</div>
                            <template slot="append">元</template>
                        </el-input>
                        <el-input size="small" @input="handleSubPrice" ref="sub_price" style="width: 30%;margin: 0 6px;" type="number" v-model="form.sub_price" autocomplete="off">
                            <div class="discount-text" slot="prepend" style="text-align: center;">减</div>
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                    <!-- 折扣 -->
                    <div v-if="form.type == 1" style="display: flex;">
                        <el-input size="small" @input="handleMinPrice" style="margin-right: 6px;" ref="fold_min_price" prop="min_price" type="number" v-model="form.min_price" autocomplete="off">
                            <div class="discount-text" slot="prepend" >消费满</div>
                            <template slot="append">元</template>
                        </el-input>
                        <el-input size="small" @input="handleSubPrice" style="margin: 0 6px;" type="number" v-model="form.discount" autocomplete="off" prop="discount">
                            <div class="discount-text" slot="prepend" >打</div>
                            <template slot="append">折</template>
                        </el-input>
                        <el-checkbox ref="is_discount_limit" @change="discount_limit_change" v-model="is_discount_limit" :true-label="1" :false-label="0" style="display: flex;justify-content: center;align-items: center;margin: 0 6px;">最多优惠</el-checkbox>
                        <el-input size="small" @input="handleDiscountLimit" style="margin: 0 6px;" ref="fold_discount_limit" type="number" v-model="form.discount_limit" autocomplete="off" prop="discount_limit">
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                </el-form-item>

                <el-form-item label="优惠券名称" prop="name">
                    <el-input size="small" minlength="1" maxlength="150" show-word-limit v-model="form.name" autocomplete="off" placeholder="请输入优惠券名称"></el-input>
                </el-form-item>

                <el-form-item prop="total_count">
                    <template slot='label'>
                        <span>发放总数</span>
                        <el-tooltip effect="dark" content="优惠券总数量不能为 0" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </template>
                    <el-input size="small" style="width: 260px;" @input="numForm($event,'total_count')" v-model.number="form.total_count" :min="1" autocomplete="off">
                        <template slot="append">张</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="优惠券有效期" prop="expire_type">
                    <div class="expire_type_model">
                        <el-radio class="coupon_expire_type" :disabled="is_can_change_time" v-model="form.expire_type" :label="1">
                            <span class="coupon_expire_type_text" style="color: #333;">
                                领券后立即生效，有效
                                <el-input size="small" style="width: 30%;" min="1" :disabled="is_can_change_time" v-model="form.expire_day" autocomplete="off" @input="numForm($event,'expire_day')">
                                    <template slot="append">天</template>
                                </el-input>
                            </span>
                        </el-radio>
                    </div>
                    <div class="expire_type_model">
                        <el-radio class="coupon_expire_type" :disabled="is_can_change_time" v-model="form.expire_type" :label="3">
                            <span class="coupon_expire_type_text" style="color: #333;">
                                领券
                                <el-input size="small" style="width: 30%;" min="1" :disabled="is_can_change_time" v-model="form.effect_days" autocomplete="off" @input="numForm($event,'effect_days')" >
                                    <template slot="append">天</template>
                                </el-input>
                                后生效，有效期
                                <el-input size="small" style="width: 30%;" min="1" :disabled="is_can_change_time" v-model="form.effect_expire_days" autocomplete="off" @input="numForm($event,'effect_expire_days')">
                                    <template slot="append">天</template>
                                </el-input>
                            </span>
                        </el-radio>
                    </div>
                    <div class="expire_type_model">
                        <el-radio class="coupon_expire_type" :disabled="is_can_change_time" v-model="form.expire_type" :label="2">
                            <el-date-picker size="small" :disabled="is_can_change_time" v-model="expire_time" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="select_expire_time">
                            </el-date-picker>
                        </el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="视频封面:" prop="" >
                    <div style="float: left;">
                        <com-attachment v-model="form.first_frame" :multiple="false" :max="1">
                            <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
                                <el-button size="mini">选择图片</el-button>
                            </el-tooltip>
                        </com-attachment>
                        <div class="customize-share-title">
                            <com-image mode="aspectFill" width='80px' height='80px' :src="form.first_frame ? form.first_frame : ''"></com-image>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="视频上传" prop="video_url">
                    <com-attachment :multiple="false" :max="1" @selected="videoUrl" type="videos">
                        <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;" placement="top">
                            <el-button size="mini">选择视频</el-button>
                        </el-tooltip>
                    </com-attachment>

                    <a class="box-grow-0" type="primary" style="font-size:12px" title="播放视频" v-if="form.video_url" :underline="false" target="_blank" :href="form.video_url">
                        <el-button type="primary" size="mini">播放</el-button>
                    </a>
                </el-form-item>
                <el-form-item prop="watch_times">
                    <template slot='label'>
                        <span>观看秒数</span>
                    </template>
                    <el-input size="small" style="width: 260px;" type="number" onInput="value=toNumber(value,2)" v-model="form.watch_times" :min="1" autocomplete="off">
                        <template slot="append">秒</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="使用范围" prop="appoint_type">
                    <el-radio v-model="form.appoint_type" :label="3">全店通用</el-radio>
                    <el-radio v-model="form.appoint_type" @click.native="goodsListVisible = true" :label="2">
                        指定商品可用
                    </el-radio>
                    <el-radio v-model="form.appoint_type" :label="1">指定商品分类可用</el-radio>

                    <div v-if="form.appoint_type ==1">
                        <el-cascader size="small" v-model="cat_id_list" :options="cats_list" :props="{ multiple: true,checkStrictly: true,emitPath: false, }" clearable></el-cascader>
                    </div>

                    <div v-if="form.appoint_type == 2">
                        <el-button :disabled="!is_can_edit" type="text" @click.native="goodsAddVisible = true">选择商品</el-button>
                        <el-table :data="selected_goods" style="width: 100%" del-max-height="99999px">
                            <el-table-column prop="goods_id" label="ID" width="80"></el-table-column>
                            <el-table-column prop="cover_pic" label="商品" width="280">
                                <template slot-scope="scope">
                                    <div flex>
                                        <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                        <div class="add-goods-info">
                                            <div>{{scope.row.goods_name}}</div>
                                            <div style="font-size: 14px;color: #B2B2B2;">{{scope.row.price}} - {{scope.row.original_price}}</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button plain size="mini" type="danger" @click="goodsDestroy(scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>

<!--                <el-form-item label="过期提醒" prop="is_remind">-->
<!--                    <div style="display: flex;align-items: center;">-->
<!--                        <el-checkbox v-model="form.is_remind" :true-label="1" :false-label="0">-->
<!--                            <span style="color: #333;">优惠券过期前</span>-->
<!--                        </el-checkbox>-->
<!--                        <el-input size="small" prop="remind_days" :disabled="form.is_remind!=1" style="width: 20%;margin: 0 10px;" v-model="form.remind_days" autocomplete="off" @input="numForm($event,'remind_days')">-->
<!--                            <template slot="append">天</template>-->
<!--                        </el-input>-->
<!--                        <div>提醒</div>-->
<!--                        <el-tooltip effect="dark" content="建议设置的天数小于优惠券的有效期，否则用户无法收到过期提醒"-->
<!--                                    placement="top">-->
<!--                                <i class="el-icon-question" style="font-size: 20px;color: #858585;margin-left: 10px;"></i>-->
<!--                        </el-tooltip>-->
<!--                    </div>-->
<!--                </el-form-item>-->

                <el-form-item label="优惠叠加" prop="is_original_use">
                    <el-checkbox v-model="form.is_original_use" :true-label="1" :false-label="0">
                        <span style="color: #333;">优惠券仅原价购买时可用</span>
                    </el-checkbox>
                </el-form-item>

                <el-form-item label="使用说明" prop="rule">
                    <el-input size="small" v-model="form.rule" type="textarea" :rows="4" placeholder="请输入内容">
                    </el-input>
                </el-form-item>
                <div class="coupon-model-title">
                    领取规则
                </div>
                <el-form-item label="每人最多可领取" prop="receive_count">
                    <el-input size="small" v-model="form.receive_count" autocomplete="off" style="width: 260px;" @input="numForm($event,'receive_count')">
                        <template slot="append">张</template>
                    </el-input>
                    <div style="color: #999;font-size: 14px;">编辑保存后，仅对后续领取的客户生效，对之前已领取的客户无法生效。</div>
                </el-form-item>
                <el-form-item label="是否设为开屏优惠券" prop="is_open_screen">
                    <el-switch  v-model="form.is_open_screen" active-color="#13ce66" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="优惠券允许公开领取" prop="is_public_receive">
                    <el-switch :disabled="!is_can_edit" v-model="form.is_public_receive" active-color="#13ce66" :active-value="1" :inactive-value="0"></el-switch>
                    <span style="color: #999; font-size: 14px;line-height:24px;margin-left: 4px;">开启后会在商详区域展示</span>
                </el-form-item>
                <el-form-item label="转赠设置" prop="is_giving">
                    <div>
                        <el-switch :disabled="!is_can_edit" @change="updateGiving" v-model="form.is_giving" active-color="#13ce66" :active-value="1" :inactive-value="0"></el-switch>
                        <span>优惠券允许转赠给好友</span>
                        <el-tooltip effect="dark" content="转赠的优惠券被领取后不扣减优惠券库存，只做所属权的转移" placement="top">
                            <i class="el-icon-question" style="font-size: 20px;color: #858585 ;"></i>
                        </el-tooltip>
                    </div>
                </el-form-item>
                <el-form-item label="领取人限制" prop="is_member">
                    <div>
                        <el-radio v-model="form.is_member" :label="0">不限制，所有人可领</el-radio>
                        <el-radio v-model="form.is_member" :label="1">指定会员等级可领取</el-radio>
                    </div>
                    <div v-if="form.is_member==1">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="member_check_all" @change="handleCheckAllChange">全选</el-checkbox>
                        <el-checkbox-group v-model="member_level_limits" @change="handleCheckedMemberChange">
                            <el-checkbox v-for="(item, key) in member_levels" :label="item.level" :key="key">{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>

                <div class="coupon-model-title">
                    奖励规则
                </div>
                <el-form-item label="奖励使用者" prop="is_consume_reward">
                    <div>
                        <el-switch :disabled="!is_can_edit" v-model="form.is_consume_reward" active-color="#13ce66" :active-value="1" :inactive-value="0"></el-switch>
                        <span style="color: #999; font-size: 14px;line-height:24px;margin-left: 4px;">会员使用优惠券获得奖励</span>
                    </div>
                    <div class="coupon-award" v-if="form.is_consume_reward==1">
                        <div>
                            <span>余额</span>
                            <el-input size="small" style="width: 30%;margin: 0 10px;" @input="numForm($event,'balance','double','consume_reward')" @blur="blurNumForm('consume_reward','balance')" v-model="consume_reward.balance" autocomplete="off">
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                        <div>
                            <span>积分</span>
                            <el-input size="small" style="width: 30%;margin: 0 10px;" @input="numForm($event,'score','double','consume_reward')" @blur="blurNumForm('consume_reward','score')" v-model="consume_reward.score" autocomplete="off">
                                <template slot="append">分</template>
                            </el-input>
                        </div>
<!--                        <div>-->
<!--                            <span>红包</span>-->
<!--                            <el-input size="small" style="width: 30%;margin: 0 10px;" @input="numForm($event,'red_packet','double','consume_reward')" @blur="blurNumForm('consume_reward','red_packet')" v-model="consume_reward.red_packet" autocomplete="off">-->
<!--                                <template slot="append">元</template>    -->
<!--                            </el-input>-->
<!--                        </div>-->
                    </div>
                </el-form-item>
                <el-form-item label="奖励转赠者" prop="is_giving_reward">
                    <div>
                        <el-switch :disabled="!is_can_edit || form.is_giving == 0" v-model="form.is_giving_reward" active-color="#13ce66" :active-value="1" :inactive-value="0"></el-switch>
                        <span style="color: #999; font-size: 14px;line-height:24px;margin-left: 4px;">会员使用优惠券转赠者获得奖励</span>
                    </div>
                    <div class="coupon-award"  v-if="form.is_giving_reward==1">
                        <div>
                            <span>余额</span>
                            <el-input size="small" style="width: 30%;margin: 0 10px;" @input="numForm($event,'balance','double','giving_reward')" @blur="blurNumForm('giving_reward','balance')" v-model="giving_reward.balance" autocomplete="off">
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                        <div>
                            <span>积分</span>
                            <el-input size="small" style="width: 30%;margin: 0 10px;" @input="numForm($event,'score','double','giving_reward')" @blur="blurNumForm('giving_reward','score')" v-model="giving_reward.score" autocomplete="off">
                                <template slot="append">分</template>
                            </el-input>
                        </div>
<!--                        <div>-->
<!--                            <span>红包</span>-->
<!--                            <el-input size="small" style="width: 30%;margin: 0 10px;" @input="numForm($event,'red_packet','double','giving_reward')" @blur="blurNumForm('giving_reward','red_packet')" v-model="giving_reward.red_packet" autocomplete="off">-->
<!--                                <template slot="append">元</template>-->
<!--                            </el-input>-->
<!--                        </div>-->
                    </div>
                </el-form-item>
            </div>
        </el-form>
        <!--指定商品分类-->
        <el-dialog title="已指定商品类别" :visible.sync="catsListVisible" width="35%">
            <el-tree style="margin-left:30px" :indent="40" :data="cats_list" show-checkbox default-expand-all :default-checked-keys="cat_id_list" node-key="id" ref="tree" highlight-current :props="defaultProps"></el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button plain type="submit" @click="catsListVisible = false">取消</el-button>
                <el-button plain type="primary" @click="catsAdd">确定</el-button>
            </div>
        </el-dialog>
        <!-- 添加商品弹窗 -->
        <el-dialog title="添加商品" :visible.sync="goodsAddVisible" append-to-body>
            <el-form>
                <el-form-item>
                    <el-input size="small" v-model="keyword" autocomplete="off" placeholder="商品名称"
                              style="width: 40%"></el-input>
                    <el-button size="small" :loading="btnLoading"
                               @click="search('store/client/coupon/search-goods','goods')">查找商品
                    </el-button>
                    <el-button size="small" style="float:right" @click="goodsBatchAdd">批量添加</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="goods_list" @selection-change="selsChange" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="goods_id" label="ID" width="80"></el-table-column>
                <el-table-column prop="cover_pic" label="商品图" width="180">
                    <template slot-scope="scope">
                        <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称">
                    <template slot-scope="scope">
                        <com-ellipsis :line="2">{{scope.row.goods_name}}</com-ellipsis>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="goods_id_list.indexOf(scope.row.goods_id) == -1" plain size="mini"
                                   type="primary" @click="goodsAdd(scope.$index, scope.row.goods_id)">添加
                        </el-button>
                        <el-button v-else plain size="mini" type="primary" disabled>已添加</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-pagination
                        v-if="pagination"
                        background
                        @current-change="pageChange"
                        layout="prev, pager, next"
                        :page-count="pageCount">
                </el-pagination>
            </div>
        </el-dialog>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            var check_min_price = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('最低消费金额不能为空'));
                }
                if (value <= 0) {
                    return callback(new Error('最低消费金额必须大于0'));
                }
                callback();
            };
            var check_sub_price = (rule, value, callback) => {
                if (this.form.type == 2) {
                    if (!value) {
                        return callback(new Error('优惠金额不能为空'));
                    }
                    if (value <= 0) {
                        return callback(new Error('优惠金额必须大于0'));
                    }
                    if (value >= this.form.min_price) {
                        return callback(new Error('优惠减免金额必须小于等于优惠券使用门槛金额'));
                    }
                    callback();
                } else {
                    callback();
                }
            };
            var check_discount = (rule, value, callback) => {
                if (this.form.type == 1) {
                    let foldMinPrice = Number(this.$refs.fold_min_price.value);
                    let isDiscountLimit = Number(this.$refs.is_discount_limit.value);
                    let foldDiscountLimit = Number(this.$refs.fold_discount_limit.value);
                    if(!foldMinPrice || foldMinPrice <= 0){
                        return callback(new Error('请输入消费金额活或消费金额不能小于等于0'));
                    }
                    if (!value) {
                        return callback(new Error('请输入优惠折扣'));
                    }
                    if (value < 1 || value > 9.9) {
                        return callback(new Error('折扣券：优惠券折扣必须大于等于1, 且最大不能超过9.9优惠券折扣最多支持一位小数'));
                    }
                    if(isDiscountLimit == 1 && (!foldDiscountLimit || foldDiscountLimit <= 0)){
                        return callback(new Error('请输入最多优惠金额活最多优惠不能小于等于0'));
                    }
                    callback();
                } else {
                    let minPrice = Number(this.$refs.min_price.value);
                    let subPrice = Number(this.$refs.sub_price.value);
                    console.info(minPrice,subPrice,Boolean(minPrice));
                    if(!minPrice || minPrice <= 0){
                        return callback(new Error('请输入消费金额或消费金额不能小于等于0'));
                    }

                    if(!subPrice || subPrice <= 0){
                        return callback(new Error('请输入满减金额或满减金额不能小于等于0'));
                    }

                    if(subPrice > minPrice){
                        return callback(new Error('满减金额不能大于消费金额'));
                    }
                    callback();
                }
            };
            var check_discount_limit = (rule, value, callback) => {
                if (this.form.type == 1) {
                    if (this.is_discount_limit && !this.form.discount_limit) {
                        return callback(new Error('请填写优惠限额'));
                    }
                    callback();
                } else {
                    callback();
                }
            };
            var check_expire_type = (rule, value, callback) => {

                if (this.form.expire_type == 1) {
                    if(!this.form.expire_day){
                        return callback(new Error('请填写有效天数'));
                    } else if(Number(this.form.expire_day) < 1){
                        return callback(new Error('领券后立即生效，有效天数不能小于1'));
                    }
                    callback();
                } else if (this.form.expire_type == 2 && !this.expire_time.length) {
                    return callback(new Error('请选择有效期起止时间'));
                } else if (this.form.expire_type == 3) {
                    if (!this.form.effect_days) {
                        return callback(new Error('请填写生效的延后天数'));
                    }
                    if (!this.form.effect_expire_days) {
                        return callback(new Error('请填写有效天数'));
                    } else if(Number(this.form.effect_expire_days) < 1){
                        return callback(new Error('领券后立即生效，有效天数不能小于1'));
                    }
                    callback();
                } else {
                    callback();
                }
            };
            var check_appoint_type = (rule, value, callback) => {
                if (this.form.appoint_type == 2 && !this.goods_id_list) {
                    return callback(new Error('请选择指定商品'));
                } else if (this.form.appoint_type == 1 && !this.cat_id_list.length) {
                    return callback(new Error('请选择指定的商品分类'));
                } else if (this.form.appoint_type == 4 && !this.form.store_id) {
                    return callback(new Error('请选择指定的门店'));
                } else {
                    callback();
                }
            };
            var check_is_member = (rule, value, callback) => {
                if (this.form.is_member == 1 && !this.member_level_limits.length) {
                    return callback(new Error('请选择会员等级'));
                } else {
                    callback();
                }
            };
            var total_count_t = (rule, value, callback) => {
                if(value <= 0){
                    return callback(new Error('发放总数不能小于1'));
                }
                callback();
            };
            var remind_days = (rule, value, callback) => {
                if(this.form.is_remind == 1 && value <= 0){
                    return callback(new Error('过期前提醒天数不能小于 0'));
                }
                callback();
            };
            return {
                goods_status: -1,
                //添加商品
                pagination: null,
                pageCount: 1,
                currPage: 1,
                goodsListVisible: false,
                goodsAddVisible: false,
                goodsBatchList: [],
                //添加分类
                catsListVisible: false,
                defaultProps: {
                    children: 'child',
                    label: 'name'
                },

                activeName: 'first',
                form: {
                    store_id: 0,
                    name: '',
                    type: 2,
                    discount: '',
                    discount_limit: '',
                    min_price: '',
                    sub_price: '',
                    total_count: 9999,
                    sort: 99,
                    expire_type: 1,
                    expire_day: 30,
                    effect_expire_days: 30,
                    begin_at: 0,
                    end_at: 0,
                    appoint_type: 3,
                    rule: '',
                    is_remind: 0,
                    remind_days: 3,
                    effect_days: 3,
                    is_receive_limit: 1,
                    receive_count: 1,
                    is_member: 0,
                    is_original_use: 0,
                    is_public_receive: 1,
                    is_giving: 0,
                    is_giving_reward: 0,
                    is_consume_reward: 0,
                    is_open_screen: 0,
                    goods_id_list: [],
                },
                btnLoading: false,
                submitLoading: false,
                loading: false,
                cats_list: [],
                goods_list: [],
                cat: [],
                keyword: null,
                time: [],
                goods: [],
                cat_id: null,
                goods_id: null,
                cat_id_list: [
                    // [21, 69],
                    // [21, 70],
                    // [21, 228, 229]
                ],      // 已经选中的商品分类
                checkAll: false,
                couponMember: [],
                membersList: [],
                isIndeterminate: false,
                FormRules: {
                    name: [{ required: true, message: '优惠券名称不能为空', trigger: 'blur' }],
                    type: [{ required: true, message: '请选择优惠券类型', trigger: 'blur' }],
                    // total_count:[{required: true, message: '请填写优惠券数量', trigger: 'blur'}],
                    // min_price: [{ required: true, message: '最低消费金额不能为空', trigger: 'blur' }],
                    min_price: [{ validator: check_min_price, trigger: 'blur' }, ],
                    sub_price: [{ validator: check_sub_price, trigger: 'blur' }, ],
                    discount: [{required: true,validator: check_discount, trigger: 'blur' },],
                    discount_limit: [{required: true,validator: check_discount_limit, trigger: 'blur' }],
                    expire_type: [{ required: true, message: '请选择优惠券生效方式', trigger: 'blur'}, {validator: check_expire_type, trigger: 'blur' }],
                    // expire_day: [{ required: true, message: '优惠券有效天数不能为空', trigger: 'blur' }],
                    appoint_type: [{ required: true, message: '请选择优惠券使用场景', trigger: 'blur'}, {validator: check_appoint_type, trigger: 'blur' }],
                    total_count: [{ required: true, message: '发放总数不能为空', trigger: 'blur' },{ validator: total_count_t, trigger: 'blur' }],
                    receive_count: [{ required: true, message: '请填写每人可领取的数量', trigger: 'blur' }],
                    sort: [{ required: true, pattern: /^[0-9]\d{0,8}$/, message: '排序必须在9位整数内' }],
                    remind_days: [{validator: remind_days, trigger: 'blur' }],
                },
                receive: [],
                isScanCodePayShow: false,
                activeNames: true,

                is_discount_limit: 0,  // 是否限制折扣上限
                member_level_limits: [],  // 限制领取的等级
                member_levels: [],      // 全部的会员等级
                member_check_all: false,    // 会员全选
                goods_id_list: [],  // 已选中的商品 id
                selected_goods: [],     // 已经选中的商品信息
                expire_time: [],    // 有效期起止时间
                giving_reward: {    // 转赠奖励
                    balance: 0, score: 0, red_packet: 0
                },
                consume_reward: {   // 使用奖励
                    balance: 0, score: 0, red_packet: 0
                },
                expire_day: 1,     // 有效期天数
                is_can_change_time: false,   // 是否可以更改时间
                is_can_edit: true,     // 整个页面是否可以编辑
                coupon_id: 0,   // 优惠券id
                coupon_name: '',    // 暂存自动生成的优惠券名称

                storeList: [],         // 门店列表
                selectedStores: [],     // 已选中门店
                storeAddVisible: false,
            };
        },
        methods: {
            enter(index) {
                this.goods_status = index;
            },
            leave() {
                this.goods_status = -1;
            },
            catDestroy(index) {
                this.cat_id_list.splice(index, 1);
                this.form.cat.splice(index, 1);
            },

            handleCheckAllChange(value) {
                if (value) {
                    let checked_levels = [];
                    let number = this.member_levels.length;
                    for (let i = 0; i < number; i++) {
                        checked_levels.push(this.member_levels[i].level);
                    }
                    this.member_level_limits = checked_levels;
                } else {
                    this.member_level_limits = [];
                }
                this.isIndeterminate = false;
            },
            handleCheckedMemberChange(value) {
                let checkedCount = value.length;
                this.member_check_all = checkedCount === this.member_levels.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.member_levels.length;
            },
            //分页
            pageChange(page) {
                this.currPage = page;
                this.search('coupon/coupon/search-goods', 'goods', page);
            },
            storePageChange(page) {
                this.currPage = page;
            },

            catsAdd() {
                let cat_id_list = this.$refs.tree.getCheckedKeys();
                this.cat_id_list = cat_id_list;
                let array = [];
                this.cats.map(v => {
                    if (cat_id_list.indexOf(v.id) != -1) {
                        array.push(v);
                    }
                    v.child.map(v1 => {
                        if (cat_id_list.indexOf(v1.id) != -1) {
                            array.push(v1);
                        }
                        v1.child.map(v2 => {
                            if (cat_id_list.indexOf(v2.id) != -1) {
                                array.push(v2);
                            }
                        })
                    })
                })
                this.form.cat = array;
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });

                this.catsListVisible = false;
            },
            //指定商品
            goodsDestroy(index) {
                this.goods_id_list.splice(index, 1);
                this.selected_goods.splice(index, 1);
            },
            selsChange(row) {
                this.goodsBatchList = row;
            },
            goodsBatchAdd() {
                this.goodsBatchList.forEach(goods => {
                    this.setGoods(goods);
                })
                this.goodsAddVisible = false;
            },
            goodsAdd(index, row) {
                let goods = this.goods_list[index];
                this.setGoods(goods);
                this.goodsAddVisible = false;
            },
            storeAdd(index, row) {
                let store = this.storeList[index];
                this.form.store_id = store.id;
                this.selectedStores = [];
                this.selectedStores.push(store);
                this.storeAddVisible = false;
            },
            storeDestroy(index) {
                this.form.store_id = 0;
                this.selectedStores = [];
            },

            setGoods(goods) {
                let sentinel = true;
                this.selected_goods.forEach(v => {
                    if (v.id == goods.goods_id) {
                        sentinel = false;
                    }
                })
                if (sentinel) {
                    this.selected_goods.push(goods);
                    this.goods_id_list.push(goods.goods_id);
                    // this.$message({
                    //     message: '添加成功',
                    //     type: 'success'
                    // });
                    // this.goodsAddVisible = false;
                }
            },
            //分类
            catsDestroy(index, row) {
                this.form.cat.splice(index, 1);
            },
            // 返回上一页
            Cancel() {
                window.history.go(-1)
            },

            // 点击获取商品分类列表或者商品列表
            search(url, attr, page = 1) {
                this.btnLoading = true;
                request({
                    params: {
                        r: url,
                        keyword: this.keyword,
                        page: this.currPage,
                        limit: 7,
                    },
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code == 0) {
                        if (attr == 'cats') {
                            this.cats_list = e.data.data.list;
                        } else if (attr == 'goods') {
                            this.goods_list = e.data.data.list;
                            this.pagination = e.data.data.pagination;
                            this.pageCount = e.data.data.page_count;
                        }
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },
            // 提交数据
            onSubmit() {
                let self = this;
                if (self.form.is_giving) {
                    self.form.is_giving = 1;
                } else {
                    self.form.is_giving = 0;
                }
                if (self.form.is_original_use) {
                    self.form.is_original_use = 1;
                } else {
                    self.form.is_original_use = 0;
                }
                if (self.form.is_remind) {
                    self.form.is_remind = 1;
                } else {
                    self.form.is_remind = 0;
                    self.form.remind_days = 0;
                }
                if (!self.form.discount) {
                    self.form.discount = 0;
                }
                if (!self.form.discount_limit || self.form.discount_limit < 0) {
                    self.form.discount_limit = 0;
                }
                if (!self.form.min_price) {
                    self.form.min_price = 0;
                }
                if (!self.form.sub_price) {
                    self.form.sub_price = 0;
                }
                if (self.form.is_remind == 1 && self.form.remind_days <= 0) {
                    self.$message.error('过期前提醒天数不能小于 0');
                    return false;
                }
                if (getQuery('is_copy')) {
                    self.form.id = 0;
                }

                if(self.form.expire_type == 3){
                    self.form.expire_day = self.form.effect_expire_days;
                }

                self.$refs.form.validate((valid, obj) => {
                    if (valid) {
                        self.submitLoading = true;
                        request({
                            params: {
                                r: 'store/client/coupon/edit',
                            },
                            data: {
                                coupon_info: self.form,
                                member_level_limits: self.member_level_limits,
                                goods_id_list: self.goods_id_list,
                                giving_reward: self.giving_reward,
                                consume_reward: self.consume_reward,
                                category_ids: self.cat_id_list,
                            },
                            method: 'post'
                        }).then(e => {
                            self.submitLoading = false;
                            if (e.data.code === 0) {
                                self.$message({
                                    message: e.data.msg,
                                    type: 'success'
                                });
                                setTimeout(function() {
                                    navigateTo({ r: 'store/client/coupon/index' });
                                }, 500);

                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.submitLoading = false;
                            console.log(e);
                            self.$message.error(e.data.msg)
                        });
                    } else {
                        console.log('validate result: ', obj);
                        self.loading = false;
                    }
                });
            },
            delCoupon(id){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    let para = {
                        id: id
                    };
                    request({
                        params: {
                            r: 'store/client/coupon/del'
                        },
                        data: para,
                        method: 'post'
                    }).then(e => {
                        this.loading = false;
                        if (e.data.code === 0) {
                            const h = this.$createElement;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            setTimeout(() => {
                                navigateTo({ r: 'store/client/coupon/index'});
                            }, 300);
                        } else {
                            this.$alert(e.data.msg, '提示', {
                                confirmButtonText: '确定'
                            })
                        }
                    }).catch(e => {
                        this.$alert(e.data.msg, '提示', {
                            confirmButtonText: '确定'
                        })
                    });
                })
            },


            //获取列表
            getList() {
                this.loading = true;
                let self = this;
                request({
                    params: {
                        r: 'store/client/coupon/edit',
                        coupon_id: this.coupon_id,
                    },
                }).then(e => {
                    console.log(e);
                    self.loading = false;
                    if (e.data.code == 0) {
                        if (this.coupon_id) {
                            self.form = e.data.data.coupon_info;
                            if (self.form.expire_type == 2) {
                                self.expire_time.push(self.form.begin_at*1000);
                                self.expire_time.push(self.form.end_at*1000);
                            } else if (self.form.expire_type == 3) {
                                self.form.effect_expire_days = self.form.expire_day;
                            }

                            if (e.data.data.coupon_info.type == 1 && e.data.data.coupon_info.discount_limit) {
                                self.is_discount_limit = 1;
                            }
                            if (e.data.data.member_level_limits) {
                                self.member_level_limits = e.data.data.member_level_limits;
                            }
                            if (e.data.data.good_lists) {
                                self.selected_goods = e.data.data.good_lists;
                            }
                            if (e.data.data.giving_rewards) {
                                self.giving_reward = e.data.data.giving_rewards;
                            }
                            if (e.data.data.consume_rewards) {
                                self.consume_reward = e.data.data.consume_rewards;
                            }
                            e.data.data.checked_categorys.forEach(v => {
                                self.cat_id_list.push(v[0])
                            })
                            if (e.data.data.goods_id_list) {
                                this.goods_id_list = e.data.data.goods_id_list;
                            }
                        }
                        self.member_levels = e.data.data.member_levels;
                        self.cats_list = e.data.data.good_category;
                    } else {
                        self.$message.error(e.data.msg);
                    }

                    if (self.status == 3 || self.status == 4) {
                        // 锁定整个页面，不可修改
                        self.is_can_edit = false;
                        self.$nextTick(() => {
                            let domArr = document.getElementsByTagName('input');
                            let domTextarea = document.getElementsByTagName('textarea');
                            let conponType = document.getElementsByClassName('coupon-type');
                            for(let i = 0; i < domArr.length;i++){
                                domArr[i].setAttribute("disabled",true);
                                domArr[i].parentNode.classList.add("is-disabled");
                            }
                            for(let i = 0; i < domTextarea.length;i++){
                                domTextarea[i].setAttribute("disabled",true);
                                domTextarea[i].parentNode.classList.add("is-disabled");
                            }
                            for (let i = 0; i < conponType.length; i++) {
                                conponType[i].setAttribute('style', 'cursor:not-allowed');

                            }

                        })
                    }
                }).catch(e => {
                    console.log(e);
                    this.$message.error('网络错误');
                });
            },

            // 选中时间处理方法
            select_expire_time(date) {
                console.log(date,"dateUUUU");
                this.form.begin_at = parseInt(date[0] / 1000);
                this.form.end_at = parseInt(date[1] / 1000);
            },
            // 优惠限额选中/取消处理方法
            discount_limit_change(val) {
                if (!val) {
                    this.form.discount_limit = 0;
                }
                this.handleDiscountLimit(this.form.discount_limit);
            },
            // 选中优惠券类型
            selectType(type) {
                if (this.is_can_edit) {
                    let name = '';
                    this.form.type = type;
                    this.form.name = '';
                    if (!this.form.min_price) {
                        this.form.min_price = '';
                    } else {
                        name += '消费满' + this.form.min_price + '元';
                    }
                    if (!this.form.sub_price) {
                        this.form.sub_price = '';
                    } else {
                        if (this.form.type == 2) name += '优惠' + this.form.sub_price + '元';
                    }
                    if (!this.form.discount) {
                        this.form.discount = '';
                    } else {
                        if (this.form.type == 1) name += '打' + this.form.discount + '折';
                    }
                    if (!this.form.discount_limit) {
                        this.form.discount_limit = '';
                    } else {
                        if (this.form.is_discount_limit && this.form.type == 1) {
                            name += '最多优惠' + this.form.discount_limit + '元';
                        }
                    }
                    this.form.name = name;
                    this.is_discount_limit = false;
                }
            },
            // 最低消费金额值改变
            handleMinPrice(val) {
                if (!val) {
                    return ;
                }
                let coupon_name = '';
                coupon_name = '消费满' + val + '元';
                if (this.form.type == 1) {
                    // 折扣券
                    if (this.form.discount) {
                        coupon_name += '打' . this.form.discount + '折'
                    }
                } else {
                    // 满减券
                    if (this.form.sub_price) {
                        coupon_name += '减' + this.form.sub_price + '元';
                    }
                }
                this.form.name = coupon_name;
            },
            // 满减券减免金额 / 折扣券折扣
            handleSubPrice(val) {
                let min_price = this.form.min_price;
                let coupon_name = '消费满' + min_price + '元';
                if (this.form.type == 1) {
                    // 折扣券
                    if (this.form.discount) {
                        coupon_name += '打' + this.form.discount + '折';
                    }
                } else {
                    // 满减券
                    if (min_price) {
                        coupon_name += '减' + this.form.sub_price + '元';
                    }
                }
                this.form.name = coupon_name;
            },
            // 最高优惠金额
            handleDiscountLimit(val) {
                let coupon_name = '';
                if (this.form.type == 1 && this.form.min_price && this.form.discount) {
                    coupon_name = '消费满' + this.form.min_price + '元打 ' + this.form.discount + '折';
                    // 折扣券
                    if (this.is_discount_limit && val) {
                        coupon_name += ', 最高优惠' + val + '元';
                    }
                    this.form.name = coupon_name;
                }
            },
             // 数值类型不让输入小于0
             numForm(val,key,type = 'int',valueKey){
                console.info(val,type)
                let reg = /^[0-9]*$/;
                let point = val.indexOf(".");
                let regT = /[0-9]+|\./;
                let tIndex = -1;
                for(let j = 0;j < val.length; j++){
                    if(!regT.test(val[j])){
                        tIndex = j;
                        break;
                    }
                }
                if(tIndex != -1){
                    val = val.substr(0,tIndex);
                }

                if(val < 0){
                    val = 0;
                }else if(!reg.test(val) && type == 'int'){
                    val = val.substr(0,point);
                } else if(type == 'double'){
                    let doubleReg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                    let pointIndex = val.lastIndexOf(".");
                    if(pointIndex != -1 && point != pointIndex){
                        val = val.substr(0,pointIndex)
                    }

                    if(pointIndex != -1 && !doubleReg.test(val) && pointIndex != val.length){
                        val = val.substr(0,point + 3);
                    }

                }

                //
                if(valueKey){
                    this[valueKey][key] = val;
                }else{
                    this.form[key] = val;
                }

            },
            blurNumForm(valueKey,key){
                let val = this[valueKey][key];
                if(!val){
                    this[valueKey][key] = 0;
                }
            },
            //
            updateGiving(val){
                if(val == 0 && this.form.is_giving_reward == 1){
                    this.form.is_giving_reward = 0;
                }
            },
            // 商品视频
            videoUrl(e) {
                if (e.length) {
                    this.form.video_url = e[0].url;
                }
                this.$forceUpdate();
            },
        },

        mounted: function() {
            this.coupon_id = getQuery('coupon_id');
            let is_copy = getQuery('is_copy');
            if (this.coupon_id && !is_copy) {
                this.is_can_change_time = true;
            }
            this.status = getQuery('status');
            if (this.status == 3 || this.status == 4) {
                this.is_can_edit = false;
            }

            this.search('store/client/coupon/search-goods', 'goods');
            this.getList();
        },
    })
</script>