Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 

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