Informationmodification.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <template>
  2. <view class="OutermostLayer">
  3. <view class="Personalinformationedit">
  4. <!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 -->
  5. <u--form
  6. labelPosition="left"
  7. :model="model1"
  8. :rules="rules"
  9. ref="form1">
  10. <u-form-item
  11. labelWidth="120"
  12. label="用户名:"
  13. prop="userInfo.realName"
  14. borderBottom
  15. ref="item1" >
  16. <u--input
  17. v-model="model1.userInfo.realName"
  18. clearable
  19. border="none"
  20. ></u--input>
  21. </u-form-item>
  22. <u-form-item
  23. labelWidth="120"
  24. label="手机:"
  25. prop="userInfo.mobile"
  26. borderBottom
  27. ref="item1"
  28. >
  29. <u--input
  30. v-model="model1.userInfo.mobile"
  31. clearable
  32. border="none"
  33. ></u--input>
  34. </u-form-item>
  35. <u-form-item
  36. labelWidth="120"
  37. label="邮箱:"
  38. prop="userInfo.email"
  39. borderBottom
  40. ref="item1"
  41. >
  42. <u--input
  43. v-model="model1.userInfo.email"
  44. clearable
  45. border="none"
  46. ></u--input>
  47. </u-form-item>
  48. <u-form-item
  49. label="性别:"
  50. labelWidth="120"
  51. prop="userInfo.gender"
  52. borderBottom
  53. @click="showSex = true"
  54. ref="item1"
  55. >
  56. <u--input
  57. v-model="model1.userInfo.gender"
  58. disabled
  59. disabledColor="#ffffff"
  60. placeholder="请选择性别"
  61. border="none"
  62. ></u--input>
  63. <u-icon
  64. slot="right"
  65. name="arrow-right"
  66. ></u-icon>
  67. </u-form-item>
  68. <!--<u-form-item-->
  69. <!--labelWidth="120"-->
  70. <!--label="地址:"-->
  71. <!--prop="userInfo.address"-->
  72. <!--borderBottom-->
  73. <!--ref="item1" >-->
  74. <!--<u&#45;&#45;input-->
  75. <!--v-model="model1.userInfo.address"-->
  76. <!--clearable-->
  77. <!--border="none"-->
  78. <!--&gt;</u&#45;&#45;input>-->
  79. <!--</u-form-item>-->
  80. <u-form-item
  81. labelWidth="120"
  82. label="部门:"
  83. prop="userInfo.deptName"
  84. borderBottom
  85. ref="item1" >
  86. <u--input
  87. v-model="model1.userInfo.deptName"
  88. clearable
  89. border="none"
  90. ></u--input>
  91. </u-form-item>
  92. <!--<u-form-item-->
  93. <!--labelWidth="120"-->
  94. <!--label="职位:"-->
  95. <!--prop="userInfo.position"-->
  96. <!--borderBottom-->
  97. <!--ref="item1" >-->
  98. <!--<u&#45;&#45;input-->
  99. <!--v-model="model1.userInfo.position"-->
  100. <!--clearable-->
  101. <!--border="none"-->
  102. <!--&gt;</u&#45;&#45;input>-->
  103. <!--</u-form-item>-->
  104. </u--form>
  105. <!--<u-action-sheet-->
  106. <!--:show="showSex"-->
  107. <!--:actions="actions"-->
  108. <!--title="请选择性别"-->
  109. <!--@close="showSex = false"-->
  110. <!--@select="sexSelect"-->
  111. <!--&gt;-->
  112. <!--</u-action-sheet>-->
  113. <view class="submitdata">
  114. <u-button type="primary" @click="submit">提交</u-button>
  115. </view>
  116. </view>
  117. <u-notify ref="uNotify" message="" ></u-notify>
  118. <u-picker :show="showSex" @cancel="showSex = false" @confirm="sexSelect" :columns="actions" keyName="name"></u-picker>
  119. </view>
  120. </template>
  121. <script>
  122. export default {
  123. data() {
  124. return {
  125. getuserInfo:{},
  126. showSex: false,
  127. model1: {
  128. userInfo: {
  129. realName: '',
  130. gender: '',
  131. mobile:'',
  132. email:'',
  133. // address:'安徽省合肥市',
  134. deptName:'',
  135. // position:'前端工程师'
  136. },
  137. },
  138. actions: [
  139. [
  140. {
  141. id:0,
  142. name: '男',
  143. },
  144. {
  145. id:1,
  146. name: '女',
  147. },
  148. {id:2,
  149. name: '保密',
  150. },
  151. ]
  152. ],
  153. rules: {
  154. 'userInfo.name': {
  155. type: 'string',
  156. required: true,
  157. message: '请填写姓名',
  158. trigger: ['blur', 'change']
  159. },
  160. 'userInfo.email': [
  161. {
  162. required: true,
  163. message: '请输入邮箱号',
  164. trigger: ['change','blur'],
  165. },
  166. {
  167. // 自定义验证函数,见上说明
  168. validator: (rule, value, callback) => {
  169. // 上面有说,返回true表示校验通过,返回false表示不通过
  170. // uni.$u.test.mobile()就是返回true或者false的
  171. return uni.$u.test.email(value);
  172. },
  173. message: '邮箱不正确',
  174. // 触发器可以同时用blur和change
  175. trigger: ['change','blur'],
  176. }
  177. ],
  178. 'userInfo.mobile': [
  179. {
  180. required: true,
  181. message: '请输入邮箱',
  182. trigger: ['change','blur'],
  183. },
  184. {
  185. // 自定义验证函数,见上说明
  186. validator: (rule, value, callback) => {
  187. // 上面有说,返回true表示校验通过,返回false表示不通过
  188. // uni.$u.test.mobile()就是返回true或者false的
  189. return uni.$u.test.mobile(value);
  190. },
  191. message: '手机号码不正确',
  192. // 触发器可以同时用blur和change
  193. trigger: ['change','blur'],
  194. }
  195. ],
  196. 'userInfo.gender': {
  197. type: 'string',
  198. max: 2,
  199. required: true,
  200. message: '请选择',
  201. trigger: ['blur', 'change']
  202. },
  203. },
  204. };
  205. },
  206. onLoad(options){
  207. let userInfo= uni.getStorageSync('getuserInfo');
  208. if(userInfo.gender==0){
  209. userInfo.gender='男'
  210. }else if(userInfo.gender==1){
  211. userInfo.gender='女'
  212. }else if(userInfo.gender==2){
  213. userInfo.gender='保密'
  214. }
  215. // console.log('111111111111111111',userInfo)
  216. this.model1.userInfo=userInfo;
  217. //this.getuserInfo
  218. },
  219. methods: {
  220. sexSelect(e) {
  221. //console.log('111111111111111111',e)
  222. this.model1.userInfo.gender = e.value[0].name;
  223. this.$refs.form1.validateField('userInfo.gender')
  224. this.showSex=false;
  225. },
  226. submit() {
  227. this.$refs.form1.validate().then(res => {
  228. if(this.model1.userInfo.gender=='男'){
  229. this.model1.userInfo.gender=0
  230. }else if(this.model1.userInfo.gender=='女'){
  231. this.model1.userInfo.gender=1
  232. }else if(this.model1.userInfo.gender=='保密'){
  233. this.model1.userInfo.gender=2
  234. }
  235. this.$api.put('/user/',this.model1.userInfo)
  236. .then(res=>{
  237. console.log('111111111111111111',res)
  238. if(res.data.code==0){
  239. uni.navigateBack({
  240. delta: 1
  241. });
  242. }else{
  243. this.$refs.uNotify.error(res.data.msg)
  244. }
  245. })
  246. }).catch(errors => {
  247. uni.$u.toast('校验失败')
  248. })
  249. },
  250. },
  251. onReady() {
  252. //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
  253. this.$refs.form1.setRules(this.rules)
  254. },
  255. };
  256. </script>
  257. <style lang="scss">
  258. .Personalinformationedit{
  259. padding: 30rpx;
  260. }
  261. .submitdata{
  262. margin-top: 40rpx;
  263. }
  264. </style>