小说小程序前端代码仓库(小程序)
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.

185 lines
4.1 KiB

  1. <template>
  2. <view class="modify-info-page">
  3. <navbar title="修改信息" leftClick @leftClick="$utils.navigateBack" />
  4. <view class="header">
  5. <view class="avatar-upload">
  6. <uv-avatar :src="avatarUrl" size="88" shape="circle" @click="showUpload = true" class="avatar-main" />
  7. <view class="avatar-upload-btn" @click="showUpload = true">
  8. <uv-icon name="camera-fill" size="28" color="#fff" />
  9. </view>
  10. <uv-upload
  11. v-if="showUpload"
  12. :fileList="fileList"
  13. :maxCount="1"
  14. accept="image"
  15. :previewImage="false"
  16. :deletable="false"
  17. :showUploadList="false"
  18. @afterRead="onAvatarChange"
  19. @delete="onAvatarDelete"
  20. />
  21. </view>
  22. </view>
  23. <view class="card">
  24. <view class="card-title">个人信息</view>
  25. <view class="form-item">
  26. <view class="form-label"><text class="star">*</text> 昵称</view>
  27. <view class="form-value">{{ form.nickname }}</view>
  28. </view>
  29. <view class="divider"></view>
  30. <view class="form-item">
  31. <view class="form-label"><text class="star">*</text> 个性签名</view>
  32. <view class="form-value">{{ form.signature }}</view>
  33. </view>
  34. <view class="divider"></view>
  35. </view>
  36. <view class="card">
  37. <view class="card-title">手机号</view>
  38. <view class="form-item">
  39. <view class="form-label"><text class="star">*</text> 手机号</view>
  40. <view class="form-value">{{ form.phone }}</view>
  41. </view>
  42. <view class="divider"></view>
  43. </view>
  44. <view class="footer">
  45. <uv-button type="primary" text="确认" shape="circle" size="large" @click="onSubmit" customStyle="width:100%;height:44px;font-size:18px;background:#0a226b;" />
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. import BackArrow from './components/BackArrow.vue'
  51. export default {
  52. components: { BackArrow },
  53. data() {
  54. return {
  55. avatarUrl: '',
  56. fileList: [],
  57. showUpload: false,
  58. form: {
  59. nickname: '战斗世界',
  60. signature: '世界这么美,小说好精彩~',
  61. phone: '19989674531'
  62. }
  63. }
  64. },
  65. methods: {
  66. goBack() {
  67. uni.navigateBack()
  68. },
  69. onAvatarChange(file) {
  70. this.avatarUrl = file.file.url
  71. this.fileList = [file.file]
  72. this.showUpload = false
  73. },
  74. onAvatarDelete() {
  75. this.avatarUrl = ''
  76. this.fileList = []
  77. },
  78. onSubmit() {
  79. uni.showToast({ title: '提交成功', icon: 'success' })
  80. }
  81. }
  82. }
  83. </script>
  84. <style scoped>
  85. .modify-info-page {
  86. min-height: 100vh;
  87. background: #f8f8f8;
  88. display: flex;
  89. flex-direction: column;
  90. }
  91. .back-arrow-fix {
  92. position: absolute;
  93. top: 60rpx;
  94. left: 32rpx;
  95. z-index: 1000;
  96. }
  97. .header {
  98. display: flex;
  99. flex-direction: column;
  100. align-items: center;
  101. margin-top: 120rpx;
  102. margin-bottom: 24rpx;
  103. position: relative;
  104. }
  105. .avatar-upload {
  106. display: flex;
  107. flex-direction: column;
  108. align-items: center;
  109. position: relative;
  110. width: 120rpx;
  111. height: 120rpx;
  112. }
  113. .avatar-main {
  114. box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
  115. }
  116. .avatar-upload-btn {
  117. position: absolute;
  118. bottom: 0;
  119. right: 0;
  120. width: 48rpx;
  121. height: 48rpx;
  122. background: #0a226b;
  123. border-radius: 50%;
  124. display: flex;
  125. align-items: center;
  126. justify-content: center;
  127. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  128. border: 2rpx solid #fff;
  129. }
  130. .card {
  131. background: #fff;
  132. border-radius: 24rpx;
  133. margin: 0 24rpx 32rpx 24rpx;
  134. padding: 32rpx 28rpx 8rpx 28rpx;
  135. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
  136. }
  137. .card-title {
  138. font-size: 28rpx;
  139. font-weight: bold;
  140. color: #222;
  141. margin-bottom: 18rpx;
  142. margin-top: 18rpx;
  143. }
  144. .form-item {
  145. margin-bottom: 8rpx;
  146. margin-top: 18rpx;
  147. }
  148. .form-label {
  149. font-size: 22rpx;
  150. color: #888;
  151. margin-bottom: 4rpx;
  152. display: flex;
  153. align-items: center;
  154. }
  155. .star {
  156. color: #f44;
  157. font-size: 22rpx;
  158. margin-right: 4rpx;
  159. margin-top: 18rpx;
  160. }
  161. .form-value {
  162. font-size: 26rpx;
  163. color: #222;
  164. font-weight: 500;
  165. margin-bottom: 2rpx;
  166. }
  167. .divider {
  168. height: 1px;
  169. background: #f0f0f0;
  170. margin: 8rpx 0 8rpx 0;
  171. }
  172. .footer {
  173. position: fixed;
  174. left: 0;
  175. right: 0;
  176. bottom: 90rpx;
  177. margin: 0 24rpx;
  178. }
  179. </style>