personalData.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <template>
  2. <view class="personalData">
  3. <view class="form">
  4. <uni-forms :modelValue="formData" label-position="top">
  5. <uni-forms-item label="昵称" name="nickname">
  6. <uni-easyinput placeholderStyle="color: #999; font-size:30rpx " type="text"
  7. v-model="formData.nickname" placeholder="请输入姓名" />
  8. </uni-forms-item>
  9. <!--地区选择-->
  10. <uni-forms-item label="地区" name="region">
  11. <pickerAddress @change="change">
  12. <view class="selectType">
  13. <view class="uni-input">
  14. <text style="color: #999999 ; font-size: 30rpx;" v-if="region==''">所在地区</text>
  15. <text style="font-size: 30rpx;" v-if="region!=''">{{region}}</text>
  16. </view>
  17. <image src="/static/icon/right.png"
  18. style="width: 14rpx;height: 24rpx;position: absolute;top:24rpx;right: 24rpx;">
  19. </image>
  20. </view>
  21. </pickerAddress>
  22. </uni-forms-item>
  23. <uni-forms-item label="性别" name="sex">
  24. <view class="sex">
  25. <picker mode="selector" :value="sex_text" :range='sexSelect' @change="bindSexChange">
  26. <view class="uni-input" @change="bindSexChange">
  27. <text v-if="formData.sex==''||formData.sex==null"
  28. style="color: #999999; font-size: 30rpx; ">选择性别</text>
  29. <text v-if="formData.sex!=''">{{sex_text}}</text>
  30. </view>
  31. <image src="/static/icon/right.png" @change="bindSexChange"
  32. style="width: 14rpx;height: 24rpx;position: absolute;top:22rpx;right: 30rpx;"></image>
  33. </picker>
  34. </view>
  35. </uni-forms-item>
  36. <uni-forms-item label="手机号" name="phone">
  37. <uni-easyinput maxlength="11" placeholderStyle="color: #999; font-size:30rpx " type="number"
  38. v-model="formData.mobile" placeholder="输入手机号" @blur="getPhone" />
  39. </uni-forms-item>
  40. <uni-forms-item label="生日" name="birthday">
  41. <view class="birthday">
  42. <picker mode="date" :value="formData.birthday" :start="startDate" :end="endDate"
  43. @change="bindDateChange">
  44. <view class="uni-input" @change="bindDateChange">
  45. <text v-if="formData.birthday==''||formData.birthday==null"
  46. style="color: #999999; font-size: 30rpx; ">选择生日</text>
  47. <text v-if="formData.birthday!=''">{{formData.birthday}}</text>
  48. </view>
  49. <image src="/static/icon/right.png" @change="bindDateChange"
  50. style="width: 14rpx;height: 24rpx;position: absolute;top:22rpx;right: 30rpx;"></image>
  51. </picker>
  52. </view>
  53. </uni-forms-item>
  54. <view class="keep-msg" @click="saveBtn">
  55. <text>保存信息</text>
  56. </view>
  57. </uni-forms>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. import pickerAddress from '@/uni_modules/hu-pickerAddress/hu-pickerAddress.vue'
  63. export default {
  64. components: {
  65. pickerAddress
  66. },
  67. data() {
  68. const currentDate = this.getDate({
  69. format: true
  70. })
  71. return {
  72. formData: {
  73. nickname: '',
  74. sex: '',
  75. birthday: '',
  76. mobile: '',
  77. area_id: ''
  78. },
  79. sexSelect: ['男', '女', '其他'],
  80. sex_text: '',
  81. region: '',
  82. }
  83. },
  84. computed: {
  85. startDate() {
  86. return this.getDate('start');
  87. },
  88. endDate() {
  89. return this.getDate('end');
  90. }
  91. },
  92. onLoad() {
  93. this.formData.nickname = this.$store.getters.userInfo.nickname
  94. //获取用户信息
  95. this.getUserInfo()
  96. },
  97. methods: {
  98. //获取用户信息
  99. getUserInfo(){
  100. this.$api.my.userInfo().then(res=>{
  101. console.log(res.data,'---->用户信息');
  102. let obj ={}
  103. obj.nickname = res.data.nickname
  104. obj.mobile = res.data.mobile
  105. obj.sex = res.data.sex
  106. obj.birthday = res.data.birthday
  107. obj.area_id = res.data.area_id
  108. this.region = res.data.region
  109. this.formData = obj
  110. if(this.formData.sex == 0){
  111. this.sex_text = '未知'
  112. }else if(this.formData.sex == 1){
  113. this.sex_text = '男'
  114. }else if(this.formData.sex == 2){
  115. this.sex_text = '女'
  116. }
  117. this.$store.getters.userInfo.nickname = obj.nickname
  118. })
  119. },
  120. //获取手机号
  121. getPhone() {
  122. let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
  123. if (!phoneReg.test(this.formData.mobile)) {
  124. uni.showToast({
  125. title: '请输入合法手机号',
  126. icon: "none"
  127. })
  128. return
  129. }
  130. },
  131. change(ret) {
  132. this.region = ret.data.join('-')
  133. this.formData.area_id = ret.code[2]
  134. },
  135. bindDateChange: function(e) {
  136. this.formData.birthday = e.detail.value
  137. },
  138. bindSexChange: function(e) {
  139. if (e.detail.value == 0) {
  140. this.sex_text = '男'
  141. this.formData.sex = 1
  142. } else if (e.detail.value == 1) {
  143. this.sex_text = '女'
  144. this.formData.sex = 2
  145. } else {
  146. this.sex_text = '其他'
  147. this.formData.sex = 0
  148. }
  149. },
  150. getDate(type) {
  151. const date = new Date();
  152. let year = date.getFullYear();
  153. let month = date.getMonth() + 1;
  154. let day = date.getDate();
  155. if (type === 'start') {
  156. year = year - 60;
  157. } else if (type === 'end') {
  158. year = year;
  159. }
  160. month = month > 9 ? month : '0' + month;
  161. day = day > 9 ? day : '0' + day;
  162. return `${year}-${month}-${day}`;
  163. },
  164. //保存信息
  165. saveBtn() {
  166. if (this.formData.nickname == '') {
  167. uni.showToast({
  168. title: '请输入昵称',
  169. icon: "none"
  170. })
  171. return
  172. }
  173. if (this.formData.area_id == '') {
  174. uni.showToast({
  175. title: '请输入地区',
  176. icon: "none"
  177. })
  178. return
  179. }
  180. if (this.formData.sex == '') {
  181. uni.showToast({
  182. title: '请输入性别',
  183. icon: "none"
  184. })
  185. return
  186. }
  187. if (this.formData.mobile == '') {
  188. uni.showToast({
  189. title: '请输入手机号',
  190. icon: "none"
  191. })
  192. return
  193. }
  194. if (this.formData.birthday == '') {
  195. uni.showToast({
  196. title: '请输入生日',
  197. icon: "none"
  198. })
  199. return
  200. }
  201. this.$api.my.refreshPersonData(this.formData).then(res => {
  202. if (res.code == 0) {
  203. uni.showToast({
  204. title: '保存成功',
  205. icon: "none"
  206. })
  207. setTimeout(()=>{
  208. uni.switchTab({
  209. url:'/pages/my/my'
  210. })
  211. },500)
  212. // let personData = JSON.parse(JSON.stringify(this.formData))
  213. // personData.region = this.region
  214. // personData.sex = this.sex_text
  215. // console.log(personData,'---->personDate');
  216. // this.$store.dispatch('user/person',personData)
  217. } else {
  218. uni.showToast({
  219. title: res.msg,
  220. icon: "none"
  221. })
  222. }
  223. })
  224. },
  225. }
  226. }
  227. </script>
  228. <style lang="scss" scoped>
  229. $pageColor:#F9F9F9;
  230. $bgColor:#FFFFFF;
  231. .personalData {
  232. height: 100%;
  233. background: $pageColor;
  234. }
  235. .selectType {
  236. width: 100%;
  237. height: 74rpx;
  238. background: #FFFFFF;
  239. border-radius: 8rpx;
  240. border: 2rpx solid #EAEAEA;
  241. display: flex;
  242. align-items: center;
  243. padding-left: 20rpx;
  244. box-sizing: border-box;
  245. position: relative;
  246. }
  247. .keep-msg {
  248. width: 100%;
  249. height: 92rpx;
  250. background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
  251. border-radius: 12rpx;
  252. display: flex;
  253. align-items: center;
  254. justify-content: center;
  255. text {
  256. font-weight: bold;
  257. color: #FFFFFF;
  258. font-size: 30rpx;
  259. }
  260. }
  261. .form {
  262. padding: 24rpx 48rpx 0 50rpx;
  263. .birthday,
  264. .sex {
  265. width: 652rpx;
  266. height: 74rpx;
  267. background: #FFFFFF;
  268. border-radius: 8rpx;
  269. border: 1px solid #EAEAEA;
  270. display: flex;
  271. align-items: center;
  272. padding-left: 20rpx;
  273. box-sizing: border-box;
  274. position: relative;
  275. }
  276. }
  277. ::v-deep .uni-forms-item__label {
  278. font-weight: bold;
  279. color: #333333;
  280. font-size: 32rpx;
  281. }
  282. ::v-deep .uni-easyinput__content-input {
  283. color: #333333;
  284. font-size: 32rpx;
  285. }
  286. ::v-deep .is-input-border {
  287. border-color: #e5e5e5 !important;
  288. background-color: #fff !important;
  289. }
  290. ::v-deep .uni-icons {
  291. color: #c0c4cc !important;
  292. font-size: 24px !important;
  293. }
  294. </style>