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 | 643 +++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 389 insertions(+), 254 deletions(-) diff --git a/pages/index/index.vue b/pages/index/index.vue index d8fad38..6f3549d 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -1,48 +1,94 @@ <script setup> import { onMounted, ref } from "vue"; - import { getVipInfoApi } from '../../api/index.js' - import { getUserInfo } from '../../api/index.js' - //胶囊高度 + 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 + uni.getMenuButtonBoundingClientRect().height) * 2 + topHeight.value = uni.getMenuButtonBoundingClientRect().top * 2 } } /** * 会员卡相关 */ - const vipInfo = ref() + 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(){ - let res = await getUserInfo() - if(res.data.userInfo.waterCardNumber){ - let res1 = await getVipInfoApi() - vipInfo.value = res1.data - isVip.value = true - }else{ - isVip.value = false - } - } - function navToAddCard(){ - uni.navigateTo({ - url:'/pages/addCard/index' + 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',url:''}, - {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/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){ @@ -51,110 +97,206 @@ }) } } - //获取用户地理位置 - 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) + //功能列表点击功能 + 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' + }) } - }) - console.log('location') + }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() - await getVipInfo() - // await getUserLocation() }) + 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="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"> - <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> + <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 class="info-content-bottom">YL123654987521</view> + <view v-if="isVip">ID:{{cardInfo.waterCardNumber}}</view> </view> - <view class="info-more"><image src="../../static/images/index/back.png"></image></view> + <!-- <view v-if="cardInfo.userPhone" 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> + <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"> + <view class="box1-bg box1-one" @click="upGrade()"> <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"> <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" @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"><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"> - <view class="service-bg"> + <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 class="service-info">服务中心正在营业中……</view> <view> <text>查看更多</text> <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> @@ -168,24 +310,6 @@ </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> @@ -200,146 +324,142 @@ .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; + 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: 304rpx; - background-image: url("../../static/images/index/card1.png"); - background-repeat: no-repeat; - background-size: 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; - // 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; + z-index:100; + .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; + z-index:100; + .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:48rpx; + height:48rpx; + } + text{ + 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'); + .lossed{ + color:#fff; } } - .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; + font-size: 26rpx; + font-weight:500; } } } - .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%; + 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; + } } } } @@ -347,7 +467,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 +475,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 +496,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 +561,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 +577,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); @@ -466,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