添加设备列表，添加待配送订单

Liuyi

2024-10-08 404ebee9f47d2d80353e64974193e3e31e7b91b6

 pages/userInfo/index.vue

@@ -1,27 +1,38 @@
<script setup>
   import { ref } from 'vue'
   const infoList = ref([
      {text:'',value:''},
      {text:'',value:''},
      {text:'',value:''},
      {text:'',value:''},
   ])
   import { onMounted, ref } from 'vue'

   const userInfo = ref(JSON.parse(uni.getStorageSync('userInfo')))
</script>
<template>
   <view class="container">
      <navbar title = '账户详情'></navbar>
      <navbar title = '用户资料'></navbar>
      <view class="content">
         <view class="info-box">
            <view class="info-up"></view>
            <view class="info-up">
               <view>
                  <text>头像</text>
                  <image src='../../static/logo.png' alt=''></image>
               </view>
               <view>
                  <text>用户名称</text>
                  <text class="info-value">{{userInfo.userName}}</text>
               </view>
            </view>
            <view class="info-list">
               <block v-for="(item,index) in infoList" :key = index>
                  <view class="item">
                     <text></text>
                     <text></text>
               <view class="item">
                  <text>会员卡号</text>
                  <text>{{userInfo.waterCardNumber}}</text>
               </view>
               <view class="item">
                  <text>联系方式</text>
                  <view>
                     <text>{{userInfo.userPhone}}</text>
                     <image class="edit"src="../../static/images//other/more.png" alt=''></image>
                  </view>
               </block>
               </view>
            </view>
         </view>
         <view class="subBtn">确认修改</view>
      </view>
   </view>
</template>
@@ -35,17 +46,95 @@
         height:calc(100vh - 176rpx);
         background:linear-gradient(to top,#FFFFFF,#E8EFFF);  
         padding-top:36rpx;
         position: relative;
         .info-value{
            font-size:32rpx;
            color: #777777;
         }
         .edit{
            margin-left:15rpx;
            width: 20rpx;
            height:28rpx;
         }
         .info-box{
            width: 100%;
            .info-up{
               height:308rpx;
               width:100%;
               background: #FFFFFF;
               padding:32rpx;
               display: flex;
               justify-content:space-between;
               align-items:center;
               flex-direction: column;
               box-sizing: border-box;
               font-size: 32rpx;
               color: #343434;
               view:first-child{
                  width:100%;
                  display: flex;
                  justify-content:space-between;
                  align-items:center;
                  image{
                     width:100rpx;
                     height:100rpx;
                     border-radius: 50rpx;
                  }
               }
               view:last-child{
                  width:100%;
                  display: flex;
                  justify-content:space-between;
                  align-items:center;
               }
            }
            .info-list{
               width:100%;
               height:252rpx;
               display: flex;
               flex-direction:column;
               justify-content:space-between;
               align-items: center;
               margin-top:20rpx;
               .item{
                  width:100%;
                  height: 116rpx;
                  background-color: #FFFFFF;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding:0 32rpx;
                  box-sizing: border-box;
                  text:last-child{
                     color: #777777;
                  }
                  view{
                     height: 116rpx;
                     display: flex;
                     justify-content:flex-end;
                     align-items: center;
                     text{
                        color: #777777;
                     }
                  }
               }
            }
         }
         .subBtn{
            width: 686rpx;
            height: 98rpx;
            background:#5EA1FA;
            border-radius:50rpx;
            text-align: center;
            line-height: 98rpx;
            letter-spacing:3rpx;
            font-weight: 300;
            font-size: 36rpx;
            color: #FFFFFF;
            position: absolute;
            bottom:100rpx;
            left:32rpx;
         }
      }
   }
</style>