qimall/backend/modules/mall/views/upgrade-condition/tpl/tpl.php

<div class="form-body">
    <template>
        <div style="margin-left: 10px;display:none" >
            <com-dialog-select :multiple="true" @selected="conditionGoodsSelect" title="商品选择">
                <el-button type="text" ref="cgoods">选择商品</el-button>
            </com-dialog-select>
        </div>
    </template>
    <template>
        <div style="margin-left: 10px;display:none" >
            <com-dialog-select :multiple="true" @selected="conditionCloudStockGoodsSelect" url="cloud-stock/goods/get-cloud-stock-goods-list" title="商品选择">
                <el-button type="text" ref="csgoods">选择商品</el-button>
            </com-dialog-select>
        </div>
    </template>
    <template>
        <div style="margin-left: 10px;display:none" >
            <com-dialog-select :multiple="true" @selected="conditionCloudStockGoodsSelectByNums" url="cloud-stock/goods/get-cloud-stock-goods-list" title="商品选择">
                <el-button type="text" ref="csgoodscondition">选择商品</el-button>
            </com-dialog-select>
        </div>
    </template>
    <el-dialog
            :close-on-click-modal="false"
            title="选择商品类目"
            :visible.sync="goodsCatsDialogVisible"
            width="50%">
        <el-cascader-panel v-model="currentGoodsCats" @change="onChangGoodsCat" :show-all-levels="false"
             :options="cat_list" :props="{ multiple: true, checkStrictly: true }"></el-cascader-panel>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="goodsCatsDialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

    <template v-if="<?php  echo $is_buy_goods;?>">
        <el-form-item label="购买商品升级" :label-width="formLabelWidth">
            <?php
//            if($rule['remark']){
//                $html_s='<el-tooltip class="item" effect="dark" content="'.$rule['remark'].'" placement="top">
//                          <i class="el-icon-info"></i>
//                         </el-tooltip>';
//                echo $html_s;
//            }
            ?>
            <el-form-item>
                <el-switch v-model="ruleForm.upgrade_type_goods" :active-value="1" :inactive-value="0"
                           active-text="开启" inactive-text="关闭">
                </el-switch>
            </el-form-item>

            <el-form-item v-if="ruleForm.upgrade_type_goods==1">
                <el-radio-group v-model="ruleForm.buy_goods_type">
                    <el-radio :label="0">订单完成</el-radio>
                    <el-radio :label="1">支付完成</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item v-if="ruleForm.upgrade_type_goods==1" style="margin-bottom: 0px;">
                <el-radio-group v-model="ruleForm.goods_type">
                    <el-radio :label="1">任意商品</el-radio>
                    <el-radio :label="2">指定商品</el-radio>
                </el-radio-group>

                <div style="margin-top: 10px; display: flex;" v-if="ruleForm.goods_type==2">
                    <com-dialog-select :multiple="true" @selected="goodsSelect" title="商品选择">
                        <el-button type="primary" plain>选择商品</el-button>
                    </com-dialog-select>
                    <div style="color: #ff4544; margin-left: 10px;">最多可添加99个商品</div>
                </div>
            </el-form-item>
        </el-form-item>
        <template v-if="<?php echo $enable_goods_protocol; ?>">
            <el-form-item label="商品协议开关" :label-width="formLabelWidth" v-if="ruleForm.upgrade_type_goods > 0">
                <el-switch v-model="ruleForm.enable_goods_protocol" :active-value="1" :inactive-value="0"
                           active-text="开启" inactive-text="关闭">
                </el-switch>
                <p style="color: #C0C4CC;">开关开启以后设置的商品第一次购买的需要弹出勾选协议（只针对默认等级用户）</p>
            </el-form-item>
        </template>
        <el-form-item v-if="ruleForm.upgrade_type_goods==1"
                      :label-width="formLabelWidth">
            <template v-if="ruleForm.goods_type==2">
                <div class="table-body" style="padding-left: 0;padding-top: 0;" :style="is_show_condition_num ? {width: '700px'} : {width: '600px'}">
                    <template>
                        <el-table :data="ruleForm.goods_list" border style="width: 100%">
                            <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
                            <el-table-column prop="id" align="center" label="商品id"  width="100"></el-table-column>
                            <el-table-column prop="name,cover_pic" label="商品名称">
                                <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 style="display:flex;flex-direction:column;align-items:flex-start;">
                                            <div>{{scope.row.name}}</div>
                                            <div>
                                                <span style="color: #ff4544;" v-if="scope.row.price">￥{{ scope.row.price }}</span>
                                                <span style="margin-left: 20px;" v-if="scope.row.stock">库存：{{ scope.row.stock }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="商品件数" width="200" v-if="is_show_condition_num">
                                <template #header>
                                    <div style="display: flex; align-items: center; justify-content: center;">
                                        <span>商品件数</span>
                                        <el-tooltip class="item" effect="dark" content="开启之后计算以往所有商品购买件数" placement="top">
                                            <i class="el-icon-info" style="margin-right: 5px; margin-bottom: 5px;"></i>
                                        </el-tooltip>
                                        <el-switch v-model="ruleForm.is_custom_condition_num" :active-value="1" :inactive-value="0">
                                        </el-switch>
                                    </div>
                                </template>
                                <template slot-scope="scope">
                                    <el-input-number :disabled="!Number(ruleForm.is_custom_condition_num)" v-model="scope.row.condition_num" :precision="0" size="mini" :min="1"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button @click="deleteGoods(scope.$index)" type="primary" size="mini">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </template>
                </div>

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


    </template>
    <template  v-if="<?php  echo $is_buy_store_goods ?? 0;?>">
        <el-form-item label="购买门店商品升级" :label-width="formLabelWidth">
            <el-form-item>
                <el-switch v-model="ruleForm.store_upgrade_type_goods" :active-value="1" :inactive-value="0"
                           active-text="开启" inactive-text="关闭">
                </el-switch>
            </el-form-item>

            <el-form-item v-if="ruleForm.store_upgrade_type_goods==1">
                <el-radio-group v-model="ruleForm.store_buy_goods_type">
                    <el-radio :label="0">订单完成</el-radio>
                    <el-radio :label="1">支付完成</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item v-if="ruleForm.store_upgrade_type_goods==1">
                <el-radio-group v-model="ruleForm.store_goods_type">
                    <el-radio :label="1">任意商品</el-radio>
                    <el-radio :label="2">指定商品</el-radio>
                </el-radio-group>
                <div style="margin-top: 10px; display: flex;" v-if="ruleForm.store_goods_type==2">
                    <com-dialog-select-store :multiple="true" @selected="storeGoodsSelect" title="商品选择">
                        <el-button type="primary" plain>选择商品</el-button>
                    </com-dialog-select-store>
                    <div style="color: #ff4544; margin-left: 10px;">最多可添加<?php  echo $buy_store_goods_limit;?>个商品</div>
                </div>
            </el-form-item>

        </el-form-item>
        <el-form-item v-if="ruleForm.store_upgrade_type_goods==1"
                      :label-width="formLabelWidth">
            <template v-if="ruleForm.store_goods_type==2">
                <div class="table-body" style="padding-left: 0;padding-top: 0;">
                    <template>
                        <el-table :data="ruleForm.store_goods_list" border style="width: 100%">
                            <el-table-column type="index" label="序号" width="50"></el-table-column>
                            <el-table-column prop="id" label="商品id"  width="100"></el-table-column>
                            <el-table-column prop="name,cover_pic" label="商品名称" >
                                <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 flex="cross:top cross:center">
                                            {{scope.row.name}}
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button @click="deleteStoreGoods(scope.$index)" type="primary" size="mini">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </template>
                </div>

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

    <!--    <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px">-->
    <el-row  v-if="<?php  echo $is_show_condition;?>">
        <el-col :span="32">
            <el-form-item label="条件升级">
                <el-form-item>
                    <el-switch v-model="ruleForm.upgrade_type_condition" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭">
                    </el-switch>
                    <el-button v-if="ruleForm.upgrade_type_condition==1" style="margin-left: 20px;" type="primary" @click="setCondition" size="mini">添加升级条件</el-button>
                </el-form-item>

                <el-form-item v-if="ruleForm.upgrade_type_condition==1">
                    <el-radio-group v-model="ruleForm.condition_type">
                        <el-radio :label="1">满足其一可升级</el-radio>
                        <el-radio :label="2">满足所有才可升级</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-checkbox-group v-if="ruleForm.upgrade_type_condition==1" v-model="ruleForm.checked_condition_keys" class="check-group">
                    <?php
                    foreach ($rules as $k=>$rule) {
                        if ($rule['id'] == 56) { // 因为56规则内容有html标签。会何setting 中多选出现重复，所以需要过滤掉
                            $rule['content'] = preg_replace('/<[^>]*>.*?<\/[^>]*>/', '', $rule['content']);
                        }
                        $html = '
                            <el-col :span="24">
                                <el-checkbox :label="ruleForm.checked_condition_values['.$k. '].key">
                                <div style="display: flex;align-items: center">';
                        $content_arr = explode('____', $rule['content']);
                      
                        foreach ($content_arr as $key => $content) {
                            $html .= str_replace('display:none;', '', $content);
                            if(!isset($rule['setting'][$key])) continue;
                            $setting = $rule['setting'][$key];
                            switch ($setting['type']) {
                                case 'text':
                                    $html .= ' &nbsp;<el-input style="width:100px;" v-model="ruleForm.checked_condition_values['.$k.'].value.' . $setting['name'] . '"></el-input>&nbsp;';
                                    break;
                                case 'select':
                                    $html.='&nbsp; <el-select v-model="ruleForm.checked_condition_values['.$k.'].value.'. $setting['name'] . '" placeholder="请选择">&nbsp; ';
                                    $html.='<el-option v-for="item in options_list.'.$setting['source']['key'].'" :key="item.level" :label="item.name" :value="item.level" :disabled="false">
                                                    </el-option>';
                                    $html .= ' </el-select>';
                                    $html .= '<span style="display:inline-block;padding-right:16px;"></span>';
                                    break;
                                case 'selectGoods':
                                    $html.=' &nbsp;<el-input style="width:100px;" v-model="ruleForm.checked_condition_values['.$k.'].value.' . $setting['name'] . '"></el-input>&nbsp;';
                                    $html .='&nbsp; <el-button type="text" @click="clickSelectConditionGoods()">选择商品</el-button>';
                                    break;

                                case 'selectGoodsCats':
                                    $html .='&nbsp; <el-button type="text" @click="clickSelectConditionGoodsCats(ruleForm.checked_condition_values['.$k.'].value.' . $setting['name'] . ', \''.$setting['name'].'\', '.$k.')">选择类目</el-button>';
                                    break;

                                case 'selectCloudStockGoods':
                                    $html.=' &nbsp;<el-input style="width:100px;" v-model="ruleForm.checked_condition_values['.$k.'].value.' . $setting['name'] . '"></el-input>&nbsp;';
                                    $html .='&nbsp; <el-button type="text" @click="clickSelectCloudStockConditionGoods()">选择商品</el-button>';
                                    break;
                                case 'selectCloudStockGoodsCondition':
                                    $html .='&nbsp; <el-button type="text" @click="clickSelectCloudStockConditionGoodsByNums()">选择商品</el-button>';
                                    $html .= '&nbsp;&nbsp;&nbsp;<div style="max-height: 300px;overflow-y: auto;max-width: 514px;" v-if="ruleForm.checked_condition_values['.$k.'].value.' . $setting['name'] . '">
                                            <el-table ref="goodsInfos" :data="ruleForm.checked_condition_values['.$k.'].value.' . $setting['name'] . '" style="width: 100%">
                                                <el-table-column
                                                    label="商品"
                                                    width="200">
                                                    <template slot-scope="scope">
                                                        <div style="display: flex;align-items: center;">
                                                            <el-image style="height:40px;width:40px;min-height:40px;min-width:40px;margin-right:10px;" :src="scope.row.cover_pic"></el-image>
                                                            <div>
                                                                <div style="color: #000;">{{scope.row.name}}</div>
                                                            </div>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    label="数量"
                                                    width="120">
                                                    <template slot-scope="scope">
                                                        <el-input v-model.number="scope.row.num" style="width: 110px;">
                                                            <template slot="append">件</template>
                                                        </el-input>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    fixed="right"
                                                    label="操作"
                                                    width="120">
                                                    <template slot-scope="scope">
                                                        <el-button
                                                        @click.native.prevent="deleteGoodsThree(scope.$index)"
                                                        type="text"
                                                        size="small">
                                                        删除
                                                        </el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>';
                                    break;
                                case 'checkbox':
                                    $html .= '<span style="display:inline-block;padding-left:16px;"></span>';
                                    $html.='<el-checkbox-group style="margin-top:4px;" v-model="ruleForm.checked_condition_values['.$k.'].value.'. $setting['name'] . '">';
                                    $html .='<el-checkbox style="display:inline-block;" v-for="item in checkbox_list.'.$setting['source']['key'].'" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>';
                                    $html .= '</el-checkbox-group>';
                                    $html .= '<span style="display:inline-block;padding-left:16px;"></span>';
                                    break;
                                case 'radio':
                                    $html .= '<span style="display:inline-block;padding-left:16px;"></span>';
                                    $html.='<el-radio-group style="margin-top:4px;" v-model="ruleForm.checked_condition_values['.$k.'].value.'. $setting['name'] . '">';
                                    $html .='<el-radio style="display:inline-block;" v-for="item in options_list.'.$setting['source']['key'].'" :label="item.key">{{item.value}}</el-radio>';
                                    $html .= '</el-radio-group>';
                                    $html .= '<span style="display:inline-block;padding-left:16px;"></span>';
                                    break;
                                default:
                                    break;
                            }
                        }
                        if($rule['remark']){
                            $html.='<el-tooltip class="item" effect="dark" content="'.$rule['remark'].'" placement="top">
                                           <i class="el-icon-info"></i>
                                        </el-tooltip>';
                        }
                        $html .= '
                            </div>
                            </el-checkbox>
                        </el-col>
                            ';
                        echo $html;
                    }
                    ?>
                </el-checkbox-group>
            </el-form-item>
        </el-col>
    </el-row>
    <!--    </el-form>-->
</div>