yanglao/public/assets/js/backend/service/order/complaint.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'service/order/complaint/index' + location.search,

                    multi_url: 'service/order/complaint/multi',
                    import_url: 'service/order/complaint/import',
                    table: 'service_complaint',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                fixedColumns: true,
                fixedRightNumber: 1,
                columns: [
                    [
                        {field: 'goods_id', title: __('项目信息'),operate: false, cellStyle: function () {return {css: {"min-width": "266px"}}},formatter:function (value,row) {
                            return `
                               <div>
                                <div style="display: flex;align-items: center;justify-content: space-between;color: #666;margin-bottom: 10px;">
        <div>订单编号：${row.order.orderId}</div>
        <div style="margin-left: 20px;">ID:${row.order_id}</div>
    </div>
    <div style="display: flex">
        <image style="width: 112px;height: 112px;border-radius: 10px" src="${row.detail.image}"></image>
        <div style="margin-left: 25px;">
            <div style="display: flex;align-items: center;margin-bottom: 8px;">
                <div style="font-size: 16px;font-weight: bold;">${row.detail.name}</div>
                
            </div>
            <div  style="display: flex;align-items: center;margin-bottom: 6px;">
                <span style="margin-right: 30px;color: #999;font-size: 14px;">规格</span>
                <span style="color: #333;font-size: 14px">${row.detail.sku_name}</span>
            </div>
            <div  style="display: flex;align-items: center;margin-bottom: 6px;">
                <span style="margin-right: 30px;color: #999;font-size: 14px;">数量</span>
                <span style="color: #333;font-size: 14px">X${row.detail.num}</span>
            </div>
            <div  style="display: flex;align-items: center;margin-bottom: 6px;">
                <span style="margin-right: 30px;color: #999;font-size: 14px;">价格</span>
                <span style="color: #333;font-size: 14px">${row.detail.price}</span>
            </div>
        </div>
    </div>
    
</div>
                            `
                            
                        }},
                        
                        
                        
                        
                        {field: 'user_id', title: __('用户信息'),operate: false, cellStyle: function () {return {css: {"min-width": "248px"}}},formatter:function (value,row){
                            let result = `<div>
    <div style="display: flex;align-items: flex-start;">
      <img src="${row.user.avatar}" alt="" style="width: 48px;height: 48px;flex-shrink: 0;border-radius: 50%;">
      <div style="margin-left: 14px;flex: 1;">
        <div style="margin-bottom: 5px;display: flex;justify-content: space-between;">
          <span style="font-size: 16px;color: #333;">${row.user.nickname}</span>
        </div>
        <div style="display: flex;justify-content: space-between;">
          <span style="font-size: 14px;color: #666;">${row.user.mobile}</span>
        </div>`
        if(row.order.to_shop == 'door'){
            result += ` <div style="font-size: 14px;color: #666;text-align: left;margin-top:10px;">预约信息：${row.address.name+''+row.address.mobile}</div>
    <div style="font-size: 14px;color: #666;margin: 10px 0;text-align: left;">地址：${row.address.province+row.address.city+row.address.district+row.address.area+row.address.address}</div>

      `
        }else {
            result += `<div style="font-size: 14px;color: #666;text-align: left;margin-top:10px;">核销码：${row.order.check_name}</div>
                        <div style="font-size: 14px;color: #666;text-align: left;margin-top:10px;">核销二维码：<img style="width:40px;height:40px;" src="${row.order.qrcode_image}" /></div>
            `
        }
        
        result += `</div></div></div>`
                            return result
                            
                        }},
                        {field: 'shop_id', title: __('服务者/门店信息'),operate: false, cellStyle: function () {return {css: {"min-width": "248px"}}},formatter:function (value,row){
                            if(row.shop && row.skill){
                                return `<div>
                           
    <div style="background: #F7F7F7;padding: 12px;border-radius: 10px;margin-top: 16px;">
        <div style="display: flex;align-items: center;justify-content: center;width: 64px;height: 18px;background: #1677FF;color: #FFF;margin-bottom: 8px;font-size: 12px;border-radius: 2px;">门店信息</div>
        <div style="display: flex;align-items: center;">
            <img src="${row.shop.logo_image}" alt="" style="width: 48px;height: 48px;flex-shrink: 0;border-radius: 50%;">
            <div style="margin-left: 14px;flex: 1;">
                <div style="margin-bottom: 5px;display: flex;justify-content: space-between;">
                    <span style="font-size: 16px;color: #333;">${row.shop.name}</span>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <span style="font-size: 14px;color: #666;">${row.shop.leader_name+''+row.shop.leader_mobile}</span>
                </div>
            </div>
        </div>
    </div>
    <div style="background: #F7F7F7;padding: 12px;border-radius: 10px;margin-top: 16px;">
        <div style="display: flex;align-items: center;justify-content: center;width: 50px;height: 18px;background: #6116FF;color: #FFF;margin-bottom: 8px;font-size: 12px;border-radius: 2px;">服务者</div>
        <div style="display: flex;align-items: center;">
            <img src="${row.skill.image}" alt="" style="width: 48px;height: 48px;flex-shrink: 0;border-radius: 50%;">
            <div style="margin-left: 14px;flex: 1;">
                <div style="margin-bottom: 5px;display: flex;justify-content: space-between;">
                    <span style="font-size: 16px;color: #333;">${row.skill.name}</span>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <span style="font-size: 14px;color: #666;">${row.skill.mobile}</span>
                </div>
            </div>
        </div>
    </div>
 
  </div>`
                            }else if(row.skill){
                                return `<div>
    
    <div style="background: #F7F7F7;padding: 12px;border-radius: 10px;margin-top: 16px;">
        <div style="display: flex;align-items: center;justify-content: center;width: 50px;height: 18px;background: #6116FF;color: #FFF;margin-bottom: 8px;font-size: 12px;border-radius: 2px;">服务者</div>
        <div style="display: flex;align-items: center;">
            <img src="${row.skill.image}" alt="" style="width: 48px;height: 48px;flex-shrink: 0;border-radius: 50%;">
            <div style="margin-left: 14px;flex: 1;">
                <div style="margin-bottom: 5px;display: flex;justify-content: space-between;">
                    <span style="font-size: 16px;color: #333;">${row.skill.name}</span>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <span style="font-size: 14px;color: #666;">${row.skill.mobile}</span>
                </div>
            </div>
        </div>
    </div>
 
  </div>`
                            }else if(row.shop){
                                return `<div>
                                
    <div style="background: #F7F7F7;padding: 12px;border-radius: 10px;margin-top: 16px;">
        <div style="display: flex;align-items: center;justify-content: center;width: 64px;height: 18px;background: #1677FF;color: #FFF;margin-bottom: 8px;font-size: 12px;border-radius: 2px;">门店信息</div>
        <div style="display: flex;align-items: center;">
            <img src="${row.shop.logo_image}" alt="" style="width: 48px;height: 48px;flex-shrink: 0;border-radius: 50%;">
            <div style="margin-left: 14px;flex: 1;">
                <div style="margin-bottom: 5px;display: flex;justify-content: space-between;">
                    <span style="font-size: 16px;color: #333;">${row.shop.name}</span>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <span style="font-size: 14px;color: #666;">${row.shop.leader_name+''+row.shop.leader_mobile}</span>
                </div>
            </div>
        </div>
    </div>
    
</div>`
                            }else {
                                return ''
                            }
                            
                        }},
                        
                        {field: 'price', title: __('付款信息'),operate: false, align:'left',cellStyle: function () {return {css: {"min-width": "108px"}}},formatter:function (value,row){
                            return `<div>
      
      <div style="display:flex;align-items: center;margin-bottom: 10px;">
        <div style="color: #999999;font-size: 14px;width: 72px;">总计</div>
        <div style="color: #E4484B;font-size: 18px;font-weight: bold;">${row.order.payprice}</div>
    </div>
    <div style="display:flex;align-items: center;margin-bottom: 6px;">
        <div style="color: #999999;font-size: 14px;width: 72px;">项目费</div>
        <div style="color: #3C78FF;font-size: 14px;">${row.order.price}</div>
    </div>
    <div style="display:flex;align-items: center;margin-bottom: 6px;">
        <div style="color: #999999;font-size: 14px;width: 72px;">项目折扣</div>
        <div style="color: #3C78FF;font-size: 14px;">${row.order.discount/10}</div>
    </div>
    <div style="display:flex;align-items: center;margin-bottom: 6px;">
        <div style="color: #999999;font-size: 14px;width: 72px;">优惠券</div>
        <div style="color: #3C78FF;font-size: 14px;">${row.order.coupon_price}</div>
    </div>
    <div style="display:flex;align-items: center;margin-bottom: 6px;">
        <div style="color: #999999;font-size: 14px;width: 72px;">车费</div>
        <div style="color: #3C78FF;font-size: 14px;">${row.order.travel_price}</div>
    </div>
    <div style="display:flex;align-items: center;margin-bottom: 6px;">
        <div style="color: #999999;font-size: 14px;width: 72px;">补差价</div>
        <div style="color: #3C78FF;font-size: 14px;">${row.order.premium_price}</div>
    </div>
    <div style="display:flex;align-items: center;">
        <div style="color: #999999;font-size: 14px;width: 72px;">加项费</div>
        <div style="color: #3C78FF;font-size: 14px;">${row.order.add_price}</div>
    </div>
      
    </div>`
                            
                        }},
                        {field: 'id', title: __('申请投诉'),operate: false, cellStyle: function () {return {css: {"max-width": "400px","min-width": "300px"}}},formatter:function (value,row){
                            let result=`
                           
    <div style="display: flex;align-items: center;justify-content:space-between;padding: 0 20px;height: 66px;">
        <span style="font-size: 14px;color: #999;">投诉原因</span>
        <span style="color: #1677FF;font-size: 14px;margin-left: 20px;white-space: pre-line;">${row.complaint_content}</span>
    </div>
      <div style="display: flex;align-items: center;justify-content:space-between;padding: 0 20px;height: 66px;">
        <span style="font-size: 14px;color: #999;">补充说明</span>
        <span style="color: #1677FF;font-size: 14px;margin-left: 20px;white-space: pre-line;">${row.content}</span>
    </div>

                            `;
                             
                            
                            if(row.images){
                                let images = row.images.split(',')
                                result +=`<div style="display: flex;align-items: center;justify-content:space-between;padding: 10px 20px;border-top: 1px solid #EEEEEE;">
        <span style="color: #999999;font-size: 12px;">图片</span>
        <div style="display: flex;align-items: center;margin-left: 20px;">`;
                            for(let i=0; i < images.length; i++){
                                result += `<img src="${images[i]}" alt="" style="width: 56px;height: 56px;margin-right:5px;border-radius: 8px;">`
                            }
                            
                            result += `</div></div>`
                            }
                            
                            
                            return result
                        }},
                        {field: 'id', title: __('审核状态'),operate: false, cellStyle: function () {return {css: {"min-width": "250px"}}},formatter:function (value,row){
                            return `
                           
    <div style="display: flex;align-items: center;justify-content:space-between;padding: 0 20px;width: 250px;height: 66px;border-bottom: 1px solid #EEEEEE;">
        <span style="font-size: 14px;color: #999;">状态</span>
        <span style="color: #1677FF;font-size: 14px;">${row.state_text}</span>
    </div>
    <div style="display: flex;align-items: center;justify-content:space-between;padding: 0 20px;width: 250px;height: 66px;">
        <span style="font-size: 14px;color: #999;">时间</span>
        <span style="color: #FF1F2B;font-size: 14px;">${row.create_time}</span>
    </div>
                            `
                        }},
                         
   
                        {checkbox: true,visible: false},
                        {field: 'id', title: __('Id'),visible: false},
                        {field: 'user_id', title: __('User_id'),visible: false},
                        {field: 'order_id', title: __('Order_id'),visible: false},
                        {field: 'complaint_content', title: __('Complaint_content'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content,visible: false},
                        {field: 'images', title: __('Images'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.images,visible: false},
                        {field: 'state', title: __('State'), searchList: {"0":__('State 0'),"1":__('State 1'),"-1":__('State -1')}, formatter: Table.api.formatter.normal,visible: false},
                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime,visible: false},
                        {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime,visible: false},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'detail',
                                    text: __('订单详情'),
                                    title: __('订单详情'),
                                    classname: 'btn btn-xs btn-detail btn-dialog',
                                    icon: 'fa fa-detail',
                                    url: function(row){
                                        return 'service/order/order/info?ids='+row.order_id;
                                    },
                                },
                                {
                                    name: 'deduct',
                                    text: __('扣除保证金'),
                                    title: __('扣除保证金'),
                                    classname: 'btn btn-xs btn-change btn-dialog',
                                   
                                    url: function(row){
                                        return 'service/order/complaint/deduct?ids='+row.order_id;
                                    },
                                    hidden:function(row){
                                        if(row.shop == '' && row.skill == ''){
                                            return true;
                                        }
                                    }
                                },
                                {
                                    name:'audit',
                                    text:'已处理',
                                    title:'已处理',
                                    classname: 'btn btn-xs btn-success  btn-magic btn-ajax',
                                    confirm: '已经处理过了吗？',
                                    url: 'service/order/complaint/handle?state=1',
                                    success: function (data, ret) {
                                        $(".btn-refresh").trigger('click');
                                    },
                                    hidden:function(row){
                                        if(row.state !== 0){
                                            return true;
                                        }
                                    }
                                }
                            ],
                            formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        deduct: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});