fix

src/components/BuildingMultipleSelect/index.jsx

@@ -0,0 +1,186 @@
+import Taro from "@tarojs/taro";
+import {
+  View,
+  Button,
+  CheckboxGroup,
+  Label,
+  Checkbox,
+} from "@tarojs/components";
+import { API_GET_AGENT_BUILDINGS, API_ITEMS_LIST } from "@/constants/api";
+import { ROLE_CODE } from "@/constants/user";
+import { useSelector } from "react-redux";
+import { fetch } from "@/utils/request";
+
+import { useState, useEffect, useMemo } from "react";
+import "./style.css";
+
+const wrapAnimate = "wrap wrapAnimate";
+const frameAnimate = "frame-wrapper";
+
+export default (props) => {
+  const { value, onChange, role } = props;
+
+  const city = useSelector((state) => state.city);
+  console.log(value, "==288888=");
+  const [dicts, setDicts] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  // const [val, setVal] = useState({ buildingName: '意向楼盘' })
+  // const [buildingTitle, setBuildingTitle] = useState({ buildingName: '意向楼盘' })
+  const [buildingList, setBuildingList] = useState([]);
+
+  const buildingProp = useMemo(
+    () =>
+      (dicts || []).filter((x) => value?.find((y) => y === x.buildingId)) || [],
+    [value, dicts]
+  );
+  console.log(buildingProp, value, "buildingProp");
+  useEffect(() => {
+    setBuildingList(buildingProp);
+  }, [buildingProp]);
+
+  useEffect(() => {
+    setLoading(true);
+
+    if (
+      role !== ROLE_CODE.CUSTOMER &&
+      role !== ROLE_CODE.DRIFT &&
+      role !== ROLE_CODE.CONSULTANT &&
+      role !== ROLE_CODE.BROKER
+    ) {
+      fetch({ url: API_GET_AGENT_BUILDINGS })
+        .then((res) => {
+          setDicts(res || []);
+          setLoading(false);
+        })
+        .catch(() => setLoading(false));
+    } else {
+      fetch({
+        url: API_ITEMS_LIST,
+        payload: {
+          pageNumber: 1,
+          pageSize: 1000,
+          cityId: city.curCity.id,
+          isBroker: role === ROLE_CODE.BROKER,
+        },
+      })
+        .then((res) => {
+          setDicts(res.records);
+          setLoading(false);
+        })
+        .catch(() => setLoading(false));
+    }
+  }, [city.curCity.id, role]);
+
+  const handleSelect = (e) => {
+    console.log(e.detail.value);
+    // const buildingId = e.detail.value;
+    const building = dicts.filter((x) =>
+      e.detail.value?.find((y) => y === x.buildingId)
+    );
+
+    setBuildingList(building);
+  };
+  const handleSubmit = (e) => {
+    e.stopPropagation();
+    setVisible(false);
+
+    onChange(
+      buildingList.map((x) => x.buildingId),
+      buildingList
+    );
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+    setBuildingList((dicts || []).filter((x) => value?.find((y) => y === x.buildingId)) || []);
+    
+  };
+
+  return (
+    <view>
+      {visible ? (
+        <>
+          <view onClick={handleCancel} className={wrapAnimate}></view>
+          <view className={frameAnimate} catchMove>
+            <view className="frame">
+              {/* 标题  */}
+              <view className="title-wrapper">
+                <view>请选择</view>
+              </view>
+              {/* 内容 */}
+              <view style="overflow-x: hidden;">
+                <View className="page-section">
+                  <View className="radio-list">
+                    <scroll-view
+                      scrollY
+                      style={{ height: "40vh", overflow: "hidden" }}
+                      catchMove
+                    >
+                      {loading && "加载中..."}
+                      {!loading && (
+                        <CheckboxGroup
+                          className="radio-list__RadioGroup"
+                          onChange={handleSelect}
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {dicts.map((item, i) => {
+                            return (
+                              <Label
+                                catchMove
+                                className="radio-list__label"
+                                for={`rdo-${i}`}
+                                key={i}
+                              >
+                                <view className="radio-list__text">
+                                  {item.buildingName}
+                                </view>
+
+                                <Checkbox
+                                  id={`rdo-${i}`}
+                                  catchMove
+                                  className="radio-list__radio"
+                                  value={item.buildingId}
+                                  checked={
+                                    !!buildingList.find((x) => item === x)
+                                  }
+                                ></Checkbox>
+                              </Label>
+                            );
+                          })}
+                        </CheckboxGroup>
+                      )}
+                    </scroll-view>
+                  </View>
+                </View>
+
+                {/* <view className='bottom-text' onClick={handleTextNext}> */}
+                <view style={{ display: "flex", margin: "2em auto" }}>
+                  <Button className="checkBtn" onClick={handleCancel}>
+                    取消
+                  </Button>
+                  <Button
+                    className="okBtn"
+                    // disabled={!current.buildingId}
+                    onClick={handleSubmit}
+                  >
+                    
+                    确定
+                  </Button>
+                </view>
+                {/* <view className='Btn'>
+                    <Button onClick={handleCancel} >取消</Button>
+                    <Button disabled={!val.buildingId} onClick={handleSubmit}>确定</Button>
+                  </view> */}
+              </view>
+            </view>
+          </view>
+        </>
+      ) : (
+        <View onClick={() => setVisible(true)}>
+          {buildingList?.length>0? buildingList?.map((x,index) => index===0? x.buildingName:`、${x.buildingName}`) : "请选择"}
+        </View>
+      )}
+    </view>
+  );
+};

src/components/BuildingMultipleSelect/style.css

@@ -0,0 +1,123 @@
+.wrapAnimate {
+  animation: wrapAnimate 0.2s ease forwards;
+}
+@keyframes wrapAnimate {
+  0% {
+  }
+  100% {
+    background: rgba(0, 0, 0, 0.35);
+  }
+}
+
+.frame-wrapper {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  z-index: 80;
+  top: 0;
+  left: 0;
+}
+.frame {
+  background: #fff;
+  position: absolute;
+
+  bottom: 0;
+  width: 100%;
+  padding: 2.9vw 2.9vw 0;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  z-index: 85;
+  box-sizing: border-box;
+  align-items: center;
+  text-align: center;
+}
+
+.page-section {
+  padding-top: 1em;
+}
+.title-wrapper {
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  text-align: center;
+  /* height: 28rpx; */
+  font-size: 35px;
+  font-weight: 700;
+  color: #202020;
+  /* margin-bottom: 5.9vw; */
+  /* margin: 1.5em auto; */
+  line-height: 80px;
+  padding-bottom: 2.9vw;
+
+  border-bottom: 1px solid rgba(99, 99, 99, 0.2);
+}
+.title-wrapper > image {
+  width: 3.5vw;
+  height: 3.5vw;
+  padding: 0 5vw;
+  margin-right: -5vw;
+}
+
+.wrap {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.checkBtn {
+  display: inline-block;
+
+  width: 35%;
+  text-align: center;
+  font-size: 32px;
+  line-height: 92px;
+  background: #ffff;
+  color: #193c83;
+  font-weight: bold;
+  border-radius: 92px;
+  border: #193c83 1px solid;
+}
+
+.okBtn {
+  width: 35%;
+  text-align: center;
+  font-size: 32px;
+  line-height: 92px;
+  background: #193c83;
+  color: #fff;
+  font-weight: bold;
+  border-radius: 92px;
+}
+.radio-list__label {
+  display: flex;
+  align-items: center;
+  margin: 1.5em auto;
+}
+.Btn {
+  padding: 40px;
+  position: relative;
+  overflow: hidden;
+}
+button {
+  /* display: block; */
+  text-align: center;
+  font-size: 32px;
+  line-height: 92px;
+  background: #193c83;
+  color: #fff;
+  font-weight: bold;
+  border-radius: 92px;
+}
+.radio-list__radio {
+  display: flex;
+}
+.radio-list__text {
+  width: 100%;
+  align-items: center;
+  color: #000;
+  position: relative;
+  left: 24px;
+}

src/pages/mine/addCustomer/index.jsx

@@ -1,196 +1,318 @@
-import { useState, useEffect } from 'react'
-import withLayout from '@/layout'
-import { ScrollView, Input, Image, Block, View, Button } from '@tarojs/components'
-import '@/assets/css/iconfont.css'
-import { fetch } from '@/utils/request'
-import BuildingSelect from '@/components/BuildingSelect'
-
-import { API_USER_ADD_CUSTOMER, API_CHANNEL_REPORT } from '@/constants/api'
-import { ROLE_CODE } from '@/constants/user'
-import Taro from '@tarojs/taro'
-import Picker from '@/components/Picker'
+import { useState, useEffect } from "react";
+import withLayout from "@/layout";
+import {
+  ScrollView,
+  Input,
+  Image,
+  Block,
+  View,
+  Button,
+} from "@tarojs/components";
+import "@/assets/css/iconfont.css";
+import { fetch } from "@/utils/request";
+import BuildingSelect from "@/components/BuildingSelect";
+import BuildingMultipleSelect from "@/components/BuildingMultipleSelect";
+import { API_USER_ADD_CUSTOMER, API_CHANNEL_REPORT } from "@/constants/api";
+import { ROLE_CODE } from "@/constants/user";
+import Taro from "@tarojs/taro";
+import Picker from "@/components/Picker";
 // import BuildingPicker from './components/BuildingPicker'
-import ConsultantPicker from './components/ConsultantPicker'
+import ConsultantPicker from "./components/ConsultantPicker";
 
-import './index.scss'
+import "./index.scss";
 
-
-const defaultSpecialImage = 'https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon19.jpg'
+const defaultSpecialImage =
+  "https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon19.jpg";
 
 const sexDicts = [
-  { name: '男', id: '1' },
-  { name: '女', id: '2' },
-]
+  { name: "男", id: "1" },
+  { name: "女", id: "2" },
+];
 
 export default withLayout((props) => {
-  const { router, person } = props
-  const { personId, personType } = person
-  const { buildingId: originBuiding } = router.params
-
-  const [loading, setLoading] = useState(false)
-  const [buildingId, setBuildingId] = useState(null)
-  const [CardId, setCardId] = useState(null)
-  const [SexId, setSexId] = useState(null)
+  const { router, person } = props;
+  const { personId, personType } = person;
+  const { buildingId: originBuiding } = router.params;
+
+  const [loading, setLoading] = useState(false);
+  const [buildingId, setBuildingId] = useState(null);
+  const [buildingIdList, setBuildingIdList] = useState([]);
+  const [CardId, setCardId] = useState(null);
+  const [SexId, setSexId] = useState(null);
   const [FormData, setFormData] = useState({
-    name: '', // 姓名
-    phone: '', // 电话
-    sex: '', // 性别
-    intention: '', // 意向楼盘
-    realtyConsultant: '', // 置业顾问
-    remark: '', // 描述
-  })
+    name: "", // 姓名
+    phone: "", // 电话
+    sex: "", // 性别
+    intention: "", // 意向楼盘
+    realtyConsultant: "", // 置业顾问
+    remark: "", // 描述
+  });
 
   useEffect(() => {
-    console.log('------originBuiding------>', originBuiding)
+    console.log("------originBuiding------>", originBuiding);
     if (originBuiding) {
-      setBuildingId(originBuiding)
+      if (personType === ROLE_CODE.BROKER) {
+        setBuildingIdList([originBuiding]);
+      } else {
+        setBuildingId(originBuiding);
+      }
     }
-  }, [originBuiding])
+  }, [originBuiding]);
 
   const preSubmit = (payload) => {
-    if (payload.name === '') {
-      Taro.showToast({ title: '请填写客户姓名', icon: 'none' })
-      return false
+    if (payload.name === "") {
+      Taro.showToast({ title: "请填写客户姓名", icon: "none" });
+      return false;
     }
     if (SexId === null) {
-      Taro.showToast({ title: '请选择客户性别', icon: 'none' })
-      return false
-    }
-    if (payload.phone === '') {
-      Taro.showToast({ title: '请填写客户电话', icon: 'none' })
-      return false
+      Taro.showToast({ title: "请选择客户性别", icon: "none" });
+      return false;
     }
-    if (!(/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(payload.phone)) || payload.phone.length != 11) {
-      Taro.showToast({ title: '请填写正确的客户电话', icon: 'none' })
-      return false
+    if (payload.phone === "") {
+      Taro.showToast({ title: "请填写客户电话", icon: "none" });
+      return false;
     }
-    if (buildingId === null) {
-      Taro.showToast({ title: '请选择客户的意向楼盘', icon: 'none' })
-      return false
+    if (
+      !/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(payload.phone) ||
+      payload.phone.length != 11
+    ) {
+      Taro.showToast({ title: "请填写正确的客户电话", icon: "none" });
+      return false;
     }
-    if (buildingId === null && personType !== ROLE_CODE.CUSTOMER) {
-      Taro.showToast({ title: '请选择客户的意向楼盘', icon: 'none' })
-      return false
+    if (personType === ROLE_CODE.BROKER) {
+      if (buildingIdList?.length == 0) {
+        Taro.showToast({ title: "请选择客户的意向楼盘", icon: "none" });
+        return false;
+      }
+    } else {
+      if (buildingId === null) {
+        Taro.showToast({ title: "请选择客户的意向楼盘", icon: "none" });
+        return false;
+      }
+      if (buildingId === null && personType !== ROLE_CODE.CUSTOMER) {
+        Taro.showToast({ title: "请选择客户的意向楼盘", icon: "none" });
+        return false;
+      }
     }
 
-    return true
-  }
+    return true;
+  };
+  // return new Promise((resovle, reject) => {
+  //   Taro.showLoading()
+  //   queryChatHistory({
+  //     chatWith: friend,
+  //     pageSize: 20,
+  //     ...params || {},
+  //   }).then((res) => {
+  //     const { records } = res;
+  //     Taro.hideLoading()
+
+  //     const lst = (records || []).reverse()
+  //     resovle(lst)
+  //   }).catch(() => {
+  //     Taro.hideLoading()
+  //   })
+  // })
+  const submitFetch = (url, payload) => {
+
+    return new Promise((resovle, reject) => {
 
-  const onSubmit = () => {
+      fetch({ url, method: "post", payload })
+        .then(() => {
+          console.log("success");
+          resovle("success");
+
+        })
+        .catch(() => {
+         
+          reject("fail");
+
+        });
+    });
+  };
+  const onSubmit = async () => {
     const payload = {
       ...FormData,
       sex: SexId,
-      buildingId,
-      realtyConsultant: CardId
+      realtyConsultant: CardId,
     };
 
     if (!preSubmit(payload)) {
       return;
     }
 
-    setLoading(true)
-    let url = null
-    if (personType === ROLE_CODE.CONSULTANT || personType === ROLE_CODE.CUSTOMER || personType === ROLE_CODE.BROKER) {
+    setLoading(true);
+    let url = null;
+    if (
+      personType === ROLE_CODE.CONSULTANT ||
+      personType === ROLE_CODE.CUSTOMER ||
+      personType === ROLE_CODE.BROKER
+    ) {
       // url = API_REPORT_CUETOMER
-      url = API_USER_ADD_CUSTOMER
+      url = API_USER_ADD_CUSTOMER;
     } else if (personType === ROLE_CODE.CHANNEL_AGENT) {
-      url = API_CHANNEL_REPORT
+      url = API_CHANNEL_REPORT;
     } else if (personType === ROLE_CODE.CUSTOMER) {
       // url = API_USER_ADD_CUSTOMER
     }
-    fetch({ url, method: 'post', payload }).then(() => {
-      setLoading(false)
-      Taro.showToast({ title: '操作成功', icon: 'none' })
-
-      const t = setTimeout(() => {
-        Taro.navigateBack({ delta: 1 })
-        clearTimeout(t)
-      }, 1500)
-    }).catch(() => {
-      setLoading(false)
-    })
-  }
 
-  const FormInput = (e) => {
-    let Data = { ...FormData }
-    Data[e.currentTarget.dataset.type] = e.detail.value
-    setFormData(Data)
-  }
+    if (personType === ROLE_CODE.BROKER) {
+      Promise.all(
+        buildingIdList.map((x) => {
+          return submitFetch(url, { ...payload, buildingId: x });
+        })
+      )
+        .then((res) => {
+          setLoading(false);
+          Taro.showToast({ title: "操作成功", icon: "none" });
 
-  const handleBuildingSelect = (bid, building) => {
-    console.log("🚀 ~ file: index.jsx ~ line 121 ~ handleBuildingSelect ~ building", building)
-    setBuildingId(bid)
-    // setBuildingId(building.buildingId)
-  }
-console.log(personType === ROLE_CODE.CONSULTANT || ROLE_CODE.CUSTOMER,'===')
-  return (
-    <view className='Page addCustomer'>
+          const t = setTimeout(() => {
+            Taro.navigateBack({ delta: 1 });
+            clearTimeout(t);
+          }, 1500);
+        })
+        .catch(() => {
+          setLoading(false);
+        });
+    } else {
+      try {
+        const res = await submitFetch(url, { ...payload, buildingId });
+        setLoading(false);
+        Taro.showToast({ title: "操作成功", icon: "none" });
 
+        const t = setTimeout(() => {
+          Taro.navigateBack({ delta: 1 });
+          clearTimeout(t);
+        }, 1500);
+      } catch (error) {
+        setLoading(false);
+      }
+    }
+  };
+
+  const FormInput = (e) => {
+    let Data = { ...FormData };
+    Data[e.currentTarget.dataset.type] = e.detail.value;
+    setFormData(Data);
+  };
 
-      <ScrollView scroll-y refresher-enabled={false} refresher-background='#fff'>
-        <view className='PageContent'>
+  const handleBuildingSelect = (bid, building) => {
+    console.log(
+      "🚀 ~ file: index.jsx ~ line 121 ~ handleBuildingSelect ~ building",
+      building
+    );
+    if (personType === ROLE_CODE.BROKER) {
+      setBuildingIdList(bid);
+    } else {
+      setBuildingId(bid);
+    }
+  };
 
+  return (
+    <view className="Page addCustomer">
+      <ScrollView
+        scroll-y
+        refresher-enabled={false}
+        refresher-background="#fff"
+      >
+        <view className="PageContent">
           <text>客户姓名</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
-              <Input placeholder='请输入客户真实姓名' data-type='name' onInput={FormInput.bind(this)}></Input>
+          <view className="FormLine flex-h">
+            <view className="flex-item">
+              <Input
+                placeholder="请输入客户真实姓名"
+                data-type="name"
+                onInput={FormInput.bind(this)}
+              ></Input>
             </view>
           </view>
 
           <text>客户电话</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
-              <Input placeholder='请输入手机号' data-type='phone' onInput={FormInput.bind(this)}></Input>
+          <view className="FormLine flex-h">
+            <view className="flex-item">
+              <Input
+                placeholder="请输入手机号"
+                data-type="phone"
+                onInput={FormInput.bind(this)}
+              ></Input>
             </view>
           </view>
 
           <text>性别</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
-              <Picker kv={['name', 'id']} dicts={sexDicts} onChange={setSexId} value={SexId} />
+          <view className="FormLine flex-h">
+            <view className="flex-item">
+              <Picker
+                kv={["name", "id"]}
+                dicts={sexDicts}
+                onChange={setSexId}
+                value={SexId}
+              />
             </view>
             {/* <text className='iconfont icon-jiantoudown'></text> */}
           </view>
 
           <text>意向楼盘</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
+          <view className="FormLine flex-h">
+            <view className="flex-item">
               {/* <BuildingPicker change={BuildingChange} value={buildingId} type={personType} /> */}
               {/* <View onClick={() => setShowFrame(true)} >{buildingName}</View> */}
-              <BuildingSelect value={buildingId} onChange={handleBuildingSelect} role={personType} />
+              {personType === ROLE_CODE.BROKER ? (
+                <BuildingMultipleSelect
+                  value={buildingIdList}
+                  onChange={handleBuildingSelect}
+                  role={personType}
+                />
+              ) : (
+                <BuildingSelect
+                  value={buildingId}
+                  onChange={handleBuildingSelect}
+                  role={personType}
+                />
+              )}
             </view>
           </view>
 
-          {
-            personType === ROLE_CODE.CONSULTANT || ROLE_CODE.CUSTOMER ?
-              <Block>
-                <text>内场接待（选填）</text>
-                <view className='FormLine flex-h'>
-                  <view className='flex-item'>
-                    <ConsultantPicker onChange={setCardId} value={CardId} buildingId={buildingId} />
+          {personType === ROLE_CODE.CONSULTANT || ROLE_CODE.CUSTOMER ? (
+            <Block>
+              {
+               personType !== ROLE_CODE.BROKER&& <>
+                  <text>内场接待（选填）</text>
+                  <view className="FormLine flex-h">
+                    <view className="flex-item">
+                      <ConsultantPicker
+                        onChange={setCardId}
+                        value={CardId}
+                        buildingId={buildingId}
+                      />
+                    </view>
                   </view>
-                  {/* <Image mode='heightFix' src={defaultSpecialImage}></Image>
-                <text>选择</text> */}
-                </view>
+                </>
+              }
 
-                <text>备注</text>
-                <view className='FormLine flex-h'>
-                  <view className='flex-item'>
-                    {
-                      //解决事件穿透
-                      <Input placeholder='补充说明（选填）' dataType='remark' onInput={FormInput.bind(this)}></Input>
-                    }
-                  </view>
+              <text>备注</text>
+              <view className="FormLine flex-h">
+                <view className="flex-item">
+                  {
+                    //解决事件穿透
+                    <Input
+                      placeholder="补充说明（选填）"
+                      dataType="remark"
+                      onInput={FormInput.bind(this)}
+                    ></Input>
+                  }
                 </view>
-              </Block> : ''
-          }
-          <view className='Btn'>
-            <Button loading={loading} onClick={onSubmit}>提交</Button>
+              </view>
+            </Block>
+          ) : (
+            ""
+          )}
+          <view className="Btn">
+            <Button loading={loading} onClick={onSubmit}>
+              提交
+            </Button>
           </view>
-
         </view>
       </ScrollView>
-
     </view>
-  )
-})
+  );
+});