From 681efe897b7fb4dbe8bec5fa5056209e3e0edfdc Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期三, 20 十一月 2024 17:19:57 +0800
Subject: [PATCH] 添加积分商品详情，替换首页海报，调整样式，添加积分规则
---
pages/index/index.vue | 455 ++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 323 insertions(+), 132 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 5610509..ec461b7 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,6 +1,7 @@
<script setup>
import { onMounted, ref } from "vue";
- import { getVipInfoApi,getUserInfo,reportLossApi,removeCardApi } from '../../api/index.js'
+ import { BASE_URL } from '../../config/baseUrl';
+ import { getVipInfoApi,getUserInfo,reportLossApi,removeCardApi,buyWaterApi } from '../../api/index.js'
import { onShow,getCurrentPages } from '@dcloudio/uni-app'
//状态栏高度
const topHeight = ref(0)
@@ -13,52 +14,59 @@
/**
* 会员卡相关
*/
- const isLoss = ref(false)
const cardInfo = ref({
id:'',
userName:'微信用户',
headImg:'',
userPhone:'',
+ integral:'',
waterCardNumber:'',
balance:'',
count:'',
- state:'',
+ state:'',//state:true：挂失，false：正常
+ cardType:'',//卡类型01卡消费 02计次消费 03游客消费 04电子卡
+ userCardType:'',//userCardType：true：共享卡，false：正常卡
})
+ // const showHeadImg = ref(BASE_URL + '/upload' + cardInfo.value.headImg)
+ 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){
+ console.log('获取会员卡返回响应-首页',res)
+ cardInfo.value.waterCardNumber = res.data.cardNumber
+ cardInfo.value.cardType = res.data.cardType
+ //用户信息处理存储
+ 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.integral = res.data.userInfo.integral
+ // showHeadImg.value = BASE_URL + '/upload' + cardInfo.value.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))
}
})
@@ -70,11 +78,11 @@
//调用二维码扫描接口
uni.scanCode({
scanType: ['qrCode'],
- success: function (res) {
+ success: async function (res) {
console.log('条码内容：' + res.result);
uni.navigateTo({
- url:'/pages/scanWater/index'
- })
+ url:`/pages/scanWater/index?facilityCode=${res.result}`
+ })
}
});
}
@@ -82,14 +90,14 @@
* 功能列表相关
*/
const functionList = ref([
- {text:'余额记录',icon:'../../static/images/index/icon31.png',bgColor:'#16b387',bgColor:'',url:'/pages/functionList/balanceRecord/index',isUrl:1},
+ {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:'#faaf0f',url:'/pages/functionList/rechargeRecord/index',isUrl:1},
- {text:'账户共享',icon:'../../static/images/index/icon34.png',bgColor:'#faaf0f',url:'',isUrl:4},
+ {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},
+ {text:'会员卡解绑',icon:'../../static/images/index/icon38.png',bgColor:'#f45088',url:'',isUrl:3},
])
function navTo(itemUrl){
if(itemUrl){
@@ -103,81 +111,177 @@
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(cardInfo.value.waterCardNumber){
+ //不是共享卡且未挂失
+ if(!isShareCard.value && !cardInfo.value.state){
+ uni.showModal({
+ title: '会员卡挂失',
+ content: '确认挂失会员卡？',
+ success: async function(res) {
+ if (res.confirm) {
+ await reportLossApi(cardInfo.value.waterCardNumber).then(async(res) =>{
if(res.code == 200){
- if(res.data.state == 2){
- isLoss.value = true
- }
+ 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 if(isShareCard.value){
+ uni.showToast({
+ title:'共享卡无权限',
+ icon:'none'
+ })
+ }else if(cardInfo.value.state){
+ uni.showToast({
+ title:'已挂失',
+ icon:'none'
+ })
}
- })
+ }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(cardInfo.value.waterCardNumber){
+ if(!isShareCard.value){
+ uni.showModal({
+ title: '会员卡注销',
+ content: '确认注销会员卡？',
+ success: async function(res) {
+ if (res.confirm) {
+ await removeCardApi(cardInfo.value.waterCardNumber).then(async(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))
- }
+ 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:'未绑定会员卡！',
+ icon:'none'
+ })
+ }
}else{
- uni.showToast({
- title: '该功能正在升级中！',
- duration: 2000,
- icon:'none',
- });
+ upGrade()
}
}
function upGrade(){
uni.showToast({
title: '该功能正在升级中！',
- duration: 2000,
+ duration: 1000,
icon:'none',
});
}
+ //申请获取用户位置权限----------------------------------------------------
+ let userLocation = {
+ lat:'',
+ lon:'',
+ }
+ function getUserLocation(){
+ // 请求用户授权，第一次进入首页会有位置授权的提示
+ uni.authorize({
+ scope: 'scope.userLocation',
+ success() {
+ console.log("成功授权位置信息1")
+ storageLocation()
+ },
+ fail() {
+ console.log("用户拒绝授权位置信息，再次提示用户授权")
+ showToast()
+ }
+ })
+ //获取用户位置并存储
+ function storageLocation(){
+ uni.getLocation({
+ type:'gcj02',
+ isHighAccuracy:true,
+ success:(res) =>{
+ userLocation.lat = res.latitude
+ userLocation.lon = res.longitude
+ uni.setStorageSync('userLocation',JSON.stringify(userLocation))
+ },
+ fail:() =>{
+ showToast()
+ }
+ })
+ }
+ //用户拒绝授权
+ function showToast(){
+ uni.showModal({
+ title: "请求授权当前位置",
+ content: "请求获取您的位置，加载附近饮水设备信息！",
+ confirmText: "前往设置",
+ success: (res) => {
+ if (res.confirm) {
+ uni.openSetting({
+ success:(res1) =>{ //打开设置成功
+ if (res1.authSetting['scope.userLocation']){
+ console.log('用户二次授权成功')
+ setTimeout(() =>{
+ storageLocation()
+ },1000)
+ }else{
+ showToast()
+ console.log('用户拒绝授权')
+ }
+ },
+ })
+ }else{
+ uni.showToast({
+ title: '请先授权！',
+ duration: 2000,
+ icon:'none'
+ });
+ showToast()
+ }
+ },
+ });
+ }
+ }
onMounted( async() =>{
getTopHeight()
+ await getInfo()
+ await getUserLocation()
+ console.log('进入首页了')
})
onShow(async() =>{
+ getTopHeight()
await getInfo()
})
uni.showShareMenu({
@@ -190,8 +294,6 @@
console.error('分享菜单显示失败', err);
}
});
-
-
</script>
<template>
@@ -199,37 +301,38 @@
<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>
+ <image v-if="cardInfo.headImg" class="user-img" :src= "BASE_URL + '/upload' + cardInfo.headImg" alt=''></image>
+ <image v-else 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')">
+ <!-- <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>
<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>
- <text>会员卡 </text>
+ <text v-if="isVip">会员卡 </text>
+ <text v-if="!isVip">未绑定 </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')">
+ <text v-if="isVip">金额卡</text>
+ <text v-if="isVip">{{cardInfo.balance}}元</text>
+ <view v-if="!isVip" class="user-add-card" @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>
<view v-if="isVip" class="card-right-bottom" @click="navTo('/pages/recharge/index')">充值</view>
</view>
@@ -237,21 +340,13 @@
</view>
</view>
<view class="function-box1">
- <view class="box1-bg box1-one" @click="upGrade()">
+ <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>
@@ -269,7 +364,21 @@
</block>
</view>
</view>
- <view class="advertisement-box" @click="upGrade"><image src="../../static/images/index/bg4.png" alt=""></image></view>
+ <!-- 积分商城 -->
+ <view class="advertisement-box" @click="navTo('/pages/pointsMall/index')">
+ <view class="point-advert">
+ <view class="advert-image">
+ <image class="image-icon3" src="../../static/images/index/advert-icon3.svg"></image>
+ <image class="image-icon1" src="../../static/images/index/advert-icon1.svg"></image>
+ <image class="image-icon2" src="../../static/images/index/advert-icon2.svg"></image>
+ <image class="image-icon4" src="../../static/images/index/advert-icon4.svg"></image>
+ </view>
+ <view class="advert-title">
+ <view class="advert-title1">积分商城</view>
+ <view class="advert-title2"><text>点击进入</text></view>
+ </view>
+ </view>
+ </view>
<view class="service-box">
<view class="service-title"><text>服务指南</text></view>
<view class="service-content">
@@ -285,6 +394,7 @@
</view>
</view>
<view class="service-bg" @click="upGrade">
+ <!-- <view class="service-bg" @click="navTo('/pages/counterRecharge/index')"> -->
<view>
<image src="../../static/images/index/notice5.png" alt=""></image>
<text>公示公告</text>
@@ -318,17 +428,15 @@
.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;
+ border-radius:50%;
margin-right:20rpx;
}
text{
@@ -338,23 +446,6 @@
.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{
@@ -367,6 +458,15 @@
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%;
@@ -425,6 +525,24 @@
justify-content: space-between;
flex-direction: column;
font-size:34rpx;
+ .user-add-card{
+ display:flex;
+ align-items:center;
+ height:52rpx;
+ font-size:28rpx;
+ background:linear-gradient(to right,#B1D9FD 0%,#65A7FD 70%,#65A7FD 100%);
+ border-radius:50rpx;
+ padding: 0 20rpx;
+ image{
+ width:36rpx;
+ height:36rpx;
+ margin-right:6rpx;
+ opacity:0.8;
+ }
+ text{
+ color:#FFF;
+ }
+ }
text:last-child{
font-weight:500;
}
@@ -577,7 +695,7 @@
display: flex;
justify-content: center;
align-items: center;
- background: #65A7FD;
+ // background: #65A7FD;
border-radius:50%;
image{
width: 48rpx;
@@ -597,13 +715,86 @@
}
.advertisement-box{
width:100%;
- height: 188rpx;
+ height: 160rpx;
padding:0 32rpx 10rpx;
box-sizing: border-box;
- image{
- width:100%;
- height: 178rpx;
+ display: flex;
+ justify-content: space-around;
+ .point-advert{
+ width:640rpx;
+ height:136rpx;
+ border-radius:10rpx;
+ background:linear-gradient(140deg,#5c9dff 0%,#b5dcff 30%,#52aafc 70%,#b5dcff 90%,#5daffc 100%);
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ box-shadow: 0 0 4rpx 2rpx #4978de;
+ .advert-title{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #fff;
+ font-size:46rpx;
+ font-weight:800;
+ text-shadow:4rpx 2rpx #5EA1FA;
+ .advert-title2{
+ margin-top:10rpx;
+ font-size:28rpx;
+ font-weight:500;
+ width:180rpx;
+ height:40rpx;
+ background: #5c9dff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius:30rpx;
+ letter-spacing:2rpx;
+ }
+ }
+ .advert-image{
+ width:200rpx;
+ height:100%;
+ // background: #76bfa1;
+ position: relative;
+ .image-icon1{
+ position:absolute;
+ left: calc(50% - 65rpx);
+ top: calc(50% - 65rpx);
+ width:130rpx;
+ height:130rpx;
+ transform: rotate(20deg);
+ }
+ .image-icon2{
+ position:absolute;
+ left:60%;
+ top: calc(50% - 30rpx);
+ width:90rpx;
+ height:90rpx;
+ transform: rotate(-10deg);
+ }
+ .image-icon3{
+ position:absolute;
+ left: calc(50% - 100rpx);
+ top: 30%;
+ width:80rpx;
+ height:80rpx;
+ transform: rotate(-10deg);
+ }
+ .image-icon4{
+ position:absolute;
+ left:140%;
+ top: 60%;
+ width:50rpx;
+ height:50rpx;
+ transform: rotate(5deg);
+ }
+ }
}
+ // image{
+ // width:320rpx;
+ // height:136rpx;
+ // border-radius:10rpx;
+ // }
}
.service-box{
width: 100%;
--
Gitblit v1.9.3