qimall/addons/CloudStock/backend/views/components/price-difference-gift-package-edit.php

<?php
use common\helpers\ComponentHelper;
$diyPath = dirname(__DIR__) . '/components';
ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('free-goods-choice', $diyPath);
?>

<template id="price-difference-gift-package-edit">
    <el-dialog :visible.sync="edit.show" width="70%" :title="edit_row.title" center>
        <div>
            <el-form @submit.native.prevent size="small" label-width="100px" v-loading='loading'>
                <el-form-item label="升级等级" required>
                    <el-select v-model="ruleForm.level" placeholder="请选择升级等级" @change="levelChange">
                        <el-option
                                v-for="item in level_list"
                                :key="item.level"
                                :label="item.name"
                                :value="item.level"
                                :disabled="item.status == 1?false:true"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="礼包名称" required>
                    <el-input v-model="ruleForm.name" style="width: 210px" placeholder="请输入礼包名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="礼包主图：" prop="pic_type" required>
                    <div class="flex-y-center" style="margin-bottom: 10px;">
                        <el-radio style="margin-right: 0" v-model="ruleForm.pic_type" :label="0"
                                  @change="backgroundTypeChange"><span></span></el-radio>
                        <div>默认：</div>
                    </div>
                    <div class="flex-y-center flex-y-top">
                        <el-radio style="margin-right: 0" v-model="ruleForm.pic_type" :label="1"
                                  @change="backgroundTypeChange"><span></span></el-radio>
                        <div style="line-height: 16px; margin-right: 20px">自定义：</div>
                        <div v-if="ruleForm.pic_type==1">
                            <com-attachment v-if="!ruleForm.pic" :multiple="false" :max="1" type="images"
                                            @selected="coverPic">
                                <div class="card-upload">
                                    <i class="el-icon-plus"></i>
                                </div>
                            </com-attachment>
                            <div class="card-coverimg" v-else>
                                <el-image style="width: 80px; height: 80px" :src="ruleForm.pic"></el-image>
                                <el-button @click="delPic" class="icon-close" type="primary" size="mini"
                                           icon="el-icon-close" circle></el-button>
                            </div>
                            <p class="tips-text">尺寸：84*84像素，小于1M，支持jpg、png、jpeg格式</p>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="礼包商品" required>
                    <div style="display: inline-block;flex: auto">
                        <div flex="cross:center">
                            <div style="display: flex;">
                                <free-goods-choice :multiple="true" @selected="goodsSelect" title="商品选择">
                                    <el-button type="primary">选择商品</el-button>
                                </free-goods-choice>
                                &nbsp;
                                <el-button type="primary" @click="deleteGoodsBatch">批量删除</el-button>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item v-if="goods">
                    <div style="max-height: 300px;overflow-y: auto;background-color: #eee;">
                        <div flex v-if="goods">
                            <div style="padding-right: 10px;flex-grow: 0">
                                <com-image mode="aspectFill"
                                           :src="goods.cover_pic"></com-image>
                            </div>
                            <div style="flex-grow: 1;">
                                <com-ellipsis :line="2">{{goods.goods_name}}
                                </com-ellipsis>
                            </div>
                            <div style="flex-grow: 0;">
                                <el-button @click="deleteGoods"
                                           type="text" circle size="mini">
                                    <el-tooltip class="item" effect="dark"
                                                content="删除" placement="top">
                                        <img src="resources/img/mall/del.png" alt="">
                                    </el-tooltip>
                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item  :label-width="formLabelWidth">
                    <template >
                        <div class="table-body" style="padding-left: 0;padding-top: 0;">
                            <template>
                                <el-table :data="ruleForm.goods_list" border style="width: 100%"
                                          @selection-change="handleSelectionChange">
                                    <el-table-column type="selection" width="60px" label="ID" prop="id">
                                    </el-table-column>
                                    <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.goods_name }}
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="deleteGoods(scope.$index)" size="mini">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                            </template>
                        </div>

                    </template>
                </el-form-item>
                <el-form-item label="礼包金额" required>
                    <el-input v-model="ruleForm.price" style="width: 210px" placeholder="请输入礼包金额"
                              onInput="value=toNumber(value,2)">
                    </el-input>
                </el-form-item>
                <el-form-item label="推荐奖励" required>
                    <el-radio v-model="ruleForm.is_range" label="1">全部代理</el-radio>
                    <el-radio v-model="ruleForm.is_range" label="0">最近代理</el-radio>
                    <el-table :data="ruleForm.recommend_reward" style="width: 100%">
                    <el-table-column prop="name" label="等级" width="180"></el-table-column>
                    <el-table-column prop="reward_fee" label="比例" width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.reward_fee" onInput="value=toNumber(value,2)" placeholder="
                            ">
                                <template slot="append">%</template>
                            </el-input>
                        </template>
                    </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="购买后是否可以成为业绩奖励团长" :label-width="formLabelWidth">
                    <div>
                        <el-switch v-model="ruleForm.is_achievement_user" :active-value="1" :inactive-value="0">
                        </el-switch>
                    </div>
                </el-form-item>
                <el-form-item label="不发放差价奖" :label-width="formLabelWidth">
                    <div>
                        <el-switch v-model="ruleForm.not_get_price_difference" :active-value="1" :inactive-value="0">
                        </el-switch>
                    </div>
                </el-form-item>
                <el-form-item label="推荐奖励截止至货款获得者" :label-width="formLabelWidth">
                    <div>
                        <el-switch v-model="ruleForm.not_distribute_payment_for_goods" :active-value="1"
                                   :inactive-value="0">
                        </el-switch>
                    </div>
                </el-form-item>
            </el-form>

        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editCancel" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="edit.btnLoading" style="margin-bottom: 10px;" size="small"
                       @click="editSave">保存</el-button>
        </span>
    </el-dialog>
</template>
<script>
    Vue.component('price-difference-gift-package-edit', {
        template: '#price-difference-gift-package-edit',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            edit_row: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                edit: {
                    show: false,
                    id: '',
                    btnLoading: false,
                },
                ruleForm: {
					id: 0,
                    name: '',
					level: '',
                    pic_type: 0,
                    pic: '',
                    price: '',
					goods_id: [],
                    status: 1,
                    is_range: '1',
                    is_achievement_user: 0,
                    goods_list:[],
                    recommend_reward:[],
                    not_get_price_difference: 0,
                    not_distribute_payment_for_goods: 0,
                },
                formLabelWidth: '150px',
                level_list: [],
                goods: null,
				loading:false,
                recommend_reward_arr: [],
                multipleSelection: [],

            }
        },
        watch: {
            value() {
                if (this.value) {
					this.getLevelList();
                    this.edit.show = true;
                    if (this.edit_row.id > 0) {
                        this.edit.id = this.edit_row.id;
                        this.loadData();
                    }else{
                        this.loadDataNoId();
                        this.edit.id = 0;
                    }
                    this.changeLevelReward();
                } else {
                    this.edit.show = false;
                }
            },
            'edit.show'() {
                if (!this.edit.show) {
					this.edit_row.id = 0;
					this.ruleForm = {
                        id: 0,
                        name: '',
                        level: '',
                        pic_type: 0,
                        pic: '',
                        price: '',
                        goods_id: [],
                        status: 1,
                        is_range: '1',
                        is_achievement_user: 0,
                        goods_list:[],
                        recommend_reward: [],
                        not_get_price_difference: 0,
                        not_distribute_payment_for_goods: 0,
                    }
					this.goods = null,
					this.goods2 = null,
                    this.editCancel();
                }
                if (this.edit.id) {
                }
            }
        },
        mounted() {
        },
        methods: {
            backgroundTypeChange(value) {
            },
            backgroundChange(command) {
                if (this.ruleForm.background_type == 0) {
                    this.ruleForm.background = this.defaultStyle[command].bg_url
                    this.background_default = this.ruleForm.background;
                    this.ruleForm.font_color = this.defaultStyle[command].font_color
                }
            },
            coverPic(e) { // 选择图片
                this.ruleForm.pic = e[0].url
            },
            delPic() {
                this.ruleForm.pic = null;
            },
            onInput(e) {
                this.$forceUpdate();
            },
            loadData() {
				this.loading = true;
                request({
                    params: {
                        r: 'cloud-stock/price-difference-gift-package/edit',
                        id: this.edit.id
                    },
                    method: 'get',
                }).then(response => {
					this.loading = false;

                    if (response.data.code == 0) {

                        this.ruleForm = {
							level: response.data.data.level,
							give_goods_num:response.data.data.give_goods_num,
							name: response.data.data.name,
							status: response.data.data.status,
                            is_range: response.data.data.is_range.toString(),
                            is_achievement_user: response.data.data.is_achievement_user,
                            price: response.data.data.price,
                            goods_list:response.data.data.goods_list,
                            goods_id:response.data.data.goods_id,
                            pic_type: response.data.data.pic_type,
                            pic: response.data.data.pic,
                            recommend_reward: response.data.data.recommend_reward,
                            not_get_price_difference: response.data.data.not_get_price_difference,
                            not_distribute_payment_for_goods: response.data.data.not_distribute_payment_for_goods,
                        }
                        this.ruleForm.is_percent = this.ruleForm.is_percent.toString();
                        this.recommend_reward_arr = response.data.data.recommend_reward;
                        var level = this.ruleForm.level
                        console.log('====', this.ruleForm.is_range);
                        this.changeLevelReward(level);
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
					this.loading = false;
                });
            },
            loadDataNoId() {
				this.loading = true;
                request({
                    params: {
                        r: 'cloud-stock/price-difference-gift-package/edit',
                    },
                    method: 'get',
                }).then(response => {
					this.loading = false;
                    if (response.data.code == 0) {
                        this.ruleForm.recommend_reward = response.data.data.recommend_reward;
                        console.log('+++++', this.ruleForm.recommend_reward);
                        this.recommend_reward_arr = response.data.data.recommend_reward;
                        this.changeLevelReward(0);
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
					this.loading = false;
                });
            },
            goodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    let flag = true;
                    for (let i in this.ruleForm.goods_id) {
                        if (this.ruleForm.goods_id[i] == item.goods_id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.goods_id.push(item.goods_id);
                        this.ruleForm.goods_list.push({
                            id: item.goods_id,
                            goods_name: item.goods_name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }
            },
            deleteGoods(index) {
                this.ruleForm.goods_list.splice(index, 1);
                this.ruleForm.goods_id.splice(index, 1);
            },
            agentClick(row) {
                this.edit.id = row.id
            },
            getLevelList() {
                request({
                    params: {
                        r: 'cloud-stock/default/get-level-list',
						page:1,
						limit:100
                    },
                    method: 'get',
                }).then(response => {
                    if (response.data.code == 0) {
                        this.level_list = response.data.data;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                });
            },
            editCancel() {
                this.$emit('input', false);
            },
            editSave() {
				if (this.ruleForm.name == '') {
                    this.$message.error('请输入礼包名称');
				    return;
				}
                if (this.ruleForm.goods_id == 0) {
                    this.$message.error('请选择礼包商品');
                    return;
                }
				if (this.ruleForm.level == '') {
				    this.$message.error('请选择升级等级');
				    return;
				}
				let requestUrl = '';
                requestUrl = 'cloud-stock/price-difference-gift-package/edit';
                this.edit.btnLoading = true;
                this.ruleForm.id = this.edit.id;
                request({
                    params: {
                        r:requestUrl,
                    },
                    method: 'post',
                    data: this.ruleForm
                }).then(response => {
                    this.edit.btnLoading = false;
                    if (response.data.code == 0) {
                        this.$message.success('保存成功');
                        //this.goods = null;
						this.$emit('refresdatafun',1);
                        this.editCancel();
						this.ruleForm= {
							level: '',
							goods_id: 0,
							give_goods_num:'',
							give_goods_id:0,
							name: '',
							status: 1,
                            is_percent: 0,
						}
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.edit.btnLoading = false;
                });
            },
            keyUp() {
            },
            levelChange() {
                this.changeLevelReward()
            },
            changeLevelReward() {
                let self = this
                let newLeveReward = [];
                this.recommend_reward_arr.forEach(function (item, index) {
                        newLeveReward.push(item)
                })
                self.ruleForm.recommend_reward = newLeveReward;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteGoodsBatch() {
                if (this.multipleSelection.length <= 0) {
                    this.$message.error('未勾选商品');
                    return false;
                }
                var ids = [];
                this.multipleSelection.forEach(row => {
                    ids.push(row.id)
                })
                var new_goods_ids = [];
                var new_goods_list = [];
                for (var i in this.ruleForm.goods_list) {
                    var temp = this.ruleForm.goods_list[i];
                    if (!ids.includes(temp.id)) {
                        new_goods_list.push(temp)
                        new_goods_ids.push(temp.id)
                    }
                }
                this.ruleForm.goods_list = new_goods_list;
                this.ruleForm.goods_id = new_goods_ids;
            },

        }
    });
</script>
<style>
    #app {
        display: flex;
        flex-direction: column;
        min-width: 1250px;
    }


    .diy-contain {
        flex: 1;
        overflow: auto;
        background: #F4F6F8;
        justify-content: space-between;
    }

    .diy-func-list {
        box-sizing: border-box;
        width: 354px;
        background: #FFFFFF;
        border-radius: 0px;
    }

    .diy-preview {

        background: #F4F6F8;
        justify-content: space-around;
        width: 467px;
    }

    .dsp-contain {
        flex: 1;
    }

    .flex {
        display: flex;
    }

    .flex-x-center {
        display: flex;
        justify-content: center;
    }

    .flex-y-center {
        display: flex;
        align-items: center;
    }

    .flex-x-y-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flex-y-top {
        align-items: flex-start;
    }

    :root {
        /* 主题色 */
        --diy-theme: #F10009;
        /* 主要字体颜色 */
        --diy-color: #F10009;
    }

    .dsp-contain {
        position: relative;
        flex: 1;
        height: 100%;
        background: #FFFFFF;
    }

    .title {
        font-size: 16px;
        font-weight: bold;
        padding: 16px 0 0 16px;
    }

    .add-box {
        padding: 16px 0 0 16px;
        font-size: 16px;
        color: #1890FF;
    }

    .service-item + .service-item {
        margin-top: 10px;
    }

    .service-con {
        margin: 0 80px;
        background: #F5F5F5;
        justify-content: space-evenly;
    }

    .setting-item {
        text-align: center;
        padding: 0 16px 16px;
    }


    .dropdown-link {
        width: 111px;
        height: 40px;
        border: 1px solid #DCDFE6;
    }

    .dropdown-item + .dropdown-item {
        padding-left: 0;
    }

    .card-upload {
        width: 103px;
        height: 103px;
        line-height: 103px
    }
</style>