useredit.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <template>
  2. <view>
  3. <cu-custom bgColor="bg-gradual-pink" :isBack="true">
  4. <block slot="backText">返回</block>
  5. <block slot="content">编辑资料</block>
  6. </cu-custom>
  7. <form>
  8. <view class="cu-form-group">
  9. <view class="title">姓名</view>
  10. <input placeholder="请输入姓名" name="input" v-model="myFormData.realname"></input>
  11. </view>
  12. <view class="cu-form-group">
  13. <view class="title">用户名</view>
  14. <input placeholder="用户名" name="input" v-model="myFormData.username" disabled></input>
  15. </view>
  16. <view class="cu-form-group">
  17. <view class="title">头像</view>
  18. <view class="grid col-4 grid-square flex-sub">
  19. <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
  20. <image :src="imgList[index]" mode="aspectFill"></image>
  21. <view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
  22. <text class='cuIcon-close'></text>
  23. </view>
  24. </view>
  25. <view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
  26. <text class='cuIcon-cameraadd'></text>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="cu-form-group margin-top">
  31. <view class="title">性别</view>
  32. <switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
  33. </view>
  34. <view class="cu-form-group">
  35. <view class="title">生日</view>
  36. <picker mode="date" :value="myFormData.birthday" @change="DateChange">
  37. <view class="picker">
  38. {{myFormData.birthday}}
  39. </view>
  40. </picker>
  41. </view>
  42. <view class="cu-form-group margin-top">
  43. <view class="title">所在部门</view>
  44. <input placeholder="所在部门" name="input" v-model="myFormData.orgCode" disabled></input>
  45. </view>
  46. <view class="cu-form-group">
  47. <view class="title">工号</view>
  48. <input placeholder="工号" name="input" v-model="myFormData.workNo" disabled></input>
  49. </view>
  50. <view class="cu-form-group margin-top">
  51. <view class="title">手机号码</view>
  52. <input placeholder="输入手机号码" name="input" v-model="myFormData.phone"></input>
  53. <view class="cu-capsule radius">
  54. <view class='cu-tag bg-blue '>
  55. +86
  56. </view>
  57. <view class="cu-tag line-blue">
  58. 中国大陆
  59. </view>
  60. </view>
  61. </view>
  62. <view class="cu-form-group">
  63. <view class="title">邮箱</view>
  64. <input placeholder="输入邮箱" name="input" v-model="myFormData.email"></input>
  65. </view>
  66. <view class="padding flex flex-direction">
  67. <button class="cu-btn bg-blue lg" @click="onSubmit">提交</button>
  68. </view>
  69. </form>
  70. </view>
  71. </template>
  72. <script>
  73. export default {
  74. data() {
  75. return {
  76. index: -1,
  77. switchC: true,
  78. imgList: [],
  79. uploadUrl:"/sys/common/upload",
  80. myFormData:{
  81. avatar:'',
  82. realname:'',
  83. username:'',
  84. sex:1,
  85. birthday:'',
  86. orgCode:'',
  87. workNo:'',
  88. phone:'',
  89. email:'',
  90. id:'',
  91. },
  92. };
  93. },
  94. onLoad: function (option) {
  95. console.log("this.$Route.query",this.$Route.query);
  96. let query=this.$Route.query
  97. if(query){
  98. this.myFormData=query;
  99. if(this.myFormData.sex=='女'){
  100. this.switchC = false
  101. }else if(this.myFormData.sex=='男'){
  102. this.switchC = true
  103. }
  104. if(this.myFormData.avatar){
  105. this.imgList=[this.myFormData.avatar]
  106. }
  107. if(!this.myFormData.birthday){
  108. this.myFormData.birthday= '无'
  109. }
  110. if(this.myFormData.identity=='普通成员'){
  111. this.myFormData.identity = 1
  112. }else if(this.myFormData.identity=='上级'){
  113. this.myFormData.identity = 2
  114. }
  115. if(this.myFormData.status=='正常'){
  116. this.myFormData.status = 1
  117. }else if(this.myFormData.status=='冻结'){
  118. this.myFormData.status = 2
  119. }
  120. this.Avatar=this.myFormData.avatar
  121. Object.keys(this.myFormData).map(key=>{
  122. if(this.myFormData[key]=='无'){
  123. this.myFormData[key] = ''
  124. }
  125. })
  126. console.log("this.myFormData",this.myFormData)
  127. }
  128. },
  129. methods: {
  130. onSubmit() {
  131. let myForm = this.myFormData
  132. let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
  133. let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
  134. console.log("myForm",myForm)
  135. if(!myForm.phone || myForm.phone.length==0){
  136. this.$tip.alert('请输入手机号');
  137. return false
  138. }
  139. if(!checkPhone.test(myForm.phone)){
  140. this.$tip.alert('请输入正确的手机号');
  141. return false
  142. }
  143. if(!checkEmail.test(myForm.email)){
  144. this.$tip.alert('请输入正确的邮箱地址');
  145. return false
  146. }
  147. this.myFormData.id = this.$store.getters.userid
  148. if(this.switchC){
  149. this.myFormData.sex=1
  150. }else{
  151. this.myFormData.sex=2
  152. }
  153. console.log('myform',this.myFormData)
  154. this.$tip.loading();
  155. this.$http.put('/sys/user/appEdit',this.myFormData).then(res=>{
  156. console.log(res)
  157. this.$tip.loaded();
  158. if (res.data.success){
  159. this.$tip.toast('提交成功')
  160. this.$Router.replace({name:'userdetail'})
  161. /* uni.navigateTo({
  162. url: '/pages/user/userdetail'
  163. }) */
  164. }
  165. }).catch(()=>{
  166. this.$tip.loaded();
  167. this.$tip.error('提交失败')
  168. });
  169. },
  170. DateChange(e) {
  171. this.myFormData.birthday = e.detail.value
  172. },
  173. SwitchC(e) {
  174. this.switchC = e.detail.value
  175. },
  176. ChooseImage() {
  177. var that=this;
  178. uni.chooseImage({
  179. count: 4, //默认9
  180. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  181. sourceType: ['album'], //从相册选择
  182. success: (res) => {
  183. that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
  184. filePath: res.tempFilePaths[0],
  185. name: 'file'
  186. })
  187. .then(res => {
  188. that.myFormData.avatar=res.data.message;
  189. })
  190. .catch(err => {
  191. that.$tip.error(err.data.message)
  192. });
  193. this.imgList = res.tempFilePaths
  194. }
  195. });
  196. },
  197. ViewImage(e) {
  198. uni.previewImage({
  199. urls: this.imgList,
  200. current: e.currentTarget.dataset.url
  201. });
  202. },
  203. DelImg(e) {
  204. uni.showModal({
  205. title: '召唤师',
  206. content: '确定要删除这段回忆吗?',
  207. cancelText: '再看看',
  208. confirmText: '再见',
  209. success: res => {
  210. if (res.confirm) {
  211. this.imgList.splice(e.currentTarget.dataset.index, 1)
  212. }
  213. }
  214. })
  215. }
  216. }
  217. }
  218. </script>
  219. <style>
  220. .cu-form-group .title {
  221. min-width: calc(4em + 15px);
  222. }
  223. </style>