修改页面

This commit is contained in:
zhouyanli
2026-07-25 11:38:26 +08:00
parent 1d7e076242
commit 9ebe66cacb
20 changed files with 238 additions and 1979 deletions

View File

@@ -1,8 +0,0 @@
<template>
</template>
<script>
</script>
<style>
</style>

View File

@@ -1,8 +0,0 @@
<template>
</template>
<script>
</script>
<style>
</style>

View File

@@ -1,243 +0,0 @@
<template>
<view class="guide-page">
<view class="status-bar"></view>
<!-- 引导内容滑动容器 -->
<swiper
class="guide-swiper"
:current="currentStep"
@change="handleSwiperChange"
:disable-scroll="false"
:indicator-dots="false"
:mode="mode"
>
<!-- 便捷服务 -->
<swiper-item>
<view class="guide-item">
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide1.png" mode="aspectFit" class="img-content"></image>
</view>
<view class="guide-text">
<view class="guide-title">便捷服务</view>
<view class="guide-subtitle">报修、缴费、预约</view>
</view>
</view>
</swiper-item>
<!-- 高效管理 -->
<swiper-item>
<view class="guide-item">
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide2.png" mode="aspectFit" class="img-content"></image>
</view>
<view class="guide-text">
<view class="guide-title">高效管理</view>
<view class="guide-subtitle">自动化流程和智能设备</view>
</view>
</view>
</swiper-item>
<!--安全保障 -->
<swiper-item>
<view class="guide-item">
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide3.png" mode="aspectFit" class="img-content"></image>
</view>
<view class="guide-text">
<view class="guide-title">安全保障</view>
<view class="guide-subtitle">智能巡检和智慧访客</view>
</view>
</view>
</swiper-item>
</swiper>
<!-- 进度点 -->
<view class="progress-dots">
<view class="dot" :class="{ active: currentStep === 0 }"></view>
<view class="dot" :class="{ active: currentStep === 1 }"></view>
<view class="dot" :class="{ active: currentStep === 2 }"></view>
</view>
<!-- 操作按钮 -->
<view class="guide-btn-wrap">
<button
class="guide-btn"
:class="{ primary: currentStep === 2 }"
@click="handleBtnClick"
>
{{ currentStep === 2 ? '立即体验' : '下一步' }}
</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
// ========== 响应式数据 ==========
// 当前引导步骤(0/1/2)
const currentStep = ref(0);
const mode = ref("default")
// ========== 方法 ==========
// 滑动swiper切换步骤
const handleSwiperChange = (e) => {
currentStep.value = e.detail.current;
};
// 点击按钮操作
const handleBtnClick = () => {
// 前两步:点击下一步切换
if (currentStep.value < 2) {
currentStep.value++;
} else {
// 立即体验,直接进入首页(不强制登录 — 仅在需要身份的功能上才要求登录)
uni.setStorageSync('hasShowGuide', true);
uni.switchTab({
url: '/pages/paymentIndex/paymentIndex'
});
}
};
</script>
<style scoped>
/* 页面容器 */
.guide-page {
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, #E2F0FF, #F6FAFF);
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
/* 状态栏 - 自适应设备状态栏高度 */
.status-bar {
height: var(--status-bar-height);
width: 100%;
flex-shrink: 0;
}
/* 滑动容器 */
.guide-swiper {
flex: 1;
width: 100%;
}
/* 单个引导项 - 全屏自适应 */
.guide-item {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 60rpx;
box-sizing: border-box;
}
/* 图片区域 - 自适应 */
.guide-img {
width: 80%;
max-width: 600rpx;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
}
.img-content {
width: 100%;
height: 100%;
max-height: 50vh;
}
/* 文字区域 */
.guide-text {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40rpx;
}
/* 引导标题 */
.guide-title {
font-size: 56rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
/* 引导副标题 */
.guide-subtitle {
font-size: 28rpx;
color: #666;
}
/* 进度点容器 */
.progress-dots {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
flex-shrink: 0;
}
/* 单个进度点 */
.dot {
width: 16rpx;
height: 8rpx;
border-radius: 8rpx;
background-color: #ddd;
margin: 0 8rpx;
transition: all 0.3s ease;
}
/* 激活的进度点 */
.dot.active {
background-color: #007aff;
width: 28rpx;
}
/* 按钮容器 */
.guide-btn-wrap {
width: 80%;
max-width: 600rpx;
margin-bottom: 80rpx;
flex-shrink: 0;
}
/* 引导按钮 */
.guide-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
font-size: 32rpx;
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 默认按钮样式(下一步) */
.guide-btn:not(.primary) {
background-color: #fff;
color: #007aff;
border: 2rpx solid #007aff;
}
/* 主按钮样式(立即体验) */
.guide-btn.primary {
background-color: #007aff;
color: #fff;
border: none;
}
/* 按钮禁用态(可选) */
.guide-btn:disabled {
background-color: #ccc;
color: #fff;
border: none;
}
</style>

View File

@@ -4,7 +4,7 @@
<uni-nav-bar title="生活缴费" backgroundColor="transparent" :border="false">
</uni-nav-bar>
<view class="topbox">
<image class="titleImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payTitle.png"></image>
<!-- <image class="titleImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payTitle.png"></image> -->
<image class="payImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payImg.png"></image>
</view>
<scroll-view class="page" scroll-y="true">
@@ -36,7 +36,7 @@
</view>
<!-- 新增缴费区域 -->
<view class="add-section">
<!-- <view class="add-section">
<view class="section-header">
<text class="section-title">新增缴费</text>
<text class="record-link" @click="goToRecord">缴费记录</text>
@@ -50,7 +50,7 @@
<text class="item-name">{{ item.name}}</text>
</view>
</view>
</view>
</view> -->
<view style="width: 100%;height: 30rpx;"></view>
</view>
@@ -63,6 +63,7 @@
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getTopUpSelectByResident, getopenIdByCode, postInsertOpenId } from '/pageSubPack/api/apiSub.js'
import { isLoggedIn, requireAuth } from '/pageSubPack/api/auth.js'
import { getAppPaymentData, clearAppPaymentData, buildPaymentItemFromApp } from '/pageSubPack/api/appLaunch.js'
const isLogin = ref(false)
const paymentList = ref([])
@@ -125,20 +126,38 @@
// ===== 生命周期 =====
onLoad(() => {
refreshLoginState();
uni.hideTabBar({ animation: false });
if (isLogin.value) {
postOpenId();
getPayList();
// 检查是否由 App 跳转而来,携带了支付参数
checkAppLaunchPayment();
// getPayList();
}
});
onShow(() => {
refreshLoginState();
if (isLogin.value) {
getPayList();
// getPayList();
}
});
// ===== App 跳转支付:检测 extraData 并直接进入支付页 =====
const checkAppLaunchPayment = () => {
const appData = getAppPaymentData()
if (!appData) return // 非 App 跳转,正常展示账单列表
console.log("检测到 App 支付参数:", appData)
const paymentItem = buildPaymentItemFromApp(appData)
if (!paymentItem) return
// 清除已消费的启动数据
clearAppPaymentData()
// 存入 storage 供 arrearsPayment 使用
uni.setStorageSync("arrearsPayment", paymentItem)
// 直接跳转支付页
uni.redirectTo({ url: "/pageSubPack/payment-list/arrearsPayment" })
}
// ===== 点击事件(统一用 isLogin 判断) =====
// 点击"去登录"提示条
@@ -148,7 +167,7 @@
title: '查看缴费账单',
onLoggedIn: () => {
refreshLoginState();
getPayList();
// getPayList();
}
});
};