From 42e5ea86f7edc9361227edd979a8ae1952713161 Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期六, 19 十月 2024 16:19:16 +0800
Subject: [PATCH] 添加共享列表，修改共享功能相关代码
---
pages/index/index.vue | 806 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 762 insertions(+), 44 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index ec0ec26..6f3549d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,52 +1,770 @@
+<script setup>
+ import { onMounted, ref } from "vue";
+ import { getVipInfoApi,getUserInfo,reportLossApi,removeCardApi } from '../../api/index.js'
+ import { onShow,getCurrentPages } 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 * 2
+ }
+ }
+ /**
+ * 会员卡相关
+ */
+ const cardInfo = ref({
+ id:'',
+ userName:'微信用户',
+ headImg:'',
+ userPhone:'',
+
+ waterCardNumber:'',
+ balance:'',
+ count:'',
+ state:'',//state:true：挂失，false：正常
+ userCardType:'',//userCardType：true：共享卡，false：正常卡
+ })
+ const isLoss = ref(false)
+ const isVip = ref(false)
+ const isShareCard = ref(false)
+ //获取会员卡信息
+ async function getVipInfo(){
+ await getVipInfoApi().then((res) =>{
+ if(res.code == 200 && res.data.id){
+ cardInfo.value.waterCardNumber = res.data.cardNumber
+ 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)
+ }
+ })
+ }
+ //获取用户信息
+ 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
+ await getVipInfo()
+ console.log('00000',cardInfo.value)
+ uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
+ }
+ })
+ }
+ /**
+ * 扫码取水相关
+ */
+ function toScan(){
+ //调用二维码扫描接口
+ uni.scanCode({
+ scanType: ['qrCode'],
+ success: function (res) {
+ console.log('条码内容：' + res.result);
+ uni.navigateTo({
+ url:'/pages/scanWater/index'
+ })
+ }
+ });
+ }
+ /**
+ * 功能列表相关
+ */
+ const functionList = ref([
+ {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:'#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},
+ ])
+ function navTo(itemUrl){
+ if(itemUrl){
+ uni.navigateTo({
+ url:itemUrl
+ })
+ }
+ }
+ //功能列表点击功能
+ async function setEvent(isUrl,url){
+ if(isUrl == 1){
+ navTo(url)
+ }else if(isUrl == 2){
+ if(cardInfo.value.waterCardNumber){
+ 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(res.code == 200){
+ if(res.data.state == 2){
+ isLoss.value = true
+ }
+ }
+ })
+ }
+ })
+ }
+ }
+ })
+ }else{
+ uni.showToast({
+ title:'未绑定会员卡！',
+ icon:'none'
+ })
+ }
+ }else if(isUrl == 3){
+ if(cardInfo.value.waterCardNumber){
+ 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(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: '该功能正在升级中！',
+ duration: 2000,
+ icon:'none',
+ });
+ }
+ }
+ function upGrade(){
+ uni.showToast({
+ title: '该功能正在升级中！',
+ duration: 2000,
+ icon:'none',
+ });
+ }
+ onMounted( async() =>{
+ getTopHeight()
+ })
+ onShow(async() =>{
+ await getInfo()
+ })
+ uni.showShareMenu({
+ withShareTicket: true,
+ menus: ['shareAppMessage', 'shareTimeline'],
+ success: function () {
+ console.log('分享菜单显示成功');
+ },
+ fail: function (err) {
+ console.error('分享菜单显示失败', err);
+ }
+ });
+
+
+</script>
+
<template>
- <view class="content">
- <image class="logo" src="/static/logo.png"></image>
- <view class="text-area">
- <text class="title">{{title}}</text>
+ <view class="container">
+ <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>
+ <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')">
+ <image src='../../static/images/index/vip-add.png' alt=''></image>
+ <text>添加会员卡</text>
+ </view>
+ </view>
+ <view class="card">
+ <image class="card-bg" src="../../static/images/index/card11.png" alt=""></image>
+ <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>会员卡 </text>
+ <text class="lossed" v-if="isLoss && isVip"> [已挂失]</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')">
+ <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 v-if="isVip" class="card-right-bottom" @click="navTo('/pages/recharge/index')">充值</view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="function-box1">
+ <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>
+ <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="setEvent(item.isUrl,item.url)">
+ <view class="box2-item-img" :style="{background:item.bgColor}"><image :src= "item.icon" alt=""></image></view>
+ <view class="box2-item-text">{{item.text}}</view>
+ </view>
+ </block>
+ </view>
+ </view>
+ <view class="advertisement-box" @click="upGrade"><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" @click="navTo('/pages/station/index')">
+ <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" @click="upGrade">
+ <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>
</view>
</template>
-
-<script>
- export default {
- data() {
- return {
- title: 'Hello'
+<style lang="scss" scoped>
+ .container{
+ width:100%;
+ height:100vh;
+ overflow:scroll;
+ .content{
+ width:100%;
+ height:100vh;
+ background:#F6F6F6;
+ .card-box{
+ width: 100%;
+ height: auto;
+ 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;
+ display:flex;
+ position:relative;
+ .user-img{
+ width:90rpx;
+ height:90rpx;
+ margin-right:20rpx;
+ }
+ text{
+ margin-right:20rpx;
+ color: #fff;
+ }
+ .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{
+ width: 100%;
+ height: 290rpx;
+ position:relative;
+ .card-bg{
+ height:290rpx;
+ width:100%;
+ 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%;
+ height: 100%;
+ box-sizing: border-box;
+ padding:20rpx 15rpx;
+ display: flex;
+ justify-content:space-between;
+ font-weight: 300;
+ font-size: 30rpx;
+ color: #FFFFFF;
+ z-index:100;
+ .card-left{
+ height:100%;
+ display: flex;
+ justify-content:space-between;
+ flex-direction:column;
+ align-items:flex-start;
+ z-index:100;
+ .left-top{
+ display: flex;
+ flex-direction: column;
+ view:first-child{
+ display: flex;
+ align-items: center;
+ image{
+ width:48rpx;
+ height:48rpx;
+ }
+ text{
+ font-weight:400;
+ font-size: 36rpx;
+ color: #FFFFFF;
+ }
+ .lossed{
+ color:#fff;
+ }
+ }
+ view:last-child{
+ margin-left:10rpx;
+ font-size: 26rpx;
+ font-weight:500;
+ }
+ }
+ }
+ .card-right{
+ display: flex;
+ justify-content: space-between;
+ align-items:flex-end;
+ flex-direction: column;
+ height:100%;
+ z-index:100;
+ .card-right-top{
+ align-items:flex-end;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ font-size:34rpx;
+ text:last-child{
+ font-weight:500;
+ }
+ }
+ .card-right-bottom{
+ width:137rpx;
+ height:56rpx;
+ background:linear-gradient(to right,#65A7FD ,#B1D9FD);
+ border-radius:50rpx;
+ text-align: center;
+ line-height: 56rpx;
+ color:#212DDE;
+ font-weight: 400;
+ }
+ }
+ }
+ }
}
- },
- onLoad() {
-
- },
- methods: {
-
+ .function-box1{
+ width:100%;
+ box-sizing:border-box;
+ height: 215rpx;
+ 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:180rpx;
+ 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{
+ font-weight: 300;
+ font-size: 32rpx;
+ color: #000000;
+ display: flex;
+ flex-direction:column;
+ align-items:center;
+ justify-content:space-evenly;
+ image{
+ width:96rpx;
+ height: 96rpx;
+ // margin-bottom:20rpx;
+ }
+ // 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;
+ 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: 429rpx;//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:360rpx;
+ 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;
+ .box2-item-img{
+ width: 90rpx;
+ height:90rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ // background: #65A7FD;
+ border-radius:50%;
+ image{
+ width: 48rpx;
+ height:48rpx;
+ }
+ }
+ .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;
+ }
+ }
+ }
+ }
+ }
}
- }
-</script>
-
-<style>
- .content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
-
- .logo {
- height: 200rpx;
- width: 200rpx;
- margin-top: 200rpx;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 50rpx;
- }
-
- .text-area {
- display: flex;
- justify-content: center;
- }
-
- .title {
- font-size: 36rpx;
- color: #8f8f94;
+ .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>
--
Gitblit v1.9.3