qimall/addons/OperatingNote/backend/views/notes/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-image');
?>
<style>
    .form-body {
        padding: 0;
        background-color: transparent;
        margin-bottom: 20px;
    }

    .check-all {
        float: left;
        margin-right: 25px!important;
    }
    .form-body .el-form-item {
        min-width: 850px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .button-item {
        padding: 9px 25px;
    }

    /*批量上传图片*/
    .pic-url-remark {
        font-size: 13px;
        color: #c9c9c9;
        margin-bottom: 12px;
    }

    .add-image-btn {
        width: 100px;
        height: 100px;
        color: #419EFB;
        border: 1px solid #e2e2e2;
        cursor: pointer;
    }
    .del-btn-pro{
        position: absolute;
        top: 28%;
        left: 57px;
    }
    .del-btn{
        position: absolute;
        top: -10%;
        right: -12%;
        z-index: 10;
    }

    .el-button--mini.is-circle{
        padding: 4px;
    }

    .priview-title{
        margin-bottom: 16px;
        font-size: 20px;
        font-weight: bold;
        color: #000000;
    }

    .priview-center{
        margin: 16px 11px;
        height: 86%;
        overflow-y: auto;
    }

    .preview-model{
        margin-right: 15px;
        background: #FFF;
        min-width: 375px;
        max-width: 375px;
        height: 78vh;
        overflow-wrap: anywhere;
        border-radius: 5px;
    }

    .form-right{
        flex: 1;
        overflow: auto;
        height: 78vh;
    }
    
    .card-model{
        border: 0;
        margin-bottom: 10px;
    }

    .customize-share-title{
        position: relative;
        display: inline-block;
        margin: 10px 10px 0 0;
    }

    .dp-header-placeholder {
        width: 100%;
        height: 44px;
        background-size: 100% 100%;
        z-index: 99;
        background: url("resources/img/decorate/nav/light1.png") no-repeat;
    }

    .preview-top-title{
        width: 100%;
        height: 24px;
        text-align: center;
        line-height: 24px;
        font-size: 16px;
        font-weight: 600;
    }

    /* 富文本表格样式增强 */
    .rich-text .note-app table {
        border-collapse: collapse;
        width: 100%;
        margin: 10px 0;
    }
    .rich-text .note-app table th,
    .rich-text .note-app table td {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: center;
        min-height: 30px;
        height: auto;
    }
    .rich-text .note-app table th {
        background-color: #f1f1f1;
        font-weight: bold;
    }
    /* 预览区表格样式同步 */
    .priview-center table {
        border-collapse: collapse;
        width: 100%;
        margin: 10px 0;
    }
    .priview-center table th,
    .priview-center table td {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: center;
        min-height: 30px;
        height: auto;
    }
    .priview-center table th {
        background-color: #f1f1f1;
        font-weight: bold;
    }

    .form-right::-webkit-scrollbar-thumb,.priview-center::-webkit-scrollbar-thumb{
        width: 4px;
    }

</style>
<div id="app" class="note-app" v-cloak>
    <el-card v-loading="cardLoading" shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><span style="color: #409EFF;cursor: pointer" @click="$navigate({r:'operating-note/notes/index'})">笔记管理</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{editTitle}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body" flex>
            <div class="preview-model" v-if="link_note_type != 3">
                <div class="dp-header-placeholder"></div>
                <div class="preview-top-title" flex="cross:center">
                    <div class="el-icon-arrow-left" style="font-size: 17px;color: #000;margin-left: 11px;font-weight: bold;"></div>
                    <div style="flex: 1;margin-right: 28px;" >文章笔记</div>
                </div>
                <div class="priview-center" v-if="link_note_type == 1">
                    <div class="priview-title">
                        {{ruleForm.title}}
                    </div>
                    <div class="rich-text-preview" v-html="ruleForm.content"></div>
                    <template v-if="ruleForm.content_href">
                        <el-image v-for="(item,index) in ruleForm.content_href" :key="index" :src="item" fit="cover"></el-image>
                    </template>
                </div>
                <div class="priview-center" style="background: #000;" v-if="link_note_type == 2 && ruleForm.content_href" flex>
                    <video style="width: 100%;" :src="ruleForm.content_href" controls="controls"></video>
                </div>
            </div>
            <el-form class="form-right" :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px">
                <el-card class="card-model" shadow="never">
                    <div>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="文章链接" v-if="link_note_type == 1">
                                    <el-input type="input" placeholder="请输入公众号文章链接" style="width: 400px;" v-model="urlStr"></el-input>
                                    <el-button style="padding: 9px 15px!important;margin-left: 10px;" type="primary"
                                               @click="urlGetDom" size="small">获取文章
                                    </el-button>
                                </el-form-item>
                                <el-form-item label="选择分类" prop="cate_id">
                                    <el-select style="width: 400px;"
                                               v-model="ruleForm.cate_id" placeholder="请选择">
                                        <el-option v-for="item in materilCateList" :key="item.id" :label="item.name"
                                                   :value="item.id">
                                        </el-option>
                                    </el-select>
                                    <el-button class="el-button--primary2"
                                               style="padding: 9px 15px!important; margin-left: 10px" type="primary"
                                               @click="addgsForm()" size="small">新增分类
                                    </el-button>
                                </el-form-item>

                                <el-form-item label="排序" prop="sort">
                                    <el-input type="input" placeholder="排序" style="width: 400px;" maxlength="200"
                                              v-model="ruleForm.sort"></el-input>
                                </el-form-item>
                                <el-form-item v-show="link_note_type == 2 || link_note_type == 3" label="标题" prop="title">
                                    <el-input type="input" placeholder="标题" style="width: 400px;" maxlength="200"
                                              v-model="ruleForm.title"></el-input>
                                </el-form-item>

                                <el-form-item v-show="link_note_type == 2" label="视频内容" prop="content">
                                    <el-input type="input" placeholder="视频内容" style="width: 400px;" maxlength="200"
                                              v-model="ruleForm.content"></el-input>
                                </el-form-item>
                                <el-form-item v-show="link_note_type == 2" label="视频" prop="contentHref">
                                    <com-attachment :multiple="false" :max="1" @selected="videoUrl" type="videos">
                                        <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;" placement="top">
                                            <el-button size="mini">选择视频</el-button>
                                        </el-tooltip>
                                    </com-attachment>

                                    <a class="box-grow-0" type="primary" style="font-size:12px" title="播放视频" v-if="ruleForm.thumb_url" :underline="false" target="_blank" :href="ruleForm.content_href">
                                        <com-image v-model="ruleForm.thumb_url" mode="aspectFill" width='80px' height='80px' style="margin-top: 10px;" :src="ruleForm.thumb_url"></com-image>
                                    </a>
                                </el-form-item>
                                <el-form-item label="封面类型" prop="hidden_search" v-if="link_note_type <= 2">
                                    <el-radio v-model="ruleForm.cover_type" :label="ct.type" v-for="(ct, ci) in cover_type_option">{{ct.name}}</el-radio>
                                </el-form-item>
                                <el-form-item prop="cover_img">
                                    <label slot="label">
                                        <span>封面图片</span>
                                        <el-tooltip effect="dark" content="展示封面" placement="top">
                                            <i class="el-icon-info"></i>
                                        </el-tooltip>
                                    </label>
                                    <com-attachment @input="getSelImg" :multiple="true" :max="cover_max_count">
                                        <el-button size="mini" @click="verifyImgCount">选择图片</el-button>
                                    </com-attachment>
                                    <div class="customize-share-title" v-for="(item,index) in ruleForm.cover_img" :key="index">
                                        <com-image mode="aspectFill" width='80px' height='80px' :src="item"></com-image>
                                        <el-button v-if="item" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="delSelImg(index)"></el-button>
                                    </div>
                                </el-form-item>
                                <el-form-item  v-if="link_note_type == 3"  label="导航链接" prop="content_href">
                                    <div flex="box:last" style="width: 400px;">
                                        <el-input disabled v-model="ruleForm.content_href.text" style="margin-right: 10px;"></el-input>
                                        <com-pick-link @selected="selectNavUrl">
                                            <el-button>选择链接</el-button>
                                        </com-pick-link>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <el-card class="card-model" v-if="link_note_type == 1" shadow="never">
                    <div>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="文章标题" prop="title">
                                    <el-input type="input" placeholder="请输入文章标题" style="width: 400px;" maxlength="200"
                                              v-model="ruleForm.title"></el-input>
                                </el-form-item>
                                <el-form-item class="rich-text" label="文章内容" prop="textContent">
                                    <div style="width: 500px;" id="rich-text-center"></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <el-card  class="card-model" v-if="link_note_type == 2 || link_note_type == 1"   shadow="never">
                    <div slot="header">
                        <div>
                            <span>其他设置</span>
                        </div>
                    </div>
                    <div>
                        <el-row>
                            <el-form-item label="商品">
                                <el-radio-group v-model="ruleForm.associated_good">
                                    <com-dialog-select :multiple="false" @selected="goodsSelect" title="添加商品">
                                        <el-button type="text">添加商品</el-button>
                                    </com-dialog-select>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item v-if="ruleForm.goods_list.length" prop="goods_id">
                                <template>
                                    <div style="color: #ff4544;">最多可关联1个商品</div>
                                    <div style="max-height: 300px;overflow-y: auto">
                                        <el-table :data="ruleForm.goods_list" style="width: 500px;" stripe>
                                            <el-table-column label="商品">
                                                <template slot-scope="scope">
                                                    <div flex>
                                                        <div style="padding-right: 10px;flex-grow: 0">
                                                            <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                        </div>
                                                        <div>
                                                            <com-ellipsis :line="2">{{scope.row.name}}</com-ellipsis>
                                                            <p style="color: red;">￥ {{scope.row.price}}</p>
                                                        </div>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" width="100px">
                                                <template slot-scope="scope">
                                                    <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                        删除
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </template>
                            </el-form-item>
                            <el-col :span="24">
                            </el-col>

                            <el-form-item label="评价" prop="hidden_comment">
                                <el-switch v-model="ruleForm.hidden_comment" :active-value="1" :inactive-value="0">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="展示内容"  prop="show_type">
                                <el-checkbox-group class="checkbox-item" v-model="ruleForm.show_type">
                                    <el-checkbox v-for="(type,tIndex) in showTypeArr" v-if="type.label != 4 || (type.label == 4 && link_note_type == 1)" :label="type.label" :key="type.label">{{type.text}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item v-if="link_note_type == 1" label="虚拟阅读数：" prop="virtual_views_num">
                                <el-input type="nember" v-model.number="ruleForm.virtual_views_num" maxlength="6" oninput="value=value.replace(/^\.+|[^\d.]/g,'')" style="width: 160px;" placeholder="虚拟阅读数"></el-input>
                                次
                            </el-form-item>
                            <el-form-item label="虚拟点赞数：" prop="virtual_likes_num">
                                <el-input type="nember" v-model.number="ruleForm.virtual_likes_num" maxlength="6" oninput="value=value.replace(/^\.+|[^\d.]/g,'')" style="width: 160px;" placeholder="虚拟点赞数"></el-input>
                                次
                            </el-form-item>

                            <el-form-item label="分享标题" prop="hidden_search">
                                <el-radio v-model="ruleForm.share_title_type" :label="0">文章标题</el-radio>
                                <el-radio v-model="ruleForm.share_title_type" :label="1">自定义</el-radio>
                                <div v-if="ruleForm.share_title_type==1">
                                    <el-input placeholder="请输入搜索标题名称" style="width: 400px;" maxlength="200"
                                              v-model="ruleForm.share_title"></el-input>
                                </div>
                            </el-form-item>
                        </el-row>
                    </div>
                </el-card>
                <el-card class="card-model" v-if="link_note_type == 2 || link_note_type == 1" shadow="never">
                    <div slot="header">
                        <div>
                            <span>浏览设置</span>
                        </div>
                    </div>
                    <div>
                        <el-row>
                            <el-form-item label="浏览类型" prop="view_limit_content">
                                <el-col :span="24">
                                    <el-radio-group v-model="ruleForm.view_limit" @change="updateViewLimit">
                                        <el-radio :label="0">浏览权限</el-radio>
                                        <el-radio :label="1">积分付费</el-radio>
                                        <el-radio :label="2">金额付费</el-radio>
                                    </el-radio-group>
                                    <div v-if="ruleForm.view_limit==0">
                                        <el-checkbox class="check-all" :indeterminate="isIndeterminate" v-model="checkAll"
                                                @change="handleCheckAllChange">全选
                                        </el-checkbox>
                                        <el-checkbox-group class="checkbox-item" v-model="checkedCities"
                                                           @change="handleCheckedCitiesChange">
                                            <el-checkbox v-for="item in userLevelList" :label="item.level + ''"
                                                         :key="item.id + ''">
                                                {{item.name}}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <div v-if="ruleForm.view_limit == 1">
                                        <el-input maxLength="8" v-model="ruleForm.view_limit_content" onInput="value=toNumber(value,2)">
                                            <template slot="append">积分
                                            </template>
                                        </el-input>
                                    </div>

                                    <div v-if="ruleForm.view_limit == 2">
                                        <el-input maxLength="8" v-model="ruleForm.view_limit_content" onInput="value=toNumber(value,2)">
                                            <template slot="append">余额
                                            </template>
                                        </el-input>
                                    </div>

                                </el-col>

                            </el-form-item>
                        </el-row>
                    </div>
                </el-card>
                <el-card class="card-model" shadow="never">
                    <div slot="header">
                        <div>
                            <span>奖励设置</span>
                        </div>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item  v-if="link_note_type == 2 || link_note_type == 1"  label="分享奖励" prop="share_reward">
                                    <el-switch v-model="ruleForm.share_reward" :active-value="1" :inactive-value="0">
                                    </el-switch>
                                    <div v-if="ruleForm.share_reward == 1">
                                        <el-form-item label="奖励类型" prop="share_reward_type">
                                            <el-radio-group v-model="ruleForm.share_reward_type">
                                                <el-radio :label="0">积分</el-radio>
                                                <el-radio :label="1">余额</el-radio>
                                                <el-radio :label="2">红包</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="每分享一次获得" prop="share_reward_content"
                                        >
                                            <el-input style="width: 200px;" v-model="ruleForm.share_reward_content"
                                                    onInput="value=toNumber(value,2)">
                                                <template slot="append" v-if="ruleForm.share_reward_type == 0">积分</template>
                                                <template slot="append" v-if="ruleForm.share_reward_type == 1">余额</template>
                                                <template slot="append" v-if="ruleForm.share_reward_type == 2">红包</template>
                                            </el-input>
                                        </el-form-item>

                                        <el-form-item label="每人最多获得" prop="share_reward_max_time">
                                            <el-input style="width: 215px;" v-model.number="ruleForm.share_reward_max_time"
                                                    onInput="value=toNumber(value,0)">
                                                <template slot="append">次奖励</template>
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-form-item>


                                <el-form-item label="浏览奖励" prop="view_reward">
                                    <el-switch v-model="ruleForm.view_reward" :active-value="1" :inactive-value="0">
                                    </el-switch>
                                    <div v-if="ruleForm.view_reward == 1">
                                        <el-form-item label="奖励类型" prop="view_reward_type">
                                            <el-radio-group v-model="ruleForm.view_reward_type">
                                                <el-radio :label="0">积分</el-radio>
                                                <el-radio :label="1">余额</el-radio>
                                                <el-radio :label="2">红包</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="每浏览一次获得" prop="view_reward_content"
                                        >
                                            <el-input style="width: 200px;" v-model="ruleForm.view_reward_content"
                                                    onInput="value=toNumber(value,2)">
                                                <template slot="append" v-if="ruleForm.view_reward_type == 0">积分</template>
                                                <template slot="append" v-if="ruleForm.view_reward_type == 1">余额</template>
                                                <template slot="append" v-if="ruleForm.view_reward_type == 2">红包</template>
                                            </el-input>
                                        </el-form-item>

                                        <el-form-item label="每人最多获得" prop="view_reward_max_time">
                                            <el-input style="width: 215px;" v-model.number="ruleForm.view_reward_max_time"
                                                    onInput="value=toNumber(value,0)">
                                                <template slot="append">次奖励</template>
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>


                    </el-col>
                </el-row>

                <!--        弹框添加分类开始-->
                <el-dialog :title="addFormTitle" width="30%" :visible.sync="dialogAddgsVisible" @close="closeDialogAddgsVisible" :modal-append-to-body="false">
                    <el-form :model="addForm" ref="addForm" :rules="addRule" :inline="true" @submit.native.prevent label-width="100px">
                        <el-form-item label="分类名称" prop="name">
                            <el-input v-model="addForm.name" placeholder="请填写标题"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogAddgsVisible = false">取 消</el-button>
                        <el-button type="primary" :loading="btnLoading" @click="saveAddForm('addForm')">确 定</el-button>
                    </span>
                </el-dialog>
                <!--        弹框添加分类结束-->


            </el-form>
        </div>
        <div style="text-align: center;">
            <el-button class="button-item" :loading="btnLoading" type="primary" @click="store('ruleForm')" size="small">保存</el-button>
        </div>
    </el-card>
</div>
<script src="/resources/wangeditor/wangEditor.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            var validatePass = (rule, value, callback) => {
                var reg = /^[\u4e00-\u9fa5\w]+$/;
                if (reg.test(value)) {
                    callback();
                }else{
                    callback(new Error('不能含有特殊字符'));
                }
            };
            return {
                btnLoading: false,
                cardLoading: false,
                editTitle: '创建素材',
                userLevelList: [{
                    level: 0,
                    name: "普通会员"
                }],
                checkAll: false,//是否全选
                isIndeterminate: false,//未全选样式
                checkedCities: [],//已勾选的
                link_note_type:1,
                ruleForm: {
                    goods_list:[],
                    share_reward:0,
                    share_reward_max_time:1,
                    share_reward_content: '',
                    share_reward_type: 0,
                    view_reward:0,
                    view_reward_max_time:1,
                    view_reward_content: 1,
                    view_reward_type: 0,
                    view_limit_content:'',
                    view_limit:0,
                    share_title_type:0,
                    share_title:'',
                    sort:0,
                    cover_img: [],
                    title: '',
                    content: '',
                    user_id: 0,
                    check_status: 1,
                    show_type:[],
                    content_href:'',
                    thumb_url:'',
                    cate_id: '',
                    cover_type: 1
                },
                rules: {
                    cate_id: [{
                        required: true,
                        message: '请你选择分类',
                        trigger: 'change'
                    }, ],
                    title: [
                        {
                            required: true,
                            message: '请输入标题',
                            trigger: 'change'
                        },
                        {
                            validator: (rule, value, callback) => {
                                if(value.length>30||value.length<0){
                                    callback('最大长度在1-30个字内');
                                }
                                callback();
                            },
                            trigger: 'blur'
                        },
                    ],
                    view_limit_content : [
                        {
                            trigger: 'blur',
                            validator: (rule, value, callback) => {
                                console.log(value,'value');
                                let typeStr =  this.ruleForm.view_limit == 1?'积分':'金额';
                                if(this.ruleForm.view_limit != 0 && !String(value).length){
                                    callback('请输入' + typeStr);
                                } else if(this.ruleForm.view_limit != 0 && value<=0){
                                    callback(typeStr + '不能小于等于0');
                                }
                                callback();
                            },
                        },
                    ],
                    textContent: [
                        {
                            validator: (rule, value, callback) => {
                                if(this.link_note_type == 1 && this.ruleForm.content.length == 0){
                                    callback('文章内容不能为空');
                                }
                                callback();
                            },
                            trigger: 'blur'
                        },
                    ],
                    content: [
                        {
                            validator: (rule, value, callback) => {
                                if(this.link_note_type == 2 && value.length==0){
                                    callback('请上传视频内容');
                                }
                                callback();
                            },
                            trigger: 'blur'
                        },
                    ],
                    contentHref: [
                        {
                            validator: (rule, value, callback) => {
                                console.info("视频");
                                if(this.link_note_type == 2 && this.ruleForm.content_href.length==0){
                                    callback('请选择视频');
                                }
                                callback();
                            },
                            trigger: 'change'
                        },
                    ],
                    cover_img: [
                        {
                            validator: (rule, value, callback) => {
                                console.info(value,"封面");
                                if(value.length<=0){
                                    callback('请上传封面');
                                }
                                callback();
                            },
                            trigger: 'change'
                        }
                    ],
                    share_reward:[
                        {
                            validator: (rule, value, callback) => {
                                if(this.ruleForm.share_reward == 1 ){
                                    console.log('this.ruleForm.share_reward_content='+this.ruleForm.share_reward_content)
                                    if(this.ruleForm.share_reward_content < 0 || !this.ruleForm.share_reward_content){
                                        callback('请填写分享奖励');
                                    }
                                    if(this.ruleForm.share_reward_max_time < 0 || !this.ruleForm.share_reward_max_time){
                                        callback('请填写分享奖励');
                                    }
                                }
                                callback();
                            },
                            trigger: 'blur'
                        },
                    ],
                    view_reward: [
                        {
                            validator: (rule, value, callback) => {
                                if (this.ruleForm.view_reward == 1) {
                                    console.log('this.ruleForm.view_reward_reward_content=' + this.ruleForm.view_reward_content)
                                    if (this.ruleForm.view_reward_content < 0 || !this.ruleForm.view_reward_content) {
                                        callback('请填写浏览奖励');
                                    }
                                    if (this.ruleForm.view_reward_max_time < 0 || !this.ruleForm.view_reward_max_time) {
                                        callback('请填写浏览奖励');
                                    }
                                }
                                callback();
                            },
                            trigger: 'blur'
                        },
                    ],
                },
                materilCateList:[],

                //弹框配置
                addForm: {
                    id: '',
                    name: '',
                    // status: 1,
                },
                addRule: {
                    name: [{
                        required: true,
                        message: '请填写分类名称',
                        trigger: 'change'
                    },
                        {
                            max: 8,
                            message: '最大长度为8个字符',
                            trigger: 'blur'
                        }
                    ],
                },
                ptypeList: [{
                    key: "0",
                    value: "成功"
                },
                    {
                        key: "1",
                        value: "失败"
                    },
                ],
                addFormTitle: "",
                dialogAddgsVisible: false,
                dataList: [],
                // 对话框显示与否
                dialogVisible: false,
                dataloading: false,
                addGroupVisible: false,
                fields: {
                    upload_type: 'images'
                },
                urlStr: '',
                userContent: '', //用户发布的文本内容
                showTypeArr: [
                    {
                        label: 1,
                        text: '阅读数'
                    },
                    {
                        label: 2,
                        text: '点赞数'
                    },
                    {
                        label: 3,
                        text: '发布时间'
                    },
                    {
                        label: 4,
                        text: '发布者'
                    },
                ]
            };
        },
        methods: {
            initEdit() {
                const vm = this
                const E = window.wangEditor
                const editor = new E(document.getElementById('rich-text-center'))
                this.editor = editor
                // 默认情况下，显示所有菜单
                editor.config.menus = [
                    'head',
                    'bold',
                    'fontSize',
                    'fontName',
                    'italic',
                    'underline',
                    'strikeThrough',
                    'indent',
                    'lineHeight',
                    'foreColor',
                    'backColor',
                    // 'link',
                    'list',
                    // 'todo',
                    'justify',
                    'quote',
                    'emoticon',
                    'image',
                    'video',
                    'table',
                    'splitLine',
                    'undo',
                    'redo',
                ]
                editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 10M
                editor.config.zIndex = 99
                // 配置 server 接口地址
                editor.config.customUploadImg = function(resultFiles, insertImgFn) {
                    // resultFiles 是 input 中选中的文件列表
                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
                    vm.uploadFiles(resultFiles,'images').then(res => {
                        if (res.data.code === 1) {
                            return false
                        }
                        insertImgFn(res.data.data.url)
                    })
                    // 上传图片，返回结果，将图片插入到编辑器中
                }

                editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
                    // resultFiles 是 input 中选中的文件列表
                    // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
                    vm.uploadFiles(resultFiles,'videos').then(function (res) {
                        // 上传视频，返回结果，将视频插入到编辑器中
                        insertVideoFn(res.data.data.url)
                    })
                    /* client.put('myVideo', resultFiles[0]).then(function (res) {
                        // 上传视频，返回结果，将视频插入到编辑器中
                        insertVideoFn(res.url)
                    }).catch(function (err) {
                        console.log(err)
                    }) */
                }

                // 设置文字和回调
                editor.config.onchange = this.textChange;
                editor.create()
            },
            // 上传图片
            uploadFiles(rawFiles,type) {
                this.files = [];
                for (let i = 0; i < rawFiles.length; i++) {
                    const file = {
                        _complete: false,
                        response: null,
                        rawFile: rawFiles[i],
                    };
                    this.files.push(file);
                }
                console.log(this.files[0],"=====> this.files[0]");
                return this.upload(this.files[0],type);
                // 循环上传文件
                // for (let i in this.files) {
                //     this.upload(this.files[i]);
                // }
            },
            upload(file,type) {
                let formData = new FormData();
                const params = {
                    upload_type: type
                };
                params['r'] = 'common/file/upload';
                if(type == 'videos'){
                    this.fields.upload_type = 'videos';
                } else {
                    this.fields.upload_type = 'images';
                }
                for (let i in this.fields) {
                    formData.append(i, this.fields[i]);
                }
                formData.append('file', file.rawFile, file.rawFile.name);
                return new Promise(successCallback => {
                    this.$request({
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        },
                        params: params,
                        method: 'post',
                        data: formData,
                    }).then(e => {
                        if (e.data.code === 1) {
                            this.$message.error(e.data.msg);
                        }
                        successCallback(e)
                    }).catch(e => {
                        file._complete = true;
                    });
                })
            },
            textChange(html) {
                this.ruleForm.content = html
            },
            store(formName) {
                this.$refs[formName].validate((valid,errObj) => {
                    let self = this;
                    let subData = JSON.parse(JSON.stringify(this.ruleForm))
                    if(subData.view_limit == 0){
                        subData.view_limit_content = JSON.stringify(self.checkedCities);
                    }
                    if(subData.user_id > 0){
                        subData.content = self.userContent;
                    }
                    if (Array.isArray(subData.cover_img) && subData.cover_img.length != this.cover_max_count) {
                        this.$message.error("请上传"+ this.cover_max_count +"张封面图片");
                        return false;
                    }
                    subData.cover_img = Array.isArray(subData.cover_img)?JSON.stringify(subData.cover_img):subData.cover_img;
                    subData.note_type = getQuery('link_note_type')
                    subData.show_type = JSON.stringify(subData.show_type);
                    subData.content_href = typeof subData.content_href != 'string'?JSON.stringify(subData.content_href):subData.content_href;
                    console.log(subData)
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'operating-note/notes/edit',
                            },
                            method: 'post',
                            data: subData,
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                navigateTo({
                                    r: 'operating-note/notes/index',
                                })
                            } else {
                                console.log(e,888);
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            console.log(e.data,e.data.msg,888);
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        this.ruleForm.view_limit_content = ''
                        this.ruleForm.checkedCities = []
                        console.log(valid,errObj)
                        for (const key in errObj) {
                            self.$message.error(errObj[key][0].message);
                            break;
                        }
                        // console.log('error submit!!');
                        return false;
                    }
                });
            },

            // 导航链接选择
            selectNavUrl(e) {
                let self = this;
                console.info(e);
                self.ruleForm.content_href = e[0];
                let type = self.ruleForm.content_href.open_type;
                let text = '';
                if(type == 'call'){
                    text = self.ruleForm.content_href.params.telphone;
                } else if(type == 'web'){
                    text = self.ruleForm.content_href.params.link;
                } else if(type == 'applet'){
                    text = '小程序'
                } else {
                    text = self.ruleForm.content_href.title;
                }
                this.$set(self.ruleForm.content_href,'text',text);
                /* e.forEach(function (item) {
                    self.ruleForm.content_href = item.route;
                    // self.dialogRuleForm.open_type = item.params.open_type;
                    // self.dialogRuleForm.params = item.params;
                }); */
            },
            getDetail() {
                let self = this;
                //self.cardLoading = true;
                request({
                    params: {
                        r: 'operating-note/notes/edit',
                        id: getQuery('id'),
                        link_note_type: getQuery('link_note_type')
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        var detailData = e.data.data.detail;
                        this.materilCateList = e.data.data.cate_list;
                        this.userLevelList.push(...e.data.data.user_level_list);
                        if(!getQuery('id') || detailData.view_limit_content == 'all'){
                            this.handleCheckAllChange(true)
                        }
                        if(JSON.stringify(detailData) !== '[]'){
                            self.ruleForm = detailData;
                            self.$set(self.ruleForm,'goods_list',[]);
                            self.userContent = self.ruleForm.content;
                            if(self.ruleForm.note_type == 1){
                                self.editor.txt.html(String(self.ruleForm.content)) // 重新设置编辑器内容
                                // 强制刷新编辑器DOM，确保样式应用
                                setTimeout(() => {
                                    const editorContainer = document.querySelector('#rich-text-center');
                                    if(editorContainer) {
                                        // 触发重绘
                                        editorContainer.style.display = 'none';
                                        editorContainer.offsetHeight; // 触发重排
                                        editorContainer.style.display = '';
                                    }
                                }, 0);
                            }
                            if(self.ruleForm.view_limit == 0 && self.ruleForm.view_limit_content != 'all' && self.ruleForm.view_limit_content.length){
                                self.checkedCities = JSON.parse(self.ruleForm.view_limit_content)
                                this.ruleForm.view_limit_content = JSON.stringify(self.checkedCities);
                            }
                            if (self.ruleForm.goods_id) {
                                self.ruleForm.goods_list.push({
                                    id: self.ruleForm['goods_id'],
                                    name: self.ruleForm['goods_name'],
                                    price: self.ruleForm['price'],
                                    cover_pic: self.ruleForm['cover_pic'],
                                });
                            } else {
                                self.ruleForm.goods_id = '';
                            }
                            if(self.ruleForm.show_type == 'all'){
                                self.ruleForm.show_type = [];
                                self.showTypeArr.forEach(v => {
                                    self.ruleForm.show_type.push(v.label);
                                })
                            } else if(self.ruleForm.show_type.length){
                                this.ruleForm.show_type = JSON.parse(self.ruleForm.show_type);
                            } else {
                                this.ruleForm.show_type = [];
                            }
                            if(self.checkedCities.length == this.userLevelList.length){
                                self.checkAll = true;
                            } else if(self.checkedCities.length > 0){
                                self.isIndeterminate = true;
                            }

                            if(self.ruleForm.content_href.length){
                                try {
                                    self.ruleForm.content_href = JSON.parse(self.ruleForm.content_href);
                                } catch {
                                    
                                }
                                
                            }

                            if(self.ruleForm.user_id > 0){
                                self.editor.disable()
                            }

                            try {
                                self.ruleForm.cover_img = JSON.parse(self.ruleForm.cover_img);
                            } catch {
                                self.ruleForm.cover_img = [self.ruleForm.cover_img];
                            }
                        }
                        if(!self.ruleForm.cate_id){
                            self.ruleForm.cate_id = self.materilCateList.length?self.materilCateList[0].id:0;
                        }
                        // self.ruleForm.cate_id = self.materilCateList.length?self.materilCateList[0].id:0;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            goodsSelect(param) {
                let that = this;
                this.ruleForm.goods_id = param.id;
                that.ruleForm.goods_list = [];
                that.ruleForm.goods_list.push({
                    id: param.id,
                    name: param.goods_name,
                    price: param.price,
                    cover_pic: param.cover_pic,
                });
                console.log(that.ruleForm.goods_id,that.ruleForm.goods_list,999999999999);
            },

            deleteGoods(index) {
                this.ruleForm.goods_list.splice(index, 1);
                this.ruleForm.goods_id = '';
            },

            // 全选事件
            handleCheckAllChange(val) {
                let self = this;
                self.checkedCities = [];
                if (val) {
                    this.userLevelList.forEach(function (item, index) {
                        self.checkedCities.push(item.level + '')
                    });
                }
                this.checkAll = val
                self.isIndeterminate = false;
            },
            // 单选事件
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount == this.userLevelList.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.userLevelList.length;
            },

            // 商品视频
            videoUrl(e) {
                if (e.length) {
                    this.ruleForm.content_href = e[0].url;
                    this.ruleForm.thumb_url = e[0].thumb_url;

                }
                console.log('视频');
                console.log(e[0]);
                console.log(this.ruleForm);

                this.$forceUpdate();
            },
            /**
             *点击新增按钮，弹出新增模态框
             * @param
             */
            addgsForm() {
                this.dialogAddgsVisible = true;
                this.title = "新增分类"
            },
            /**
             *关闭或取消模态框，清空值
             * @param
             */
            closeDialogAddgsVisible() {
                this.$refs.addForm.resetFields(); //element封装的方法,清空模态框的值
                this.addFormTitle = "" //初始化title的值
                this.addForm = { //初始化addForm中的值
                    name: "",
                }
            },
            /**
             *更新新数据
             * @param
             */
            saveAddForm(formName) {
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    if (valid) {
                        this.postData({name : self.addForm.name});
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            postData(data){
                let self = this;
                self.btnLoading = true;
                request({
                    params: {
                        r: 'operating-note/cate/edit',
                    },
                    method: 'post',
                    data:data,
                }).then(e => {
                    this.dialogAddgsVisible = false;
                    this.btnLoading = false;
                    if (e.data.code == 0) {
                        this.getDetail();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            getSelImg(val){
                console.info(val);
                if(this.link_note_type == 1){
                    for(let i = 0;i<val.length;i++){
                        if(this.ruleForm.cover_img.length == 9){
                            this.$message.warning("最多上传9张图片");
                            return;
                        }
                        this.ruleForm.cover_img.push(val[i]);
                    }
                } else {
                    this.ruleForm.cover_img.splice(0,1,val[0]);
                }

                
            },
            delSelImg(index){
                this.ruleForm.cover_img.splice(index,1);
            },
            verifyImgCount(e){
                console.info(this.ruleForm.cover_img.length);
                if(this.ruleForm.cover_img.length >= 9){
                    this.$message.warning("最多上传9张图片");
                    e.stopPropagation();
                }
            },
            urlGetDom(){
                let that = this;
                request({
                        params: {
                            r: 'operating-note/notes/url-content',
                        },
                        method: 'post',
                        data:{
                            url: this.urlStr,
                        },
                    }).then(res => {
                        if(res.data.code == 0){
                            that.ruleForm.content = res.data.data.content;
                            that.editor.txt.html(that.ruleForm.content) // 重新设置编辑器内容
                            that.ruleForm.title = res.data.data.title;
                            
                        }
                    }).catch(e => {
                        console.log(e);
                    });
            },
            updateViewLimit(val){
                this.$refs.ruleForm.validateField('view_limit_content')
                if(val == 0){
                    this.ruleForm.view_limit_content = self.checkedCities
                } else {
                    this.ruleForm.view_limit_content = '';
                } 
            },
        },
        mounted: function() {
            this.link_note_type = getQuery('link_note_type');
            if (this.link_note_type == 1) {
                this.editTitle = '编辑文章';
                this.ruleForm.cover_type = 1;
            }
            if (this.link_note_type == 2) {
                this.editTitle = '编辑视频';
                this.ruleForm.cover_type = 5;
            }
            if (this.link_note_type == 3) {
                this.editTitle = '编辑广告';
            }
            this.initEdit();
            this.getDetail();

        },
        computed: {
            cover_type_option() {
                let image_text = [
                    {
                        type: 1,
                        name: '小单图'
                    },
                    {
                        type: 2,
                        name: '大单图'
                    },
                    {
                        type: 3,
                        name: '二图'
                    },
                    {
                        type: 4,
                        name: '三图'
                    },
                ];
                let video = [
                    {
                        type: 5,
                        name: '竖屏'
                    },
                    {
                        type: 6,
                        name: '横屏'
                    },
                ];
                return this.link_note_type == 1 ? image_text : video;
            },
            cover_max_count() {
                let val = this.ruleForm.cover_type;
                let one = [1, 2, 5, 6]; // 一张的类型
                let two = [3];
                let three = [4];
                let coverMaxCount = 1;
                if (this.link_note_type > 2) {
                    coverMaxCount = 1;
                } else if (one.indexOf(val) > -1) {
                    coverMaxCount = 1;
                } else if (two.indexOf(val) > -1) {
                    coverMaxCount = 2;
                } else if (three.indexOf(val) > -1) {
                    coverMaxCount = 3;
                } else {
                    coverMaxCount = 1;
                }

                return coverMaxCount;
            }
        }
    });
</script>