create.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  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="phone" required>
  15. <u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
  16. </u-form-item>
  17. <u-form-item label-width="150" label="备注信息" prop="remark" label-position="top">
  18. <u-input placeholder="客户描述说明,如客户意向户型或面积等信息" v-model="form.remark" type="textarea"></u-input>
  19. </u-form-item>
  20. <u-form-item label-width="150" label="意向项目" prop="estate_name" required>
  21. <u-input type="select" :select-open="propertySelectShow" v-model="form.estate_name" placeholder="请选择推荐项目" @click="propertySelectShow = true"></u-input>
  22. </u-form-item>
  23. <!-- <u-form-item v-show="form.estate_id !== null" label-width="180" label="指定置业顾问" prop="saler_id">
  24. <u-input type="select" :select-open="salerSelectShow" v-model="form.saler_name" placeholder="非必选" @click="salerSelectShow = true"></u-input>
  25. </u-form-item> -->
  26. </u-form>
  27. <u-gap height="60"></u-gap>
  28. <u-button type="primary" :diabled="submitButtonDisabled" @click="submitHandle">提交</u-button>
  29. </view>
  30. <!-- 列表选择 -->
  31. <u-select mode="single-column" :list="propertySelectList" v-model="propertySelectShow" @confirm="propertySelectConfirm"></u-select>
  32. <u-select mode="single-column" :list="salerSelectList" v-model="salerSelectShow" @confirm="salerSelectConfirm"></u-select>
  33. <!-- modal -->
  34. <u-modal v-model="submitModalShow" content="请务必仔细确认各项信息是否正确" :show-cancel-button="true" @confirm="submit()"></u-modal>
  35. <u-modal v-model="modalShow" :content="modalContent" :show-cancel-button="true" @cancel="modalCancel()" @confirm="modalConfirm()"></u-modal>
  36. <!-- utoast -->
  37. <u-toast ref="uToast" />
  38. </view>
  39. </template>
  40. <script>
  41. export default {
  42. data() {
  43. return {
  44. form: {
  45. name: null,
  46. phone: null,
  47. sex: 'male',
  48. remark: null,
  49. estate_id: 2,
  50. estate_name: '江投.朝阳春天',
  51. saler_id: null,
  52. saler_name: null
  53. },
  54. customer_id: null,
  55. submitButtonDisabled: true,
  56. rules: {
  57. name: [
  58. {
  59. required: true,
  60. message: '姓名不得为空',
  61. trigger: ['change', 'blur']
  62. },
  63. ],
  64. phone: [
  65. {
  66. required: true,
  67. message: '手机号不得为空',
  68. trigger: ['change', 'blur']
  69. },
  70. // 11个字符判断
  71. {
  72. len: 11,
  73. message: '手机号格式不正确',
  74. trigger: ['change', 'blur']
  75. },
  76. ],
  77. estate_name: [
  78. {
  79. required: true,
  80. message: '意向项目不能为空',
  81. trigger: ['change']
  82. },
  83. ]
  84. },
  85. propertySelectShow: false,
  86. propertySelectList: [],
  87. salerSelectShow: false,
  88. salerSelectList: [],
  89. submitModalShow: false,
  90. modalShow: false,
  91. modalContent: ''
  92. };
  93. },
  94. onLoad(data) {
  95. const that = this
  96. const eventChannel = that.getOpenerEventChannel(); // that 需指向 this
  97. // 监听data事件,获取上一页面通过eventChannel.emit传送到当前页面的数据
  98. if (eventChannel.on) {
  99. eventChannel.on('data', data => {
  100. that.form.name = data.info.name;
  101. that.form.phone = data.info.phone;
  102. that.form.sex = data.info.sex;
  103. that.form.remark = data.info.demand;
  104. })
  105. }
  106. },
  107. created () {
  108. uni.api.estate.apiestatelist().then(res => {
  109. let list = res.list || []
  110. let propertySelectList = []
  111. list.forEach(item => {
  112. propertySelectList.push({
  113. value: item.estate_id,
  114. label: item.estate_name,
  115. })
  116. })
  117. this.propertySelectList = [...propertySelectList]
  118. })
  119. },
  120. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  121. onReady() {
  122. this.$refs.uForm.setRules(this.rules);
  123. },
  124. methods: {
  125. // 选择所属项目回调
  126. propertySelectConfirm(e) {
  127. e.map((val, index) => {
  128. this.form.estate_id = val.value;
  129. this.form.estate_name = val.label;
  130. });
  131. },
  132. submitHandle() {
  133. const that = this
  134. this.$refs.uForm.validate(valid => {
  135. if (valid) {
  136. // 验证成功
  137. uni.api.estate.apireportadd({
  138. phone_type: 1,
  139. name: that.form.name,
  140. phone: that.form.phone,
  141. sex: that.form.sex,
  142. remark: that.form.remark,
  143. estate_id: that.form.estate_id,
  144. estate_name: that.form.estate_name,
  145. }).then(res => {
  146. uni.$msgConfirm('添加成功,是否前往报备列表?', () => {
  147. uni.navigateTo({
  148. url: '/pages/agent/recommend/list'
  149. })
  150. }, () => {
  151. this.form = {
  152. name: null,
  153. phone: null,
  154. sex: 'male',
  155. remark: null,
  156. estate_id: null,
  157. estate_name: null,
  158. }
  159. })
  160. })
  161. } else {
  162. console.log('验证失败');
  163. }
  164. });
  165. },
  166. // 获取手机号
  167. getPhoneNumber: function(e) {
  168. // 点击获取手机号码按钮
  169. let _that = this;
  170. if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
  171. _that.$refs.uToast.show({
  172. title: '您可以在个人设置中再次绑定',
  173. type: 'warning'
  174. });
  175. setTimeout(() => {
  176. _that.reLunchUser();
  177. }, 1500);
  178. return; // 即用户拒绝授权
  179. }
  180. console.log(e.detail.errMsg);
  181. console.log(e.detail.iv);
  182. console.log(e.detail.encryptedData);
  183. let iv = e.detail.iv;
  184. let encryptedData = e.detail.encryptedData;
  185. // 不是登陆完第一时间授权
  186. wx.login({
  187. success(res) {
  188. if (res.code) {
  189. // 设置用户手机号
  190. _that.setUserPhoneNumber(encryptedData, iv, res.code);
  191. } else {
  192. this.$refs.uToast.show({
  193. title: res.errMsg,
  194. type: 'warning'
  195. });
  196. console.log('登录失败!' + res.errMsg);
  197. }
  198. }
  199. });
  200. },
  201. // 以下是工具函数
  202. // 关闭键盘
  203. hideKeyboard() {
  204. uni.hideKeyboard();
  205. },
  206. // 格式化日期的月份或天数的显示(小于10,在前面增加0)
  207. getFormatDate(value) {
  208. if (value == undefined || value == '') {
  209. return '';
  210. }
  211. var str = value;
  212. if (parseInt(value) < 10) {
  213. str = '0' + value;
  214. }
  215. return str;
  216. }
  217. }
  218. };
  219. </script>
  220. <style lang="scss">
  221. .page {
  222. padding: 20rpx;
  223. background-color: #ffffff;
  224. }
  225. .form {
  226. border-radius: 10rpx;
  227. padding: 0 40rpx;
  228. }
  229. .popup-body {
  230. .tips-title {
  231. font-size: $u-p;
  232. margin-bottom: 20rpx;
  233. }
  234. .tips-content {
  235. font-size: $u-p2;
  236. color: $u-tips-color;
  237. margin-bottom: 60rpx;
  238. }
  239. }
  240. .id_card {
  241. color: #606266;
  242. width: 100%;
  243. height: 350rpx;
  244. display: flex;
  245. flex-direction: column;
  246. align-items: center;
  247. justify-content: center;
  248. background-color: #f4f5f6;
  249. font-size: $u-p2;
  250. }
  251. .footer {
  252. position: absolute;
  253. text-align: center;
  254. bottom: 40rpx;
  255. font-size: $u-p2;
  256. .agreement {
  257. color: $u-type-error;
  258. }
  259. }
  260. .slot-content {
  261. font-size: 28rpx;
  262. color: $u-content-color;
  263. padding: 20rpx;
  264. }
  265. </style>