充值界面

src/pages.json

@@ -125,7 +125,7 @@
 			"path": "pages/IcbcModule/Recharge/Recharge",
 			"style": {
 				"navigationStyle": "custom",
-				"navigationBarTitleText": "充值",
+				"navigationBarTitleText": "电子校园卡",
 				"enablePullDownRefresh": false
 			}
 
@@ -263,7 +263,7 @@
 			"path": "pages/BankModule/Recharge/Recharge",
 			"style": {
 				"navigationStyle": "custom",
-				"navigationBarTitleText": "充值",
+				"navigationBarTitleText": "电子校园卡",
 				"enablePullDownRefresh": false
 			}
 

src/pages/IcbcModule/Recharge/Recharge.vue

 <template>
   <view class="container">
+    <view class="userInfoBox">
+      <view class="firstLine">
+        <view class="avatar">
+          <image :src="ImgUrl+'user/personAva.png'" alt=""></image>
+        </view>
+        <view class="name">{{ PersonalInfo.name }}</view>
+        <view>{{ PersonalInfo.gradename }}{{
+              PersonalInfo.classname
+            }}</view>
+      </view>
+      <view class="secondLine">{{ PersonalInfo.schoolname }}</view>
+    </view>
+    <view class="balanceWrapper">
+      <view class="firstLine"></view>
+    </view>
     <view class="contentBox" v-if="!depotMoneyother">
       <!-- <image mode='widthFix' src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (31).png"></image> -->
       <view class="contentDiv">
@@ -98,7 +113,7 @@
       </view>
       <!-- 充值其它金额 -->
       <!-- <view class="OtherMoney" v-if="isOtherMoney"> -->
-	  <view class="OtherMoney">
+      <view class="OtherMoney">
         <span>￥</span>
         <input
           v-model="inputOtherM"
@@ -216,7 +231,10 @@
                   item.bindCardNo.slice(item.bindCardNo.length - 4)
                 }}</span
               >
-              <image class='BankListImg' src='../../../static/img/choiceBank.png'></image>
+              <image
+                class="BankListImg"
+                src="../../../static/img/choiceBank.png"
+              ></image>
             </view>
           </view>
         </view>
@@ -450,8 +468,8 @@ export default {
     // 输入限制
     inputControl(e) {
       let this_ = this;
-	  this_.MoneyIndex = -1;
-	  this_.isOtherMoney = true;
+      this_.MoneyIndex = -1;
+      this_.isOtherMoney = true;
       let obj = e.detail;
       this.$nextTick(function () {
         obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
@@ -643,9 +661,9 @@ export default {
       //   return;
       // }
       this.isOtherMoney = false;
-	  this.inputOtherM = "";
-	  this.Money = parseInt(value);
-	  this.MoneyIndex = MoneyIndex;
+      this.inputOtherM = "";
+      this.Money = parseInt(value);
+      this.MoneyIndex = MoneyIndex;
     },
     //按钮操作
     HideHTML(dom, type) {
@@ -871,7 +889,76 @@ page {
   width: 750rpx;
   background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
 }
-
+.userInfoBox {
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 64rpx);
+  height: 150rpx;
+  margin: 0 32rpx;
+  margin-top: 30rpx;
+  background: linear-gradient(270deg, #f4f4f4 0%, #ebebeb 100%);
+  border-radius: 16px;
+  .firstLine {
+    display: flex;
+    flex-direction: row;
+    width: calc(100% - 68rpx);
+    height: 56rpx;
+    line-height: 56rpx;
+    margin: 0 34rpx;
+    margin-top: 28rpx;
+    overflow: hidden;
+    view {
+      white-space: nowrap;
+    }
+    .avatar {
+      width: 56rpx;
+      height: 56rpx;
+      uni-image {
+        width: 56rpx;
+        height: 56rpx;
+      }
+    }
+    .name {
+      margin-left: 17rpx;
+      font-size: 36rpx;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.85);
+    }
+    view:last-child {
+      margin-left: 10rpx;
+      align-self: center;
+      align-items: center;
+      padding: 0 8rpx;
+      height: 40rpx;
+      line-height: 40rpx;
+      background: rgba(0, 0, 0, 0.08);
+      border-radius: 4rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.5);
+    }
+  }
+  .secondLine {
+    display: flex;
+    width: calc(100% - 62rpx);
+    margin: 0 31rpx;
+    margin-top: 8rpx;
+    height: 37rpx;
+    line-height: 37rpx;
+    font-size: 26rpx;
+    color: rgba(0, 0, 0, 0.45);
+  }
+}
+.balanceWrapper {
+  width: calc(100% - 64rpx);
+  margin: 0 32rpx;
+  margin-top: 24rpx;
+  height: 289rpx;
+  background-image: url("https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/user/bankBg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
 .showBindCardList {
   .choiceBox {
     text-align: center;