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 | 247 ++++++++++++++++++++++++++++++-------------------
1 files changed, 151 insertions(+), 96 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 0ce994b..6f3549d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,7 +1,7 @@
<script setup>
import { onMounted, ref } from "vue";
import { getVipInfoApi,getUserInfo,reportLossApi,removeCardApi } from '../../api/index.js'
- import { onShow } from '@dcloudio/uni-app'
+ import { onShow,getCurrentPages } from '@dcloudio/uni-app'
//状态栏高度
const topHeight = ref(0)
function getTopHeight(){
@@ -13,7 +13,6 @@
/**
* 会员卡相关
*/
- const isLoss = ref(false)
const cardInfo = ref({
id:'',
userName:'微信用户',
@@ -23,42 +22,42 @@
waterCardNumber:'',
balance:'',
count:'',
- state:'',
+ state:'',//state:true：挂失，false：正常
+ userCardType:'',//userCardType：true：共享卡，false：正常卡
})
+ 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){
+ 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)
+ }
})
}
//获取用户信息
- 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.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))
}
})
@@ -67,7 +66,7 @@
* 扫码取水相关
*/
function toScan(){
- // 调用二维码扫描接口
+ //调用二维码扫描接口
uni.scanCode({
scanType: ['qrCode'],
success: function (res) {
@@ -82,14 +81,14 @@
* 功能列表相关
*/
const functionList = ref([
- {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/functionList/balanceRecord/index',isUrl:1},
- {text:'消费记录',icon:'../../static/images/index/icon32.png',url:'/pages/functionList/paymentRecord/index',isUrl:1},
- {text:'充值记录',icon:'../../static/images/index/icon33.png',url:'/pages/functionList/rechargeRecord/index',isUrl:1},
- {text:'账户共享',icon:'../../static/images/index/icon34.png',url:'',isUrl:1},
- {text:'故障上报',icon:'../../static/images/index/icon35.png',url:'/pages/infoBreakdown/index',isUrl:1},
- {text:'电子发票',icon:'../../static/images/index/icon36.png',url:'',isUrl:1},
- {text:'会员卡挂失',icon:'../../static/images/index/icon37.png',url:'',isUrl:2},
- {text:'会员卡注销',icon:'../../static/images/index/icon38.png',url:'',isUrl:3},
+ {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){
@@ -103,63 +102,88 @@
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(res.code == 200){
- if(res.data.state == 2){
- isLoss.value = true
+ 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{
- console.log('点击了取消7')
+ })
+ }
+ })
+ }
}
- }
- })
+ })
+ }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(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))
+ 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{
+ 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()
@@ -167,6 +191,18 @@
onShow(async() =>{
await getInfo()
})
+ uni.showShareMenu({
+ withShareTicket: true,
+ menus: ['shareAppMessage', 'shareTimeline'],
+ success: function () {
+ console.log('分享菜单显示成功');
+ },
+ fail: function (err) {
+ console.error('分享菜单显示失败', err);
+ }
+ });
+
+
</script>
<template>
@@ -184,11 +220,12 @@
</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>
+ <image v-if="isVip" src="../../static/images/index/code1.png" alt=""></image>
<text>会员卡 </text>
<text class="lossed" v-if="isLoss && isVip"> [已挂失]</text>
</view>
@@ -212,7 +249,7 @@
</view>
</view>
<view class="function-box1">
- <view class="box1-bg box1-one" @click="navTo('/pages/sendWater/index')">
+ <view class="box1-bg box1-one" @click="upGrade()">
<image src="../../static/images/index/home21.png" alt=""></image>
<view>送水到家</view>
</view>
@@ -238,13 +275,13 @@
<view class="box2-content">
<block v-for="(item,index) in functionList" :key="index">
<view class="box2-item" @click="setEvent(item.isUrl,item.url)">
- <image :src= "item.icon" alt=""></image>
+ <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"><image src="../../static/images/index/bg4.png" alt=""></image></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">
@@ -259,7 +296,7 @@
<image src="../../static/images/index/more-info5.png" alt=""></image>
</view>
</view>
- <view class="service-bg">
+ <view class="service-bg" @click="upGrade">
<view>
<image src="../../static/images/index/notice5.png" alt=""></image>
<text>公示公告</text>
@@ -343,6 +380,15 @@
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%;
@@ -368,8 +414,8 @@
display: flex;
align-items: center;
image{
- width:70rpx;
- height:70rpx;
+ width:48rpx;
+ height:48rpx;
}
text{
font-weight:400;
@@ -377,7 +423,7 @@
color: #FFFFFF;
}
.lossed{
- color:#344ede;
+ color:#fff;
}
}
view:last-child{
@@ -546,9 +592,18 @@
flex-direction:column;
justify-content:space-between;
align-items: center;
- image{
+ .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%;
--
Gitblit v1.9.3