添加充值记录页面，完善首页用户会员卡绑定信息，添加用户水卡注销及删除

Liuyi

2024-10-12 b5efdb89b096906a9cf20e04610bda7f460cbb0f

 pages/index/index.vue

@@ -1,6 +1,6 @@
<script setup>
    import { onMounted, ref } from "vue";
   import { getVipInfoApi,getUserInfo } from '../../api/index.js'
   import { getVipInfoApi,getUserInfo,reportLossApi,removeCardApi } from '../../api/index.js'
   import { onShow } from '@dcloudio/uni-app'
   //状态栏高度
   const topHeight = ref(0)
@@ -15,38 +15,46 @@
    */
   const cardInfo = ref({
      id:'',
      userName:'',
      userName:'微信用户',
      headImg:'',
      userPhone:'',
      
      waterCardNumber:'',
      balance:'',
      count:'',
      userPhone:'',
   })
   const isVip = ref(false)
   //获取会员卡信息
   async function getInfo(){
      let res = await getUserInfo()
      if(res.code == 200){
         console.log('res',res.data)
         cardInfo.value.userName = res.data.userInfo.userName
         cardInfo.value.headImg = res.data.userInfo.headImg
         cardInfo.value.userPhone = res.data.userInfo.userPhone
         cardInfo.value.id = res.data.userInfo.id
         if(res.data.userInfo.waterCardNumber){
            let res1 = await getVipInfoApi()
            cardInfo.value.waterCardNumber = res1.data.cardNumber
            if(res1.data.cardType == 1){
               cardInfo.value.balance = res1.data.balance
            }else if(res1.data.cardType == 2){
               cardInfo.value.count = res1.data.count
   async function getVipInfo(){
      await getVipInfoApi().then((res) =>{
         if(res.code == 200){
            cardInfo.value.waterCardNumber = res.data.cardNumber
            if(res.data.cardType == 1){
               cardInfo.value.balance = res.data.balance
            }else if(res.data.cardType == 2){
               cardInfo.value.count = res.data.count
            }
            isVip.value = true
         }else{
            isVip.value = false
         }
         uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
      }
      })
   }
   //获取用户信息
   async function getInfo(){
      await getUserInfo().then(async(res) =>{
         if(res.code == 200){
            cardInfo.value.userName = res.data.userInfo.userName ?  res.data.userInfo.userName : cardInfo.value.userName
            cardInfo.value.headImg = res.data.userInfo.headImg
            cardInfo.value.userPhone = res.data.userInfo.userPhone
            cardInfo.value.id = res.data.userInfo.id
				
            if(res.data.userInfo.waterCardNumber){
               await getVipInfo()
            }else{
               isVip.value = false
            }
            uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
         }
      })
   }
   /**
    * 扫码取水相关
@@ -67,19 +75,74 @@
    * 功能列表相关
    */
   const functionList = ref([
      {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/balanceRecord/index'},
      {text:'消费记录',icon:'../../static/images/index/icon32.png',url:'/pages/paymentRecord/index'},
      {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:''},
      {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/functionList/balanceRecord/index',isUrl:1},
      {text:'消费记录',icon:'../../static/images/index/icon32.png',url:'/pages/functionList/paymentRecord/index',isUrl:1},
      {text:'充值记录',icon:'../../static/images/index/icon33.png',url:'/pages/functionList/rechargeRecord/index',isUrl:1},
      {text:'账户共享',icon:'../../static/images/index/icon34.png',url:'',isUrl:1},
      {text:'优惠卷',icon:'../../static/images/index/icon35.png',url:'',isUrl:1},
      {text:'电子发票',icon:'../../static/images/index/icon36.png',url:'',isUrl:1},
      {text:'会员卡挂失',icon:'../../static/images/index/icon37.png',url:'',isUrl:2},
      {text:'会员卡注销',icon:'../../static/images/index/icon38.png',url:'',isUrl:3},
   ])
   function navTo(itemUrl){
      if(itemUrl){
         uni.navigateTo({
            url:itemUrl
         })
      }
   }
   //功能列表点击功能
   async function setEvent(isUrl,url){
      if(isUrl == 1){
         navTo(url)
      }else if(isUrl == 2){
         uni.showModal({
               title: '会员卡挂失',
               content: '确认挂失会员卡？',
               success: async function(res) {
               if (res.confirm) {
                  await reportLossApi(cardInfo.value.waterCardNumber).then((res) =>{
                     if(res.code == 200){
                        uni.showToast({
                           title: '已挂失',
                           duration: 2000,
                        });
                     }
                  })
               }else{
                  console.log('点击了取消7')
               }
            }
         })
      }else if(isUrl == 3){
         uni.showModal({
               title: '会员卡注销',
               content: '确认注销会员卡？',
               success: async function(res) {
               if (res.confirm) {
                  await removeCardApi(cardInfo.value.waterCardNumber).then(async(res) =>{
                     if(res.code == 200){
                        uni.showToast({
                           title: '已注销',
                           duration: 2000,
                        });
                        await getVipInfo().then((res) =>{
                           if(res.code == 200){
                              if(!res.data.id){
                                 isVip.value = false
                                 cardInfo.value.balance = ''
                                 cardInfo.value.count = ''
                                 cardInfo.value.waterCardNumber = ''
                                 uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
                              }
                           }
                        })
                     }
                  })
               }else{
                  console.log('点击了取消8')
               }
            }
         })
      }
   }
@@ -110,12 +173,12 @@
                  <view class="card-left">
                     <view class="left-top">
                        <view>
                           <image src="../../static/images/index/code1.png" alt=""></image>
                           <image v-if="isVip" src="../../static/images/index/code1.png" alt=""></image>
                           <text>会员卡</text>
                        </view>
                        <view>ID:{{cardInfo.waterCardNumber}}</view>
                        <view v-if="isVip">ID:{{cardInfo.waterCardNumber}}</view>
                     </view>
                     <view class="left-bottom">电话：{{cardInfo.userPhone}}</view>
                     <!-- <view v-if="cardInfo.userPhone" class="left-bottom">电话：{{cardInfo.userPhone}}</view> -->
                  </view>
                  <view class="card-right">
                     <view class="card-right-top">
@@ -123,10 +186,11 @@
                           <image src='../../static/images/index/vip-add.png' alt=''></image>
                           <text>添加会员卡</text>
                        </view> -->
                        <text>金额卡</text>
                        <text>{{cardInfo.balance}}元</text>
                        <text v-if="isVip">金额卡</text>
                        <text v-if="!isVip">未绑定会员卡</text>
                        <text v-if="isVip">{{cardInfo.balance}}元</text>
                     </view>
                     <view class="card-right-bottom" @click="navTo('/pages/recharge/index')">充值</view>
                     <view v-if="isVip" class="card-right-bottom" @click="navTo('/pages/recharge/index')">充值</view>
                  </view>
               </view>
            </view>
@@ -157,7 +221,7 @@
            <view class="box2-title"><text>功能列表</text></view>
            <view class="box2-content">
               <block v-for="(item,index) in functionList" :key="index">
                  <view class="box2-item"  @click="navTo(item.url)">
                  <view class="box2-item"  @click="setEvent(item.isUrl,item.url)">
                     <image :src= "item.icon" alt=""></image>
                     <view class="box2-item-text">{{item.text}}</view>
                  </view>