引入了elementui组件+vue组件，实现了多图片上传+限制数量+图片回显+特定样式

lisy

2023-08-01 e87b7016de58a8ef9f18658c75f7c8e31941a2a4

 cloud-server-management/src/main/webapp/WEB-INF/view/system/tCoupon/TCouponAdd.html

@@ -1,11 +1,48 @@
@layout("/common/_container.html"){
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        height: 100px;
        width: 100px;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        margin-top: 32px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    .col-sm-12 {
        margin-top: 20px;
    }

    .col-sm-12 select {
        height: 33px;
    }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">
            <div class="row">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>优惠券名称: </label>
                        <label class="col-sm-3 control-label">*优惠券名称: </label>
                        <div class="col-sm-9">
                            <input class="form-control" id="name" name="name" autocomplete="off" placeholder="请输入优惠券名称">
                        </div>
@@ -17,7 +54,7 @@
                <div class="col-sm-5">
                    <div class="form-group">
                        <div class="initialLevel col-sm-12 control-label form-group">
                            <label class="col-sm-3 control-label"><font style="color:red">*</font>优惠券类型: </label>
                            <label class="col-sm-3 control-label">*优惠券类型: </label>
                            <input class="col-sm-1" style="margin-left: 1.7%;width: 13px;height: 13px;"
                                   name="prescription" onclick="radio1()"
                                   value="1" type="radio">
@@ -56,10 +93,10 @@
            <div class="row">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>优惠券说明: </label>
                        <label class="col-sm-3 control-label">*优惠券说明: </label>
                        <div class="col-sm-9">
                            <textarea type="checkbox" id="illustrate" style="margin-left: 1%;width: 75%;height: 120px"
                                      placeholder="请输入优惠券名称"></textarea>
                                      placeholder="请输入优惠券说明"></textarea>
                        </div>
                    </div>
                </div>
@@ -69,14 +106,14 @@
                <div class="col-sm-5">
                    <div class="form-group">
                        <div class="initialLevel col-sm-12 control-label form-group">
                            <label class="col-sm-3 control-label"><font  style="color:red">*</font>发放方式: </label>
                            <input class="col-sm-1 control-label" onclick="distributionMethod1()" name="distributionMethod" type="radio"
                            <label class="col-sm-3 control-label">*发放方式: </label>
                            <input class="col-sm-1 control-label"  name="distributionMethod" type="radio"
                                   value="1" style="margin-top: 10px"/>
                            <label class="col-sm-1" style="margin-left: -15px;width: 16%;margin-top: 7px">积分购买</label>
                            <input class="col-sm-1 control-label" name="distributionMethod" onclick="distributionMethod2()" type="radio"
                            <input class="col-sm-1 control-label" name="distributionMethod"  type="radio"
                                   value="2" checked style="margin-left: 5%;margin-top: 10px;width: 13px;height: 13px"/>
                            <label class="col-sm-1" style="width: 16%;margin-top: 7px">注册赠送</label>
                            <input class="col-sm-1 control-label" name="distributionMethod" onclick="distributionMethod3()" type="radio"
                            <input class="col-sm-1 control-label" name="distributionMethod"  type="radio"
                                   value="3" checked style="margin-left: 4%;margin-top: 10px;width: 13px;height: 13px"/>
                            <label class="col-sm-1" style="width: 16%;margin-top: 7px">自动发券</label>
                        </div>
@@ -88,7 +125,7 @@
                <div class="col-sm-5">
                    <div class="form-group">
                        <div class="initialLevel col-sm-12 control-label form-group">
                            <label class="col-sm-3 control-label"><font  style="color:red">*</font>兑换方式: </label>
                            <label class="col-sm-3 control-label">*兑换方式: </label>
                            <input class="col-sm-1 control-label" onclick="exchangeMethod1()" name="exchangeMethod" type="radio"
                                   value="1" style="margin-top: 10px"/>
                            <label class="col-sm-1" style="margin-left: -15px;width: 16%;margin-top: 7px">积分</label>
@@ -97,7 +134,7 @@
                            <label class="col-sm-1" style="width: 20%;margin-top: 7px">现金+积分</label>
                            <input class="col-sm-1 control-label" name="exchangeMethod" onclick="exchangeMethod3()" type="radio"
                                   value="2" checked style="margin-left: 5%;margin-top: 10px;width: 13px;height: 13px"/>
                            <label class="col-sm-1" style="width: 20%;margin-top: 7px">现金</label>
                            <label class="col-sm-1" style="width: 9%;margin-top: 7px">现金</label>
                        </div>
                    </div>
                </div>
@@ -106,19 +143,26 @@
            <div class="row" id="needAmount">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>所需现金: </label>
                        <input type="text" class="col-sm-1" id="requiredCash"
                               onkeyup="value=value.replace(/\D/g,'')"/>
                        <label class="col-sm-3 control-label">*所需现金</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="requiredCash" placeholder="请输入所需现金" name="requiredCash" autocomplete="off" type="text"
                                   onkeyup="this.value=this.value.replace(/\D/g,'')">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                </div>
            </div>

            <div class="row" id="needIntegral">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>所需积分: </label>
                        <input type="text" class="col-sm-1" id="requiredPoints"/>
                        <label class="col-sm-3 control-label">*所需积分</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="requiredPoints" placeholder="请输入所需积分" name="requiredPoints" autocomplete="off" type="text"
                                   onkeyup="this.value=this.value.replace(/\D/g,'')">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                </div>
            </div>

@@ -126,61 +170,92 @@
                <div class="col-sm-5">
                    <div class="form-group">
                        <div class="initialLevel col-sm-12 control-label form-group">
                            <label class="col-sm-3 control-label"><font  style="color:red">*</font>用户人群: </label>
                            <input class="col-sm-1 control-label" onclick="userGroup1()" name="userGroup" type="radio"
                            <label class="col-sm-3 control-label">*用户人群: </label>
                            <input class="col-sm-1 control-label" name="userGroup" type="radio"
                                   value="1" style="margin-top: 10px"/>
                            <label class="col-sm-1" style="margin-left: -15px;width: 16%;margin-top: 7px">全部用户</label>
                            <input class="col-sm-1 control-label" name="userGroup" onclick="userGroup2()" type="radio"
                            <input class="col-sm-1 control-label" name="userGroup" type="radio"
                                   value="2" checked style="margin-left: 5%;margin-top: 10px;width: 13px;height: 13px"/>
                            <label class="col-sm-1" style="width: 16%;margin-top: 7px">年度会员</label>
                            <input class="col-sm-1 control-label" name="userGroup" onclick="userGroup3()" type="radio"
                            <input class="col-sm-1 control-label" name="userGroup" type="radio"
                                   value="3" checked style="margin-left: 4%;margin-top: 10px;width: 13px;height: 13px"/>
                            <label class="col-sm-1" style="width: 25%;margin-top: -16px">已有学员用户</label>
                            <label class="col-sm-1" style="width: 18%;margin-top: 5px">已有学员用户</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" >
            <div class="row">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>发放数量: </label>
                        <input type="text" class="col-sm-1" id="issued"/>
                        <label class="col-sm-3 control-label">*发放数量</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="quantityIssued" placeholder="请输入发放数量" name="quantityIssued" autocomplete="off" type="text"
                                   onkeyup="this.value=this.value.replace(/\D/g,'')">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">*限领数量</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="pickUpQuantity" placeholder="请输入限领数量" name="pickUpQuantity" autocomplete="off" type="text"
                                   onkeyup="this.value=this.value.replace(/\D/g,'')">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                </div>
            </div>

            <div class="row" >
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>限领数量: </label>
                        <input type="text" class="col-sm-1" id="restrictedQty"/>
                    </div>
                </div>
            </div>

            <div class="row" >
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>有效期: </label>
                        <label class="col-sm-3 control-label">*有效期: </label>
                        <input type="text" style="width: 30%" class="form-control" id="periodOfValidity" placeholder="请选择"/>
                    </div>
                </div>
            </div>

            <div class="row" >
            <div class="row" id="app">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>商品封面: </label>
                        <label class="col-sm-3 control-label">*商品封面: </label>
                        <div class="col-sm-2">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/tCouponManage/uploadPic"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" >
                <div class="col-sm-5">
            <div class="row" id="app1">
                <div class="col-sm-5" style="width: 100%">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>商品图片(请上传不超过五张图片): </label>
                        <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false">
                        <label class="col-sm-3 control-label" style="width: 15%;margin-left: 5%">*商品图片(请上传不超过五张图片): </label>
                        <div class="col-sm-2" style="width: 100%;margin-left: 11%;margin-top: 1%">
                            <el-upload
                                    :limit="5"
                                    class="avatar-uploader"
                                    action="/tCouponManage/uploadPic"
                                    list-type="picture-card"
                                    accept="."
                                    :on-success="handleAvatarSuccess"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="imageUrl1" alt="">
                        </div>
                    </div>
                </div>
            </div>
@@ -189,7 +264,7 @@
                <div class="col-sm-5">
                    <div class="form-group">
                        <div class="initialLevel col-sm-12 control-label form-group">
                            <label class="col-sm-3 control-label"><font  style="color:red">*</font>适用范围: </label>
                            <label class="col-sm-3 control-label">*适用范围: </label>
                            <input class="col-sm-1 control-label" onclick="scopeOfApplication1()" name="company" type="radio"
                                   value="0" style="margin-top: 10px"/>
                            <label class="col-sm-1" style="margin-left: -15px;width: 16%;margin-top: 7px">全国通用</label>
@@ -207,7 +282,7 @@
            <div class="row" id="citySelect">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>指定城市: </label>
                        <label class="col-sm-3 control-label">*指定城市: </label>
                        <select id="province" onchange="changeCity()"></select>
                        <label class="col-sm-1" style="width: 16%;margin-top: 7px">省</label>
                        <select id="city"></select>
@@ -224,7 +299,7 @@
            <div class="row" id="storeSelect">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><font  style="color:red">*</font>指定门店: </label>
                        <label class="col-sm-3 control-label">*指定门店: </label>
                        <button onclick="couponInfoDlg.employeeSelection()"
                                style="height: 22px;margin-left: -165px;width: 82px;background-color: #4a8ff1;color: white;z-index: 15;position:relative;border: none">
                            选择门店
@@ -262,37 +337,74 @@
        </div>
    </div>
</div>
<script src="${ctxPath}/js/vue/vue.js"></script>
<script src="${ctxPath}/js/elementui/index.js"></script>
<link rel="stylesheet" href="${ctxPath}/js/elementui/index.css">
<script src="${ctxPath}/modular/system/tCoupon/TCouponInfo.js"></script>
<!--引入fileinput样式-->
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/css/fileinput.min.css" rel="stylesheet">
<!--引入fileinput插件-->
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/locales/zh.min.js"></script>
<script type="text/javascript">
    laydate.render({
        elem: '#periodOfValidity',
        type: 'date',
        range: true
    });
</script>
<script>
    $("#file-1").fileinput({
        overwriteInitial: false,
        previewFileType: "image",
        allowedFileExtensions: ["jpg", "png", "gif"],
        maxFileSize: 1024 * 10,
        maxFilesNum: 10,
        showUploadedThumbs: false,
        resizeImage: true,
        language: "zh",
        initialPreview: [
            "<img src='http://placehold.it/200x150' class='file-preview-image' alt='不支持预览'/>",
            "<img src='http://placehold.it/200x150' class='file-preview-image' alt='不支持预览'/>"
        ],
        initialPreviewConfig: [
            {caption: "image-1.jpg", size: 327360, width: "120px", url: "/images/delete", key: 1},
            {caption: "image-2.png", size: 436389, width: "120px", url: "/images/delete", key: 2}
        ]
    var vue1 = new Vue({
        el: '#app',
        data: {
            autoUpload: true,//自动上传
            imageUrl: '',//模型数据，用于上传图片完成后图片预览
        },
        methods: {
            handleAvatarSuccess(res, file) {
                couponInfoDlg.goodsCover = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                }
                return isLt2M;
            },
            handleRemove(file, fileList) {
                couponInfoDlg.goodsCover = '';
            },
        },
        created() {
        },
    });

    var vue2 = new Vue({
        el: '#app1',
        props: {
            // 数量限制
            limit: {
                type: Number,
                default: 2
            },
        },
        data: {
            autoUpload: true,//自动上传
            imageUrl1: '',//模型数据，用于上传图片完成后图片预览
            dialogVisible: false
        },
        methods: {
            handleAvatarSuccess(res, file) {
                couponInfoDlg.goodsPicArray.push(file);
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                }
                return isLt2M;
            },
            handleRemove(file, fileList) {
                couponInfoDlg.goodsPicArray = couponInfoDlg.goodsPicArray.filter(item => {
                    return item.uid != file.uid;
                });
            },
        },
        created() {
        },
    });
</script>
@}