user-detail.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <template>
  2. <view class="page-user-detail">
  3. <view class="editor-item" style="margin-top: 50px;">
  4. <uni-forms ref="form" label-position="top">
  5. <uni-forms-item label="用户头像:">
  6. <button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
  7. <image class="avatar" :src="headerImg" mode="scaleToFill"></image>
  8. </button>
  9. <!-- <view class="upload-box">
  10. <button class="btn-upload" @click="onUpload" v-if="headerImg==''">
  11. <text clas="text">+</text>
  12. </button>
  13. <button class="btn-upload" open-type="chooseAvatar" @click="onUpload" v-else>
  14. <image :src="headerImg" mode="scaleToFill" class="img"></image>
  15. </button>
  16. </view> -->
  17. </uni-forms-item >
  18. <uni-forms-item label="昵称:" >
  19. <uni-easyinput v-model="nickname" :inputBorder="false" placeholder="请输入昵称"></uni-easyinput>
  20. </uni-forms-item >
  21. <view class="border-b"></view>
  22. <uni-forms-item label="性别" >
  23. <uni-data-select
  24. v-model="gender"
  25. :localdata="sexOption"
  26. placeholder="请选择"
  27. ></uni-data-select>
  28. </uni-forms-item >
  29. <uni-forms-item label="生日" >
  30. <uni-datetime-picker
  31. type="date"
  32. :value="born"
  33. placeholder="请选择"
  34. @change="onChangeBorn"
  35. />
  36. </uni-forms-item >
  37. <uni-forms-item label="手机号码" >
  38. <!-- #ifdef MP-WEIXIN -->
  39. <view class="mobile-item" >
  40. <view class="mobile">{{mobile}} </view>
  41. <view style="margin-left: auto;"><button type="primary" class="btn-mobile" open-type="getPhoneNumber"
  42. :data-tel="mobile"
  43. @getphonenumber="onGetphoneNumber"
  44. >获手机号码</button></view>
  45. </view>
  46. <!-- #endif -->
  47. <!-- #ifndef MP-WEIXIN -->
  48. <uni-easyinput v-model="mobile" :inputBorder="false" placeholder="请输入手机号码"></uni-easyinput>
  49. <!-- #endif -->
  50. </uni-forms-item >
  51. <view class="border-b"></view>
  52. <!-- #ifdef MP-WEIXIN -->
  53. <!-- <uni-forms-item label="所在城市" style="border-bottom:0px">
  54. <picker
  55. mode="region"
  56. :value="region"
  57. @change="onChangeRegion"
  58. :custom-item="customItem">
  59. <view class="picker" style="text-align:right;">
  60. {{region[0]}},{{region[1]}},{{region[2]}}
  61. </view>
  62. </picker>
  63. </uni-forms-item > -->
  64. <!-- #endif -->
  65. </uni-forms>
  66. <view class="btn">
  67. <button type="primary" class="btn-save" @click="onSave">保存更新</button>
  68. </view>
  69. </view>
  70. </view>
  71. </template>
  72. <script>
  73. var siteinfo = require('../../siteinfo.js'); //require这个js模块
  74. import {
  75. mapState,
  76. mapMutations
  77. } from 'vuex'
  78. export default {
  79. components: {
  80. },
  81. data() {
  82. return {
  83. getPhonePop: true,
  84. dataRange:[],
  85. headerPath:'',
  86. headerImg:'',
  87. nickname:'',
  88. born:'',
  89. mobile:'',
  90. gender:'',
  91. privince:'',
  92. city:'',
  93. district:'',
  94. endTime:'',
  95. startTime:'',
  96. region: ['', '', ''],
  97. customItem: '全部',
  98. sexOption:[
  99. { value: 1, text: "先生" },
  100. { value: 2, text: "女士" },
  101. { value: 3, text: "保密" },
  102. ],
  103. };
  104. },
  105. computed: {
  106. ...mapState(['systemInfo', 'store_id', 'userInfo']),
  107. },
  108. onShow() {
  109. this.initInfo();
  110. let d=new Date();
  111. this.born=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
  112. let t=new Date();
  113. let t1=Date.parse(t.setFullYear(t.getFullYear()-60));
  114. this.initLocation();
  115. },
  116. methods:{
  117. onHome(){
  118. uni.switchTab({
  119. url:'/pages/home/home'
  120. })
  121. },
  122. onChooseAvatar(e) {
  123. console.log(e)
  124. let _this=this;
  125. const { avatarUrl } = e.detail;
  126. this.avatar = avatarUrl;
  127. uni.uploadFile({
  128. url: siteinfo.siteroot + '/index.php?s=/api/upload/upload',
  129. filePath: avatarUrl,
  130. name: 'file',
  131. formData: {
  132. 'openId': _this.userInfo.openid,
  133. 'token': uni.getStorageSync('token'),
  134. },
  135. success: ({data}) => {
  136. let res = JSON.parse(data);
  137. console.log(res);
  138. if (res.code == 2) {
  139. this.userInfo.avatar = res.src;
  140. this.headerImg = res.url;
  141. this.headerPath=res.src;
  142. console.log("res",res);
  143. } else {
  144. uni.showToast({
  145. title: res.msg,
  146. icon: 'none',
  147. mask: true
  148. });
  149. }
  150. },
  151. fail: () => {
  152. uni.showToast({
  153. title: '头像上传失败,请稍后重试~',
  154. icon: 'none',
  155. mask: true
  156. });
  157. }
  158. });
  159. },
  160. // 微信成为会员
  161. onGetphoneNumber(e) {
  162. let userInfo=uni.getStorageSync("userInfo"),
  163. store_id=uni.getStorageSync("store_id");
  164. if (e.detail.errMsg == "getPhoneNumber:ok") {
  165. this.$http.request('xcx/Jiemi', {
  166. id:userInfo.id,
  167. data: e.detail.encryptedData,
  168. iv: e.detail.iv,
  169. sessionKey: uni.getStorageSync('user_xcx_info').session_key,
  170. store_id: store_id,
  171. }, "", "", true).then(res => {
  172. this.mobile = res.data.phoneNumber;
  173. uni.setStorageSync('phone', res.data.phoneNumber);
  174. uni.showModal({
  175. title: '授权成功',
  176. content: '享受更多优惠!',
  177. showCancel: false,
  178. cancelText: '',
  179. confirmText: '确定',
  180. success: res => {
  181. },
  182. fail: () => {},
  183. complete: () => {}
  184. });
  185. })
  186. } else {
  187. uni.showToast({
  188. title: "授权失败,请重新授权",
  189. icon: 'none'
  190. })
  191. }
  192. },
  193. onHome(e){
  194. uni.switchTab({
  195. url:'/pages/home/home'
  196. })
  197. },
  198. onChangeRegion(e){
  199. if(e.target.value.length==3){
  200. this.region=e.target.value;
  201. this.province=e.target.value[0];
  202. this.city=e.target.value[1];
  203. this.district=e.target.value[2];
  204. }
  205. },
  206. initInfo(){
  207. let _this=this;
  208. _this.$http.request('account/getInfo', {
  209. id:_this.userInfo.id,
  210. }, "", "", true).then(res => {
  211. this.headerImg='https://business.coffunity.cn/upload/default-avatar.jpg',
  212. this.nickname='微信用户',
  213. // Only update headerImg if avatar from server is valid
  214. this.headerImg=(res.data.avatar && res.data.avatar.trim() !== '' && res.data.avatar.trim() !== 'https://business.coffunity.cn') ? res.data.avatar : this.headerImg;
  215. console.log(this.headerImg);
  216. this.headerPath=res.data.imgPath;
  217. this.gender=res.data.gender;
  218. this.born=res.data.born;
  219. // Only update nickname and mobile if they are valid
  220. this.nickname = res.data.nickname ? res.data.nickname : this.nickname;
  221. this.mobile = res.data.mobile ? res.data.mobile : this.mobile;
  222. this.region=res.data.city;
  223. this.province=res.data.province;
  224. this.city=res.data.cityData;
  225. this.district=res.data.district;
  226. if(this.province==''){
  227. this.initLocation();
  228. }
  229. }).catch(err => {})
  230. },
  231. initLocation(){
  232. uni.getLocation({
  233. success:(res)=>{
  234. console.log("res",res);
  235. },
  236. fail:(res)=>{
  237. console.log("fail");
  238. },
  239. complete:(res)=>{
  240. console.log("component");
  241. },
  242. })
  243. },
  244. onChangeBorn(e){
  245. this.born=e;
  246. },
  247. onSave(e){
  248. let _this=this;
  249. let par={
  250. openid:_this.userInfo.openid,
  251. avatar:_this.headerPath,
  252. nickname:_this.nickname,
  253. gender:_this.gender,
  254. born:_this.born,
  255. province:_this.province,
  256. city:_this.city,
  257. district:_this.district,
  258. }
  259. _this.$http.request('member/saveMemberInfo',par, "", "", true).then(res => {
  260. uni.showToast({
  261. title:'保存成功',
  262. icon:'none',
  263. })
  264. uni.switchTab({
  265. url: '/pages/home/home' // 返回首页
  266. });
  267. }).catch(err => {
  268. uni.showToast({
  269. title:"保成失败",
  270. icon:'none',
  271. })
  272. })
  273. },
  274. }
  275. }
  276. </script>
  277. <style lang="scss">
  278. @import './user-detail.scss'
  279. </style>