universal-wechat-uniapp-241007/pages_order/components/list/comment/commentPublish.vue

<template>
    <view>
        <uv-popup ref="popup" :round="30">
            <view class="comment-publish">
                <view class="content-input">
                    <uv-textarea v-model="form.userValue" :maxlength="200" autoHeight count focus
                        :placeholder="placeholder"></uv-textarea>
                </view>

                <view class="images box">
                    <uv-upload :fileList="fileList" :maxCount="imageMax" multiple width="150rpx" height="150rpx"
                        @delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
                </view>

                <view class="uni-color-btn" @click="submit">
                    发布
                </view>
            </view>
        </uv-popup>
        
        <!-- 邮箱填写弹窗组件 -->
        <email-popup ref="emailPopup" @skip="handleEmailSkip" @confirm="handleEmailConfirm"></email-popup>
    </view>
</template>

<script>
import { mapState } from 'vuex'
import EmailPopup from './emailPopup.vue'
import { subscribeBeforePublish } from '@/utils/subscribeMessage.js'

export default {
    name: 'CommentPublish',
    components: {
        EmailPopup
    },
    props: {
        // 评论参数
        params: {
            type: Object,
            default: () => ({})
        },
        // 输入框占位符
        placeholder: {
            type: String,
            default: '说点什么吧...'
        }
    },
    computed: {
        ...mapState(['userInfo'])
    },
    data() {
        return {
            form: {
                userValue: ''
            },
            imageMax: 9,
            fileList: []
        }
    },
    methods: {
        // 打开弹窗
        open() {
            this.$refs.popup.open('bottom')
        },

        // 关闭弹窗
        close() {
            this.$refs.popup.close()
        },

        // 检查邮箱并提交
        async submit() {
            // 检查用户是否填写了邮箱
            if (!this.userInfo.mail) {
                this.$refs.emailPopup.show()
                return
            }
            
            this.doSubmit()
        },
        
        // 处理邮箱跳过事件
        handleEmailSkip() {
            this.doSubmit()
        },
        
        // 处理邮箱确认事件
        handleEmailConfirm(email) {
            this.doSubmit()
        },

        // 执行提交评论
        async doSubmit() {
            await subscribeBeforePublish()

            let data = {
                ...this.form,
                ...this.params,
            }

            if (this.$utils.verificationAll(data, {
                userValue: '说点什么吧',
                type: '缺少type',
                orderId: '缺少orderId',
            })) {
                return
            }

            data.userImage = this.fileList.map((item) => item.url).join(",")

            this.$api('addComment', data, res => {
                if (res.code == 200) {
                    this.close()
                    this.resetForm()
                    uni.showToast({
                        title: '发布成功!',
                        icon: 'none'
                    })
                    this.$emit('success')
                }
            })
        },

        // 重置表单
        resetForm() {
            this.form.userValue = ''
            this.fileList = []
        },

        deleteImage(e) {
            this.fileList.splice(e.index, 1)
        },

        afterRead(e) {
            let self = this
            e.file.forEach(file => {
                self.$Oss.ossUpload(file.url).then(url => {
                    self.fileList.push({
                        url
                    })
                })
            })
        },
    }
}
</script>

<style scoped lang="scss">
.comment-publish {
    .content-input {
        min-height: 400rpx;
    }

    .box {
        padding: 0 20rpx;
    }

    .images {
        display: flex;
        flex-wrap: wrap;
        padding: 20rpx;
    }

    .uni-color-btn {
        background-color: $uni-color-primary;
        color: #fff;
        text-align: center;
        padding: 20rpx;
        margin: 20rpx;
        border-radius: 10rpx;
        font-size: 32rpx;
    }
}
</style>