From 0d17d9e049b4750a03ca7c8eb7b435b823446def Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期四, 26 九月 2024 18:33:31 +0800
Subject: [PATCH] 添加地址管理，新增地址页，导入tree树形组件
---
pages/index/index.vue | 866 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 490 insertions(+), 376 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index c217f91..bcc7d3d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,17 +1,85 @@
-import { onMounted } from "vue"
+<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" @click="navToAddCard()">
+ <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>
+ <view @click="navTo('/pages/addCard/index')">
<image src="../../static/images/index/vip-add.png" alt=""></image>
<text>添加会员卡</text>
</view>
@@ -35,7 +103,7 @@
</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>
@@ -45,13 +113,13 @@
<text>￥</text>
<text>120.00</text>
</view>
- <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>
</view>
<view class="function-box2">
@@ -94,48 +162,26 @@
</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>
-
-<script setup>
- import { onMounted, ref } from "vue"
- //胶囊高度
- const topHeight = ref(0)
- /**
- * 会员卡相关
- */
- const isVip = ref(false)
- function navToAddCard(){
- uni.navigateTo({
- url:'/pages/addCard/index'
- })
- }
- /**
- * 功能列表相关
- */
- const functionList = ref([
- {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/balanceRecord/index'},
- {text:'消费记录',icon:'../../static/images/index/icon32.png',url:'/pages/login/index'},
- {text:'充值记录',icon:'../../static/images/index/icon33.png',url:'/pages/login/index'},
- {text:'账户共享',icon:'../../static/images/index/icon34.png',url:'/pages/login/index'},
- {text:'优惠卷',icon:'../../static/images/index/icon35.png',url:'/pages/login/index'},
- {text:'电子发票',icon:'../../static/images/index/icon36.png',url:'/pages/login/index'},
- {text:'联系客服',icon:'../../static/images/index/icon37.png',url:'/pages/login/index'},
- {text:'推广分佣',icon:'../../static/images/index/icon38.png',url:'/pages/login/index'},
- ])
- function navTo(itemUrl){
- uni.navigateTo({
- url:itemUrl
- })
- }
- onMounted(() =>{
- if(uni.getMenuButtonBoundingClientRect){
- topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
- }
- })
-
-</script>
-
<style lang="scss" scoped>
.container{
width:100%;
@@ -145,370 +191,438 @@
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{
+ .card-box{
width: 100%;
- height: 100%;
+ height: auto;
+ // background: #a0b5c7;
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{
+ padding: 0 32rpx;
+ background: linear-gradient(to bottom,#5EA1FA,#D2F2FE);
+ .card{
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%;
+ 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:space-between;
- align-items:center;
- margin-bottom:8rpx;
- view:first-child{
- width: 108rpx;
- height: 50rpx;
- font-weight: 400;
+ justify-content: flex-end;
+ // background: #82fec5;
+ align-items: center;
+ view{
+ font-weight:300;
font-size: 36rpx;
color: #FFFFFF;
+ letter-spacing:5rpx;
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');
+ image{
+ width:64rpx;
+ height:64rpx;
}
}
- .info-content-bottom{
+ .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: #FFFFFF;
- letter-spacing:5rpx;
- text-align: left;
- }
- }
- .info-more{
- width: 12rpx;
- height: 28rpx;
- margin-left:274rpx;
- image{
- width: 12rpx;
- height: 28rpx;
+ color: #D8D8D8;
+ line-height: 0rpx;
+ text-align: center;
}
}
}
- .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);
}
- }
- }
- }
- .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{
+ .box1-one{
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;
+ 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;
+ }
}
}
- }
- }
- .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{
+ .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;
- margin-left:40rpx;
image{
- width:48rpx;
- height:48rpx;
- margin-right:10rpx;
+ width: 90rpx;
+ height:90rpx;
}
- text{
+ .box2-item-text{
+ width:100%;
+ height: 40rpx;
font-weight: 300;
font-size: 28rpx;
color: #000000;
+ text-align: center;
}
}
- .service-info{
- width: 214rpx;
- font-weight: 300;
- font-size: 24rpx;
- color: #4D4B4B;
- margin-left:96rpx;
- }
- view:last-child{
- margin-left: 174rpx;
- margin-top: 18rpx;
+ }
+ }
+ .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;
- align-items: center;
- image{
- width:32rpx;
- height:32rpx;
- }
- text{
- font-weight: 300;
- font-size: 24rpx;
- color: #4D4B4B;
- margin-right: 10rpx;
- }
+ 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;
+ }
}
}
}
--
Gitblit v1.9.3