司机首页添加状态，细节修改

qingyiay

2023-06-29 37a0b120e66bcda386b0a8c256ca0fe9f09b29cb

司机首页添加状态，细节修改

 pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails.vue

@@ -81,7 +81,7 @@
                            <view class="divider"><u-divider></u-divider></view>
                            <view class="first-line">
                                <view class="car-num">{{ item.carNo || '' }}</view>
                                <view class="order-type">{{ coalStatus[item.status] }}</view>
                                <view class="order-type">{{ coalStatus[item.statusWeigh]||'' }}</view>
                            </view>
                            <view class="second-line">
                                <view class="line-content">
@@ -122,9 +122,7 @@
                orderPlanId: null,
                orderCode: null,
                orderPlanDetail: {},
                coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请',
                    '进入场院'
                ],
                coalStatus: ['未称重', '称重中', '验质中', '称重完成'],
                yyDailyList: [],
                // 领取数量
                cars2: '',

 pages/customer-page/customer-index/fayunPlanDetails/fayunPlanMore/fayunPlanMore.vue

@@ -11,7 +11,7 @@
                <view class="body-container">
                    <view class="container-block">
                        <view class="">提煤单状态</view>
                        <view class="">{{ coalStatus[yyDailyList.status] }}</view>
                        <view class="">{{ coalStatus[yyDailyList.statusWeigh]||'' }}</view>
                    </view>
                </view>
                <view class="body-container">
@@ -101,9 +101,7 @@
                id: '',
                yyDailyList: {},
                orderPlanDetail: {},
                coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请',
                    '进入场院'
                ],
                coalStatus: ['未称重', '称重中', '验质中', '称重完成'],
                index: ''
            };
        },

 pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue

@@ -17,17 +17,28 @@
                </view>
            </view>
            <view class="main-block">
                <view class="data-filter" @click="showPopup">
                    <view class="search-icon"><u-icon name="search" color="#494949" size="50"></u-icon></view>
                <view class="data-filter"
                    @click="showPopup">
                    <view class="search-icon"><u-icon name="search"
                            color="#494949"
                            size="50"></u-icon></view>
                    <view class="date-text">{{ dateselect }}</view>
                    <view class="">
                        <view class="arrow-icon"><u-icon name="arrow-down-fill" color="#1481FF" size="50"></u-icon></view>
                        <view class="arrow-icon"><u-icon name="arrow-down-fill"
                                color="#1481FF"
                                size="50"></u-icon></view>
                    </view>
                </view>
                <view class="filter-condition"></view>
                <view class="date-information">
                    <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="filterList.length == 0"></u-empty>
                    <view class="statistics-card" v-for="(item, index) in filterList" :key="index">
                    <u-empty mode="data"
                        icon="http://cdn.uviewui.com/uview/empty/data.png"
                        textSize="30"
                        iconSize="1000"
                        v-if="filterList.length == 0"></u-empty>
                    <view class="statistics-card"
                        v-for="(item, index) in filterList"
                        :key="index">
                        <view class="card-top">
                            <view class="left"><combined-title :title="item.condition"></combined-title></view>
                            <view class="card-top_num">
@@ -40,13 +51,18 @@
                                }}吨
                            </view>
                        </view>
                        <view class="card-main" v-for="(value, i) in item.taskCoalList" :key="i" @click="faYunDetail(value.id)">
                        <view class="card-main"
                            v-for="(value, i) in item.taskCoalList"
                            :key="i"
                            @click="faYunDetail(value.id)">
                            <view class="first-line">
                                <view class="main-information">
                                    <view class="sign">装</view>
                                    <view class="filedname">
                                        <text v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.deptName || '' }}</text>
                                        <text v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.customerName || '' }}</text>
                                        <text
                                            v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.deptName || '' }}</text>
                                        <text
                                            v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.customerName || '' }}</text>
                                    </view>
                                </view>
                                <view class="main-divider"></view>
@@ -56,8 +72,10 @@
                                <view class="main-information">
                                    <view class="sign">卸</view>
                                    <view class="filedname">
                                        <text v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.customerName || '' }}</text>
                                        <text v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.deptName || '' }}</text>
                                        <text
                                            v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.customerName || '' }}</text>
                                        <text
                                            v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.deptName || '' }}</text>
                                    </view>
                                </view>
                            </view>
@@ -65,33 +83,44 @@
                                <view class="coal-name">
                                    <view class="">{{ value.coalName }}</view>
                                    <view class="black-bar"></view>
                                    <view class="coal-type" v-if="value.orderType">{{ value.orderType }}</view>
                                    <view class="coal-type"
                                        v-if="value.orderType">{{ value.orderType }}</view>
                                </view>
                                <!-- <view class="black-block"><view class="black-bar"></view></view>
                                <view class="coal-type">{{ value.orderType }}</view> -->
                            </view>
                            <view class="third-line">
                                <view class="carnum-icon"><image src="https://mx.jzeg.cn:9095/appimg/image/banner/carNO.png" mode="widthFix"></image></view>
                                <view class="carnum-icon">
                                    <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carNO.png"
                                        mode="widthFix"></image>
                                </view>
                                <view class="carnum-text">{{ value.carNo || '' }}</view>
                            </view>
                            <view class="fourth-line">
                                <view class="time-icon"><u-icon name="clock" color="#515151" size="28"></u-icon></view>
                                <view class="time-icon"><u-icon name="clock"
                                        color="#515151"
                                        size="28"></u-icon></view>
                                <view class="send-date">{{ value.sendDate }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <u-popup :show="conditinonShow" mode="bottom" :closeable="true" :closeOnClickOverlay="true" @close="conditinonclose">
                <scroll-view scroll-y="true" class="scroll-Y">
            <u-popup :show="conditinonShow"
                mode="bottom"
                :closeable="true"
                :closeOnClickOverlay="true"
                @close="conditinonclose">
                <scroll-view scroll-y="true"
                    class="scroll-Y">
                    <view class="filter-main">
                        <view class="filter-body date-button">
                            <view class="condition-name">日期</view>
                            <view class="filter-name">
                                <u-button :text="dateselect" @click="opencalendar"></u-button>
                                <u-button :text="dateselect"
                                    @click="opencalendar"></u-button>
                                <view class="filter-button ">
                                    <uni-calendar
                                        ref="calendar"
                                    <uni-calendar ref="calendar"
                                        class="uni-calendar--hook"
                                        :clear-date="true"
                                        :date="info.date"
@@ -100,49 +129,71 @@
                                        :startDate="info.startDate"
                                        :endDate="info.endDate"
                                        :range="info.range"
                                        @confirm="confirm"
                                    />
                                        @confirm="confirm" />
                                </view>
                            </view>
                        </view>
                        <view class="filter-body">
                            <view class="condition-name">煤种</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in coalList" :key="index" @click="filterCondition(0, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" :class="{ shadowactive: item.active }"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in coalList"
                                    :key="index"
                                    @click="filterCondition(0, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"
                                        :class="{ shadowactive: item.active }"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="coalShow < coalTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(0)" v-if="coalTotal > 3"></u-button>
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="typeList.length !== 0">
                        <view class="filter-body"
                            v-if="typeList.length !== 0">
                            <view class="condition-name">类型</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in typeList" :key="index" @click="filterCondition(1, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in typeList"
                                    :key="index"
                                    @click="filterCondition(1, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="typeShow < typeTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(1)" v-if="typeTotal > 3"></u-button>
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType !== 1">
                        <view class="filter-body"
                            v-if="roleType !== 1">
                            <view class="condition-name">客户</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in customerList" :key="index" @click="filterCondition(2, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in customerList"
                                    :key="index"
                                    @click="filterCondition(2, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="customerShow < customerTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(2)" v-if="customerTotal > 3"></u-button>
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType == 1">
                        <view class="filter-body"
                            v-if="roleType == 1">
                            <view class="condition-name">货代</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in forwarderList" :key="index" @click="filterCondition(3, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in forwarderList"
                                    :key="index"
                                    @click="filterCondition(3, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button
@@ -155,11 +206,17 @@
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType != 3">
                        <view class="filter-body"
                            v-if="roleType != 3">
                            <view class="condition-name">车队</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in fleetList" :key="index" @click="filterCondition(4, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in fleetList"
                                    :key="index"
                                    @click="filterCondition(4, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="fleetShow < fleetTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(4)" v-if="fleetTotal > 3"></u-button>
@@ -169,19 +226,31 @@
                        <view class="filter-body">
                            <view class="condition-name">矿场</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in filedList" :key="index" @click="filterCondition(5, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in filedList"
                                    :key="index"
                                    @click="filterCondition(5, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="filedShow < filedTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(5)" v-if="filedTotal > 3"></u-button>
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType == 2">
                        <view class="filter-body"
                            v-if="roleType == 2">
                            <view class="condition-name">车牌号</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in carNoList" :key="index" @click="filterCondition(6, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" v-if="index < carNoShow"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in carNoList"
                                    :key="index"
                                    @click="filterCondition(6, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"
                                        v-if="index < carNoShow"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="carNoShow < carNoTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(6)" v-if="carNoTotal > 3"></u-button>
@@ -191,8 +260,16 @@
                    </view>
                </scroll-view>
                <view class="utils-button">
                    <view class="reset-button"><u-button type="default" text="重置" :plain="true" shape="circle" @click="resetCondition"></u-button></view>
                    <view class="confirm-button"><u-button type="primary" text="确定" :plain="true" shape="circle" @click="confirmCondition"></u-button></view>
                    <view class="reset-button"><u-button type="default"
                            text="重置"
                            :plain="true"
                            shape="circle"
                            @click="resetCondition"></u-button></view>
                    <view class="confirm-button"><u-button type="primary"
                            text="确定"
                            :plain="true"
                            shape="circle"
                            @click="confirmCondition"></u-button></view>
                </view>
            </u-popup>
            <tab-bar :current="1"></tab-bar>
@@ -202,152 +279,228 @@
</template>

<script>
import combinedTitle from '@/components/combined-title/combined-title.vue';
export default {
    components: {
        combinedTitle
    },
    data() {
        return {
            conditionList: [],
            coalList: [],
            typeList: [],
            customerList: [],
            forwarderList: [],
            fleetList: [],
            filedList: [],
            carNoList: [],
            isactive: false,
            info: {
                lunar: false,
                range: true,
                insert: false,
                selected: []
    import combinedTitle from '@/components/combined-title/combined-title.vue';
    export default {
        components: {
            combinedTitle
        },
        data() {
            return {
                conditionList: [],
                coalList: [],
                typeList: [],
                customerList: [],
                forwarderList: [],
                fleetList: [],
                filedList: [],
                carNoList: [],
                isactive: false,
                info: {
                    lunar: false,
                    range: true,
                    insert: false,
                    selected: []
                },
                first: '',
                last: '',
                firstFilter: '',
                lastFilter: '',
                taskList: [],
                filterList: [],
                totalLength: 0,
                totalTon: 0,
                // 筛选弹出层
                conditinonShow: false,
                // 超过两行自动隐藏
                coalShow: 3,
                typeShow: 3,
                customerShow: 3,
                forwarderShow: 3,
                fleetShow: 3,
                filedShow: 3,
                carNoShow: 3,
                coalToggeleState: false,
                typeToggeleState: false,
                customerToggeleState: false,
                forwarderToggeleState: false,
                fleetToggeleState: false,
                filedToggeleState: false,
                carNoToggeleState: false,
                // 点击右箭头详情弹窗
                faYunDetailobj: {},
                modalShow: false,
                coalStatus: ['未称重', '称重中', '验质中', '称重完成']
            };
        },
        onShow() {
            this.firstDate();
            this.lastDate();
            this.getShipping();
            this.getTmTaskCoalData();
        },
        methods: {
            firstDate() {
                let y = new Date().getFullYear(); //获取年份
                let m = new Date().getMonth() + 1; //获取月份
                let d = '01';
                m = m < 10 ? '0' + m : m; //月份补 0
                this.first = [y, m, d].join('-');
                this.firstFilter = [y, m, d].join('-');
            },
            first: '',
            last: '',
            firstFilter: '',
            lastFilter: '',
            taskList: [],
            filterList: [],
            totalLength: 0,
            totalTon: 0,
            // 筛选弹出层
            conditinonShow: false,
            // 超过两行自动隐藏
            coalShow: 3,
            typeShow: 3,
            customerShow: 3,
            forwarderShow: 3,
            fleetShow: 3,
            filedShow: 3,
            carNoShow: 3,
            coalToggeleState: false,
            typeToggeleState: false,
            customerToggeleState: false,
            forwarderToggeleState: false,
            fleetToggeleState: false,
            filedToggeleState: false,
            carNoToggeleState: false,
            // 点击右箭头详情弹窗
            faYunDetailobj: {},
            modalShow: false,
            coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请', '进入场院']
        };
    },
    onShow() {
        this.firstDate();
        this.lastDate();
        this.getShipping();
        this.getTmTaskCoalData();
    },
    methods: {
        firstDate() {
            let y = new Date().getFullYear(); //获取年份
            let m = new Date().getMonth() + 1; //获取月份
            let d = '01';
            m = m < 10 ? '0' + m : m; //月份补 0
            this.first = [y, m, d].join('-');
            this.firstFilter = [y, m, d].join('-');
        },
        lastDate() {
            let y = new Date().getFullYear(); //获取年份
            let m = new Date().getMonth() + 1; //获取月份
            let d = new Date(y, m, 0).getDate(); //获取当月最后一日
            m = m < 10 ? '0' + m : m; //月份补 0
            d = d < 10 ? '0' + d : d; //日数补 0
            this.last = [y, m, d].join('-');
            this.lastFilter = [y, m, d].join('-');
        },
        // 筛选条件
        getShipping() {
            this.$reqGet('getShippingCondition', { startTime: this.first, endTime: this.last }).then(res => {
                this.conditionList = res.data;
                this.coalList = res.data
                    .filter(v => v.conditionType == 0)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.typeList = res.data
                    .filter(v => v.conditionType == 1)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.customerList = res.data
                    .filter(v => v.conditionType == 2)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.forwarderList = res.data
                    .filter(v => v.conditionType == 3)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.fleetList = res.data
                    .filter(v => v.conditionType == 4)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.filedList = res.data
                    .filter(v => v.conditionType == 5)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.carNoList = res.data
                    .filter(v => v.conditionType == 6)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
            });
        },
        // 获取数据
        getTmTaskCoalData() {
            uni.showLoading({
                title: '加载中'
            });
            this.$reqGet('getTmTaskCoalData', { startTime: this.first, endTime: this.last }).then(res => {
                this.filterList = this.taskList = res.data;
            lastDate() {
                let y = new Date().getFullYear(); //获取年份
                let m = new Date().getMonth() + 1; //获取月份
                let d = new Date(y, m, 0).getDate(); //获取当月最后一日
                m = m < 10 ? '0' + m : m; //月份补 0
                d = d < 10 ? '0' + d : d; //日数补 0
                this.last = [y, m, d].join('-');
                this.lastFilter = [y, m, d].join('-');
            },
            // 筛选条件
            getShipping() {
                this.$reqGet('getShippingCondition', { startTime: this.first, endTime: this.last }).then(res => {
                    this.conditionList = res.data;
                    this.coalList = res.data
                        .filter(v => v.conditionType == 0)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.typeList = res.data
                        .filter(v => v.conditionType == 1)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.customerList = res.data
                        .filter(v => v.conditionType == 2)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.forwarderList = res.data
                        .filter(v => v.conditionType == 3)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.fleetList = res.data
                        .filter(v => v.conditionType == 4)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.filedList = res.data
                        .filter(v => v.conditionType == 5)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.carNoList = res.data
                        .filter(v => v.conditionType == 6)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                });
            },
            // 获取数据
            getTmTaskCoalData() {
                uni.showLoading({
                    title: '加载中'
                });
                this.$reqGet('getTmTaskCoalData', { startTime: this.first, endTime: this.last }).then(res => {
                    this.filterList = this.taskList = res.data;
                    if (this.filterList.length != 0) {
                        this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y);
                        this.totalTon = this.filterList.map(v =>
                            v.taskCoalList.reduce((prev, cur) => {
                                return cur.clean + prev;
                            }, 0)
                        );
                        this.totalTon = this.totalTon.reduce((x, y) => x + y);
                    } else {
                        this.totalLength = 0;
                        this.totalTon = 0;
                    }
                    uni.hideLoading();
                });
            },
            // 筛选数据
            filterCondition(value, i, data) {
                switch (value) {
                    case 0:
                        this.coalList[i].active = !this.coalList[i].active;
                        break;
                    case 1:
                        this.typeList[i].active = !this.typeList[i].active;
                        break;
                    case 2:
                        this.customerList[i].active = !this.customerList[i].active;
                        break;
                    case 3:
                        this.forwarderList[i].active = !this.forwarderList[i].active;
                        break;
                    case 4:
                        this.fleetList[i].active = !this.fleetList[i].active;
                        break;
                    case 5:
                        this.filedList[i].active = !this.filedList[i].active;
                        break;
                    case 6:
                        this.carNoList[i].active = !this.carNoList[i].active;
                        break;
                }

                const validateFn = key => (v, arr) => {
                    if (arr.length == 0) {
                        return true;
                    } else {
                        return arr.includes(v[key]);
                    }
                };
                let conditionMapping = {
                    coalName: this.coalList.filter(v => v.active == true).map(item => item.condition),
                    orderType: this.typeList.filter(v => v.active == true).map(item => item.condition),
                    customerName: this.customerList.filter(v => v.active == true).map(item => item.condition),
                    xsUser2Name: this.forwarderList.filter(v => v.active == true).map(item => item.condition),
                    fleetName: this.fleetList.filter(v => v.active == true).map(item => item.condition),
                    filedName: this.filedList.filter(v => v.active == true).map(item => item.condition),
                    carNo: this.carNoList.filter(v => v.active == true).map(item => item.condition)
                };

                const mapping = {
                    coalName: validateFn('coalName'),
                    orderType: validateFn('orderType'),
                    customerName: validateFn('customerName'),
                    xsUser2Name: validateFn('xsUser2Name'),
                    fleetName: validateFn('fleetName'),
                    filedName: validateFn('filedName'),
                    carNo: validateFn('carNo')
                };
                this.filterList = this.taskList.map(val => {
                    return {
                        condition: val.condition,
                        conditionId: val.conditionId,
                        conditionType: val.conditionType,
                        taskCoalList: val.taskCoalList.filter(v => Reflect.ownKeys(conditionMapping).every(key =>
                            mapping[key](v, conditionMapping[key])))
                    };
                });
                if (this.filterList.length != 0) {
                    this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y);
                    this.totalTon = this.filterList.map(v =>
@@ -360,679 +513,659 @@
                    this.totalLength = 0;
                    this.totalTon = 0;
                }
                uni.hideLoading();
            });
        },
        // 筛选数据
        filterCondition(value, i, data) {
            switch (value) {
                case 0:
                    this.coalList[i].active = !this.coalList[i].active;
                    break;
                case 1:
                    this.typeList[i].active = !this.typeList[i].active;
                    break;
                case 2:
                    this.customerList[i].active = !this.customerList[i].active;
                    break;
                case 3:
                    this.forwarderList[i].active = !this.forwarderList[i].active;
                    break;
                case 4:
                    this.fleetList[i].active = !this.fleetList[i].active;
                    break;
                case 5:
                    this.filedList[i].active = !this.filedList[i].active;
                    break;
                case 6:
                    this.carNoList[i].active = !this.carNoList[i].active;
                    break;
            }

            const validateFn = key => (v, arr) => {
                if (arr.length == 0) {
                    return true;
                } else {
                    return arr.includes(v[key]);
            },
            // 确定筛选
            confirmCondition() {
                this.conditinonShow = false;
            },
            // 重置筛选
            resetCondition() {
                this.conditinonShow = false;
                this.first = this.dateRange.slice(0, 10);
                this.last = this.dateRange.slice(11);
                this.coalList.forEach(v => {
                    v.active = false;
                });
                this.typeList.forEach(v => {
                    v.active = false;
                });
                this.customerList.forEach(v => {
                    v.active = false;
                });
                this.forwarderList.forEach(v => {
                    v.active = false;
                });
                this.fleetList.forEach(v => {
                    v.active = false;
                });
                this.filedList.forEach(v => {
                    v.active = false;
                });
            },
            confirm(e) {
                console.log(e, '日期选择');
                this.first = e.range.before;
                this.last = e.range.after;
                this.conditinonShow = false;
            },
            opencalendar() {
                this.$refs.calendar.open();
            },
            // 点击查看更多
            toggle(value) {
                switch (value) {
                    case 0:
                        if (!this.coalToggeleState) {
                            this.coalShow = this.coalTotal;
                            this.coalToggeleState = true;
                        } else {
                            this.coalShow = 3;
                            this.coalToggeleState = false;
                        }
                        break;
                    case 1:
                        if (!this.typeToggeleState) {
                            this.typeShow = this.typeTotal;
                            this.typeToggeleState = true;
                        } else {
                            this.typeShow = 3;
                            this.typeToggeleState = false;
                        }
                        break;
                    case 2:
                        if (!this.customerToggeleState) {
                            this.customerShow = this.customerTotal;
                            this.customerToggeleState = true;
                        } else {
                            this.customerShow = 3;
                            this.customerToggeleState = false;
                        }
                        break;
                    case 3:
                        if (!this.forwarderToggeleState) {
                            this.forwarderShow = this.forwarderTotal;
                            this.forwarderToggeleState = true;
                        } else {
                            this.forwarderShow = 3;
                            this.forwarderToggeleState = false;
                        }
                        break;
                    case 4:
                        if (!this.fleetToggeleState) {
                            this.fleetShow = this.fleetTotal;
                            this.fleetToggeleState = true;
                        } else {
                            this.fleetShow = 3;
                            this.fleetToggeleState = false;
                        }
                        break;
                    case 5:
                        if (!this.filedToggeleState) {
                            this.filedShow = this.filedTotal;
                            this.filedToggeleState = true;
                        } else {
                            this.filedShow = 3;
                            this.filedToggeleState = false;
                        }
                        break;
                    case 6:
                        if (!this.carNoToggeleState) {
                            this.carNoShow = this.carNoTotal;
                            this.carNoToggeleState = true;
                        } else {
                            this.carNoShow = 3;
                            this.carNoToggeleState = false;
                        }
                        break;
                }
            };
            let conditionMapping = {
                coalName: this.coalList.filter(v => v.active == true).map(item => item.condition),
                orderType: this.typeList.filter(v => v.active == true).map(item => item.condition),
                customerName: this.customerList.filter(v => v.active == true).map(item => item.condition),
                xsUser2Name: this.forwarderList.filter(v => v.active == true).map(item => item.condition),
                fleetName: this.fleetList.filter(v => v.active == true).map(item => item.condition),
                filedName: this.filedList.filter(v => v.active == true).map(item => item.condition),
                carNo: this.carNoList.filter(v => v.active == true).map(item => item.condition)
            };

            const mapping = {
                coalName: validateFn('coalName'),
                orderType: validateFn('orderType'),
                customerName: validateFn('customerName'),
                xsUser2Name: validateFn('xsUser2Name'),
                fleetName: validateFn('fleetName'),
                filedName: validateFn('filedName'),
                carNo: validateFn('carNo')
            };
            this.filterList = this.taskList.map(val => {
                return {
                    condition: val.condition,
                    conditionId: val.conditionId,
                    conditionType: val.conditionType,
                    taskCoalList: val.taskCoalList.filter(v => Reflect.ownKeys(conditionMapping).every(key => mapping[key](v, conditionMapping[key])))
                };
            });
            if (this.filterList.length != 0) {
                this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y);
                this.totalTon = this.filterList.map(v =>
                    v.taskCoalList.reduce((prev, cur) => {
                        return cur.clean + prev;
                    }, 0)
                );
                this.totalTon = this.totalTon.reduce((x, y) => x + y);
            } else {
                this.totalLength = 0;
                this.totalTon = 0;
            },
            // 跳转发运详情
            faYunDetail(takeCoalId) {
                uni.navigateTo({
                    url: `/pages/public-page/faYunstatisticsDetails/faYunstatisticsDetails?id=${takeCoalId}`
                });
            },
            // 打开筛选条件弹窗
            showPopup() {
                this.conditinonShow = true;
            },
            // 关闭筛选条件弹窗
            conditinonclose() {
                this.conditinonShow = false;
            }
        },
        // 确定筛选
        confirmCondition() {
            this.conditinonShow = false;
        },
        // 重置筛选
        resetCondition() {
            this.conditinonShow = false;
            this.first = this.dateRange.slice(0, 10);
            this.last = this.dateRange.slice(11);
            this.coalList.forEach(v => {
                v.active = false;
            });
            this.typeList.forEach(v => {
                v.active = false;
            });
            this.customerList.forEach(v => {
                v.active = false;
            });
            this.forwarderList.forEach(v => {
                v.active = false;
            });
            this.fleetList.forEach(v => {
                v.active = false;
            });
            this.filedList.forEach(v => {
                v.active = false;
            });
        },
        confirm(e) {
            console.log(e, '日期选择');
            this.first = e.range.before;
            this.last = e.range.after;
            this.conditinonShow = false;
        },
        opencalendar() {
            this.$refs.calendar.open();
        },
        // 点击查看更多
        toggle(value) {
            switch (value) {
                case 0:
                    if (!this.coalToggeleState) {
                        this.coalShow = this.coalTotal;
                        this.coalToggeleState = true;
                    } else {
                        this.coalShow = 3;
                        this.coalToggeleState = false;
                    }
                    break;
                case 1:
                    if (!this.typeToggeleState) {
                        this.typeShow = this.typeTotal;
                        this.typeToggeleState = true;
                    } else {
                        this.typeShow = 3;
                        this.typeToggeleState = false;
                    }
                    break;
                case 2:
                    if (!this.customerToggeleState) {
                        this.customerShow = this.customerTotal;
                        this.customerToggeleState = true;
                    } else {
                        this.customerShow = 3;
                        this.customerToggeleState = false;
                    }
                    break;
                case 3:
                    if (!this.forwarderToggeleState) {
                        this.forwarderShow = this.forwarderTotal;
                        this.forwarderToggeleState = true;
                    } else {
                        this.forwarderShow = 3;
                        this.forwarderToggeleState = false;
                    }
                    break;
                case 4:
                    if (!this.fleetToggeleState) {
                        this.fleetShow = this.fleetTotal;
                        this.fleetToggeleState = true;
                    } else {
                        this.fleetShow = 3;
                        this.fleetToggeleState = false;
                    }
                    break;
                case 5:
                    if (!this.filedToggeleState) {
                        this.filedShow = this.filedTotal;
                        this.filedToggeleState = true;
                    } else {
                        this.filedShow = 3;
                        this.filedToggeleState = false;
                    }
                    break;
                case 6:
                    if (!this.carNoToggeleState) {
                        this.carNoShow = this.carNoTotal;
                        this.carNoToggeleState = true;
                    } else {
                        this.carNoShow = 3;
                        this.carNoToggeleState = false;
                    }
                    break;
        computed: {
            roleType() {
                return uni.getStorageSync('roleType');
            },
            dateRange() {
                return `${this.firstFilter}至${this.lastFilter}`;
            },
            dateselect() {
                return `${this.first}至${this.last}`;
            },
            coalTotal() {
                return this.coalList.length;
            },
            typeTotal() {
                return this.typeList.length;
            },
            customerTotal() {
                return this.customerList.length;
            },
            forwarderTotal() {
                return this.forwarderList.length;
            },
            fleetTotal() {
                return this.fleetList.length;
            },
            filedTotal() {
                return this.filedList.length;
            },
            carNoTotal() {
                return this.carNoList.length;
            }
        },
        // 跳转发运详情
        faYunDetail(takeCoalId) {
            uni.navigateTo({
                url: `/pages/public-page/faYunstatisticsDetails/faYunstatisticsDetails?id=${takeCoalId}`
            });
        },
        // 打开筛选条件弹窗
        showPopup() {
            this.conditinonShow = true;
        },
        // 关闭筛选条件弹窗
        conditinonclose() {
            this.conditinonShow = false;
        }
    },
    computed: {
        roleType() {
            return uni.getStorageSync('roleType');
        },
        dateRange() {
            return `${this.firstFilter}至${this.lastFilter}`;
        },
        dateselect() {
            return `${this.first}至${this.last}`;
        },
        coalTotal() {
            return this.coalList.length;
        },
        typeTotal() {
            return this.typeList.length;
        },
        customerTotal() {
            return this.customerList.length;
        },
        forwarderTotal() {
            return this.forwarderList.length;
        },
        fleetTotal() {
            return this.fleetList.length;
        },
        filedTotal() {
            return this.filedList.length;
        },
        carNoTotal() {
            return this.carNoList.length;
        }
    },
    watch: {
        dateselect(newV, old) {
            let tempDate = `${this.first}至${this.last}`;
            if (newV != old && old != '至') {
                this.first = newV.slice(0, 10);
                this.last = newV.slice(11);
                this.getTmTaskCoalData();
        watch: {
            dateselect(newV, old) {
                let tempDate = `${this.first}至${this.last}`;
                if (newV != old && old != '至') {
                    this.first = newV.slice(0, 10);
                    this.last = newV.slice(11);
                    this.getTmTaskCoalData();
                }
            }
        }
    }
};
    };
</script>

<style lang="scss" scoped>
@mixin flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@mixin firstLine {
    width: 80%;
    height: vww(68);
    margin: vww(10) vww(16) 0 0;
    display: flex;
    justify-content: space-between;
}
::v-deep .toggle-button .u-button {
    width: vww(40);
}
.scroll-Y {
    height: 1000rpx;
    position: relative;
    top: 20rpx;
}
.utils-button {
    width: 94%;
    height: vww(30);
    margin: vww(50) auto;
    @include flex;
    .reset-button {
        /deep/ .u-button {
            border: 1px solid #c5c5c5;
            outline: none;
        }
    }
    .confirm-button {
        /deep/ .u-button {
            border: 1px solid #3b56eb;
            outline: none;
            color: #3b56eb;
        }
    }
    /deep/ .u-button {
        width: 279rpx;
        height: 60rpx;
        font-size: 28rpx;
    }
}
.white-block {
    width: 100%;
    height: vww(50);
    margin-top: vww(10);
}
.main {
    width: 100%;
    margin: 0 auto;
    /*顶部统计栏*/
    .top-statistics {
        width: 100%;
        height: 430rpx;
        background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
<style lang="scss"
    scoped>
    @mixin flex {
        display: flex;
        justify-content: center;
        .top-body {
            width: 690rpx;
            height: 220rpx;
            margin: vww(21) auto;
        justify-content: space-between;
        align-items: center;
    }

    @mixin firstLine {
        width: 80%;
        height: vww(68);
        margin: vww(10) vww(16) 0 0;
        display: flex;
        justify-content: space-between;
    }

    ::v-deep .toggle-button .u-button {
        width: vww(40);
    }

    .scroll-Y {
        height: 1000rpx;
        position: relative;
        top: 20rpx;
    }

    .utils-button {
        width: 94%;
        height: vww(30);
        margin: vww(50) auto;
        @include flex;

        .reset-button {
            /deep/ .u-button {
                border: 1px solid #c5c5c5;
                outline: none;
            }
        }

        .confirm-button {
            /deep/ .u-button {
                border: 1px solid #3b56eb;
                outline: none;
                color: #3b56eb;
            }
        }

        /deep/ .u-button {
            width: 279rpx;
            height: 60rpx;
            font-size: 28rpx;
        }
    }

    .white-block {
        width: 100%;
        height: vww(50);
        margin-top: vww(10);
    }

    .main {
        width: 100%;
        margin: 0 auto;

        /*顶部统计栏*/
        .top-statistics {
            width: 100%;
            height: 430rpx;
            background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            .content-statistics {
            justify-content: center;

            .top-body {
                width: 690rpx;
                height: 140rpx;
                background: #ffffff;
                box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
                border-radius: 10rpx;
                height: 220rpx;
                margin: vww(21) auto;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                .content-text {
                    height: vww(40);
                justify-content: space-between;
                flex-direction: column;

                .content-statistics {
                    width: 690rpx;
                    height: 140rpx;
                    background: #ffffff;
                    box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
                    border-radius: 10rpx;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;

                    .content-text {
                        height: vww(40);
                        @include flex;
                        flex-direction: column;
                        margin-top: 31rpx;
                        margin-bottom: 31rpx;

                        .content-container {
                            width: 100%;
                            min-height: vww(16);
                            font-size: 40rpx;
                            font-weight: bold;
                            color: #3b56eb;
                            text-align: center;
                        }

                        .content-num {
                            width: 96rpx;
                            min-height: 24rpx;
                            font-size: 24rpx;
                            font-weight: 400;
                            color: #333333;
                        }
                    }
                }

                .content-title {
                    width: 160rpx;
                    height: 38rpx;
                    font-size: 40rpx;
                    font-weight: normal;
                    color: #ffffff;
                    line-height: 69rpx;
                    margin: vww(21) auto;
                }
            }
        }

        .main-block {
            width: 690rpx;
            margin: vww(12) vww(15) auto vww(15);
            background: #ffffff;
            box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
            border-radius: 20rpx;
            @include flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            top: -145rpx;

            .data-filter {
                width: 635rpx;
                height: 68rpx;
                border: 2px solid rgba(73, 95, 252, 0.6);
                box-shadow: 0rpx 5rpx 13rpx 0rpx rgba(73, 95, 252, 0.6);
                border-radius: 34rpx;
                margin-top: vww(21);
                padding: 0 vww(5);

                @include flex .date-text {
                    width: 330rpx;
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #494949;
                }
            }

            .filter-condition {
                width: 100%;
                height: 54rpx;
                background: #f5f5f5;
                @include flex;
                margin-top: vww(15);
            }

            .date-information {
                width: 635rpx;
                background: #f6faff;
                border-radius: 20rpx;

                .statistics-card {
                    width: 100%;
                    min-height: vww(120);
                    @include flex;
                    flex-direction: column;
                    margin-top: 31rpx;
                    margin-bottom: 31rpx;
                    .content-container {
                        width: 100%;
                        min-height: vww(16);
                        font-size: 40rpx;
                        font-weight: bold;
                        color: #3b56eb;
                        text-align: center;
                    }
                    .content-num {
                        width: 96rpx;
                        min-height: 24rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #333333;
                    }
                }
            }
            .content-title {
                width: 160rpx;
                height: 38rpx;
                font-size: 40rpx;
                font-weight: normal;
                color: #ffffff;
                line-height: 69rpx;
                margin: vww(21) auto;
            }
        }
    }
    .main-block {
        width: 690rpx;
        margin: vww(12) vww(15) auto vww(15);
        background: #ffffff;
        box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
        border-radius: 20rpx;
        @include flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        top: -145rpx;
        .data-filter {
            width: 635rpx;
            height: 68rpx;
            border: 2px solid rgba(73, 95, 252, 0.6);
            box-shadow: 0rpx 5rpx 13rpx 0rpx rgba(73, 95, 252, 0.6);
            border-radius: 34rpx;
            margin-top: vww(21);
            padding: 0 vww(5);
            @include flex .date-text {
                width: 330rpx;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #494949;
            }
        }
        .filter-condition {
            width: 100%;
            height: 54rpx;
            background: #f5f5f5;
            @include flex;
            margin-top: vww(15);
        }
        .date-information {
            width: 635rpx;
            background: #f6faff;
            border-radius: 20rpx;
            .statistics-card {
                width: 100%;
                min-height: vww(120);
                @include flex;
                flex-direction: column;
                margin-top: vww(5);
                margin-bottom: vww(5);
                overflow: hidden;
                &:last-child {
                    .card-main {
                        &:last-child {
                            border-bottom: 0;
                        }
                    }
                }
                .card-top {
                    width: 96%;
                    @include flex;
                    .left {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #494949;
                    }
                    .card-top_num {
                        font-size: 40rpx;
                        font-weight: 400;
                        color: #6074ee;
                    }
                }
                .card-main {
                    width: 100%;
                    height: vww(150);
                    border-bottom: vww(1) solid #d6d6d6;
                    margin-top: vww(12);
                    margin-left: vww(20);
                    padding-bottom: vww(12);
                    position: relative;
                    @include flex flex-direction: column;
                    align-items: flex-start;
                    .first-line {
                        width: 80%;
                        height: vww(32);
                        color: #303030;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .main-information {
                            width: 88%;
                            height: vww(28);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            .sign {
                                width: vww(28);
                                height: vww(28);
                                line-height: vww(28);
                                text-align: center;
                                background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat;
                                background-size: contain;
                                font-size: 30rpx;
                                font-weight: 400;
                                color: #ffffff;
                                margin-right: vww(20);
                    margin-top: vww(5);
                    margin-bottom: vww(5);
                    overflow: hidden;

                    &:last-child {
                        .card-main {
                            &:last-child {
                                border-bottom: 0;
                            }
                        }
                        .main-divider {
                            width: 530rpx;
                            height: 1rpx;
                            background: #e3e3e3;
                            position: absolute;
                            top: 80rpx;
                            left: vww(50);
                    }

                    .card-top {
                        width: 96%;
                        @include flex;

                        .left {
                            font-size: 30rpx;
                            font-weight: 400;
                            color: #494949;
                        }
                        .point-number {
                            width: 20%;

                        .card-top_num {
                            font-size: 40rpx;
                            font-weight: 400;
                            color: #f81414;
                            position: absolute;
                            right: 12rpx;
                            display: flex;
                            flex-wrap: wrap;
                            color: #6074ee;
                        }
                    }
                    .first-extra {
                        @include firstLine;
                        height: vww(32);
                        .main-information {

                    .card-main {
                        width: 100%;
                        height: vww(150);
                        border-bottom: vww(1) solid #d6d6d6;
                        margin-top: vww(12);
                        margin-left: vww(20);
                        padding-bottom: vww(12);
                        position: relative;
                        @include flex flex-direction: column;
                        align-items: flex-start;

                        .first-line {
                            width: 80%;
                            height: vww(32);
                            color: #303030;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .main-information {
                                width: 88%;
                                height: vww(28);
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;

                                .sign {
                                    width: vww(28);
                                    height: vww(28);
                                    line-height: vww(28);
                                    text-align: center;
                                    background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat;
                                    background-size: contain;
                                    font-size: 30rpx;
                                    font-weight: 400;
                                    color: #ffffff;
                                    margin-right: vww(20);
                                }
                            }

                            .main-divider {
                                width: 530rpx;
                                height: 1rpx;
                                background: #e3e3e3;
                                position: absolute;
                                top: 80rpx;
                                left: vww(50);
                            }

                            .point-number {
                                width: 20%;
                                font-size: 40rpx;
                                font-weight: 400;
                                color: #f81414;
                                position: absolute;
                                right: 12rpx;
                                display: flex;
                                flex-wrap: wrap;
                            }
                        }

                        .first-extra {
                            @include firstLine;
                            height: vww(32);

                            .main-information {
                                width: 100%;
                                height: vww(28);
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;

                                .sign {
                                    width: vww(28);
                                    height: vww(28);
                                    line-height: vww(28);
                                    text-align: center;
                                    background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat;
                                    background-size: contain;
                                    font-size: 30rpx;
                                    font-weight: 400;
                                    color: #ffffff;
                                    margin-right: vww(20);
                                }
                            }
                        }

                        .second-line {
                            width: 100%;
                            height: vww(28);
                            height: vww(15);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .coal-name {
                                flex-grow: 1;
                                height: 30rpx;
                                font-size: 30rpx;
                                font-weight: 300;
                                color: #515151;
                                position: relative;
                                display: flex;
                                align-items: center;

                                .black-bar {
                                    width: 2rpx;
                                    height: 30rpx;
                                    background: #515151;
                                    margin-left: vww(12);
                                }

                                .coal-type {
                                    margin-left: vww(12);
                                    min-width: vww(50);
                                    height: 30rpx;
                                    line-height: 30rpx;
                                    font-size: 30rpx;
                                    font-weight: 300;
                                    color: #515151;
                                }
                            }
                        }

                        .third-line {
                            width: 40%;
                            min-height: vww(15);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            .sign {
                                width: vww(28);
                                height: vww(28);
                                line-height: vww(28);
                                text-align: center;
                                background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat;
                                background-size: contain;
                                font-size: 30rpx;
                                font-weight: 400;
                                color: #ffffff;
                                margin-right: vww(20);
                            align-items: flex-start;

                            .carnum-icon {
                                width: 28rpx;
                                height: 28rpx;
                                margin-right: vww(10);

                                image {
                                    width: 28rpx;
                                    height: 28rpx;
                                }
                            }
                        }
                    }
                    .second-line {
                        width: 100%;
                        height: vww(15);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .coal-name {
                            flex-grow: 1;
                            height: 30rpx;
                            font-size: 30rpx;
                            font-weight: 300;
                            color: #515151;
                            position: relative;
                            display: flex;
                            align-items: center;
                            .black-bar {
                                width: 2rpx;
                                height: 30rpx;
                                background: #515151;
                                margin-left: vww(12);
                            }
                            .coal-type {
                                margin-left: vww(12);
                                min-width: vww(50);
                                height: 30rpx;
                                line-height: 30rpx;
                                font-size: 30rpx;

                            .carnum-text {
                                font-size: 28rpx;
                                font-weight: 300;
                                color: #515151;
                            }
                        }
                    }
                    .third-line {
                        width: 40%;
                        min-height: vww(15);
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        .carnum-icon {
                            width: 28rpx;
                            height: 28rpx;
                            margin-right: vww(10);
                            image {
                                width: 28rpx;
                                height: 28rpx;

                        .fourth-line {
                            width: 40%;
                            height: vww(14);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            color: #515151;

                            .time-icon {
                                margin-right: vww(10);
                            }
                        }
                        .carnum-text {
                            font-size: 28rpx;
                            font-weight: 300;
                            color: #515151;
                        }
                    }
                    .fourth-line {
                        width: 40%;
                        height: vww(14);
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        color: #515151;
                        .time-icon {
                            margin-right: vww(10);
                        }
                    }
                }
            }
        }
    }
    .filter-main {
        min-height: 950rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .date-button {
            width: 80%;
            height: vww(80);
            margin: vww(5) auto;
            .condition-name {
                margin-bottom: vww(10);
            }
        }
        .filter-body {

        .filter-main {
            min-height: 950rpx;
            width: 100%;
            position: relative;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .condition-name {
                margin-left: vww(15);
                margin-top: vww(10);
                font-size: vww(16);
                color: #686868;
            flex-direction: column;
            justify-content: space-around;

            .date-button {
                width: 80%;
                height: vww(80);
                margin: vww(5) auto;

                .condition-name {
                    margin-bottom: vww(10);
                }
            }
            .filter-name {
                width: 94%;
                margin: 0 auto;

            .filter-body {
                width: 100%;
                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;

                .filter-button {
                    color: #393a3c;
                    height: vww(16);
                    padding: vww(8);
                    margin: vww(5) vww(5);
                    margin-bottom: vww(10);
                    /deep/ .shadowactive {
                        background: linear-gradient(90deg, rgba(73, 123, 251, 0.32), rgba(72, 16, 255, 0.32));
                        box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29);
                    }
                .condition-name {
                    margin-left: vww(15);
                    margin-top: vww(10);
                    font-size: vww(16);
                    color: #686868;
                }
                .toggle-button {
                    width: 30%;

                .filter-name {
                    width: 94%;
                    margin: 0 auto;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    position: absolute;
                    right: vww(-21);
                    top: vww(-23);
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: flex-start;

                    .filter-button {
                        color: #393a3c;
                        height: vww(16);
                        padding: vww(8);
                        margin: vww(5) vww(5);
                        margin-bottom: vww(10);

                        /deep/ .shadowactive {
                            background: linear-gradient(90deg, rgba(73, 123, 251, 0.32), rgba(72, 16, 255, 0.32));
                            box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29);
                        }
                    }

                    .toggle-button {
                        width: 30%;
                        display: flex;
                        justify-content: center;
                        position: absolute;
                        right: vww(-21);
                        top: vww(-23);
                    }
                }
            }
        }

        // 日期发运
        // .date-information {
        //     width: 100%;
        //     display: flex;
        //     flex-direction: column;
        //     .statistics-card {
        //         width: 100%;
        //         margin-top: vww(8);
        //         border: 1px solid #cccccc;
        //         border-radius: vww(5);
        //         background-color: #fff;
        //         min-height: vww(120);
        //         display: flex;
        //         flex-direction: column;
        //         justify-content: space-between;
        //         .card-title {
        //             width: 100%;
        //             height: vww(40);
        //             line-height: vww(40);
        //             padding-left: vww(5);
        //             color: #bcbcbc;
        //             border-bottom: 1px solid #cccccc;
        //             display: flex;
        //             .title-date {
        //                 width: vww(90);
        //                 margin-right: vww(10);
        //             }
        //             .title-number {
        //                 flex: 1;
        //             }
        //         }
        //         .card-main {
        //             width: 100%;
        //             flex: 1;
        //             position: relative;
        //             .arrow-right {
        //                 position: absolute;
        //                 right: vww(14);
        //                 top: vww(18);
        //             }
        //             .main-body {
        //                 width: 80%;
        //                 height: vww(60);
        //                 margin-top: vww(5);
        //                 padding: vww(3);
        //                 color: #686868;
        //                 display: flex;
        //                 flex-wrap: wrap;
        //                 justify-content: space-around;
        //             }
        //         }
        //     }
        // }
    }
    // 日期发运
    // .date-information {
    //     width: 100%;
    //     display: flex;
    //     flex-direction: column;
    //     .statistics-card {
    //         width: 100%;
    //         margin-top: vww(8);
    //         border: 1px solid #cccccc;
    //         border-radius: vww(5);
    //         background-color: #fff;
    //         min-height: vww(120);
    //         display: flex;
    //         flex-direction: column;
    //         justify-content: space-between;
    //         .card-title {
    //             width: 100%;
    //             height: vww(40);
    //             line-height: vww(40);
    //             padding-left: vww(5);
    //             color: #bcbcbc;
    //             border-bottom: 1px solid #cccccc;
    //             display: flex;
    //             .title-date {
    //                 width: vww(90);
    //                 margin-right: vww(10);
    //             }
    //             .title-number {
    //                 flex: 1;
    //             }
    //         }
    //         .card-main {
    //             width: 100%;
    //             flex: 1;
    //             position: relative;
    //             .arrow-right {
    //                 position: absolute;
    //                 right: vww(14);
    //                 top: vww(18);
    //             }
    //             .main-body {
    //                 width: 80%;
    //                 height: vww(60);
    //                 margin-top: vww(5);
    //                 padding: vww(3);
    //                 color: #686868;
    //                 display: flex;
    //                 flex-wrap: wrap;
    //                 justify-content: space-around;
    //             }
    //         }
    //     }
    // }
}
</style>
</style>

 pages/driver-page/driver-index/bill-of-lading-details/coal-pick-up-bill/coal-pick-up-bill.vue

@@ -1,122 +1,139 @@
<template>
    <view class="coal-pick-up-bill">
        <view class="driver" style="background:url(https://mx.jzeg.cn:9095/appimg/image/coalBackgroud/coal-background.png) no-repeat;background-size:100% 100%;">
        <view class="driver"
            style="background:url(https://mx.jzeg.cn:9095/appimg/image/coalBackgroud/coal-background.png) no-repeat;background-size:100% 100%;">
            <view class="driver-coalOne">电子提煤单</view>
            <view class="driver-coalTwo">
                <view>{{ coalData.code || '暂无订单编号' }}</view>
                <view>{{ coalData.orderType || '暂无订单类型' }}</view>
                <view class="bigFont">{{ coalData.deptName || '暂无所属矿' }}</view>
                <view class="bigFont">{{ coalData.coalName || '暂无煤种' }}</view>
                <view class="bigFont">{{ coalData.carNo || '暂无车牌' }}</view>
            </view>
            <view class="driver-coalThree">
                <view>{{ coalData.customerName || '暂无单位' }}</view>
                <view>{{ coalData.yuYueTime ? coalData.yuYueTime.slice(0, 10) + ' ' + coalData.yuYueTime.slice(11, 22) : '暂无时间' }}</view>
                <view>
                    {{ coalData.yuYueTime ? coalData.yuYueTime.slice(0, 10) + ' ' + coalData.yuYueTime.slice(11, 22) : '暂无时间' }}
                </view>
            </view>
            <view class="driver-coalFour"><image src="https://mx.jzeg.cn:9095/appimg/logo.gif" mode=""></image></view>
            <view class="driver-coalFour">
                <image src="https://mx.jzeg.cn:9095/appimg/logo.gif"
                    mode=""></image>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    onLoad(value) {
        console.log('页面加载', value);
        if (value.orderPlanId) {
            this.orderPlanId = value.orderPlanId;
        }
    },
    data() {
        return {
            orderPlanId: null,
            coalData: {}
        };
    },
    onShow() {
        this.init();
    },
    methods: {
        init() {
            this.getTakeCoal();
    export default {
        onLoad(value) {
            console.log('页面加载', value);
            if (value.orderPlanId) {
                this.orderPlanId = value.orderPlanId;
            }
        },
        // 获取提煤单详情
        getTakeCoal() {
            this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
                console.log('获取提煤单详情', res);
                if (res.code == 0) {
                    this.coalData = res.data;
                } else {
                    this.$u.toast('加载失败');
                }
            });
        data() {
            return {
                orderPlanId: null,
                coalData: {}
            };
        },
        onShow() {
            this.init();
        },
        methods: {
            init() {
                this.getTakeCoal();
            },
            // 获取提煤单详情
            getTakeCoal() {
                this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
                    console.log('获取提煤单详情', res);
                    if (res.code == 0) {
                        this.coalData = res.data;
                    } else {
                        this.$u.toast('加载失败');
                    }
                });
            }
            /**
             * @desc 等待取煤单接口
             * */
        }
        /**
         * @desc 等待取煤单接口
         * */
    }
};
    };
</script>

<style lang="scss" scoped>
::v-deep.coal-pick-up-bill {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    // 司机页面
    .driver {
<style lang="scss"
    scoped>
    ::v-deep.coal-pick-up-bill {
        width: 100%;
        height: 100vh;
        &-coalOne {
            margin-top: 19%;
            text-align: center;
            font-size: vww(40);
            font-weight: 700;
            color: #896227;
        }
        &-coalTwo {
            width: 80%;
            margin-top: 20%;
            margin: 20% auto 0;
            font-size: vww(20);
            font-weight: 700;
            text-align: center;
            color: #2e363f;
            view:nth-child(2) {
                margin-top: vww(15);
                font-size: 30px;
            }
            view:nth-child(3) {
                margin-top: vww(15);
                font-size: 30px;
            }
            view:nth-child(4) {
                margin-top: vww(15);
                font-size: 30px;
            }
        }
        &-coalThree {
            margin-top: vww(15);
            font-size: vww(18);
            font-weight: 700;
            text-align: center;
            color: #2e363f;
            view:nth-child(2) {
                margin-top: vww(15);
            }
        }
        &-coalFour {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        // 司机页面
        .driver {
            width: 100%;
            bottom: 161rpx;
            image {
                width: vww(52);
                height: vww(52);
            height: 100vh;

            &-coalOne {
                margin-top: 19%;
                text-align: center;
                font-size: vww(40);
                font-weight: 700;
                color: #896227;
            }

            &-coalTwo {
                width: 80%;
                margin-top: 20%;
                margin: 20% auto 0;
                font-size: vww(20);
                font-weight: 700;
                text-align: center;
                color: #2e363f;

                view:nth-child(2) {
                    margin-top: vww(15);
                    font-size: 30px;
                }

                view:nth-child(3) {
                    margin-top: vww(15);
                    font-size: 30px;
                }

                view:nth-child(4) {
                    margin-top: vww(15);
                    font-size: 30px;
                }
            }

            &-coalThree {
                margin-top: vww(15);
                font-size: vww(18);
                font-weight: 700;
                text-align: center;
                color: #2e363f;

                view:nth-child(2) {
                    margin-top: vww(15);
                }
            }

            &-coalFour {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                width: 100%;
                bottom: 161rpx;

                image {
                    width: vww(52);
                    height: vww(52);
                }
            }
        }
    }
}
</style>
</style>

 pages/driver-page/driver-index/bill-of-lading-details/weighingDevice/weighingDevice.vue

@@ -290,7 +290,6 @@
                    '转出') {
                    if (this.weighList.skin == 0) {
                        this.temporaryWeighObj.skin = newV;
                        this.isweigh = this.temporaryWeighObj.skin > this.weighList.orderSurplus;
                    } else {
                        this.temporaryWeighObj.hair = newV;
                        this.temporaryWeighObj.clean = (this.temporaryWeighObj.hair - this.weighList.skin).toFixed(2);
@@ -301,7 +300,6 @@
                    .orderType == '转入') {
                    if (this.weighList.hair == 0) {
                        this.temporaryWeighObj.hair = newV;
                        this.isweigh = this.temporaryWeighObj.hair > this.weighList.orderSurplus;
                    } else {
                        this.temporaryWeighObj.skin = newV;
                        this.temporaryWeighObj.clean = (this.weighList.hair - this.temporaryWeighObj.skin).toFixed(2);
@@ -373,9 +371,9 @@
                        this.weighData.filedId = res.data.filedId;
                        this.weighData.coalContactHair = res.data.hairTwo ? res.data.hairTwo : 0;
                        this.weighData.coalContactSkin = res.data.skinTwo ? res.data.skinTwo : 0;
                        this.outBuy = (this.weighList.orderType.indexOf('销') !== -1) && this.showWeigh.hair > 0;
                        // 继续卸货第二次称重就会有，无订单类型限制
                        this.canUnload = this.showWeigh.hair > 0 || this.showWeigh.skin > 0;
                        this.outBuy = (this.weighList.orderType.indexOf('销') !== -1) && this.showWeigh.skin > 0;
                        // 继续卸货只有外购类型第二次会有
                        this.canUnload = this.weighList.orderType === '外购' && this.showWeigh.hair > 0;
                    }
                });
            },
@@ -437,7 +435,8 @@
                    gateCameraId: this.weighData.gateCameraId,
                    equipmentCode: this.weighData.equipmentCode,
                    tmCode: this.weighData.tmCode,
                    sceneInOut: this.weighData.sceneInOut
                    sceneInOut: this.weighData.sceneInOut,
                    weigh: this.realTimeWeigh
                }, 'json').then(res => {
                    if (res.code == 0) {
                        this.$u.toast('操作成功，即将返回上一页');
@@ -465,11 +464,16 @@
                    gateCameraId: this.weighData.gateCameraId,
                    equipmentCode: this.weighData.equipmentCode,
                    tmCode: this.weighData.tmCode,
                    sceneInOut: this.weighData.sceneInOut
                    sceneInOut: this.weighData.sceneInOut,
                    weigh: this.realTimeWeigh
                }, 'json').then(res => {
                    if (res.code == 0) {
                        this.$u.toast('操作成功');

                        this.$u.toast('操作成功，即将返回上一页');
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 1000);
                    } else {
                        this.$u.toast('操作失败，请稍候重试');
                    }

 pages/driver-page/driver-index/driver-index.vue

@@ -45,9 +45,13 @@
                                </view>
                            </view>
                        </view>
                        <!-- <view class="second-line">
                            <view class="coal-name">{{ item.coalName }}</view>
                        </view> -->
                        <view class="second-line">
                            <view class="coal-name">
                                <u-tag :text="coalStatus[item.statusWeigh] || '未称重'"
                                    plain>
                                </u-tag>
                            </view>
                        </view>
                        <view class="third-line">
                            <view class="time-icon"><u-icon name="clock"
                                    color="#515151"
@@ -58,7 +62,7 @@
                            </view>
                        </view>
                        <view class="fourth-line"
                            @click="qiangDanBtn(item)"
                            @click.stop="qiangDanBtn(item)"
                            v-if="item.carNum - item.taskNum !== 0">
                            <view class="button-img">立即抢单</view>
                        </view>
@@ -126,6 +130,11 @@
                                            color="#4978F0"
                                            size="40"></u-icon></view>
                                </view>
                            </view>
                            <view class="status">
                                <u-tag :text="coalStatus[item.statusWeigh] || ''"
                                    plain>
                                </u-tag>
                            </view>
                            <view class="third-line">
                                <view class="clock">
@@ -203,6 +212,11 @@
                                            size="40"></u-icon></view>
                                </view>
                            </view>
                            <view class="status">
                                <u-tag :text="coalStatus[item.statusWeigh] || ''"
                                    plain>
                                </u-tag>
                            </view>
                            <view class="third-line">
                                <view class="clock havedclock">
                                    <view class="time-icon"><u-icon name="clock"
@@ -261,7 +275,8 @@
                qiangDanOrderPlanId: null,
                fleetId: '',
                xsUserId: '',
                customerId: ''
                customerId: '',
                coalStatus: ['未称重', '称重中', '验质中', '称重完成']
            };
        },
        onShow() {
@@ -461,7 +476,7 @@

                .collection-form-item {
                    width: vww(345);
                    height: vww(185);
                    height: vww(220);
                    margin-top: vww(5);
                    background: #ffffff;
                    box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
@@ -561,8 +576,9 @@
                        align-items: center;

                        .coal-name {
                            @include flex;
                            min-width: vww(50);
                            height: 35rpx;
                            height: 100%;
                            font-size: 30rpx;
                            font-weight: 300;
                            color: #515151;
@@ -681,7 +697,7 @@

                .appointment-form-item {
                    @include formItem;
                    height: vww(191);
                    height: vww(220);
                    justify-content: space-between;
                    overflow: hidden;

@@ -772,6 +788,10 @@
                        }
                    }

                    .status {
                        @include thirdLine;
                    }

                    .third-line {
                        @include thirdLine;
                        width: 94%;

 pages/public-page/faYunstatisticsDetails/faYunstatisticsDetails.vue

@@ -11,7 +11,7 @@
                <view class="body-container">
                    <view class="container-block">
                        <view class="">提煤单状态</view>
                        <view class="">{{ coalStatus[faYunDetailobj.status] }}</view>
                        <view class="">{{ coalStatus[faYunDetailobj.statusWeigh]||''}}</view>
                    </view>
                </view>
                <view class="body-container">
@@ -57,7 +57,8 @@
                    </view>
                </view>
            </view>
            <view class="origin-info" v-if="faYunDetailobj.orderType == '外购' || faYunDetailobj.orderType == '内购' || faYunDetailobj.orderType == '转出'">
            <view class="origin-info"
                v-if="faYunDetailobj.orderType == '外购' || faYunDetailobj.orderType == '内购' || faYunDetailobj.orderType == '转出'">
                <combined-title title="原发信息"></combined-title>
                <view class="body-container">
                    <view class="container-block">
@@ -83,92 +84,101 @@
</template>

<script>
import combinedTitle from '@/components/combined-title/combined-title.vue';
export default {
    components: {
        combinedTitle
    },
    data() {
        return {
            id: '',
            faYunDetailobj: {},
            coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请', '进入场院']
        };
    },
    methods: {},
    onLoad(params) {
        this.id = params.id;
    },
    onShow() {
        this.$reqGet('getTakeCoal', { takeCoalId: this.id }).then(res => {
            if (res.code == 0) {
                this.faYunDetailobj = res.data;
            } else {
                this.$u.toast('获取数据失败');
            }
        });
    }
};
    import combinedTitle from '@/components/combined-title/combined-title.vue';
    export default {
        components: {
            combinedTitle
        },
        data() {
            return {
                id: '',
                faYunDetailobj: {},
                coalStatus: ['未称重', '称重中', '验质中', '称重完成']
            };
        },
        methods: {},
        onLoad(params) {
            this.id = params.id;
        },
        onShow() {
            this.$reqGet('getTakeCoal', { takeCoalId: this.id }).then(res => {
                if (res.code == 0) {
                    this.faYunDetailobj = res.data;
                } else {
                    this.$u.toast('获取数据失败');
                }
            });
        }
    };
</script>

<style scoped lang="scss">
@mixin flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main {
    width: 100%;
    margin-top: vww(10);
    @include flex;
    flex-direction: column;
    .main-body {
        width: 690rpx;
        height: 1062rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
        border-radius: 20rpx;
<style scoped
    lang="scss">
    @mixin flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .main {
        width: 100%;
        margin-top: vww(10);
        @include flex;
        flex-direction: column;
        align-items: flex-start;
        .body-container {
            width: 100%;
            height: vww(56);
            border-bottom: vww(1) solid #d6d6d6;

        .main-body {
            width: 690rpx;
            height: 1062rpx;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
            border-radius: 20rpx;
            @include flex;
            justify-content: center;
            .container-block {
                width: 96%;
            flex-direction: column;
            align-items: flex-start;

            .body-container {
                width: 100%;
                height: vww(56);
                border-bottom: vww(1) solid #d6d6d6;
                @include flex;
                justify-content: center;

                .container-block {
                    width: 96%;
                    height: vww(56);
                    @include flex;
                }
            }

            .last {
                border-bottom: none;
            }
        }
        .last {
            border-bottom: none;
        }
    }
    .origin-info {
        width: 690rpx;
        min-height: 300rpx;
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
        border-radius: 20rpx;
        @include flex;
        flex-direction: column;
        align-items: flex-start;
        .body-container {
            width: 100%;
            height: vww(56);
            border-bottom: vww(1) solid #d6d6d6;

        .origin-info {
            width: 690rpx;
            min-height: 300rpx;
            margin-top: 20rpx;
            margin-bottom: 20rpx;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
            border-radius: 20rpx;
            @include flex;
            justify-content: center;
            .container-block {
                width: 94%;
            flex-direction: column;
            align-items: flex-start;

            .body-container {
                width: 100%;
                height: vww(56);
                border-bottom: vww(1) solid #d6d6d6;
                @include flex;
                justify-content: center;

                .container-block {
                    width: 94%;
                    @include flex;
                }
            }
        }
    }
}
</style>
</style>