Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 

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