memberinfo.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <view class="pages">
  3. <u-navbar
  4. title="个人信息"
  5. :placeholder="true"
  6. :autoBack="true"
  7. :safeAreaInsetTop="true"
  8. >
  9. </u-navbar>
  10. <view class="page-wrap">
  11. <u-cell-group>
  12. <!-- <u-cell title="头像">
  13. <u-avatar slot="right-icon" :src="memberInfo.avatar" size="80rpx"></u-avatar>
  14. </u-cell> -->
  15. <view class="avatar u-flex u-row-between u-border-bottom">
  16. <text>头像</text>
  17. <view class="right">
  18. <u--image :src="memberInfo.avatar" shape="circle" width="80rpx" height="80rpx"></u--image>
  19. <u-upload
  20. width="80rpx"
  21. height="80rpx"
  22. :fileList="fileList"
  23. @afterRead="afterRead"
  24. :previewImage="false"
  25. multiple
  26. name="name"
  27. :maxCount="2"
  28. ></u-upload>
  29. </view>
  30. </view>
  31. <u-cell title="昵称" @click="nameShow=true" :value="memberInfo.name"></u-cell>
  32. <u-cell title="性别" @click="handleChangeSex" :value="memberInfo.sex|filterSex"></u-cell>
  33. <u-cell title="生日" :value="memberInfo.birthdayTime||'未设置'" @click="handleChangeBirthday" :isLink="true"></u-cell>
  34. <u-cell title="会员等级" :value="memberInfo.levelName"></u-cell>
  35. <u-cell title="实名制认证" @click="factorAuth" :value="memberInfo.isAuth==1?'已认证':'去认证'"></u-cell>
  36. </u-cell-group>
  37. <!-- <u-button text="取消登录" type="warning" @click="clearStorage" style="margin-top: 30rpx;"></u-button> -->
  38. <u-datetime-picker
  39. :show="timeShow"
  40. :minDate="new Date().getTime()-365*100*24*3600*1000"
  41. v-model="birthday"
  42. :maxDate="new Date().getTime()"
  43. @confirm="updateBirthday"
  44. mode="date"
  45. :closeOnClickOverlay="true"
  46. @close="timeShow = false"
  47. @cancel="timeShow = false"
  48. ></u-datetime-picker>
  49. </view>
  50. <u-modal :show="nameShow" title="修改昵称" @confirm="changeName" @cancel="nameShow=false" :showCancelButton="true" >
  51. <view class="slot-content">
  52. <u--input
  53. placeholder="请输入内容"
  54. border="surround"
  55. v-model="tempName"
  56. maxlength="8"
  57. >
  58. </u--input>
  59. </view>
  60. </u-modal>
  61. <u-action-sheet
  62. :show="showSex"
  63. :actions="actions"
  64. title="请选择性别"
  65. @close="showSex = false"
  66. @select="sexSelect"
  67. >
  68. </u-action-sheet>
  69. <u-toast ref="uToast"></u-toast>
  70. </view>
  71. </template>
  72. <script>
  73. import {uploadImg} from '../utils/uploadImg.js'
  74. export default {
  75. components:{
  76. },
  77. data() {
  78. return {
  79. showSex:false,
  80. sex:'',
  81. nameShow:false,
  82. tempName:'',
  83. uploadFileUrl:this.$commonConfig.uploadFileUrl,
  84. timeShow:false,
  85. birthday:'',
  86. memberInfo:{},
  87. fileList:[],
  88. avatarUrl:'',
  89. actions: [
  90. {name: '男',val:1},
  91. {name: '女',val:2},
  92. {name: '保密',val:0},
  93. ],
  94. }
  95. },
  96. onShow() {
  97. this.getMemberInfo();
  98. // console.log('1111',this.uploadFileUrl);
  99. },
  100. onLoad() {
  101. },
  102. methods: {
  103. clearStorage(){
  104. uni.clearStorage();
  105. uni.showToast({
  106. title:'清除完成,请手动重新进入小程序',
  107. icon:'none',
  108. complete() {
  109. }
  110. })
  111. },
  112. getMemberInfo(){
  113. this.$u.api.memberInfo({id:this.vuex_user_info.userid}).then(res=>{
  114. this.memberInfo = res.data;
  115. this.avatar = res.data.avatar;
  116. console.log('memberInfo',this.memberInfo);
  117. }).catch(err=>{
  118. console.log('memberInfo',err.data);
  119. })
  120. },
  121. handleChangeSex(){
  122. if(this.memberInfo.isAuth==1){
  123. this.$refs.uToast.show({
  124. type: 'default',
  125. message: "实名信息不能修改!",
  126. })
  127. }else{
  128. this.showSex = true
  129. }
  130. },
  131. handleChangeBirthday(){
  132. if(this.memberInfo.isAuth==1){
  133. this.$refs.uToast.show({
  134. type: 'default',
  135. message: "实名信息不能修改!",
  136. })
  137. }else{
  138. this.timeShow = true
  139. }
  140. },
  141. updateBirthday(e){
  142. // console.log('000',e);
  143. let birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
  144. this.birthday = birthday;
  145. this.updateMemberInfo('birthday');
  146. this.timeShow = false;
  147. },
  148. // 新增图片
  149. async afterRead(event){
  150. //使用这个封装
  151. const result = await uploadImg(event,this.fileList)
  152. let parseResult = JSON.parse(result.data).data;
  153. console.log('urlurl',parseResult.url);
  154. this.avatarUrl = parseResult.url;
  155. if(!this.avatarUrl){
  156. uni.showToast({
  157. title: '上传失败!',
  158. icon: "error"
  159. });
  160. return
  161. };
  162. this.updateMemberInfo('avatar');
  163. let item = this.fileList[result.fileListLen]
  164. this.fileList.splice(result.fileListLen, 1, Object.assign(item, {
  165. status: 'success',
  166. message: '成功',
  167. url: JSON.parse(result.data).data
  168. }));
  169. },
  170. updateMemberInfo(type){
  171. let params ={
  172. id:this.vuex_user_info.userid
  173. };
  174. if(type == 'avatar'){
  175. params.avatar = this.avatarUrl;
  176. }else if(type == 'birthday'){
  177. params.birthdayTime = this.birthday;
  178. }else if(type == 'name'){
  179. if(!this.tempName){
  180. uni.showToast({
  181. title:'请输入昵称',
  182. icon:'error'
  183. })
  184. return
  185. }
  186. params.name = this.tempName;
  187. }else if(type == 'sex'){
  188. params.sex = this.sex;
  189. }
  190. this.$u.api.updateMemberInfo(params).then(res=>{
  191. this.getMemberInfo();
  192. this.nameShow = false;
  193. }).catch(err=>{
  194. console.log('err',err);
  195. })
  196. },
  197. changeName(){
  198. this.updateMemberInfo('name');
  199. console.log('memberInfo',this.memberInfo);
  200. },
  201. sexSelect(e){
  202. this.sex = e.val;
  203. this.updateMemberInfo('sex')
  204. console.log('sexSelect',e);
  205. },
  206. factorAuth(){
  207. if(this.memberInfo.isAuth==1){
  208. uni.showToast({
  209. title:'已认证',
  210. icon:'none'
  211. })
  212. return
  213. }
  214. uni.$u.route('/center/factorauth', {
  215. backUrl: '/center/center'
  216. });
  217. }
  218. }
  219. }
  220. </script>
  221. <style>
  222. page{
  223. background-color: #fff;
  224. }
  225. </style>
  226. <style lang="scss" scoped>
  227. .avatar{
  228. padding: 10px 15px;
  229. font-size: 15px;
  230. color: #303133;
  231. .right{
  232. position: relative;
  233. /deep/ .u-upload{
  234. position: absolute;
  235. left: 0;
  236. top: 0;
  237. opacity: 0;
  238. }
  239. }
  240. }
  241. </style>