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

<script>
// import orderCard from "./compounts/orderCard.vue";

export default {
    components: {
        // orderCard,
    },
    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 }
            ],

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

            currentFollowUp: [],//当前订单的跟进记录
            showMoreFollowUp: false
        }
    },
    onLoad() {
        //初始调用
        this.getOrderList();
        this.getStatisticsSendStatus();

        this.countdownInterval()
        // uni.navigateTo({
        //     url: `/pages/orderDetailNew/index?orderId=5464&item=测试发单&type=undefined&clueId=1973381744953516033`,
        // })
    },
    onUnload() {
        clearInterval(this.countdownInterval);
    },
    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 {
                const result = await uni.$u.api.selectClueOrderFormList({
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum,
                }, {
                    type: this.activeType,
                    status: this.activeStatus,
                });

                console.log('接单列表', result);
                // 把数组按照status的大小排序，从小到大
                result.rows.sort((a, b) => {
                    return a.status - b.status;
                })


                this.orderList.push(...result.rows);
                this.page.total = result.total;

            } catch (error) {
                console.error('接单列表接口调用失败:', error);
                // 添加用户友好的错误提示
                uni.$u.toast('获取订单列表失败，请稍后重试');
            }
        },
        //获取统计数据
        async getStatisticsSendStatus() {
            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/orderDetailNew/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)
                //打开模态窗
                this.tagModalVisible = true;
                this.getAllTags();
                this.currentTags = order.tags.map(tag => tag.id);
                this.currentOrder = order
            } else if (btnType == 'share') {
                //一键分享
                console.log('一键分享', order)
            } else if (btnType == 'oneFollow') {
                //待跟进
                console.log('待跟进', order)
                this.followUpModelShow = true;
                this.currentOrder = order



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


        },

        //滑动加载
        scrolltolower() {
            // console.log('到底了');
            if (this.orderList.length >= this.page.total) {
                //到底了，没有更多
            } else {
                this.page.pageNum++;
                this.getOrderList();
            }
        },

        //获取全部标签
        async getAllTags() {
            const res = await uni.$u.api.getClueTagGroupVoList({ tagGroupApplication: '2' })
            console.log('全部标签', res.data[0].clueTagDataList)
            this.tagList = res.data[0].clueTagDataList;
        },
        cancelTag() {
            this.tagModalVisible = false;
        },
        async confirmTag() {
            console.log('确认打标签', this.currentTags)
            // 这里可以添加打标签的逻辑
            const allTags = this.currentTags.map(tag => tag).join(',');
            console.log('allTags', allTags)
            await uni.$u.api.updateTags({
                id: this.currentOrder.id,
                allTags: allTags,
            })
            this.tagModalVisible = false;
            uni.$u.toast('标签更新成功');
            //更新当前订单的标签
            this.currentOrder.tags = this.tagList.filter(tag => this.currentTags.includes(tag.id));
        },

        // 确认跟进细节按钮点击事件
        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.page.pageNum = 1;
            this.orderList = [];

            this.getOrderList();
            this.getStatisticsSendStatus()
        },
        //切换统计数据的类型
        changeStatus(param) {
            if (param == this.activeStatus) {
                //如果当前点击的状态和当前选中的状态相同，则取消选中
                this.activeStatus = '';
                this.page.pageNum = 1;
                this.orderList = [];
                this.getOrderList();
            } else {
                //如果当前点击的状态和当前选中的状态不同，则切换选中状态
                this.activeStatus = param;
                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>

        <!-- 统计数据 -->
        <scroll-view scroll-x class="statusScrollView" style="width: 100%;">
            <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 class="scrollViewContainer">
            <scroll-view class="scrollView" scroll-y @scrolltolower="scrolltolower">
                <transition-group name="order-move" tag="div">
                    <!-- <orderCard v-for="item in orderList" :key="item.receiptId + item.id" :order="item"
                        @handleBtnClick="handleBtnClick">
                    </orderCard> -->
                    <view class="orderCard" v-for="item in orderList" :key="item.receiptId + item.id"
                        @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="mainLindImg">
                                <image :src="'/static/acceptOrder/orderCardPic.jpg'" v-if="item.src" />
                            </view> -->
                            <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">

                            <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 == '3')">
                                <view class="card-button share" @click.stop="handleBtnClick('share', 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>
            </scroll-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 :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in tagList" :key="item.id"
                        :label="item.name" :name="item.id">
                    </u-checkbox>
                </u-checkbox-group>
            </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>
    </view>
</template>

<style scoped lang="scss">
.hasMore {
    text-align: center;
    padding: 20rpx 0;
    font-size: 24rpx;
    color: #999;
}

.scrollViewContainer {
    height: calc(100vh - 44px - 44px - 27px - 10rpx);
}

.followUpScroll {
    height: 600rpx;
}

.scrollView {
    height: 100%;
}

/* 订单移动动画 */
.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;
}










/* 订单卡片主容器 */
.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 .mainLindImg image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 20rpx;
}

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

    .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;
}

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

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

/* 分享按钮 */
.orderCard .Btns .btnGroup .card-button.share {
    width: 100%;
}

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

.cancelBtn {
    margin-top: 20rpx;
}


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






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

.statisticsItem {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 10rpx 20rpx;
    border-radius: 15rpx;
    font-size: 24rpx;
    font-weight: 700;
    margin: 0 10rpx;
    white-space: nowrap;
    flex-shrink: 0;
}

.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;
}
</style>