<script setup lang="ts">
    import { reactive } from 'vue'
    import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
    import PriceDialog from './components/price-dialog.vue'
    import Navigate from '@/utils/page/navigate'
    import * as ChanxiaoAPI from '@/api/model/chanxiao'
    import { getText } from '@/utils/dict/area'

    // 下拉刷新
    onPullDownRefresh(() => {
        pageData.search.pageNo = 1
        if (pageData.currentTransactionTab === 1) {
            pageData.purchaseDemands = []
            getPurchaseList()
        }
        if (pageData.currentTransactionTab === 2) {
            pageData.supplyInfos = []
            getSupplyList()
        }
        setTimeout(function () {
            uni.stopPullDownRefresh()
            Message.toast('刷新成功')
        }, 1000)
    })
    onShow(() => {
        pageData.search.pageNo = 1
        if (pageData.currentTransactionTab === 1) {
            pageData.purchaseDemands = []
            getPurchaseList()
        }
        if (pageData.currentTransactionTab === 2) {
            pageData.supplyInfos = []
            getSupplyList()
        }
    })

    // 页面数据
    const pageData = reactive({
        // 顶部标题和搜索
        header: {
            title: '产销',
            bannerImage: '/static/images/codefun/8a063bccb4a75c449a7ba2a1adc8caaf.png',
        },

        // 分类标签
        categoryTabs: [
            { id: -1, name: '全部' },
            { id: 1, name: '蔬菜' },
            { id: 2, name: '水果' },
            { id: 3, name: '粮食' },
            { id: 4, name: '畜牧' },
            { id: 0, name: '其他' },
        ],

        // 采购/供应标签
        transactionTabs: [
            { id: 1, name: '供货列表' },
            { id: 2, name: '采购需求' },
        ],
        currentTransactionTab: 1,

        loading: false,
        search: {
            pageNo: 1,
            pageSize: 10,
            classify: null,
            auditStatus: 1,
        },
        // 新需求提醒
        newDemandNotice: {
            icon: '/static/images/codefun/48f77b33e9b33c48eda3cfc9708d8c28.png',
            text: '3 条新需求发布，点击刷新查看',
        },
        icons: {
            deadline: '/static/images/codefun/56353ebdea095baedbcb33fc53f68a03.png',
            location: '/static/images/codefun/c98744e63719b5413f260ec6a899ee20.png',
            quote: '/static/images/codefun/bcf6538c8728a2894c90d4463c4c9520.png',
        },

        // 采购需求列表
        purchaseDemands: [],
        total: 0,

        // 供应信息列表
        supplyInfos: [],

        // 渠道列表
        channels: [
            {
                text: '高品质、即时配送和沉浸式体验构建品牌护城河',
                icon: '/src/static/images/qudao/盒马鲜生.png',
                iconLeft: '/src/static/images/qudao/盒马鲜生-左.png',
                backgroundColor: '#DBF8FF',
                iconColor: '#252772',
                textColor: '#282A74'
            },
            {
                text: '“不卖隔夜肉”的社区短链模式主打极致新鲜',
                icon: '/src/static/images/qudao/钱大妈.png',
                iconLeft: '/src/static/images/qudao/钱大妈-左.png',
                backgroundColor: '#FFE8E8',
                iconColor: '#FE0000',
                textColor: '#540000'
            },
            {
                text: '商品齐全物美价廉“美团运力”实现万物速达',
                icon: '/src/static/images/qudao/小象超市.png',
                iconLeft: '/src/static/images/qudao/小象超市-左.png',
                backgroundColor: '#E2FFDE',
                iconColor: '#00C53B',
                textColor: '#024A18'
            },
            {
                text: '无与伦比的源头价格和海量品类选择',
                icon: '/src/static/images/qudao/红星.png',
                iconLeft: '/src/static/images/qudao/红星-左.png',
                backgroundColor: '#F5DADD',
                iconColor: '#E70E30',
                textColor: '#570612'
            },
            {
                text: '畜牧类采购需求大“猪肉垂直”的深度专家',
                icon: '/src/static/images/qudao/牧壹猪.png',
                iconLeft: '/src/static/images/qudao/牧壹猪-左.png',
                backgroundColor: '#C0D1C7',
                iconColor: '#383838',
                textColor: '#223D27'
            },
            {
                text: '区域性优势明显“区域深耕”织密本地网络',
                icon: '/src/static/images/qudao/菜鲜宜.png',
                iconLeft: '/src/static/images/qudao/菜鲜宜-左.png',
                backgroundColor: '#C4F2DE',
                iconColor: '#14AE68',
                textColor: '#064529'
            },
        ],
    })
    // 获取采购需求列表
    function getPurchaseList() {
        pageData.loading = true
        ChanxiaoAPI.purchaseList(pageData.search)
            .then((res) => {
                const { records, total } = res
                pageData.purchaseDemands = [...pageData.purchaseDemands, ...records]
                pageData.purchaseDemands = pageData.purchaseDemands.map((item) => ({
                    ...item,
                    location: getText(`${item.province},${item.city},${item.country}`, ' / '),
                }))
                pageData.total = total
            })
            .finally(() => {
                pageData.loading = false
            })
    }
    // 获取供应信息列表
    function getSupplyList() {
        pageData.loading = true
        ChanxiaoAPI.supplyList(pageData.search)
            .then((res) => {
                const { records, total } = res
                pageData.supplyInfos = [...pageData.supplyInfos, ...records]
                pageData.supplyInfos = pageData.supplyInfos.map((item) => ({
                    ...item,
                    location: getText(`${item.province},${item.city},${item.country}`, ' / '),
                }))
                pageData.total = total
            })
            .finally(() => {
                pageData.loading = false
            })
    }

    // 分类标签点击事件
    function onCategoryTabClick(tab: any) {
        // 在这里添加具体的分类标签点击逻辑
        if (tab.id === -1) {
            pageData.search.classify = null
        } else {
            pageData.search.classify = tab.id
        }
        pageData.search.pageNo = 1
        pageData.purchaseDemands = []
        pageData.supplyInfos = []
        if (pageData.currentTransactionTab === 1) getPurchaseList()
        if (pageData.currentTransactionTab === 2) getSupplyList()
    }

    // 采购/供应标签点击事件
    function onTransactionTabClick(tab: any) {
        // 在这里添加具体的采购/供应标签点击逻辑
        pageData.currentTransactionTab = tab.id
        pageData.search.pageNo = 1
        pageData.purchaseDemands = []
        pageData.supplyInfos = []
        if (pageData.currentTransactionTab === 1) getPurchaseList()
        if (pageData.currentTransactionTab === 2) getSupplyList()
    }

    // 新需求提醒点击事件
    // function onNewDemandNoticeClick() {
    //     console.log('点击新需求提醒')
    //     // 在这里添加具体的新需求提醒点击逻辑
    // }

    // 采购需求点击事件
    function onPurchaseDemandClick(demand: any) {
        console.log('点击采购需求:', demand)
        // 在这里添加具体的采购需求点击逻辑
        Navigate.to(`/pages/chanxiao/purchaseXuQiu?id=${demand.id}`)
    }

    const priceDialogRef = ref()
    // 立即报价点击事件
    function onQuoteClick(item: any) {
        console.log('点击立即报价:', item)
        // 在这里添加具体的立即报价点击逻辑
        priceDialogRef.value.open(item)
    }

    // 供应信息点击事件
    function onSupplyInfoClick(info: any) {
        console.log('点击供应信息:', info)
        // 在这里添加具体的供应信息点击逻辑
        Navigate.to(`/pages/chanxiao/supplyXuQiu?id=${info.id}`)
    }

    // 发布需求
    function handlePublish() {
        if (pageData.currentTransactionTab === 1) {
            Navigate.to('/pages/chanxiao/purchaseXuQiu')
            return
        }
        if (pageData.currentTransactionTab === 2) {
            Navigate.to('/pages/chanxiao/supplyXuQiu')
        }
    }

    onReachBottom(() => {
        console.log('触底了')
        if (pageData.currentTransactionTab === 1) {
            if (pageData.total <= pageData.purchaseDemands.length) return
            pageData.search.pageNo++
            getPurchaseList()
        }
        if (pageData.currentTransactionTab === 2) {
            if (pageData.total <= pageData.supplyInfos.length) return
            pageData.search.pageNo++
            getSupplyList()
        }
    })
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col section">
            <view class="codefun-flex-col">
                <view class="codefun-flex-col codefun-self-stretch">
                    <view><image class="image_5" :src="pageData.header.bannerImage" /></view>
                    <view class="mt-4">
                        <view>多渠道展开资深合作</view>
                        <view>
                            <view
                                class="channel-list"
                                :style="`background: linear-gradient(to right, ${channel.backgroundColor} 0%, white 100%);`"
                                v-for="(channel, index) in pageData.channels"
                                :key="index"
                            >
                                <view class="channel-list-left">
                                    <img class="channel-imgLeft" :src="channel.iconLeft" />
                                </view>
                                <view class="channel-list-center">
                                    <img class="channel-imgCenter" :style="channel.icon.indexOf('菜鲜宜') > 0 ? 'width: 100rpx; height: 40rpx' : ''" :src="channel.icon" />
                                    <text class="channel-text" :style="`color: ${channel.textColor}`">{{ channel.text }}</text>
                                </view>
                                <view class="channel-list-right">
                                    <svg class="channel-imgRight" width="14" height="14" xmlns="http://www.w3.org/2000/svg" fill="none">
                                        <g>
                                            <title>Layer 1</title>
                                            <path
                                                id="svg_1"
                                                :fill="channel.iconColor"
                                                d="m7,0c3.8659,0 7,3.13406 7,7c0,3.8659 -3.1341,7 -7,7c-3.86594,0 -7,-3.1341 -7,-7c0,-3.86594 3.13406,-7 7,-7zm-1.80056,3.29506c-0.00573,0.0063 -0.01131,0.01272 -0.01674,0.01927c-0.00544,0.00655 -0.0107,0.01321 -0.01583,0.02001c-0.00513,0.00681 -0.01009,0.01371 -0.01489,0.02072c-0.00479,0.00704 -0.00944,0.01416 -0.01392,0.02139c-0.00446,0.00724 -0.00877,0.01459 -0.01291,0.02203c-0.00413,0.00743 -0.00809,0.01495 -0.01188,0.02259c-0.0038,0.00762 -0.00741,0.01532 -0.01083,0.02311c-0.00343,0.00779 -0.00669,0.01564 -0.00975,0.02358c-0.00305,0.00793 -0.00594,0.01594 -0.00863,0.02401c-0.00269,0.00807 -0.00522,0.01621 -0.00754,0.0244c-0.00232,0.00818 -0.00445,0.01642 -0.00638,0.02469c-0.00194,0.00829 -0.0037,0.01661 -0.00525,0.02499c-0.00155,0.00837 -0.00293,0.01676 -0.00409,0.02519c-0.00116,0.00843 -0.00213,0.01688 -0.00291,0.02535c-0.00079,0.00848 -0.00136,0.01696 -0.00174,0.02547c-0.00038,0.00851 -0.00058,0.01701 -0.00057,0.02552c0.00002,0.0085 0.00022,0.01701 0.00062,0.02551c0.0004,0.00851 0.001,0.01698 0.00179,0.02545c0.0008,0.00847 0.00179,0.01693 0.00297,0.02535c0.00119,0.00844 0.00256,0.01683 0.00415,0.02518c0.00157,0.00837 0.00334,0.0167 0.00529,0.02497c0.00196,0.00829 0.0041,0.01652 0.00644,0.0247c0.00234,0.00818 0.00486,0.0163 0.00758,0.02438c0.00271,0.00807 0.0056,0.01605 0.00869,0.02399c0.00309,0.00794 0.00635,0.01579 0.00979,0.02356c0.00346,0.00777 0.00709,0.01548 0.01088,0.0231c0.0038,0.0076 0.00777,0.01512 0.01193,0.02255c0.00416,0.00744 0.00848,0.01476 0.01297,0.02199c0.0045,0.00724 0.00914,0.01436 0.01395,0.02136c0.00483,0.00702 0.00981,0.01392 0.01494,0.0207c0.00513,0.00679 0.01043,0.01346 0.01588,0.01999c0.00543,0.00653 0.01103,0.01295 0.01677,0.01923l0.04083,0.04006l3.26939,2.92055l-3.26939,2.92055c-0.00637,0.00567 -0.01259,0.01147 -0.01869,0.01741c-0.00609,0.00594 -0.01206,0.01202 -0.01787,0.01825c-0.00582,0.00622 -0.01148,0.01257 -0.017,0.01905c-0.00553,0.00648 -0.01089,0.0131 -0.01611,0.01984c-0.00523,0.0067 -0.01029,0.0136 -0.01519,0.0205c-0.00489,0.007 -0.00962,0.0141 -0.0142,0.0213c-0.00456,0.0071 -0.00897,0.0144 -0.01322,0.0218c-0.00423,0.0074 -0.00829,0.0149 -0.01218,0.0225c-0.00389,0.0075 -0.0076,0.0152 -0.01115,0.0229c-0.00352,0.0078 -0.00688,0.0156 -0.01005,0.0235c-0.00318,0.0079 -0.00617,0.0159 -0.00898,0.0239c-0.00281,0.0081 -0.00543,0.0162 -0.00785,0.0243c-0.00242,0.0082 -0.00466,0.0164 -0.00672,0.0247c-0.00205,0.0083 -0.00393,0.0166 -0.00558,0.0249c-0.00167,0.0083 -0.00314,0.0167 -0.00443,0.0252c-0.00129,0.0084 -0.00235,0.0168 -0.00324,0.0253c-0.00089,0.0085 -0.00159,0.017 -0.00209,0.0255c-0.0005,0.0085 -0.0008,0.017 -0.0009,0.0255c-0.0001,0.0085 0,0.017 0.00028,0.0255c0.00029,0.0085 0.00077,0.017 0.00146,0.0255c0.00068,0.0085 0.00157,0.017 0.00264,0.0254c0.00107,0.0085 0.00234,0.0169 0.00381,0.0253c0.00145,0.0084 0.0031,0.0167 0.00496,0.025c0.00185,0.0083 0.00389,0.0166 0.00613,0.0248c0.00222,0.0082 0.00465,0.0164 0.00725,0.0245c0.00263,0.0081 0.00542,0.0162 0.00839,0.0241c0.00299,0.008 0.00615,0.0159 0.00949,0.0238c0.00336,0.0078 0.00689,0.0155 0.01058,0.0232c0.00371,0.0077 0.00759,0.0153 0.01165,0.0227c0.00406,0.0075 0.00829,0.0149 0.01268,0.0222c0.0044,0.0073 0.00896,0.0145 0.01369,0.0216c0.00473,0.0071 0.00961,0.014 0.01467,0.0209l0.03616,0.0439c0.19367,0.2139 0.51723,0.2435 0.74589,0.077l0.04433,-0.0358l3.42379,-3.05778c0.01158,-0.01031 0.02289,-0.02089 0.03394,-0.03176c0.01105,-0.01088 0.02182,-0.02203 0.0323,-0.03344c0.01048,-0.01141 0.02067,-0.02309 0.03056,-0.03504c0.00991,-0.01193 0.0195,-0.0241 0.02878,-0.03651c0.00927,-0.01242 0.01824,-0.02507 0.02688,-0.03794c0.00864,-0.01286 0.01695,-0.02595 0.02494,-0.03923c0.00797,-0.01329 0.01562,-0.02677 0.02292,-0.04046c0.0073,-0.01368 0.01426,-0.02753 0.02086,-0.04155c0.0066,-0.01402 0.01283,-0.02821 0.01871,-0.04255c0.0059,-0.01435 0.01141,-0.02882 0.01656,-0.04344c0.00516,-0.01463 0.00994,-0.02938 0.01435,-0.04424c0.0044,-0.01485 0.00843,-0.02982 0.01209,-0.04488c0.00366,-0.01505 0.00693,-0.03021 0.00982,-0.04545c0.00289,-0.01522 0.00538,-0.03051 0.00751,-0.04587c0.00212,-0.01536 0.00384,-0.03076 0.00517,-0.0462c0.00134,-0.01546 0.00229,-0.03092 0.00285,-0.04641c0.00055,-0.01549 0.00071,-0.03099 0.0005,-0.04648c-0.00024,-0.01551 -0.00086,-0.031 -0.00186,-0.04646c-0.001,-0.01547 -0.0024,-0.03091 -0.00419,-0.0463c-0.00179,-0.01541 -0.00396,-0.03075 -0.00652,-0.04604c-0.00256,-0.01529 -0.00551,-0.03051 -0.00884,-0.04565c-0.00332,-0.01514 -0.00703,-0.03018 -0.01113,-0.04513c-0.00409,-0.01496 -0.00855,-0.0298 -0.0134,-0.04452c-0.00483,-0.01472 -0.01004,-0.02933 -0.01562,-0.0438c-0.00558,-0.01445 -0.01152,-0.02877 -0.01782,-0.04294c-0.0063,-0.01415 -0.01295,-0.02816 -0.01995,-0.04198c-0.007,-0.01383 -0.01435,-0.02749 -0.02206,-0.04094c-0.0077,-0.01345 -0.01572,-0.0267 -0.02409,-0.03975c-0.00837,-0.01305 -0.01706,-0.02588 -0.02607,-0.0385c-0.00901,-0.01262 -0.01833,-0.02498 -0.02797,-0.03713c-0.00964,-0.01215 -0.01957,-0.02403 -0.02981,-0.03568c-0.01025,-0.01164 -0.02077,-0.02301 -0.03158,-0.03412l-0.04783,-0.04627l-3.42379,-3.05784c-0.00682,-0.00608 -0.01379,-0.012 -0.02091,-0.01773c-0.00711,-0.00575 -0.01437,-0.01131 -0.02175,-0.01669c-0.00739,-0.0054 -0.01491,-0.0106 -0.02254,-0.01563c-0.00764,-0.00501 -0.01541,-0.00984 -0.02328,-0.01448c-0.00787,-0.00465 -0.01586,-0.0091 -0.02395,-0.01336c-0.0081,-0.00426 -0.01629,-0.0083 -0.02458,-0.01216c-0.00829,-0.00386 -0.01667,-0.0075 -0.02515,-0.01095c-0.00847,-0.00346 -0.01701,-0.0067 -0.02563,-0.00972c-0.00862,-0.00303 -0.01731,-0.00583 -0.02608,-0.00844c-0.00878,-0.00261 -0.0176,-0.005 -0.02647,-0.00719c-0.00888,-0.00217 -0.01782,-0.00412 -0.02679,-0.00586c-0.00897,-0.00174 -0.018,-0.00326 -0.02704,-0.00456c-0.00904,-0.00131 -0.01813,-0.00239 -0.02723,-0.00324c-0.00911,-0.00086 -0.01822,-0.00151 -0.02736,-0.00193c-0.00912,-0.00041 -0.01826,-0.0006 -0.0274,-0.00056c-0.00914,0.00003 -0.01828,0.00028 -0.02741,0.00076c-0.00914,0.00047 -0.01824,0.00117 -0.02735,0.00209c-0.00909,0.00092 -0.01816,0.00208 -0.02721,0.00343c-0.00904,0.00135 -0.01803,0.00294 -0.027,0.00474c-0.00897,0.00181 -0.01788,0.00383 -0.02675,0.00605c-0.00886,0.00224 -0.01766,0.0047 -0.0264,0.00736c-0.00876,0.00267 -0.01743,0.00554 -0.02604,0.00864c-0.0086,0.00309 -0.01714,0.00638 -0.02558,0.00987c-0.00844,0.00351 -0.01679,0.00722 -0.02507,0.01113c-0.00825,0.00391 -0.01641,0.00802 -0.02448,0.01233c-0.00807,0.00431 -0.01602,0.00881 -0.02386,0.0135c-0.00785,0.0047 -0.01557,0.0096 -0.02318,0.01466c-0.0076,0.00508 -0.01508,0.01034 -0.02244,0.01577c-0.00735,0.00543 -0.01457,0.01105 -0.02164,0.01685c-0.00706,0.00578 -0.014,0.01173 -0.0208,0.01786c-0.00678,0.00613 -0.01342,0.01242 -0.01989,0.01886c-0.00648,0.00646 -0.01279,0.01306 -0.01896,0.01982l0,-0.00038z"
                                            />
                                        </g>
                                    </svg>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="codefun-mt-16 codefun-flex-row gap-1">
                        <view
                            v-for="tab in pageData.categoryTabs"
                            :key="tab.id"
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper"
                            :class="[
                                { section_2: pageData.search.classify === tab.id },
                                {
                                    section_2:
                                        pageData.search.classify !== 0 && !pageData.search.classify && tab.id === -1,
                                },
                            ]"
                            @click="onCategoryTabClick(tab)"
                        >
                            <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
                                <text class="font text_2">{{ tab.name }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="codefun-flex-row section_3">
            <view
                v-for="tab in pageData.transactionTabs"
                :key="tab.id"
                class="codefun-flex-col codefun-justify-start codefun-items-center section_50p"
                :class="[pageData.currentTransactionTab === tab.id ? 'text-wrapper_3' : 'codefun-self-start']"
                @click="onTransactionTabClick(tab)"
            >
                <text class="font" :class="pageData.currentTransactionTab === tab.id ? 'text_17' : 'text_27'">
                    {{ tab.name }}
                </text>
            </view>
        </view>
        <view class="codefun-flex-col codefun-relative section_4">
            <!-- <view class="codefun-flex-row codefun-items-center section_5" @click="onNewDemandNoticeClick">
                <image class="codefun-shrink-0 image_6" :src="pageData.newDemandNotice.icon" />
                <text class="codefun-ml-12 font_2 text_10">{{ pageData.newDemandNotice.text }}</text>
            </view> -->

            <view
                v-if="pageData.currentTransactionTab === 2 && pageData.supplyInfos.length === 0"
                style="height: 528rpx"
            >
                <fui-empty src="/src/static/images/no-data.png" title="暂无数据" />
            </view>
            <!-- 供应信息列表 -->
            <template v-for="(info, index) in pageData.supplyInfos" :key="info.id">
                <view
                    v-show="pageData.currentTransactionTab === 2"
                    class="codefun-flex-row"
                    :class="[index === 0 ? 'group_10' : 'group_12']"
                    @click="onSupplyInfoClick(info)"
                >
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center codefun-relative"
                        :class="index === 0 ? 'section_7' : 'image-wrapper view'"
                    >
                        <image class="image_7" :src="info.image" />
                        <!-- <view
                            v-if="info.tag.show"
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6"
                            :class="index === 0 ? 'pos_2' : ''"
                        >
                            <text class="font_3" :class="`text_${index === 0 ? 25 : 31}`">{{ info.tag.text }}</text>
                        </view> -->
                    </view>
                    <view
                        class="codefun-ml-12 codefun-flex-col codefun-flex-1"
                        :class="index === 0 ? 'codefun-self-start group_11' : ''"
                    >
                        <text class="codefun-self-start font_4" :class="index === 0 ? 'text_24' : ''">
                            {{ info.title }}
                        </text>
                        <text
                            v-if="info.productSpecs"
                            class="codefun-self-start font_2"
                            :class="index === 0 ? 'text_26 mt-11' : 'mt-11'"
                        >
                            {{ info.productSpecs }}
                        </text>
                        <view
                            class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch"
                            :class="index === 0 ? 'mt-11' : 'mt-11'"
                        >
                            <view class="codefun-flex-row">
                                <image class="codefun-shrink-0 image_9" :src="pageData.icons.location" />
                                <text class="codefun-ml-4 font_2" :class="`text_${index === 0 ? 27 : 30}`">{{
                                    info.location
                                }}</text>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
                                @click.stop="onQuoteClick(info)"
                            >
                                <text class="font_9">立即报价</text>
                            </view>
                        </view>
                    </view>
                </view>
            </template>

            <!-- 采购需求列表 -->
            <view
                v-if="pageData.currentTransactionTab === 1 && pageData.purchaseDemands.length === 0"
                style="height: 528rpx"
            >
                <fui-empty src="/src/static/images/no-data.png" title="暂无数据" />
            </view>
            <view v-else>
                <template v-for="(demand, index) in pageData.purchaseDemands" :key="demand.id">
                    <view
                        v-show="pageData.currentTransactionTab === 1"
                        class="codefun-flex-row codefun-items-center my-3"
                        :class="[index === 0 ? 'group_2' : '', index === 1 ? 'group_6' : '']"
                        @click="onPurchaseDemandClick(demand)"
                    >
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-center codefun-relative"
                            :class="index === 0 ? 'section_6' : 'image-wrapper'"
                        >
                            <image class="image_7" :src="demand.image" />
                            <!-- <view
                            v-if="demand.tag.show"
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                            :class="index === 0 ? 'pos' : ''"
                        >
                            <text class="font_3 text_11">{{ demand.tag.text }}</text>
                        </view> -->
                        </view>
                        <view class="codefun-ml-12 codefun-flex-col codefun-flex-1">
                            <text class="codefun-self-start font_4">{{ demand.title }}</text>
                            <view class="codefun-flex-row codefun-self-stretch mt-2" v-if="demand.deadline">
                                <image class="image_8" :src="pageData.icons.deadline" />
                                <text class="codefun-ml-4 font_2" :class="`text_${index === 0 ? 13 : 19}`">{{
                                    demand.deadline
                                }}</text>
                            </view>
                            <view class="codefun-flex-row codefun-self-stretch mt-2">
                                <image class="image_9" :src="pageData.icons.location" />
                                <text class="codefun-ml-4 font_2" :class="`text_${index === 0 ? 14 : 20}`">{{
                                    demand.location
                                }}</text>
                            </view>
                            <view class="codefun-self-start" :class="index === 0 ? 'group_4' : 'group_8'">
                                <text
                                    v-if="demand.priceStart || demand.priceEnd"
                                    class="font_6"
                                    :class="`text_${index === 0 ? 15 : 21}`"
                                    >¥</text
                                >
                                <text v-if="demand.priceStart || demand.priceEnd" class="font_5">{{
                                    `${demand.priceStart}-${demand.priceEnd}`
                                }}</text>
                                <text v-if="demand.unit" class="font_7" :class="`text_${index === 0 ? 16 : 22}`"
                                    >/{{ demand.unit }}</text
                                >
                            </view>
                        </view>
                    </view>
                    <view
                        v-show="pageData.currentTransactionTab === 1"
                        class="codefun-flex-row codefun-justify-between codefun-items-center"
                        :class="[index === 0 ? 'group_5' : '', index === 1 ? 'group_9' : '']"
                    >
                        <view class="codefun-flex-row codefun-items-center">
                            <image class="codefun-shrink-0 image_10" :src="pageData.icons.quote" />
                            <text
                                class="font_8"
                                :class="[index === 0 ? 'text_17' : 'text_23', index === 0 ? 'ml-5' : 'codefun-ml-4']"
                            >
                                {{ demand.supplyCounts }}人报价
                            </text>
                        </view>
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
                            @click.stop="onQuoteClick(demand)"
                        >
                            <text class="font_9">立即报价</text>
                        </view>
                    </view>
                    <!-- 分隔线 -->
                    <view class="divider" v-if="index < pageData.purchaseDemands.length - 1" />
                </template>
            </view>
        </view>
    </view>
    <fui-fab position="right" distance="30" bottom="150" width="96" @click="handlePublish">
        <view v-show="pageData.currentTransactionTab === 1" class="text-white text-center">
            <view class="fab-icon" />
            <view style="font-size: 24rpx">发布</view>
        </view>
        <view v-show="pageData.currentTransactionTab === 2" class="text-white text-center">
            <view class="fab-icon" />
            <view style="font-size: 24rpx">发布</view>
        </view>
    </fui-fab>

    <PriceDialog ref="priceDialogRef" />
    <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
</template>

<style scoped lang="scss">
    .ml-7 {
        margin-left: 14rpx;
    }
    .ml-55 {
        margin-left: 110rpx;
    }
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .mt-5 {
        margin-top: 10rpx;
    }
    .page {
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 32rpx;
        .section {
            padding: 0 28rpx 8rpx;
            background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .group {
                padding-left: 16rpx;
                .image {
                    border-radius: 64rpx;
                    width: 108rpx;
                    height: 42rpx;
                }
                .image_2 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 34rpx;
                    height: 22rpx;
                }
                .image_3 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 30rpx;
                    height: 22rpx;
                }
                .image_4 {
                    width: 48rpx;
                    height: 22rpx;
                }
            }
            .text {
                color: #ffffffe6;
                font-size: 32rpx;
                font-family: DingTalk Sans;
                line-height: 29.7rpx;
            }
            .image_5 {
                width: 92.5333vw;
                height: 37.3333vw;
            }
            .section_2 {
                // padding: 16rpx 0;
                flex: 1 1 104rpx;
                background-color: #5db66f !important;
                border-radius: 19998rpx;
                mix-blend-mode: NOTTHROUGH;
                .text-wrapper_2 {
                    overflow: hidden;
                    width: 56rpx;
                    .text_2 {
                        color: #ffffff;
                        line-height: 26.02rpx;
                    }
                }
            }
            .text-wrapper {
                flex: 1 1 104rpx;
                padding: 24rpx 0 20rpx;
                background-color: #ffffff;
                border-radius: 19998rpx;
                mix-blend-mode: NOTTHROUGH;
                height: 72rpx;
                .text_3 {
                    line-height: 25.76rpx;
                }
                .text_4 {
                    line-height: 25.74rpx;
                }
                .text_5 {
                    line-height: 26.02rpx;
                }
                .text_6 {
                    line-height: 26.04rpx;
                }
                .text_7 {
                    line-height: 25.68rpx;
                }
            }
        }
        .section_3 {
            margin: 20rpx 28rpx 0;
            padding-bottom: 8rpx;
            background-color: #ffffff66;
            border-radius: 32rpx;
            border-left: solid 2rpx #ffffffcc;
            border-right: solid 2rpx #ffffffcc;
            border-top: solid 2rpx #ffffffcc;
            border-bottom: solid 2rpx #ffffffcc;
            .section_50p {
                flex: 0 0 50%;
                padding: 24rpx 0 52rpx;
            }
            .text-wrapper_3 {
                background-color: #ffffff;
                border-radius: 32rpx;
                .text_8 {
                    color: #333333;
                    line-height: 26.02rpx;
                }
            }
            .text_9 {
                margin-top: 20rpx;
                color: #5db66f;
                line-height: 26.18rpx;
            }
        }
        .font {
            font-size: 28rpx;
            font-family: DingTalk Sans;
            line-height: 24.44rpx;
            color: #1f2937;
        }
        .section_4 {
            margin: -44rpx 28rpx 0;
            padding: 12rpx 24rpx 20rpx;
            background-color: #ffffff;
            border-radius: 21.8rpx;
            mix-blend-mode: NOTTHROUGH;
            .image_7 {
                width: 100%;
                height: 100%;
            }
            .section_5 {
                padding: 16rpx 20rpx 8rpx;
                background-color: #fff7ec;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .image_6 {
                    width: 26rpx;
                    height: 32rpx;
                }
                .text_10 {
                    color: #ff8d1a;
                    line-height: 40rpx;
                }
            }
            .group_2 {
                margin-top: 24rpx;
                .section_6 {
                    background-color: #f9fafb;
                    border-radius: 8rpx;
                    width: 160rpx;
                    height: 160rpx;
                    .text-wrapper_4 {
                        padding: 8rpx 0;
                        background-image: linear-gradient(90deg, #fb6c26 0%, #f2130d 100%);
                        border-radius: 0rpx 8rpx 8rpx 0rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 64rpx;
                        .text_11 {
                            line-height: 18.46rpx;
                        }
                    }
                    .pos {
                        position: absolute;
                        left: 0;
                        top: 8rpx;
                    }
                }
                .group_3 {
                    margin-top: 16rpx;
                    .text_13 {
                        line-height: 22.1rpx;
                    }
                    .text_14 {
                        line-height: 22.24rpx;
                    }
                }
                .group_4 {
                    margin-left: 8rpx;
                    margin-top: 36rpx;
                    line-height: 24.44rpx;
                    .text_15 {
                        line-height: 17.3rpx;
                    }
                    .text_16 {
                        line-height: 24.24rpx;
                    }
                }
            }
            .font_2 {
                font-size: 24rpx;
                font-family: DingTalk Sans;
                line-height: 22.42rpx;
                color: #999999;
            }
            .group_5 {
                margin-top: 8rpx;
            }
            .divider {
                margin-top: 20rpx;
                background-color: #eeeeee;
                height: 2rpx;
            }
            .group_6 {
                margin-top: 18rpx;
                .group_7 {
                    margin-top: 16rpx;
                    .text_19 {
                        line-height: 22.1rpx;
                    }
                    .text_20 {
                        line-height: 22.28rpx;
                    }
                }
                .group_8 {
                    margin-left: 8rpx;
                    margin-top: 36rpx;
                    line-height: 24.44rpx;
                    .text_21 {
                        line-height: 17.3rpx;
                    }
                    .text_22 {
                        line-height: 24.24rpx;
                    }
                }
            }
            .font_4 {
                font-size: 32rpx;
                font-family: DingTalk Sans;
                line-height: 40rpx;
                color: #333333;
            }
            .image_8 {
                width: 24rpx;
                height: 24rpx;
            }
            .image_9 {
                width: 22rpx;
                height: 26rpx;
            }
            .font_6 {
                font-size: 24rpx;
                font-family: DingTalk Sans;
                line-height: 18.44rpx;
                font-weight: 700;
                color: #f2130d;
            }
            .font_5 {
                font-size: 32rpx;
                font-family: DingTalk Sans;
                line-height: 24.44rpx;
                color: #f2130d;
            }
            .font_7 {
                font-size: 24rpx;
                font-family: DingTalk Sans;
                line-height: 24.44rpx;
                color: #999999;
            }
            .group_9 {
                margin-top: 8rpx;
            }
            .image_10 {
                width: 80rpx;
                height: 30rpx;
            }
            .font_8 {
                font-size: 20rpx;
                font-family: DingTalk Sans;
                color: #999999;
            }
            .text-wrapper_5 {
                padding: 12rpx 0;
                background-color: #5db66f;
                border-radius: 400rpx;
                mix-blend-mode: NOTTHROUGH;
                width: 136rpx;
                height: 48rpx;
                .font_9 {
                    font-size: 24rpx;
                    font-family: DingTalk Sans;
                    line-height: 22.42rpx;
                    color: #ffffff;
                }
            }
            .group_10 {
                margin-top: 0;
                padding: 30rpx 0;
                border-bottom: solid 2rpx #eeeeee;
                .section_7 {
                    padding: 30rpx 0 16rpx;
                    background-color: #f9fafb;
                    border-radius: 8rpx;
                    width: 160rpx;
                    height: 160rpx;
                    .image_12 {
                        width: 152rpx;
                        height: 114rpx;
                    }
                    .text-wrapper_6 {
                        padding: 8rpx 0;
                        background-color: #ffb700;
                        border-radius: 0rpx 8rpx 8rpx 0rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 64rpx;
                        .text_25 {
                            line-height: 18.62rpx;
                        }
                    }
                    .pos_2 {
                        position: absolute;
                        left: 0;
                        top: 16rpx;
                    }
                }
                .group_11 {
                    margin-top: 16rpx;
                    .text_24 {
                        line-height: 30.28rpx;
                    }
                    .text_26 {
                        line-height: 22.92rpx;
                    }
                    .text_27 {
                        line-height: 22.46rpx;
                    }
                }
            }
            .font_3 {
                font-size: 20rpx;
                font-family: DingTalk Sans;
                line-height: 18.44rpx;
                color: #ffffff;
            }
            .group_12 {
                margin-top: 18rpx;
                .view {
                    margin-bottom: 8rpx;
                }
                .group_13 {
                    margin-top: 16rpx;
                    .text_29 {
                        line-height: 22.1rpx;
                    }
                    .text_30 {
                        line-height: 22.46rpx;
                    }
                }
                .group_14 {
                    margin-left: 8rpx;
                    margin-top: 28rpx;
                    .text_31 {
                        margin-left: 20rpx;
                        margin-right: -104rpx;
                        color: #f2130d;
                        line-height: 40rpx;
                    }
                    .text_32 {
                        line-height: 40rpx;
                        position: relative;
                        left: -24rpx;
                    }
                }
            }
            .image-wrapper {
                padding: 30rpx 0 20rpx;
                background-color: #f9fafb;
                border-radius: 8rpx;
                width: 160rpx;
                height: 160rpx;
                .image_11 {
                    width: 114rpx;
                    height: 110rpx;
                }
            }
            .text_33 {
                line-height: 18.6rpx;
            }
        }
        .equal-division {
            margin-top: 40rpx;
            .group_15 {
                flex: 1 1 146.74rpx;
                .image_13 {
                    width: 32rpx;
                    height: 32rpx;
                }
                .font_10 {
                    font-size: 20rpx;
                    font-family: DingTalk Sans;
                    line-height: 18.44rpx;
                    color: #666666;
                }
            }
            .equal-division-item {
                padding: 12rpx 0;
            }
        }
        .section_8 {
            padding: 12rpx 8rpx;
            background-color: #ffffff;
            mix-blend-mode: NOTTHROUGH;
            border-top: solid 1rpx #e7e7e7;
        }
    }

    .channel-list {
        widows: 100%;
        height: 150rpx;
        margin: 15rpx 0;
        border-radius: 15rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .channel-list-left {
            widows: 60rpx;

            .channel-imgLeft {
                width: 60rpx;
                height: 100%;
            }
        }

        .channel-list-center {
            width: calc(100% - 100rpx);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 15rpx 0;

            .channel-imgCenter {
                width: 200rpx;
                height: 60rpx;
            }

            .channel-text {
                font-size: 21rpx;
                font-family: '思源黑体';
                line-height: 18.44rpx;
            }
        }

        .channel-list-right {
            widows: 60rpx;
            position: relative;

            .channel-imgRight {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 30rpx;
            }
        }
    }

    ::v-deep .fui-fab__btn-main {
        background: linear-gradient(124.25deg, #a5d63f 0%, #5db66f 100%) !important;
        box-shadow: 0px 1px 8px #5db66f;
    }
</style>
