screenControl/src/view/tradeScreen/index.vue

<template>
    <img src="/static/img/tradeScreen/FH.png" @click="router.go(-1)" class="back-btn" alt="">

    <div style="height: 100vh;">
            <div class="tradmenu" v-if="flag">
                <div class="tradmenu-li sy"></div>
                <div class="tradmenu-li sc"></div>
                <div class="tradmenu-li sh" @click="router.push('/storeLogin')"></div>
                <div class="tradmenu-li dd"></div>
                <div class="tradmenu-li cw"></div>
            </div>
            <div v-else>
                <areaChose></areaChose>
            </div>
        </div>

        <div class="area" @click="flag=!flag">
            <div class="area-top">
                <div class="town">江陽區</div>
                <div class="town">江陽區</div>
            </div>
            <div class="area-bottom"></div>
        </div>



    <!-- <div style="text-align: center;">数据之眼可视化大屏</div>
  <div>
    <button @click="sendFn('header1', { page: 1 })">首页</button>
    <button @click="sendFn('header2', { page: 2 })">商品</button>
    <button @click="sendFn('header3', { page: 3 })">商户</button>
    <button @click="sendFn('header4', { page: 4 })">订单</button>
    <button @click="sendFn('header5', { page: 5 })">财务</button>
    <el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <el-select v-model="townCode" class="m-2" @change="changeTown" placeholder="Select" size="large">
      <el-option v-for="item in townOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
  <div v-if="page == 1">
  </div> -->
</template>

<script setup scoped>
import { ref, reactive } from "vue"
import { sendMsg } from "@/api.js"
import axios from "axios"
import areaChose from "@/view/components/areaChose.vue"
import {useRouter} from "vue-router"
const router =useRouter()

const flag=ref(true)
const options = [
    {
        value: '510502',
        label: '江阳区',
    },
    {
        value: '510503',
        label: '纳溪区',
    },
    {
        value: '510504',
        label: '龙马潭区',
    },
    {
        value: '510521',
        label: '泸县',
    },
    {
        value: '510522',
        label: '合江县 ',
    },
    {
        value: '510524',
        label: '叙永县 ',
    }, {
        value: '510525',
        label: '古蔺县 ',
    },
]

const townOptions = []

const areaCode = ref('510521')
const townCode = ref("")


const changeArea = (e) => {
    getTownList()
    options.forEach(item => {
        if (item.value == e) {
            sendFn('choserArea', { name: item.label, code: item.value })
        }
    })
}

const changeTown = (e) => {
    townOptions.forEach(item => {
        if (item.value == e) {
            sendFn('header7', { id: item.value, name: item.label })
            // sendFn('choseTown', { name: item.label })
        }
    })

}

const getTownList = () => {
    townOptions.splice(0, 99999999)
    axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaCode.value}`)
        .then(function (res) {
            res.data.data.forEach(item => {
                townOptions.push({
                    value: item.code,
                    label: item.name
                })
            })

        })
}



const page = ref(1)



const sendFn = (event, data = '') => {
    if (data.page) page.value = data.page;
    sendMsg({ channel: 'user-2', event, data })
}

</script>
<style lang="scss" scoped>
.tradmenu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;

}

.tradmenu-li {
    width: 185.56px;
    height: 213.05px;
    background-size: 100% 100%;

}

.sy {
    background-image: url('/static/img/tradeScreen/SY.png');
}

.sc {
    background-image: url('/static/img/tradeScreen/SC.png');

}
.sh {
    background-image: url('/static/img/tradeScreen/SH.png');

}
.dd {
    background-image: url('/static/img/tradeScreen/DD.png');

}
.cw {
    background-image: url('/static/img/tradeScreen/CW.png');

}

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

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

}
</style>