This commit is contained in:
weipengfei 2024-02-24 14:47:49 +08:00
parent 7e5b2a5e19
commit 14d7b60982
4 changed files with 235 additions and 218 deletions

View File

@ -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;

View File

@ -16,15 +16,23 @@
<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"
@click="router.go(-1)"
class="back-btn"
alt=""
/>
<div class="cont" v-if="flag"> <div class="cont" v-if="flag">
<div class="title">三轮车配送</div> <div class="title">三轮车配送</div>
<div class="card-list"> <div class="card-list">
<div class="card" v-for="(item, index) in vehicleList" :key="index" @click="sendFn('c_car_index', item)"> <div class="scorll">
<div class="card-tit"> <div
class="card"
</div> v-for="(item, index) in vehicleList"
:key="index"
@click="sendFn('c_car_index', item)"
>
<div class="card-tit"></div>
<div class="card-cotnet"> <div class="card-cotnet">
<div>{{ item.courier_name }}</div> <div>{{ item.courier_name }}</div>
<div>{{ item.license }}</div> <div>{{ item.license }}</div>
@ -33,134 +41,141 @@
</div> </div>
</div> </div>
</div> </div>
<areaChose v-else channel="user-logistics-datav" @handTown="handTown" @handArea="handArea"></areaChose> </div>
<areaChose
v-else
channel="user-logistics-datav"
@handTown="handTown"
@handArea="handArea"
></areaChose>
<div class="area" @click="flag = !flag"> <div class="area" @click="flag = !flag">
<div class="area-top"> <div class="area-top">
<div class="town">{{ chooseInfo.area.name || '未选择' }}</div> <div class="town">{{ chooseInfo.area.name || "未选择" }}</div>
<div class="town">{{ chooseInfo.town.name || '未选择' }}</div> <div class="town">{{ chooseInfo.town.name || "未选择" }}</div>
</div> </div>
<div class="area-bottom"></div> <div class="area-bottom"></div>
</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
.get(
`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${chooseInfo.value.area.code}`
)
.then(function (res) { .then(function (res) {
res.data.data.forEach(item => { res.data.data.forEach((item) => {
townOptions.push({ townOptions.push({
value: item.code, value: item.code,
label: item.name 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 {
@ -174,31 +189,30 @@ const sendFn = (event, data = '') => {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
overflow-y: auto; background-image: url("/static/img/breedScreen/vebg.webp");
background-image: url('/static/img/breedScreen/vebg.webp');
.title{ .title {
position: absolute; position: absolute;
left: 80px; left: 80px;
top: 14%; top: 14%;
color: #fff; color: #fff;
} }
.card-list{ .card-list {
position: absolute; position: absolute;
top: 0; top: 110px;
left: 0; left: 70px;
bottom: 0; bottom: 100px;
right: 0; right: 70px;
padding: 120px 70px; overflow-x: auto;
.scorll {
} display: flex;
.card { .card {
flex-shrink: 0;
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,7 +224,7 @@ 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;
@ -225,7 +239,7 @@ const sendFn = (event, data = '') => {
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;
@ -234,24 +248,22 @@ const sendFn = (event, data = '') => {
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;
} }
@ -262,7 +274,6 @@ const sendFn = (event, data = '') => {
top: 70px; top: 70px;
left: 60.96px; left: 60.96px;
z-index: 9; z-index: 9;
} }
.area { .area {
@ -279,20 +290,18 @@ const sendFn = (event, data = '') => {
justify-content: space-around; justify-content: space-around;
.town { .town {
background-image: url('/static/img/tradeScreen/areaA.png'); background-image: url("/static/img/tradeScreen/areaA.png");
background-size: 100% 100%; background-size: 100% 100%;
width: 160.12px; width: 160.12px;
height: 30.94px; height: 30.94px;
text-align: center; text-align: center;
line-height: 10px; 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%;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB