puzhibing
2024-02-05 640ff18d2d7f4be02ddb7f8f75e899f05545eb98
cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_edit.html
@@ -1,9 +1,55 @@
@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;
    }
    #app1{
        margin-left: 255px;
    }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">
            <div class="row">
                <input type="hidden" id="id" value="${item.id}">
                <input type="hidden" id="type" name="type" value="${type}">
                <input type="hidden" id="objectType" value="${objectType}">
                <input type="hidden" id="able" value="${able}">
                @if(objectType==1){
                <div class="form-group">
                    <label class="col-sm-3 control-label">*所在省:</label>
                    <div class="col-sm-4">
@@ -24,6 +70,7 @@
                        </select>
                    </div>
                </div>
                @}
                <div class="form-group">
                    <label class="col-sm-3 control-label">*所属门店:</label>
                    <div class="col-sm-4">
@@ -44,6 +91,16 @@
                        </select>
                    </div>
                </div>
                <div class="form-group" ${type == 1||type == 3 ? 'hidden=hidden' : ''}>
                <label class="col-sm-3 control-label">*假期有效期:</label>
                <div class="col-sm-4">
                    <input class="form-control" id="holitime" name="holitime" value="${holi!}">
                </div>
            </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">*课包名称:</label>
                    <div class="col-sm-4">
@@ -71,28 +128,44 @@
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">*最多预约人数:</label>
                <div class="form-group" ${type == 3 ? 'hidden=hidden' : ''}>
                    <label class="col-sm-3 control-label" >*最多预约人数:</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="maxSubscribeNumber" name="maxSubscribeNumber" value="${item.maxSubscribeNumber}" type="number" min="0" placeholder="请输入最多预约人数">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">*上课时间:</label>
                <div class="form-group" ${type == 3 ? 'hidden=hidden' : ''}>
                    <label class="col-sm-3 control-label" >*上课时间:</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="classStartTime" name="classStartTime" value="${classTime}" placeholder="请选择">
                        @for(obj in classWeeks){
                        <input type="checkbox" name="classWeeks" value="${obj.value}" ${able==1 ? 'disabled' :'' }   ${obj.checked ? 'checked' : ''}> ${obj.value}&nbsp;&nbsp;&nbsp;&nbsp;
                        @}
<!--                        <input class="form-control" id="classStartTime" name="classStartTime" value="${classTime}" placeholder="请选择">-->
                    </div>
                </div>
                <div class="form-group">
                <div class="form-group" ${type == 3 ? 'hidden=hidden' : ''} >
                    <label class="col-sm-3 control-label"></label>
                    <div class="col-sm-8">
                        @for(obj in classWeeks){
                        <input type="checkbox" name="classWeeks" value="${obj.value}" ${obj.checked ? 'checked' : ''}> ${obj.value}&nbsp;&nbsp;&nbsp;&nbsp;
                    <div class="form-group" style="display: flex; align-items: center;" id = "dayTime" >
                        <div style="display:flex">
                            <input class="form-control"  value="${time1}" id="classStartTime" name="classStartTime" placeholder="请选择" style="width: 200px;" ${able==1 ? 'disabled' :'' }>
                            <i class="fa fa-plus-circle" style="font-size: 24px; margin-left: 10px;" onclick="${able != 1 ? 'addTime()' : ''}" ${able == 1 ? 'disabled' : ''}></i>
                        </div>
                        @for(o in times!){
                        <div style="display:flex">
                            <input class="form-control"  value="${o}" id="classStartTime" name="classStartTime" placeholder="请选择" style="width: 200px;" ${able==1 ? 'disabled' :'' }>
                            <i class="fa fa-trash-o" style="font-size:24px" onclick="${able != 1 ? 'removePrice1(this)' : ''}" ${able == 1 ? 'disabled' : ''}></i>
                        </div>
                        @}
                    </div>
                </div>
                <div class="form-group">
                <div class="form-group"  ${type == 2||type == 3 ? 'hidden=hidden' : ''}>
                    <label class="col-sm-3 control-label">*扣除课时数:</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="codeTime" name="codeTime" value="${item.codeTime}" type="number" min="0" placeholder="请输入每节课扣除课时数">
@@ -121,20 +194,47 @@
                    <label class="col-sm-3 control-label head-scu-label"></label>
                    <label>推荐像素:210x280px</label>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label head-scu-label">*详情页</label>
                    <div class="col-sm-2">
                        <div id="detailDrawingPreId">
                            <div><img width="100px" height="100px" src="${item.detailDrawing}"></div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="head-scu-btn upload-btn" id="detailDrawingBtnId">
                            <i class="fa fa-upload"></i>&nbsp;上传
                        </div>
                    </div>
                    <input type="hidden" id="detailDrawing" value="${item.detailDrawing}"/>
                </div>
<!--                <div class="form-group">-->
<!--                    <label class="col-sm-3 control-label head-scu-label">*详情页</label>-->
<!--                    <div class="col-sm-2">-->
<!--                        <div id="detailDrawingPreId">-->
<!--                            <div><img width="100px" height="100px" src="${item.detailDrawing}"></div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-sm-2">-->
<!--                        <div class="head-scu-btn upload-btn" id="detailDrawingBtnId">-->
<!--                            <i class="fa fa-upload"></i>&nbsp;上传-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <input type="hidden" id="detailDrawing" value="${item.detailDrawing}"/>-->
<!--                </div>-->
<div class="row" id="app1">
    <div class="form-group">
        <label class="col-sm-3 control-label head-scu-label">*详情页(请上传不超过五张图片): </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="."
                    :file-list="imageUrl2"
                    :on-success="handleAvatarSuccess"
                    :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="imageUrl2" alt="">
            </el-dialog>
        </div>
    </div>
</div>
                <div class="form-group">
                    <label class="col-sm-3 control-label head-scu-label"></label>
                    <label>推荐像素:780x440px</label>
@@ -173,16 +273,16 @@
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">*课时有效期:</label>
                    <div class="col-sm-4">
                    <label class="col-sm-3 control-label" ${type == 2||type == 3 ? 'hidden=hidden' : ''}>*课时有效期:</label>
                    <div class="col-sm-4" ${type == 2||type == 3 ? 'hidden=hidden' : ''}>
                        购买后 <input id="validDays" name="validDays" type="number" value="${item.validDays}" min="0" placeholder="天数" style="width: 80px;background-color: #FFFFFF;background-image: none;border: 1px solid #e5e6e7;border-radius: 1px;color: inherit;padding: 6px 12px;"> 天内有效
                    </div>
                </div>
                <div id="price">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">*课时数:</label>
                        <label class="col-sm-3 control-label" >${type == 2||type == 3 ? '' : '*课时数:'}</label>
                        <div class="col-sm-8">
                            <span class="classNumber_span"><input class="classNumber" type="number" value="${coursePackagePaymentConfig.classHours}" min="0" placeholder="请输入" style="width: 110px;background-color: #FFFFFF;background-image: none;border: 1px solid #e5e6e7;border-radius: 1px;color: inherit;padding: 6px 12px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="classNumber_span" ${type == 2||type == 3 ? 'hidden=hidden' : ''}><input class="classNumber" type="number" value="${coursePackagePaymentConfig.classHours}" min="0" placeholder="请输入" style="width: 110px;background-color: #FFFFFF;background-image: none;border: 1px solid #e5e6e7;border-radius: 1px;color: inherit;padding: 6px 12px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="cash_span">
                                @if(cashPayment){
                                现金支付:<input class="cash" type="number" value="${coursePackagePaymentConfig.cashPayment}" min="0" placeholder="请输入金额" style="width: 110px;background-color: #FFFFFF;background-image: none;border: 1px solid #e5e6e7;border-radius: 1px;color: inherit;padding: 6px 12px;"> ¥&nbsp;&nbsp;&nbsp;&nbsp;
@@ -193,16 +293,16 @@
                                玩湃币支付:<input class="paiCoin" type="number" value="${coursePackagePaymentConfig.playPaiCoin}" min="0" placeholder="请输入金额" style="width: 110px;background-color: #FFFFFF;background-image: none;border: 1px solid #e5e6e7;border-radius: 1px;color: inherit;padding: 6px 12px;"> 币&nbsp;&nbsp;&nbsp;&nbsp;
                                @}
                            </span>
                            <input type="text" id="counpons1" value="${couponIds}" class="counpons">
                            <#button btnCss="info" name="优惠卷" id="ensure" icon="fa-check" clickFun="CoursePackageInfo.openDia1(1)"/>
                            <i class="fa fa-plus-circle" style="font-size:24px" onclick="addPrice()"></i>
                            <input type="hidden" id="counpons1" value="${couponIds}" class="counpons">
                            <#button btnCss="info" name="优惠券" id="ensure" icon="fa-check" clickFun="CoursePackageInfo.openDia(1)"/>
                            <i class="fa fa-plus-circle" style="font-size:24px" onclick="addPrice(${type})"></i>
                        </div>
                    </div>
                    @for(obj in coursePackagePaymentConfigs){
                    <div class="form-group">
                        <label class="col-sm-3 control-label">*课时数:</label>
                        <label class="col-sm-3 control-label">${type == 2||type == 3 ? '' : '*课时数:'}</label>
                        <div class="col-sm-8">
                            <span class="classNumber_span"><input class="classNumber" type="number" value="${obj.classHours}" min="0" placeholder="请输入" style="width: 110px;background-color: #FFFFFF;background-image: none;border: 1px solid #e5e6e7;border-radius: 1px;color: inherit;padding: 6px 12px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="classNumber_span" ${type == 2||type == 3 ? 'hidden=hidden' : ''}><input class="classNumber" type="number" value="${obj.classHours}" min="0" placeholder="请输入" style="width: 110px;background-color: #FFFFFF;background-image: none;border: 1px solid #e5e6e7;border-radius: 1px;color: inherit;padding: 6px 12px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="cash_span">
                                @if(cashPayment){
                                现金支付:<input class="cash" type="number" value="${obj.cashPayment}" min="0" placeholder="请输入金额" style="width: 110px;background-color: #FFFFFF;background-image: none;border: 1px solid #e5e6e7;border-radius: 1px;color: inherit;padding: 6px 12px;"> ¥&nbsp;&nbsp;&nbsp;&nbsp;
@@ -213,7 +313,8 @@
                                玩湃币支付:<input class="paiCoin" type="number" value="${obj.playPaiCoin}" min="0" placeholder="请输入金额" style="width: 110px;background-color: #FFFFFF;background-image: none;border: 1px solid #e5e6e7;border-radius: 1px;color: inherit;padding: 6px 12px;"> 币&nbsp;&nbsp;&nbsp;&nbsp;
                                @}
                            </span>
                            <i class="fa fa-trash-o" style="font-size:24px" onclick="removePrice(4, this)"></i>
                            <input type="hidden" id="counpons${obj.id}" value="${obj.couponIds}" class="counpons">                            <#button btnCss="info" name="优惠券" id="ensure" icon="fa-check" clickFun="CoursePackageInfo.openDia(${obj.id})"/>
                            <i class="fa fa-trash-o" style="font-size:24px" onclick="removePrice(this)"></i>
                        </div>
                    </div>
                    @}
@@ -229,13 +330,84 @@
    </div>
</div>
<script src="${ctxPath}/modular/system/coursePackage/coursePackage_info.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script type="text/javascript">
    let id = "${item.detailDrawing}"
    let obj = []
    var vue2 = new Vue({
        el: '#app1',
        props: {
            // 数量限制
            limit: {
                type: Number,
                default: 2
            },
        },
        data: {
            autoUpload: true,//自动上传
            imageUrl1: '',//模型数据,用于上传图片完成后图片预览
            imageUrl2: [],
            dialogVisible: false
        },
        methods: {
            handleAvatarSuccess(res, file) {
                file.url =file.response
                CoursePackageInfo.goodsPicArray1.push(file);
            },
            changeImg(){
                var i = id.split(",")
                for (let j = 0; j <i.length; j++) {
                    let obj={
                        fileName:i[j],
                        uuid:i[j],
                        url:i[j],
                        response:i[j],
                    }
                    this.imageUrl2.push(obj)
                }
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                }
                return isLt2M;
            },
            handleRemove(file, fileList) {
                CoursePackageInfo.goodsPicArray1 = CoursePackageInfo.goodsPicArray1.filter(item => {
                    return item.uid != file.uid;
                });
            },
        },
        created() {
            this.changeImg()
            CoursePackageInfo.goodsPicArray1 = this.imageUrl2
        },
    });
    console.log("============>"+`${couponIds}`)
    laydate.render({
        elem: '#classStartTime'
        ,type: 'time'
        ,range: true
    });
    laydate.render({
        elem: '#holitime'
        ,range: true //或 range: '~' 来自定义分割字符
    });
    var avatarUp = new $WebUpload("coverDrawing");
    avatarUp.setUploadBarId("progressBar");
@@ -248,5 +420,21 @@
    var avatarUp1 = new $WebUpload("introduceDrawing");
    avatarUp1.setUploadBarId("progressBar");
    avatarUp1.init();
    function addTime(){
        var i =  $('#dayTime > div').length
        let htmlStr ='           <div style="display:flex">\n' +
            '                                <input class="form-control" id="classStartTime'+i+'" name="classStartTime" placeholder="请选择" style="width: 200px;">\n' +
            '                                <i class="fa fa-trash-o" style="font-size:24px" onclick="removePrice1(this)"></i>\n' +
            '                            </div>'
        $('#dayTime').append(htmlStr);
        console.log("========="+i)
        laydate.render({
            elem: '#classStartTime'+i,
            type: 'time',
            range: true
        });
    }
</script>
@}