crm-app-vue3/pages/pagereceivecenter/pagereceivecenter.vue

<script>
import filterQuery from "../order/components/orderCenter/filterQuery.vue";
import commissionFilterQuery from "../order/components/commission/filterQuery.vue";
import dayjs from "dayjs";

// status 状态 1 发单（刚发出来） 2 接单（处理中） 3 收单（入库了） 4 未收（没有收到）
export default {
    components: {
        filterQuery,
        commissionFilterQuery,
    },
    data() {
        return {
            orderList: [],
            page: {
                pageSize: 10,
                pageNum: 1,
                total: 0
            },
            tagModalVisible: false,
            tagList: [],
            currentTags: [],
            currentOrder: {},
            followUpModelShow: false,
            followUpNotes: '',
            countdown: 300,
            countdownIntervals: null,

            //筛选条件
            filterList: [
                { name: '全部列表', type: 1 },
                { name: '我的接发单', type: 2 },
                { name: '我的分成', type: 3 }
            ],

            statisticsSendStatus: [],//中间统计数据
            activeType: 1,//当前选择的筛选类型,顶部tab的类型
            activeStatus: '',//当前选择的状态,统计数据的类型

            currentFollowUp: [],//当前订单的跟进记录
            showMoreFollowUp: false,

            // 查询参数
            queryParams: {
                sendDateStart: '',
                sendDateEnd: '',
                type: '1',
                item: undefined,
                phone: undefined,
                deptId: undefined,
                state: undefined,
                status: undefined,
                allTagList: [],
                identification: undefined,
                createBy: undefined,
                pageNum: 1,
                pageSize: 10,
            },

            // 字典数据
            dicts: {
                crmFormStatusDict: [],
                crmFormCategoryDict: [],
                crmFormStateDict: [],
                crmFormTacticDict: [],
            },

            mapHeight: "0px",

            // 我的分成的查询参数
            commissionQueryParams: {
                receiptDateEnd: dayjs().format("YYYY-MM-DD"),
                receiptDateStart: dayjs().startOf('month').format("YYYY-MM-DD"),
                item: undefined,
                phone: undefined,
                receiptUserId: undefined,
                pageNum: 1,
                pageSize: 10,
            },
        }
    },
    computed: {
        // 根据当前选择的类型返回对应的查询参数
        currentQueryParams() {
            return this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
        },
    },
    onLoad() {
        // 初始化字典数据
        this.$getDicts('crm_form_status').then(res => {
            this.dicts.crmFormStatusDict = res;
        });
        this.$getDicts('crm_form_category').then(res => {
            this.dicts.crmFormCategoryDict = res;
        });
        this.$getDicts('crm_form_state').then(res => {
            this.dicts.crmFormStateDict = res;
        });
        this.$getDicts('crm_form_tactic').then(res => {
            this.dicts.crmFormTacticDict = res;
        });

        // 设置 mapHeight
        uni.getSystemInfo({
            success: (e) => {
                const {
                    windowHeight
                } = e;
                this.mapHeight = (windowHeight - 70) + 'px';
            }
        });

        //初始调用
        this.getOrderList();
        this.getStatisticsSendStatus();
        // 初始化获取全部标签
        this.getAllTags();

        this.countdownInterval()
    },
    onUnload() {
        clearInterval(this.countdownInterval);
    },
    // 下拉刷新
    async onPullDownRefresh() {
        try {
            // 重置页码和列表
            this.page.pageNum = 1;
            this.queryParams.pageNum = 1;
            this.commissionQueryParams.pageNum = 1;
            this.orderList = [];
            // 重新获取数据
            await this.getOrderList();
            // 重新获取统计数据
            await this.getStatisticsSendStatus();
        } catch (error) {
            console.error('下拉刷新失败:', error);
        } finally {
            // 停止下拉刷新动画
            uni.stopPullDownRefresh();
        }
    },
    // 滑动到底部加载更多
    onReachBottom() {
        if (this.orderList.length >= this.page.total) {
            //到底了，没有更多
            return;
        }
        const params = this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
        params.pageNum++;
        this.page.pageNum++;
        this.getOrderList();
    },
    watch: {
        countdown: {
            handler(newVal, oldVal) {
                if (newVal <= 0) {
                    this.orderList.forEach(order => {
                        if (order.status == 1) {
                            this.handleBtnClick('isBusy', order)
                        }
                    })
                    clearInterval(this.countdownInterval);
                }
            },
            immediate: true
        }
    },
    methods: {
        countdownInterval() {
            this.countdownInterval = setInterval(() => {
                this.countdown--
            }, 1000);
        },
        //获取列表数据
        async getOrderList() {
            try {
                let result;

                // 如果是"我的分成"，调用分成接口
                if (this.activeType === 3) {
                    result = await uni.$u.api.selectCommissionList({
                        pageSize: this.commissionQueryParams.pageSize,
                        pageNum: this.commissionQueryParams.pageNum,
                    }, {
                        ...this.commissionQueryParams
                    });
                    console.log('分成列表', result);
                } else {
                    // 否则调用订单列表接口
                    // 合并查询参数和筛选参数
                    const params = {
                        ...this.queryParams,
                        type: this.activeType,
                        status: this.activeStatus || this.queryParams.status,
                    };
                    // 移除分页参数，因为已经在第一个参数中传递
                    delete params.pageNum;
                    delete params.pageSize;

                    result = await uni.$u.api.selectClueOrderFormList({
                        pageSize: this.queryParams.pageSize,
                        pageNum: this.queryParams.pageNum,
                    }, params);
                    console.log('接单列表', result);
                    // 把数组按照status的大小排序，从小到大
                    result.rows.sort((a, b) => {
                        return a.status - b.status;
                        // return b.status - a.status;
                    })
                }

                // 获取当前使用的查询参数
                const params = this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
                
                // 如果是第一页（下拉刷新或初始加载），直接替换列表
                if (params.pageNum === 1) {
                    this.orderList = result.rows;
                } else {
                    // 否则追加数据（上拉加载更多）
                    this.orderList.push(...result.rows);
                }
                this.page.total = result.total;
                this.page.pageNum = params.pageNum;
                this.page.pageSize = params.pageSize;

            } catch (error) {
                console.error('列表接口调用失败:', error);
                // 添加用户友好的错误提示
                const errorMsg = this.activeType === 3 ? '获取分成列表失败，请稍后重试' : '获取订单列表失败，请稍后重试';
                uni.$u.toast(errorMsg);
            }
        },
        //获取统计数据
        async getStatisticsSendStatus() {
            // 如果是"我的分成"，不需要统计数据
            if (this.activeType === 3) {
                this.statisticsSendStatus = [];
                return;
            }
            const { data } = await uni.$u.api.statisticsSendStatus({ type: this.activeType });
            // console.log('统计数据是', data)

            this.statisticsSendStatus = data;
        },
        // 处理按钮点击事件
        async handleBtnClick(btnType, order) {

            if (btnType == 'acceptOrder') {
                //去接单
                console.log('去接单', order)

                //打开模态窗二次确认，确认后跳转接单form
                uni.showModal({
                    title: '确认接单',
                    content: `是否确认接单订单：${order.item}？`,
                    success: async (res) => {
                        if (res.confirm) {
                            await uni.$u.api.oderForm({
                                status: "2",
                                id: order.id,
                            });
                            uni.navigateTo({
                                url: `/pages/orderDetailRefactored/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
                            })
                        } else if (res.cancel) {
                            // 用户点击了取消，不执行任何操作
                            uni.$u.toast('已取消接单');
                        }
                    }
                })
            } else if (btnType == 'isBusy') {
                //在忙
                console.log('在忙', order)


                //当前订单移动到末尾
                this.orderList.push(this.orderList.splice(this.orderList.indexOf(order), 1)[0]);


            } else if (btnType == 'willFollow') {
                //待跟进
                console.log('待跟进', order)
                //打开模态窗
                this.followUpModelShow = true;
                this.currentOrder = order


            } else if (btnType == 'tag') {
                //打标签
                console.log('打标签', order)
                // 如果标签列表为空，重新获取一次
                if (!this.tagList || this.tagList.length === 0) {
                    await this.getAllTags();
                }
                //打开模态窗
                this.tagModalVisible = true;
                // 确保 order.tags 存在且是数组
                if (order && order.tags && Array.isArray(order.tags) && order.tags.length > 0) {
                    this.currentTags = order.tags.map(tag => tag && tag.id ? tag.id : null).filter(id => id !== null);
                } else {
                    this.currentTags = [];
                }
                this.currentOrder = order
            } else if (btnType == 'share') {
                //一键分享
                console.log('一键分享', order)
            } else if (btnType == 'oneFollow') {
                //待跟进
                console.log('待跟进', order)
                this.followUpModelShow = true;
                this.currentOrder = order



            }
        },
        // 格式化金额
        formatAmount(amount) {
            if (!amount) return '-';
            return parseFloat(amount).toLocaleString();
        },
        // 格式化金额
        formatAmount(amount) {
            if (!amount) return '-';
            return parseFloat(amount).toLocaleString();
        },
        // 跳转订单详情
        toOrderDetail(order) {
            //点卡片看详情
            // if (order.status == '1' || order.status == '2') {
            uni.navigateTo({
                url: `/pages/orderDetailRefactored/index?orderId=${order.id}&item=${order.item}&type=${this.type}&clueId=${order.clueId}`,
            })
            // } else {
            //     uni.$u.toast('当前订单无法查看详情');
            //     return;
            // }


        },


        //获取全部标签
        async getAllTags() {
            try {
                const res = await uni.$u.api.getClueTagGroupVoList({ tagGroupApplication: '2' })
                console.log('全部标签', res)
                // 确保数据结构正确
                if (res && res.data && res.data.length > 0 && res.data[0].clueTagDataList) {
                    this.tagList = res.data[0].clueTagDataList || [];
                } else {
                    this.tagList = [];
                    console.warn('标签数据格式不正确', res);
                }
            } catch (error) {
                console.error('获取标签列表失败:', error);
                this.tagList = [];
                uni.$u.toast('获取标签列表失败');
            }
        },
        cancelTag() {
            this.tagModalVisible = false;
            // 重置状态
            this.currentTags = [];
            this.currentOrder = {};
        },
        async confirmTag() {
            try {
                console.log('确认打标签', this.currentTags)
                // 确保 currentTags 是数组且不为空
                if (!Array.isArray(this.currentTags)) {
                    this.currentTags = [];
                }
                // 过滤掉无效值
                const validTags = this.currentTags.filter(tag => tag !== null && tag !== undefined && tag !== '');
                const allTags = validTags.join(',');
                console.log('allTags', allTags)
                
                if (!this.currentOrder || !this.currentOrder.id) {
                    uni.$u.toast('订单信息错误');
                    return;
                }
                
                await uni.$u.api.updateTags({
                    id: this.currentOrder.id,
                    allTags: allTags,
                })
                this.tagModalVisible = false;
                uni.$u.toast('标签更新成功');
                
                //更新当前订单的标签
                if (this.currentOrder && Array.isArray(this.tagList)) {
                    this.currentOrder.tags = this.tagList.filter(tag => tag && tag.id && validTags.includes(tag.id));
                }
                
                // 更新列表中的订单标签
                const orderIndex = this.orderList.findIndex(item => 
                    item.id === this.currentOrder.id || 
                    (item.receiptId && this.currentOrder.receiptId && item.receiptId === this.currentOrder.receiptId)
                );
                if (orderIndex !== -1 && this.currentOrder.tags) {
                    this.$set(this.orderList, orderIndex, {
                        ...this.orderList[orderIndex],
                        tags: this.currentOrder.tags
                    });
                }
            } catch (error) {
                console.error('更新标签失败:', error);
                uni.$u.toast('标签更新失败');
            }
        },

        // 确认跟进细节按钮点击事件
        async confirmFollowUp() {
            console.log('确认跟进细节：', this.followUpNotes);
            this.followUpModelShow = false;
            // 可以在这里添加提交跟进细节的逻辑
            // 未收的时候，提交一个跟进记录     待跟进_内容
            const res = await uni.$u.api.addOrderFollow({
                orderId: this.currentOrder.id,
                content: `待跟进_${this.followUpNotes}`,
            })
            if (res.code == 200) {
                uni.$u.toast('提交待跟进记录成功');
            }
            this.followUpNotes = '';
        },

        // 切换筛选条件
        async changeFilter(param) {
            this.activeType = param.type;
            // 切换筛选条件时，重置状态筛选
            this.activeStatus = '';
            this.queryParams.status = undefined;

            this.page.pageNum = 1;
            this.queryParams.pageNum = 1;
            this.commissionQueryParams.pageNum = 1;
            this.orderList = [];

            this.getOrderList();
            this.getStatisticsSendStatus()
        },
        // 处理关键词搜索
        handleKeyword() {
            const params = this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
            params.pageNum = 1;
            this.page.pageNum = 1;
            this.orderList = [];
            this.getOrderList();
        },
        // 处理关键词清空
        handleKeywordClear() {
            const params = this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
            params.phone = "";
            params.pageNum = 1;
            this.page.pageNum = 1;
            this.orderList = [];
            this.getOrderList();
        },
        // 显示筛选弹窗
        handleshowFilter() {
            const refName = this.activeType === 3 ? 'commissionFilter' : 'filter';
            this.$refs[refName].show();
        },
        // 处理筛选查询
        handleFilterQuery() {
            const params = this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
            params.pageNum = 1;
            this.page.pageNum = 1;
            this.orderList = [];
            this.getOrderList();
        },
        //切换统计数据的类型
        changeStatus(param) {
            if (param == this.activeStatus) {
                //如果当前点击的状态和当前选中的状态相同，则取消选中
                this.activeStatus = '';
                this.queryParams.status = undefined;
                this.queryParams.pageNum = 1;
                this.page.pageNum = 1;
                this.orderList = [];
                this.getOrderList();
            } else {
                //如果当前点击的状态和当前选中的状态不同，则切换选中状态
                this.activeStatus = param;
                this.queryParams.status = param;
                this.queryParams.pageNum = 1;
                this.page.pageNum = 1;
                this.orderList = [];
                this.getOrderList();
            }
        },
        //点击查看更多的跟进
        async handleShowMoreFollowUp() {
            //当前的order是
            console.log()
            const { data } = await uni.$u.api.getDuplicateOrderFollowListByClueId({
                clueId: this.currentOrder.clueId
            });
            console.log('这里是跟进', data)

            const allData = []

            for (const key in data) {
                allData.push(...data[key])
            }
            const filterData = allData.filter(item => {
                console.log('过滤', item)
                //过滤出来tem.content不包括联系师傅、师傅拍图技巧、到达客户面对面、未收评分、待跟进_
                return item.content.indexOf('联系师傅') == -1 && item.content.indexOf('师傅拍图技巧') == -1 && item.content.indexOf('到达客户面对面') == -1 && item.content.indexOf('未收评分') == -1 && item.content.indexOf('待跟进_') == -1
            })

            console.log('筛选后的跟进', filterData)

            this.currentFollowUp = filterData || [];
            this.showMoreFollowUp = true


        }
    }
}
</script>

<template>
    <view class="container">
        <u-navbar title="接单中心" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>

        <!-- 筛选条件 -->
        <u-tabs :list="filterList" @click="changeFilter"></u-tabs>

        <!-- 查询参数区域 -->
        <view class="queryParams_wrap">
            <view class="search">
                <u--input clearable prefixIcon="search" v-model="currentQueryParams.phone" shape="circle" @blur="handleKeyword"
                    @clear="handleKeywordClear" placeholder="请输入电话"></u--input>
            </view>
            <view class="query">
                <view style="margin-right: 10rpx;" @click="handleshowFilter">筛选</view>
                <u-icon name="arrow-down-fill" color="#aaa" size="10"></u-icon>
            </view>
        </view>



        <!-- 统计数据 -->
        <view v-if="activeType !== 3" class="send_status_wrap">
            <scroll-view scroll-x>
                <view class="statisticsContainer">
                    <view v-for="item in statisticsSendStatus" :key="item.status" @click="changeStatus(item.status)"
                        class="statisticsItem" :class="{ 'activeStatusClass': item.status == activeStatus }">
                        <view>{{ item.statusName }}</view>
                        <view>({{ item.count || 0 }})</view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 订单列表容器 -->
        <view class="order_list_wrap">
            <transition-group name="order-move" tag="div">
                <!-- 我的分成 - 使用专门的分成卡片 -->
                <view class="commission_item" v-for="item in orderList" :key="activeType === 3 ? item.id : (item.receiptId + item.id)" v-if="activeType === 3">
                    <view class="commission_top">
                        <view class="top_left">{{ item.receiptItem || '-' }}</view>
                        <view class="top_right">
                            <text class="account_type">{{ item.accountType === '1' ? '前端' : '后端' }}</text>
                        </view>
                    </view>
                    <view class="commission_info">
                        <view class="info_row">
                            <view class="info_item">
                                <text class="label">电话: </text>
                                <text class="value">{{ item.phone || '-' }}</text>
                            </view>
                        </view>
                        <view class="info_row">
                            <view class="info_item">
                                <text class="label">收单时间: </text>
                                <text class="value">{{ item.receiptDate || '-' }}</text>
                            </view>
                        </view>
                        <view class="info_row">
                            <view class="info_item">
                                <text class="label">收单人: </text>
                                <text class="value">{{ item.receiptNickName || '-' }}</text>
                            </view>
                            <view class="info_item">
                                <text class="label">公司: </text>
                                <text class="value">{{ item.orgName || '-' }}</text>
                            </view>
                        </view>
                        <view class="info_row">
                            <view class="info_item">
                                <text class="label">分成所属人: </text>
                                <text class="value">{{ item.userName || '-' }}</text>
                            </view>
                            <view class="info_item">
                                <text class="label">分成比例: </text>
                                <text class="value">{{ item.commissionRate || '-' }}%</text>
                            </view>
                        </view>
                    </view>
                    <view class="commission_amount">
                        <view class="amount_item">
                            <view class="amount_label">业绩</view>
                            <view class="amount_value primary">{{ formatAmount(item.commissionAmount) }}</view>
                        </view>
                        <view class="amount_item">
                            <view class="amount_label">毛业绩</view>
                            <view class="amount_value">{{ formatAmount(item.grossAmount) }}</view>
                        </view>
                    </view>
                </view>
                
                <!-- 全部列表和我的接发单 - 使用订单卡片 -->
                <view class="orderCard" v-for="item in orderList" 
                    :key="activeType === 3 ? item.id : (item.receiptId + item.id)"
                    v-if="activeType !== 3" 
                    @click.stop="toOrderDetail(item)">
                    <view class="bandAndPrice">
                        <view class="bandName">{{ item.itemBrand || '暂无品牌' }}</view>
                        <view class="price">￥{{ item.priceRange || '?' }}</view>
                    </view>

                    <view class="mainLind">
                        <view class="itemName">{{ item.item || '暂无项目' }}</view>

                        <view class="mainLindInfo">
                            <view class="infoItem">
                                <view class="infoItemTitle">发单人:</view>
                                <view>{{ item.createNickName || '未知' }}</view>
                            </view>
                            <view class="infoItem">
                                <view class="infoItemTitle">机构：</view>
                                <view>{{ item.orgName || '暂无机构' }}</view>
                            </view>
                            <view class="infoItem">
                                <view class="infoItemTitle">电话：</view>
                                <view>{{ item.phone || '暂无电话' }}</view>
                            </view>
                            <view class="infoItem">
                                <view class="infoItemTitle">接单人：</view>
                                <view>{{ item.identificationName || '暂无所属人' }}</view>
                            </view>
                            <view class="infoItem">
                                <view class="infoItemTitle">运营人：</view>
                                <view>{{ item.clueOperationName || '暂无运营人' }}</view>
                            </view>
                            <view class="infoItem">
                                <view class="infoItemTitle">发单日期：</view>
                                <view>{{ item.sendDate || '暂无时间' }}</view>
                            </view>
                        </view>
                    </view>

                    <view class="tags">
                        <view class="tag" v-for="(tag, index) in item.tags" :key="index"
                            :style="{ backgroundColor: tag.color, opacity: 0.8 }">
                            {{ tag.name }}
                        </view>
                    </view>

                    <view class="Btns">
                        <!-- status 状态 1 发单（刚发出来） 2 接单（处理中） 3 收单（入库了） 4 未收（没有收到） -->

                        <view class="btnGroup" v-if="item && (item.status == '1')">
                            <view class="card-button" @click.stop="handleBtnClick('acceptOrder', item)">立即接单</view>
                            <view class="card-button isBusy" @click.stop="handleBtnClick('isBusy', item)">
                                <view>在忙</view>
                                <view v-if="countdown > 0">（{{ countdown }} s）</view>
                            </view>
                        </view>

                        <view class="btnGroup" v-if="item && (item.status == '2')">
                            <view class="card-button willFollow" @click.stop="handleBtnClick('willFollow', item)">
                                待跟进
                            </view>
                            <view class="card-button isBusy" @click.stop="handleBtnClick('tag', item)">打标签</view>
                        </view>

                        <view class="btnGroup" v-if="item && (item.status == '4')">
                            <view class="card-button oneFollow" @click.stop="handleBtnClick('oneFollow', item)">待跟进</view>
                        </view>
                    </view>
                </view>
            </transition-group>
            <view class="hasMore">
                {{ orderList.length >= page.total ? '没有更多了~' : '向下滑动加载更多~' }}
            </view>
        </view>




        <!-- 打标签模态窗 -->
        <u-modal showCancelButton :show="tagModalVisible" title="选择标签" @confirm="confirmTag" @cancel="cancelTag">
            <view class="slot-content">
                <u-checkbox-group class="tagCheckboxGroup" v-model="currentTags" placement="column">
                    <u-checkbox 
                        v-for="(item, index) in tagList" 
                        :key="item && item.id ? item.id : index"
                        :customStyle="{ marginBottom: '8px' }" 
                        :label="item && item.name ? item.name : '未知标签'"
                        :name="item && item.id ? item.id : ''">
                    </u-checkbox>
                </u-checkbox-group>
                <view v-if="tagList.length === 0" style="text-align: center; padding: 40rpx 0; color: #999;">
                    暂无可用标签
                </view>
            </view>
        </u-modal>

        <u-modal showCancelButton :show="followUpModelShow" :title="'填写跟进细节'" @confirm="confirmFollowUp"
            @cancel="followUpModelShow = false">

            <view class="modal-content">
                <u--textarea v-model="followUpNotes" placeholder="请输入情况" confirm-type="done"
                    style="width: 400rpx;margin-bottom: 10rpx; "></u--textarea>
                <u-button type="primary" @click="handleShowMoreFollowUp">点击查看更多跟进</u-button>

            </view>
        </u-modal>

        <!-- 更多跟进 -->
        <u-modal :show="showMoreFollowUp" title="详细跟进记录" @confirm="showMoreFollowUp = false">
            <!-- <view class="followUpBox"> -->
            <scroll-view class="followUpBox" scroll-y>
                <view v-for="value in currentFollowUp" :key="value.id" class="followUpItem">
                    <view class="followUpInfo">
                        <view class="followUpNickname">
                            账号：{{ value.createNickname }}
                        </view>
                        <view class="followUpOrgName">{{ value.orgName }}</view>
                    </view>
                    <view class="followUpContent">{{ value.content }}</view>
                </view>
            </scroll-view>
            <!-- </view> -->
        </u-modal>

        <!-- 筛选组件 - 订单列表 -->
        <filter-query v-if="activeType !== 3" ref="filter" v-model="queryParams" @getList="handleFilterQuery" :mapHeight="mapHeight"
            :dicts="dicts"></filter-query>
        
        <!-- 筛选组件 - 我的分成 -->
        <commission-filter-query v-if="activeType === 3" ref="commissionFilter" v-model="commissionQueryParams" @getList="handleFilterQuery" :mapHeight="mapHeight"></commission-filter-query>
    </view>
</template>

<style scoped lang="scss">
.container {
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.hasMore {
    text-align: center;
    padding: 20rpx 0;
    font-size: 24rpx;
    color: #999;
}

.queryParams_wrap {
    display: flex;
    background: #fff;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;

    .query,
    .search {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        color: #202020;
    }

    .query {
        flex: 1;
        cursor: pointer;
    }

    .search {
        flex: 2;
        padding-left: 20px;
        padding-right: 10px;
    }
}

.send_status_wrap {
    width: 690rpx;
    padding: 0 30rpx;
    margin-top: 20rpx;
    display: flex;

    .statisticsContainer {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

.order_list_wrap {
    padding: 10px 0;
}

/* 分成卡片样式 */
.commission_item {
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin: 20rpx 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);

    .commission_top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15rpx;

        .top_left {
            font-size: 36rpx;
            font-weight: bold;
            color: #202020;
        }

        .top_right {
            .account_type {
                background: #108cff;
                color: #fff;
                padding: 8rpx 16rpx;
                border-radius: 20rpx;
                font-size: 24rpx;
            }
        }
    }

    .commission_info {
        margin-bottom: 15rpx;

        .info_row {
            display: flex;
            margin-bottom: 16rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .info_item {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: 28rpx;

                .label {
                    color: #9b9aa2;
                    margin-right: 16rpx;
                    min-width: 120rpx;
                }

                .value {
                    color: #202020;
                }
            }
        }
    }

    .commission_amount {
        display: flex;
        justify-content: space-around;
        padding: 30rpx 0;
        border-top: 1rpx solid #f0f0f0;
        background: #f8f9fb;
        border-radius: 20rpx;

        .amount_item {
            text-align: center;

            .amount_label {
                font-size: 24rpx;
                color: #9b9aa2;
                margin-bottom: 10rpx;
            }

            .amount_value {
                font-size: 32rpx;
                font-weight: bold;
                color: #202020;

                &.primary {
                    color: #108cff;
                }
            }
        }
    }
}

/* 订单卡片主容器 */
.orderCard {
    box-sizing: border-box;
    width: 95%;
    background-color: #fff;
    margin: 20rpx auto;
    border-radius: 20rpx;
    padding: 20rpx;
}

/* 品牌和价格区域 */
.orderCard .bandAndPrice {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 品牌名称 */
.orderCard .bandAndPrice .bandName {
    font-size: 20rpx;
    font-weight: 700;
    border: 2px solid #2563EB;
    padding: 6rpx 12rpx;
    border-radius: 15rpx;
    background-color: #EFF6FF;
    color: #2563EB;
}

/* 价格 */
.orderCard .bandAndPrice .price {
    font-size: 30rpx;
    font-weight: 700;
}

/* 主要内容行 */
.orderCard .mainLind {
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20rpx;
    flex-direction: column;
}

/* 主要内容行信息容器 */
.orderCard .mainLind .mainLindInfo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: column;
    gap: 10rpx;
    font-size: 24rpx;
    color: #6b7280;
    text-wrap: nowrap;
    width: 100%;

    .infoItem {
        display: flex;

        .infoItemTitle {
            font-weight: 700;
        }
    }
}

/* 商品名称 */
.orderCard .mainLind .itemName {
    font-size: 30rpx;
    font-weight: 700;
    color: #374751;
    width: 100%;
    text-align: left;
}

/* 标签区域 */
.orderCard .tags {
    display: flex;
    gap: 10rpx;
}

/* 单个标签 */
.orderCard .tags .tag {
    font-size: 20rpx;
    font-weight: 700;
    padding: 6rpx 12rpx;
    border-radius: 15rpx;
    background-color: #EFF6FF;
    color: #fff;
}

/* 按钮区域 */
.orderCard .Btns {
    margin-top: 10rpx;
}

/* 按钮组 */
.orderCard .Btns .btnGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20rpx;
}

/* 卡片按钮基础样式 */
.orderCard .Btns .btnGroup .card-button {
    font-size: 24rpx;
    font-weight: 700;
    border: 2rpx solid #2563EB;
    padding: 6rpx 12rpx;
    border-radius: 15rpx;
    background-color: #2563EB;
    color: #fff;
    width: 45%;
    text-align: center;
    cursor: pointer;
    height: 60rpx;
    line-height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 忙碌状态按钮 */
.orderCard .Btns .btnGroup .card-button.isBusy {
    background-color: #fff;
    color: #6B7280;
    border-color: #6B7280;
}

/* 待跟进状态按钮 */
.orderCard .Btns .btnGroup .card-button.willFollow {
    background-color: #EFF6FF;
    color: #2563EB;
}

/* 单独跟进按钮 */
.orderCard .Btns .btnGroup .card-button.oneFollow {
    width: 100%;
    background-color: #EFF6FF;
    color: #2563EB;
}

.followUpScroll {
    height: 600rpx;
}

/* 订单移动动画 */
.order-move-enter-active,
.order-move-leave-active {
    transition: all 0.5s ease;
}

.order-move-enter-from,
.order-move-leave-to {
    opacity: 0;
    transform: translateY(30px);
}

.order-move-move {
    transition: transform 0.5s ease;
}










.cancelBtn {
    margin-top: 20rpx;
}


.tagCheckboxGroup {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}






.statisticsItem {
    font-size: 30rpx;
    display: inline-flex;
    align-items: center;
    background: #fff;
    margin-right: 30rpx;
    padding: 8rpx 16rpx;
    white-space: nowrap;
    border-radius: 6rpx;
    color: #333;

    &.activeStatusClass {
        color: #fff;
        background: #4c8afe;
    }
}

.activeStatusClass {
    background-color: #2563EB;
    color: #fff;

}

::v-deep .u-tabs__wrapper__nav__line {
    top: 7px;
}



.followUpItem {
    background-color: #F7FBFE;
    width: 540rpx;
    margin: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;

    .followUpInfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10rpx;
        margin-bottom: 10rpx;
    }

    .followUpNickname {
        font-size: 24rpx;
        font-weight: 700;
        color: #2563EB;
    }

    .followUpOrgName {
        font-size: 24rpx;
        font-weight: 700;
        color: #6B7280;
    }

    .followUpContent {
        font-size: 24rpx;
        font-weight: 700;
        color: #374751;
    }
}

.followUpBox {
    height: 600rpx;
}

.u-tabs{
    background-color: #fff;
}

::v-deep .u-navbar {
    flex-shrink: 0;
}

</style>