mycreate.vue 7.5 KB

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