edit.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
  1. <template>
  2. <div class="edityy">
  3. <div
  4. style="width: 100%; height: 0rpx; position: relative; background: white"
  5. >
  6. <div class="status qd">待签到</div>
  7. <!-- <div class="status rz">待入厂</div>
  8. <div class="status zx">装卸中</div>
  9. <div class="status wc">已完成</div>
  10. <div class="status gq">已过期</div>
  11. <div class="status qx">已取消</div> -->
  12. </div>
  13. <div class="form bd_bottom">
  14. <div class="form-label">
  15. <span class="form-requird">*</span>
  16. <span>供应商</span>
  17. </div>
  18. <div @click="oepnGysPopup()">
  19. {{ form.gysName ? form.gysName : "请选择" }}
  20. </div>
  21. </div>
  22. <div class="form bd_bottom pdt32 pdb32" style="display: block">
  23. <div class="form-label">
  24. <span class="form-requird">*</span>
  25. <span>车牌号</span>
  26. </div>
  27. <div>
  28. <car-number ref="carNum" v-model="carNumber"></car-number>
  29. </div>
  30. <div class="historyList">
  31. <div
  32. class="historyList-item mt32"
  33. v-for="item in carNumberList"
  34. :key="item"
  35. @click="selectCarNumber(item)"
  36. >
  37. <div>{{ item }}</div>
  38. <div class="btn">
  39. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="form bd_bottom">
  45. <div class="form-label">
  46. <span class="form-requird">*</span>
  47. <span>车辆类型</span>
  48. </div>
  49. <div class="form-value">
  50. <picker
  51. @change="selectCarType"
  52. :value="index"
  53. :range="dockCarTypeList"
  54. range-key="label"
  55. >
  56. <!-- <view class="uni-input">{{ array[index] }}</view> -->
  57. {{ form.carType ? form.carType : "请选择" }}
  58. </picker>
  59. </div>
  60. <van-icon name="arrow" />
  61. </div>
  62. <div class="form bd_bottom" style="display: block">
  63. <div style="display: flex">
  64. <div class="form-label">
  65. <span class="form-requird">*</span>
  66. <span>司机姓名</span>
  67. </div>
  68. <div class="form-value">
  69. <input
  70. type="text"
  71. readonly
  72. placeholder="请选择"
  73. v-model="form.driverName"
  74. />
  75. </div>
  76. </div>
  77. <div class="historyList">
  78. <div
  79. class="historyList-item mt32"
  80. v-for="item in nameList"
  81. @click="selectName(item)"
  82. >
  83. <div>{{ item }}</div>
  84. <div class="btn">
  85. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. <div class="form bd_bottom" style="display: block">
  91. <div style="display: flex; align-items: center">
  92. <div class="form-label">
  93. <span class="form-requird">*</span>
  94. <span>手机号/账号</span>
  95. </div>
  96. <div class="form-value">
  97. <input
  98. type="text"
  99. readonly
  100. placeholder="请选择"
  101. v-model="form.driverUsername"
  102. />
  103. </div>
  104. </div>
  105. <!-- <div class="historyList">
  106. <div class="historyList-item mt32">
  107. <div>13921516068</div>
  108. <div class="btn">
  109. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  110. </div>
  111. </div>
  112. <div class="historyList-item mt32">
  113. <div>13921516068</div>
  114. <div class="btn">
  115. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  116. </div>
  117. </div>
  118. <div class="historyList-item mt32">
  119. <div>13921516068</div>
  120. <div class="btn">
  121. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  122. </div>
  123. </div>
  124. <div class="historyList-item mt32">
  125. <div>13921516068</div>
  126. <div class="btn">
  127. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  128. </div>
  129. </div>
  130. </div> -->
  131. </div>
  132. <div class="form bd_bottom" style="display: block">
  133. <div style="display: flex">
  134. <div class="form-label">
  135. <span class="form-requird">*</span>
  136. <span>联系电话</span>
  137. </div>
  138. <div class="form-value">
  139. <input
  140. type="text"
  141. readonly
  142. placeholder="请选择"
  143. v-model="form.driverContactPhone"
  144. />
  145. </div>
  146. </div>
  147. <div class="historyList">
  148. <div
  149. @click="selectDriverContactPhone(item)"
  150. class="historyList-item mt32"
  151. v-for="item in telList"
  152. >
  153. <div>{{ item }}</div>
  154. <div class="btn">
  155. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. <div class="form bd_bottom mt32">
  161. <div class="form-label">
  162. <span class="form-requird">*</span>
  163. <span>装卸类型:</span>
  164. </div>
  165. <div>
  166. {{ form.loadType }}
  167. </div>
  168. </div>
  169. <div class="form bd_bottom">
  170. <div class="form-label">
  171. <span class="form-requird">*</span>
  172. <span>件数/托盘数:</span>
  173. </div>
  174. <div>
  175. <input type="text" placeholder="请输入" v-model="form.loadNum" />
  176. </div>
  177. </div>
  178. <div class="form bd_bottom" v-if="mtId">
  179. <div class="form-label">
  180. <span class="form-requird">*</span>
  181. <span>预约日期:</span>
  182. </div>
  183. <div class="uni-input">
  184. <picker @change="selectYYDate" :value="index" :range="yydateList">
  185. <!-- <view class="uni-input">{{ array[index] }}</view> -->
  186. {{ form.reservationDate ? form.reservationDate : "请选择" }}
  187. </picker>
  188. <!-- {{form.reservationDate?form.reservationDate:''}} -->
  189. </div>
  190. <van-icon name="arrow" />
  191. </div>
  192. <div class="bottom-form mt32">
  193. <div class="mt-select">
  194. <div
  195. class="select-item"
  196. :style="{
  197. background: item.value == mtId ? '#8A0554' : '#f5f7fa',
  198. color: item.value == mtId ? 'white' : 'black',
  199. }"
  200. v-for="item in mtList"
  201. @click="getMtId(item)"
  202. :key="item.value"
  203. >
  204. {{ item.label }}
  205. </div>
  206. </div>
  207. <div class="sj-select-title">
  208. <div class="sj-label">
  209. <span style="color: red">*</span>
  210. 可选时间
  211. </div>
  212. <div class="legend">
  213. <div class="white-legend"></div>
  214. <div>可选</div>
  215. </div>
  216. <div class="legend">
  217. <div class="purple-legend"></div>
  218. <div>已占用</div>
  219. </div>
  220. </div>
  221. <div class="sj-select">
  222. <div
  223. :class="
  224. item.statusStr == '已预约'
  225. ? 'select-item yyyStatus'
  226. : 'select-item '
  227. "
  228. :key="item.timeEnd"
  229. @click="timeSelect(item)"
  230. v-for="item in kxTimeList"
  231. >
  232. {{ item.timeStart }}~{{ item.timeEnd }}
  233. <van-icon
  234. name="success"
  235. v-if="
  236. form.dockSettingDetailId == item.dockSettingDetailId &&
  237. form.dockSettingId == item.dockSettingId &&
  238. form.timeEnd == item.timeEnd &&
  239. form.timeStart == item.timeStart
  240. "
  241. />
  242. </div>
  243. </div>
  244. <div class="foot-btn">
  245. <van-button color="rgba(0, 0, 0, 0.05)" type="default" class="cancel">
  246. 取消
  247. </van-button>
  248. <van-button
  249. color="rgba(138, 5, 84, 1)"
  250. type="primary"
  251. @click="updateReservation()"
  252. >
  253. 提交
  254. </van-button>
  255. </div>
  256. <van-popup :show="gysPopupStatus" position="bottom" bind:close="onClose">
  257. <div style="text-align: right">
  258. <van-icon @click="closeGysPopup(null)" name="cross" />
  259. </div>
  260. <div class="popupListBox">
  261. <div v-for="item in gysList" class="popupListBox-row">
  262. <div>{{ item.label }}</div>
  263. <van-button size="mini" type="primary" @click="closeGysPopup(item)">
  264. 选择
  265. </van-button>
  266. </div>
  267. </div>
  268. </van-popup>
  269. </div>
  270. </div>
  271. </template>
  272. <script>
  273. import CarNumber from "@/components/codecook-carnumber/codecook-carnumber.vue";
  274. import {
  275. getDockCarType,
  276. getCarNoByBizAndUser,
  277. getBizByUsername,
  278. getHistoryDriverNameByUserId,
  279. getDockSelectList,
  280. getDockLoadType,
  281. getAvailableDateList,
  282. getDockTimeList,
  283. updateReservation,
  284. getHistoryContactPhoneByUserId,
  285. } from "@/js_sdk/chooseCarApi.js";
  286. import { getReservationVoById } from "@/js_sdk/sjTools.js";
  287. import { getUserLocalStorageInfo } from "@/js_sdk/localUserInfo.js";
  288. export default {
  289. data() {
  290. return {
  291. gysPopupStatus: false,
  292. formData: {},
  293. carNumber: "",
  294. gysList: [],
  295. form: {},
  296. carNumberList: [],
  297. dockCarTypeList: [],
  298. mtList: [],
  299. yydateList: [],
  300. mtId: "",
  301. kxTimeList: [],
  302. nameList: [],
  303. telList: [],
  304. checkTimeData: {},
  305. };
  306. },
  307. components: {
  308. CarNumber,
  309. },
  310. onLoad(e) {
  311. console.log(e);
  312. this.getReservationVoById(e.id);
  313. this.getHistoryDriverNameByUserId();
  314. this.getBizByUsername();
  315. this.getDockCarType();
  316. this.getHistoryContactPhoneByUserId();
  317. },
  318. methods: {
  319. timeSelect(item) {
  320. console.log(item);
  321. console.log(item.dockId);
  322. console.log(this.checkTimeData.dockId);
  323. console.log(
  324. item.statusStr == "已预约" &&
  325. item.dockSettingDetailId != this.checkTimeData.dockSettingDetailId &&
  326. item.dockSettingId != this.checkTimeData.dockSettingId &&
  327. item.timeEnd != this.checkTimeData.timeEnd &&
  328. item.timeStart != this.checkTimeData.timeStart &&
  329. item.dockId != this.checkTimeData.dockId
  330. );
  331. if (item.statusStr == "已预约") {
  332. if (
  333. item.dockSettingDetailId == this.checkTimeData.dockSettingDetailId &&
  334. item.dockSettingId == this.checkTimeData.dockSettingId &&
  335. item.timeEnd == this.checkTimeData.timeEnd &&
  336. item.timeStart == this.checkTimeData.timeStart &&
  337. item.dockId == this.checkTimeData.dockId
  338. ) {
  339. } else {
  340. this.$showToast("该时段已被预约,请重新选择");
  341. return;
  342. }
  343. }
  344. console.log(item);
  345. this.form.dockSettingDetailId = item.dockSettingDetailId;
  346. this.form.dockSettingId = item.dockSettingId;
  347. this.form.timeEnd = item.timeEnd;
  348. this.form.dockId = item.dockId;
  349. this.form.timeStart = item.timeStart;
  350. let form = { ...this.form };
  351. this.form = {};
  352. this.form = form;
  353. },
  354. async getAvailableDateList() {
  355. let { data } = await getAvailableDateList({ dockId: this.dockId });
  356. this.yydateList = data;
  357. },
  358. async getHistoryContactPhoneByUserId() {
  359. let { data } = await getHistoryContactPhoneByUserId({
  360. userId: getUserLocalStorageInfo().user.id,
  361. });
  362. this.telList = data;
  363. console.log(data);
  364. },
  365. selectDriverContactPhone(e) {
  366. this.form.driverContactPhone = e;
  367. let form = { ...this.form };
  368. this.form = {};
  369. this.form = form;
  370. },
  371. async updateReservation() {
  372. if (!this.form.bizId) {
  373. this.$showToast("请选择供应商");
  374. return;
  375. }
  376. if (!this.carNumber) {
  377. this.$showToast("请输入车牌号");
  378. return;
  379. }
  380. if (!this.form.carType) {
  381. this.$showToast("请选择车辆类型");
  382. return;
  383. }
  384. if (!this.form.driverName) {
  385. this.$showToast("请输入司机姓名");
  386. return;
  387. }
  388. if (!this.form.driverName) {
  389. this.$showToast("请输入司机姓名");
  390. return;
  391. }
  392. if (!this.form.driverUsername) {
  393. this.$showToast("请输入手机号/账号");
  394. return;
  395. }
  396. if (!this.form.driverContactPhone) {
  397. this.$showToast("联系电话");
  398. return;
  399. }
  400. let res = await updateReservation({
  401. ...this.form,
  402. userId: getUserLocalStorageInfo().user.id,
  403. driverId: getUserLocalStorageInfo().user.id,
  404. carNo: this.carNumber,
  405. });
  406. if (res.errmsg == "成功") {
  407. this.$showToast("预约成功");
  408. uni.navigateBack({ delta: 2 });
  409. }
  410. console.log(res);
  411. },
  412. async getReservationVoById(id) {
  413. let { data } = await getReservationVoById({ id: id });
  414. console.log(data);
  415. // this.carNumber = data.carNo;
  416. this.form.carType = data.carType;
  417. this.form.driverName = data.driverName;
  418. this.form.bizId = data.bizId;
  419. this.form.carType = data.carType;
  420. this.form.loadType = data.loadType;
  421. this.form.reservationDate = data.reservationDate;
  422. this.dockId = data.dockId;
  423. this.mtId = data.dockId;
  424. this.form.loadType = data.loadType;
  425. this.form.driverUsername = data.driverUsername;
  426. this.form.loadNum = data.loadNum;
  427. this.form.driverContactPhone = data.driverContactPhone;
  428. this.form.gysName = data.businessName;
  429. this.checkTimeData = {
  430. ...{
  431. dockSettingDetailId: data.dockSettingDetailId,
  432. dockSettingId: data.dockSettingId,
  433. timeEnd: data.timeEnd,
  434. timeStart: data.timeStart,
  435. dockId: data.dockId,
  436. },
  437. };
  438. this.form.dockSettingDetailId = data.dockSettingDetailId;
  439. this.form.dockSettingId = data.dockSettingId;
  440. this.form.timeEnd = data.timeEnd;
  441. this.form.timeStart = data.timeStart;
  442. this.$refs.carNum.setCarNumValue(data.carNo);
  443. this.getDockSelectList();
  444. this.getAvailableDateList();
  445. this.getCarNoByBizAndUser();
  446. this.getDockTimeList();
  447. },
  448. async getDockTimeList() {
  449. let { data } = await getDockTimeList({
  450. dateStr: this.form.reservationDate,
  451. dockId: this.mtId,
  452. bizId: this.form.bizId,
  453. });
  454. this.kxTimeList = data;
  455. },
  456. selectName(item) {
  457. this.form.driverName = item;
  458. let form = { ...this.form };
  459. this.form = {};
  460. this.form = form;
  461. },
  462. async getHistoryDriverNameByUserId() {
  463. let { data } = await getHistoryDriverNameByUserId({
  464. userId: getUserLocalStorageInfo().user.id,
  465. });
  466. this.nameList = data;
  467. },
  468. async selectYYDate({ detail }) {
  469. console.log(this.yydateList[detail.value]);
  470. this.form.reservationDate = this.yydateList[detail.value];
  471. let form = { ...this.form };
  472. this.form = {};
  473. this.form = form;
  474. let { data } = await getDockTimeList({
  475. dateStr: this.form.reservationDate,
  476. dockId: this.mtId,
  477. bizId: this.form.bizId,
  478. });
  479. this.kxTimeList = data;
  480. this.form.dockSettingDetailId = "";
  481. this.form.dockSettingId = "";
  482. this.form.timeEnd = "";
  483. this.form.dockId = "";
  484. this.form.timeStart = "";
  485. },
  486. async getMtId(item) {
  487. this.kxTimeList = [];
  488. this.form.reservationDate = "";
  489. console.log(item);
  490. let { data } = await getAvailableDateList({ dockId: item.value });
  491. this.mtId = item.value;
  492. // this.form.dockId = item.value;
  493. this.yydateList = data;
  494. },
  495. async getDockSelectList() {
  496. let { data } = await getDockSelectList({
  497. carType: this.form.carType,
  498. loadType: this.form.loadType.replace("预约", ""),
  499. });
  500. this.mtList = data;
  501. },
  502. selectCarType({ detail }) {
  503. console.log(detail);
  504. this.form.carType = this.dockCarTypeList[detail.value].label;
  505. console.log(this.dockCarTypeList[detail.value]);
  506. let form = { ...this.form };
  507. this.form = {};
  508. this.form = form;
  509. this.getDockSelectList();
  510. },
  511. async getDockCarType() {
  512. let { data } = await getDockCarType();
  513. this.dockCarTypeList = data;
  514. console.log(data);
  515. },
  516. selectCarNumber(e) {
  517. console.log(e);
  518. // this.carNumber = "苏B51WK7";
  519. // this.$forceUpdate();
  520. this.$refs.carNum.setCarNumValue(e);
  521. // this.carNumber = e;
  522. },
  523. oepnGysPopup() {
  524. this.gysPopupStatus = true;
  525. },
  526. async closeGysPopup(item) {
  527. console.log(item);
  528. this.gysPopupStatus = false;
  529. if (item) {
  530. console.log(item);
  531. this.form.gysName = item.label;
  532. this.form.bizId = item.value;
  533. let { data } = await getCarNoByBizAndUser({
  534. bizId: item.value,
  535. userId: getUserLocalStorageInfo().user.id,
  536. });
  537. console.log(data);
  538. this.carNumberList = data;
  539. }
  540. },
  541. async getCarNoByBizAndUser() {
  542. let { data } = await getCarNoByBizAndUser({
  543. bizId: this.form.bizId,
  544. userId: getUserLocalStorageInfo().user.id,
  545. });
  546. console.log(data);
  547. this.carNumberList = data;
  548. },
  549. async getBizByUsername() {
  550. let { data } = await getBizByUsername({
  551. username: getUserLocalStorageInfo().user.username,
  552. });
  553. console.log(data);
  554. this.gysList = data;
  555. },
  556. },
  557. };
  558. </script>
  559. <style lang="scss">
  560. .edityy {
  561. .yyyStatus {
  562. background: #8e8be4 !important;
  563. color: white;
  564. }
  565. .popupListBox {
  566. height: 800rpx;
  567. padding: 20rpx;
  568. box-sizing: border-box;
  569. .popupListBox-row {
  570. display: flex;
  571. align-items: center;
  572. justify-content: space-between;
  573. }
  574. }
  575. .status {
  576. width: 144rpx;
  577. height: 56rpx;
  578. text-align: center;
  579. line-height: 56rpx;
  580. border-top-right-radius: 5%;
  581. border-bottom-left-radius: 50%;
  582. position: absolute;
  583. top: -1rpx;
  584. right: 0;
  585. font-weight: 400;
  586. font-size: 28rpx;
  587. }
  588. .sj-select {
  589. display: flex;
  590. flex-wrap: wrap;
  591. margin-top: 32rpx;
  592. .select-item {
  593. text-align: center;
  594. line-height: 80rpx;
  595. width: 225rpx;
  596. height: 80rpx;
  597. background: rgba(255, 255, 255, 1);
  598. border-radius: 0rpx 0rpx 0rpx 0rpx;
  599. border: 2rpx solid #eaeff6;
  600. }
  601. .iselected {
  602. background: #ededed;
  603. }
  604. .isuse {
  605. background: rgba(142, 139, 228, 1);
  606. }
  607. }
  608. .sj-select-title {
  609. display: flex;
  610. align-items: center;
  611. .legend {
  612. display: flex;
  613. align-items: center;
  614. margin-right: 32rpx;
  615. }
  616. .sj-label {
  617. margin-right: 64rpx;
  618. }
  619. .white-legend {
  620. margin-right: 16rpx;
  621. width: 28rpx;
  622. height: 28rpx;
  623. background: #ffffff;
  624. border-radius: 0rpx 0rpx 0rpx 0rpx;
  625. border: 2rpx solid #e9e9e9;
  626. }
  627. .purple-legend {
  628. margin-right: 16rpx;
  629. width: 28rpx;
  630. height: 28rpx;
  631. background: #8e8be4;
  632. border-radius: 0rpx 0rpx 0rpx 0rpx;
  633. }
  634. }
  635. .qd {
  636. background: rgba(3, 101, 249, 0.2);
  637. color: #0365f9;
  638. }
  639. .rc {
  640. background: rgba(255, 184, 0, 0.3);
  641. color: #d99f00;
  642. }
  643. .zx {
  644. background: rgba(138, 5, 84, 0.2);
  645. color: #8a0554;
  646. }
  647. .wc {
  648. background: rgba(34, 181, 101, 0.2);
  649. color: #22b565;
  650. }
  651. .gq {
  652. color: #c7191f;
  653. background: rgba(199, 25, 31, 0.2);
  654. }
  655. .qx {
  656. color: #888888;
  657. background: rgba(136, 136, 136, 0.3);
  658. }
  659. .foot-btn {
  660. margin-top: 32rpx;
  661. margin-bottom: 32rpx;
  662. display: flex;
  663. justify-content: space-around;
  664. .cancel {
  665. button {
  666. color: rgba(138, 5, 84, 1) !important;
  667. }
  668. }
  669. }
  670. .form-value {
  671. width: 435rpx;
  672. input {
  673. width: 100%;
  674. }
  675. }
  676. .sj-select {
  677. display: flex;
  678. flex-wrap: wrap;
  679. margin-top: 32rpx;
  680. .select-item {
  681. text-align: center;
  682. line-height: 80rpx;
  683. width: 225rpx;
  684. height: 80rpx;
  685. background: rgba(255, 255, 255, 1);
  686. border-radius: 0rpx 0rpx 0rpx 0rpx;
  687. border: 2rpx solid #eaeff6;
  688. }
  689. .iselected {
  690. background: #ededed;
  691. }
  692. .isuse {
  693. background: rgba(142, 139, 228, 1);
  694. }
  695. }
  696. .sj-select-title {
  697. display: flex;
  698. align-items: center;
  699. .legend {
  700. display: flex;
  701. align-items: center;
  702. margin-right: 32rpx;
  703. }
  704. .sj-label {
  705. margin-right: 64rpx;
  706. }
  707. .white-legend {
  708. margin-right: 16rpx;
  709. width: 28rpx;
  710. height: 28rpx;
  711. background: #ffffff;
  712. border-radius: 0rpx 0rpx 0rpx 0rpx;
  713. border: 2rpx solid #e9e9e9;
  714. }
  715. .purple-legend {
  716. margin-right: 16rpx;
  717. width: 28rpx;
  718. height: 28rpx;
  719. background: #8e8be4;
  720. border-radius: 0rpx 0rpx 0rpx 0rpx;
  721. }
  722. }
  723. .bottom-form {
  724. background: #ffffff;
  725. padding: 32rpx;
  726. box-sizing: border-box;
  727. .mt-select {
  728. display: flex;
  729. flex-wrap: wrap;
  730. .select-item {
  731. border-radius: 8rpx 8rpx 8rpx 8rpx;
  732. padding: 12rpx 30rpx;
  733. margin-left: 5rpx;
  734. margin-right: 5rpx;
  735. margin-bottom: 32rpx;
  736. background: rgba(245, 247, 250, 1);
  737. }
  738. }
  739. }
  740. .historyList {
  741. display: flex;
  742. justify-content: flex-start;
  743. flex-wrap: wrap;
  744. .historyList-item {
  745. padding: 10rpx 15rpx;
  746. display: flex;
  747. text-align: center;
  748. font-weight: 400;
  749. color: #666666;
  750. background: #f5f7fa;
  751. border-radius: 8rpx 8rpx 8rpx 8rpx;
  752. margin-left: 5rpx;
  753. margin-right: 5rpx;
  754. .btn {
  755. margin-left: 15rpx;
  756. }
  757. }
  758. }
  759. .form {
  760. padding: 32rpx 32rpx;
  761. display: flex;
  762. background: #ffffff;
  763. min-height: 112rpx;
  764. align-items: center;
  765. box-sizing: border-box;
  766. .form-label {
  767. font-weight: 400;
  768. font-size: 32rpx;
  769. color: #333333;
  770. margin-right: 64rpx;
  771. .form-requird {
  772. color: red;
  773. }
  774. }
  775. }
  776. .pdt32 {
  777. padding-top: 32rpx;
  778. }
  779. .pdb32 {
  780. padding-bottom: 32rpx;
  781. }
  782. .mb32 {
  783. margin-bottom: 32rpx;
  784. }
  785. .mt32 {
  786. margin-top: 32rpx;
  787. }
  788. .bd_bottom {
  789. border-bottom: 2rpx #e6e6e6 solid;
  790. }
  791. }
  792. </style>