myInfo.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. <template>
  2. <view class="my-info-page">
  3. <!-- 导航区域 -->
  4. <view class="icon-title-navBar-box">
  5. <view @click="handleBack" class="nav-bar-icon"></view>
  6. <text class="nav-bar-title">个人信息</text>
  7. </view>
  8. <!-- 姓名 -->
  9. <view class="form-label-input">
  10. <view class="phone-form-label"><text class="form-label-require">*</text>姓名</view>
  11. <input v-model="data.realName" placeholder="请输入姓名" />
  12. <icon></icon>
  13. </view>
  14. <!-- 手机号 -->
  15. <view class="form-label-input">
  16. <view class="phone-form-label"><text class="form-label-require">*</text>手机号</view>
  17. <input v-model="data.userName" placeholder="请输入手机号" />
  18. <icon></icon>
  19. </view>
  20. <button type="default" class="phone-green-btn info-btn" @click="handleUpdate">修改资料</button>
  21. </view>
  22. </template>
  23. <script setup>
  24. import * as myApi from "@/api/my.js";
  25. import {getAliyunPolicy} from "@/api/jiazheng.js"
  26. import {ref,reactive} from "vue"
  27. import {onLoad} from "@dcloudio/uni-app"
  28. const imageStyles = ref({
  29. width: 120,
  30. height: 120,
  31. });
  32. const data = reactive({
  33. from: 'shouye', // my | kaoshi | shouye
  34. gender: 0,
  35. icon: '',
  36. realName: '',
  37. userName: '',
  38. userId: null
  39. })
  40. onLoad((options) => {
  41. data.from = options.from || 'shouye';
  42. initPage();
  43. })
  44. function handleSelect(e) {
  45. console.log('eee',e)
  46. doUploadImage(e)
  47. }
  48. function genderSelect(genderValue){
  49. data.gender = genderValue;
  50. }
  51. function doUploadImage(params) {
  52. const filePath = params.tempFiles[0];
  53. const fileUrl = params.tempFilePaths;
  54. try {
  55. const suffix = filePath.file.name.split('.').pop();
  56. let req = {
  57. prefix: 'resource/',
  58. suffix: suffix,
  59. }
  60. uni.showLoading({
  61. title: '上传中...',
  62. mask: true
  63. });
  64. getAliyunPolicy(req).then(res => {
  65. if (res.code == 0) {
  66. const policyData = res.data;
  67. const formData = {
  68. key: policyData.key,
  69. policy: policyData.policy,
  70. signature: policyData.signature,
  71. OSSAccessKeyId: policyData.accessid,
  72. success_action_status: '200',
  73. }
  74. uni.uploadFile({
  75. url: policyData.uploadUrl,
  76. filePath: fileUrl[0],
  77. name: 'file',
  78. formData: formData,
  79. success(uploadRes) {
  80. if (uploadRes.statusCode === 200) {
  81. console.log('uploadRes',uploadRes)
  82. data.icon = `${policyData.downloadUrl}/${policyData.key}`;
  83. console.log( `${policyData.downloadUrl}/${policyData.key}`)
  84. uni.showToast({
  85. title: '上传成功',
  86. icon: 'success'
  87. });
  88. } else {
  89. uni.showToast({
  90. icon: 'none',
  91. title: '上传失败',
  92. });
  93. uni.hideLoading();
  94. }
  95. },
  96. fail(err) {
  97. uni.showToast({
  98. icon: 'none',
  99. title: '上传失败',
  100. });
  101. uni.hideLoading();
  102. }
  103. });
  104. } else {
  105. uni.showToast({
  106. title: '获取凭证失败',
  107. });
  108. uni.hideLoading();
  109. }
  110. })
  111. } catch (error) {
  112. uni.showToast({
  113. title: '上传失败',
  114. icon: 'none'
  115. });
  116. uni.hideLoading();
  117. }
  118. }
  119. function handleUpdate() {
  120. let arr = [];
  121. if (!data.realName) {
  122. arr.push('姓名');
  123. }
  124. if (!data.userName) {
  125. arr.push('电话');
  126. }
  127. if (!data.realName || !data.userName) {
  128. uni.showToast({
  129. icon: 'none',
  130. title: `请完善${arr.join('、')}信息!`
  131. })
  132. return;
  133. }
  134. const opt = {
  135. gender: data.gender,
  136. icon: data.icon,
  137. realName: data.realName,
  138. userId: data.userId,
  139. userName: data.userName,
  140. }
  141. myApi.getMineUpdate(opt).then(res => {
  142. if (res.data) {
  143. uni.showToast({
  144. title: '更新成功'
  145. })
  146. handleBack();
  147. }
  148. })
  149. }
  150. function handleBack() {
  151. const pages = getCurrentPages();
  152. if (pages.length>1) {
  153. uni.navigateBack()
  154. } else {
  155. /* if (data.from == 'my') {
  156. uni.redirectTo({
  157. url: '/pages/client/my/index'
  158. })
  159. } else if (data.from == 'kaoshi') {
  160. uni.redirectTo({
  161. url: '/pages/client/ShouYe/shouye'
  162. })
  163. } else {
  164. uni.redirectTo({
  165. url: '/pages/client/my/index'
  166. })
  167. } */
  168. history.back();
  169. }
  170. }
  171. function initPage() {
  172. myApi.getMineUser().then(res => {
  173. const {gender,icon,realName,userName,userId} = res.data;
  174. data.gender = res.data.gender;
  175. data.icon = res.data.icon;
  176. data.realName = res.data.realName;
  177. data.userName = res.data.userName;
  178. data.userId = res.data.userId;
  179. })
  180. }
  181. </script>
  182. <style>
  183. </style>