feat: 车辆登记增加品牌和预算
This commit is contained in:
admin
parent
b65ad37970
commit
04fbcd6449
|
|
@ -0,0 +1,268 @@
|
|||
<template>
|
||||
<u-popup :show="show" mode="right" :closeable="true" @close="handleClose">
|
||||
<view class="c-dialog-filter">
|
||||
<view class="title">品牌筛选</view>
|
||||
<view class="search">
|
||||
<u-search
|
||||
:placeholder="`请输入品牌搜索`"
|
||||
v-model="keyword"
|
||||
@search="handleSearch()"
|
||||
@clear="handleSearch()"
|
||||
></u-search>
|
||||
</view>
|
||||
<view class="dialog-product-layout">
|
||||
<!-- 自定义索引列表 -->
|
||||
<view class="address-book-container">
|
||||
<!-- 左侧通讯录 -->
|
||||
<scroll-view
|
||||
class="scroll-container"
|
||||
:scroll-y="true"
|
||||
:scroll-into-view="toView"
|
||||
:scroll-with-animation="true"
|
||||
>
|
||||
<view
|
||||
class="address-book"
|
||||
v-for="(item, index) in addressBook"
|
||||
:key="index"
|
||||
:id="item.name"
|
||||
>
|
||||
<view class="address-book-index">{{ item.name }}</view>
|
||||
<view
|
||||
class="contact-container"
|
||||
v-for="(cItem, index) in item.list"
|
||||
:key="index"
|
||||
>
|
||||
<!-- <img
|
||||
class="contact-img"
|
||||
src="http://www.lixia.gov.cn/picture/0/s_97b76c734a6f40f8abba95615cbff1e1.jpg"
|
||||
alt=""
|
||||
/> -->
|
||||
<view
|
||||
class="contact-detail-container"
|
||||
@click="handleClick(cItem)"
|
||||
>
|
||||
<view class="contact-name">{{ cItem.brandName }}</view>
|
||||
<view class="contact-address">
|
||||
<u-icon
|
||||
v-if="checkMap[cItem.id] && checkMap[cItem.id].check"
|
||||
name="checkbox-mark"
|
||||
></u-icon
|
||||
></view>
|
||||
<!-- <view class="contact-phone">{{ item.phone }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 右侧字母导航条 -->
|
||||
<view class="letter-nav">
|
||||
<view
|
||||
class="item"
|
||||
:class="{ active: toView === item }"
|
||||
v-for="(item, index) in indexList"
|
||||
:key="index"
|
||||
@click="toSelectIndex(item)"
|
||||
>{{ item }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-box-fix-btn">
|
||||
<view
|
||||
><u-button type="primary" shape="circle" @click="handleOk"
|
||||
>确定</u-button
|
||||
></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { VehicleApi } from "@/services";
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean;
|
||||
}>();
|
||||
const emit = defineEmits(["handleDialog", "handleChange"]);
|
||||
const handleClose = () => {
|
||||
emit("handleDialog", false);
|
||||
};
|
||||
|
||||
const keyword = ref("");
|
||||
|
||||
const checkMap = ref<any>({});
|
||||
|
||||
const indexList = [
|
||||
"A",
|
||||
"B",
|
||||
"C",
|
||||
"D",
|
||||
"E",
|
||||
"F",
|
||||
"G",
|
||||
"H",
|
||||
"I",
|
||||
"J",
|
||||
"K",
|
||||
"L",
|
||||
"M",
|
||||
"N",
|
||||
"O",
|
||||
"P",
|
||||
"Q",
|
||||
"R",
|
||||
"S",
|
||||
"T",
|
||||
"U",
|
||||
"V",
|
||||
"W",
|
||||
"X",
|
||||
"Y",
|
||||
"Z",
|
||||
"#",
|
||||
];
|
||||
const toView = ref("");
|
||||
const addressBook = ref<any>([
|
||||
// {
|
||||
// name: "A",
|
||||
// list: [
|
||||
// { id: 180, name: "a" },
|
||||
// { id: 181, name: "aa" },
|
||||
// ],
|
||||
// },
|
||||
]);
|
||||
// [
|
||||
// {
|
||||
// id: "A",
|
||||
// data: [
|
||||
// {
|
||||
// zh_title: "阿联酋迪拉姆",
|
||||
// en_title: "aa",
|
||||
// address: "910289591",
|
||||
// phone: "111111",
|
||||
// },
|
||||
// {
|
||||
// zh_title: "阿尔巴尼亚列克",
|
||||
// en_title: "aaaaa",
|
||||
// address: "ALL",
|
||||
// phone: "222222",
|
||||
// },
|
||||
// ],
|
||||
// }
|
||||
// ];
|
||||
|
||||
const toSelectIndex = (item: any) => {
|
||||
toView.value = item;
|
||||
};
|
||||
|
||||
const handleClick = (item: any) => {
|
||||
if (checkMap.value[item.id]) {
|
||||
checkMap.value[item.id].check = !checkMap.value[item.id].check;
|
||||
if (!checkMap.value[item.id].check) {
|
||||
delete checkMap.value[item.id];
|
||||
}
|
||||
} else {
|
||||
checkMap.value[item.id] = { ...item, check: true };
|
||||
}
|
||||
console.log(checkMap.value);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getList();
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
VehicleApi.getBrand({ name: keyword.value }).then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
addressBook.value = res.data.reduce((pre: any, curr: any) => {
|
||||
if (curr.list.length > 0) {
|
||||
pre.push(curr);
|
||||
}
|
||||
return pre;
|
||||
}, []);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
if (Object.values(checkMap.value).length <= 5) {
|
||||
emit("handleChange", Object.values(checkMap.value));
|
||||
emit("handleDialog", false);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '最多选择5个品牌',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.c-dialog-filter {
|
||||
width: 95vw;
|
||||
padding: 25rpx;
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
.search {
|
||||
margin: 30rpx 0px;
|
||||
}
|
||||
}
|
||||
.dialog-product-layout {
|
||||
height: 80vh;
|
||||
.address-book-container {
|
||||
height: 100%;
|
||||
}
|
||||
.address-book-index {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.contact-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.scroll-container {
|
||||
height: 100%;
|
||||
}
|
||||
.letter-nav {
|
||||
position: fixed;
|
||||
right: 25rpx;
|
||||
top: 100px;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
.item:hover,
|
||||
.active {
|
||||
color: $u-primary;
|
||||
}
|
||||
}
|
||||
.contact-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 2%;
|
||||
}
|
||||
.contact-detail-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
.contact-address {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box-fix-btn {
|
||||
justify-content: center;
|
||||
view {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
"versionName" : "1.0.0",
|
||||
"versionCode" : 100,
|
||||
"transformPx" : false,
|
||||
"usePrivacyCheck": true,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"compatible" : {
|
||||
|
|
|
|||
|
|
@ -124,7 +124,9 @@
|
|||
"permissions": {
|
||||
"scope.userLocation": true,
|
||||
"scope.userInfo": true,
|
||||
"scope.snsapi_base": true
|
||||
"scope.snsapi_base": true,
|
||||
"scope.album": true,
|
||||
"scope.CAMERA": true
|
||||
},
|
||||
"pageOrientation": "auto",
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -300,6 +300,18 @@ const handleSelect = (key: string, v: any) => {
|
|||
const handleUpload = () => {
|
||||
upload()
|
||||
// uni.authorize({
|
||||
// // #ifdef MP-TOUTIAO
|
||||
// scope: "scope.album, scope.writePhotosAlbum,scope.camera",
|
||||
// // #endif
|
||||
// success(res) {
|
||||
// console.log("检测权限通过", res);
|
||||
// },
|
||||
// fail(err) {
|
||||
// console.log("检测权限不通过", err);
|
||||
// uni.hideLoading();
|
||||
// },
|
||||
// });
|
||||
// uni.authorize({
|
||||
// scope: "scope.writePhotosAlbum",
|
||||
// success() {
|
||||
// console.log("授权成功");
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
:disabled="item.disabled"
|
||||
:disabledColor="'#ffffff'"
|
||||
:type="['contactInfo'].indexOf(item.key) > -1 ? 'number' : 'text'"
|
||||
|
||||
>
|
||||
<template #suffix>
|
||||
<text v-if="item.unit">
|
||||
|
|
@ -61,6 +60,37 @@
|
|||
<u-icon name="arrow-right" @click="item.fn"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<view class="title mt-30">我要选新车</view>
|
||||
|
||||
<u-form-item
|
||||
:prop="`formData.${item.key}`"
|
||||
:label="item.name"
|
||||
:required="item.required"
|
||||
v-for="(item, index) in formAttrList1"
|
||||
:key="index"
|
||||
@click="item.fn"
|
||||
>
|
||||
<u-input
|
||||
v-if="item.type === 'select'"
|
||||
:disabled="true"
|
||||
:disabledColor="'#ffffff'"
|
||||
v-model="(model1.formData as any)[item.key]"
|
||||
:placeholder="`请选择${item.name}`"
|
||||
clearable
|
||||
:customStyle="{}"
|
||||
border="none"
|
||||
>
|
||||
<template #suffix>
|
||||
<text v-if="item.unit">
|
||||
{{ item.unit }}
|
||||
</text>
|
||||
</template>
|
||||
</u-input>
|
||||
<template #right v-if="item.type === 'select'">
|
||||
<u-icon name="arrow-right" @click="item.fn"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</uni-card>
|
||||
|
||||
|
|
@ -72,7 +102,7 @@
|
|||
>
|
||||
</view>
|
||||
|
||||
<block v-for="(item, index) in formAttrList" :key="index">
|
||||
<block v-for="(item, index) in formAttrList.concat(formAttrList1)" :key="index">
|
||||
<u-action-sheet
|
||||
v-if="item.type === 'select' && item.childKey"
|
||||
:actions="contrlModalParams[item.childKey].list"
|
||||
|
|
@ -91,10 +121,19 @@
|
|||
@changeCarNo="changeCarNo"
|
||||
ref="carNoRef"
|
||||
></CarNoDialog>
|
||||
|
||||
<!-- 供应商选择弹框 -->
|
||||
<BrandDialog
|
||||
ref="BrandDialog"
|
||||
:show="showDialog.showBrand"
|
||||
@handleDialog="(v:boolean) => {handleDialog('showBrand', v)}"
|
||||
@handleChange="handleChange"
|
||||
></BrandDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CarNoDialog from "@/components/Dialog/CarNoDialog.vue";
|
||||
import BrandDialog from "@/components/Dialog/BrandDialog.vue";
|
||||
import { VehicleApi, UserApi } from "@/services";
|
||||
import pinia from "@/store";
|
||||
import { useMemberStore } from "@/store/index";
|
||||
|
|
@ -102,6 +141,7 @@ const store = useMemberStore(pinia);
|
|||
// 供应商选择
|
||||
const showDialog = <any>reactive({
|
||||
showCarNo: false,
|
||||
showBrand: false
|
||||
});
|
||||
const model1 = reactive<any>({
|
||||
formData: {},
|
||||
|
|
@ -133,7 +173,7 @@ const formAttrList = reactive<any>([
|
|||
unit: "",
|
||||
disabled: true,
|
||||
fn: () => {
|
||||
uni.hideKeyboard()
|
||||
uni.hideKeyboard();
|
||||
showDialog.showCarNo = true;
|
||||
},
|
||||
},
|
||||
|
|
@ -145,6 +185,31 @@ const formAttrList = reactive<any>([
|
|||
unit: "",
|
||||
},
|
||||
]);
|
||||
|
||||
const formAttrList1 = reactive<any>([
|
||||
{
|
||||
name: "选择品牌",
|
||||
key: "brandName",
|
||||
type: "select",
|
||||
required: false,
|
||||
unit: "",
|
||||
fn: () => {
|
||||
uni.hideKeyboard();
|
||||
showDialog.showBrand = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "预算范围",
|
||||
key: "budgetRange",
|
||||
type: "select",
|
||||
childKey: "budgetRange",
|
||||
required: false,
|
||||
unit: "",
|
||||
fn: () => {
|
||||
contrlModalParams["budgetRange"].isShow = true;
|
||||
},
|
||||
},
|
||||
]);
|
||||
const rules = reactive({
|
||||
"formData.ownerType": {
|
||||
type: "string",
|
||||
|
|
@ -178,12 +243,28 @@ const contrlModalParams = reactive<any>({
|
|||
title: "车辆所属",
|
||||
list: [{ name: "个人" }, { name: "单位" }],
|
||||
},
|
||||
budgetRange: {
|
||||
isShow: false,
|
||||
title: "预算范围",
|
||||
list: [
|
||||
{ name: "10万以下" },
|
||||
{ name: "10-15万" },
|
||||
{ name: "15-20万" },
|
||||
{ name: "20-25万" },
|
||||
{ name: "25-30万" },
|
||||
{ name: "30-40万" },
|
||||
{ name: "40-50万" },
|
||||
{ name: "50万以上" },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const handleSelect = (key: string, v: any) => {
|
||||
contrlModalParams[key].isShow = false;
|
||||
if (key === "ownerType") {
|
||||
model1.formData.ownerType = v.name;
|
||||
} else if(key === 'budgetRange') {
|
||||
model1.formData.budgetRange = v.name;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -254,6 +335,11 @@ const changeCarNo = (plate: string) => {
|
|||
if (plate.length >= 7) model1.formData.licensePlate = plate;
|
||||
showDialog.showCarNo = false;
|
||||
};
|
||||
|
||||
const handleChange = (arr: any) => {
|
||||
model1.formData.brandName = arr.map((item:any) => {return item.brandName}).toString()
|
||||
model1.formData.brandId = arr.map((item:any) => {return item.id}).toString()
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .uni-card__content {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,16 @@ export const addRegis = (data: any) => {
|
|||
};
|
||||
|
||||
|
||||
export const getBrand = (data: any) => {
|
||||
return http({
|
||||
method: "GET",
|
||||
url: "/api/v1/vehicleRegistration/getBrand",
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue