qimall/backend/modules/mall/views/decorate/poster.php

<?php
/**
  * @link:http://www.gdqijianshi.com/
 * copyright: Copyright (c) 2020 广东七件事集团
 * author: zal
 */
?>

<style>
    .mobile-box {
        width: 400px;
        height: 740px;
        padding: 35px 11px;
        background-color: #fff;
        border-radius: 30px;
        margin-right: 20px;
    }

    .bg-box {
        position: relative;
        border: 1px solid #e2e3e3;
        width: 750px;
        height: 1334px;
        zoom: 0.5;
    }

    .bg-pic {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-position: center;
    }

    .title {
        padding: 15px 0;
        background-color: #f7f7f7;
        margin-bottom: 10px;
    }

    .component-item {
        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        padding: 10px 0;
        border: 1px solid #e2e2e2;
        margin-right: 15px;
        margin-top: 15px;
        border-radius: 5px;
    }

    .component-item.active {
        border: 1px solid #7BBDFC;
    }

    .component-item-remove {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        width: 28px;
        height: 28px;
    }

    .component-attributes-box {
        color: #ff4544;
    }

    .box-card {
        margin-top: 35px;
    }

    .el-tabs__header {
        padding: 0 20px;
        height: 56px;
        line-height: 56px;
        background-color: #fff;
    }

    .form-body {
        padding: 20px 35% 20px 20px;
        background-color: #fff;
        margin-bottom: 20px;
        width: 100%;
        height: 100%;
        position: relative;
        min-width: 640px;
    }

    .button-item {
        padding: 9px 25px;
        position: absolute !important;
        bottom: -52px;
        left: 0;
    }

    .el-card, .el-tabs__content {
        overflow: visible;
    }
</style>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;"
             v-loading="cardLoading">
        <el-form v-if="ruleForm" :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="20%">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="商品海报" name="second">
                    <div style="display: flex;">
                        <div class="mobile-box" flex="dir:top">
                            <div class="bg-box">
                                <div class="bg-pic" :style="{'background-image':'url('+ruleForm.goods.bg_pic.url+')'}">
                                </div>
                                <com-image
                                        v-if="ruleForm.goods.pic.is_show == 1"
                                        mode="aspectFill" width='375px' height="375px"
                                        :style="{
                                                    position: 'absolute',
                                                    width: ruleForm.goods.pic.width + 'px',
                                                    height: ruleForm.goods.pic.height + 'px',
                                                    top: ruleForm.goods.pic.top + 'px',
                                                    left: ruleForm.goods.pic.left + 'px'}"
                                        src="resources/img/mall/poster/default_goods.jpg">
                                </com-image>
                                <com-image v-if="ruleForm.goods.qr_code.is_show == 1"
                                           mode="aspectFill"
                                           :radius="ruleForm.goods.qr_code.type == 1 ? '50%' : '0%'"
                                           :style="{
                                                     position: 'absolute',
                                                     top: ruleForm.goods.qr_code.top + 'px',
                                                     left: ruleForm.goods.qr_code.left + 'px'}"
                                           :width='ruleForm.goods.qr_code.size + ""'
                                           :height='ruleForm.goods.qr_code.size + ""'
                                           src="resources/img/mall/poster/default_qr_code.png">
                                </com-image>
                                <com-image v-if="ruleForm.goods.head.is_show == 1"
                                           mode="aspectFill"
                                           radius="50%"
                                           :style="{
                                                    position: 'absolute',
                                                    top: ruleForm.goods.head.top + 'px',
                                                    left: ruleForm.goods.head.left + 'px'}"
                                           :width='ruleForm.goods.head.size + ""'
                                           :height='ruleForm.goods.head.size + ""'
                                           src="resources/img/mall/poster/default_head.png">
                                </com-image>
                                <span v-if="ruleForm.goods.nickname.is_show == 1"
                                      :style="{
                                                    position: 'absolute',
                                                    top: ruleForm.goods.nickname.top + 'px',
                                                    left: ruleForm.goods.nickname.left + 'px',
                                                    fontSize: ruleForm.goods.nickname.font * 2 + 'px',
                                                    color: ruleForm.goods.nickname.color}">
                                          用户昵称
                                    </span>


                                <span v-if="ruleForm.goods.name.is_show == 1"
                                      :style="{
                                                position: 'absolute',
                                                top: ruleForm.goods.name.top + 'px',
                                                left: ruleForm.goods.name.left + 'px',
                                                fontSize: ruleForm.goods.name.font * 2 + 'px',
                                                color: ruleForm.goods.name.color}">
                                    商品名称|商品名称
                                </span>
                                <span v-if="ruleForm.goods.price.is_show == 1"
                                      :style="{
                                                position: 'absolute',
                                                top: ruleForm.goods.price.top + 'px',
                                                left: ruleForm.goods.price.left + 'px',
                                                fontSize: ruleForm.goods.price.font * 2 + 'px',
                                                color: ruleForm.goods.price.color}">
                                        ￥99.00
                                </span>
                                <span v-if="ruleForm.goods.desc.is_show == 1"
                                      :style="{
                                                width: ruleForm.goods.desc.width + 'px',
                                                wordWrap: 'break-word',
                                                wordBreak: 'normal',
                                                position: 'absolute',
                                                top: ruleForm.goods.desc.top + 'px',
                                                left: ruleForm.goods.desc.left + 'px',
                                                fontSize: ruleForm.goods.desc.font * 2 + 'px',
                                                color: ruleForm.goods.desc.color}">
                                        {{ruleForm.goods.desc.text}}
                                </span>
                            </div>
                        </div>
                        <div class="form-body" flex="dir:top">
                            <div flex="dir:left" style="margin-bottom: 15px">
                                <com-attachment :multiple="false" :max="1"
                                                v-model="ruleForm.goods.bg_pic.url">
                                    <el-tooltip class="item"
                                                effect="dark"
                                                content="建议尺寸:750 * 1334"
                                                placement="top">
                                        <el-button size="mini">
                                            {{ruleForm.goods.bg_pic.url ? '更换背景图' : '添加背景图'}}
                                        </el-button>
                                    </el-tooltip>
                                </com-attachment>
                                <el-button v-if="ruleForm.goods.bg_pic.url" @click="removeBgPic()"
                                           style="margin-left: 10px;"
                                           type="danger"
                                           size="mini">
                                    删除背景
                                </el-button>
                            </div>
                            <div flex="wrap:wrap">
                                <div v-for="(item,index) in goodsComponent"
                                     @click="componentItemClick(index)"
                                     class="component-item"
                                     :class="goodsComponentKey == item.key ? 'active' : ''"
                                     flex="dir:top cross:center main:center">
                                    <img :src="item.icon_url">
                                    <div>{{item.title}}</div>
                                    <img v-if="test2(index)"
                                         @click.stop="componentItemRemove(index)"
                                         class="component-item-remove"
                                         src="resources/img/mall/poster/icon_delete.png">
                                </div>
                            </div>
                            <el-card shadow="never" class="box-card" style="width: 100%;">
                                <div slot="header">
                                    <span v-if="goodsComponentKey == 'head'">头像</span>
                                    <span v-if="goodsComponentKey == 'nickname'">昵称</span>
                                    <span v-if="goodsComponentKey == 'pic'">商品图片设置</span>
                                    <span v-if="goodsComponentKey == 'name'">商品名称设置</span>
                                    <span v-if="goodsComponentKey == 'price'">商品价格设置</span>
                                    <span v-if="goodsComponentKey == 'desc'">海报描述设置</span>
                                    <span v-if="goodsComponentKey == 'qr_code'">二维码设置</span>
                                </div>
                                <div>
                                    <template v-if="goodsComponentKey == 'head'">
                                        <el-form-item label="大小">
                                            <el-slider
                                                    :min=40
                                                    :max=300
                                                    v-model="ruleForm.goods.head.size"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="上间距">
                                            <el-slider
                                                    :min=0
                                                    :max=1334-(ruleForm.goods.head.size)
                                                    v-model="ruleForm.goods.head.top"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="左间距">
                                            <el-slider
                                                    :min=0
                                                    :max=750-(ruleForm.goods.head.size)
                                                    v-model="ruleForm.goods.head.left"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                    </template>
                                    <template v-else-if="goodsComponentKey == 'nickname'">
                                        <el-form-item label="大小">
                                            <el-slider
                                                    :min=12
                                                    :max=40
                                                    v-model="ruleForm.goods.nickname.font"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="上间距">
                                            <el-slider
                                                    :min=0
                                                    :max=1334-(ruleForm.goods.nickname.font)
                                                    v-model="ruleForm.goods.nickname.top"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="左间距">
                                            <el-slider
                                                    :min=0
                                                    :max=750-(ruleForm.goods.nickname.font)
                                                    v-model="ruleForm.goods.nickname.left"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="颜色">
                                            <el-color-picker
                                                    style="margin-left: 20px;"
                                                    color-format="rgb"
                                                    v-model="ruleForm.goods.nickname.color"
                                                    :predefine="predefineColors">
                                            </el-color-picker>
                                        </el-form-item>
                                    </template>

                                    <template v-else-if="goodsComponentKey == 'name'">
                                        <el-form-item label="大小">
                                            <el-slider
                                                    :min=12
                                                    :max=30
                                                    v-model="ruleForm.goods.name.font"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="上间距">
                                            <el-slider
                                                    :min=0
                                                    :max=1334-(ruleForm.goods.name.font)
                                                    v-model="ruleForm.goods.name.top"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="左间距">
                                            <el-slider
                                                    :min=0
                                                    :max=750-(ruleForm.goods.name.font)
                                                    v-model="ruleForm.goods.name.left"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="颜色">
                                            <el-color-picker
                                                    style="margin-left: 20px;"
                                                    color-format="rgb"
                                                    v-model="ruleForm.goods.name.color"
                                                    :predefine="predefineColors">
                                            </el-color-picker>
                                        </el-form-item>
                                    </template>

                                    <template v-else-if="goodsComponentKey == 'price'">
                                        <el-form-item label="大小">
                                            <el-slider
                                                    :min=12
                                                    :max=30
                                                    v-model="ruleForm.goods.price.font"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="上间距">
                                            <el-slider
                                                    :min=0
                                                    :max=1334-(ruleForm.goods.price.font)
                                                    v-model="ruleForm.goods.price.top"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="左间距">
                                            <el-slider
                                                    :min=0
                                                    :max=750-(ruleForm.goods.price.font)
                                                    v-model="ruleForm.goods.price.left"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="颜色">
                                            <el-color-picker
                                                    style="margin-left: 20px;"
                                                    color-format="rgb"
                                                    v-model="ruleForm.goods.price.color"
                                                    :predefine="predefineColors">
                                            </el-color-picker>
                                        </el-form-item>
                                    </template>

                                    <template v-else-if="goodsComponentKey == 'qr_code'">
                                        <el-form-item label="样式">
                                            <el-radio v-model="ruleForm.goods.qr_code.type" :label="1">圆形</el-radio>
                                            <el-radio v-model="ruleForm.goods.qr_code.type" :label="2">方形</el-radio>
                                        </el-form-item>
                                        <el-form-item label="大小">
                                            <el-slider
                                                    :min=35
                                                    :max=300
                                                    v-model="ruleForm.goods.qr_code.size"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="上间距">
                                            <el-slider
                                                    :min=0
                                                    :max=1334-(ruleForm.goods.qr_code.size)
                                                    v-model="ruleForm.goods.qr_code.top"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="左间距">
                                            <el-slider
                                                    :min=0
                                                    :max=750-(ruleForm.goods.qr_code.size)
                                                    v-model="ruleForm.goods.qr_code.left"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                    </template>

                                    <template v-else-if="goodsComponentKey == 'desc'">
                                        <el-form-item label="文本内容">
                                            <el-input v-model="ruleForm.goods.desc.text"></el-input>
                                        </el-form-item>
                                        <el-form-item label="大小">
                                            <el-slider
                                                    :min=12
                                                    :max=30
                                                    v-model="ruleForm.goods.desc.font"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="上间距">
                                            <el-slider
                                                    :min=0
                                                    :max=1334-(ruleForm.goods.desc.font)
                                                    v-model="ruleForm.goods.desc.top"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="左间距">
                                            <el-slider
                                                    :min=0
                                                    :max=750-(ruleForm.goods.desc.font)
                                                    v-model="ruleForm.goods.desc.left"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="文本宽度">
                                            <el-slider
                                                    :min=1
                                                    :max=750
                                                    v-model="ruleForm.goods.desc.width"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="颜色">
                                            <el-color-picker
                                                    style="margin-left: 20px;"
                                                    color-format="rgb"
                                                    v-model="ruleForm.goods.desc.color"
                                                    :predefine="predefineColors">
                                            </el-color-picker>
                                        </el-form-item>
                                    </template>
                                    <template v-else-if="goodsComponentKey == 'pic'">
                                        <el-form-item label="宽度">
                                            <el-slider
                                                    :min=0
                                                    :max=750
                                                    v-model="ruleForm.goods.pic.width"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="高度">
                                            <el-slider
                                                    :min=0
                                                    :max=1334
                                                    v-model="ruleForm.goods.pic.height"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="上间距">
                                            <el-slider
                                                    :min=0
                                                    :max=1334-(ruleForm.goods.pic.height)
                                                    v-model="ruleForm.goods.pic.top"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                        <el-form-item label="左间距">
                                            <el-slider
                                                    :min=0
                                                    :max=750-(ruleForm.goods.pic.width)
                                                    v-model="ruleForm.goods.pic.left"
                                                    show-input>
                                            </el-slider>
                                        </el-form-item>
                                    </template>
                                </div>
                            </el-card>
                            <el-button class="button-item" :loading="btnLoading" type="primary"
                                       @click="store('ruleForm')" size="small">保存
                            </el-button>
                        </div>
                    </div>
                </el-tab-pane>

            </el-tabs>
        </el-form>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                ruleForm: null,
                shareComponent: [
                    {
                        key: 'head',
                        icon_url: 'resources/img/mall/poster/icon_head.png',
                        title: '头像',
                        is_active: true
                    },
                    {
                        key: 'name',
                        icon_url: 'resources/img/mall/poster/icon_name.png',
                        title: '昵称',
                        is_active: true
                    },
                    {
                        key: 'qr_code',
                        icon_url: 'resources/img/mall/poster/icon_qr_code.png',
                        title: '二维码',
                        is_active: true
                    },
                ],
                shareComponentKey: 'head',
                goodsComponent: [
                    {
                        key: 'head',
                        icon_url: 'resources/img/mall/poster/icon_head.png',
                        title: '头像',
                        is_active: true
                    },
                    {
                        key: 'nickname',
                        icon_url: 'resources/img/mall/poster/icon_name.png',
                        title: '昵称',
                        is_active: true
                    },
                    {
                        key: 'pic',
                        icon_url: 'resources/img/mall/poster/icon_pic.png',
                        title: '商品图片',
                        is_active: true
                    },
                    {
                        key: 'name',
                        icon_url: 'resources/img/mall/poster/icon_name.png',
                        title: '商品名称',
                        is_active: true
                    },
                    {
                        key: 'price',
                        icon_url: 'resources/img/mall/poster/icon_price.png',
                        title: '商品价格',
                        is_active: true
                    },
                    {
                        key: 'desc',
                        icon_url: 'resources/img/mall/poster/icon_desc.png',
                        title: '海报描述',
                        is_active: true
                    },
                    {
                        key: 'qr_code',
                        icon_url: 'resources/img/mall/poster/icon_qr_code.png',
                        title: '二维码',
                        is_active: true
                    },
                ],
                goodsComponentKey: 'pic',
                topicComponent: [
                    {
                        key: 'title',
                        icon_url: 'resources/img/mall/poster/icon_name.png',
                        title: '专题标题',
                        is_active: true
                    },
                    {
                        key: 'pic',
                        icon_url: 'resources/img/mall/poster/icon_pic.png',
                        title: '专题图片',
                        is_active: true
                    },
                    {
                        key: 'look',
                        icon_url: 'resources/img/mall/poster/icon_look.png',
                        title: '阅读量',
                        is_active: true
                    },
                    {
                        key: 'content',
                        icon_url: 'resources/img/mall/poster/icon_content.png',
                        title: '专题内容',
                        is_active: true
                    },
                    {
                        key: 'open_desc',
                        icon_url: 'resources/img/mall/poster/icon_point.png',
                        title: '文章提示',
                        is_active: true
                    },
                    {
                        key: 'line',
                        icon_url: 'resources/img/mall/poster/icon_line.png',
                        title: '分割线',
                        is_active: true
                    },
                    {
                        key: 'desc',
                        icon_url: 'resources/img/mall/poster/icon_desc.png',
                        title: '海报描述',
                        is_active: true
                    },
                    {
                        key: 'qr_code',
                        icon_url: 'resources/img/mall/poster/icon_qr_code.png',
                        title: '二维码',
                        is_active: true
                    },
                ],
                topicComponentKey: 'title',
                rules: {},
                predefineColors: [
                    '#000',
                    '#fff',
                    '#888',
                    '#ff4544'
                ],
                btnLoading: false,
                cardLoading: false,
                activeName: 'second',
            };
        },
        computed: {
            // 控制显示的内容

            test() {
                return function (index) {
                    var isShow = this.ruleForm.share[this.shareComponent[index].key].is_show;
                    return isShow == 1 ? true : false;
                }
            },
            test2() {
                return function (index) {
                    var isShow = this.ruleForm.goods[this.goodsComponent[index].key].is_show;
                    return isShow == 1 ? true : false;
                }
            },
            test3() {
                return function (index) {
                    var isShow = this.ruleForm.topic[this.topicComponent[index].key].is_show;
                    return isShow == 1 ? true : false;
                }
            },
        },
        methods: {
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'mall/decorate/poster'
                            },
                            method: 'post',
                            data: {
                                form: self.ruleForm,
                            }
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getDetail() {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'mall/decorate/poster',
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        if (!isEmpty(e.data.data)){
                            self.ruleForm = e.data.data;
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            transformData() {
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            // 移除背景图片
            removeBgPic() {
                if (this.activeName == 'second') {
                    this.ruleForm.goods.bg_pic.url = '';
                }

                if (this.activeName == 'third') {
                    this.ruleForm.topic.bg_pic.url = '';
                }
            },
            // 添加组件
            componentItemClick(index) {
                if (this.activeName == 'first') {
                    this.shareComponent[index].is_active = true;
                    this.ruleForm.share[this.shareComponent[index].key].is_show = '1';
                    this.shareComponentKey = this.shareComponent[index].key;
                }
                if (this.activeName == 'second') {
                    this.goodsComponent[index].is_active = true;
                    this.ruleForm.goods[this.goodsComponent[index].key].is_show = '1';
                    this.goodsComponentKey = this.goodsComponent[index].key;
                }

                if (this.activeName == 'third') {
                    this.topicComponent[index].is_active = true;
                    this.ruleForm.topic[this.topicComponent[index].key].is_show = '1';
                    this.topicComponentKey = this.topicComponent[index].key;
                }
            },
            // 移除组件
            componentItemRemove(index) {
                if (this.activeName == 'first') {
                    this.shareComponent[index].is_active = false;
                    this.ruleForm.share[this.shareComponent[index].key].is_show = '0';
                    this.shareComponentKey = '';
                }
                if (this.activeName == 'second') {
                    this.goodsComponent[index].is_active = false;
                    this.ruleForm.goods[this.goodsComponent[index].key].is_show = '0';
                    this.goodsComponentKey = '';
                }

                if (this.activeName == 'third') {
                    this.topicComponent[index].is_active = false;
                    this.ruleForm.topic[this.topicComponent[index].key].is_show = '0';
                    this.topicComponentKey = '';
                }
            }
        },
        mounted: function () {
            this.getDetail();
        }
    });
</script>