add.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  1. <template>
  2. <div class="propertyEditor">
  3. <ul class="detailUl">
  4. <li class="detailLi">
  5. <span class="liName"> 定金编号 </span>
  6. <div class="inputBox">
  7. <input
  8. placeholder="请输入"
  9. class="myIpt"
  10. v-model="form.serialNumber"
  11. />
  12. </div>
  13. </li>
  14. <li class="detailLi">
  15. <span class="liName"> 批次号-选房号 </span>
  16. <div class="inputBox">
  17. <div class="myIpt">
  18. {{ form.batchNumber + "-" + form.roomSelectionNumber }}
  19. </div>
  20. </div>
  21. </li>
  22. <li class="detailLi">
  23. <span class="liName"> 买受人 </span>
  24. <div class="inputBox">
  25. <input placeholder="请输入" class="myIpt" v-model="form.buyerName" />
  26. </div>
  27. </li>
  28. <li class="detailLi">
  29. <span class="liName"> 选房日期 </span>
  30. <div class="inputBox">
  31. <input
  32. placeholder="请输入"
  33. class="myIpt"
  34. v-model="form.roomSelectionDate"
  35. />
  36. </div>
  37. </li>
  38. <li class="detailLi">
  39. <span class="liName"> 应收定金(元) </span>
  40. <div class="inputBox">
  41. <input
  42. placeholder="请输入"
  43. class="myIpt"
  44. v-model="form.subscriptionFunds"
  45. />
  46. </div>
  47. </li>
  48. </ul>
  49. <ul class="detailUl">
  50. <li class="detailLi">
  51. <span class="liName">
  52. <span style="color: red">*</span>
  53. 实收金额(元)
  54. </span>
  55. <div class="inputBox">
  56. <input
  57. placeholder="请输入"
  58. class="myIpt"
  59. v-model="form.receivedAmount"
  60. />
  61. </div>
  62. </li>
  63. <li class="detailLi">
  64. <span class="liName"> <span style="color: red">*</span> 收款方式 </span>
  65. <div class="inputBox">
  66. <picker
  67. range-key="label"
  68. @change="getPaymentMethod"
  69. :range="COLLECTION_METHODS"
  70. >
  71. <view class="uni-input">{{
  72. form.paymentMethod
  73. ? COLLECTION_METHODS[form.paymentMethod - 1].label
  74. : "请选择"
  75. }}</view>
  76. </picker>
  77. </div>
  78. </li>
  79. <li class="detailLi">
  80. <span class="liName"> <span style="color: red">*</span>收款时间 </span>
  81. <div class="inputBox">
  82. <picker
  83. mode="date"
  84. :value="form.collectionTime"
  85. :start="startDate"
  86. :end="endDate"
  87. @change="bindDateChange"
  88. >
  89. <div class="myIpt">
  90. {{ form.collectionTime ? form.collectionTime : "请选择" }}
  91. </div>
  92. </picker>
  93. </div>
  94. </li>
  95. <li class="detailLi2">
  96. <div class="titleBox">
  97. <span class="liName">备注</span>
  98. </div>
  99. <van-field
  100. :value="form.remark"
  101. @change="changeRemark"
  102. autosize
  103. type="textarea"
  104. placeholder="请输入"
  105. class="myField"
  106. maxlength="1000"
  107. show-word-limit
  108. />
  109. </li>
  110. <li class="detailLi2">
  111. <div class="titleBox" style="margin-bottom: 24rpx">
  112. <span class="liName">
  113. 照片上传
  114. <span style="color: #b3b3b3; font-size: 28rpx"
  115. >(只能上传jpg/png格式,限制上传9张)</span
  116. >
  117. </span>
  118. </div>
  119. <van-uploader
  120. :max-count="9"
  121. @delete="deleteRYXXZP"
  122. :file-list="fileList"
  123. @after-read="uploadRYXXZP"
  124. :show-upload="true"
  125. />
  126. </li>
  127. <li class="detailLi">
  128. <span class="liName"> 经办人 </span>
  129. <div class="inputBox">
  130. <input
  131. placeholder="请输入"
  132. class="myIpt"
  133. disabled
  134. v-model="form.truename"
  135. />
  136. </div>
  137. </li>
  138. <li class="detailLi" style="border-bottom: none">
  139. <span class="liName"> 经办日期 </span>
  140. <div class="inputBox">
  141. <input
  142. placeholder="请输入"
  143. class="myIpt"
  144. v-model="form.collectionTime"
  145. />
  146. </div>
  147. </li>
  148. </ul>
  149. <button class="commitBtn" @tap="addIntentional">保存</button>
  150. </div>
  151. </template>
  152. <script>
  153. import {
  154. getCustomerInfoById,
  155. ParkFloorDiscControllerGetById,
  156. getSerialNumber,
  157. getByCustomerManagementId,
  158. getByCodes,
  159. getUserLocalStorageInfo,
  160. addIntentional,
  161. } from "@/js_sdk/http";
  162. export default {
  163. name: "propertyEditor",
  164. data() {
  165. return {
  166. COLLECTION_METHODS: [],
  167. fileList: [],
  168. fileList2: [],
  169. buildFa: "",
  170. show: false,
  171. showTree: false,
  172. cascaderValue: null,
  173. fieldNames: {
  174. text: "label",
  175. value: "value",
  176. children: "children",
  177. },
  178. options: [],
  179. areaList: [],
  180. floorList: [],
  181. usegeList: [],
  182. natureList: [],
  183. enableList: [],
  184. cxList: [],
  185. situationList: [],
  186. statusList: [],
  187. popType: "",
  188. form: {},
  189. postData: {
  190. groupName: "",
  191. floorDiscName: "",
  192. buildName: "",
  193. roomNo: "",
  194. region: "",
  195. size: "",
  196. imgNo: "",
  197. floor: "",
  198. roomUse: "",
  199. roomUseLabel: "",
  200. propertyNature: "",
  201. direction: "",
  202. decorationSituation: "",
  203. floorHeight: "",
  204. bearing: "",
  205. electricity: "",
  206. guidePrice: "",
  207. remark: "",
  208. environmentPicture: "",
  209. planPicture: "",
  210. address: "",
  211. },
  212. dic_key: ["COLLECTION_METHODS"],
  213. };
  214. },
  215. onLoad(options) {
  216. this.form.userId = getUserLocalStorageInfo().id;
  217. this.form.truename = getUserLocalStorageInfo().truename;
  218. const now = new Date();
  219. const year = now.getFullYear();
  220. const month = now.getMonth() + 1; // 月份从 0 开始,因此需要加 1
  221. const day = now.getDate();
  222. this.form.collectionTime = `${year}-${month}-${day}`;
  223. this.options = options;
  224. this.getCustomerInfoById();
  225. this.getByCodes();
  226. },
  227. computed: {
  228. startDate() {
  229. return this.getDate("start");
  230. },
  231. endDate() {
  232. return this.getDate("end");
  233. },
  234. },
  235. methods: {
  236. async addIntentional() {
  237. let fileList = JSON.parse(JSON.stringify(this.fileList));
  238. let fileListStr = fileList.map((e) => {
  239. return {
  240. url: e.imgUrl,
  241. id: e.id,
  242. data: e.id,
  243. type: "image",
  244. isImage: true,
  245. };
  246. });
  247. let data = await addIntentional({
  248. ...this.form,
  249. customerManagementId: this.options.id,
  250. fileList: JSON.stringify(fileListStr),
  251. });
  252. if (data.code == 200) {
  253. uni.navigateBack();
  254. }
  255. },
  256. getPaymentMethod(e) {
  257. this.form.paymentMethod = this.COLLECTION_METHODS[e.detail.value].value;
  258. console.log(e.detail.value);
  259. let form = { ...this.form };
  260. this.form = {};
  261. this.form = form;
  262. },
  263. async getByCodes() {
  264. let data = await getByCodes(JSON.stringify(this.dic_key));
  265. let dic_SelectList = this.$common.handleDicList(data);
  266. this.COLLECTION_METHODS = dic_SelectList.COLLECTION_METHODS;
  267. console.log(this.COLLECTION_METHODS);
  268. },
  269. bindDateChange(e) {
  270. this.form.collectionTime = e.detail.value;
  271. console.log(e.detail.value);
  272. },
  273. getDate(type) {
  274. const date = new Date();
  275. let year = date.getFullYear();
  276. let month = date.getMonth() + 1;
  277. let day = date.getDate();
  278. if (type === "start") {
  279. year = year - 60;
  280. } else if (type === "end") {
  281. year = year + 2;
  282. }
  283. month = month > 9 ? month : "0" + month;
  284. day = day > 9 ? day : "0" + day;
  285. return `${year}-${month}-${day}`;
  286. },
  287. async getSerialNumber() {
  288. let data = await getSerialNumber({
  289. customerManagementId: this.options.id,
  290. });
  291. this.form.serialNumber = data;
  292. console.log(data);
  293. let form = { ...this.form };
  294. this.form = {};
  295. this.form = form;
  296. this.ParkFloorDiscControllerGetById();
  297. },
  298. async getCustomerInfoById() {
  299. let data = await getCustomerInfoById({ id: this.options.id });
  300. console.log(data);
  301. this.form.roomSelectionDate = data.roomSelectionDate;
  302. this.form.batchNumber = data.batchNumber;
  303. this.form.roomSelectionNumber = data.roomSelectionNumber;
  304. this.form.buyerName = data.buyerName;
  305. this.form.intentionalDepositStatus = data.intentionalDepositStatus;
  306. // this.form.receivedAmount = data.receivedAmount;
  307. console.log(this.form.buyerName);
  308. this.form.discId = data.discId;
  309. this.getSerialNumber();
  310. },
  311. changeRemark(e) {
  312. this.form.remark = e.detail;
  313. console.log(e.detail);
  314. },
  315. async ParkFloorDiscControllerGetById() {
  316. let data = await ParkFloorDiscControllerGetById({
  317. id: this.form.discId,
  318. });
  319. this.form.subscriptionFunds = data.subscriptionFunds;
  320. let form = { ...this.form };
  321. this.form = {};
  322. this.form = form;
  323. },
  324. async getByCustomerManagementId() {
  325. let data = await getByCustomerManagementId({
  326. customerManagementId: this.options.id,
  327. });
  328. this.form.receivedAmount = data.receivedAmount ? data.receivedAmount : "";
  329. console.log("paymentMethod", data.paymentMethod);
  330. this.form.paymentMethod = data.paymentMethod + "";
  331. this.form.remark = data.remark;
  332. let fileList = JSON.parse(data.fileList);
  333. this.fileList = fileList;
  334. console.log(fileList);
  335. let form = { ...this.form };
  336. this.form = {};
  337. this.form = form;
  338. },
  339. deleteRYXXZP(event) {
  340. this.fileList.splice(event.detail.index, 1);
  341. this.$forceUpdate();
  342. },
  343. uploadRYXXZP(event) {
  344. // console.log(event)
  345. let that = this;
  346. const { file } = event.detail;
  347. console.log(event.detail);
  348. uni.uploadFile({
  349. url: that.$constant.BASE_URI + "/wx/FileController/upload",
  350. filePath: file.url,
  351. name: "file",
  352. formData: { user: "test" },
  353. success(res) {
  354. // 上传完成需要更新 fileList'
  355. console.log(JSON.parse(res.data));
  356. let data = JSON.parse(res.data);
  357. if (event.detail.file.type === "image") {
  358. that.fileList.push({
  359. imgUrl: "/FileController/download/" + data.data,
  360. id: data.data,
  361. url:
  362. that.$constant.BASE_URI +
  363. "/FileController/download/" +
  364. data.data,
  365. type: event.detail.file.type,
  366. isImage: true,
  367. });
  368. } else {
  369. that.fileList.push({
  370. imgUrl: "/FileController/download/" + data.data,
  371. id: data.data,
  372. url:
  373. that.$constant.BASE_URI +
  374. "/FileController/download/" +
  375. data.data,
  376. type: event.detail.file.type,
  377. isVideo: true,
  378. });
  379. }
  380. },
  381. fail(res) {},
  382. });
  383. },
  384. },
  385. };
  386. </script>
  387. <style lang="scss">
  388. .propertyEditor {
  389. padding-bottom: 150rpx;
  390. .detailUl {
  391. margin-top: 20rpx;
  392. background: white;
  393. padding: 0 32rpx;
  394. .liName {
  395. font-size: 32rpx;
  396. color: rgba(51, 51, 51, 1);
  397. white-space: nowrap;
  398. .callNumber {
  399. color: rgba(24, 23, 42, 1);
  400. font-size: 36rpx;
  401. font-weight: 600;
  402. }
  403. .callName {
  404. color: rgba(102, 102, 102, 1);
  405. font-size: 28rpx;
  406. }
  407. }
  408. .phoneIcon {
  409. width: 64rpx;
  410. height: 64rpx;
  411. }
  412. .detailLi {
  413. display: flex;
  414. justify-content: space-between;
  415. align-items: center;
  416. padding: 32rpx 0;
  417. border-bottom: 2rpx solid #e6e6e6;
  418. .liInfo {
  419. display: inline-block;
  420. text-align: right;
  421. max-width: 428rpx;
  422. color: rgba(102, 102, 102, 1);
  423. font-size: 32rpx;
  424. line-height: 38rpx;
  425. overflow: hidden;
  426. word-wrap: break-word;
  427. }
  428. .inputBox {
  429. display: flex;
  430. align-items: center;
  431. }
  432. .myIpt {
  433. text-align: right;
  434. margin-right: 20rpx;
  435. color: rgba(102, 102, 102, 1);
  436. }
  437. }
  438. .detailLi2 {
  439. display: flex;
  440. flex-direction: column;
  441. padding: 32rpx 0;
  442. border-bottom: 2rpx solid #e6e6e6;
  443. .detailLi2BoxTop {
  444. display: flex;
  445. flex-wrap: wrap;
  446. justify-content: space-between;
  447. margin: 12rpx 0;
  448. .checkItem {
  449. width: 128rpx;
  450. height: 64rpx;
  451. font-size: 28rpx;
  452. color: #666666;
  453. display: flex;
  454. align-items: center;
  455. justify-content: center;
  456. background: #f5f7fa;
  457. border-radius: 8rpx;
  458. margin: 12rpx 0;
  459. }
  460. .checked {
  461. background: #0365f9;
  462. color: white;
  463. }
  464. }
  465. .locationBox {
  466. position: absolute;
  467. right: 24rpx;
  468. top: 100rpx;
  469. }
  470. .van-cell {
  471. background: #f5f7fa !important;
  472. border-radius: 8rpx;
  473. font-size: 28rpx;
  474. margin-top: 16rpx;
  475. }
  476. }
  477. }
  478. .commitBtn {
  479. width: 654rpx;
  480. height: 96rpx;
  481. background: rgba(3, 101, 249, 1);
  482. margin: 64rpx 48rpx;
  483. display: flex;
  484. align-items: center;
  485. justify-content: center;
  486. font-size: 36rpx;
  487. color: white;
  488. }
  489. }
  490. </style>