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 | 162 +++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 155 insertions(+), 7 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2609622..ec461b7 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -19,6 +19,7 @@
userName:'微信用户',
headImg:'',
userPhone:'',
+ integral:'',
waterCardNumber:'',
balance:'',
@@ -35,6 +36,7 @@
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
//用户信息处理存储
@@ -59,6 +61,7 @@
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
@@ -205,9 +208,77 @@
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()
@@ -223,8 +294,6 @@
console.error('分享菜单显示失败', err);
}
});
-
-
</script>
<template>
@@ -297,9 +366,18 @@
</view>
<!-- 积分商城 -->
<view class="advertisement-box" @click="navTo('/pages/pointsMall/index')">
- <!-- <view class="advertisement-box" @click="upGrade"> -->
- <image src="../../static/images/index/banner2.png" alt=""></image>
- <image src="../../static/images/index/banner1.png" alt=""></image>
+ <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>
@@ -642,11 +720,81 @@
box-sizing: border-box;
display: flex;
justify-content: space-around;
- image{
- width:320rpx;
+ .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