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.
 
 
 

416 linhas
9.4 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="0" shape='circle'>男</u-radio>
  28. <u-radio name="1" 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.wx"/>
  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="conmsg-msg-lab">
  90. <view class="conmsg-msg-lab-1">
  91. 置业需求
  92. </view>
  93. <view class="conmsg-msg-lab-inp">
  94. <input type="text" placeholder="请选择置业需求" @click="demandshow = true" v-model="selectform.demand" disabled/>
  95. </view>
  96. <view class="conmsg-msg-lab-img">
  97. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  98. </view>
  99. </view>
  100. <view class="conmsg-msg-lab">
  101. <view class="conmsg-msg-lab-1">
  102. 意向面积
  103. </view>
  104. <view class="conmsg-msg-lab-inp">
  105. <input type="text" placeholder="请选择意向面积" @click="areashow = true" v-model="selectform.area" disabled/>
  106. </view>
  107. <view class="conmsg-msg-lab-img">
  108. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  109. </view>
  110. </view>
  111. <view class="conmsg-msg-lab">
  112. <view class="conmsg-msg-lab-1">
  113. 预算
  114. </view>
  115. <view class="conmsg-msg-lab-inp">
  116. <input type="text" placeholder="请选择预算" @click="budgetshow = true" v-model="selectform.budget" disabled/>
  117. </view>
  118. <view class="conmsg-msg-lab-img">
  119. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  120. </view>
  121. </view>
  122. <view class="conmsg-msg-lab">
  123. <view class="conmsg-msg-lab-1">
  124. 关注点
  125. </view>
  126. <view class="conmsg-msg-lab-inp">
  127. <input type="text" placeholder="请选择关注点" @click="fouceshow = true" v-model="selectform.fouce" disabled/>
  128. </view>
  129. <view class="conmsg-msg-lab-img">
  130. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  131. </view>
  132. </view>
  133. <view class="conmsg-msg-lab">
  134. <view class="conmsg-msg-lab-1">
  135. 客户来源
  136. </view>
  137. <view class="conmsg-msg-lab-inp">
  138. <input type="text" placeholder="请选择客户来源" @click="soureshow = true" v-model="selectform.soure" disabled/>
  139. </view>
  140. <view class="conmsg-msg-lab-img">
  141. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  142. </view>
  143. </view>
  144. </view>
  145. </view>
  146. <view class="submit">
  147. <view class="btn">
  148. 确定
  149. </view>
  150. </view>
  151. <!-- 客户等级 -->
  152. <u-select v-model="lelveshow" :list="lelvelist" @confirm="lelveshowCallback"></u-select>
  153. <!-- 客户阶段 -->
  154. <u-select v-model="stageshow" :list="stagelist" @confirm="stageshowCallback"></u-select>
  155. <!-- 职业需求 -->
  156. <u-select v-model="demandshow" :list="demandlist" @confirm="demandshowCallback"></u-select>
  157. <!-- 意向面积 -->
  158. <u-select v-model="areashow" :list="arealist" @confirm="areashowCallback"></u-select>
  159. <!-- 预算 -->
  160. <u-select v-model="budgetshow" :list="budgetlist" @confirm="budgetshowCallback"></u-select>
  161. <!-- 关注点 -->
  162. <u-select v-model="fouceshow" :list="foucelist" @confirm="fouceshowCallback"></u-select>
  163. <!-- 客户来源 -->
  164. <u-select v-model="soureshow" :list="sourelist" @confirm="soureshowCallback"></u-select>
  165. </view>
  166. </template>
  167. <script>
  168. export default{
  169. data(){
  170. return{
  171. form:{
  172. name:'',
  173. sex:'0',
  174. phone:'',
  175. wx:'',
  176. lelve:'',
  177. stage:'',
  178. txea:'',
  179. demand:'',
  180. area:'',
  181. budget:'',
  182. fouce:'',
  183. soure:'',
  184. },
  185. selectform:{
  186. lelve:'A',
  187. stage:'',
  188. demand:'',
  189. area:'',
  190. budget:'',
  191. fouce:'',
  192. soure:'',
  193. },
  194. lelveshow:false,
  195. stageshow:false,
  196. demandshow:false,
  197. areashow:false,
  198. budgetshow:false,
  199. fouceshow:false,
  200. soureshow:false,
  201. lelvelist:[
  202. {
  203. value:1,
  204. label:'A'
  205. },
  206. {
  207. value:2,
  208. label:'B'
  209. },
  210. {
  211. value:3,
  212. label:'C'
  213. },
  214. {
  215. value:4,
  216. label:'D'
  217. },
  218. ],
  219. stagelist:[
  220. {
  221. value:1,
  222. label:'首次到访'
  223. },
  224. {
  225. value:2,
  226. label:'首次到访B'
  227. },
  228. {
  229. value:3,
  230. label:'首次到访C'
  231. },
  232. ],
  233. demandlist:[
  234. {
  235. value:1,
  236. label:'需求'
  237. },
  238. {
  239. value:2,
  240. label:'首次到访B'
  241. },
  242. {
  243. value:3,
  244. label:'首次到访C'
  245. },
  246. ],
  247. arealist:[
  248. {
  249. value:1,
  250. label:'面积'
  251. },
  252. {
  253. value:2,
  254. label:'首次到访B'
  255. },
  256. {
  257. value:3,
  258. label:'首次到访C'
  259. },
  260. ],
  261. budgetlist:[
  262. {
  263. value:1,
  264. label:'预算'
  265. },
  266. {
  267. value:2,
  268. label:'首次到访B'
  269. },
  270. {
  271. value:3,
  272. label:'首次到访C'
  273. },
  274. ],
  275. foucelist:[
  276. {
  277. value:1,
  278. label:'关注'
  279. },
  280. {
  281. value:2,
  282. label:'首次到访B'
  283. },
  284. {
  285. value:3,
  286. label:'首次到访C'
  287. },
  288. ],
  289. sourelist:[
  290. {
  291. value:1,
  292. label:'来源'
  293. },
  294. {
  295. value:2,
  296. label:'首次到访B'
  297. },
  298. {
  299. value:3,
  300. label:'首次到访C'
  301. },
  302. ],
  303. }
  304. },
  305. methods:{
  306. lelveshowCallback(e){
  307. this.selectform.lelve=e[0].label
  308. this.form.lelve=e[0].value
  309. },
  310. stageshowCallback(e){
  311. this.selectform.stage=e[0].label
  312. this.form.stage=e[0].value
  313. },
  314. demandshowCallback(e){
  315. this.selectform.demand=e[0].label
  316. this.form.demand=e[0].value
  317. },
  318. areashowCallback(e){
  319. this.selectform.area=e[0].label
  320. this.form.area=e[0].value
  321. },
  322. budgetshowCallback(e){
  323. this.selectform.budget=e[0].label
  324. this.form.budget=e[0].value
  325. },
  326. fouceshowCallback(e){
  327. this.selectform.fouce=e[0].label
  328. this.form.fouce=e[0].value
  329. },
  330. soureshowCallback(e){
  331. this.selectform.soure=e[0].label
  332. this.form.soure=e[0].value
  333. },
  334. }
  335. }
  336. </script>
  337. <style lang="scss" scoped>
  338. .box {
  339. width: 100%;
  340. height: 100%;
  341. background: #F8F8F8;
  342. overflow: hidden;
  343. }
  344. .conmsg{
  345. background: #FFFFFF;
  346. margin-top: 20rpx;
  347. .conmsg-title{
  348. height: 92rpx;
  349. line-height: 92rpx;
  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. height: 102rpx;
  360. display: flex;
  361. font-size: 30rpx;
  362. font-weight: 400;
  363. color: #333333;
  364. border-bottom: 1px solid #E0E0E0;
  365. line-height: 102rpx;
  366. .conmsg-msg-lab-1{
  367. display: flex;
  368. width: 136rpx;
  369. .star{
  370. color: #E7483C;
  371. line-height: 108rpx;
  372. }
  373. }
  374. .conmsg-msg-lab-inp{
  375. margin-top: 30rpx;
  376. margin-left: 44rpx;
  377. }
  378. .conmsg-msg-lab-img{
  379. width: 14rpx;
  380. height: 30rpx;
  381. margin-top: 6rpx;
  382. margin-left: auto;
  383. image{
  384. width: 100%;
  385. height: 100%;
  386. }
  387. }
  388. }
  389. }
  390. }
  391. .submit{
  392. height: 228rpx;
  393. .btn{
  394. margin: 60rpx auto;
  395. text-align: center;
  396. width: 690rpx;
  397. height: 88rpx;
  398. background: #2671E2;
  399. border-radius: 8rpx;
  400. font-size: 32tpx;
  401. font-weight: 400;
  402. color: #FFFFFF;
  403. line-height: 88rpx;
  404. }
  405. }
  406. </style>