create.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. <template>
  2. <view class="page">
  3. <view class="form">
  4. <u-form :model="form" ref="uForm">
  5. <u-form-item label-width="150" label="姓名" prop="name" required>
  6. <u-input placeholder="请输入客户姓名" v-model="form.name" type="text"></u-input>
  7. </u-form-item>
  8. <u-form-item label-width="150" label="性别" prop="sex" required>
  9. <u-radio-group v-model="form.sex" active-color="#2979ff">
  10. <u-radio name="male">先生</u-radio>
  11. <u-radio name="female">女士</u-radio>
  12. </u-radio-group>
  13. </u-form-item>
  14. <u-form-item label-width="150" label="意向项目" prop="estate_name" required>
  15. <u-input type="select" :select-open="propertySelectShow" v-model="form.estate_name" placeholder="请选择推荐项目" @click="propertySelectShow = true"></u-input>
  16. <!-- <u-input type="select" :select-open="propertySelectShow" v-model="form.estate_name" placeholder="请选择推荐项目" @click="openEstateList"></u-input> -->
  17. </u-form-item>
  18. <u-form-item v-if="form.phone_type == '2'" label-width="150" label="手机号">
  19. <view @click.native="phoneHandle" style="position: absolute;left: 0;top: 0;width: 40px;height: 40px;"></view>
  20. <u-input placeholder="输前三" v-model="phoneBefore3" type="number" style="display: inline-block;width: 70px;" input-align="right"></u-input>
  21. <view style="display: inline-block;">****</view>
  22. <u-input placeholder="输后四" v-model="phoneAfter4" type="number" style="display: inline-block;width: 70px;"></u-input>
  23. </u-form-item>
  24. <u-form-item v-else label-width="150" label="手机号" prop="phone" required>
  25. <view @click.native="phoneHandle" style="position: absolute;left: 0;top: 0;width: 40px;height: 40px;"></view>
  26. <u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
  27. </u-form-item>
  28. <u-form-item label-width="150" label="备注信息" prop="remark" label-position="top">
  29. <u-input placeholder="客户描述说明,如客户意向户型或面积等信息" v-model="form.remark" type="textarea"></u-input>
  30. </u-form-item>
  31. <!-- <u-form-item v-show="form.estate_id !== null" label-width="180" label="指定置业顾问" prop="saler_id">
  32. <u-input type="select" :select-open="salerSelectShow" v-model="form.saler_name" placeholder="非必选" @click="salerSelectShow = true"></u-input>
  33. </u-form-item> -->
  34. </u-form>
  35. <u-gap height="60"></u-gap>
  36. <u-button type="primary" :diabled="submitButtonDisabled" @click="submitHandle">提交</u-button>
  37. </view>
  38. <!-- 列表选择 -->
  39. <!-- <u-select mode="single-column" :list="propertySelectList" v-model="propertySelectShow" @confirm="propertySelectConfirm"></u-select> -->
  40. <u-select mode="single-column" :list="salerSelectList" v-model="salerSelectShow" @confirm="salerSelectConfirm"></u-select>
  41. <!-- modal -->
  42. <u-modal v-model="submitModalShow" content="请务必仔细确认各项信息是否正确" :show-cancel-button="true" @confirm="submit()"></u-modal>
  43. <u-modal v-model="modalShow" :content="modalContent" :show-cancel-button="true" @cancel="modalCancel()" @confirm="modalConfirm()"></u-modal>
  44. <!-- utoast -->
  45. <u-toast ref="uToast" />
  46. <u-popup v-model="propertySelectShow" mode="center" width="90%" height="100%">
  47. <view class="bwin-popup scoped-estate-popup">
  48. <view class="scoped-popup-header-input">
  49. <u-input class="input" v-model="curEstateName" placeholder="没找到楼盘??点这输入关键字搜索"></u-input>
  50. <view class="b" @click="getEstateList">搜索</view>
  51. </view>
  52. <scroll-view :scroll-y="true" class="popup-body">
  53. <view class="scoped-estate-list">
  54. <view v-for="(item, index) in estateList" :class="form.estate_id == item.id ? 'sel-item cur' : 'sel-item'" @click="listItemHandle(item)" :key="index">
  55. <view class="sel-left">
  56. <image class="img" :src="item.pri_image" mode="aspectFill"></image>
  57. </view>
  58. <view class="sel-right">
  59. <view class="p1">{{item.estate_name}}</view>
  60. <view class="p2">
  61. <u-tag
  62. :text="areaTypeObj[item.area_type]"
  63. :type="'success'"
  64. size="mini"
  65. ></u-tag>
  66. </view>
  67. <view class="p3" v-if="userInfo2.auth_state == 1">带看需收集:{{ item.report_visit }}</view>
  68. <view class="p3" v-if="userInfo2.auth_state == 1">报备/带看保护期:{{ item.report_lock }}天/{{ item.lead_lock }}天</view>
  69. </view>
  70. </view>
  71. </view>
  72. </scroll-view>
  73. <view class="popup-footer" style="position: fixed;bottom: 12rpx;">
  74. <u-button size="medium" @click="propertySelectShow = false">关闭</u-button>
  75. <u-button size="medium" type="primary" @click="propertySelectShow = false">确定</u-button>
  76. </view>
  77. </view>
  78. </u-popup>
  79. </view>
  80. </template>
  81. <script>
  82. import { arrToObj } from '@/utils'
  83. export default {
  84. data() {
  85. return {
  86. form: {
  87. name: null,
  88. phone: null,
  89. sex: 'male',
  90. remark: null,
  91. estate_id: 2,
  92. phone_type: '1',
  93. estate_name: '江投.朝阳春天',
  94. saler_id: null,
  95. saler_name: null
  96. },
  97. phoneBefore3: '',
  98. phoneAfter4: '',
  99. customer_id: null,
  100. submitButtonDisabled: true,
  101. rules: {
  102. name: [
  103. {
  104. required: true,
  105. message: '姓名不得为空',
  106. trigger: ['change', 'blur']
  107. },
  108. ],
  109. phone: [
  110. {
  111. required: true,
  112. message: '手机号不得为空',
  113. trigger: ['change', 'blur']
  114. },
  115. // 11个字符判断
  116. {
  117. len: 11,
  118. message: '手机号格式不正确',
  119. trigger: ['change', 'blur']
  120. },
  121. ],
  122. estate_name: [
  123. {
  124. required: true,
  125. message: '意向项目不能为空',
  126. trigger: ['change']
  127. },
  128. ]
  129. },
  130. propertySelectShow: false,
  131. propertySelectList: [],
  132. estateList: [],
  133. areaTypeObj: {},
  134. userInfo2: {},
  135. curEstateName: '',
  136. salerSelectShow: false,
  137. salerSelectList: [],
  138. submitModalShow: false,
  139. modalShow: false,
  140. modalContent: ''
  141. };
  142. },
  143. onLoad(data) {
  144. const that = this
  145. const eventChannel = that.getOpenerEventChannel(); // that 需指向 this
  146. // 监听data事件,获取上一页面通过eventChannel.emit传送到当前页面的数据
  147. if (eventChannel.on) {
  148. eventChannel.on('data', data => {
  149. if(data.info.name) that.form.name = data.info.name;
  150. if(data.info.phone) that.form.phone = data.info.phone;
  151. if(data.info.sex) that.form.sex = data.info.sex;
  152. if(data.info.demand) that.form.remark = data.info.demand;
  153. // if(data.info.estate_id) that.form.estate_id = data.info.estate_id;
  154. // if(data.info.estate_name) that.form.estate_name = data.info.estate_name;
  155. })
  156. }
  157. },
  158. created () {
  159. this.userInfo2 = uni.getStorageSync('MD_userInfo2')
  160. const dictObj = uni.getStorageSync('MD_dict')
  161. this.areaTypeObj = arrToObj(dictObj.area_type)
  162. uni.api.estate.apiestatelist({page_size: 100, report_open: 1, is_inner: 2}).then(res => {
  163. let list = res.list || []
  164. let propertySelectList = []
  165. this.estateList = [...list]
  166. list.forEach(item => {
  167. propertySelectList.push({
  168. value: item.estate_id,
  169. label: item.estate_name,
  170. })
  171. })
  172. this.propertySelectList = [...propertySelectList]
  173. })
  174. },
  175. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  176. onReady() {
  177. this.$refs.uForm.setRules(this.rules);
  178. },
  179. methods: {
  180. phoneHandle () {
  181. let p = this.form.phone
  182. p = p.replace(/ /g, '')
  183. this.form.phone = p
  184. this.form = {...this.form}
  185. },
  186. getEstateList () {
  187. uni.api.estate.apiestatelist({page_size: 100, report_open: 1, is_inner: 2, estate_name: this.curEstateName}).then(res => {
  188. let list = res.list || []
  189. this.estateList = [...list]
  190. })
  191. },
  192. listItemHandle (val) {
  193. let form = this.form
  194. form.estate_id = val.estate_id
  195. form.estate_name = val.estate_name
  196. form.phone_type = val.phone_type || '1'
  197. this.form = {...form}
  198. },
  199. // 选择所属项目回调
  200. propertySelectConfirm(e) {
  201. e.map((val, index) => {
  202. this.form.estate_id = val.value;
  203. this.form.estate_name = val.label;
  204. });
  205. },
  206. // openEstateList () {
  207. // uni.navigateTo({
  208. // url: `/pages/estate/list?eid=${this.form.estate_id}&ename=${this.form.estate_name}`
  209. // })
  210. // },
  211. submitHandle() {
  212. const that = this
  213. this.$refs.uForm.validate(valid => {
  214. if (valid) {
  215. // 验证成功
  216. let params = {
  217. phone_type: that.form.phone_type || '1',
  218. name: that.form.name,
  219. phone: that.form.phone,
  220. sex: that.form.sex,
  221. remark: that.form.remark,
  222. estate_id: that.form.estate_id,
  223. estate_name: that.form.estate_name,
  224. }
  225. if (params.phone_type == '2') {
  226. if (that.phoneBefore3 && that.phoneAfter4) {
  227. params.phone = `${that.phoneBefore3}****${that.phoneAfter4}`
  228. } else {
  229. that.$refs.uToast.show({
  230. title: '请输入报备手机号的前三后四',
  231. type: 'warning'
  232. });
  233. return
  234. }
  235. }
  236. uni.api.estate.apireportadd(params).then(res => {
  237. uni.$msgConfirm('报备成功,是否前往报备列表?', () => {
  238. uni.navigateTo({
  239. url: '/pages/agent/recommend/list'
  240. })
  241. }, () => {
  242. this.form = {
  243. name: null,
  244. phone: null,
  245. sex: 'male',
  246. remark: null,
  247. estate_id: null,
  248. estate_name: null,
  249. }
  250. })
  251. })
  252. } else {
  253. console.log('验证失败');
  254. }
  255. });
  256. },
  257. // 获取手机号
  258. getPhoneNumber: function(e) {
  259. // 点击获取手机号码按钮
  260. let _that = this;
  261. if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
  262. _that.$refs.uToast.show({
  263. title: '您可以在个人设置中再次绑定',
  264. type: 'warning'
  265. });
  266. setTimeout(() => {
  267. _that.reLunchUser();
  268. }, 1500);
  269. return; // 即用户拒绝授权
  270. }
  271. console.log(e.detail.errMsg);
  272. console.log(e.detail.iv);
  273. console.log(e.detail.encryptedData);
  274. let iv = e.detail.iv;
  275. let encryptedData = e.detail.encryptedData;
  276. // 不是登陆完第一时间授权
  277. wx.login({
  278. success(res) {
  279. if (res.code) {
  280. // 设置用户手机号
  281. _that.setUserPhoneNumber(encryptedData, iv, res.code);
  282. } else {
  283. this.$refs.uToast.show({
  284. title: res.errMsg,
  285. type: 'warning'
  286. });
  287. console.log('登录失败!' + res.errMsg);
  288. }
  289. }
  290. });
  291. },
  292. // 以下是工具函数
  293. // 关闭键盘
  294. hideKeyboard() {
  295. uni.hideKeyboard();
  296. },
  297. // 格式化日期的月份或天数的显示(小于10,在前面增加0)
  298. getFormatDate(value) {
  299. if (value == undefined || value == '') {
  300. return '';
  301. }
  302. var str = value;
  303. if (parseInt(value) < 10) {
  304. str = '0' + value;
  305. }
  306. return str;
  307. }
  308. }
  309. };
  310. </script>
  311. <style lang="scss">
  312. .page {
  313. padding: 20rpx;
  314. background-color: #ffffff;
  315. }
  316. .form {
  317. border-radius: 10rpx;
  318. padding: 0 40rpx;
  319. }
  320. .popup-body {
  321. .tips-title {
  322. font-size: $u-p;
  323. margin-bottom: 20rpx;
  324. }
  325. .tips-content {
  326. font-size: $u-p2;
  327. color: $u-tips-color;
  328. margin-bottom: 60rpx;
  329. }
  330. }
  331. .id_card {
  332. color: #606266;
  333. width: 100%;
  334. height: 350rpx;
  335. display: flex;
  336. flex-direction: column;
  337. align-items: center;
  338. justify-content: center;
  339. background-color: #f4f5f6;
  340. font-size: $u-p2;
  341. }
  342. .footer {
  343. position: absolute;
  344. text-align: center;
  345. bottom: 40rpx;
  346. font-size: $u-p2;
  347. .agreement {
  348. color: $u-type-error;
  349. }
  350. }
  351. .slot-content {
  352. font-size: 28rpx;
  353. color: $u-content-color;
  354. padding: 20rpx;
  355. }
  356. .scoped-estate-list {
  357. .sel-item {
  358. display: flex;
  359. border-bottom: 1PX solid #dcdcdc;
  360. padding: 20rpx;
  361. &.cur {
  362. background: #369af7;
  363. border-radius: 10rpx;
  364. overflow: hidden;
  365. .img {
  366. opacity: .6;
  367. }
  368. .p1 {
  369. color: #fff;
  370. }
  371. .p3 {
  372. color: #fff;
  373. }
  374. }
  375. }
  376. .sel-left {
  377. width: 180rpx;
  378. border-radius: 10rpx;
  379. .img {
  380. width: 180rpx;
  381. height: 120rpx;
  382. border-radius: 10rpx;
  383. }
  384. }
  385. .sel-right {
  386. // width: 450rpx;
  387. margin-left: 20rpx;
  388. .p1 {
  389. font-size: 30rpx;
  390. font-weight: bold;
  391. margin-bottom: 10rpx;
  392. }
  393. .p2 {
  394. margin-bottom: 10rpx;
  395. }
  396. .p3 {
  397. color: #369af7;
  398. font-size: 24rpx;
  399. font-weight: bold;
  400. }
  401. }
  402. }
  403. .scoped-estate-popup {
  404. height: 100%;
  405. padding-bottom: 100rpx;
  406. .popup-body {
  407. box-sizing: border-box;
  408. border-bottom: 1PX solid #dcdcdc;
  409. }
  410. }
  411. .scoped-popup-header-input {
  412. position: fixed;
  413. width: 90%;
  414. display: flex;
  415. border-bottom: 1PX solid #dcdcdc;
  416. .input {
  417. flex: 1;
  418. padding-left: 20rpx;
  419. height: 80rpx;
  420. .u-input__input {
  421. height: 80rpx;
  422. }
  423. }
  424. .b {
  425. width: 200rpx;
  426. height: 80rpx;
  427. line-height: 80rpx;
  428. background: #2d8cf0;
  429. color: #fff;
  430. text-align: center;
  431. margin-left: 20rpx;
  432. }
  433. }
  434. </style>