qimall/addons/Material/backend/views/default/edit.php

<style>
    .form-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 20%;
        min-width: 900px;
    }

    .form-body .el-form-item {
        padding-right: 50%;
        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: -4%;
        right: -4%;
    }
</style>
<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-image');
?>
<div id="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:'material/default/index'})">素材中心</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{editTitle}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="选择分类" prop="cate_id">
                            <div style="display: flex">
                                <el-cascader
                                        v-model="selectCate"
                                        :options="materilCateList"
                                        :props="cascadeProps"
                                        @change="handleChange"
                                        ></el-cascader>
                                <el-button class="el-button--primary2" style="padding: 9px 15px!important; float: left;" type="primary" @click="addgsForm()" size="small">新增分类
                                </el-button>
                            </div>

                        </el-form-item>
                        <el-form-item label="素材文案" prop="describe">
                            <el-input type="textarea" placeholder="请输入素材文案" style="width: 400px;" v-model="ruleForm.describe"></el-input>
                        </el-form-item>
                        <el-form-item label="虚拟下载次数" prop="virtual_download_num">
                            <el-input type="nember" v-model.number="ruleForm.virtual_download_num" maxlength="6" oninput="value=value.replace(/^\.+|[^\d.]/g,'')" style="width: 160px;" placeholder="虚拟下载次数"></el-input>
                            次
                        </el-form-item>
                        <el-form-item label="是否展示" prop="status">
                            <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>
                        
                        <el-form-item label="上传类型" prop="download_type" required>
                            <el-radio-group v-model="ruleForm.download_type">
                                <el-radio :label="1">图文</el-radio>
                                <el-radio :label="2">短视频</el-radio>
                                <el-radio :label="3">文本</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!--                        图文-->
                        <el-form-item v-if="ruleForm.download_type == 1" prop="pic_url_img" :rules="ruleForm.pic_url&&ruleForm.pic_url.length > 0 ?rules.pic_url_img:[{required: true, message: '请选择图片', trigger: 'change'}]" class="com-goods">
                            <template slot="label">
                                <span>上传素材</span>
                                <el-tooltip effect="dark" placement="top" content="第一张图片为封面图">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </template>
                            <div class="pic-url-remark">
                                第一张图片为缩略图,其它图片为轮播图,建议像素750*750,可拖拽使其改变顺序，最多支持上传9张
                            </div>
                            <div flex="dir:left">
                                <template v-if="ruleForm.pic_url&&(ruleForm.pic_url.length > 0) && (ruleForm.download_type == 1)">
                                    <div v-for="(item,index) in ruleForm.pic_url" :key="index" style="margin-right: 20px;position: relative;cursor: move;">
                                        <com-attachment @selected="updatePicUrl" :params="{'currentIndex': index}">
                                            <com-image mode="aspectFill" width="100px" height='100px' :src="item.pic_url">
                                            </com-image>
                                        </com-attachment>
                                        <el-button class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="delPic(index)"></el-button>
                                    </div>
                                </template>
                                <template v-if="ruleForm.pic_url&&ruleForm.pic_url.length < 9">
                                    <com-attachment style="margin-bottom: 10px;" :multiple="true" :max="9" @selected="picUrl">
                                        <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 750" placement="top">
                                            <div flex="main:center cross:center" class="add-image-btn">
                                                + 添加图片
                                            </div>
                                        </el-tooltip>
                                    </com-attachment>
                                </template>
                            </div>
                        </el-form-item>

                        <!--                        短视频-->
                        <el-form-item v-if="ruleForm.download_type == 2" label="商品视频" prop="video_url" :rules="ruleForm.video_url ?rules.video_url:[{required: true, message: '请选择视频', trigger: 'change'}]">
                            <el-input v-model="ruleForm.video_url" placeholder="请输入视频原地址或选择上传视频">
                                <template slot="append">
                                    <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>
                                </template>
                            </el-input>

                            <a class="box-grow-0" type="primary" style="font-size:12px" title="播放视频" v-if="ruleForm.thumb_url" :underline="false" target="_blank" :href="ruleForm.video_url">
                                <com-image v-model="ruleForm.thumb_url" mode="aspectFill" width='80px' height='80px' style="margin-top: 10px;" :src="ruleForm.thumb_url"></com-image>
                            </a>
                            <com-attachment v-model="ruleForm.thumb_url" @selected="thumbUrl" :multiple="false" :max="1">
                                <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
                                    <el-button size="mini">修改封面</el-button>
                                </el-tooltip>
                            </com-attachment>

                        </el-form-item>


                        <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_id" prop="goods_id">
                            <template>
                                <div style="color: #ff4544;">最多可关联1个商品</div>
                                <div style="max-height: 300px;overflow-y: auto">
                                    <el-table :data="ruleForm.goods_list" :show-header="false" border>
                                        <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 style="flex-grow: 1;">
                                                        <com-ellipsis :line="2">{{scope.row.name}}</com-ellipsis>
                                                        <p style="color: red;">￥ {{scope.row.price}}</p>
                                                    </div>
                                                    <div style="flex-grow: 0;">
                                                        <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                           删除
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </template>
                        </el-form-item>



                    </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>
        <el-button class="button-item" :loading="btnLoading" type="primary" @click="store('ruleForm')" size="small">保存
        </el-button>
    </el-card>
</div>
<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: '创建素材',
                ruleForm: {
                    user_avatar_url: '',
                    download_type: 1,
                    pic_url: [],
                    user_id:0,
                    associated_good: [],
                    goods_list: [],
                    video_url: '',
                    thumb_url: '',
                    goods_id:'',
                    // 短视频设置
                    is_alone: 0, //是否独立
                    video_share_type: "1", //默认选中百分比
                    percentage: 0, //默认0%
                    fixed_value: 0, //默认固定金额0
                    virtual_download_num: 0,
                },
                rules: {
                    user_avatar_url: [{
                        required: true,
                        message: '请选择头像',
                        trigger: 'change'
                    }, ],
                    // cate_id: [{
                    //     required: true,
                    //     message: '请你选择分类',
                    //     trigger: 'change'
                    // }, ],
                    describe: [{
                        required: true,
                        message: '请输入方案',
                        trigger: 'change'
                    },
                    {
                        //validator:validatePass,
                        trigger: 'blur'
                    },
                    ],
                    material_type_id: [{
                        required: true,
                        message: '请选择分类',
                        trigger: 'change'
                    }, ],
                    // pic_url_img: [
                    //     {required: true, message: '请选择图片', trigger: 'change'},
                    // ],
                    // video_url: [
                    //     {required: true, message: '请选择视频', trigger: 'change'},
                    // ],
                },
                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,
                cascadeProps: {
                    checkStrictly: true,
                    value: 'value',
                    label: 'label',
                    children: 'children'
                },
                selectCate: [],
            };
        },
        methods: {
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!this.ruleForm.cate_id) {
                        this.$message.error('请您选择分类');
                        return false;
                    }
                    let self = this;
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'material/default/edit',
                            },
                            method: 'post',
                            data: self.ruleForm,
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                navigateTo({
                                    r: 'material/default/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 {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getDetail() {
                if (!getQuery('id')) return;
                let self = this;
                //self.cardLoading = true;
                request({
                    params: {
                        r: 'material/default/edit',
                        id: getQuery('id')
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        var detailData = e.data.data.detail;
                        if(detailData){
                            self.ruleForm = detailData;
                            if (detailData.goods_id) {
                                self.ruleForm.goods_list = [];
                                detailData.goods['name'] = detailData.goods['goods_name'];
                                self.ruleForm.goods_list.push(detailData.goods);
                                self.ruleForm.goods_id = detailData.goods_id;
                            } else {
                                self.ruleForm.goods_list = [];
                                self.ruleForm.goods_id = '';
                            }
                            this.initSelectCate(self.ruleForm.cate_id, self.ruleForm.second_cate_id);
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            /**
             * 获取分类
             */
            getCateList() {
                request({
                    params: {
                        r: 'material/default/get-cate-list',
                    },
                    method: 'get',
                }).then(e => {
                    this.cardLoading = true
                    if (e.data.code == 0) {
                        this.materilCateList = e.data.data
                        this.cardLoading = false
                    }
                })
            },
            updatePicUrl(e, params) {
                this.ruleForm.pic_url[params.currentIndex].id = e[0].id;
                this.ruleForm.pic_url[params.currentIndex].pic_url = e[0].url;
                this.$forceUpdate();
            },
            thumbUrl(e) {
                if (e.length) {
                    this.ruleForm.thumb_url = e[0].url;
                    this.$refs.ruleForm.validateField('thumb_url');
                }
                this.$forceUpdate();
            },
            delPic(index) {
                this.ruleForm.pic_url.splice(index, 1)
            },
            // 轮播图
            picUrl(e) {
                if (e.length) {
                    let self = this;
                    e.forEach(function(item, index) {
                        if (self.ruleForm.pic_url.length >= 9) {
                            return;
                        }
                        self.ruleForm.pic_url.push({
                            id: item.id,
                            pic_url: item.url
                        });
                    });
                }
            },
            goodsSelect(param) {
                this.ruleForm.goods_id = param.id;
                this.ruleForm.goods_list.push({
                    id: param.id,
                    name: param.goods_name,
                    price: param.price,
                    cover_pic: param.cover_pic,
                });
                console.log(this.ruleForm.goods_id,this.ruleForm.goods_list,999999999999);
            },

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

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

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

                this.$forceUpdate();
            },
            // 短视频设置单选按钮
            shareTypeChange(e) {
                if (e == 0) {
                    this.ruleForm.percentage = 0;
                } else {
                    this.ruleForm.fixed_value = 0;
                }
            },

            // 4.0 短视频设置
            videoSetting() {
                let self = this;
                let postData = {
                    goods_id: self.goods_id,
                    video_share_type: self.ruleForm.video_share_type,
                    percentage: self.ruleForm.percentage,
                    fixed_value: self.ruleForm.fixed_value,
                    is_alone: self.ruleForm.is_alone,
                }
                request({
                    params: {
                        r: 'plugin/short_video/mall/goods/goods-setting',
                    },
                    method: 'post',
                    data: postData
                }).then(e => {
                    self.loading = false;
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            // 4.1 获取短视频设置
            videoLoadData() {
                let self = this;
                self.loading = true;
                request({
                    params: {
                        r: 'plugin/short_video/mall/goods/goods-setting',
                        goods_id: self.goods_id,
                    },
                    method: 'get',
                    data: {}
                }).then(e => {
                    self.loading = false;
                    if (e.data.code == 0) {
                        // self.form = e.data.data.setting;
                        self.ruleForm.is_alone = e.data.data.is_alone;
                        self.ruleForm.video_share_type = e.data.data.video_share_type;
                        self.ruleForm.percentage = e.data.data.percentage;
                        self.ruleForm.fixed_value = e.data.data.fixed_value;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            /**
             *点击新增按钮，弹出新增模态框
             * @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: 'material/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);
                });
            },
            updateView(e) {
                this.$forceUpdate()
            },
            handleChange(value) {
                if (value && value.length >= 2) {
                    this.ruleForm.cate_id = value[0];
                    this.ruleForm.second_cate_id = value[1];
                } else if (value && value.length === 1) {
                    // 如果只选择了一级分类
                    this.ruleForm.cate_id = value[0];
                    this.ruleForm.second_cate_id = 0; // 或空字符串''
                } else {
                    // 清空选择的情况
                    this.ruleForm.cate_id = null;
                    this.ruleForm.second_cate_id = 0;
                }
                console.log('当前表单值:', this.ruleForm);
            },
            initSelectCate(cate_id, second_cate_id) {
                this.selectCate = [];
                this.selectCate.push(cate_id);
                if (second_cate_id > 0) {
                    this.selectCate.push(second_cate_id);
                }
            }
        },
        mounted: function() {
            if (getQuery('id')) {
                this.editTitle = '编辑素材';
                this.getDetail();
            }
            this.getCateList()
            this.getDetail();
        }
    });
</script>