添加积分商品详情，替换首页海报，调整样式，添加积分规则

Liuyi

2024-11-20 681efe897b7fb4dbe8bec5fa5056209e3e0edfdc

 pages/index/index.vue

@@ -1,6 +1,7 @@
<script setup>
    import { onMounted, ref } from "vue";
   import { getVipInfoApi,getUserInfo,reportLossApi,removeCardApi } from '../../api/index.js'
   import { BASE_URL } from '../../config/baseUrl';
   import { getVipInfoApi,getUserInfo,reportLossApi,removeCardApi,buyWaterApi } from '../../api/index.js'
   import { onShow,getCurrentPages } from '@dcloudio/uni-app'
   //状态栏高度
   const topHeight = ref(0)
@@ -13,52 +14,59 @@
   /**
    * 会员卡相关
    */
   const isLoss = ref(false)
   const cardInfo = ref({
      id:'',
      userName:'微信用户',
      headImg:'',
      userPhone:'',
      integral:'',
      
      waterCardNumber:'',
      balance:'',
      count:'',
      state:'',
      state:'',//state:true：挂失，false：正常
      cardType:'',//卡类型01卡消费 02计次消费 03游客消费 04电子卡
      userCardType:'',//userCardType：true：共享卡，false：正常卡
   })
   // const showHeadImg = ref(BASE_URL + '/upload' + cardInfo.value.headImg)
   const isLoss = ref(false)
   const isVip = ref(false)
   const isShareCard = ref(false)
   //获取会员卡信息
    function getVipInfo(){
      return new Promise((resolve,reject) =>{
          getVipInfoApi().then((res) =>{
            if(res.code == 200){
               cardInfo.value.waterCardNumber = res.data.cardNumber
               cardInfo.value.state = res.data.state
               isLoss.value = cardInfo.value.state == 2 ? true : false
               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
    async function getVipInfo(){
      await getVipInfoApi().then((res) =>{
         if(res.code == 200 && res.data.id){
            console.log('获取会员卡返回响应-首页',res)
            cardInfo.value.waterCardNumber = res.data.cardNumber
            cardInfo.value.cardType = res.data.cardType
            //用户信息处理存储
            cardInfo.value.state = res.data.state == 2 ? true : false//state:2：挂失，1：正常 是否挂失
            cardInfo.value.userCardType = res.data.userCardType == 2 ? true : false //userCardType：2：共享卡，1：正常卡
				
            isLoss.value = cardInfo.value.state 
            isShareCard.value = cardInfo.value.userCardType 
            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
            console.log('cardInfo',cardInfo.value,'isShareCard.value',isShareCard.value)
         }
      })
   }
   //获取用户信息
   function getInfo(){
       getUserInfo().then((res) =>{
   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.integral = res.data.userInfo.integral
            // showHeadImg.value = BASE_URL + '/upload' + cardInfo.value.headImg
            cardInfo.value.userPhone = res.data.userInfo.userPhone
            cardInfo.value.id = res.data.userInfo.id
				
            if(res.data.userInfo.waterCardNumber){
               getVipInfo()
               console.log('00000')
            }else{
               isVip.value = false
            }
            await getVipInfo()
            console.log('00000',cardInfo.value)
            uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
         }
      })
@@ -70,11 +78,11 @@
      //调用二维码扫描接口
      uni.scanCode({
         scanType: ['qrCode'],
         success: function (res) {
         success: async function (res) {
            console.log('条码内容：' + res.result);
            uni.navigateTo({
               url:'/pages/scanWater/index'
            })
                     url:`/pages/scanWater/index?facilityCode=${res.result}`
                  })
         }
      });
   }
@@ -82,14 +90,14 @@
    * 功能列表相关
    */
   const functionList = ref([
      {text:'余额记录',icon:'../../static/images/index/icon31.png',bgColor:'#16b387',bgColor:'',url:'/pages/functionList/balanceRecord/index',isUrl:1},
      {text:'余额记录',icon:'../../static/images/index/icon31.png',bgColor:'#16b387',url:'/pages/functionList/balanceRecord/index',isUrl:1},
      {text:'消费记录',icon:'../../static/images/index/icon32.png',bgColor:'#329ae8',url:'/pages/functionList/paymentRecord/index',isUrl:1},
      {text:'充值记录',icon:'../../static/images/index/icon33.png',bgColor:'#faaf0f',url:'/pages/functionList/rechargeRecord/index',isUrl:1},
      {text:'账户共享',icon:'../../static/images/index/icon34.png',bgColor:'#faaf0f',url:'',isUrl:4},
      {text:'充值记录',icon:'../../static/images/index/icon33.png',bgColor:'#f0a50e',url:'/pages/functionList/rechargeRecord/index',isUrl:1},
      {text:'水卡共享',icon:'../../static/images/index/icon34.png',bgColor:'#55ca8c',url:'/pages/functionList/share/cardShare/index',isUrl:1},
      {text:'故障上报',icon:'../../static/images/index/icon35.png',bgColor:'#a88ff1',url:'/pages/infoBreakdown/index',isUrl:1},
      {text:'优惠卷',icon:'../../static/images/index/icon36.png',bgColor:'#18bfc4',url:'',isUrl:4},
      {text:'会员卡挂失',icon:'../../static/images/index/icon37.png',bgColor:'#4875f0',url:'',isUrl:2},
      {text:'会员卡注销',icon:'../../static/images/index/icon38.png',bgColor:'#f45088',url:'',isUrl:3},
      {text:'会员卡解绑',icon:'../../static/images/index/icon38.png',bgColor:'#f45088',url:'',isUrl:3},
   ])
   function navTo(itemUrl){
      if(itemUrl){
@@ -103,81 +111,177 @@
      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(async(res) =>{
                     if(res.code == 200){
                        uni.showToast({
                           title: '已挂失',
                           duration: 2000,
                        });
                        await getVipInfoApi().then((res) =>{
         if(cardInfo.value.waterCardNumber){
            //不是共享卡且未挂失
            if(!isShareCard.value && !cardInfo.value.state){
               uni.showModal({
                     title: '会员卡挂失',
                     content: '确认挂失会员卡？',
                     success: async function(res) {
                     if (res.confirm) {
                        await reportLossApi(cardInfo.value.waterCardNumber).then(async(res) =>{
                           if(res.code == 200){
                              if(res.data.state == 2){
                                 isLoss.value = true
                              }
                              uni.showToast({
                                 title: '已挂失',
                                 duration: 2000,
                              });
                              await getVipInfoApi().then((res) =>{
                                 if(res.code == 200){
                                    if(res.data.state == 2){
                                       isLoss.value = true
                                    }
                                 }
                              })
                           }
                        })
                     }
                  })
               }else{
                  console.log('点击了取消7')
               }
                  }
               })
            }else if(isShareCard.value){
               uni.showToast({
                  title:'共享卡无权限',
                  icon:'none'
               })
            }else if(cardInfo.value.state){
               uni.showToast({
                  title:'已挂失',
                  icon:'none'
               })
            }
         })
         }else{
            uni.showToast({
               title:'未绑定会员卡！',
               icon:'none'
            })
         }
      }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,
                           icon:'none',
                        });
                        await getVipInfoApi().then((res) =>{
         if(cardInfo.value.waterCardNumber){
            if(!isShareCard.value){
               uni.showModal({
                     title: '会员卡注销',
                     content: '确认注销会员卡？',
                     success: async function(res) {
                     if (res.confirm) {
                        await removeCardApi(cardInfo.value.waterCardNumber).then(async(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))
                              }
                              uni.showToast({
                                 title: '已注销',
                                 duration: 2000,
                                 icon:'none',
                              });
                              await getVipInfoApi().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')
               }
                  }
               })
            }else{
               uni.showToast({
                  title:'共享卡无权限',
                  icon:'none'
               })
            }
         })
         }else{
            uni.showToast({
               title:'未绑定会员卡！',
               icon:'none'
            })
         }
      }else{
         uni.showToast({
            title: '该功能正在升级中！',
            duration: 2000,
            icon:'none',
         });
         upGrade()
      }
   }
   function upGrade(){
      uni.showToast({
         title: '该功能正在升级中！',
         duration: 2000,
         duration: 1000,
         icon:'none',
      });
   }
   //申请获取用户位置权限----------------------------------------------------
   let userLocation = {
      lat:'',
      lon:'',
   }
   function getUserLocation(){
      // 请求用户授权，第一次进入首页会有位置授权的提示
      uni.authorize({
        scope: 'scope.userLocation',
        success() {
          console.log("成功授权位置信息1")
          storageLocation()
        },
        fail() {
           console.log("用户拒绝授权位置信息，再次提示用户授权")
           showToast()
        }
      })
      //获取用户位置并存储
      function storageLocation(){
         uni.getLocation({
            type:'gcj02',
            isHighAccuracy:true,
            success:(res) =>{
               userLocation.lat = res.latitude
               userLocation.lon = res.longitude
               uni.setStorageSync('userLocation',JSON.stringify(userLocation))
            },
            fail:() =>{
               showToast()
            }
         })
      }
      //用户拒绝授权
      function showToast(){
         uni.showModal({
            title: "请求授权当前位置",
            content: "请求获取您的位置，加载附近饮水设备信息！",
            confirmText: "前往设置",
            success: (res) => {
               if (res.confirm) {
                  uni.openSetting({
                      success:(res1) =>{ //打开设置成功
                        if (res1.authSetting['scope.userLocation']){
                           console.log('用户二次授权成功')
                           setTimeout(() =>{
                              storageLocation()
                           },1000)
                        }else{
                           showToast()
                           console.log('用户拒绝授权')
                        }
                     },
                  })
               }else{
                  uni.showToast({
                     title: '请先授权！',
                     duration: 2000,
                     icon:'none'
                  });
                  showToast()
               }
            },
         });
      }
   }
   onMounted( async() =>{
      getTopHeight()
      await getInfo()
      await getUserLocation()
      console.log('进入首页了')
   })
   onShow(async() =>{
      getTopHeight()
      await getInfo()
   })
   uni.showShareMenu({
@@ -190,8 +294,6 @@
       console.error('分享菜单显示失败', err);
     }
   });
	

</script>

<template>
@@ -199,37 +301,38 @@
      <view class="content">
         <view class="card-box" :style="{paddingTop:topHeight + 'rpx'}">
            <view class="user-info" >
               <image class="user-img" src='../../static/images/index/head.png' alt=''></image>
               <image v-if="cardInfo.headImg" class="user-img" :src= "BASE_URL + '/upload' + cardInfo.headImg" alt=''></image>
               <image v-else class="user-img" src='../../static/images/index/head.png' alt=''></image>
               <text @click="navTo('/pages/userInfo/index')">{{cardInfo.userName}}</text>
               <image @click="navTo('/pages/userInfo/index')" class="user-more"src="../../static/images/index/back.png"></image>
               <view class="user-add-card" @click="navTo('/pages/addCard/index')">
               <!-- <view class="user-add-card" @click="navTo('/pages/addCard/index')">
                  <image src='../../static/images/index/vip-add.png' alt=''></image>
                  <text>添加会员卡</text>
               </view>
               </view> -->
            </view>
            <view class="card">
               <image class="card-bg" src="../../static/images/index/card11.png" alt=""></image>
               <view class="card-content">
               <view v-if="isShareCard" class="share-card">共享卡号：{{cardInfo.waterCardNumber}}</view>
               <view v-if="!isShareCard" class="card-content">
                  <view class="card-left">
                     <view class="left-top">
                        <view>
                           <image v-if="isVip"  src="../../static/images/index/code1.png" alt=""></image>
                           <text>会员卡&nbsp;</text>
                           <text v-if="isVip">会员卡&nbsp;</text>
                           <text v-if="!isVip">未绑定&nbsp;</text>
                           <text class="lossed" v-if="isLoss && isVip">&nbsp;[已挂失]</text>
                        </view>
                        <view v-if="isVip">ID:{{cardInfo.waterCardNumber}}</view>
                     </view>
                     <!-- <view v-if="cardInfo.userPhone" class="left-bottom">电话：{{cardInfo.userPhone}}</view> -->
                  </view>
                  <view class="card-right">
                     <view class="card-right-top">
                        <!-- <view @click="navTo('/pages/addCard/index')">
                        <text v-if="isVip">金额卡</text>
                        <text v-if="isVip">{{cardInfo.balance}}元</text>
                        <view v-if="!isVip" class="user-add-card" @click="navTo('/pages/addCard/index')">
                           <image src='../../static/images/index/vip-add.png' alt=''></image>
                           <text>添加会员卡</text>
                        </view> -->
                        <text v-if="isVip">金额卡</text>
                        <text v-if="!isVip">未绑定会员卡</text>
                        <text v-if="isVip">{{cardInfo.balance}}元</text>
                        </view>
                     </view>
                     <view v-if="isVip" class="card-right-bottom" @click="navTo('/pages/recharge/index')">充值</view>
                  </view>
@@ -237,21 +340,13 @@
            </view>
         </view>
         <view class="function-box1">
            <view class="box1-bg box1-one" @click="upGrade()">
            <view class="box1-bg box1-one" @click="upGrade">
               <image src="../../static/images/index/home21.png" alt=""></image>
               <view>送水到家</view>
            </view>
            <view @click="navTo('/pages/facilityList/index')" class="box1-bg box1-two">
               <image src="../../static/images/index/icon22.png" alt=""></image>
               <view>附近设备</view>
               <!-- <view>账户余额（元)</view>
               <view class="recharge">
                  <text>￥</text>
                  <text>120.00</text>
               </view>
               <view @click="navTo('/pages/recharge/index')">
                  充值
               </view> -->
            </view>
            <view class="box1-bg box1-three" @click="toScan()">
               <image src="../../static/images/index/icon23.png" alt=""></image>
@@ -269,7 +364,21 @@
               </block>
            </view>
         </view>
         <view class="advertisement-box" @click="upGrade"><image src="../../static/images/index/bg4.png" alt=""></image></view>
         <!-- 积分商城 -->
         <view class="advertisement-box" @click="navTo('/pages/pointsMall/index')">
            <view class="point-advert">
               <view class="advert-image">
                  <image  class="image-icon3" src="../../static/images/index/advert-icon3.svg"></image>
                  <image class="image-icon1" src="../../static/images/index/advert-icon1.svg"></image>
                  <image  class="image-icon2" src="../../static/images/index/advert-icon2.svg"></image>
                  <image  class="image-icon4" src="../../static/images/index/advert-icon4.svg"></image>
               </view>
               <view class="advert-title">
                  <view class="advert-title1">积分商城</view>
                  <view class="advert-title2"><text>点击进入</text></view>
               </view>
            </view>
         </view>
         <view class="service-box">
            <view class="service-title"><text>服务指南</text></view>
            <view class="service-content">
@@ -285,6 +394,7 @@
                  </view>
               </view>
               <view class="service-bg" @click="upGrade">
               <!-- <view class="service-bg" @click="navTo('/pages/counterRecharge/index')"> -->
                     <view>
                        <image src="../../static/images/index/notice5.png" alt=""></image>
                        <text>公示公告</text>
@@ -318,17 +428,15 @@
            .user-info{
               width:100%;
               height:100rpx;
               // background: #06BF5E;
               display: flex;
               align-items: center;
               padding-left:15rpx;
               box-sizing: border-box;
               margin-bottom: 14rpx;
               display:flex;
               position:relative;
               .user-img{
                  width:90rpx;
                  height:90rpx;
                  border-radius:50%;
                  margin-right:20rpx;
               }
               text{
@@ -338,23 +446,6 @@
               .user-more{
                  width: 12rpx;
                  height: 28rpx;
               }
               .user-add-card{
                  display:flex;
                  align-items:center;
                  height:40rpx;
                  font-size:22rpx;
                  background:linear-gradient(to right,#B1D9FD,#65A7FD);
                  border-radius:50rpx;
                  padding: 0 8rpx;
                  position: absolute;
                  bottom:0;
                  right:0;
                  image{
                     width:28rpx;
                     height:28rpx;
                     margin-right:10rpx;
                  }
               }
            }
            .card{
@@ -367,6 +458,15 @@
                  top:0;
                  position: absolute;
                  z-index:1;
               }
               .share-card{
                  position:absolute;
                  top:16rpx;
                  left:28rpx;
                  z-index:100;
                  font-weight:400;
                  font-size: 36rpx;
                  color: #FFFFFF;
               }
               .card-content{
                  width: 100%;
@@ -425,6 +525,24 @@
                        justify-content: space-between;
                        flex-direction: column;
                        font-size:34rpx;
                        .user-add-card{
                           display:flex;
                           align-items:center;
                           height:52rpx;
                           font-size:28rpx;
                           background:linear-gradient(to right,#B1D9FD 0%,#65A7FD 70%,#65A7FD 100%);
                           border-radius:50rpx;
                           padding: 0 20rpx;
                           image{
                              width:36rpx;
                              height:36rpx;
                              margin-right:6rpx;
                              opacity:0.8;
                           }
                           text{
                              color:#FFF;
                           }
                        }
                        text:last-child{
                           font-weight:500;
                        }
@@ -577,7 +695,7 @@
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     background: #65A7FD;
                     // background: #65A7FD;
                     border-radius:50%;
                     image{
                        width: 48rpx;
@@ -597,13 +715,86 @@
         }
         .advertisement-box{
            width:100%;
            height: 188rpx;
            height: 160rpx;
            padding:0 32rpx 10rpx; 
            box-sizing: border-box;
            image{
               width:100%;
               height: 178rpx;
            display: flex;
            justify-content: space-around;
            .point-advert{
               width:640rpx;
               height:136rpx;
               border-radius:10rpx;
               background:linear-gradient(140deg,#5c9dff 0%,#b5dcff 30%,#52aafc 70%,#b5dcff 90%,#5daffc 100%);
               display: flex;
               justify-content: space-around;
               align-items: center;
               box-shadow: 0 0 4rpx 2rpx #4978de;
               .advert-title{
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  color: #fff;
                  font-size:46rpx;
                  font-weight:800;
                  text-shadow:4rpx 2rpx #5EA1FA;
                  .advert-title2{
                     margin-top:10rpx;
                     font-size:28rpx;
                     font-weight:500;
                     width:180rpx;
                     height:40rpx;
                     background: #5c9dff;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     border-radius:30rpx;
                     letter-spacing:2rpx;
                  }
               }
               .advert-image{
                  width:200rpx;
                  height:100%;
                  // background: #76bfa1;
                  position: relative;
                  .image-icon1{
                     position:absolute;
                     left: calc(50% - 65rpx);
                     top: calc(50% - 65rpx);
                     width:130rpx;
                     height:130rpx;
                     transform: rotate(20deg);
                  }
                  .image-icon2{
                     position:absolute;
                     left:60%;
                     top: calc(50% - 30rpx);
                     width:90rpx;
                     height:90rpx;
                     transform: rotate(-10deg);
                  }
                  .image-icon3{
                     position:absolute;
                     left: calc(50% - 100rpx);
                     top: 30%;
                     width:80rpx;
                     height:80rpx;
                     transform: rotate(-10deg);
                  }
                  .image-icon4{
                     position:absolute;
                     left:140%;
                     top: 60%;
                     width:50rpx;
                     height:50rpx;
                     transform: rotate(5deg);
                  }
               }
            }
            // image{
            //    width:320rpx;
            //    height:136rpx;
            //    border-radius:10rpx;
            // }
         }
         .service-box{
            width: 100%;