This commit is contained in:
parent
7e5b2a5e19
commit
14d7b60982
|
|
@ -22,8 +22,8 @@
|
||||||
<div class="card-tit">
|
<div class="card-tit">
|
||||||
{{ item.farm_name }}
|
{{ item.farm_name }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card-text">养殖户: {{ item.master }}</div>
|
||||||
<div class="card-cotnet">
|
<div class="card-cotnet">
|
||||||
<div>商户姓名: {{ item.master }}</div>
|
|
||||||
<div class="login" @click="lookFarmDetail(item)">查看详情</div>
|
<div class="login" @click="lookFarmDetail(item)">查看详情</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -129,6 +129,9 @@ const handTown = (e)=>{
|
||||||
streetCode: e.code
|
streetCode: e.code
|
||||||
}).then(res=>{
|
}).then(res=>{
|
||||||
farmList.value = res.data.farmList || [];
|
farmList.value = res.data.farmList || [];
|
||||||
|
// for(let i=0;i<10;i++){
|
||||||
|
// farmList.value = [...farmList.value, ...res.data.farmList]
|
||||||
|
// }
|
||||||
flag.value = true;
|
flag.value = true;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -188,13 +191,13 @@ const sendFn = (event, data = '') => {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: 378px;
|
width: 370px;
|
||||||
height: 223px;
|
height: 148px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
background-image: url('/static/img/breedScreen/bg.png');
|
background-image: url('/static/img/breedScreen/bg.webp');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 10px;
|
padding: 10px 20px;
|
||||||
color: white;
|
color: white;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
@ -206,6 +209,11 @@ const sendFn = (event, data = '') => {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-text{
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.card-cotnet {
|
.card-cotnet {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- <div style="text-align: center;">物流溯源可视化大屏</div>
|
<!-- <div style="text-align: center;">物流溯源可视化大屏</div>
|
||||||
<el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large">
|
<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-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
|
|
@ -16,189 +16,203 @@
|
||||||
<button @click="sendFn('more_order')">更多订单</button>
|
<button @click="sendFn('more_order')">更多订单</button>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
|
<img
|
||||||
<img src="/static/img/tradeScreen/FH.png" @click="router.go(-1)" class="back-btn" alt="">
|
src="/static/img/tradeScreen/FH.png"
|
||||||
<div class="cont" v-if="flag">
|
@click="router.go(-1)"
|
||||||
<div class="title">三轮车配送</div>
|
class="back-btn"
|
||||||
<div class="card-list">
|
alt=""
|
||||||
<div class="card" v-for="(item, index) in vehicleList" :key="index" @click="sendFn('c_car_index', item)">
|
/>
|
||||||
<div class="card-tit">
|
<div class="cont" v-if="flag">
|
||||||
|
<div class="title">三轮车配送</div>
|
||||||
</div>
|
<div class="card-list">
|
||||||
<div class="card-cotnet">
|
<div class="scorll">
|
||||||
<div>{{ item.courier_name }}</div>
|
<div
|
||||||
<div>{{ item.license }}</div>
|
class="card"
|
||||||
</div>
|
v-for="(item, index) in vehicleList"
|
||||||
<div>查看详情</div>
|
:key="index"
|
||||||
</div>
|
@click="sendFn('c_car_index', item)"
|
||||||
|
>
|
||||||
|
<div class="card-tit"></div>
|
||||||
|
<div class="card-cotnet">
|
||||||
|
<div>{{ item.courier_name }}</div>
|
||||||
|
<div>{{ item.license }}</div>
|
||||||
|
</div>
|
||||||
|
<div>查看详情</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<areaChose v-else channel="user-logistics-datav" @handTown="handTown" @handArea="handArea"></areaChose>
|
</div>
|
||||||
<div class="area" @click="flag = !flag">
|
<areaChose
|
||||||
<div class="area-top">
|
v-else
|
||||||
<div class="town">{{ chooseInfo.area.name || '未选择' }}</div>
|
channel="user-logistics-datav"
|
||||||
<div class="town">{{ chooseInfo.town.name || '未选择' }}</div>
|
@handTown="handTown"
|
||||||
</div>
|
@handArea="handArea"
|
||||||
<div class="area-bottom"></div>
|
></areaChose>
|
||||||
|
<div class="area" @click="flag = !flag">
|
||||||
|
<div class="area-top">
|
||||||
|
<div class="town">{{ chooseInfo.area.name || "未选择" }}</div>
|
||||||
|
<div class="town">{{ chooseInfo.town.name || "未选择" }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="area-bottom"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup scoped>
|
<script setup scoped>
|
||||||
import { ref, reactive } from "vue"
|
import { ref, reactive } from "vue";
|
||||||
import { sendMsg } from "@/api.js"
|
import { sendMsg } from "@/api.js";
|
||||||
import axios from "axios"
|
import axios from "axios";
|
||||||
import areaChose from "@/view/components/areaChose.vue"
|
import areaChose from "@/view/components/areaChose.vue";
|
||||||
import { vehicleListApi } from "@/api.js"
|
import { vehicleListApi } from "@/api.js";
|
||||||
import {useRouter} from "vue-router"
|
import { useRouter } from "vue-router";
|
||||||
const router = useRouter()
|
const router = useRouter();
|
||||||
|
|
||||||
const nowPages = ref('index');
|
const nowPages = ref("index");
|
||||||
const flag = ref(true);
|
const flag = ref(true);
|
||||||
|
|
||||||
// 镇列表
|
// 镇列表
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
value: '510502',
|
value: "510502",
|
||||||
label: '江阳区',
|
label: "江阳区",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '510503',
|
value: "510503",
|
||||||
label: '纳溪区',
|
label: "纳溪区",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '510504',
|
value: "510504",
|
||||||
label: '龙马潭区',
|
label: "龙马潭区",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '510521',
|
value: "510521",
|
||||||
label: '泸县',
|
label: "泸县",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '510522',
|
value: "510522",
|
||||||
label: '合江县 ',
|
label: "合江县 ",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '510524',
|
value: "510524",
|
||||||
label: '叙永县 ',
|
label: "叙永县 ",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '510525',
|
value: "510525",
|
||||||
label: '古蔺县 ',
|
label: "古蔺县 ",
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
// 区列表
|
// 区列表
|
||||||
const townOptions = []
|
const townOptions = [];
|
||||||
|
|
||||||
const changeArea = (e) => {
|
const changeArea = (e) => {
|
||||||
townCode.value = ''
|
townCode.value = "";
|
||||||
getTownList()
|
getTownList();
|
||||||
options.forEach(item => {
|
options.forEach((item) => {
|
||||||
if (item.value == e) {
|
if (item.value == e) {
|
||||||
sendFn('choserArea', { name: item.label, code: item.value })
|
sendFn("choserArea", { name: item.label, code: item.value });
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const changeTown = (e) => {
|
const changeTown = (e) => {
|
||||||
console.log(e)
|
console.log(e);
|
||||||
townOptions.forEach(item => {
|
townOptions.forEach((item) => {
|
||||||
if (item.value == e) {
|
if (item.value == e) {
|
||||||
sendFn('choseTown', { name: item.label })
|
sendFn("choseTown", { name: item.label });
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
||||||
const chooseInfo = ref({
|
const chooseInfo = ref({
|
||||||
area: {
|
area: {
|
||||||
code: '510521',
|
code: "510521",
|
||||||
name: '泸县'
|
name: "泸县",
|
||||||
},
|
},
|
||||||
town: {}
|
town: {},
|
||||||
});
|
});
|
||||||
const handArea = (e)=>{
|
const handArea = (e) => {
|
||||||
chooseInfo.value.area = e;
|
chooseInfo.value.area = e;
|
||||||
chooseInfo.value.town = {};
|
chooseInfo.value.town = {};
|
||||||
getLandList();
|
getLandList();
|
||||||
}
|
};
|
||||||
|
|
||||||
const handTown = (e)=>{
|
const handTown = (e) => {
|
||||||
chooseInfo.value.town = e;
|
chooseInfo.value.town = e;
|
||||||
getLandList();
|
getLandList();
|
||||||
}
|
};
|
||||||
|
|
||||||
const getTownList = () => {
|
const getTownList = () => {
|
||||||
townOptions.splice(0, 99999999)
|
townOptions.splice(0, 99999999);
|
||||||
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${chooseInfo.value.area.code}`)
|
axios
|
||||||
.then(function (res) {
|
.get(
|
||||||
res.data.data.forEach(item => {
|
`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${chooseInfo.value.area.code}`
|
||||||
townOptions.push({
|
)
|
||||||
value: item.code,
|
.then(function (res) {
|
||||||
label: item.name
|
res.data.data.forEach((item) => {
|
||||||
})
|
townOptions.push({
|
||||||
})
|
value: item.code,
|
||||||
|
label: item.name,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
})
|
const vehicleList = ref([]);
|
||||||
}
|
|
||||||
|
|
||||||
const vehicleList=ref([])
|
|
||||||
const getLandList = async () => {
|
const getLandList = async () => {
|
||||||
let res = await vehicleListApi({
|
let res = await vehicleListApi({
|
||||||
areaCode: chooseInfo.value.area.code,
|
areaCode: chooseInfo.value.area.code,
|
||||||
streetCode: chooseInfo.value.town.code
|
streetCode: chooseInfo.value.town.code,
|
||||||
})
|
});
|
||||||
vehicleList.value=res.data.list
|
vehicleList.value = res.data.list;
|
||||||
|
|
||||||
}
|
// for (let i = 0; i < 10; i++) {
|
||||||
|
// vehicleList.value = [...vehicleList.value, ...res.data.list];
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
getTownList();
|
||||||
getTownList()
|
getLandList();
|
||||||
getLandList()
|
|
||||||
// 发送消息
|
// 发送消息
|
||||||
const page = ref(1)
|
const page = ref(1);
|
||||||
const sendFn = (event, data = '') => {
|
const sendFn = (event, data = "") => {
|
||||||
if (data.page) page.value = data.page;
|
if (data.page) page.value = data.page;
|
||||||
sendMsg({ channel: 'user-logistics-datav', event, data })
|
sendMsg({ channel: "user-logistics-datav", event, data });
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.cont {
|
.cont {
|
||||||
height: 500px;
|
height: 500px;
|
||||||
width: 90vw;
|
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;
|
||||||
|
background-image: url("/static/img/breedScreen/vebg.webp");
|
||||||
|
|
||||||
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
left: 80px;
|
||||||
left: 50%;
|
top: 14%;
|
||||||
transform: translate(-50%, -50%);
|
color: #fff;
|
||||||
box-sizing: border-box;
|
}
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
overflow-y: auto;
|
|
||||||
background-image: url('/static/img/breedScreen/vebg.webp');
|
|
||||||
|
|
||||||
.title{
|
.card-list {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 80px;
|
top: 110px;
|
||||||
top: 14%;
|
left: 70px;
|
||||||
color: #fff;
|
bottom: 100px;
|
||||||
}
|
right: 70px;
|
||||||
|
overflow-x: auto;
|
||||||
.card-list{
|
.scorll {
|
||||||
position: absolute;
|
display: flex;
|
||||||
top: 0;
|
.card {
|
||||||
left: 0;
|
flex-shrink: 0;
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 120px 70px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
width: 190px;
|
width: 190px;
|
||||||
height: 260px;
|
height: 260px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
background-image: url('/static/img/breedScreen/item.webp');
|
background-image: url("/static/img/breedScreen/item.webp");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -210,92 +224,87 @@ const sendFn = (event, data = '') => {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.card-tit {
|
.card-tit {
|
||||||
color: #00D6DD;
|
color: #00d6dd;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-cotnet {
|
.card-cotnet {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
|
||||||
.login {
|
.login {
|
||||||
width: 170px;
|
width: 170px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 34px;
|
line-height: 34px;
|
||||||
background-image: url('/static/img/tradeScreen/DL.png');
|
background-image: url("/static/img/tradeScreen/DL.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cont::-webkit-scrollbar {
|
.card-list::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
background-color: #153041;
|
background-color: #153041;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cont::-webkit-scrollbar-track {
|
.card-list::-webkit-scrollbar-track {
|
||||||
background-color: #153041;
|
background-color: #153041;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background-color: #084D89;
|
background-color: #084d89;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-btn {
|
.back-btn {
|
||||||
width: 86.21px;
|
width: 86.21px;
|
||||||
height: 31px;
|
height: 31px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 70px;
|
top: 70px;
|
||||||
left: 60.96px;
|
left: 60.96px;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.area {
|
.area {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: white;
|
color: white;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 558px;
|
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-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 {
|
.area-bottom {
|
||||||
background-image: url('/static/img/tradeScreen/areaB.png');
|
background-image: url("/static/img/tradeScreen/areaB.png");
|
||||||
width: 558px;
|
width: 558px;
|
||||||
height: 57px;
|
height: 57px;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
transform: translateY(-20px);
|
transform: translateY(-20px);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Loading…
Reference in New Issue