From 16c98154ca67d48665ed3a83874d43fdc626ac60 Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期三, 09 十月 2024 17:42:24 +0800
Subject: [PATCH] 添加获取用户位置
---
pages/index/index.vue | 401 ++++++++++++++++++++++++++++----------------------------
1 files changed, 202 insertions(+), 199 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index d8fad38..56bf6c4 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,48 +1,77 @@
<script setup>
import { onMounted, ref } from "vue";
- import { getVipInfoApi } from '../../api/index.js'
- import { getUserInfo } from '../../api/index.js'
- //胶囊高度
+ import { getVipInfoApi,getUserInfo } from '../../api/index.js'
+ import { onShow } from '@dcloudio/uni-app'
+ //状态栏高度
const topHeight = ref(0)
function getTopHeight(){
if(uni.getMenuButtonBoundingClientRect){
- topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
+ // topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
+ topHeight.value = uni.getMenuButtonBoundingClientRect().top * 2
}
}
/**
* 会员卡相关
*/
- const vipInfo = ref()
+ const cardInfo = ref({
+ userName:'',
+ headImg:'',
+
+ waterCardNumber:'',
+ balance:'',
+ count:'',
+ userPhone:'',
+ })
const isVip = ref(false)
//获取会员卡信息
- async function getVipInfo(){
+ async function getInfo(){
let res = await getUserInfo()
+ 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
if(res.data.userInfo.waterCardNumber){
let res1 = await getVipInfoApi()
- vipInfo.value = res1.data
+ 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
+ }
isVip.value = true
}else{
isVip.value = false
}
+ uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
}
- function navToAddCard(){
- uni.navigateTo({
- url:'/pages/addCard/index'
- })
+ /**
+ * 扫码取水相关
+ */
+ function toScan(){
+ // 调用二维码扫描接口
+ uni.scanCode({
+ scanType: ['qrCode'],
+ success: function (res) {
+ console.log('条码类型：' + res.scanType);
+ console.log('条码内容：' + res.result);
+ uni.navigateTo({
+ url:'/pages/scanWater/index'
+ })
+ }
+ });
}
/**
* 功能列表相关
*/
-
const functionList = ref([
- {text:'余额记录',icon:'../../static/images/index/icon31.png',url:''},
+ {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:'/pages/login/index'},
+ {text:'推广分佣',icon:'../../static/images/index/icon38.png',url:''},
])
function navTo(itemUrl){
if(itemUrl){
@@ -69,8 +98,11 @@
}
onMounted( async() =>{
getTopHeight()
- await getVipInfo()
+ // await getInfo()
// await getUserLocation()
+ })
+ onShow(async() =>{
+ await getInfo()
})
</script>
@@ -78,54 +110,60 @@
<view class="container">
<view class="content">
<view class="card-box" :style="{paddingTop:topHeight + 'rpx'}">
+ <view class="user-info" @click="navTo('/pages/userInfo/index')">
+ <image class="user-img" src='../../static/images/index/hend1.png' alt=''></image>
+ <text>{{cardInfo.userName}}</text>
+ <image class="user-more"src="../../static/images/index/back.png"></image>
+ </view>
<view class="card">
<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 @click="navToAddCard()">
- <image src="../../static/images/index/vip-add.png" alt=""></image>
- <text>添加会员卡</text>
- </view>
- </view>
- <view class="card-info">
- <view class="info-head"><image src="../../static/images/index/hend1.png" alt=""></image></view>
- <view class="info-content">
- <view class="info-content-top">
- <view>张大左</view>
- <view>vip1</view>
+ <view class="card-left">
+ <view class="left-top">
+ <view>
+ <image src="../../static/images/index/code1.png" alt=""></image>
+ <text>会员卡</text>
</view>
- <view class="info-content-bottom">YL123654987521</view>
+ <view>ID:{{cardInfo.waterCardNumber}}</view>
</view>
- <view class="info-more"><image src="../../static/images/index/back.png"></image></view>
+ <view class="left-bottom">电话：{{cardInfo.userPhone}}</view>
</view>
- <view class="card-bottom">
- <view>我的积分：200</view>
- <view>消费折扣：9.9折</view>
+ <view class="card-right">
+ <view class="card-right-top">
+ <view @click="navTo('/pages/addCard/index')">
+ <image src='../../static/images/index/vip-add.png' alt=''></image>
+ <span>添加会员卡</span>
+ </view>
+ <span>金额卡</span>
+ </view>
+ <view @click="navTo('/pages/recharge/index')">
+ <span>余额：</span>
+ <span class="card-balance">{{cardInfo.balance}}</span>
+ <span>元</span>
+ </view>
</view>
</view>
</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>
- <view class="box1-bg box1-two">
- <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>
+ <view @click="navTo('/pages/recharge/index')">
充值
- </view>
+ </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">
@@ -200,146 +238,105 @@
.card-box{
width: 100%;
height: auto;
- // background: #a0b5c7;
box-sizing: border-box;
padding: 0 32rpx;
background: linear-gradient(to bottom,#5EA1FA,#D2F2FE);
+ .user-info{
+ width:100%;
+ height:100rpx;
+ // background: #06BF5E;
+ display: flex;
+ align-items: center;
+ padding-left:15rpx;
+ box-sizing: border-box;
+ margin-bottom: 14rpx;
+ .user-img{
+ width:90rpx;
+ height:90rpx;
+ margin-right:20rpx;
+ }
+ text{
+ margin-right:20rpx;
+ color: #fff;
+ }
+ .user-more{
+ width: 12rpx;
+ height: 28rpx;
+ }
+ }
.card{
width: 100%;
- height: 304rpx;
+ height: 290rpx;
background-image: url("../../static/images/index/card1.png");
background-repeat: no-repeat;
- background-size: 100%;
+ background-size: 100% 100%;
.card-content{
width: 100%;
height: 100%;
box-sizing: border-box;
- // background: #AFD5FF;
- padding: 14rpx 42rpx 64rpx 22rpx;
- .card-title{
- width:100%;
- height:64rpx;
+ padding:20rpx 15rpx;
+ display: flex;
+ justify-content:space-between;
+ font-weight: 300;
+ font-size: 30rpx;
+ color: #FFFFFF;
+ .card-left{
+ height:100%;
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{
- 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;
+ justify-content:space-between;
+ flex-direction:column;
+ align-items:flex-start;
+ .left-top{
display: flex;
flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- .info-content-top{
- width: 100%;
+ view:first-child{
display: flex;
- justify-content:space-between;
- align-items:center;
- margin-bottom:8rpx;
- view:first-child{
- width: 108rpx;
- height: 50rpx;
- font-weight: 400;
+ align-items: center;
+ image{
+ width:70rpx;
+ height:70rpx;
+ }
+ text{
+ font-weight: 300;
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;
+ view:last-child{
+ margin-left:10rpx;
}
}
}
- .card-bottom{
- margin-top:36rpx;
- width:100%;
+ .card-right{
display: flex;
- justify-content:space-evenly;
- font-weight: 300;
- font-size: 20rpx;
- color: #D8D8D8;
- line-height: 0rpx;
- text-align: center;
+ justify-content: space-between;
+ align-items:flex-end;
+ flex-direction: column;
+ height:100%;
+ .card-right-top{
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ view{
+ background-color: #fff;
+ color: #5EA1FA;
+ border-radius:20rpx;
+ padding: 5rpx 8rpx;
+ align-items: center;
+ display: flex;
+ justify-content: space-around;
+ font-size:24rpx;
+ margin-right:10rpx;
+ image{
+ width:28rpx;
+ height:28rpx;
+ margin-right:10rpx;
+ }
+ }
+ }
+ .card-balance{
+ font-weight:600;
+ }
}
}
}
@@ -347,7 +344,7 @@
.function-box1{
width:100%;
box-sizing:border-box;
- height: 227rpx;
+ height: 215rpx;
padding: 20rpx 32rpx 15rpx;
// background: rgba(85, 170, 0, 0.1);
display:flex;
@@ -355,7 +352,7 @@
align-items:center;
.box1-bg{
width:212rpx;
- height:200rpx;
+ height:180rpx;
border-radius:24rpx;
background: #fff;
box-shadow:0 0 12rpx 2rpx rgba(13,118,255,0.16);
@@ -376,45 +373,51 @@
}
}
.box1-two{
- box-sizing: border-box;
- padding:25rpx 0 10rpx;
+ font-weight: 300;
+ font-size: 32rpx;
+ color: #000000;
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;
+ justify-content:space-evenly;
+ image{
+ width:96rpx;
+ height: 96rpx;
+ // margin-bottom:20rpx;
}
- .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;
- }
+ // 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: 70rpx;
+ // 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:70rpx;
+ // margin-top:10rpx;
+ // }
}
.box1-three{
font-weight: 300;
@@ -435,7 +438,7 @@
.function-box2{
width:100%;
box-sizing:border-box;
- height: 443rpx;//374 + 44 + 距离 + 底部padding32
+ height: 429rpx;//374 + 44 + 距离 + 底部padding32
padding:0 32rpx 15rpx;
// background: rgba(46, 121, 170, 0.5);
.box2-title{
@@ -451,7 +454,7 @@
box-sizing: border-box;
padding:22rpx 35rpx;
width: 686rpx;
- height:374rpx;
+ height:360rpx;
background: #fff;
border-radius: 24rpx;
box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.1);
--
Gitblit v1.9.3