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

<template id="diy-share">
    <diy-style-contain title="分享配置">
        <diy-operation-list v-model="shareList" @on-change="shareChange" :gutter="20" :label-width="labelWidth">
            <template v-slot:wxtext="{ item }">
                <div class="flex">
                    <div class="diy-operation-name" :style="{width: labelWidth + 'px'}"></div>
                    <div class="upload-img-tips">{{item.value}}</div>
                </div>
            </template>
            <template v-slot:h5text="{ item }">
                <div class="flex">
                    <div class="diy-operation-name" :style="{width: labelWidth + 'px'}"></div>
                    <div class="upload-img-tips">{{item.value}}</div>
                </div>
            </template>

            <template v-slot:previewimg="{ item,index }">
                <div class="item-row">
                    <div class="diy-operation-name" :style="{width: labelWidth + 'px'}">{{ item.label }}</div>
                    <diy-tab v-model="item.list" :default-index="item.previewImgIndex" @change="onShopCartStyle">
                        <template v-slot="{item, isSelect}">
                            <div flex="cross:center" :class="{'preview-img-item': true,'preview-img-item-active': isSelect}">
                                {{item.label}}
                            </div>
                        </template>
                    </diy-tab>
                </div>
                <div v-if="item.previewImgIndex == 0">
                    <div class="item-row">
                        <div class="diy-operation-name" :style="{width: labelWidth + 'px'}"></div>
                        <div class="prev-img-contain-mp WeChat">
                            <img style="width: 207px;" src="resources/img/decorate/nav/share1.png" alt="">
                        </div>
                    </div>
                </div>
                <div v-else>
                    <div class="item-row">
                        <div class="diy-operation-name" :style="{width: labelWidth + 'px'}"></div>
                        <div class="prev-img-contain-h5">
                            <div class="title">朋友圈</div>
                            <div style="padding: 20px; background: #EDEDED">
                                <img style="width: 100%;" src="resources/img/decorate/nav/share2.png" alt="">
                            </div>
                            <div class="title">发送给朋友</div>
                            <div>
                                <img style="width: 100%;" src="resources/img/decorate/nav/share.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </diy-operation-list>
    </diy-style-contain>
</template>

<script>
    /**
     * 分享组件
     */
    Vue.component('diy-share', {
        name: "diy-share",
        template: '#diy-share',
        props: {
            defaultData: {
                type: Object,
                default () {
                    return null
                }
            }
        },
        data() {
            return {
                labelWidth: 100,
                shareList: [{
                        type: "input",
                        label: "分享标题",
                        value: "",
                        placeholder: "请输入分享标题",
                        max: 15,
                        showLimit: true
                    },
                    {
                        type: "textarea",
                        label: "分享描述",
                        value: "",
                        placeholder: "请输入分享描述",
                        max: 30,
                        showLimit: true
                    },
                    {
                        type: "image",
                        label: "小程序分享图片",
                        value: "",
                    },
                    {
                        value: "小程序：建议尺寸5：4",
                        slot: "wxtext"
                    },
                    {
                        type: "image",
                        label: "公众号分享图片",
                        value: "",
                    },
                    {
                        value: "H5：建议尺寸1：1",
                        slot: "h5text"
                    },
                    {
                        label: "分享预览图片",
                        value: "",
                        slot: "previewimg",
                        list: [{
                            label: "小程序"
                        }, {
                            label: "h5"
                        }],
                        previewImgIndex: 0,
                    }
                ],
            }
        },
        mounted() {
            const e = this.shareList
            e[0].value = this.defaultData.title
            e[1].value = this.defaultData.desc
            e[2].value = this.defaultData.appletImg
            e[4].value = this.defaultData.officialAccountImg
        },
        methods: {
            onShopCartStyle(item, index) {
                const i = this.shareList[6];
                i.previewImgIndex = index;
            },
            shareChange(e) {
                this.$emit("change", e)
            },
        }
    });
</script>

<style>
    .preview-img-item {
        width: 78px;
        height: 32px;
        background: #EEF0F4;
        border-radius: 2px;
        color: #999999;
        justify-content: center;
        margin-right: 10px;
    }

    .preview-img-item-active {
        background: #E5F7FF;
        color: #2D8CF0;
    }

    .prev-img-contain-mp {
        box-sizing: border-box;
        width: 252px;
        padding: 8px 6px;
        margin-top: 14px;
    }

    .prev-img-contain-h5 {
        box-sizing: border-box;
        width: 252px;
        padding: 0 6px;
    }

    .prev-img-contain-h5 .title {
        margin: 20px 0;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 0px;
        color: #999999;
    }

    .upload-img-tips {
        margin-top: -10px;
        color: #999999;
    }

    .WeChat {
        background-color: #eee;
        display: flex;
        justify-content: flex-end;
    }
</style>