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

<?php
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
?>
<style lang="scss" scoped>
    /* .el-card__header {
        padding: 8px 20px;
    }
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin: 5px;
    }
    .el-form-item__content, .el-form-item__label{
        margin-top: 10px;
    } */
    ::v-deep .el-input__inner{
        height: 5px;
    }
    .all-change-form {
        border: 1px solid #e5e5e5;
        border-bottom: 0px;
        .el-form-item {
            margin-bottom: 0px;
            padding: 10px;
        }
    }
    
</style>
<div id="app" v-cloak>
    <el-card class="box-card">
        <div slot="header">
            <span>积分商品</span>
        </div>
        <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
            <el-form  ref="form" :model="form" label-width="120px" size="small" v-loading="loading">
                <el-card style="margin-top: 10px" class="edit-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <div class="card-title">基础设置</div>
                    </div>
                    <el-form-item style="margin-left: 10px;" label="商品分类" required>
                        <el-select class="width-150" placeholder="请选择分类" @change="handle('selectType', $event)" v-model="form.catName">
                            <el-option v-for="items in cate_list" :label="items.name" :value="items.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 10px;" label="优惠限制" required>
                        <el-switch v-model="form.use_coupon" :active-value="0" :inactive-value="1"></el-switch>
                        <div class="tips-text">开启时，积分商品不参与优惠券抵扣</div>
                    </el-form-item>
                </el-card>
                <el-card class="edit-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <div class="card-title">商品设置</div>
                    </div>
                    <el-form-item style="margin-left: 10px;" label="商品信息" required>
                        <com-dialog-select v-if="type != 'edit'" :multiple="false" @selected="goodsSelect" title="商品选择" url="score-mall/default/goods-list">
                            <el-button>选择商品</el-button>
                        </com-dialog-select>
                        
                        <div v-if="exchange && goods_info.length > 0" class="table-body" style="padding-left: 0;padding-top: 10px;">
                            <template>
                                <el-table :data="goods_info" border style="width: 30%">
                                    <el-table-column fixed type="index" label="编号" show-overflow-tooltip width="50">
                                    </el-table-column>
                                    <el-table-column prop="goods_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 fixed="right" label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button :disabled="type == 'edit'" @click="handle('deleteGoods')" type="primary" size="mini">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                            </template>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="exchange" style="margin-left: 10px;" label="兑换条件" required prop="type">
                        <el-radio-group @change="handle('switchType', $event)" v-model="form.type">
                            <el-radio :label="1">全积分兑换</el-radio>
                            <el-radio :label="2">积分+金额兑换</el-radio>
                            <el-radio :label="3">积分抵扣</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="exchange" style="margin-left: 10px;" label="兑换价格" required>
                        <el-form label-position="left" size="small" label-width="75px" class="all-change-form" v-if="form.type != 3">
                            <el-form-item>
                                <template slot="label">
                                    <span>批量修改</span>
                                </template>
                                <el-input v-model="number">
                                    <template slot="prepend">
                                        <el-select v-model="selectType" placeholder="请选择" style="width: 100px;">
                                            <el-option v-for="item in selectTypeOption" :value="item.value" :label="item.title" :key="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                    <template slot="append">
                                        <el-button @click="submitAll">修改</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <el-table :data="form.attr" border ref="form.attr" ref="scoreTable" @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                width="40">
                            </el-table-column>
                            <el-table-column prop="name" label="规格">
                                <template slot-scope="scope">
                                    {{scope.row.name ? scope.row.name : '默认'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="售价">
                                <template slot-scope="scope">
                                    ￥{{scope.row.price}}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="form.type == 1" prop="name" label="兑换价" key="1">
                                <template slot-scope="scope">
                                    <el-form-item :porp="'attr[' + scope.$index + '].scoreGoodsAttr.score'">
                                        <el-input v-model="form.attr[scope.$index].scoreGoodsAttr.score" size="mini" style="width: 100px;margin-right:10px" placeholder="输入积分" onInput="value = toNumber(value, 2)">
                                        </el-input>积分
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            
                            <el-table-column v-if="form.type == 2" prop="name" label="兑换价" key="2">
                                <template slot-scope="scope">
                                    <el-form-item>
                                        <el-input v-model="scope.row.scoreGoodsAttr.score" min=1 size="mini" style="width: 100px;margin-right:10px" placeholder="输入积分" onInput="value = toNumber(value, 2)">
                                        </el-input>积分&nbsp;+&nbsp;
                                        <el-input v-model="scope.row.scoreGoodsAttr.money" min=1 size="mini" style="width: 100px;margin-right:10px" placeholder="输入金额" onInput="value = toNumber(value, 2)">
                                        </el-input>元
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            
                            <el-table-column v-if="form.type == 3" prop="name" label="兑换价" key="3">
                                <template slot-scope="scope">
                                    <el-form-item>
                                        最低抵扣<el-input v-model="form.attr[scope.$index].scoreGoodsAttr.deduction_limit[0]['limit'] == 0 ? '' : 
                                            scope.row.scoreGoodsAttr.deduction_limit[0]['score']" 
                                            :disabled="scope.row.scoreGoodsAttr.deduction_limit[0]['limit'] == 0" size="mini" min=1 
                                            style="width: 100px;margin:3px 10px" placeholder="输入积分" onInput="value = toNumber(value, 2)">
                                        </el-input>
                                        <el-checkbox @change="handle('setMinLimit', scope.$index, $event)" :label="1" :key="scope.$index + 1" v-model="form.attr[scope.$index].scoreGoodsAttr.deduction_limit[0]['limit'] == 0">不限制</el-checkbox>
                                    </el-form-item>
                                    <el-form-item>
                                        最高抵扣<el-input v-model="form.attr[scope.$index].scoreGoodsAttr.deduction_limit[1]['limit'] == 0 ? '' : 
                                        scope.row.scoreGoodsAttr.deduction_limit[1]['score']" size="mini" 
                                        :disabled="scope.row.scoreGoodsAttr.deduction_limit[1]['limit'] == 0" min=1 style="width: 100px;margin:3px 10px" 
                                        placeholder="输入积分" onInput="value = toNumber(value, 2)">
                                        </el-input>
                                        <el-checkbox @change="handle('setMaxLimit', scope.$index, $event)" :label="1" :key="scope.$index + 1" v-model="scope.row.scoreGoodsAttr.deduction_limit[1]['limit'] == 0">不限制</el-checkbox>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-card>
            </el-form>
        </el-card>
        <el-button class="button-item" :loading="loading" type="primary" size="small" @click="send('submit')">保存</el-button>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            exchange: false,
            type: 'edit',
            goods_id: '<?=$goods_id?>',
            cate_list: [],
            attr_list: [],
            form: {
                ids: '',
                catName: '',
                cate_id: '',
                use_coupon: 1,
                goods_id: 0,
                type: 1,
                price: 0, 
                attr: []
            },
            multipleSelection: [],
            selectType: '',
            goods_info: [],
            selectTypeOption: [
                {
                    title: '积分',
                    value: 'score',
                },
                {
                    title: '金额',
                    value: 'money',
                },
            ],
            number: '',
        },
        mounted() {
            this.send('getData');
            this.type = this.goods_id ? 'edit' : 'add';
        },
        methods: {
            ttt(param){
                return true
            },
            send(type, param1 = null) {
                switch (type) {
                    //获取积分商品
                    case 'getData':
                        this.loading = true;
                        request({
                            params: {
                                r: 'score-mall/default/edit',
                                goods_id: this.goods_id
                            },
                            method: 'get'
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                this.cate_list = e.data.data.cate_list;
                                if (e.data.data.data && this.type == 'edit') {
                                    this.form.cate_id = e.data.data.data.cate_id;
                                    this.form.use_coupon = e.data.data.data.use_coupon;
                                    this.form.goods_id = e.data.data.data.goods_id;
                                    this.form.type = e.data.data.data.type;
                                    this.form.price = e.data.data.data.price;
                                    this.send('getAttr', e.data.data.goods_info);
                                    if (this.cate_list[this.form.cate_id]) {
                                        this.form.catName = this.cate_list[this.form.cate_id]['name'];
                                    }
                                    this.goods_info = [e.data.data.goods_info];
                                    this.exchange = true;
                                }
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.loading = false;
                            self.$message.error(e.data.msg);
                        });
                        break;
                    //获取属性:
                    case 'getAttr':
                        let goods_id = param1.id;
                        this.loading = true;
                        request({
                            params: {
                                r: 'score-mall/default/attr-list',
                                goods_id: goods_id,
                                type: this.type
                            },
                            method: 'get'
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                console.log(e.data.data);
                                this.form.attr = e.data.data;
                                let scoreGoodsAttr = {score: 0, money: 0.00, deduction_limit: [{score:0,limit:0},{score:0,limit:0}]};
                                //设置默认值
                                for (let i = 0; i < this.form.attr.length; i++) {
                                    if (this.type == 'add') {
                                        this.$set(this.form.attr[i], 'scoreGoodsAttr', JSON.parse(JSON.stringify(scoreGoodsAttr)))
                                    } else {
                                        if (!e.data.data[i]['scoreGoodsAttr']['deduction_limit']) {
                                            e.data.data[i]['scoreGoodsAttr']['deduction_limit'] = '[{"score":0,"limit":0},{"score":0,"limit":0}]';
                                        }
                                        e.data.data[i]['scoreGoodsAttr']['deduction_limit'] = JSON.parse(e.data.data[i]['scoreGoodsAttr']['deduction_limit']);
                                        this.$set(this.form.attr[i], 'scoreGoodsAttr', JSON.parse(JSON.stringify(e.data.data[i]['scoreGoodsAttr'])));
                                    }
                                }
                                this.exchange = true;
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e=>{
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                    //提交
                    case 'submit':
                        this.loading = true;
                        let data = Object.assign(this.form, {action: this.type});
                        let money = 0.00;
                        let score = 0;
                        if (this.form.type == 2 || this.form.type == 1) {
                            money = this.form.attr[0].scoreGoodsAttr.money;
                            score = this.form.attr[0].scoreGoodsAttr.score;
                        }
                        data = Object.assign(data, {money: money, score: score});
                        request({
                            params: {r: 'score-mall/default/edit'},
                            data: data,
                            method: 'post'
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                let info = {r: 'score-mall/default/index'};
                                navigateTo(info);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e=>{
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                }

            },
            handle(type, param1 = null, param2 = null) {
                switch (type) {
                    //选择商品分类
                    case 'selectType':
                        this.form.cate_id = param1;
                        break;
                    //切换类型
                    case 'switchType':
                        this.form.type = param1;
                        break;
                    //点击最小限制
                    case 'setMinLimit':
                        let limit1 = param2 ? 0 : 1;
                        this.form.attr[param1]['scoreGoodsAttr']['deduction_limit'][0]['limit'] = limit1;
                        if (param2) {
                            this.form.attr[param1]['scoreGoodsAttr']['deduction_limit'][0]['score'] = -1;
                        } else {
                            this.form.attr[param1]['scoreGoodsAttr']['deduction_limit'][0]['score'] = 0;
                        }
                        break;
                    //点击最大限制
                    case 'setMaxLimit':
                        let limit2 = param2 ? 0 : 1;
                        this.form.attr[param1]['scoreGoodsAttr']['deduction_limit'][1]['limit'] = limit2;
                        if (param2) {
                            this.form.attr[param1]['scoreGoodsAttr']['deduction_limit'][1]['score'] = -1;
                        } else {
                            this.form.attr[param1]['scoreGoodsAttr']['deduction_limit'][1]['score'] = 0;
                        }
                        break;
                    //删除选中商品
                    case 'deleteGoods':
                        this.goods_info = [];
                        this.form.attr = [];
                        this.exchange = false;
                        break;
                }
            },
            goodsSelect(param) {
                this.form.goods_id = param.id;
                this.goods_info = [param];
                this.form.price = param.price;
                this.send('getAttr', param);
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            submitAll() {
                this.multipleSelection.map(item => {
                    if (this.selectType == 'score' || this.selectType == 'money') {
                        item.scoreGoodsAttr[this.selectType] = this.number
                    }
                })
                // this.form.attr = {...this.form.attr, ...this.multipleSelection}
            },
        }
    })
</script>