订单售后争议沟通支持图片

components/upload/upload.vue

@@ -1,6 +1,9 @@
 <template>
     <view :class="theme_view">
-        <view class="flex-row flex-wrap">
+        <view v-if="propSlot" @tap="file_upload_event">
+            <slot></slot>
+        </view>
+        <view v-else class="flex-row flex-wrap">
             <block v-if="form_images_list.length > 0">
                 <view v-for="(item, index) in form_images_list" :key="index" class="item margin-right-lg pr">
                     <view v-if="propDelete" class="delete-icon pa z-i" @tap="upload_delete_event" :data-index="index">
@@ -21,6 +24,11 @@
     var common_static_url = app.globalData.get_static_url('common');
     export default {
         props: {
+            // 是否使用卡槽
+            propSlot: {
+                type: Boolean,
+                default: false,
+            },
             // 初始图片数据
             propData: {
                 type: [Array,String],
@@ -41,6 +49,11 @@
                 type: Boolean,
                 default: true,
             },
+            // 是否单个回调
+            propSingleCall: {
+                type: Boolean,
+                default: false,
+            },
             // 路径类型 默认common
             propPathType: {
                 type: String,
@@ -84,12 +97,16 @@
                             if (res.statusCode == 200) {
                                 var data = typeof res.data == 'object' ? res.data : JSON.parse(res.data);
                                 if (data.code == 0 && (data.data.url || null) != null) {
-                                    var list = self.form_images_list;
+                                    if(self.propSingleCall) {
-                                    list.push(data.data.url);
+                                        self.$emit('call-back', data.data.url, self.propCallData);
-                                    self.setData({
+                                    } else {
-                                        form_images_list: list,
+                                        var list = self.form_images_list;
-                                    });
+                                        list.push(data.data.url);
-                                    self.$emit('call-back', self.form_images_list, self.propCallData);
+                                        self.setData({
+                                            form_images_list: list,
+                                        });
+                                        self.$emit('call-back', self.form_images_list, self.propCallData);
+                                    }
                                 } else {
                                     app.globalData.showToast(data.msg);
                                 }

pages/user-orderaftersale-detail/user-orderaftersale-detail.css

@@ -60,16 +60,14 @@
     max-width: 450rpx;
     max-height: 450rpx;
 }
-.chat-input,
-.chat-input .chat-send-submit{
-    height: 100rpx;
-}
 .chat-input .chat-send-input {
+    height: 96rpx;
     border-top-right-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
 }
 .chat-input .chat-send-submit {
     width: 240rpx;
+    height: 100rpx;
     line-height: 100rpx;
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;

pages/user-orderaftersale-detail/user-orderaftersale-detail.vue

@@ -149,7 +149,14 @@
                             </block>
                         </scroll-view>
                         <view v-if="chat_send_submit_status" class="chat-input flex-row align-s margin-top-sm">
-                            <textarea :placeholder="$t('common.input_enter_chat_tips')" class="chat-send-input wh-auto ht-auto padding-sm br radius" :value="chat_input_value" @input="chat_input_event" placeholder-class="cr-grey"></textarea>
+                            <view class="flex-row align-c br radius wh-auto chat-send-input">
+                                <textarea :placeholder="$t('common.input_enter_chat_tips')" class="wh-auto ht-auto padding-sm" :value="chat_input_value" @input="chat_input_event" placeholder-class="cr-grey"></textarea>
+                                <view class="padding-horizontal-sm cp">
+                                    <component-upload :propMaxNum="9" :propPathType="editor_path_type" :propSlot="true" :propSingleCall="true" @call-back="chat_upload_images_event">
+                                        <iconfont name="icon-images" size="48rpx" color="#999"></iconfont>
+                                    </component-upload>
+                                </view>
+                            </view>
                             <button type="default" size="mini" class="chat-send-submit bg-main br-main cr-white radius" @tap="chat_send_submit_event" :disabled="chat_send_submit_disabled_status" hover-class="none">{{$t('common.send')}}</button>
                         </view>
                     </view>
@@ -236,15 +243,7 @@
 
                         <view class="form-gorup form-container-upload oh">
                             <view class="form-gorup-title">{{$t('user-orderaftersale-detail.user-orderaftersale-detail.4y9355')}}<text class="form-group-tips">{{$t('user-orderaftersale-detail.user-orderaftersale-detail.1l42ms')}}</text></view>
-                            <view class="form-upload-data oh">
+                            <component-upload :propData="form_images_list" :propMaxNum="3" :propPathType="editor_path_type" @call-back="orderaftersale_image_event"></component-upload>
-                                <block v-if="form_images_list.length > 0">
-                                    <view v-for="(item, index) in form_images_list" :key="index" class="item fl">
-                                        <text class="delete-icon" @tap="upload_delete_event" :data-index="index">x</text>
-                                        <image :src="item" @tap="upload_show_event" :data-index="index" mode="aspectFill"></image>
-                                    </view>
-                                </block>
-                                <image v-if="(form_images_list || null) == null || form_images_list.length < 3" class="item fl upload-icon" :src="common_static_url + 'upload-icon.png'" mode="aspectFill" @tap="file_upload_event"></image>
-                            </view>
                         </view>
                     </view>
                     <view class="form-gorup form-gorup-submit">
@@ -367,13 +366,12 @@
     import componentPopup from "@/components/popup/popup";
     import componentNoData from "@/components/no-data/no-data";
     import componentBottomLine from "@/components/bottom-line/bottom-line";
+    import componentUpload from '@/components/upload/upload';
 
-    var common_static_url = app.globalData.get_static_url("common");
     export default {
         data() {
             return {
                 theme_view: app.globalData.get_theme_value_view(),
-                common_static_url: common_static_url,
                 params: null,
                 data_list_loding_status: 1,
                 data_list_loding_msg: "",
@@ -512,6 +510,7 @@
             componentPopup,
             componentNoData,
             componentBottomLine,
+            componentUpload
         },
 
         onLoad(params) {
@@ -663,93 +662,13 @@
                 });
             },
 
-            // 上传图片预览
+            // 上传回调
-            upload_show_event(e) {
+            orderaftersale_image_event(res) {
-                uni.previewImage({
+                this.setData({
-                    current: this.form_images_list[e.currentTarget.dataset.index],
+                    form_images_list: res,
-                    urls: this.form_images_list,
                 });
             },
 
-            // 图片删除
-            upload_delete_event(e) {
-                var self = this;
-                uni.showModal({
-                    title: this.$t('common.warm_tips'),
-                    content: this.$t('order.order.psi67g'),
-                    success(res) {
-                        if (res.confirm) {
-                            var list = self.form_images_list;
-                            list.splice(e.currentTarget.dataset.index, 1);
-                            self.setData({
-                                form_images_list: list,
-                            });
-                        }
-                    },
-                });
-            },
-
-            // 文件上传
-            file_upload_event(e) {
-                var self = this;
-                uni.chooseImage({
-                    count: 3,
-                    success(res) {
-                        var success = 0;
-                        var fail = 0;
-                        var length = res.tempFilePaths.length;
-                        var count = 0;
-                        self.upload_one_by_one(res.tempFilePaths, success, fail, count, length);
-                    },
-                });
-            },
-
-            // 采用递归的方式上传多张
-            upload_one_by_one(img_paths, success, fail, count, length) {
-                var self = this;
-                if (self.form_images_list.length < 3) {
-                    uni.uploadFile({
-                        url: app.globalData.get_request_url("index", "ueditor"),
-                        filePath: img_paths[count],
-                        name: "upfile",
-                        formData: {
-                            action: "uploadimage",
-                            path_type: self.editor_path_type,
-                        },
-                        success: function (res) {
-                            success++;
-                            if (res.statusCode == 200) {
-                                var data = typeof res.data == "object" ? res.data : JSON.parse(res.data);
-                                if (data.code == 0 && (data.data.url || null) != null) {
-                                    var list = self.form_images_list;
-                                    list.push(data.data.url);
-                                    self.setData({
-                                        form_images_list: list,
-                                    });
-                                } else {
-                                    app.globalData.showToast(data.msg);
-                                }
-                            }
-                        },
-                        fail: function (e) {
-                            fail++;
-                        },
-                        complete: function (e) {
-                            count++;
-
-                            // 下一张
-                            if (count >= length) {
-                                // 上传完毕，作一下提示
-                                //app.showToast('上传成功' + success +'张', 'success');
-                            } else {
-                                // 递归调用，上传下一张
-                                self.upload_one_by_one(img_paths, success, fail, count, length);
-                            }
-                        },
-                    });
-                }
-            },
-
             // 售后表单提交
             form_submit_event(e) {
                 // 表单数据
@@ -1260,41 +1179,56 @@
             // 客服发送按钮事件
             chat_send_submit_event(e) {
                 if(this.chat_input_value !== '') {
-                    this.setData({
+                    this.chat_send_handle(this.chat_input_value, 0);
-                        chat_send_submit_disabled_status: true,
+                }
-                    });
+            },
-                    uni.request({
+
-                        url: app.globalData.get_request_url("userchatsend", "orderaftersaledispute", "shop"),
+            // 消息上传图片
-                        method: "POST",
+            chat_upload_images_event(res) {
-                        data: {
+                if((res || null) != null && typeof res == 'string') {
-                            order_aftersale_id: this.aftersale_data.id,
+                    this.chat_send_handle(res, 1);
-                            content: this.chat_input_value
+                }
-                        },
+            },
-                        dataType: "json",
+
-                        success: (res) => {
+            // 消息发送处理
-                            this.setData({
+            chat_send_handle(content, type = 0) {
-                                chat_send_submit_disabled_status: false,
+                this.setData({
-                            });
+                    chat_send_submit_disabled_status: true,
-                            if(res.data.code == 0)
+                });
-                            {
+                uni.request({
+                    url: app.globalData.get_request_url("userchatsend", "orderaftersaledispute", "shop"),
+                    method: "POST",
+                    data: {
+                        order_aftersale_id: this.aftersale_data.id,
+                        content: content,
+                        type: type
+                    },
+                    dataType: "json",
+                    success: (res) => {
+                        this.setData({
+                            chat_send_submit_disabled_status: false,
+                        });
+                        if(res.data.code == 0)
+                        {
+                            if(type == 0) {
                                 this.setData({
                                     chat_input_value: '',
                                 });
-                                this.chat_data_merge(res.data.data, 'add');
-                            } else {
-                                if (app.globalData.is_login_check(res.data, this, "chat_send_submit_event")) {
-                                    app.globalData.showToast(res.data.msg);
-                                }
                             }
-                        },
+                            this.chat_data_merge(res.data.data, 'add');
-                        fail: () => {
+                        } else {
-                            this.setData({
+                            if (app.globalData.is_login_check(res.data, this, "chat_send_submit_event")) {
-                                chat_send_submit_disabled_status: false,
+                                app.globalData.showToast(res.data.msg);
-                            });
+                            }
-                            app.globalData.showToast(this.$t('common.internet_error_tips'));
+                        }
-                        },
+                    },
-                    });
+                    fail: () => {
-                }
+                        this.setData({
+                            chat_send_submit_disabled_status: false,
+                        });
+                        app.globalData.showToast(this.$t('common.internet_error_tips'));
+                    },
+                });
             },
 
             // 订单售后争议沟通 - 查看更多消息