qimall/backend/modules/mall/views/setting/order/sun_single.php

<template id="freight">
    <el-card class="edit-card" shadow="never">
        <div slot="header" class="clearfix">
            <div class="card-title flex-y-center">
                <div style="margin-right:12px">晒单设置</div>
                <el-switch v-model="ruleForm.sun_single.setting.value" :active-value="1" :inactive-value="0"></el-switch>
            </div>
        </div>
        <div style="min-width: 1300px;">
            <div class="main_box flex">
                <div class="main_img_box">
                    <img class="main_img" src="resources/img/mall/decorate/duihuakuangSmall.png" alt="">
                    <div class="main_content" :style="{ backgroundImage: `url(${ruleForm.sun_single.poster_background.value || 'resources/img/mall/decorate/sun_singleBg.png'})` }">
                        <div class="main_content_img">
                            <div class="main_content_border" :style="{ borderColor: ruleForm.sun_single.border_color.value || '#f4d1a7' }"></div>
                            <img class="main_content_notch" :src="ruleForm.sun_single.poster_notch.value" style="max-height: 62px;" alt="">
                            <div class="main_content_priceBg" :style="{ backgroundColor: ruleForm.sun_single.price_bg_color.value, color: ruleForm.sun_single.price_font_color.value }">
                                活动价：¥ 130.99
                            </div>    
                        </div>
                    </div>
                </div>
                <div class="edit_box">
                    <el-radio-group v-model="ruleForm.sun_single.type.value" style="padding-bottom: 20px" @change="changeSingleType">
                        <el-radio :label="0">默认模板</el-radio>
                        <el-radio :label="1">DIY</el-radio>
                    </el-radio-group>

                    <div v-show="ruleForm.sun_single.type.value == 1">
                        <com-attachment v-model="ruleForm.sun_single.poster_background.value" :multiple="false" :max="1" style="padding-bottom: 20px">
                            <el-tooltip class="item" effect="dark" content="背景建议尺寸：630*998px，高度可按需要适当增加"
                                        placement="top">
                                <el-button size="mini">更换海报背景</el-button>
                            </el-tooltip>
                        </com-attachment>

                        <com-attachment v-model="ruleForm.sun_single.poster_notch.value" :multiple="false" :max="1">
                            <el-tooltip class="item" effect="dark" content="刘海建议尺寸：582*62px，可适当缩减 边框宽度：12px"
                                        placement="top">
                                <el-button size="mini">更换刘海标题图</el-button>
                            </el-tooltip>
                        </com-attachment>

                        <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="122px">
                        <div class='form-body'>
                            <el-form-item label="边框颜色" prop="sun_single.border_color.value">
                                <el-color-picker
                                        color-format="rgb"
                                        v-model="ruleForm.sun_single.border_color.value"
                                        :predefine="predefineColors">
                                </el-color-picker>
                            </el-form-item>
                            <el-form-item label="活动价背景颜色" prop="sun_single.price_bg_color.value">
                                <el-color-picker
                                        color-format="rgb"
                                        v-model="ruleForm.sun_single.price_bg_color.value"
                                        :predefine="predefineColors">
                                </el-color-picker>
                            </el-form-item>

                            <el-form-item label="活动价字体颜色" prop="sun_single.price_font_color.value">
                                <el-color-picker
                                        color-format="rgb"
                                        v-model="ruleForm.sun_single.price_font_color.value"
                                        :predefine="predefineColors">
                                </el-color-picker>
                            </el-form-item>
                        </div>
                        </el-form>
                    </div>

                    <div class="save_btn">
                        <el-button type="primary" @click="savePoster">点击保存</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</template>