qimall/backend/views/components/common/diy/style-components/diy-style.php

<!-- 风格组件 -->
<template id="diy-style">
    <diy-style-contain class="diy-style" :title="topName">
        <div class="diy-style-exhibit" flex="main:center cross:center">
            <el-image class="exhibit-img" :style="{...imgStyle}" :src="imgUrl + imgInfo[selIndex].img" fit="fill"></el-image>
            <div class="diy-update-style" @click="stylePop = true">
                修改风格
            </div>
        </div>
        <el-dialog :title="topName" :visible.sync="stylePop" width="66%" :modal-append-to-body="false">
            <div flex="wrap:wrap" class="diy-style-info">
                <div :style="{width: (100/count) + '%'}" v-for="(item,index) in imgInfo" :key="index">
                    <div class="diy-style-img" :class="{'diy-style-sel-img': index==selIndex}">
                        <el-image :style="{'height': imgStyle.height}" style="width: 100%;" @click="selStyleImg(index)" :src="imgUrl + item.img" fit="fill"></el-image>
                        <i v-show="index==selIndex" class="el-icon-success diy-style-icon"></i>
                    </div>
                    <div class="diy-style-text">{{item.text}}</div>
                    <div class="diy-style-text" v-if="item.desc">{{item.desc}}</div>
                </div>
            </div>
            <div class="diy-style-bottom">
                <el-button size="mini" @click="stylePop = false" plain>取消</el-button>
                <el-button size="mini" @click="saveStyle" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </diy-style-contain>
</template>

<script>
    Vue.component('diy-style', {
        template: '#diy-style',
        name: 'diy-style',
        props: {
            topName: { //头部标题
                type: String,
                default: "选择风格",
            },
            imgStyle: { //图片样式
                type: Object,
                default: () => {
                    return {
                        width: '206px',
                        height: 'auto'
                    }
                }
            },
            count: { //每格多少个
                type: [String, Number],
                default: 4,
            },
            imgUrl: { //图片路径开头
                type: String,
                default: "resources/img/decorate/"
            },
            defIndex: {
                type: Number,
                default: 0
            },
            /* 
                数据结构
                {
                    img: "", //图片路径
                    text: "", //展示文本
                }
            */
            imgInfo: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                stylePop: false,
                selIndex: 0,
            }
        },
        created() {
            this.selIndex = this.defIndex;
        },
        methods: {
            selStyleImg(index) {
                this.selIndex = index;
            },
            saveStyle() {
                const item = this.imgInfo[this.selIndex]
                this.$emit("chang", this.selIndex, item);
                this.stylePop = false;
            }
        }
    })
</script>

<style>
    .diy-style-exhibit {
        background: #F4F3F7;
        height: 184px;
        position: relative;
    }

    .diy-update-style {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: rgba(102, 102, 102, 0.72);
        font-weight: bold;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.82);
    }

    .diy-update-style,
    .diy-style-img:hover {
        cursor: pointer
    }

    .diy-style .el-dialog__header {
        border-bottom: 1px solid #f2f2f2;
        padding: 12px 22px;
    }

    .diy-style .el-dialog__body {
        padding: 0;
    }

    .diy-style .diy-style-bottom {
        border-top: 1px solid #f2f2f2;
        padding: 10px 20px;
        text-align: end;
    }

    .diy-style-info {
        padding: 16px;
    }

    .diy-style-img {
        background: #f7f8fa;
        border: 1px solid #ededed;
        width: 95%;
        position: relative;
        font-size: 0;
    }

    .diy-style-sel-img {
        border: 1px solid #3892F1;
    }

    .diy-style-icon {
        position: absolute;
        font-size: 16px;
        bottom: -8px;
        right: -8px;
        background: #FFF;
        border-radius: 50%;
        color: #2D8CF0;
    }

    .diy-style-text {
        width: 95%;
        text-align: center;
        margin-bottom: 10px;
        margin-top: 10px;
    }
</style>