小说小程序前端代码仓库(小程序)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

247 lines
5.1 KiB

  1. <template>
  2. <view class="modify-info-page">
  3. <navbar title="修改信息" leftClick @leftClick="$utils.navigateBack" />
  4. <view class="header">
  5. <button open-type="chooseAvatar"
  6. class="share"
  7. @chooseavatar="onChooseAvatar">
  8. <view class="avatar-upload">
  9. <uv-avatar :src="userInfoForm.headImage" size="88" shape="circle" class="avatar-main" />
  10. <view class="avatar-upload-btn">
  11. <uv-icon name="camera-fill" size="28" color="#fff" />
  12. </view>
  13. </view>
  14. </button>
  15. </view>
  16. <view class="card">
  17. <view class="card-title">个人信息</view>
  18. <view class="form-item">
  19. <view class="form-label"><text class="star">*</text> 昵称</view>
  20. <view class="form-value">
  21. <input type="nickname" placeholder="请输入昵称" id="nickName"
  22. v-model="userInfoForm.nickName" />
  23. </view>
  24. </view>
  25. <view class="divider"></view>
  26. <view class="form-item">
  27. <view class="form-label"><text class="star">*</text> 个性签名</view>
  28. <view class="form-value">
  29. <input placeholder="请输入个性签名" v-model="userInfoForm.signature" />
  30. </view>
  31. </view>
  32. <view class="divider"></view>
  33. </view>
  34. <button
  35. class="share"
  36. open-type="getPhoneNumber" @getphonenumber="getPhone">
  37. <view class="card">
  38. <view class="card-title">手机号</view>
  39. <view class="form-item">
  40. <view class="form-label"><text class="star">*</text> 手机号</view>
  41. <view class="form-value">{{ userInfoForm.phone }}</view>
  42. </view>
  43. <view class="divider"></view>
  44. </view>
  45. </button>
  46. <view class="footer">
  47. <uv-button type="primary" text="确认" shape="circle" size="large" @click="submit"
  48. customStyle="width:100%;height:44px;font-size:18px;background:#0a226b;" />
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. export default {
  54. components: {},
  55. data() {
  56. return {
  57. avatarUrl: '',
  58. fileList: [],
  59. showUpload: false,
  60. userInfoForm: {
  61. headImage: '',
  62. nickName: '',
  63. phone: '',
  64. },
  65. }
  66. },
  67. onLoad() {
  68. this.userInfoForm.phone = this.userInfo.phone || ''
  69. this.userInfoForm.nickName = this.userInfo.nickName || ''
  70. this.userInfoForm.headImage = this.userInfo.headImage || ''
  71. },
  72. methods: {
  73. onChooseAvatar(res) {
  74. this.$Oss.ossUpload(res.target.avatarUrl)
  75. .then(url => {
  76. this.userInfoForm.headImage = url
  77. })
  78. },
  79. getPhone(e) {
  80. this.$api('bindPhone', {
  81. code: e.detail.code
  82. }, res => {
  83. if (res.code == 200) {
  84. let phoneObj = JSON.parse(res.result)
  85. if (phoneObj.errmsg == 'ok') {
  86. this.userInfoForm.phone = phoneObj.phone_info.phoneNumber
  87. } else {
  88. uni.showModal({
  89. title: phoneObj.errmsg
  90. })
  91. }
  92. }
  93. })
  94. },
  95. submit() {
  96. let self = this
  97. uni.createSelectorQuery().in(this)
  98. .select("#nickName")
  99. .fields({
  100. properties: ["value"],
  101. })
  102. .exec((res) => {
  103. const nickName = res?.[0]?.value
  104. self.userInfoForm.nickName = nickName
  105. if (self.$utils.verificationAll(self.userInfoForm, {
  106. headImage: '请选择头像',
  107. nickName: '请填写昵称',
  108. phone: '请填写手机号',
  109. })) {
  110. return
  111. }
  112. self.$api('updateInfo', {
  113. avatarUrl: self.userInfoForm.headImage,
  114. nickName: self.userInfoForm.nickName,
  115. phone: self.userInfoForm.phone,
  116. }, res => {
  117. if (res.code == 200) {
  118. uni.reLaunch({
  119. url: '/pages/index/index'
  120. })
  121. }
  122. })
  123. })
  124. },
  125. }
  126. }
  127. </script>
  128. <style scoped>
  129. .modify-info-page {
  130. min-height: 100vh;
  131. background: #f8f8f8;
  132. display: flex;
  133. flex-direction: column;
  134. }
  135. .back-arrow-fix {
  136. position: absolute;
  137. top: 60rpx;
  138. left: 32rpx;
  139. z-index: 1000;
  140. }
  141. .header {
  142. display: flex;
  143. flex-direction: column;
  144. align-items: center;
  145. margin-top: 120rpx;
  146. margin-bottom: 24rpx;
  147. position: relative;
  148. }
  149. .avatar-upload {
  150. display: flex;
  151. flex-direction: column;
  152. align-items: center;
  153. position: relative;
  154. width: 120rpx;
  155. height: 120rpx;
  156. }
  157. .avatar-main {
  158. box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  159. }
  160. .avatar-upload-btn {
  161. position: absolute;
  162. bottom: 0;
  163. right: 0;
  164. width: 48rpx;
  165. height: 48rpx;
  166. background: #0a226b;
  167. border-radius: 50%;
  168. display: flex;
  169. align-items: center;
  170. justify-content: center;
  171. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  172. border: 2rpx solid #fff;
  173. }
  174. .card {
  175. background: #fff;
  176. border-radius: 24rpx;
  177. margin: 0 24rpx 32rpx 24rpx;
  178. padding: 32rpx 28rpx 8rpx 28rpx;
  179. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
  180. text-align: left;
  181. }
  182. .card-title {
  183. font-size: 28rpx;
  184. font-weight: bold;
  185. color: #222;
  186. margin-bottom: 18rpx;
  187. margin-top: 18rpx;
  188. }
  189. .form-item {
  190. margin-bottom: 8rpx;
  191. margin-top: 18rpx;
  192. }
  193. .form-label {
  194. font-size: 22rpx;
  195. color: #888;
  196. margin-bottom: 4rpx;
  197. display: flex;
  198. align-items: center;
  199. }
  200. .star {
  201. color: #f44;
  202. font-size: 22rpx;
  203. margin-right: 4rpx;
  204. margin-top: 18rpx;
  205. }
  206. .form-value {
  207. font-size: 26rpx;
  208. color: #222;
  209. font-weight: 500;
  210. margin-bottom: 2rpx;
  211. }
  212. .divider {
  213. height: 1px;
  214. background: #f0f0f0;
  215. margin: 8rpx 0 8rpx 0;
  216. }
  217. .footer {
  218. position: fixed;
  219. left: 0;
  220. right: 0;
  221. bottom: 90rpx;
  222. margin: 0 24rpx;
  223. }
  224. </style>