添加附近站点，添加消费记录，重写用户申请位置权限

Liuyi

2024-10-12 5c2531930dc7c87d0c39d116c84f87b507394eb9

 pages/userInfo/index.vue

@@ -1,7 +1,43 @@
<script setup>
   import { onMounted, ref } from 'vue'

   import { editUserInfoApi,getUserInfo } from '../../api/index.js'
   const isEdit = ref(false)
   const editForm = ref({id:'',userName:'',userPhone:''})
   const userInfo = ref(JSON.parse(uni.getStorageSync('userInfo')))
   function edit(){
      editForm.value.id = userInfo.value.id
      editForm.value.userName = userInfo.value.userName
      editForm.value.userPhone = userInfo.value.userPhone
      isEdit.value = true
   }
   function cancel(){
      isEdit.value = false
      editForm.vlaue = {id:'',userName:'',userPhone:''}
   }
   async function submitEdit(){
      await editUserInfoApi(editForm.value).then(async(res) =>{
			
         if(res.code == 200){
            uni.showToast({
               title: '修改成功！',
               duration: 2000,
            });
            await getUserInfo().then((res) =>{
               userInfo.value.userName = res.data.userInfo.userName
               userInfo.value.userPhone = res.data.userInfo.userPhone
               uni.setStorageSync('userInfo',JSON.stringify(userInfo.value))
            })
         }else{
            uni.showToast({
               title: '请求错误！请重试',
               duration: 2000,
               icon:'none'
            });
         }
         isEdit.value = false
         editForm.vlaue = {id:'',userName:'',userPhone:''}
      })
   }
</script>
<template>
   <view class="container">
@@ -9,13 +45,16 @@
      <view class="content">
         <view class="info-box">
            <view class="info-up">
               <view>
               <view class="info-img">
                  <text>头像</text>
                  <image src='../../static/logo.png' alt=''></image>
               </view>
               <view>
               <view class="info-name">
                  <text>用户名称</text>
                  <text class="info-value">{{userInfo.userName}}</text>
                  <view>
                     <input v-if="isEdit" v-model="editForm.userName" placeholder="请输入新用户名"/>
                     <text v-else class="info-value">{{userInfo.userName}}</text>
                  </view>
               </view>
            </view>
            <view class="info-list">
@@ -26,13 +65,16 @@
               <view class="item">
                  <text>联系方式</text>
                  <view>
                     <text>{{userInfo.userPhone}}</text>
                     <image class="edit"src="../../static/images//other/more.png" alt=''></image>
                     <input v-if="isEdit" v-model="editForm.userPhone" placeholder="请输入新联系方式"/>
                     <text v-else>{{userInfo.userPhone}}</text>
                     <!-- <image class="edit"src="../../static/images//other/more.png" alt=''></image> -->
                  </view>
               </view>
            </view>
         </view>
         <view class="subBtn">确认修改</view>
         <view v-if="!isEdit" @click="edit()" class="subBtn">修改</view>
         <view v-if="isEdit" @click="cancel()" class="btn btn1">取消</view>
         <view v-if="isEdit" @click="submitEdit()" class="btn btn2">确认修改</view>
      </view>
   </view>
</template>
@@ -47,17 +89,29 @@
         background:linear-gradient(to top,#FFFFFF,#E8EFFF);  
         padding-top:36rpx;
         position: relative;
         box-sizing: border-box;
         .info-value{
            font-size:32rpx;
            color: #777777;
         }
         .edit{
            margin-left:15rpx;
            width: 20rpx;
            height:28rpx;
         }
         // .edit{
         //    margin-left:15rpx;
         //    width: 20rpx;
         //    height:28rpx;
         // }
         .info-box{
            width: 100%;
            //该页面公用input样式
            input{
               border-radius: 10rpx;
               border:1px solid rgba(101, 156, 244, 0.2);
               padding:5rpx 10rpx;
               box-shadow: 0 0 12rpx 1rpx rgba(101, 156, 244, 0.2);
               color: #777777;
               height:50rpx;
               line-height:50rpx;
               width:300rpx;
            }
            .info-up{
               height:308rpx;
               width:100%;
@@ -70,7 +124,7 @@
               box-sizing: border-box;
               font-size: 32rpx;
               color: #343434;
               view:first-child{
               .info-img{
                  width:100%;
                  display: flex;
                  justify-content:space-between;
@@ -81,7 +135,7 @@
                     border-radius: 50rpx;
                  }
               }
               view:last-child{
               .info-name{
                  width:100%;
                  display: flex;
                  justify-content:space-between;
@@ -135,6 +189,31 @@
            bottom:100rpx;
            left:32rpx;
         }
         .btn{
               width: 200rpx;
               height: 70rpx;
               border-radius: 32rpx;
               text-align: center;
               line-height: 70rpx;
               letter-spacing:3rpx;
               font-weight: 300;
               font-size: 36rpx;
               position: absolute;
               bottom:100rpx;
         }
         .btn1{
            color:#5EA1FA;
            background:#FFFFFF;
            position: absolute;
            left:130rpx;
            border:2rpx solid #5EA1FA;
         }
         .btn2{
            color: #FFFFFF;
            background:#5EA1FA;
            position: absolute;
            right:130rpx;
         }
      }
   }
</style>