完成地址管理新增、删除、编辑、设置默认地址，修改navbar组件

Liuyi

2024-09-29 0560eed4a389f806dc3254a526e929e8476c868a

 pages/index/index.vue

@@ -1,17 +1,93 @@
import { onMounted } from "vue"
<script setup>
    import { onMounted, ref } from "vue";
   import { getVipInfoApi } from '../../api/index.js'
   import { getUserInfo } from '../../api/index.js'
   //胶囊高度
   const topHeight = ref(0)
   function getTopHeight(){
      if(uni.getMenuButtonBoundingClientRect){
         topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
      }
   }
   /**
    * 会员卡相关
    */
   const vipInfo = ref()
   const isVip = ref(false)
   //获取会员卡信息
   async function getVipInfo(){
      let res = await getUserInfo()
      if(res.data.userInfo.waterCardNumber){
         let res1 = await getVipInfoApi()
         vipInfo.value = res1.data
         isVip.value = true
      }else{
         isVip.value = false
      }
   }
   /**
    * 扫码取水相关
    */
   function toScan(){
      uni.navigateTo({
         url:'/pages/scanWater/index'
      })
   }
   /**
    * 功能列表相关
    */
   const functionList = ref([
      {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/balanceRecord/index'},
      {text:'消费记录',icon:'../../static/images/index/icon32.png',url:''},
      {text:'充值记录',icon:'../../static/images/index/icon33.png',url:''},
      {text:'账户共享',icon:'../../static/images/index/icon34.png',url:''},
      {text:'优惠卷',icon:'../../static/images/index/icon35.png',url:''},
      {text:'电子发票',icon:'../../static/images/index/icon36.png',url:''},
      {text:'联系客服',icon:'../../static/images/index/icon37.png',url:''},
      {text:'推广分佣',icon:'../../static/images/index/icon38.png',url:''},
   ])
   function navTo(itemUrl){
      if(itemUrl){
         uni.navigateTo({
            url:itemUrl
         })
      }
   }
   //获取用户地理位置
   async function getUserLocation(){
      wx.getLocation({
         type: 'wgs84',
         success(res){
         const latitude = res.latitude
         const longitude = res.longitude
         const speed = res.speed
         const accuracy = res.accuracy
         },
         fail(e){
            console.log('e',e)
         }
      })
      console.log('location')
   }
   onMounted( async() =>{
      getTopHeight()
      await getVipInfo()
      // await getUserLocation()
   })
</script>

<template>
   <view class="container">
      <view class="content">
         <view class="card-box" :style="{paddingTop:topHeight + 'rpx'}">
            <view class="card">
               <view class="card-content" @click="navToAddCard()">
               <view class="card-content">
                  <view v-if="isVip" class="card-title">
                     <view>会员卡</view>
                     <image src="../../static/images/index/code1.png" alt=""></image>
                  </view>
                  <view v-else class="card-add">
                     <view>
                     <view @click="navTo('/pages/addCard/index')">
                        <image src="../../static/images/index/vip-add.png" alt=""></image>
                        <text>添加会员卡</text>
                     </view>
@@ -35,7 +111,7 @@
            </view>
         </view>
         <view class="function-box1">
            <view class="box1-bg box1-one">
            <view class="box1-bg box1-one" @click="navTo('/pages/sendWater/index')">
               <image src="../../static/images/index/home21.png" alt=""></image>
               <view>送水到家</view>
            </view>
@@ -45,13 +121,13 @@
                  <text>￥</text>
                  <text>120.00</text>
               </view>
               <view>
               <view @click="navTo('/pages/recharge/index')">
                  充值
               </view>
            </view>
            <view class="box1-bg box1-three">
            <view class="box1-bg box1-three" @click="toScan()">
               <image src="../../static/images/index/icon23.png" alt=""></image>
               <view>送水到家</view>
               <view>扫码取水</view>
            </view>
         </view>
         <view class="function-box2">
@@ -94,48 +170,26 @@
            </view>
         </view>
      </view>
		
      <!-- 微信授权弹窗 -->
      <!-- <uni-popup ref="popupRef" background-color="#fff">
         <view class="popup-content">
            <text class="popup-title">微信登录</text>
            <view class="hr"></view>
            <view class="img-box"><img src="../../static/images/login/logo.png" alt="" class="img"/></view>
            <view class="info-box">
               <view class="info-text1">青源直饮水平台申请获取以下权限:</view>
               <view class="hr2"></view>
               <view class="info-text2">· 获得你的公开信息（昵称、头像、地区及性别)</view>
               <view class="button-box">
                  <button  class="button1" @click="popupRef.close('bottom')">取消</button>
                  <button  class="button2" @click="wxLoginFn()">确定</button>
               </view>
            </view>
         </view>
      </uni-popup> -->
   </view>
</template>

<script setup>
    import { onMounted, ref } from "vue"
   //胶囊高度
   const topHeight = ref(0)
   /**
    * 会员卡相关
    */
   const isVip = ref(false)
   function navToAddCard(){
      uni.navigateTo({
         url:'/pages/addCard/index'
      })
   }
   /**
    * 功能列表相关
    */
   const functionList = ref([
      {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/balanceRecord/index'},
      {text:'消费记录',icon:'../../static/images/index/icon32.png',url:'/pages/login/index'},
      {text:'充值记录',icon:'../../static/images/index/icon33.png',url:'/pages/login/index'},
      {text:'账户共享',icon:'../../static/images/index/icon34.png',url:'/pages/login/index'},
      {text:'优惠卷',icon:'../../static/images/index/icon35.png',url:'/pages/login/index'},
      {text:'电子发票',icon:'../../static/images/index/icon36.png',url:'/pages/login/index'},
      {text:'联系客服',icon:'../../static/images/index/icon37.png',url:'/pages/login/index'},
      {text:'推广分佣',icon:'../../static/images/index/icon38.png',url:'/pages/login/index'},
   ])
   function navTo(itemUrl){
      uni.navigateTo({
         url:itemUrl
      })
   }
   onMounted(() =>{
      if(uni.getMenuButtonBoundingClientRect){
         topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
      }
   })
	
</script>

<style lang="scss" scoped>
   .container{
      width:100%;
@@ -145,370 +199,438 @@
         width:100%;
         height:100vh;
         background:#F6F6F6;
         }
   }
   .card-box{
      width: 100%;
      height: auto;
      // background: #a0b5c7;
      box-sizing: border-box;
      padding: 0 32rpx;
      background: linear-gradient(to bottom,#5EA1FA,#D2F2FE);
      .card{
         width: 100%;
         height: 304rpx;
         background-image: url("../../static/images/index/card1.png");
         background-repeat: no-repeat;
         background-size: 100%;
         .card-content{
         .card-box{
            width: 100%;
            height: 100%;
            height: auto;
            // background: #a0b5c7;
            box-sizing: border-box;
            // background: #AFD5FF;
            padding: 14rpx 42rpx 64rpx 22rpx;
            .card-title{
               width:100%;
               height:64rpx;
               display: flex;
               justify-content: flex-end;
               // background: #82fec5;
               align-items: center;
               view{
                  font-weight:300;
                  font-size: 36rpx;
                  color: #FFFFFF;
                  letter-spacing:5rpx;
                  text-align: left;
               }
               image{
                  width:64rpx;
                  height:64rpx;
               }
            }
            .card-add{
               width:100%;
               height:64rpx;
               display: flex;
               justify-content: flex-end;
               align-items: center;
               view{
                  width: 172rpx;
                  height:38rpx;
                  border-radius:24rpx;
                  background: #fff;
                  display: flex;
                  justify-content:flex-start;
                  align-items:center;
                  image{
                     width:22rpx;
                     height:22rpx;
                     margin-left:15rpx;
                  }
                  text{
                     font-weight: 300;
                     font-size: 20rpx;
                     color: #0088FF;
                     margin-left:15rpx;
                  }
               }
            }
            .card-info{
            padding: 0 32rpx;
            background: linear-gradient(to bottom,#5EA1FA,#D2F2FE);
            .card{
               width: 100%;
               height:100rpx;
               // background: #8ff6c3;
               margin-top: 18rpx;
               display: flex;
               justify-content: flex-start;
               align-items: center;
               .info-head{
                  width: 100rpx;
                  height:100rpx;
                  margin-right: 20rpx;
                  image{
                     width: 100rpx;
                     height:100rpx;
                  }
               }
               .info-content{
                  width: 216rpx;//108+86+22
                  height:100rpx;
                  // background: #54dac4;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: flex-start;
                  .info-content-top{
                     width: 100%;
               height: 304rpx;
               background-image: url("../../static/images/index/card1.png");
               background-repeat: no-repeat;
               background-size: 100%;
               .card-content{
                  width: 100%;
                  height: 100%;
                  box-sizing: border-box;
                  // background: #AFD5FF;
                  padding: 14rpx 42rpx 64rpx 22rpx;
                  .card-title{
                     width:100%;
                     height:64rpx;
                     display: flex;
                     justify-content:space-between;
                     align-items:center;
                     margin-bottom:8rpx;
                     view:first-child{
                        width: 108rpx;
                        height: 50rpx;
                        font-weight: 400;
                     justify-content: flex-end;
                     // background: #82fec5;
                     align-items: center;
                     view{
                        font-weight:300;
                        font-size: 36rpx;
                        color: #FFFFFF;
                        letter-spacing:5rpx;
                        text-align: left;
                     }
                     view:last-child{
                        width: 86rpx;
                        height: 32rpx;
                        font-weight:300;
                        font-size: 26rpx;
                        color: #FFFFFF;
                        text-align: center;
                        background-image: url('../../static/images/index/vip1.png');
                     image{
                        width:64rpx;
                        height:64rpx;
                     }
                  }
                  .info-content-bottom{
                  .card-add{
                     width:100%;
                     height:64rpx;
                     display: flex;
                     justify-content: flex-end;
                     align-items: center;
                     view{
                        width: 172rpx;
                        height:38rpx;
                        border-radius:24rpx;
                        background: #fff;
                        display: flex;
                        justify-content:flex-start;
                        align-items:center;
                        image{
                           width:22rpx;
                           height:22rpx;
                           margin-left:15rpx;
                        }
                        text{
                           font-weight: 300;
                           font-size: 20rpx;
                           color: #0088FF;
                           margin-left:15rpx;
                        }
                     }
                  }
                  .card-info{
                     width: 100%;
                     height:100rpx;
                     // background: #8ff6c3;
                     margin-top: 18rpx;
                     display: flex;
                     justify-content: flex-start;
                     align-items: center;
                     .info-head{
                        width: 100rpx;
                        height:100rpx;
                        margin-right: 20rpx;
                        image{
                           width: 100rpx;
                           height:100rpx;
                        }
                     }
                     .info-content{
                        width: 216rpx;//108+86+22
                        height:100rpx;
                        // background: #54dac4;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: flex-start;
                        .info-content-top{
                           width: 100%;
                           display: flex;
                           justify-content:space-between;
                           align-items:center;
                           margin-bottom:8rpx;
                           view:first-child{
                              width: 108rpx;
                              height: 50rpx;
                              font-weight: 400;
                              font-size: 36rpx;
                              color: #FFFFFF;
                              text-align: left;
                           }
                           view:last-child{
                              width: 86rpx;
                              height: 32rpx;
                              font-weight:300;
                              font-size: 26rpx;
                              color: #FFFFFF;
                              text-align: center;
                              background-image: url('../../static/images/index/vip1.png');
                           }
                        }
                        .info-content-bottom{
                           width: 100%;
                           font-weight: 300;
                           font-size: 20rpx;
                           color: #FFFFFF;
                           letter-spacing:5rpx;
                           text-align: left;
                        }
                     }
                     .info-more{
                        width: 12rpx;
                        height: 28rpx;
                        margin-left:274rpx;
                        image{
                           width: 12rpx;
                           height: 28rpx;
                        }
                     }
                  }
                  .card-bottom{
                     margin-top:36rpx;
                     width:100%;
                     display: flex;
                     justify-content:space-evenly;
                     font-weight: 300;
                     font-size: 20rpx;
                     color: #FFFFFF;
                     letter-spacing:5rpx;
                     text-align: left;
                  }
               }
               .info-more{
                  width: 12rpx;
                  height: 28rpx;
                  margin-left:274rpx;
                  image{
                     width: 12rpx;
                     height: 28rpx;
                     color: #D8D8D8;
                     line-height: 0rpx;
                     text-align: center;
                  }
               }
            }
            .card-bottom{
               margin-top:36rpx;
               width:100%;
               display: flex;
               justify-content:space-evenly;
               font-weight: 300;
               font-size: 20rpx;
               color: #D8D8D8;
               line-height: 0rpx;
               text-align: center;
         }
         .function-box1{
            width:100%;
            box-sizing:border-box;
            height: 227rpx;
            padding: 20rpx 32rpx 15rpx;
            // background: rgba(85, 170, 0, 0.1);
            display:flex;
            justify-content: space-between;
            align-items:center;
            .box1-bg{
               width:212rpx;
               height:200rpx;
               border-radius:24rpx;
               background: #fff;
               box-shadow:0 0 12rpx 2rpx rgba(13,118,255,0.16);
            }
         }
      }
   }
   .function-box1{
      width:100%;
      box-sizing:border-box;
      height: 227rpx;
      padding: 20rpx 32rpx 15rpx;
      // background: rgba(85, 170, 0, 0.1);
      display:flex;
      justify-content: space-between;
      align-items:center;
      .box1-bg{
         width:212rpx;
         height:200rpx;
         border-radius:24rpx;
         background: #fff;
         box-shadow:0 0 12rpx 2rpx rgba(13,118,255,0.16);
      }
      .box1-one{
         font-weight: 300;
         font-size: 32rpx;
         color: #000000;
         text-align: center;
         display: flex;
         flex-direction:column;
         align-items: center;
         justify-content: center;
         image{
            width: 86rpx;
            height: 78rpx;
            margin-bottom:20rpx;
         }
      }
      .box1-two{
         box-sizing: border-box;
         padding:25rpx 0 10rpx;
         display: flex;
         flex-direction:column;
         align-items:center;
         justify-content:space-around;
         view:first-child{
            font-weight: 300;
            font-size: 24rpx;
            color: #464646;
            text-align: center;
            margin-bottom:10rpx;
         }
         .recharge{
            text:first-child{
               font-weight: 500;
               font-size: 32rpx;
               color: #000;
            }
            text:last-child{
            .box1-one{
               font-weight: 300;
               font-size: 32rpx;
               color: #2269E5;
            }
         }
         view:last-child{
            width: 140rpx;
            height: 80rpx;
            font-weight:300;
            font-size: 24rpx;
            color: #000141;
            background-image: url('../../static/images/index/icon22.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            text-align:center;
            line-height:80rpx;
            margin-top:10rpx;
         }
      }
      .box1-three{
         font-weight: 300;
         font-size: 32rpx;
         color: #000000;
         text-align: center;
         display: flex;
         flex-direction:column;
         align-items: center;
         justify-content: center;
         image{
            width: 83rpx;
            height:83rpx;
            margin-bottom:20rpx;
         }
      }
   }
   .function-box2{
      width:100%;
      box-sizing:border-box;
      height: 443rpx;//374 + 44 + 距离 + 底部padding32
      padding:0 32rpx 15rpx;
      // background: rgba(46, 121, 170, 0.5);
      .box2-title{
         width: 100%;
         font-weight:300;
         font-size: 32rpx;
         color: #000000;
         text-align: left;
         margin-bottom: 10rpx;
         margin-left: 30rpx;
      }
      .box2-content{
         box-sizing: border-box;
         padding:22rpx 35rpx;
         width: 686rpx;
         height:374rpx;
         background: #fff;
         border-radius: 24rpx;
         box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.1);
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: center;
         .box2-item{
            width: 146rpx;
            height:143rpx;
            display: flex;
            flex-direction:column;
            justify-content:space-between;
            align-items: center;
            image{
               width: 90rpx;
               height:90rpx;
            }
            .box2-item-text{
               width:100%;
               height: 40rpx;
               font-weight: 300;
               font-size: 28rpx;
               color: #000000;
               text-align: center;
               display: flex;
               flex-direction:column;
               align-items: center;
               justify-content: center;
               image{
                  width: 86rpx;
                  height: 78rpx;
                  margin-bottom:20rpx;
               }
            }
            .box1-two{
               box-sizing: border-box;
               padding:25rpx 0 10rpx;
               display: flex;
               flex-direction:column;
               align-items:center;
               justify-content:space-around;
               view:first-child{
                  font-weight: 300;
                  font-size: 24rpx;
                  color: #464646;
                  text-align: center;
                  margin-bottom:10rpx;
               }
               .recharge{
                  text:first-child{
                     font-weight: 500;
                     font-size: 32rpx;
                     color: #000;
                  }
                  text:last-child{
                     font-weight: 300;
                     font-size: 32rpx;
                     color: #2269E5;
                  }
               }
               view:last-child{
                  width: 140rpx;
                  height: 80rpx;
                  font-weight:300;
                  font-size: 24rpx;
                  color: #000141;
                  background-image: url('../../static/images/index/icon22.png');
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 100% 100%;
                  text-align:center;
                  line-height:80rpx;
                  margin-top:10rpx;
               }
            }
            .box1-three{
               font-weight: 300;
               font-size: 32rpx;
               color: #000000;
               text-align: center;
               display: flex;
               flex-direction:column;
               align-items: center;
               justify-content: center;
               image{
                  width: 83rpx;
                  height:83rpx;
                  margin-bottom:20rpx;
               }
            }
         }
      }
   }
   .advertisement-box{
      width:100%;
      height: 188rpx;
      padding:0 32rpx 10rpx; 
      box-sizing: border-box;
      image{
         width:100%;
         height: 178rpx;
      }
   }
   .service-box{
      width: 100%;
      height: 255rpx;
      // background: #D2F2FE;
      padding:0 32rpx;
      box-sizing: border-box;
      .service-title{
         height: 44rpx;
         font-weight: 300;
         font-size: 32rpx;
         color: #000000;
         text-align: left;
         margin-bottom: 5rpx;
         margin-left: 30rpx;
      }
      .service-content{
         width: 100%;
         height: 206rpx;
         display: flex;
         justify-content: space-between;
         align-items: center;
         .service-bg{
            width: 330rpx;
            height: 206rpx;
            background: linear-gradient(to bottom,#AFD5FF,#FFFFFF);
            border-radius: 24rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items:flex-start;
               view:first-child{
         .function-box2{
            width:100%;
            box-sizing:border-box;
            height: 443rpx;//374 + 44 + 距离 + 底部padding32
            padding:0 32rpx 15rpx;
            // background: rgba(46, 121, 170, 0.5);
            .box2-title{
               width: 100%;
               font-weight:300;
               font-size: 32rpx;
               color: #000000;
               text-align: left;
               margin-bottom: 10rpx;
               margin-left: 30rpx;
            }
            .box2-content{
               box-sizing: border-box;
               padding:22rpx 35rpx;
               width: 686rpx;
               height:374rpx;
               background: #fff;
               border-radius: 24rpx;
               box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.1);
               display: flex;
               flex-wrap: wrap;
               justify-content: space-between;
               align-items: center;
               .box2-item{
                  width: 146rpx;
                  height:143rpx;
                  display: flex;
                  flex-direction:column;
                  justify-content:space-between;
                  align-items: center;
                  margin-left:40rpx;
                  image{
                     width:48rpx;
                     height:48rpx;
                     margin-right:10rpx;
                     width: 90rpx;
                     height:90rpx;
                  }
                  text{
                  .box2-item-text{
                     width:100%;
                     height: 40rpx;
                     font-weight: 300;
                     font-size: 28rpx;
                     color: #000000;
                     text-align: center;
                  }
               }
               .service-info{
                  width: 214rpx;
                  font-weight: 300;
                  font-size: 24rpx;
                  color: #4D4B4B;
                  margin-left:96rpx;
               }
               view:last-child{
                  margin-left: 174rpx;
                  margin-top: 18rpx;
            }
         }
         .advertisement-box{
            width:100%;
            height: 188rpx;
            padding:0 32rpx 10rpx; 
            box-sizing: border-box;
            image{
               width:100%;
               height: 178rpx;
            }
         }
         .service-box{
            width: 100%;
            height: 255rpx;
            // background: #D2F2FE;
            padding:0 32rpx;
            box-sizing: border-box;
            .service-title{
               height: 44rpx;
               font-weight: 300;
               font-size: 32rpx;
               color: #000000;
               text-align: left;
               margin-bottom: 5rpx;
               margin-left: 30rpx;
            }
            .service-content{
               width: 100%;
               height: 206rpx;
               display: flex;
               justify-content: space-between;
               align-items: center;
               .service-bg{
                  width: 330rpx;
                  height: 206rpx;
                  background: linear-gradient(to bottom,#AFD5FF,#FFFFFF);
                  border-radius: 24rpx;
                  display: flex;
                  align-items: center;
                  image{
                     width:32rpx;
                     height:32rpx;
                  }
                  text{
                     font-weight: 300;
                     font-size: 24rpx;
                     color: #4D4B4B;
                     margin-right: 10rpx;
                  }
                  flex-direction: column;
                  justify-content: center;
                  align-items:flex-start;
                     view:first-child{
                        display: flex;
                        align-items: center;
                        margin-left:40rpx;
                        image{
                           width:48rpx;
                           height:48rpx;
                           margin-right:10rpx;
                        }
                        text{
                           font-weight: 300;
                           font-size: 28rpx;
                           color: #000000;
                        }
                     }
                     .service-info{
                        width: 214rpx;
                        font-weight: 300;
                        font-size: 24rpx;
                        color: #4D4B4B;
                        margin-left:96rpx;
                     }
                     view:last-child{
                        margin-left: 174rpx;
                        margin-top: 18rpx;
                        display: flex;
                        align-items: center;
                        image{
                           width:32rpx;
                           height:32rpx;
                        }
                        text{
                           font-weight: 300;
                           font-size: 24rpx;
                           color: #4D4B4B;
                           margin-right: 10rpx;
                        }
                     }
               }
            }
         }
      }
      .popup-content{
         height: 560rpx;
         position: relative;
         z-index: 1000;
         .popup-title{
            width: 100%;
            display: block;
            text-align: center;
            margin: 15rpx 0;
            font-weight: 600;
            font-size: 36rpx;
         }
         .hr {
            width: 100%;
            height: 2rpx;
            background: #e2e2e2;
         }
         .img-box {
            width: 65rpx;
            height: 65rpx;
            margin: 40rpx auto 30rpx;
            border: 1rpx solid #e2e2e2;
            border-radius: 50%;
            padding: 15rpx;
            .img{
               width: 100%;
               height: 100%;
            }
         }
         .info-box {
            width: 100%;
            padding: 0 80rpx;
            box-sizing: border-box;
            .hr2{
               width: 100%;
               height: 2rpx;
               background: #e2e2e2;
               margin: 20rpx 0;
            }
            .info-text2{
               font-size: 26rpx;
               color: #767676;
            }
         }
         .button-box{
            display: flex;
            margin-top: 20rpx;
            button{
               width: 230rpx;
               height: 80rpx;
               line-height: 80rpx;
               border: none;
               box-shadow: none;
               margin-top: 30rpx;
            }
            button::after {
               border: none !important;
            }
            .button1{
               background-color: #F0F0F0;
               color: #333333;
            }
            .button2{
               background-color: #06BF5E;
               color: #ffffff;
            }
         }
      }
   }