You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

522 line
12 KiB

  1. <template>
  2. <view class="box">
  3. <!-- 编辑 -->
  4. <view class="conmsg">
  5. <view class="conmsg-title">
  6. 客户信息
  7. </view>
  8. <view class="conmsg-msg">
  9. <view class="conmsg-msg-lab">
  10. <view class="conmsg-msg-lab-1">
  11. 客户姓名
  12. <view class="star">
  13. *
  14. </view>
  15. </view>
  16. <view class="conmsg-msg-lab-inp">
  17. <input type="text" placeholder="请输入客户姓名" placeholder-style="color:#B2B2B2;"
  18. v-model="form.name" />
  19. </view>
  20. </view>
  21. <view class="conmsg-msg-lab">
  22. <view class="conmsg-msg-lab-1">
  23. 客户性别
  24. </view>
  25. <view class="conmsg-msg-lab-inp" style="margin-top: 20rpx;">
  26. <view style="border: none; display: flex;">
  27. <view class="sexchose" @click="form.sex=1"
  28. :style="{border:form.sex==1?'1px solid #0A6EE9':'1px solid #E0E0E0'}">
  29. </view>
  30. <view class="sexchose" @click="form.sex=2"
  31. :style="{border:form.sex==2?'1px solid #0A6EE9':'1px solid #E0E0E0'}">
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="conmsg-msg-lab">
  37. <view class="conmsg-msg-lab-1">
  38. 联系电话
  39. </view>
  40. <view class="conmsg-msg-lab-inp">
  41. <input type="number" @focus="callPhoneFocus" @blur="callPhoneBlur" placeholder="请输入联系电话" placeholder-style="color:#B2B2B2;" maxlength="11"
  42. v-model="form.showPhone" />
  43. </view>
  44. </view>
  45. <view class="conmsg-msg-lab">
  46. <view class="conmsg-msg-lab-1">
  47. 微信账号
  48. </view>
  49. <view class="conmsg-msg-lab-inp">
  50. <input type="text" placeholder="请输入微信账号" placeholder-style="color:#B2B2B2;"
  51. v-model="form.chatNo" />
  52. </view>
  53. </view>
  54. <view class="conmsg-msg-lab" @click="levelshow = true">
  55. <view class="conmsg-msg-lab-1">
  56. 意向等级
  57. </view>
  58. <view class="conmsg-msg-lab-inp">
  59. <input type="text" placeholder="请选择客户等级" v-model="selectform.level" disabled />
  60. </view>
  61. <view class="conmsg-msg-lab-img">
  62. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  63. </view>
  64. </view>
  65. <view class="conmsg-msg-lab">
  66. <view class="conmsg-msg-lab-1">
  67. 客户来源
  68. </view>
  69. <view class="conmsg-msg-lab-inp">
  70. <input type="text" placeholder="请选择客户来源" @click="Buildingselection" v-model="form.sourceName"
  71. disabled />
  72. </view>
  73. <view class="conmsg-msg-lab-img">
  74. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  75. </view>
  76. </view>
  77. <view class="conmsg-msg-lab" style="border: none;">
  78. <view class="conmsg-msg-lab-1">
  79. 备注内容
  80. </view>
  81. <view class="conmsg-msg-lab-inp">
  82. <input type="text" placeholder="请输入备注内容" placeholder-style="color:#B2B2B2;"
  83. v-model="form.remarks" />
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <view class="conmsg" v-if="allList.length!=0">
  89. <view class="conmsg-title">
  90. 客户标签
  91. </view>
  92. <view class="conmsg-msg">
  93. <view v-for="(item,index) in allList" :key="index">
  94. <view class="">
  95. <view class="conmsg-msg-lab" :class="{mustSe: item.level == 1 && item.mustSelected == 0 }" style="border: none;">
  96. <view class="conmsg-msg-lab-1">
  97. {{item.name}}
  98. </view>
  99. </view>
  100. <view class="con-msg-con"
  101. :style="{borderBottom:index==allList.length-1?'none':'1px solid #E0E0E0'}">
  102. <view v-for="(item1,i) in item.children" :key="i" @click="Edittag(item,item1,index,i)"
  103. :style="{border:item1.selected==0?'1px solid #0A6EE9':'1px solid #E0E0E0'}"
  104. class="chebox">
  105. {{item1.label}}
  106. </view>
  107. </view>
  108. </view>
  109. </view>
  110. </view>
  111. </view>
  112. <view class="submit">
  113. <view class="btn" @click="submit">
  114. 确定
  115. </view>
  116. </view>
  117. <view class="" style="height: 220rpx;">
  118. <!-- :style="{marginTop:allList.length!=0?'0':'500rpx'}" -->
  119. </view>
  120. <!-- 客户等级 -->
  121. <u-select v-model="levelshow" :list="levellist" @confirm="levelshowCallback"></u-select>
  122. <u-select :mask-close-able="false" label-name="sourceName" value-name="id" v-model="Showhiddenunits"
  123. mode="single-column" :list="list" @cancel="cancel" @confirm="confirm"></u-select>
  124. </view>
  125. </template>
  126. <script>
  127. const config = require("@/config");
  128. export default {
  129. data() {
  130. return {
  131. Showhiddenunits: false, // 控制客户来源弹窗
  132. form: {
  133. name: '',
  134. sex: '1',
  135. phone: '',
  136. chatNo: '',
  137. level: '1',
  138. remarks: '',
  139. sourceId: ''
  140. },
  141. selectform: {
  142. level: 'A',
  143. stage: '',
  144. demand: '',
  145. area: '',
  146. budget: '',
  147. fouce: '',
  148. soure: '',
  149. },
  150. list: [], // 客户来源数组
  151. levelshow: false,
  152. customerId: '',
  153. // 等级
  154. levellist: [{
  155. value: 1,
  156. label: 'A'
  157. },
  158. {
  159. value: 2,
  160. label: 'B'
  161. },
  162. {
  163. value: 3,
  164. label: 'C'
  165. },
  166. {
  167. value: 4,
  168. label: 'D'
  169. },
  170. ],
  171. allList: [],
  172. dataCode: '',
  173. projectId: '', // 项目ID
  174. userInfo: {}, // 当前用户信息
  175. }
  176. },
  177. onLoad(e) {
  178. this.userInfo = uni.getStorageSync("weapp_session_userInfo_data");
  179. console.log()
  180. this.dataCode = this.userInfo.dataCode
  181. console.log(e)
  182. // 先调用借口查询数据
  183. this.customerId = e.id
  184. if (e.projectId) this.projectId = e.projectId
  185. this.getdetail()
  186. this.getFromSource()
  187. },
  188. methods: {
  189. // 获取客户来源
  190. getFromSource() {
  191. uni.request({
  192. url: config.service.sourceList + "?houseId=" + this.projectId,
  193. method: "GET",
  194. header: {
  195. 'content-type': 'application/json',
  196. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  197. },
  198. success: (data) => {
  199. console.log(data)
  200. if (data.data.code == 10000) {
  201. this.list = data.data.data
  202. }
  203. },
  204. fail: (res) => {
  205. console.log(res)
  206. }
  207. })
  208. },
  209. // 选择客户来源
  210. Buildingselection() {
  211. this.Showhiddenunits = true;
  212. },
  213. cancel() {
  214. this.Showhiddenunits = false;
  215. },
  216. confirm(e) {
  217. this.form.sourceName = e[0].label;
  218. this.form.sourceId = e[0].value;
  219. this.Showhiddenunits = false;
  220. },
  221. Edittag(item, item1, index, i) {
  222. if (this.allList[index].children[i].selected == 0) {
  223. this.allList[index].children[i].selected = 1;
  224. } else {
  225. this.allList[index].children[i].selected = 0;
  226. }
  227. this.$forceUpdate()
  228. },
  229. sourecheck(index) {
  230. this.sourelist[index].checked = !this.sourelist[index].checked
  231. this.$forceUpdate()
  232. },
  233. demandcheck(index) {
  234. this.demandlist[index].checked = !this.demandlist[index].checked
  235. this.$forceUpdate()
  236. },
  237. areacheck(index) {
  238. this.arealist[index].checked = !this.arealist[index].checked
  239. this.$forceUpdate()
  240. },
  241. levelshowCallback(e) {
  242. this.selectform.level = e[0].label
  243. this.form.level = e[0].value
  244. },
  245. // 获取用户数据
  246. getdetail() {
  247. this.$u.get("customer/findById?", {
  248. id: this.customerId
  249. })
  250. .then(res => {
  251. this.form = res
  252. if (!this.form.phone) {
  253. this.form.showPhone = '--'
  254. } else {
  255. if (this.form.isShow == 1 && this.form.phone.length == 11) {
  256. this.form.showPhone = this.form.phone.substr(0, 3) + '****' + this.form.phone.substr(7)
  257. } else {
  258. this.form.showPhone = this.form.phone
  259. }
  260. }
  261. this.form.showPhones = this.form.showPhone
  262. // 给客户等级赋值
  263. let idx = this.levellist.findIndex(item => item.value == res.level)
  264. if (idx != -1) {
  265. this.selectform.level = this.levellist[idx].label
  266. } else {
  267. this.selectform.level = 'A';
  268. this.form.level = 1;
  269. }
  270. this.showSourceName = res.sourceName;
  271. // 获取置业需求
  272. this.getListByType()
  273. })
  274. },
  275. // 字典表接口
  276. getListByType() {
  277. this.$u.get("/matchKeywords/findPersonalMatchData", {
  278. customerId: this.customerId
  279. })
  280. .then(res => {
  281. // console.log(res)
  282. res.forEach(item1 => {
  283. item1.children.map(item => {
  284. if (item.isInterval == 0) {
  285. item.label = item.name + item.unit + '-' + item.endName + item
  286. .unit;
  287. } else {
  288. item.label = item.name
  289. }
  290. item.value = item.id;
  291. })
  292. })
  293. // console.log(res)
  294. this.allList = res
  295. // return
  296. })
  297. },
  298. // 输入框获取焦点
  299. callPhoneFocus() {
  300. if (this.form.isShow == 1 && this.form.showPhone == this.form.showPhones) {
  301. this.form.showPhone = ''
  302. this.$forceUpdate()
  303. }
  304. },
  305. // 输入框失去焦点
  306. callPhoneBlur() {
  307. if (this.form.isShow == 1 && this.form.showPhone == '') {
  308. this.form.showPhone = this.form.showPhones
  309. this.$forceUpdate()
  310. }
  311. },
  312. // 提交
  313. submit() {
  314. let param = {}
  315. let str = []
  316. if (this.form.name == '') {
  317. uni.showToast({
  318. title: '请输入客户姓名',
  319. icon: 'none'
  320. })
  321. return
  322. }
  323. if (this.form.showPhones != this.form.showPhone) {
  324. this.form.phone = this.form.showPhone
  325. }
  326. let isPass = false // 默认通过
  327. let indexs = 0; //
  328. try {
  329. this.allList.forEach(item => {
  330. if (item.mustSelected == 0) {
  331. if (item.children.findIndex(item => item.selected == 0) == -1) {
  332. throw new Error(item.name)
  333. }
  334. }
  335. item.children.map(item1 => {
  336. if (item1.selected == 0) {
  337. str.push(item1.keywordsId)
  338. }
  339. })
  340. })
  341. } catch (e) {
  342. console.log(e)
  343. uni.showToast({
  344. title: `${e.message}为必选项~`,
  345. icon: 'none',
  346. duration: 2000
  347. })
  348. return
  349. }
  350. str = str.join(',')
  351. param = this.form
  352. param.keywordIds = str
  353. console.log(param)
  354. // return
  355. this.$u.post("customer/update", param)
  356. .then(res => {
  357. // console.log(res)
  358. uni.showToast({
  359. title: '操作成功',
  360. icon: 'none',
  361. success: () => {
  362. uni.navigateBack()
  363. }
  364. })
  365. })
  366. },
  367. }
  368. }
  369. </script>
  370. <style lang="scss" scoped>
  371. .box {
  372. width: 100%;
  373. height: 100%;
  374. background: #F8F8F8;
  375. overflow: hidden;
  376. }
  377. .conmsg {
  378. background: #FFFFFF;
  379. margin-top: 20rpx;
  380. .conmsg-title {
  381. height: 92rpx;
  382. line-height: 92rpx;
  383. font-weight: bold;
  384. padding: 0 30rpx;
  385. // font-weight: 500;
  386. color: #303030;
  387. font-size: 32rpx;
  388. border-bottom: 1px solid #E0E0E0;
  389. }
  390. .conmsg-msg {
  391. padding: 0 30rpx;
  392. .conmsg-msg-lab {
  393. position: relative;
  394. height: 102rpx;
  395. display: flex;
  396. font-size: 30rpx;
  397. font-weight: 400;
  398. color: #333333;
  399. border-bottom: 1px solid #E0E0E0;
  400. line-height: 102rpx;
  401. &.mustSe::before {
  402. content: '*';
  403. color: red;
  404. position: absolute;
  405. left: -10rpx;
  406. right: -10rpx;
  407. z-index: 10;
  408. }
  409. .conmsg-msg-lab-1 {
  410. display: flex;
  411. min-width: 136rpx;
  412. .star {
  413. color: #E7483C;
  414. line-height: 108rpx;
  415. }
  416. }
  417. .conmsg-msg-lab-inp {
  418. margin-top: 30rpx;
  419. margin-left: 44rpx;
  420. }
  421. .conmsg-msg-lab-img {
  422. width: 14rpx;
  423. height: 30rpx;
  424. margin-top: 6rpx;
  425. margin-left: auto;
  426. image {
  427. width: 100%;
  428. height: 100%;
  429. }
  430. }
  431. }
  432. }
  433. }
  434. .submit {
  435. position: fixed;
  436. bottom: 20rpx;
  437. left: 20rpx;
  438. height: 120rpx;
  439. background: #FFFFFF;
  440. .btn {
  441. // margin: 60rpx auto;
  442. text-align: center;
  443. width: 690rpx;
  444. height: 88rpx;
  445. background: #2671E2;
  446. border-radius: 8rpx;
  447. font-size: 32tpx;
  448. font-weight: 400;
  449. color: #FFFFFF;
  450. line-height: 88rpx;
  451. }
  452. }
  453. .con-msg-con {
  454. display: flex;
  455. flex-wrap: wrap;
  456. border-bottom: 1px solid #E0E0E0;
  457. padding-bottom: 16rpx;
  458. .chebox {
  459. height: 60rpx;
  460. line-height: 60rpx;
  461. margin-bottom: 25rpx;
  462. margin-right: 20rpx;
  463. border: 1px solid #E0E0E0;
  464. box-sizing: border-box;
  465. padding: 0 10rpx;
  466. border-radius: 12rpx;
  467. min-width: 150rpx;
  468. text-align: center
  469. }
  470. }
  471. .sexchose {
  472. width: 120rpx;
  473. height: 60rpx;
  474. background: #FFFFFF;
  475. border-radius: 12rpx;
  476. border: 1px solid #E0E0E0;
  477. text-align: center;
  478. line-height: 60rpx;
  479. margin-right: 20rpx;
  480. }
  481. </style>