screenControl/src/view/plantScreen/index.vue

<template>
    <!-- <div class="content" v-if="flag">
        <div class="plant-li" v-for="item in landList" :key="item.id" @click="handClick(item)">
            {{ item.title }}
        </div>
    </div> -->
    <img src="/static/img/tradeScreen/FH.png" @click="router.go(-1)" class="back-btn" alt="">
    <div class="cont" v-if="flag">
        <div class="card" v-for="(item, index) in landList" :key="index" @click="handClick(item)">
            <div class="card-tit">
                {{ item.town_name }}
            </div>
            <div class="card-cotnet">
                <div>
                    {{ item.title }}

                </div>
                <div class="login" @click="lookFarmDetail(item)">查看详情</div>
            </div>
        </div>
    </div>

    <areaChose v-else channel="user-plant" @handTown="handTown" @handArea="handArea"></areaChose>
    <div class="area"
        @click="handArea1">
        <div class="area-top">
            <div class="town">{{ area }}</div>
            <div class="town">{{ town }}</div>
        </div>
        <div class="area-bottom"></div>
    </div>
</template>
<script setup scoped>
import { ref, reactive } from "vue"
import { sendMsg } from "@/api.js"
import { landListApi } from "@/api.js"
import areaChose from "../components/areaChose.vue"
import { useRouter } from "vue-router"
const router = useRouter()
const flag = ref(true)
const town = ref("")
const area = ref("泸县")
let areaCode = 0

const handTown = (e) => {
    town.value = e.name
    getLandList(areaCode, e.code)

}

const handArea = (e) => {
    area.value = e.name
    areaCode = e.code
    town.value = ''
    getLandList(e.code)

}

const landList = ref([])
const getLandList = async (areaCode = 510521, streetCode = '') => {
    let res = await landListApi({
        areaCode,
        streetCode,
    })
    landList.value = res.data.list
    console.log(landList.value)
}
getLandList()

const handClick = (item) => {
    let data = {
        id: item.id,
        landName: item.title,
        areaCode: item.county_code,
        townCode: item.town_code,
        town_name: item.town_name
    }
    sendMsg({ channel: 'user-plant', event: 'choseLand', data })
    // sendFn('choseLand', {id:item.id,landName:item.title,townCode:item.town_code} )
}
// 发送消息
const sendFn = (event, data = '') => {
    sendMsg({ channel:'user-plant', event, data })
}
const handArea1=()=>{
    flag.value=!flag.value
    if(!flag.value){
        sendFn('choserArea', { name: '泸县', code:510521 })

    }
}
</script>
<style lang="scss" scoped>
// .content {
//     height: 500px;
//     width: 90vw;
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%, -50%);
//     box-sizing: border-box;
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: center;
//     overflow-y: auto;

//     .plant-li {
//         width: 165.9px;
//         height: 190.48px;
//         background-image: url('/static/img/plantScreen/A.png');
//         text-align: center;
//         line-height: 190.48px;
//         color: white;
//     }
// }
.cont {
    height: 500px;
    width: 90vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    overflow-y: auto;

    .card {
        width: 378px;
        height: 223px;
        margin-bottom: 10px;
        background-image: url('/static/img/breedScreen/bg.png');
        background-size: 100% 100%;
        font-size: 16px;
        padding: 10px;
        color: white;
        position: relative;

        .card-tit {
            color: #00D6DD;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .card-cotnet {
            margin-top: 50px;

            .login {
                width: 170px;
                height: 34px;
                text-align: center;
                line-height: 34px;
                background-image: url('/static/img/tradeScreen/DL.png');
                background-size: 100% 100%;
                margin-top: 20px;
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
            }
        }

    }

    // background-color: red;
}

.cont::-webkit-scrollbar {
    width: 10px;
    background-color: #153041;
}

.cont::-webkit-scrollbar-track {
    background-color: #153041;
}

::-webkit-scrollbar-thumb {
    background-color: #084D89;
    border-radius: 5px;
}

.back-btn {
    width: 86.21px;
    height: 31px;
    position: absolute;
    top: 70px;
    left: 60.96px;
    z-index: 9;

}

.area {
    position: absolute;
    font-size: 20px;
    color: white;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 558px;

    .area-top {
        display: flex;
        justify-content: space-around;

        .town {
            background-image: url('/static/img/tradeScreen/areaA.png');
            background-size: 100% 100%;
            width: 160.12px;
            height: 30.94px;
            text-align: center;
            line-height: 10px;
        }
    }
}

.area-bottom {
    background-image: url('/static/img/tradeScreen/areaB.png');
    width: 558px;
    height: 57px;
    background-size: 100% 100%;
    transform: translateY(-20px);
}</style>