feat: 车辆登记增加品牌和预算

src/components/Dialog/BrandDialog.vue

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

src/manifest.json

@@ -6,6 +6,7 @@
     "versionName" : "1.0.0",
     "versionCode" : 100,
     "transformPx" : false,
+    "usePrivacyCheck": true,
     /* 5+App特有相关 */
     "app-plus" : {
         "compatible" : {

src/pages.json

@@ -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": {

src/pagesVehicle/inquiry.vue

@@ -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("授权成功");

src/pagesVehicle/registration.vue

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

src/services/vehicle.ts

@@ -21,6 +21,16 @@ export const addRegis = (data: any) => {
 };
 
 
+export const getBrand = (data: any) => {
+  return http({
+    method: "GET",
+    url: "/api/v1/vehicleRegistration/getBrand",
+    data
+  });
+};
+
+
+