AI销管
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.
 
 
 
 

480 lines
11 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 maxlength="10" 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">
  26. <view style="border: none; display: flex;">
  27. <view class="sexchose" @click="form.sex=1"
  28. :style="{border:form.sex==1?'1px solid #0A6EE9;background: #0A6EE9;color: #fff;':'1px solid #E0E0E0'}">
  29. </view>
  30. <view class="sexchose" @click="form.sex=2"
  31. :style="{border:form.sex==2?'1px solid #0A6EE9;background: #0A6EE9;color: #fff;':'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 class="star">
  40. *
  41. </view> -->
  42. </view>
  43. <view class="conmsg-msg-lab-inp">
  44. <input :disabled="userInfo.showPhoneStatus != 0" type="number" placeholder="请输入联系电话"
  45. placeholder-style="color:#B2B2B2;" maxlength="11" v-model="form.phone" />
  46. </view>
  47. </view>
  48. <view class="conmsg-msg-lab">
  49. <view class="conmsg-msg-lab-1">
  50. 微信账号
  51. </view>
  52. <view class="conmsg-msg-lab-inp">
  53. <input type="text" placeholder="请输入微信账号" placeholder-style="color:#B2B2B2;"
  54. v-model="form.chatNo" />
  55. </view>
  56. </view>
  57. <view class="conmsg-msg-lab" @click="levelshow = true">
  58. <view class="conmsg-msg-lab-1">
  59. 客户等级
  60. </view>
  61. <view class="conmsg-msg-lab-inp">
  62. <input type="text" placeholder="请选择客户等级" v-model="selectform.level" disabled />
  63. </view>
  64. <view class="conmsg-msg-lab-img">
  65. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  66. </view>
  67. </view>
  68. <!-- <view class="conmsg-msg-lab">
  69. <view class="conmsg-msg-lab-1">
  70. 客户阶段
  71. </view>
  72. <view class="conmsg-msg-lab-inp">
  73. <input type="text" placeholder="请选择客户阶段" @click="stageshow = true" v-model="selectform.stage" disabled/>
  74. </view>
  75. <view class="conmsg-msg-lab-img">
  76. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  77. </view>
  78. </view> -->
  79. <view class="conmsg-msg-lab" style="border: none;">
  80. <view class="conmsg-msg-lab-1">
  81. 备注内容
  82. </view>
  83. <view class="conmsg-msg-lab-inp">
  84. <input type="text" placeholder="请输入备注内容" placeholder-style="color:#B2B2B2;"
  85. v-model="form.remarks" />
  86. </view>
  87. </view>
  88. </view>
  89. </view>
  90. <view class="conmsg">
  91. <view class="conmsg-title">
  92. 客户标签
  93. </view>
  94. <view class="conmsg-msg">
  95. <view v-for="(item,index) in allList" :key="index">
  96. <view class="">
  97. <view class="conmsg-msg-lab" style="border: none;">
  98. <view class="conmsg-msg-lab-1">
  99. {{item.name}}
  100. </view>
  101. </view>
  102. <view class="con-msg-con"
  103. :style="{borderBottom:index==allList.length-1?'none':'1px solid #E0E0E0'}">
  104. <view v-for="(item1,i) in item.children" :key="i" @click="Edittag(item,item1,index,i)"
  105. :style="{border:item1.selected==0?'1px solid #0A6EE9;background: #0A6EE9;color: #fff;':'1px solid #E0E0E0'}"
  106. class="chebox">
  107. {{item1.label}}
  108. </view>
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. <view class="submit">
  115. <view class="btn" @click="submit">
  116. 确定
  117. </view>
  118. </view>
  119. <view class="" style="height: 220rpx;background: #fff;">
  120. <!-- :style="{marginTop:allList.length!=0?'0':'500rpx'}" -->
  121. </view>
  122. <!-- 客户等级 -->
  123. <u-select v-model="levelshow" :list="levellist" @confirm="levelshowCallback"></u-select>
  124. </view>
  125. </template>
  126. <script>
  127. export default {
  128. data() {
  129. return {
  130. showPhone: '', // 展示用的手机号
  131. form: {
  132. name: '',
  133. sex: '1',
  134. phone: '',
  135. chatNo: '',
  136. level: '1',
  137. remarks: '',
  138. },
  139. selectform: {
  140. level: 'A',
  141. stage: '',
  142. demand: '',
  143. area: '',
  144. budget: '',
  145. fouce: '',
  146. soure: '',
  147. },
  148. levelshow: false,
  149. customerId: '',
  150. // 等级
  151. levellist: [{
  152. value: 1,
  153. label: 'A'
  154. },
  155. {
  156. value: 2,
  157. label: 'B'
  158. },
  159. {
  160. value: 3,
  161. label: 'C'
  162. },
  163. {
  164. value: 4,
  165. label: 'D'
  166. },
  167. ],
  168. allList: [],
  169. dataCode: '',
  170. userInfo: {}, // 用户信息
  171. }
  172. },
  173. computed: {
  174. },
  175. onLoad(e) {
  176. const {
  177. dataCode
  178. } = uni.getStorageSync("weapp_session_userInfo_data");
  179. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  180. this.dataCode = dataCode
  181. console.log(this.userInfo.showPhoneStatus)
  182. // 先调用借口查询数据
  183. this.customerId = e.id
  184. this.initPage()
  185. },
  186. methods: {
  187. initPage() {
  188. this.getdetail()
  189. // 获取置业需求
  190. this.getListByType()
  191. },
  192. Edittag(item, item1, index, i) {
  193. if (this.allList[index].children[i].selected == 0) {
  194. this.allList[index].children[i].selected = 1;
  195. } else {
  196. this.allList[index].children[i].selected = 0;
  197. }
  198. this.$forceUpdate()
  199. },
  200. sourecheck(index) {
  201. this.sourelist[index].checked = !this.sourelist[index].checked
  202. this.$forceUpdate()
  203. },
  204. demandcheck(index) {
  205. this.demandlist[index].checked = !this.demandlist[index].checked
  206. this.$forceUpdate()
  207. },
  208. areacheck(index) {
  209. this.arealist[index].checked = !this.arealist[index].checked
  210. this.$forceUpdate()
  211. },
  212. levelshowCallback(e) {
  213. this.selectform.level = e[0].label
  214. this.form.level = e[0].value
  215. },
  216. // 获取用户数据
  217. getdetail() {
  218. this.$u.get("customer/findById?", {
  219. id: this.customerId
  220. })
  221. .then(res => {
  222. res.phone = res.phone || ''
  223. this.form = res
  224. if (this.userInfo.showPhoneStatus == 1) {
  225. this.showPhone = this.form.phone
  226. this.form.phone = this.form.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
  227. }
  228. // 给客户等级赋值
  229. let idx = this.levellist.findIndex(item => item.value == res.level)
  230. if (idx != -1) {
  231. this.selectform.level = this.levellist[idx].label
  232. } else {
  233. this.selectform.level = 'A';
  234. this.form.level = 1;
  235. }
  236. })
  237. },
  238. // 字典表接口
  239. getListByType() {
  240. this.$u.get("/matchKeywords/findPersonalMatchData", {
  241. customerId: this.customerId
  242. })
  243. .then(res => {
  244. console.log(res, '123123123123')
  245. res.forEach(item1 => {
  246. item1.children.map(item => {
  247. if (item.isInterval == 0) {
  248. item.label = item.name + item.unit + '-' + item.endName + item
  249. .unit;
  250. } else {
  251. item.label = item.name
  252. }
  253. item.value = item.id;
  254. })
  255. })
  256. // console.log(res)
  257. this.allList = res
  258. // return
  259. })
  260. },
  261. // 提交
  262. submit() {
  263. let param = {}
  264. let str = []
  265. if (this.form.name == '') {
  266. uni.showToast({
  267. title: '请输入客户姓名',
  268. icon: 'none'
  269. })
  270. return
  271. }
  272. // if (this.form.phone == '') {
  273. // uni.showToast({
  274. // title: '请输入手机号',
  275. // icon: 'none'
  276. // })
  277. // return
  278. // }
  279. // if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){
  280. // uni.showToast({
  281. // title: "请检查手机号码格式",
  282. // icon:'none'
  283. // });
  284. // // this.form.phone=''
  285. // return false;
  286. // }
  287. // if (this.form.phone.length < 5) {
  288. // uni.showToast({
  289. // icon: "none",
  290. // title: "手机号码不能小于5位"
  291. // })
  292. // return;
  293. // }
  294. // if (this.form.phone.length > 11) {
  295. // uni.showToast({
  296. // icon: "none",
  297. // title: "手机号码不能大于11位"
  298. // })
  299. // return;
  300. // }
  301. this.allList.map(item => {
  302. item.children.map(item1 => {
  303. if (item1.selected == 0) {
  304. str.push(item1.keywordsId)
  305. }
  306. })
  307. })
  308. str = str.join(',')
  309. param = this.form
  310. // 如果是禁用状态就传入明文手机号,如果没禁用则不用更改
  311. if (this.userInfo.showPhoneStatus == 1) {
  312. param.phone = this.showPhone
  313. }
  314. param.keywordIds = str
  315. console.log(param)
  316. // return
  317. this.$u.post("customer/update", param)
  318. .then(res => {
  319. // console.log(res)
  320. uni.showToast({
  321. title: '操作成功',
  322. icon: 'none',
  323. success: () => {
  324. uni.navigateBack()
  325. }
  326. })
  327. })
  328. },
  329. }
  330. }
  331. </script>
  332. <style lang="scss" scoped>
  333. .box {
  334. width: 100%;
  335. min-height: 100vh;
  336. background: #F8F8F8;
  337. overflow: hidden;
  338. display: flex;
  339. flex-direction: column;
  340. }
  341. .conmsg {
  342. flex-grow: 1;
  343. flex-shrink: 0;
  344. background: #FFFFFF;
  345. margin-top: 20rpx;
  346. .conmsg-title {
  347. height: 92rpx;
  348. line-height: 92rpx;
  349. font-weight: bold;
  350. padding: 0 30rpx;
  351. // font-weight: 500;
  352. color: #303030;
  353. font-size: 32rpx;
  354. border-bottom: 1px solid #E0E0E0;
  355. }
  356. .conmsg-msg {
  357. padding: 0 30rpx;
  358. .conmsg-msg-lab {
  359. width: 100%;
  360. height: 102rpx;
  361. display: flex;
  362. font-size: 30rpx;
  363. font-weight: 400;
  364. color: #333333;
  365. border-bottom: 1px solid #E0E0E0;
  366. display: flex;
  367. align-items: center;
  368. .conmsg-msg-lab-1 {
  369. flex-shrink: 0;
  370. display: flex;
  371. min-width: 136rpx;
  372. .star {
  373. color: #E7483C;
  374. }
  375. }
  376. .conmsg-msg-lab-inp {
  377. margin-left: 44rpx;
  378. flex-grow: 1;
  379. display: flex;
  380. input {
  381. flex-grow: 1;
  382. }
  383. }
  384. .conmsg-msg-lab-img {
  385. width: 14rpx;
  386. height: 30rpx;
  387. margin-top: 6rpx;
  388. margin-left: auto;
  389. image {
  390. width: 100%;
  391. height: 100%;
  392. }
  393. }
  394. }
  395. }
  396. }
  397. .submit {
  398. position: fixed;
  399. bottom: 20rpx;
  400. left: 20rpx;
  401. height: 120rpx;
  402. background: #FFFFFF;
  403. .btn {
  404. // margin: 60rpx auto;
  405. text-align: center;
  406. width: 690rpx;
  407. height: 88rpx;
  408. background: #2671E2;
  409. border-radius: 8rpx;
  410. font-size: 32tpx;
  411. font-weight: 400;
  412. color: #FFFFFF;
  413. line-height: 88rpx;
  414. }
  415. }
  416. .con-msg-con {
  417. display: flex;
  418. flex-wrap: wrap;
  419. // justify-content: space-around;
  420. border-bottom: 1px solid #E0E0E0;
  421. padding-bottom: 16rpx;
  422. .chebox {
  423. // width: 20%;
  424. height: 60rpx;
  425. line-height: 60rpx;
  426. // margin: 10rpx 0;
  427. margin-bottom: 25rpx;
  428. margin-right: 20rpx;
  429. border: 1px solid #E0E0E0;
  430. box-sizing: border-box;
  431. padding: 0 10rpx;
  432. }
  433. }
  434. .sexchose {
  435. width: 120rpx;
  436. height: 60rpx;
  437. background: #FFFFFF;
  438. border-radius: 4rpx;
  439. border: 1px solid #E0E0E0;
  440. text-align: center;
  441. line-height: 60rpx;
  442. margin-right: 20rpx;
  443. }
  444. </style>