qimall/addons/Store/client/views/goods/component/com-attr-group.php

<?php 

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-specs-select', __DIR__);
ComponentHelper::loadComponentView('com-specs-values-select', __DIR__);
?>
<style>
    .com-attr-group {
        border: 1px solid #EBEEF5;
        padding: 10px;
    }

    .com-attr-group .bg {
        height: 44px;
        padding: 0 10px;
        background: #f8f8f8;
    }

    .com-attr-group .del-img {
        height: 20px;
        width: 20px;
        cursor: pointer;
    }

    .com-attr-group .img-box {
        position: relative;
        height: 100px;
        width: 100px;
        margin-top: 8px;
        border: 1px solid #EBEEF5;
    }

    .com-attr-group .attr-jt {
        background: #ffffff;
        width: 6px;
        height: 6px;
        border-top: 1px solid rgb(235, 238, 245);
        border-right: 1px solid #EBEEF5;
        transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        position: absolute;
        top: -5px;
    }

    .com-attr-group .close {
        position: absolute;
        top: -4px;
        right: -4px;
        font-size: 16px;
        cursor: pointer;
    }

    .com-attr-group .attr-list {
        display: inline-block;
        margin-right: 10px;
        /* margin-bottom: 10px; */
        position: relative;
        cursor: move;
    }
</style>
<template id="com-attr-group">
    <div class="com-attr-group">
        <div v-for="(group, i) in value" :key="i" style="margin-bottom: 16px">
            <div flex="dir:left cross:center" class="bg">
                <span>规格名:</span>
                <el-input type="text" v-model.trim="group.attr_group_name" size="mini" @input="makeAttrGroup"
                          style="width:94px;margin:0 16px"></el-input>

                <!-- 自定义规格选择 -->
                <com-specs-select :load-more-loding="loadMoreLoding" :specs-list="specsList" :index="i" @load-more="loadMore" :group="group" @use-specs="useSpecs"></com-specs-select>

                <el-checkbox v-if="i === 0" v-model="attrPic">规格图片</el-checkbox>
                <div @click="deleteAttrGroup(i)" style="margin-left: auto;line-height: 1">
                    <el-image class="del-img" src="resources/img/mall/order/del.png"></el-image>
                </div>
            </div>
            <div flex="dir:left" style="padding:0 10px;margin-top: 16px">
                <div class="box-grow-0">规格值：</div>
                <draggable :options="{draggable:'.attr-list'}" @end="makeAttrGroup"
                           flex="dir:left" style="flex-wrap: wrap" v-model="group.attr_list">
                    <div class="attr-list" v-for="(attr, j) in group.attr_list" :key="j">
                        <el-input style="width:152px" size="mini" type="text" @input="makeAttrGroup"
                                  v-model.trim="attr.attr_name"></el-input>
                        <i class="el-icon-error close" @click="deleteAttr(i,j)"></i>
                        <div flex="cross:center main:center" class="img-box" v-if="i===0 && attrPic">
                            <div class="attr-jt"></div>
                            <div v-if="attr.pic_url" @mouseenter="attrPicEnter(j)">
                                <el-image :src="attr.pic_url" style="height:88px;width:88px"></el-image>
                            </div>
                            <com-attachment v-else v-model="attr.pic_url" :multiple="false" :max="1" @selected="selectImg">
                                <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 750" placement="top">
                                    <el-button type="text" @click="uploadId(i, j)">+添加图片</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <i v-if="attrPicStatus === j && attr.pic_url" class="el-icon-error close"
                               @click="attr.pic_url = ''"></i>
                            <div v-if="attrPicStatus === j && attr.pic_url" style="position: absolute">
                                <com-attachment v-model="attr.pic_url" :multiple="false" :max="1"  @selected="selectImg">
                                        <el-button type="primary" @click="uploadId(i, j)">替换</el-button>
                                </com-attachment>
                            </div>
                        </div>
                    </div>
                    <div slot="footer" flex="center">
                        <!-- 使用预设规格值 -->
                        <com-specs-values-select :specs="getUseSpecs(i)" :index="i" @use-specs-value="useSpecsValue"></com-specs-values-select>
                        <el-button type="text" @click="addAttr(i)">添加规格值</el-button>
                    </div>
                </draggable>
            </div>
            <div v-if="i === 0" style="margin-left: 65px;color:#c9c9c9">
                <p class="tips-text">
                    仅支持为第一组规格设置规格图片，买家选择不同规格会看到对应规格图片，建议尺寸：80 * 80像素
                </p>
            </div>
        </div>
        <div v-if="isAddAttrGroups" flex="dir:left cross:center" class="bg">
            <el-button @click="addAttrGroup">添加规格项目</el-button>
            <span style="padding-left: 14px;color:#c9c9c9">注：规格名最多添加5个</span>
        </div>
    </div>
</template>
<script>
    Vue.component('com-attr-group', {
        template: '#com-attr-group',
        props: {
            value: {
                type: Array,
                default: function () {
                    return [];
                }
            }
        },
        data() {
            return {
                attrGroupMaxCount: 5, //可添加最大规格组
                isAddAttrGroups: true, //添加规格组按钮是否显示
                attrPic: true, //规格图片
                attrPicStatus: -1, //move
                specsPage: 1,
                specsLimit: 10,
                specsList: [],
                pageCount: 0,
                loadMoreLoding: false,
                specs: {},
                ids: {},
            };
        },
        watch: {
            'attrPic'(newVal, oldVal) {
                if (!newVal) {
                    this.value[0]['attr_list'].forEach((v) => {
                        v.pic_url = '';
                    })
                }
            },
        },
        created: function() {
            this.getSpecs();
            this.makeAttrGroup();
        },
        methods: {
            makeAttrGroup() {
                this.$emit('select', this.value);
            },

            attrPicEnter(value) {
                if (this.attrPicStatus == value) {
                    return;
                }
                this.attrPicStatus = value;
            },
            // 添加规格组
            addAttrGroup() {
                let attrGroundId = 0;
                if(this.value.length>0){
                    attrGroundId = this.value[this.value.length - 1].attr_group_id;
                }
                this.value.push({
                    attr_group_id: attrGroundId + 1,
                    attr_group_name: '',
                    attr_list: [],
                });

                // 限制添加的规格组
                if (this.value.length === this.attrGroupMaxCount) {
                    this.isAddAttrGroups = false;
                }
            },

            // 删除规格组
            deleteAttrGroup(index) {
                this.value.splice(index, 1);
                if (this.value.length < this.attrGroupMaxCount) {
                    this.isAddAttrGroups = true;
                }
                this.makeAttrGroup();
            },

            // 删除规格
            deleteAttr(i, j) {
                this.value[i].attr_list.splice(j, 1);
                this.makeAttrGroup();
            },

            // 添加规格
            addAttr(i) {
                this.value[i].attr_list.push({
                    attr_id: this.getLastAttrId() + 1,
                    attr_name: '',
                    pic_url: '',
                });
                this.makeAttrGroup();
            },

            // 获取最后一个规格ID
            getLastAttrId() {
                let id = 1;
                this.value.forEach((attrGroupItem, attrGroupIndex) => {
                    attrGroupItem.attr_list.forEach((v) => {
                        id = (v.attr_id > id?v.attr_id:id);
                        // console.info(v.attr_id,"id",id);
                    });
                });
                return id;
            },
            getSpecs() {
                request({
                    params: {
                        r: 'store/client/specs/index',
                        page: this.specsPage,
                        limit: this.specsLimit
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 0) {
                        this.specsList = [
                            ...this.specsList,
                            ...e.data.data.list
                        ]
                        this.pageCount = e.data.data.page_count
                        this.loadMoreLoding = false
                    }
                })
            },
            /**
             * 加载更多
             */
            loadMore() {
                if (this.loadMoreLoding) {
                    return  
                }
                if (this.specsPage >= this.pageCount) {
                    this.$message.warning('暂无更多')
                    return 
                }
                this.loadMoreLoding = true
                this.specsPage++
                this.getSpecs()
            },
            getUseSpecs(i) {
                return this.specs[i]
            },
            /**
             * 使用规格
             */
            useSpecs(item, group, i) {
                this.specs[i] = item
                group.attr_group_name = item.name
            },
            useSpecsValue(v, i) {
                let index = this.value[i].attr_list.findIndex(function (item) {
                    return item.attr_name == v
                })
                if (index == -1) {
                    this.value[i].attr_list.push({
                        attr_id: this.getLastAttrId() + 1,
                        attr_name: v,
                        pic_url: '',
                    });
                    this.makeAttrGroup();    
                }
            },
            /**
             * 选中图片
             */
            selectImg(e) {
                let i = this.ids.i
                let j = this.ids.j

                this.value[i].attr_list[j].pic_url = e[0].url
                this.makeAttrGroup()
            },
            uploadId(i, j) {
                this.ids.i = i
                this.ids.j = j
            },
        }
    });
</script>