<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
|
}
|
}
|
/**
|
* 功能列表相关
|
*/
|
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">
|
<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="navTo('/pages/addCard/index')">
|
<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>
|
<view class="info-content-bottom">YL123654987521</view>
|
</view>
|
<view class="info-more"><image src="../../static/images/index/back.png"></image></view>
|
</view>
|
<view class="card-bottom">
|
<view>我的积分：200</view>
|
<view>消费折扣：9.9折</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="function-box1">
|
<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 class="recharge">
|
<text>￥</text>
|
<text>120.00</text>
|
</view>
|
<view @click="navTo('/pages/recharge/index')">
|
充值
|
</view>
|
</view>
|
<view class="box1-bg box1-three">
|
<image src="../../static/images/index/icon23.png" alt=""></image>
|
<view>扫码取水</view>
|
</view>
|
</view>
|
<view class="function-box2">
|
<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)">
|
<image :src= "item.icon" alt=""></image>
|
<view class="box2-item-text">{{item.text}}</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
<view class="advertisement-box"><image src="../../static/images/index/bg4.png" alt=""></image></view>
|
<view class="service-box">
|
<view class="service-title"><text>服务指南</text></view>
|
<view class="service-content">
|
<view class="service-bg">
|
<view>
|
<image src="../../static/images/index/icon51.png" alt=""></image>
|
<text>附近站点</text>
|
</view>
|
<view class="service-info">蔡家供水服务中心正在营业中……</view>
|
<view>
|
<text>查看更多</text>
|
<image src="../../static/images/index/more-info5.png" alt=""></image>
|
</view>
|
</view>
|
<view class="service-bg">
|
<view>
|
<image src="../../static/images/index/notice5.png" alt=""></image>
|
<text>公示公告</text>
|
</view>
|
<view class="service-info">停水公告的部分摘要的内容展示……</view>
|
<view>
|
<text>查看更多</text>
|
<image src="../../static/images/index/more-info5.png" alt=""></image>
|
</view>
|
</view>
|
</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>
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
height:100vh;
|
overflow:scroll;
|
.content{
|
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{
|
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: 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;
|
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: #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);
|
}
|
.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{
|
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;
|
}
|
}
|
}
|
}
|
.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{
|
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;
|
}
|
}
|
}
|
}
|
</style>
|
