修改名字

mallApp/src/pages/member/rechargeResult.vue

@@ -10,9 +10,18 @@
             <view class="text-title">充值金额已由门店收取</view>
             <view class="text-desc">保管资金是门店责任，此小程序仅是收款管理工具</view>
           </view>
+
+          <view class="name-edit-section">
+            <view class="section-label">请完善真实姓名，以便消费时核对信息</view>
+            <view class="input-group">
+              <input v-model="form.name" class="input-field" name="name" placeholder="请填写" @focus="clearInputOnFocus" />
+              <button class="edit-btn" @click="modifyName">修改</button>
+            </view>
+          </view>
+
           <view class="confirm-btn-wrap">
-            <button class="confirm-btn" @click="goBack" style="width:300upx;">返回</button>
-            <button class="confirm-btn" @click="myHb" style="width:300upx;">我的红包</button>
+            <button class="confirm-btn btn-primary" @click="myHb">我的红包</button>
+            <button class="confirm-btn" @click="goBack">返回</button>
           </view>
         </view>
         <view class="pay-confirm-content" v-else>
@@ -26,12 +35,17 @@
 </template>
 <script>
 import { getHdInfo } from '@/api/hd';
+import { currentInfo, updateInfo } from '@/api/user';
+const form = require('@/utils/formValidation.js')
 export default {
   name: "rechargeResult",
   data() {
     return {
       actionType:0,//0充值 1结账
-      hdInfo:{}
+      hdInfo:{},
+      form:{
+        name:''
+      }
     }
   },
   onLoad(){
@@ -39,6 +53,7 @@ export default {
     let pages = getCurrentPages();
     let prevPage = pages[ pages.length - 2 ];
     prevPage.$vm.pageAction = {refresh:1}
+    this.init()
   },
   methods: {
     init(){
@@ -50,11 +65,48 @@ export default {
           this.actionType = Number(balance)>0 ? 0 : 1
         }
       })
+      this.getUserInfo()
+    },
+    getUserInfo(){
+      currentInfo().then(res=>{
+        if(res.code == 1){
+          this.form.name = res.data.info && res.data.info.name ? res.data.info.name : ''
+        }
+      })
+    },
+    clearInputOnFocus(){
+      this.form.name = ''
     },
     myHb(){
       let account = this.option.account?this.option.account:0
       let hdId = this.option.hdId?this.option.hdId:0
-      this.pageTo({url:"/pages/hb/list?hdId="+hdId+"&account="+account,type:2})
+      this.pageTo({url:"/pages/hb/list?hdId="+hdId+"&account="+account})
+    },
+    modifyName(){
+      // 表单规则
+      let rules = [
+        {
+          name: 'name',
+          rule: ['required'],
+          msg: ['请输入姓名']
+        }
+      ]
+      // 进行表单检查
+      let checkRes = form.validation(this.form, rules)
+      // 验证通过
+      if (!checkRes) {
+        this.submitNameForm()
+      } else {
+        this.$msg(checkRes)
+      }
+    },
+    submitNameForm(){
+      updateInfo(this.form).then(res=>{
+        if(res.code == 1){
+          this.$msg('已修改')
+          this.name = this.form.name
+        }
+      })
     },
     goBack(){
       uni.navigateBack()
@@ -101,8 +153,9 @@ export default {
 
 // 支付确认弹框样式
 .pay-confirm-content {
-  padding: 0upx 40upx 0upx 40upx;
+  padding: 0upx 40upx 50upx 40upx;
   text-align: center;
+  
   .confirm-text {
     margin-bottom: 60upx;
     
@@ -115,30 +168,101 @@ export default {
     }
     
     .text-desc {
-      font-size: 38upx;
-      color: #3f3e3e;
-      line-height: 1.4;
+      font-size: 32upx;
+      color: #8d8c8c;
+      line-height: 1.6;
+    }
+  }
+
+  // 姓名编辑区域
+  .name-edit-section {
+    margin-bottom:60upx;
+    background-color: #fafafa;
+    padding: 30upx;
+    border-radius: 12upx;
+
+    .section-label {
+      font-size: 30upx;
+      color: #666;
+      margin-bottom: 20upx;
+      line-height: 1.5;
+    }
+
+    .input-group {
+      display: flex;
+      align-items: center;
+      gap: 12upx;
+
+      .input-field {
+        flex: 1;
+        height: 90upx;
+        line-height: 90upx;
+        padding: 0 20upx;
+        background-color: #ffffff;
+        border: 1upx solid #e5e5e5;
+        border-radius: 10upx;
+        font-size: 28upx;
+        color: #333;
+        box-sizing: border-box;
+
+        &::placeholder {
+          color: #ccc;
+        }
+      }
+
+      .edit-btn {
+        height: 90upx;
+        padding: 0 30upx;
+        background-color: #3385ff;
+        color: #ffffff;
+        border: none;
+        border-radius: 10upx;
+        font-size: 26upx;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap;
+      }
     }
   }
   
   .confirm-btn-wrap {
+    display: flex;
+    flex-direction: column;
+
     .confirm-btn {
-      height: 90upx;
+      height: 120upx;
       color: #666;
-      border: 2upx solid #cecccc;
+      border: 2upx solid #e5e5e5;
       border-radius: 20upx;
       font-size: 34upx;
       font-weight: bold;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: 0 auto 40upx;
       background-color: #ffffff;
       padding: 0 40upx;
-      width: auto;
-      white-space: nowrap;
-      min-width: 180upx;
+      width: 100%;
+      box-sizing: border-box;
+      transition: all 0.3s;
+      margin-bottom: 24upx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:active {
+        opacity: 0.8;
+      }
+
+      &.btn-primary {
+        color: #ffffff;
+        background-color: #3385ff;
+        border-color: #3385ff;
+      }
     }
+
     .tech-support {
       font-size: 30upx;
       color: #999;