mashangyoujiu/Public/js/component-blessing.js

/**
 * @description 祝福语操作组件
 */
Vue.component('component-blessing', {
    template: `
        <div id="component-blessing">
            <el-dialog title="祝福语" :modal-append-to-body="false" :visible.sync="dialogVisible">
                <el-form ref="form" :model="form" v-loading="loading" label-width="80px">
                    <el-form-item label="祝福码：">
                        <span>{{form.code || '------'}}</span>
                    </el-form-item>
                    <el-form-item label="祝福：">
                        <el-upload :show-file-list="false" :before-upload="beforeUpload" :on-success="uploadSuccess" action="/index.php/Blessing/Store/uploadBlessing">
                            <el-button type="primary" round size="mini">{{form.code ? '修改祝福' : '上传祝福'}}</el-button>
                            <span>（可以上传语音及视频文件，文件大小在{{maxSize}}MB以内）</span>
                        </el-upload>
                    </el-form-item>
                    <el-form-item v-if="form.type" class="player">
                        <video :src="form.address" width="350px" controls="controls" v-if="form.type == 1"></video>
                        <audio :src="form.address" controls="controls" v-if="form.type == 2"></audio>
                    </el-form-item>
                    <el-form-item v-if="form.type">
                        <el-button class="save" type="primary" round size="medium" @click="save">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    `,
    data() {
        return {
            form: {
                code: '',
                storageType: '',
                type: '',
                url: '',
                address: ''
            },
            maxSize: 0,
            loading: false,
            dialogVisible: false
        }
    },
    watch: {
        visible() {
            this.dialogVisible = this.visible
            if (this.visible) {
                this.getData()
                this.getBlessingSetting()
            } else {
                this.form = {
                    code: '',
                    storageType: '',
                    type: '',
                    url: '',
                    address: ''
                }
            }
        },
        dialogVisible() {
            this.$emit('update:visible', this.dialogVisible)
        },
    },
    methods: {
        getData() {
            this.sendRequest('Blessing/Store/orderBlessing', {
                data: {
                    orderId: this.id
                },
                success: (response) => {
                    if (response.status == 1) {
                        const data = response.data
                        if (data && typeof data == 'object') {
                            this.form = {
                                code: data.extraction_code,
                                storageType: data.storage_type,
                                type: data.type,
                                url: data.url,
                                address: data.address
                            }
                        }
                    } else {
                        this.$message.error(response.message)
                    }
                }
            })
        },
        /**
         * @description 查看祝福语配置
         */
        getBlessingSetting() {
            this.sendRequest('Blessing/Store/storePlugSet', {
                success: (response) => {
                    if (response.status == 1) {
                        const data = response.data
                        this.maxSize = data.limit_size
                    } else {
                        this.$message.error(response.message)
                    }
                }
            })
        },
        beforeUpload() {
            this.loading = true
        },
        uploadSuccess(response) {
            this.loading = false
            if (response.file) {
                const file = response.file
                const types = file.type.split('/')

                if (!types[0]) {
                    this.$message.error('文件类型无法识别！')
                    return
                }

                switch (types[0]) {
                    case 'video':
                        this.form.type = 1
                        break
                    case 'audio':
                        this.form.type = 2
                        break
                    default:
                        this.$message.error('文件类型无法识别！')
                        return
                }

                this.form.storageType = file.storage_type
                this.form.url = file.storage_type == 1 ? file.path_name : file.saveName
                this.form.address = file.access_path
            } else {
                this.$message.error(response.message)
            }
        },
        save() {
            const requestUrl = this.form.code ? 'Blessing/Store/blessingSave' : 'Blessing/Store/addBlessing'

            this.sendRequest(requestUrl, {
                data: {
                    orderId: this.id,
                    type: this.form.type,
                    url: this.form.url,
                    storageType: this.form.storageType,
                    address: this.form.storageType == 1 ? this.form.url : this.form.address
                },
                success: (response) => {
                    if (response.status == 1) {
                        this.dialogVisible = false
                        this.$message.success(response.message)
                    } else {
                        this.$message.error(response.message)
                    }
                }
            })
        }
    },
    props: ['id', 'visible'] //订单ID，父组件对当前组件的显示控制，祝福语上传大小限制
})