novel-front-app/pages_order/novel/Modifyinformation.vue

<template>
  <view class="modify-info-page">
    <navbar title="修改信息" />
    <BackArrow class="back-arrow-fix" @back="goBack" />
    <view class="header">
      <view class="avatar-upload">
        <uv-avatar :src="avatarUrl" size="88" shape="circle" @click="showUpload = true" class="avatar-main" />
        <view class="avatar-upload-btn" @click="showUpload = true">
          <uv-icon name="camera-fill" size="28" color="#fff" />
        </view>
        <uv-upload
          v-if="showUpload"
          :fileList="fileList"
          :maxCount="1"
          accept="image"
          :previewImage="false"
          :deletable="false"
          :showUploadList="false"
          @afterRead="onAvatarChange"
          @delete="onAvatarDelete"
        />
      </view>
    </view>
    <view class="card">
      <view class="card-title">个人信息</view>
      <view class="form-item">
        <view class="form-label"><text class="star">*</text> 昵称</view>
        <view class="form-value">{{ form.nickname }}</view>
      </view>
      <view class="divider"></view>
      <view class="form-item">
        <view class="form-label"><text class="star">*</text> 个性签名</view>
        <view class="form-value">{{ form.signature }}</view>
      </view>
      <view class="divider"></view>
    </view>
    <view class="card">
      <view class="card-title">手机号</view>
      <view class="form-item">
        <view class="form-label"><text class="star">*</text> 手机号</view>
        <view class="form-value">{{ form.phone }}</view>
      </view>
      <view class="divider"></view>
    </view>
    <view class="footer">
      <uv-button type="primary" text="确认" shape="circle" size="large" @click="onSubmit" customStyle="width:100%;height:44px;font-size:18px;background:#0a226b;" />
    </view>
  </view>
</template>

<script>
import BackArrow from './components/BackArrow.vue'
export default {
  components: { BackArrow },
  data() {
    return {
      avatarUrl: '',
      fileList: [],
      showUpload: false,
      form: {
        nickname: '战斗世界',
        signature: '世界这么美，小说好精彩～',
        phone: '19989674531'
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onAvatarChange(file) {
      this.avatarUrl = file.file.url
      this.fileList = [file.file]
      this.showUpload = false
    },
    onAvatarDelete() {
      this.avatarUrl = ''
      this.fileList = []
    },
    onSubmit() {
      uni.showToast({ title: '提交成功', icon: 'success' })
    }
  }
}
</script>

<style scoped>
.modify-info-page {
  min-height: 100vh;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
}
.back-arrow-fix {
  position: absolute;
  top: 60rpx;
  left: 32rpx;
  z-index: 1000;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120rpx;
  margin-bottom: 24rpx;
  position: relative;
}
.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 120rpx;
  height: 120rpx;
}
.avatar-main {
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
}
.avatar-upload-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48rpx;
  height: 48rpx;
  background: #0a226b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  border: 2rpx solid #fff;
}
.card {
  background: #fff;
  border-radius: 24rpx;
  margin: 0 24rpx 32rpx 24rpx;
  padding: 32rpx 28rpx 8rpx 28rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
}
.card-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 18rpx;
  margin-top: 18rpx;
}
.form-item {
  margin-bottom: 8rpx;
  margin-top: 18rpx;
}
.form-label {
    
  font-size: 22rpx;
  color: #888;
  margin-bottom: 4rpx;
  display: flex;
  align-items: center;
  
}
.star {
  color: #f44;
  font-size: 22rpx;
  margin-right: 4rpx;
  margin-top: 18rpx;
}
.form-value {
  font-size: 26rpx;
  color: #222;
  font-weight: 500;
  margin-bottom: 2rpx;
}
.divider {
  height: 1px;
  background: #f0f0f0;
  margin: 8rpx 0 8rpx 0;
  
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 90rpx;
  margin: 0 24rpx;
}
</style>