Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

416 рядки
10 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="请输入客户姓名" 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">
  25. <u-radio-group v-model="form.sex" >
  26. <view style="display: flex;">
  27. <u-radio name="1" shape='circle'>男</u-radio>
  28. <u-radio name="2" shape='circle'>女</u-radio>
  29. </view>
  30. </u-radio-group>
  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 type="text" placeholder="请输入联系电话" 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="请输入微信账号" v-model="form.chatNo"/>
  50. </view>
  51. </view>
  52. <view class="conmsg-msg-lab">
  53. <view class="conmsg-msg-lab-1">
  54. 客户等级
  55. </view>
  56. <view class="conmsg-msg-lab-inp">
  57. <input type="text" placeholder="请选择客户等级" @click="lelveshow = true" v-model="selectform.lelve" 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">
  75. <view class="conmsg-msg-lab-1">
  76. 备注内容
  77. </view>
  78. <view class="conmsg-msg-lab-inp">
  79. <input type="text" placeholder="请输入备注内容" v-model="form.txea"/>
  80. </view>
  81. </view>
  82. </view>
  83. </view>
  84. <view class="conmsg">
  85. <view class="conmsg-title">
  86. 客户标签
  87. </view>
  88. <view class="conmsg-msg">
  89. <view class="">
  90. <view class="conmsg-msg-lab">
  91. <view class="conmsg-msg-lab-1">
  92. 置业需求
  93. </view>
  94. <!-- <view class="conmsg-msg-lab-img">
  95. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  96. </view> -->
  97. </view>
  98. <view class="con-msg-con">
  99. <view v-for="(item,index) in demandlist" :key="index" :style="{border:item.checked?'1px solid #0A6EE9':'1px solid #E0E0E0'}" class="chebox" @click="demandcheck(index)">
  100. {{item.label}}
  101. </view>
  102. </view>
  103. </view>
  104. <view class="">
  105. <view class="conmsg-msg-lab">
  106. <view class="conmsg-msg-lab-1">
  107. 意向面积
  108. </view>
  109. <!-- <view class="conmsg-msg-lab-img">
  110. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  111. </view> -->
  112. </view>
  113. <view class="con-msg-con">
  114. <view v-for="(item,index) in arealist" :key="index" :style="{border:item.checked?'1px solid #0A6EE9':'1px solid #E0E0E0'}" class="chebox" @click="areacheck(index)">
  115. {{item.label}}
  116. </view>
  117. </view>
  118. </view>
  119. <view class="">
  120. <view class="conmsg-msg-lab">
  121. <view class="conmsg-msg-lab-1">
  122. 预算
  123. </view>
  124. <!-- <view class="conmsg-msg-lab-img">
  125. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  126. </view> -->
  127. </view>
  128. </view>
  129. <view class="">
  130. <view class="conmsg-msg-lab">
  131. <view class="conmsg-msg-lab-1">
  132. 关注点
  133. </view>
  134. <!-- <view class="conmsg-msg-lab-img">
  135. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  136. </view> -->
  137. </view>
  138. </view>
  139. <view class="">
  140. <view class="conmsg-msg-lab">
  141. <view class="conmsg-msg-lab-1">
  142. 客户来源
  143. </view>
  144. <!-- <view class="conmsg-msg-lab-img">
  145. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  146. </view> -->
  147. </view>
  148. <view class="con-msg-con">
  149. <view v-for="(item,index) in sourelist" :key="index" :style="{border:item.checked?'1px solid #0A6EE9':'1px solid #E0E0E0'}" class="chebox" @click="sourecheck(index)">
  150. {{item.label}}
  151. </view>
  152. </view>
  153. </view>
  154. </view>
  155. </view>
  156. <view class="submit">
  157. <view class="btn">
  158. 确定
  159. </view>
  160. </view>
  161. <!-- 客户等级 -->
  162. <u-select v-model="lelveshow" :list="lelvelist" @confirm="lelveshowCallback"></u-select>
  163. <!-- 客户阶段 -->
  164. <!-- <u-select v-model="stageshow" :list="stagelist" @confirm="stageshowCallback"></u-select> -->
  165. <!-- 职业需求 -->
  166. <!-- <u-select v-model="demandshow" :list="demandlist" @confirm="demandshowCallback"></u-select> -->
  167. <!-- 意向面积 -->
  168. <!-- <u-select v-model="areashow" :list="arealist" @confirm="areashowCallback"></u-select> -->
  169. <!-- 预算 -->
  170. <!-- <u-select v-model="budgetshow" :list="budgetlist" @confirm="budgetshowCallback"></u-select> -->
  171. <!-- 关注点 -->
  172. <!-- <u-select v-model="fouceshow" :list="foucelist" @confirm="fouceshowCallback"></u-select> -->
  173. <!-- 客户来源 -->
  174. <!-- <u-select v-model="soureshow" :list="sourelist" @confirm="soureshowCallback"></u-select> -->
  175. </view>
  176. </template>
  177. <script>
  178. export default{
  179. data(){
  180. return{
  181. form:{
  182. name:'',
  183. sex:'1',
  184. phone:'',
  185. chatNo:'',
  186. lelve:'',
  187. demand:{
  188. // 户型
  189. roomModel:'',
  190. // 面积
  191. acreage:'',
  192. // 客户来源
  193. // 预算
  194. // 关注点
  195. }
  196. },
  197. selectform:{
  198. lelve:'',
  199. stage:'',
  200. demand:'',
  201. area:'',
  202. budget:'',
  203. fouce:'',
  204. soure:'',
  205. },
  206. lelveshow:false,
  207. customerId:'',
  208. // 等级
  209. lelvelist:[
  210. {
  211. value:1,
  212. label:'A'
  213. },
  214. {
  215. value:2,
  216. label:'B'
  217. },
  218. {
  219. value:3,
  220. label:'C'
  221. },
  222. {
  223. value:4,
  224. label:'D'
  225. },
  226. ],
  227. stagelist:[],
  228. // 置业需求
  229. demandlist:[],
  230. // 意向面积
  231. arealist:[],
  232. // 预算
  233. budgetlist:[],
  234. // 关注点
  235. foucelist:[],
  236. // 客户来源
  237. sourelist:[],
  238. }
  239. },
  240. onLoad(e) {
  241. console.log(e)
  242. // 先调用借口查询数据
  243. this.customerId=e.id
  244. this.getdetail()
  245. },
  246. methods:{
  247. sourecheck(index){
  248. this.sourelist[index].checked=!this.sourelist[index].checked
  249. this.$forceUpdate()
  250. },
  251. demandcheck(index){
  252. this.demandlist[index].checked=!this.demandlist[index].checked
  253. this.$forceUpdate()
  254. },
  255. areacheck(index){
  256. this.arealist[index].checked=!this.arealist[index].checked
  257. this.$forceUpdate()
  258. },
  259. lelveshowCallback(e){
  260. this.selectform.lelve=e[0].label
  261. this.form.lelve=e[0].value
  262. },
  263. // 获取用户数据
  264. getdetail(){
  265. this.$u.get("customer/findById?",{id:this.customerId})
  266. .then(res=>{
  267. // console.log(res)
  268. this.form=res
  269. // 给客户等级赋值
  270. let idx= this.lelvelist.findIndex(item=>item.value==res.level)
  271. if(idx!=-1){
  272. this.selectform.lelve=this.lelvelist[idx].label
  273. }
  274. // 获取置业需求
  275. this.getListByType('needType','demandlist')
  276. // 获取意向面积
  277. this.getListByType('area','arealist')
  278. // 获取客户来源
  279. this.getListByType('customerSource','sourelist')
  280. })
  281. },
  282. // 字典表接口
  283. getListByType(type,list){
  284. this.$u.get("/sysDict/findListByType",{type})
  285. .then(res=>{
  286. // console.log(res)
  287. this[list]=res
  288. // 处理回显问题
  289. if(type=='needType'){
  290. // 置业需求
  291. // console.log(this.demandlist)
  292. this.demandlist.map(item=>{
  293. // console.log(this.form.demand.demandType)
  294. if((this.form.demand.demandType+'').includes(item.value)){
  295. item.checked=true
  296. }else{
  297. item.checked=false
  298. }
  299. })
  300. }
  301. // 意向面积
  302. if(type=='area'){
  303. this.arealist.map(item=>{
  304. item.checked=false
  305. })
  306. }
  307. // 客户来源
  308. if(type=='customerSource'){
  309. this.sourelist.map(item=>{
  310. item.checked=false
  311. })
  312. }
  313. })
  314. },
  315. }
  316. }
  317. </script>
  318. <style lang="scss" scoped>
  319. .box {
  320. width: 100%;
  321. height: 100%;
  322. background: #F8F8F8;
  323. overflow: hidden;
  324. }
  325. .conmsg{
  326. background: #FFFFFF;
  327. margin-top: 20rpx;
  328. .conmsg-title{
  329. height: 92rpx;
  330. line-height: 92rpx;
  331. padding: 0 30rpx;
  332. font-weight: 500;
  333. color: #303030;
  334. font-size: 32rpx;
  335. border-bottom: 1px solid #E0E0E0;
  336. }
  337. .conmsg-msg{
  338. padding: 0 30rpx;
  339. .conmsg-msg-lab{
  340. height: 102rpx;
  341. display: flex;
  342. font-size: 30rpx;
  343. font-weight: 400;
  344. color: #333333;
  345. border-bottom: 1px solid #E0E0E0;
  346. line-height: 102rpx;
  347. .conmsg-msg-lab-1{
  348. display: flex;
  349. width: 136rpx;
  350. .star{
  351. color: #E7483C;
  352. line-height: 108rpx;
  353. }
  354. }
  355. .conmsg-msg-lab-inp{
  356. margin-top: 30rpx;
  357. margin-left: 44rpx;
  358. }
  359. .conmsg-msg-lab-img{
  360. width: 14rpx;
  361. height: 30rpx;
  362. margin-top: 6rpx;
  363. margin-left: auto;
  364. image{
  365. width: 100%;
  366. height: 100%;
  367. }
  368. }
  369. }
  370. }
  371. }
  372. .submit{
  373. height: 228rpx;
  374. .btn{
  375. margin: 60rpx auto;
  376. text-align: center;
  377. width: 690rpx;
  378. height: 88rpx;
  379. background: #2671E2;
  380. border-radius: 8rpx;
  381. font-size: 32tpx;
  382. font-weight: 400;
  383. color: #FFFFFF;
  384. line-height: 88rpx;
  385. }
  386. }
  387. .con-msg-con{
  388. display: flex;
  389. flex-wrap: wrap;
  390. // justify-content: space-around;
  391. border-bottom: 1px solid #E0E0E0;
  392. .chebox{
  393. // width: 20%;
  394. height: 60rpx;
  395. line-height: 60rpx;
  396. margin: 10rpx 0;
  397. margin-right: 20rpx;
  398. border: 1px solid #E0E0E0;
  399. box-sizing: border-box;
  400. padding: 0 10rpx;
  401. }
  402. }
  403. </style>