wangyuxin/huakai-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

10/14

Browse Source
This commit is contained in:
Zy
2026-10-14 09:28:49 +08:00
parent ace7d969ac
commit 27d9fddccc
18 changed files with 4164 additions and 3890 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
huakai-app/App.vue
View File

@@ -1,73 +1,80 @@
<script setup> <script setup>
import { onLaunch } from '@dcloudio/uni-app' import { onLaunch, onShow } from '@dcloudio/uni-app';
import { captureAppLaunchData, capturePaymentResult } from '/pageSubPack/api/apiSub.js';
// 应用启动时执行 // 应用启动时执行
onLaunch(() => { onLaunch(() => {
console.log('App 启动') console.log('App 启动');
// #ifdef APP-PLUS
// 只有 App 平台才获取 CID
getPushCID()
// #endif
})
// 获取 uniPush 2.0 CID
function getPushCID() {
uni.getPushClientId({
success: (res) => {
console.log('推送初始化成功')
console.log('CID =', res.cid)
// 存起来备用 // #ifdef APP-PLUS
uni.setStorageSync('push_cid', res.cid) // 只有 App 平台才获取 CID
getPushCID();
// #endif
});
// 弹出CID给你看 onShow((options) => {
// uni.showModal({ console.log('App onShow, options:', JSON.stringify(options));
// title: '你的CID', // 捕获 App 跳转传入的支付参数（热启动 — options 携带新的 referrerInfo）
// content: res.cid // captureAppLaunchData(options);
// }) // 捕获日照银行支付小程序返回的支付结果（navigateBackMiniProgram 的 extraData）
}, capturePaymentResult(options);
fail: (err) => { });
console.error('获取推送 CID 失败', err)
} // 获取 uniPush 2.0 CID
}) function getPushCID() {
} uni.getPushClientId({
// export default { success: (res) => {
// on console.log('推送初始化成功');
// onShow: function() { console.log('CID =', res.cid);
// // console.log('App Show')
// }, // 存起来备用
// onHide: function() { uni.setStorageSync('push_cid', res.cid);
// console.log('App Hide')
// }, // 弹出CID给你看
// uni.showModal({
// title: '你的CID',
// } // content: res.cid
// })
},
fail: (err) => {
console.error('获取推送 CID 失败', err);
}
});
}
// export default {
// on
// onShow: function() {
// // console.log('App Show')
// },
// onHide: function() {
// console.log('App Hide')
// },
// }
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/uni_modules/uview-plus/index.scss"; @import '@/uni_modules/uview-plus/index.scss';
/*每个页面公共css */ /*每个页面公共css */
</style> </style>
<style> <style>
/* 全局给 uni.showToast 加内边距 */ /* 全局给 uni.showToast 加内边距 */
.uni-toast { .uni-toast {
padding: 5px !important; padding: 5px !important;
/* 上下20 左右40，自己改数值 */ /* 上下20 左右40，自己改数值 */
min-height: auto !important; min-height: auto !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
/* 文字也可以居中、调整行高 */ /* 文字也可以居中、调整行高 */
.uni-toast-content { .uni-toast-content {
/* line-height: 1.6 !important; */ /* line-height: 1.6 !important; */
padding: 0 !important; padding: 0 !important;
white-space: normal !important; white-space: normal !important;
word-break: break-all !important; word-break: break-all !important;
} }
/* button:after{ /* button:after{
border-radius: 50px; border-radius: 50px;
} */ } */
</style> </style>

259
huakai-app/manifest.json
View File

@@ -1,132 +1,129 @@
{ {
"name" : "花开物业", "name": "花开物业",
"appid" : "__UNI__29C3D60", "appid": "__UNI__29C3D60",
"description" : "物业用户端app", "description": "物业用户端app",
"versionName" : "1.0.1", "versionName": "1.0.1",
"versionCode" : "103", "versionCode": "103",
"transformPx" : false, "transformPx": false,
/* 5+App特有相关 */ /* 5+App特有相关 */
"app-plus" : { "app-plus": {
"usingComponents" : true, "usingComponents": true,
"nvueStyleCompiler" : "uni-app", "nvueStyleCompiler": "uni-app",
"compilerVersion" : 3, "compilerVersion": 3,
"splashscreen" : { "splashscreen": {
"alwaysShowBeforeRender" : true, "alwaysShowBeforeRender": true,
"waiting" : true, "waiting": true,
"autoclose" : true, "autoclose": true,
"delay" : 0 "delay": 0
}, },
/* 模块配置 */ /* 模块配置 */
"modules" : { "modules": {
"Geolocation" : {}, "Geolocation": {},
"Maps" : {}, "Maps": {},
"Camera" : {}, "Camera": {},
"Contacts" : {}, "Contacts": {},
"Gallery" : {}, "Gallery": {},
"Push" : {} "Push": {}
}, },
/* 应用发布信息 */ /* 应用发布信息 */
"distribute" : { "distribute": {
/* android打包配置 */ /* android打包配置 */
"android" : { "android": {
"permissions" : [ "permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>", "<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>", "<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>", "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>" "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>"
] ]
}, },
/* ios打包配置 */ /* ios打包配置 */
"ios" : { "ios": {
"dSYMs" : false, "dSYMs": false,
"privacyDescription" : { "privacyDescription": {
"NSPhotoLibraryUsageDescription" : "需要访问您的相册，用于选择图片上传", "NSPhotoLibraryUsageDescription": "需要访问您的相册，用于选择图片上传",
"NSPhotoLibraryAddUsageDescription" : "保存二维码图片到相册" "NSPhotoLibraryAddUsageDescription": "保存二维码图片到相册"
} }
}, },
/* SDK配置 */ /* SDK配置 */
"sdkConfigs" : { "sdkConfigs": {
"geolocation" : { "geolocation": {
"system" : { "system": {
"__platform__" : [ "ios", "android" ] "__platform__": ["ios", "android"]
} }
}, },
"maps" : { "maps": {
"amap" : { "amap": {
"name" : "玉米汁穿过三峡人家", "name": "玉米汁穿过三峡人家",
"appkey_ios" : "39a4c28a01c3ec15684b21d4093aad3d", "appkey_ios": "39a4c28a01c3ec15684b21d4093aad3d",
"appkey_android" : "044055aed47cb305e86419fd82e4c5f3" "appkey_android": "044055aed47cb305e86419fd82e4c5f3"
} }
}, },
"push" : { "push": {
"unipush" : { "unipush": {
"version" : "2", "version": "2",
"offline" : true, "offline": true,
"icons" : { "icons": {
"small" : { "small": {
"mdpi" : "D:/图片文档/logo-app.png" "mdpi": "D:/图片文档/logo-app.png"
} }
} }
} }
}, },
"share" : { "share": {
"weixin" : { "weixin": {
"appid" : "", "appid": "",
"UniversalLinks" : "" "UniversalLinks": ""
} }
} }
} }
} }
}, },
/* 快应用特有相关 */ /* 快应用特有相关 */
"quickapp" : {}, "quickapp": {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin": {
"appid" : "wx40625124315d2de1", "appid": "wxa6184796ceba80ca",
"setting" : { "setting": {
"urlCheck" : false "urlCheck": false
}, },
"requiredPrivateInfos" : [ "chooseLocation", "getLocation" ], "requiredPrivateInfos": ["chooseLocation", "getLocation"],
"permission" : { "permission": {
"scope.camera" : { "scope.camera": {
"desc" : "用于扫码" "desc": "用于扫码"
}, }
"scope.userLocation" : { },
"desc" : "你的位置信息将用于定位选择" "usingComponents": true
} },
}, "mp-alipay": {
"usingComponents" : true "usingComponents": true
}, },
"mp-alipay" : { "mp-baidu": {
"usingComponents" : true "usingComponents": true
}, },
"mp-baidu" : { "mp-toutiao": {
"usingComponents" : true "usingComponents": true
}, },
"mp-toutiao" : { "uniStatistics": {
"usingComponents" : true "enable": false
}, },
"uniStatistics" : { "vueVersion": "3",
"enable" : false "app-harmony": {
}, "distribute": {
"vueVersion" : "3", "bundleName": "com.chengkong.property.owner"
"app-harmony" : { }
"distribute" : { }
"bundleName" : "com.chengkong.property.owner" }
}
}
}

2
huakai-app/package-lock.json generated
View File

@@ -1,5 +1,5 @@
{ {
"name": "property-uniapp-project", "name": "huakai-app",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {

198
huakai-app/pageSubPack/api/apiSub.js
View File

@@ -92,14 +92,14 @@ export const upDateMyHouse = (data) => {
// =========问卷调查========= // =========问卷调查=========
// 问卷列表 // 问卷列表
export const getQuestionnaireList = (data) => { export const getQuestionnaireList = (data) => {
return get('/api/resident/questionnaire/list',data) return get('/api/resident/questionnaire/list', data)
} }
// 问卷详情 // 问卷详情
export const getQuestionnaireDetail = (data) => { export const getQuestionnaireDetail = (data) => {
return get('/api/resident/questionnaire/myAnswers',data) return get('/api/resident/questionnaire/myAnswers', data)
} }
// 提交问卷 // 提交问卷
export const submitQuestionnair = (id,data) => { export const submitQuestionnair = (id, data) => {
return post(`/api/resident/questionnaire/${id}/submit`, data) return post(`/api/resident/questionnaire/${id}/submit`, data)
} }
// =====投诉意见======= // =====投诉意见=======
@@ -109,19 +109,19 @@ export const getComplainType = () => {
} }
// 获取投诉列表 // 获取投诉列表
export const getComplainList = (data) => { export const getComplainList = (data) => {
return get('/complain/getComplainList',data) return get('/complain/getComplainList', data)
} }
// 提交投诉建议 // 提交投诉建议
export const addComplain = (data) => { export const addComplain = (data) => {
return post('/complain/add',data) return post('/complain/add', data)
} }
// 投诉详情 // 投诉详情
export const getComplainDetail = (data) => { export const getComplainDetail = (data) => {
return get('/complain/detail',data) return get('/complain/detail', data)
} }
// 联系物业 // 联系物业
export const getManagePhoneData = (data) => { export const getManagePhoneData = (data) => {
return get('/api/manage/banner/getManagePhone',data) return get('/api/manage/banner/getManagePhone', data)
} }
// 修改身份证照片 // 修改身份证照片
@@ -223,3 +223,187 @@ export const getParkingDetail = (data) => {
export const rebindCar = (data) => { export const rebindCar = (data) => {
return post(`/ResidentCarAreaManage/rebind`, data) return post(`/ResidentCarAreaManage/rebind`, data)
} }
// RZbank
/**
* 归一化 billId/billIds：单个 id 用 billId，多个用 billIds，统一转为 billIds 数组
*/
function normalizeBillParams(obj) {
if (!obj) return
// 先解码再拆分为数组
if (typeof obj.billIds === 'string') {
const decoded = decodeURIComponent(obj.billIds)
obj.billIds = decoded.includes(',') ?
decoded.split(',').map(v => v.trim()).filter(Boolean) : [decoded]
}
// billId 存在且 billIds 不存在时，包装为数组
if (obj.billId && !obj.billIds) {
const decoded = decodeURIComponent(
typeof obj.billId === 'string' ? obj.billId : String(obj.billId)
)
obj.billIds = decoded.includes(',') ?
decoded.split(',').map(v => v.trim()).filter(Boolean) : [decoded]
delete obj.billId
}
}
/**
* 从启动参数中获取 App 传入的全部数据（支付参数 + token + userId）
*/
export function captureAppLaunchData(onShowOptions) {
let data = null
let queryData = null
const tryGetData = (options, label) => {
if (!options) return null
console.log(label, JSON.stringify(options))
// 保存 path query 参数（供接口调用）
if (options.query && Object.keys(options.query).length > 0) {
queryData = options.query
console.log(label + ' path query 参数:', JSON.stringify(queryData))
}
// 优先从 query 获取
if (options.query && Object.keys(options.query).length > 0) {
return options.query
}
// referrerInfo.extraData：可能是对象也可能是查询字符串
const extraData = options?.referrerInfo?.extraData
if (extraData) {
if (typeof extraData === 'string') {
console.log(label + ' extraData 是查询字符串，解析中...')
return parseQueryString(extraData)
}
return extraData
}
return null
}
// 冷启动
try {
data = tryGetData(wx.getLaunchOptionsSync?.() || {}, '冷启动')
} catch (e) {
console.error('getLaunchOptionsSync 失败:', e)
}
// 热启动
if (!data) {
data = tryGetData(onShowOptions, '热启动')
}
if (data && (data.payAmount || data.acct || data.custId || data.billId || data.billIds)) {
// 归一化 billId/billIds：单个 id 用 billId，多个用 billIds，统一转为 billIds 数组
normalizeBillParams(data)
// 恢复登录态
if (data.token) {
uni.setStorageSync('token', data.token)
console.log('已恢复 token')
}
if (data.userId) {
uni.setStorageSync('userId', data.userId)
console.log('已恢复 userId')
}
uni.setStorageSync(STORAGE_KEY, data)
console.log('已存储 App 支付数据:', JSON.stringify(data))
}
// 归一化 queryData 中的 billId/billIds
normalizeBillParams(queryData)
// 单独保存参数供接口使用（优先 queryData，fallback 到 data，即 extraData 来源）
const queryParams = queryData || data
if (queryParams) {
uni.setStorageSync(APP_QUERY_KEY, queryParams)
console.log('已存储 App 接口参数:', JSON.stringify(queryParams))
}
return data
}
// 获取日照银行小程序拉起参数
export const getBankMiniProgramParams = (data) => {
return post('/api/pay/yidang/create', data)
}
/**
* 支付返回结果
* 日照银行支付小程序完成支付后，通过 navigateBackMiniProgram 携带 extraData 返回，
* 本小程序在 App.onShow 中通过 referrerInfo.extraData 接收（场景值 1038）。
* 这里只负责捕获/读取/清除原始返回数据，成功/失败判定见 resolvePaymentResult。
*/
const PAYMENT_RESULT_KEY = 'payment_return_result'
/**
* 捕获支付返回结果（在 App.onShow 中调用）
* 注意：App 冷/热启动进入时 extraData 是支付参数（payAmount/billIds 等），
* 并非支付返回，需跳过，避免覆盖真实结果。
*/
export function capturePaymentResult(onShowOptions) {
console.log(onShowOptions)
if (!onShowOptions) return
const extraData = onShowOptions?.referrerInfo?.extraData
if (!extraData) return
// 含支付参数字段说明是 App 跳转进入（冷/热启动），不是支付返回，跳过
if (typeof extraData === 'object' && (extraData.payAmount || extraData.billId || extraData.billIds || extraData
.acct || extraData.custId)) {
return
}
let parsed = extraData
if (typeof extraData === 'string') {
try {
parsed = JSON.parse(extraData)
} catch (e) {
parsed = parseQueryString(extraData)
}
}
console.log('捕获到支付返回结果:', JSON.stringify(parsed))
uni.setStorageSync(PAYMENT_RESULT_KEY, parsed)
}
/** 读取支付返回结果（读取后建议调用 clearPaymentReturnResult 清除） */
export function getPaymentReturnResult() {
try {
return uni.getStorageSync(PAYMENT_RESULT_KEY) || null
} catch (e) {
return null
}
}
/** 清除支付返回结果 */
export function clearPaymentReturnResult() {
uni.removeStorageSync(PAYMENT_RESULT_KEY)
}
// 失败/成功信号值（大小写不敏感），字段名与取值以日照银行实际返回为准，如不一致只需调整下方映射
const FAIL_SIGNALS = ['fail', 'failed', 'cancel', 'cancelled', 'error', 'closed', 'notpay', 'payerror', '2', 'false',
'no', '01'
]
const SUCCESS_SIGNALS = ['success', 'ok', 'paid', 'finish', 'finished', '1', '0000', '0', '200', 'true', 'yes', '00']
const RESULT_FIELDS = ['payResult', 'result', 'status', 'payStatus', 'tradeState', 'returnCode', 'code', 'errCode',
'orderState'
]
/**
* 判定日照银行返回的支付结果：'success' | 'fail' | null（无法判定）
*/
export function resolvePaymentResult(data) {
console.log("日照银行返回数据：", data)
if (!data || typeof data !== 'object') return null
// 布尔字段优先
if (typeof data.success === 'boolean') return data.success ? 'success' : 'fail'
if (typeof data.isSuccess === 'boolean') return data.isSuccess ? 'success' : 'fail'
for (const key of RESULT_FIELDS) {
const v = data[key]
if (v === undefined || v === null || v === '') continue
const s = String(v).trim().toLowerCase()
if (FAIL_SIGNALS.includes(s)) return 'fail'
if (SUCCESS_SIGNALS.includes(s)) return 'success'
}
return null
}

42
huakai-app/pageSubPack/api/date.js Normal file
View File

@@ -0,0 +1,42 @@
/**
* 日期格式化
* @param {Date|number|string} time 时间戳/日期字符串/Date对象
* @param {string} fmt 格式 'yyyy-MM-dd HH:mm:ss'
* @returns {string}
*/
export function formatDate(time, fmt = 'yyyy-MM-dd HH:mm:ss') {
if (!time) return ''
let date
if (typeof time === 'number') {
// 小程序时间戳注意：毫秒直接用，秒要*1000
date = new Date(time.toString().length === 10 ? time * 1000 : time)
} else {
date = new Date(time)
}
// 兼容ios：2025-08-01 → 2025/08/01
if (isNaN(date.getTime())) {
date = new Date(String(time).replace(/-/g, '/'))
}
if (isNaN(date.getTime())) return ''
const o = {
'M+': date.getMonth() + 1, // 月
'd+': date.getDate(), // 日
'H+': date.getHours(), // 24小时制
'h+': date.getHours() % 12, //12小时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), //季度
'S': date.getMilliseconds() //毫秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (const k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
const str = o[k] + ''
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : str.padStart(2, '0'))
}
}
return fmt
}

76
huakai-app/pageSubPack/api/request.js
View File

@@ -1,18 +1,34 @@
let baseUrl = ''; let baseUrl = '';
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
// baseUrl = 'https://wuyeapi.ckdzkj.com'; // 开发环境 baseUrl = 'https://wuyeapi.ckdzkj.com'; // 开发环境
baseUrl = "https://wuyeapi.bugtc.com" // baseUrl = "http://192.168.0.222:8080"
// baseUrl = 'https://wuyeapi.ckdzkj.com';
// baseUrl = "https://apitest.ckdzkj.com"
// baseUrl = "https://wuyeapi.bugtc.com"
// baseUrl = 'https://during-immovable-eats.ngrok-free.dev';
} else { } else {
baseUrl = 'https://wuyeapi.bugtc.com'; // 生产环境 baseUrl = 'https://wuyeapi.ckdzkj.com';
// baseUrl = 'https://apitest.ckdzkj.com';
// baseUrl = 'https://during-immovable-eats.ngrok-free.dev';
} }
// 图片基础地址
// const imgBaseUrl = 'https://wuyeadmin.bugtc.com'
const imgBaseUrl = 'https://wuye.ckdzkj.com'
export {
baseUrl,
imgBaseUrl
};
/** /**
* 显示接口错误提示（自动处理长消息截断问题） * 显示接口错误提示（自动处理长消息截断问题）
* @param {string|Object} msg - 错误消息或含 msg 字段的错误对象 * @param {string|Object} msg - 错误消息或含 msg 字段的错误对象
*/ */
export function showApiError(msg) { export function showApiError(msg) {
const message = typeof msg === 'string' ? msg : (msg.msg || msg.message || '请求失败'); const message = typeof msg === 'string' ? msg : (msg.msg || msg.message || '请求失败');
uni.showToast({ title: message || '请求失败', icon: 'error', duration: 2000 }); uni.showToast({
title: message || '请求失败',
icon: 'error',
duration: 2000
});
} }
export default function request(url, data = {}, method = "GET") { export default function request(url, data = {}, method = "GET") {
@@ -36,7 +52,10 @@ export default function request(url, data = {}, method = "GET") {
// HTTP 失败 // HTTP 失败
if (res.statusCode !== 200) { if (res.statusCode !== 200) {
reject({ msg: `请求异常 ${res.statusCode}`, code: res.statusCode }); reject({
msg: `请求异常 ${res.statusCode}`,
code: res.statusCode
});
return; return;
} }
@@ -44,7 +63,11 @@ export default function request(url, data = {}, method = "GET") {
// token 过期 — 清除登录态，提示用户，但不强制跳转（用户可继续浏览非敏感页面） // token 过期 — 清除登录态，提示用户，但不强制跳转（用户可继续浏览非敏感页面）
if (resData.code === 401) { if (resData.code === 401) {
uni.showToast({ title: '登录已过期，请重新登录', icon: 'none', duration: 2000 }); uni.showToast({
title: '登录已过期，请重新登录',
icon: 'none',
duration: 2000
});
uni.removeStorageSync('token'); uni.removeStorageSync('token');
uni.removeStorageSync('userId'); uni.removeStorageSync('userId');
// 使用 navigateTo 而非 reLaunch，用户可通过返回按钮退出登录页 // 使用 navigateTo 而非 reLaunch，用户可通过返回按钮退出登录页
@@ -53,11 +76,16 @@ export default function request(url, data = {}, method = "GET") {
url: '/pageSubPack/loginSub/pwd-login', url: '/pageSubPack/loginSub/pwd-login',
fail: () => { fail: () => {
// 如果 navigateTo 失败（如页面栈满），则用 reLaunch // 如果 navigateTo 失败（如页面栈满），则用 reLaunch
uni.reLaunch({ url: '/pageSubPack/loginSub/pwd-login' }); uni.reLaunch({
url: '/pageSubPack/loginSub/pwd-login'
});
} }
}); });
}, 1500); }, 1500);
reject({ msg: '登录过期', code: 401 }); reject({
msg: '登录过期',
code: 401
});
return; return;
} }
@@ -68,14 +96,26 @@ export default function request(url, data = {}, method = "GET") {
// 业务失败（code === 500 统一 showToast 展示完整 msg） // 业务失败（code === 500 统一 showToast 展示完整 msg）
else { else {
if (resData.code === 500 && resData.msg) { if (resData.code === 500 && resData.msg) {
uni.showToast({ title: resData.msg, icon: 'error', duration: 2500 }); uni.showToast({
title: resData.msg,
icon: 'error',
duration: 2500
});
} }
reject({ msg: resData.msg || '请求失败', code: resData.code, data: resData }); reject({
msg: resData.msg || '请求失败',
code: resData.code,
data: resData
});
} }
}, },
fail: (err) => { fail: (err) => {
uni.hideLoading(); uni.hideLoading();
reject({ msg: '网络异常', code: -1, raw: err }); reject({
msg: '网络异常',
code: -1,
raw: err
});
} }
}); });
}); });
@@ -99,15 +139,15 @@ export const upload = (filePath, url) => {
}, },
success: (res) => { success: (res) => {
try { try {
const data = JSON.parse(res.data); const data = JSON.parse(res.data);
resolve(data.data || ''); // 直接返回图片地址 resolve(data.data || ''); // 直接返回图片地址
} catch (e) { } catch (e) {
resolve(''); resolve('');
} }
}, },
fail: (err) => { fail: (err) => {
reject(err); reject(err);
} }
}); });
}); });
}; };

33
huakai-app/pageSubPack/api/useImageUpload.js
View File

@@ -1,5 +1,9 @@
// 服务器地址（与 request.js 保持一致） // 服务器地址（与 request.js 保持一致）
const baseUrl = 'http://192.168.0.239:8080'; // const baseUrl = 'http://192.168.0.239:8080';
// const baseUrl = 'http://192.168.1.222:8080';
import {
baseUrl
} from './request.js';
/** /**
* 图片上传 Hook * 图片上传 Hook
@@ -7,7 +11,9 @@ const baseUrl = 'http://192.168.0.239:8080';
* 解决编辑回显后重新上传的问题 * 解决编辑回显后重新上传的问题
*/ */
import { reactive } from 'vue' import {
reactive
} from 'vue'
/** /**
* @param {Object} options 配置 * @param {Object} options 配置
@@ -18,7 +24,7 @@ import { reactive } from 'vue'
export function useImageUpload(options = {}) { export function useImageUpload(options = {}) {
const { const {
uploadUrl = '/api/resident/file/uploadImage', uploadUrl = '/api/resident/file/uploadImage',
fileKey = 'file' fileKey = 'file'
} = options } = options
// 使用 reactive 对象存储所有状态 // 使用 reactive 对象存储所有状态
@@ -87,12 +93,16 @@ export function useImageUpload(options = {}) {
const uploadImage = () => { const uploadImage = () => {
// 如果没有新选择临时文件，直接返回已有的服务器URL // 如果没有新选择临时文件，直接返回已有的服务器URL
if (!state.tempFilePath) { if (!state.tempFilePath) {
return Promise.resolve({ url: state.serverUrl }) return Promise.resolve({
url: state.serverUrl
})
} }
// 如果已经有服务器URL且没有重新选择，也直接返回 // 如果已经有服务器URL且没有重新选择，也直接返回
if (state.serverUrl && !state.tempFilePath) { if (state.serverUrl && !state.tempFilePath) {
return Promise.resolve({ url: state.serverUrl }) return Promise.resolve({
url: state.serverUrl
})
} }
state.uploading = true state.uploading = true
@@ -118,11 +128,14 @@ export function useImageUpload(options = {}) {
const data = JSON.parse(res.data) const data = JSON.parse(res.data)
if (data.code === 200 && data.data) { if (data.code === 200 && data.data) {
// 更新服务器URL（确保存的是字符串） // 更新服务器URL（确保存的是字符串）
const url = typeof data.data === 'string' ? data.data : (data.data?.url || '') const url = typeof data.data === 'string' ? data.data : (data.data
?.url || '')
state.serverUrl = url state.serverUrl = url
// 清空临时文件 // 清空临时文件
state.tempFilePath = null state.tempFilePath = null
resolve({ url }) resolve({
url
})
} else { } else {
uni.showToast({ uni.showToast({
title: data.msg || '上传失败', title: data.msg || '上传失败',
@@ -164,7 +177,9 @@ export function useImageUpload(options = {}) {
return await uploadImage() return await uploadImage()
} }
// 否则返回已有的服务器URL // 否则返回已有的服务器URL
return { url: state.serverUrl } return {
url: state.serverUrl
}
} }
/** /**
@@ -187,4 +202,4 @@ export function useImageUpload(options = {}) {
getSubmitUrl, getSubmitUrl,
reset reset
} }
} }

301
huakai-app/pageSubPack/loginSub/forget-pwd.vue
View File

@@ -2,234 +2,235 @@
<view class="forget-page"> <view class="forget-page">
<view class="status_bar"></view> <view class="status_bar"></view>
<view class="nav-bar"> <view class="nav-bar">
<uni-icons type="left" size="28" color="#333" @click="goBack"></uni-icons> <uni-icons type="left" size="28" color="#333" @click="goBack"></uni-icons>
<view class="nav-title">忘记密码</view> <view class="nav-title">忘记密码</view>
</view> </view>
<!-- 手机号输入框 --> <!-- 手机号输入框 -->
<view class="input-item"> <view class="input-item">
<view class="input-icon"> <view class="input-icon">
<image src="http://47.104.199.163:9090/images/login/phone.png" mode="" style="height: 100%;width: 100%;"></image> <image :src="`${imgBaseUrl}/images/login/phone.png`" mode="" style="height: 100%; width: 100%"></image>
</view> </view>
<uni-easyinput class="input-content" type="number" v-model="phoneNumber" trim="all" <uni-easyinput
placeholder="请输入手机号" :inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle"> class="input-content"
</uni-easyinput> type="number"
v-model="phoneNumber"
trim="all"
placeholder="请输入手机号"
:inputBorder="false"
maxlength="11"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
</view> </view>
<!-- 验证码输入 + 获取验证码按钮 --> <!-- 验证码输入 + 获取验证码按钮 -->
<view class="input-item verify-item"> <view class="input-item verify-item">
<view class="input-icon"> <view class="input-icon">
<image src="http://47.104.199.163:9090/images/login/code.png" mode="" style="height: 100%;width: 100%;"></image> <image :src="`${imgBaseUrl}/images/login/code.png`" mode="" style="height: 100%; width: 100%"></image>
<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> --> <!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
</view> </view>
<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" trim="all" <uni-easyinput
placeholder="请输入验证码" :inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle"> class="input-content verify-input"
</uni-easyinput> type="number"
<button v-model="verifyCode"
class="get-verify-btn" trim="all"
:disabled="!canGetVerify || countDown > 0" placeholder="请输入验证码"
@click="getVerifyCode" :inputBorder="false"
> maxlength="6"
{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }} :placeholderStyle="placeholderStyle"
</button> ></uni-easyinput>
<button class="get-verify-btn" :disabled="!canGetVerify || countDown > 0" @click="getVerifyCode">
{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
</button>
</view> </view>
<!-- 下一步 --> <!-- 下一步 -->
<button <button class="forget-btn" :disabled="!canRegister" @click="handleNext">下一步</button>
class="forget-btn"
:disabled="!canRegister"
@click="handleNext"
>
下一步
</button>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, computed, onUnmounted } from 'vue'; import { ref, computed, onUnmounted } from 'vue';
import {getSendCode} from '../api/api.js' import { getSendCode } from '../api/api.js';
import { showApiError } from '../api/request.js' import { showApiError, imgBaseUrl } from '../api/request.js';
// ====响应式数据====== // ====响应式数据======
const phoneNumber = ref('') const phoneNumber = ref('');
const verifyCode = ref('') const verifyCode = ref('');
const countDown = ref(0) const countDown = ref(0);
let timer = null; let timer = null;
const placeholderStyle = ref('font-size:24rpx') const placeholderStyle = ref('font-size:24rpx');
// ========== 计算属性 ========== // ========== 计算属性 ==========
// 是否可获取验证码（手机号格式正确） // 是否可获取验证码（手机号格式正确）
const canGetVerify = computed(() => { const canGetVerify = computed(() => {
const phoneReg = /^1[3-9]\d{9}$/; const phoneReg = /^1[3-9]\d{9}$/;
return phoneReg.test(phoneNumber.value); return phoneReg.test(phoneNumber.value);
}); });
// 获取验证码 // 获取验证码
const getVerifyCode = () => { const getVerifyCode = () => {
if (!canGetVerify.value) return; if (!canGetVerify.value) return;
let params = { let params = {
phone:phoneNumber.value, phone: phoneNumber.value,
scene:'reset' scene: 'reset'
} };
getSendCode(params).then(res =>{ getSendCode(params)
if(res.code === 200){ .then((res) => {
uni.showToast({ if (res.code === 200) {
title: '验证码已发送', uni.showToast({
icon: 'success' title: '验证码已发送',
}); icon: 'success'
// 开始60秒倒计时 });
countDown.value = 60; // 开始60秒倒计时
timer = setInterval(() => { countDown.value = 60;
countDown.value--; timer = setInterval(() => {
if (countDown.value <= 0) { countDown.value--;
clearInterval(timer); if (countDown.value <= 0) {
timer = null; clearInterval(timer);
} timer = null;
}, 1000); }
}, 1000);
// }else{
// uni.showToast({
// title: '验证码发送失败',
// icon: 'error'
// });
}
}).catch(err =>{
showApiError(err)
})
// }else{
// uni.showToast({
// title: '验证码发送失败',
// icon: 'error'
// });
}
})
.catch((err) => {
showApiError(err);
});
}; };
// 是否下一步 // 是否下一步
const canRegister = computed(() => { const canRegister = computed(() => {
const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位 const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位
const verifyReg = /^\d{6}$/; // 验证码6位 const verifyReg = /^\d{6}$/; // 验证码6位
return phoneReg.test(phoneNumber.value) return phoneReg.test(phoneNumber.value) && verifyReg.test(verifyCode.value);
&& verifyReg.test(verifyCode.value)
}); });
// 下一步 // 下一步
const handleNext = () =>{ const handleNext = () => {
// 把参数存到本地缓存 // 把参数存到本地缓存
uni.setStorageSync('tempChangePwdParams', { uni.setStorageSync('tempChangePwdParams', {
phoneNumber:phoneNumber.value, phoneNumber: phoneNumber.value,
verifyCode: verifyCode.value verifyCode: verifyCode.value
});
if(!canRegister.value){
uni.showToast({ title: '请输入',icon: 'error'});
return
}
uni.navigateTo({
url: '/pageSubPack/loginSub/change-pwd'
}); });
} if (!canRegister.value) {
uni.showToast({ title: '请输入', icon: 'error' });
return;
}
uni.navigateTo({
url: '/pageSubPack/loginSub/change-pwd'
});
};
// 返回上一页 // 返回上一页
const goBack = () => { const goBack = () => {
uni.navigateBack(); uni.navigateBack();
}; };
</script> </script>
<style scoped> <style scoped>
.forget-page{ .forget-page {
padding: 20rpx 40rpx 40rpx; padding: 20rpx 40rpx 40rpx;
min-height: 100vh; min-height: 100vh;
background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF ); background: repeating-linear-gradient(180deg, #e2f0ff, #f6faff);
} }
.status_bar{ .status_bar {
width: 100%; width: 100%;
height: 46px; height: 46px;
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
.nav-bar { .nav-bar {
display: flex; display: flex;
align-items: center; align-items: center;
/* height: 88rpx; */ /* height: 88rpx; */
margin-bottom: 70rpx; margin-bottom: 70rpx;
} }
.nav-title { .nav-title {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 36rpx; font-size: 36rpx;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
margin-right: 100rpx; margin-right: 100rpx;
} }
/* 输入框通用样式 */ /* 输入框通用样式 */
.input-item { .input-item {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
border-radius: 40rpx; border-radius: 40rpx;
padding: 0 30rpx; padding: 0 30rpx;
height: 88rpx; height: 88rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
} }
/* 验证码输入项特殊布局 */ /* 验证码输入项特殊布局 */
.verify-item { .verify-item {
position: relative; position: relative;
padding-right: 220rpx; padding-right: 220rpx;
} }
/* 输入框图标 */ /* 输入框图标 */
.input-icon { .input-icon {
margin-right: 20rpx; margin-right: 20rpx;
color: #999; color: #999;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
} }
/* 输入框内容 */ /* 输入框内容 */
.input-content { .input-content {
flex: 1; flex: 1;
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
height: 100%; height: 100%;
} }
/* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */ /* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */
.input-content :deep(.uni-easyinput__content) { .input-content :deep(.uni-easyinput__content) {
height: 100% !important; height: 100% !important;
min-height: unset !important; min-height: unset !important;
padding: 0 !important; padding: 0 !important;
background-color: transparent !important; background-color: transparent !important;
} }
.input-content :deep(.uni-easyinput__content-input) { .input-content :deep(.uni-easyinput__content-input) {
height: 100% !important; height: 100% !important;
min-height: unset !important; min-height: unset !important;
padding: 0 !important; padding: 0 !important;
line-height: 88rpx; line-height: 88rpx;
} }
.verify-input { .verify-input {
padding-right: 20rpx; padding-right: 20rpx;
} }
/* 获取验证码按钮 */ /* 获取验证码按钮 */
.get-verify-btn { .get-verify-btn {
position: absolute; position: absolute;
right: 10rpx; right: 10rpx;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 200rpx; width: 200rpx;
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
border-radius: 35rpx; border-radius: 35rpx;
font-size: 28rpx; font-size: 28rpx;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.get-verify-btn:disabled { .get-verify-btn:disabled {
background-color: #ccc; background-color: #ccc;
color: #fff; color: #fff;
} }
.get-verify-btn::after{ .get-verify-btn::after {
border-radius: 50px; border-radius: 50px;
} }
/* 下一步按钮 */ /* 下一步按钮 */
.forget-btn{ .forget-btn {
width: 100%; width: 100%;
height: 88rpx; height: 88rpx;
line-height: 88rpx; line-height: 88rpx;
@@ -240,14 +241,12 @@ const goBack = () => {
margin-bottom: 40rpx; margin-bottom: 40rpx;
margin-top: 66rpx; margin-top: 66rpx;
} }
.forget-btn:disabled{ .forget-btn:disabled {
background-color: #99c8ff; background-color: #99c8ff;
color: #fff; color: #fff;
} }
/* 禁用按钮边框 */ /* 禁用按钮边框 */
.forget-btn:after{ .forget-btn:after {
border-radius: 8px; border-radius: 8px;
} }
</style> </style>

520
huakai-app/pageSubPack/loginSub/login.vue
View File

@@ -1,91 +1,87 @@
<template> <template>
<view class="login-page"> <view class="login-page">
<view class="status_bar"></view> <view class="status_bar"></view>
<!-- 自定义导航栏：返回按钮 — 用户可拒绝登录 --> <!-- 自定义导航栏：返回按钮 — 用户可拒绝登录 -->
<view class="custom-nav"> <view class="custom-nav">
<view class="back-btn" @click="handleCancel"> <view class="back-btn" @click="handleCancel">
<uni-icons type="arrow-left" size="24" color="#333"></uni-icons> <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
<text class="back-text">返回</text> <text class="back-text">返回</text>
</view> </view>
</view>
<!-- 登录标题 -->
<view class="login-title">手机验证码登录</view>
<!-- 手机号输入框 -->
<view class="input-item">
<view class="input-icon">
<!-- <uni-icons type="phone" size="24" color="#999"></uni-icons> -->
<image src="https://wuyeadmin.bugtc.com/images/login/phone.png" mode="" style="height: 100%;width: 100%;"></image>
</view>
<uni-easyinput class="input-content" type="number" v-model="phoneNumber"
placeholder="请输入手机号" :inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle">
</uni-easyinput>
</view>
<!-- 验证码输入框 + 获取验证码按钮 -->
<view class="input-item verify-item">
<view class="input-icon">
<image src="https://wuyeadmin.bugtc.com/images/login/code.png" mode="" style="height: 100%;width: 100%;"></image>
</view>
<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode"
placeholder="请输入验证码" :inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle">
</uni-easyinput>
<button
class="get-verify-btn"
:disabled="!canGetVerify || countDown > 0"
@click="getVerifyCode"
>
{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
</button>
</view>
<!-- 协议勾选 -->
<view class="agreement-item" >
<view @click="toggleAgreement">
<uni-icons
type="checkbox-filled"
size="24"
color="#007aff"
v-if="agreeAgreement"
></uni-icons>
<uni-icons
type="checkbox"
size="24"
color="#999"
v-else
></uni-icons>
</view> </view>
<text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意<text class="agreePrivacy" @click.stop="goToPrivacy">《用户隐私政策》</text></text> <!-- 登录标题 -->
</view> <view class="login-title">手机验证码登录</view>
<!-- 登录按钮 --> <!-- 手机号输入框 -->
<button <view class="input-item">
class="login-btn" <view class="input-icon">
@click="handleLogin" <!-- <uni-icons type="phone" size="24" color="#999"></uni-icons> -->
> <image :src="`${imgBaseUrl}/images/login/phone.png`" mode="" style="height: 100%; width: 100%"></image>
登录 </view>
</button> <uni-easyinput
class="input-content"
type="number"
v-model="phoneNumber"
placeholder="请输入手机号"
:inputBorder="false"
maxlength="11"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
</view>
<!-- 底部链接 --> <!-- 验证码输入框 + 获取验证码按钮 -->
<view class="bottom-link"> <view class="input-item verify-item">
<navigator class="link-item" url="/pageSubPack/loginSub/pwd-login">账号密码登录</navigator> <view class="input-icon">
<navigator class="link-item" url="/pageSubPack/loginSub/register-new-user">注册新用户</navigator> <image :src="`${imgBaseUrl}/images/login/code.png`" mode="" style="height: 100%; width: 100%"></image>
</view> </view>
</view> <uni-easyinput
class="input-content verify-input"
type="number"
v-model="verifyCode"
placeholder="请输入验证码"
:inputBorder="false"
maxlength="6"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
<button class="get-verify-btn" :disabled="!canGetVerify || countDown > 0" @click="getVerifyCode">
{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
</button>
</view>
<!-- 协议勾选 -->
<view class="agreement-item">
<view @click="toggleAgreement">
<uni-icons type="checkbox-filled" size="24" color="#007aff" v-if="agreeAgreement"></uni-icons>
<uni-icons type="checkbox" size="24" color="#999" v-else></uni-icons>
</view>
<text class="agreement-text" @click.stop="goToPrivacy">
我已阅读并同意
<text class="agreePrivacy" @click.stop="goToPrivacy">《用户隐私政策》</text>
</text>
</view>
<!-- 登录按钮 -->
<button class="login-btn" @click="handleLogin">登录</button>
<!-- 底部链接 -->
<view class="bottom-link">
<navigator class="link-item" url="/pageSubPack/loginSub/pwd-login">账号密码登录</navigator>
<navigator class="link-item" url="/pageSubPack/loginSub/register-new-user">注册新用户</navigator>
</view>
</view>
</template> </template>
<script setup> <script setup>
import { ref, computed, onUnmounted } from 'vue'; import { ref, computed, onUnmounted } from 'vue';
import {getLoginBySms,getSendCode} from '../api/api.js' import { getLoginBySms, getSendCode } from '../api/api.js';
import { showApiError } from '../api/request.js' import { showApiError, imgBaseUrl } from '../api/request.js';
import { saveLoginData } from '../api/auth.js' import { saveLoginData } from '../api/auth.js';
// ========== 响应式数据 ========== // ========== 响应式数据 ==========
// 手机号 // 手机号
const phoneNumber = ref(''); const phoneNumber = ref('');
// 验证码 // 验证码
const verifyCode = ref(''); const verifyCode = ref('');
const placeholderStyle = ref('font-size:24rpx') const placeholderStyle = ref('font-size:24rpx');
// 是否同意协议 // 是否同意协议
const agreeAgreement = ref(false); // 默认不勾选 const agreeAgreement = ref(false); // 默认不勾选
// 倒计时（秒） // 倒计时（秒）
@@ -96,308 +92,310 @@ let timer = null;
// ========== 计算属性 ========== // ========== 计算属性 ==========
// 是否可以获取验证码（手机号格式正确） // 是否可以获取验证码（手机号格式正确）
const canGetVerify = computed(() => { const canGetVerify = computed(() => {
// 手机号正则：11位数字，以1开头 // 手机号正则：11位数字，以1开头
const phoneReg = /^1[3-9]\d{9}$/; const phoneReg = /^1[3-9]\d{9}$/;
return phoneReg.test(phoneNumber.value); return phoneReg.test(phoneNumber.value);
}); });
// 是否可以登录（手机号+验证码+协议都满足） // 是否可以登录（手机号+验证码+协议都满足）
const canLogin = computed(() => { const canLogin = computed(() => {
const phoneReg = /^1[3-9]\d{9}$/; const phoneReg = /^1[3-9]\d{9}$/;
const verifyReg = /^\d{6}$/; const verifyReg = /^\d{6}$/;
return phoneReg.test(phoneNumber.value) && verifyReg.test(verifyCode.value) && agreeAgreement.value; return phoneReg.test(phoneNumber.value) && verifyReg.test(verifyCode.value) && agreeAgreement.value;
}); });
// ========== 方法 ========== // ========== 方法 ==========
// 用户取消登录 — 返回上一页 // 用户取消登录 — 返回上一页
const handleCancel = () => { const handleCancel = () => {
const pages = getCurrentPages(); const pages = getCurrentPages();
if (pages.length > 1) { if (pages.length > 1) {
uni.navigateBack(); uni.navigateBack();
} else { } else {
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' }); uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
} }
}; };
// 检查表单状态 // 检查表单状态
const checkForm = () => { const checkForm = () => {
// 无需额外逻辑，计算属性已实时监听 // 无需额外逻辑，计算属性已实时监听
}; };
// 切换协议勾选状态 // 切换协议勾选状态
const toggleAgreement = () => { const toggleAgreement = () => {
agreeAgreement.value = !agreeAgreement.value; agreeAgreement.value = !agreeAgreement.value;
}; };
// 跳转隐私协议 // 跳转隐私协议
const goToPrivacy = () => { const goToPrivacy = () => {
uni.navigateTo({ uni.navigateTo({
url:'/pageSubPack/loginSub/privacy', url: '/pageSubPack/loginSub/privacy'
}) });
} };
// 获取验证码 // 获取验证码
const getVerifyCode = () => { const getVerifyCode = () => {
if (!canGetVerify.value) return; if (!canGetVerify.value) return;
let params = { let params = {
phone:phoneNumber.value, phone: phoneNumber.value,
scene:'login' scene: 'login'
} };
uni.showLoading({ title: '发送中...', mask: true }); uni.showLoading({ title: '发送中...', mask: true });
getSendCode(params).then(res =>{ getSendCode(params)
if(res.code === 200){ .then((res) => {
uni.hideLoading(); if (res.code === 200) {
uni.showToast({ uni.hideLoading();
title: '验证码已发送', uni.showToast({
icon: 'success' title: '验证码已发送',
}); icon: 'success'
// 开始60秒倒计时 });
countDown.value = 60; // 开始60秒倒计时
timer = setInterval(() => { countDown.value = 60;
countDown.value--; timer = setInterval(() => {
if (countDown.value <= 0) { countDown.value--;
clearInterval(timer); if (countDown.value <= 0) {
timer = null; clearInterval(timer);
} timer = null;
}, 1000); }
} }, 1000);
}).catch(err => { }
showApiError(err) })
}) .catch((err) => {
showApiError(err);
});
}; };
// 登录处理 // 登录处理
const handleLogin = () => { const handleLogin = () => {
if (!phoneNumber.value) { if (!phoneNumber.value) {
uni.showToast({ title: '请输入手机号', icon: 'none' }); uni.showToast({ title: '请输入手机号', icon: 'none' });
return; return;
} }
if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) { if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' }); uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
return; return;
} }
if (!verifyCode.value) { if (!verifyCode.value) {
uni.showToast({ title: '请输入验证码', icon: 'none' }); uni.showToast({ title: '请输入验证码', icon: 'none' });
return; return;
} }
if (!/^\d{6}$/.test(verifyCode.value)) { if (!/^\d{6}$/.test(verifyCode.value)) {
uni.showToast({ title: '验证码为 6 位数字', icon: 'none' }); uni.showToast({ title: '验证码为 6 位数字', icon: 'none' });
return; return;
} }
if (!agreeAgreement.value) { if (!agreeAgreement.value) {
uni.showToast({ title: '请勾选协议', icon: 'none' }); uni.showToast({ title: '请勾选协议', icon: 'none' });
return; return;
} }
uni.showLoading({ title: '登录中...', mask: true }); uni.showLoading({ title: '登录中...', mask: true });
let params = { let params = {
phone:phoneNumber.value, phone: phoneNumber.value,
smsCode:verifyCode.value, smsCode: verifyCode.value,
scene:'login', scene: 'login'
} };
getLoginBySms(params).then(res =>{ getLoginBySms(params)
if(res.code === 200){ .then((res) => {
if(res.data){ if (res.code === 200) {
saveLoginData(res.data); if (res.data) {
uni.hideLoading(); saveLoginData(res.data);
uni.showToast({ title: '登录成功', icon: 'success' }); uni.hideLoading();
setTimeout(() =>{ uni.showToast({ title: '登录成功', icon: 'success' });
// 登录成功后返回来源页 setTimeout(() => {
uni.navigateBack({ // 登录成功后返回来源页
fail: () => { uni.navigateBack({
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' }); fail: () => {
} uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
}); }
},1500) });
} }, 1500);
} }
}
})
.catch((err) => {
showApiError(err);
});
}).catch(err => { uni.hideLoading();
showApiError(err)
})
uni.hideLoading()
}; };
// ========== 生命周期 ========== // ========== 生命周期 ==========
// 页面卸载时清除定时器 // 页面卸载时清除定时器
onUnmounted(() => { onUnmounted(() => {
if (timer) { if (timer) {
clearInterval(timer); clearInterval(timer);
} }
}); });
</script> </script>
<style scoped> <style scoped>
/* 页面容器 */ /* 页面容器 */
.login-page { .login-page {
padding: 80rpx 40rpx 40rpx; padding: 80rpx 40rpx 40rpx;
/* background-color: #f8f9fa; */ /* background-color: #f8f9fa; */
min-height: 100vh; min-height: 100vh;
background: repeating-linear-gradient(to bottom, #E2F0FF, #F6FAFF ); background: repeating-linear-gradient(to bottom, #e2f0ff, #f6faff);
}
.status_bar {
height: var(--status-bar-height, 88rpx);
width: 100%;
} }
.status_bar {
height: var(--status-bar-height, 88rpx);
width: 100%;
}
/* ===== 自定义导航：返回/取消按钮 ===== */ /* ===== 自定义导航：返回/取消按钮 ===== */
.custom-nav { .custom-nav {
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.back-btn { .back-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
background: rgba(255,255,255,0.9); background: rgba(255, 255, 255, 0.9);
border-radius: 30rpx; border-radius: 30rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
} }
.back-text { .back-text {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
margin-left: 6rpx; margin-left: 6rpx;
} }
/* 登录标题 */ /* 登录标题 */
.login-title { .login-title {
font-size: 52rpx; font-size: 52rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
text-align: center; text-align: center;
margin-bottom: 80rpx; margin-bottom: 80rpx;
} }
/* 输入框项 */ /* 输入框项 */
.input-item { .input-item {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
border-radius: 40rpx; border-radius: 40rpx;
padding: 0 30rpx; padding: 0 30rpx;
height: 88rpx; height: 88rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
} }
/* 验证码输入项（特殊布局） */ /* 验证码输入项（特殊布局） */
.verify-item { .verify-item {
position: relative; position: relative;
padding-right: 220rpx; padding-right: 220rpx;
} }
/* 输入框图标 */ /* 输入框图标 */
.input-icon { .input-icon {
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
margin-right: 20rpx; margin-right: 20rpx;
color: #999; color: #999;
} }
/* 输入框内容 */ /* 输入框内容 */
.input-content { .input-content {
flex: 1; flex: 1;
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
height: 100%; height: 100%;
} }
/* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */ /* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */
.input-content :deep(.uni-easyinput__content) { .input-content :deep(.uni-easyinput__content) {
height: 100% !important; height: 100% !important;
min-height: unset !important; min-height: unset !important;
padding: 0 !important; padding: 0 !important;
background-color: transparent !important; background-color: transparent !important;
} }
.input-content :deep(.uni-easyinput__content-input) { .input-content :deep(.uni-easyinput__content-input) {
height: 100% !important; height: 100% !important;
min-height: unset !important; min-height: unset !important;
padding: 0 !important; padding: 0 !important;
line-height: 88rpx; line-height: 88rpx;
} }
/* 验证码输入框 */ /* 验证码输入框 */
.verify-input { .verify-input {
padding-right: 20rpx; padding-right: 20rpx;
} }
/* 获取验证码按钮 */ /* 获取验证码按钮 */
.get-verify-btn { .get-verify-btn {
position: absolute; position: absolute;
right: 10rpx; right: 10rpx;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 200rpx; width: 200rpx;
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
border-radius: 35rpx; border-radius: 35rpx;
font-size: 28rpx; font-size: 28rpx;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
/* 获取验证码按钮禁用状态 */ /* 获取验证码按钮禁用状态 */
.get-verify-btn:disabled { .get-verify-btn:disabled {
background-color: #ccc; background-color: #ccc;
color: #fff; color: #fff;
border-radius: 50px; border-radius: 50px;
} }
.get-verify-btn::after{ .get-verify-btn::after {
border-radius: 50px; border-radius: 50px;
} }
/* 协议勾选项 */ /* 协议勾选项 */
.agreement-item { .agreement-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 70rpx 0 28rpx 0; margin: 70rpx 0 28rpx 0;
padding-left: 10rpx; padding-left: 10rpx;
} }
/* 协议文本 */ /* 协议文本 */
.agreement-text { .agreement-text {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
margin-left: 10rpx; margin-left: 10rpx;
} }
.agreePrivacy{ .agreePrivacy {
color: #2F77FD; color: #2f77fd;
} }
/* 登录按钮 */ /* 登录按钮 */
.login-btn { .login-btn {
width: 100%; width: 100%;
height: 88rpx; height: 88rpx;
line-height: 88rpx; line-height: 88rpx;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
border-radius: 8rpx; border-radius: 8rpx;
font-size: 28rpx; font-size: 28rpx;
margin-bottom: 60rpx; margin-bottom: 60rpx;
} }
/* 登录按钮禁用状态 */ /* 登录按钮禁用状态 */
.login-btn:disabled { .login-btn:disabled {
background-color: #99c8ff; background-color: #99c8ff;
color: #fff; color: #fff;
} }
/* 禁用按钮边框 */ /* 禁用按钮边框 */
button:after{ button:after {
border-radius: 8px; border-radius: 8px;
} }
/* 底部链接 */ /* 底部链接 */
.bottom-link { .bottom-link {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 20rpx; padding: 0 20rpx;
} }
/* 链接项 */ /* 链接项 */
.link-item { .link-item {
font-size: 28rpx; font-size: 28rpx;
color: #007aff; color: #007aff;
text-decoration: none; text-decoration: none;
} }
</style> </style>

412
huakai-app/pageSubPack/loginSub/pwd-login.vue
View File

@@ -1,320 +1,310 @@
<template> <template>
<view class="login-page"> <view class="login-page">
<view class="status_bar"></view> <view class="status_bar"></view>
<!-- 自定义导航栏：返回按钮 — 用户可拒绝登录 --> <!-- 自定义导航栏：返回按钮 — 用户可拒绝登录 -->
<view class="custom-nav"> <view class="custom-nav">
<view class="back-btn" @click="handleCancel"> <view class="back-btn" @click="handleCancel">
<uni-icons type="arrow-left" size="24" color="#333"></uni-icons> <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
<text class="back-text">返回</text> <text class="back-text">返回</text>
</view> </view>
</view> </view>
<!-- 标题 --> <!-- 标题 -->
<view class="login-title">账号密码登录</view> <view class="login-title">账号密码登录</view>
<!-- 手机号输入框 --> <!-- 手机号输入框 -->
<view class="input-item"> <view class="input-item">
<view class="input-icon"> <view class="input-icon">
<!-- <uni-icons type="phone" size="24" color="#999"></uni-icons> --> <!-- <uni-icons type="phone" size="24" color="#999"></uni-icons> -->
<image src="https://wuyeadmin.bugtc.com/images/login/phone.png" mode="" style="height: 100%;width: 100%;"></image> <image :src="`${imgBaseUrl}/images/login/phone.png`" mode="" style="height: 100%; width: 100%"></image>
</view> </view>
<uni-easyinput class="input-content" type="text" v-model="phoneNumber" <uni-easyinput
placeholder="请输入帐号" :inputBorder="false" :placeholderStyle="placeholderStyle"> class="input-content"
</uni-easyinput> type="text"
</view> v-model="phoneNumber"
placeholder="请输入帐号"
:inputBorder="false"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
</view>
<!-- 密码输入框 --> <!-- 密码输入框 -->
<view class="input-item"> <view class="input-item">
<view class="input-icon"> <view class="input-icon">
<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> --> <!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
<image src="https://wuyeadmin.bugtc.com/images/login/password.png" mode="" style="height: 100%;width: 100%;"></image> <image :src="`${imgBaseUrl}/images/login/password.png`" mode="" style="height: 100%; width: 100%"></image>
</view> </view>
<uni-easyinput class="input-content" type="password" v-model="password" <uni-easyinput
placeholder="请输入密码" :inputBorder="false" :placeholderStyle="placeholderStyle"> class="input-content"
</uni-easyinput> type="password"
v-model="password"
placeholder="请输入密码"
:inputBorder="false"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
</view>
</view> <!-- 协议勾选 + 忘记密码 -->
<view class="agreement-wrap">
<view class="agreement-item">
<view @click="toggleAgreement">
<uni-icons type="checkbox-filled" size="24" color="#007aff" v-if="agreeAgreement"></uni-icons>
<uni-icons type="checkbox" size="24" color="#999" v-else></uni-icons>
</view>
<!-- 协议勾选 + 忘记密码 --> <text class="agreement-text" @click.stop="goToPrivacy">
<view class="agreement-wrap"> 我已阅读并同意
<view class="agreement-item"> <text class="agreePrivacy" @click.stop="goToPrivacy">《用户隐私政策》</text>
<view @click="toggleAgreement"> </text>
<uni-icons </view>
type="checkbox-filled" <navigator class="forget-pwd" url="/pageSubPack/loginSub/forget-pwd">忘记密码？</navigator>
size="24" </view>
color="#007aff"
v-if="agreeAgreement"
></uni-icons>
<uni-icons
type="checkbox"
size="24"
color="#999"
v-else
></uni-icons>
</view>
<text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意 <!-- 登录按钮 -->
<text class="agreePrivacy" @click.stop="goToPrivacy">《用户隐私政策》</text> <button class="login-btn" @click="handleLogin">登录</button>
</text>
</view>
<navigator class="forget-pwd" url="/pageSubPack/loginSub/forget-pwd">忘记密码？</navigator>
</view>
<!-- 登录按钮 --> <!-- 底部链接 -->
<button <view class="bottom-link">
class="login-btn" <navigator class="link-item" url="/pageSubPack/loginSub/login">验证码登录</navigator>
@click="handleLogin" <navigator class="link-item" url="/pageSubPack/loginSub/register-new-user">注册新用户</navigator>
> </view>
登录 </view>
</button>
<!-- 底部链接 -->
<view class="bottom-link">
<navigator class="link-item" url="/pageSubPack/loginSub/login">验证码登录</navigator>
<navigator class="link-item" url="/pageSubPack/loginSub/register-new-user">注册新用户</navigator>
</view>
</view>
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import {onLoad} from "@dcloudio/uni-app" import { onLoad } from '@dcloudio/uni-app';
import {getLoginPassword} from '../api/api.js' import { getLoginPassword } from '../api/api.js';
import { showApiError } from '../api/request.js' import { showApiError, imgBaseUrl } from '../api/request.js';
import { saveLoginData } from '../api/auth.js' import { saveLoginData } from '../api/auth.js';
// 响应式数据 // 响应式数据
const phoneNumber = ref(''); const phoneNumber = ref('');
const password = ref(''); const password = ref('');
const agreeAgreement = ref(false); // 默认勾选 const agreeAgreement = ref(false); // 默认勾选
const placeholderStyle = ref('font-size:24rpx') const placeholderStyle = ref('font-size:24rpx');
// 计算属性：是否可登录（帐号+密码+协议都满足） // 计算属性：是否可登录（帐号+密码+协议都满足）
const canLogin = computed(() => { const canLogin = computed(() => {
const phoneReg = /^[a-zA-Z0-9_-]{4,16}$/; // 4-16位 const phoneReg = /^[a-zA-Z0-9_-]{4,16}$/; // 4-16位
const pwdReg = /^.{6,16}$/; // 密码6-16位 const pwdReg = /^.{6,16}$/; // 密码6-16位
return phoneReg.test(phoneNumber.value) && pwdReg.test(password.value) && agreeAgreement.value; return phoneReg.test(phoneNumber.value) && pwdReg.test(password.value) && agreeAgreement.value;
}); });
// 切换协议勾选 // 切换协议勾选
const toggleAgreement = () => { const toggleAgreement = () => {
agreeAgreement.value = !agreeAgreement.value; agreeAgreement.value = !agreeAgreement.value;
}; };
// 跳转隐私协议 // 跳转隐私协议
const goToPrivacy = () => { const goToPrivacy = () => {
uni.navigateTo({ uni.navigateTo({
url:'/pageSubPack/loginSub/privacy', url: '/pageSubPack/loginSub/privacy'
}) });
} };
// 检查表单 // 检查表单
const checkForm = () => {}; const checkForm = () => {};
// 用户取消登录 — 返回上一页 // 用户取消登录 — 返回上一页
const handleCancel = () => { const handleCancel = () => {
const pages = getCurrentPages(); const pages = getCurrentPages();
if (pages.length > 1) { if (pages.length > 1) {
uni.navigateBack(); uni.navigateBack();
} else { } else {
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' }); uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
} }
}; };
onLoad(() => {});
onLoad(() =>{
});
// 登录逻辑 // 登录逻辑
const handleLogin = () => { const handleLogin = () => {
if (!phoneNumber.value) {
if (!phoneNumber.value) {
uni.showToast({ title: '请输入账号', icon: 'none' }); uni.showToast({ title: '请输入账号', icon: 'none' });
return; return;
} }
if (phoneNumber.value.length < 4 || phoneNumber.value.length > 16) { if (phoneNumber.value.length < 4 || phoneNumber.value.length > 16) {
uni.showToast({ title: '账号长度需为 4-16 位', icon: 'none' }); uni.showToast({ title: '账号长度需为 4-16 位', icon: 'none' });
return; return;
} }
if (!password.value) { if (!password.value) {
uni.showToast({ title: '请输入密码', icon: 'none' }); uni.showToast({ title: '请输入密码', icon: 'none' });
return; return;
} }
if (password.value.length < 6) { if (password.value.length < 6) {
uni.showToast({ title: '密码至少输入 6 位', icon: 'none' }); uni.showToast({ title: '密码至少输入 6 位', icon: 'none' });
return; return;
} }
if (password.value.length > 16) { if (password.value.length > 16) {
uni.showToast({ title: '密码不能超过 16 位', icon: 'none' }); uni.showToast({ title: '密码不能超过 16 位', icon: 'none' });
return; return;
} }
if(!agreeAgreement.value){ if (!agreeAgreement.value) {
uni.showToast({ title: '请勾选协议', icon: 'none' }); uni.showToast({ title: '请勾选协议', icon: 'none' });
return; return;
} }
uni.showLoading({ title: '登录中...', mask: true }); uni.showLoading({ title: '登录中...', mask: true });
let params = { let params = {
username:phoneNumber.value, username: phoneNumber.value,
password:password.value password: password.value
} };
getLoginPassword(params).then(res =>{ getLoginPassword(params)
if(res.code === 200){ .then((res) => {
saveLoginData(res.data); if (res.code === 200) {
uni.hideLoading(); saveLoginData(res.data);
uni.showToast({ title: '登录成功', icon: 'success' }); uni.hideLoading();
setTimeout(() =>{ uni.showToast({ title: '登录成功', icon: 'success' });
// 登录成功后返回来源页 setTimeout(() => {
uni.navigateBack({ // 登录成功后返回来源页
fail: () => { uni.navigateBack({
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' }); fail: () => {
} uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
}); }
},1000) });
} }, 1000);
}
}).catch(err => { })
// console.log(err) .catch((err) => {
showApiError(err) // console.log(err)
}) showApiError(err);
});
}; };
</script> </script>
<style scoped> <style scoped>
.login-page { .login-page {
padding: 80rpx 40rpx 40rpx; padding: 80rpx 40rpx 40rpx;
/* background-color: #f8f9fa; */ /* background-color: #f8f9fa; */
min-height: 100vh; min-height: 100vh;
background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF ); background: repeating-linear-gradient(180deg, #e2f0ff, #f6faff);
}
.status_bar {
height: var(--status-bar-height, 88rpx);
width: 100%;
} }
.status_bar {
height: var(--status-bar-height, 88rpx);
width: 100%;
}
/* ===== 自定义导航：返回/取消按钮 ===== */ /* ===== 自定义导航：返回/取消按钮 ===== */
.custom-nav { .custom-nav {
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.back-btn { .back-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
background: rgba(255,255,255,0.9); background: rgba(255, 255, 255, 0.9);
border-radius: 30rpx; border-radius: 30rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
} }
.back-text { .back-text {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
margin-left: 6rpx; margin-left: 6rpx;
} }
.login-title { .login-title {
font-size: 52rpx; font-size: 52rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
text-align: center; text-align: center;
margin-bottom: 80rpx; margin-bottom: 80rpx;
} }
.input-item { .input-item {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
border-radius: 40rpx; border-radius: 40rpx;
padding: 0 30rpx; padding: 0 30rpx;
height: 88rpx; height: 88rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
} }
.input-icon { .input-icon {
margin-right: 20rpx; margin-right: 20rpx;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
} }
.input-content { .input-content {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
height: 100%; height: 100%;
} }
/* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */ /* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */
.input-content :deep(.uni-easyinput__content) { .input-content :deep(.uni-easyinput__content) {
height: 100% !important; height: 100% !important;
min-height: unset !important; min-height: unset !important;
padding: 0 !important; padding: 0 !important;
background-color: transparent !important; background-color: transparent !important;
} }
.input-content :deep(.uni-easyinput__content-input) { .input-content :deep(.uni-easyinput__content-input) {
height: 100% !important; height: 100% !important;
min-height: unset !important; min-height: unset !important;
padding: 0 !important; padding: 0 !important;
line-height: 88rpx; line-height: 88rpx;
} }
.agreement-wrap { .agreement-wrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 70rpx 0 28rpx 0; margin: 70rpx 0 28rpx 0;
padding: 0 10rpx; padding: 0 10rpx;
} }
.agreement-item { .agreement-item {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.agreement-text { .agreement-text {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
margin-left: 10rpx; margin-left: 10rpx;
} }
.agreePrivacy{ .agreePrivacy {
color: #2F77FD; color: #2f77fd;
} }
.forget-pwd { .forget-pwd {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
text-decoration: none; text-decoration: none;
} }
.login-btn { .login-btn {
width: 100%; width: 100%;
height: 88rpx; height: 88rpx;
line-height: 88rpx; line-height: 88rpx;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
border-radius: 8rpx; border-radius: 8rpx;
font-size: 28rpx; font-size: 28rpx;
margin-bottom: 60rpx; margin-bottom: 60rpx;
} }
.login-btn:disabled { .login-btn:disabled {
background-color: #99c8ff; background-color: #99c8ff;
color: #fff; color: #fff;
} }
/* 禁用按钮边框 */ /* 禁用按钮边框 */
button:after{ button:after {
border-radius: 8px; border-radius: 8px;
} }
.bottom-link { .bottom-link {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 20rpx; padding: 0 20rpx;
} }
.link-item { .link-item {
font-size: 28rpx; font-size: 28rpx;
color: #007aff; color: #007aff;
text-decoration: none; text-decoration: none;
} }
</style> </style>

640
huakai-app/pageSubPack/loginSub/register-new-user.vue
View File

@@ -13,24 +13,34 @@
<!-- 手机号输入框 --> <!-- 手机号输入框 -->
<view class="input-item"> <view class="input-item">
<view class="input-icon"> <view class="input-icon">
<image src="https://wuyeadmin.bugtc.com/images/login/phone.png" mode="" <image :src="`${imgBaseUrl}/images/login/phone.png`" mode="" style="height: 100%; width: 100%"></image>
style="height: 100%;width: 100%;"></image>
</view> </view>
<uni-easyinput class="input-content" type="number" v-model="phoneNumber" placeholder="请输入手机号" <uni-easyinput
:inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle"> class="input-content"
</uni-easyinput> type="number"
v-model="phoneNumber"
placeholder="请输入手机号"
:inputBorder="false"
maxlength="11"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
</view> </view>
<!-- 验证码输入 + 获取验证码按钮 --> <!-- 验证码输入 + 获取验证码按钮 -->
<view class="input-item verify-item"> <view class="input-item verify-item">
<view class="input-icon"> <view class="input-icon">
<image src="https://wuyeadmin.bugtc.com/images/login/code.png" mode="" style="height: 100%;width: 100%;"> <image :src="`${imgBaseUrl}/images/login/code.png`" mode="" style="height: 100%; width: 100%"></image>
</image>
<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> --> <!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
</view> </view>
<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" placeholder="请输入验证码" <uni-easyinput
:inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle"> class="input-content verify-input"
</uni-easyinput> type="number"
v-model="verifyCode"
placeholder="请输入验证码"
:inputBorder="false"
maxlength="6"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
<button class="get-verify-btn" :disabled="!canGetVerify || countDown > 0" @click="getVerifyCode"> <button class="get-verify-btn" :disabled="!canGetVerify || countDown > 0" @click="getVerifyCode">
{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }} {{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
@@ -40,27 +50,26 @@
<!-- 账号输入框 --> <!-- 账号输入框 -->
<view class="input-item"> <view class="input-item">
<view class="input-icon"> <view class="input-icon">
<image src="https://wuyeadmin.bugtc.com/images/login/account.png" mode="" <image :src="`${imgBaseUrl}/images/login/account.png`" mode="" style="height: 100%; width: 100%"></image>
style="height: 100%;width: 100%;"></image>
<!-- <uni-icons type="person" size="24" color="#999"></uni-icons> --> <!-- <uni-icons type="person" size="24" color="#999"></uni-icons> -->
</view> </view>
<uni-easyinput class="input-content" type="text" v-model="account" placeholder="请输入账号" :inputBorder="false" <uni-easyinput class="input-content" type="text" v-model="account" placeholder="请输入账号" :inputBorder="false" :placeholderStyle="placeholderStyle"></uni-easyinput>
:placeholderStyle="placeholderStyle">
</uni-easyinput>
</view> </view>
<!-- 密码输入框 --> <!-- 密码输入框 -->
<view class="input-item"> <view class="input-item">
<view class="input-icon"> <view class="input-icon">
<image src="https://wuyeadmin.bugtc.com/images/login/password.png" mode="" <image :src="`${imgBaseUrl}/images/login/password.png`" mode="" style="height: 100%; width: 100%"></image>
style="height: 100%;width: 100%;"></image>
<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> --> <!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
</view> </view>
<uni-easyinput class="input-content" type="password" v-model="password" placeholder="请输入密码" <uni-easyinput
:inputBorder="false" :placeholderStyle="placeholderStyle"> class="input-content"
</uni-easyinput> type="password"
v-model="password"
placeholder="请输入密码"
:inputBorder="false"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
</view> </view>
<!-- 协议勾选 --> <!-- 协议勾选 -->
<view class="agreement-item"> <view class="agreement-item">
@@ -68,15 +77,14 @@
<uni-icons type="checkbox-filled" size="24" color="#007aff" v-if="agreeAgreement"></uni-icons> <uni-icons type="checkbox-filled" size="24" color="#007aff" v-if="agreeAgreement"></uni-icons>
<uni-icons type="checkbox" size="24" color="#999" v-else></uni-icons> <uni-icons type="checkbox" size="24" color="#999" v-else></uni-icons>
</view> </view>
<text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意<text <text class="agreement-text" @click.stop="goToPrivacy">
class="agreePrivacy">《用户隐私政策》</text></text> 我已阅读并同意
<text class="agreePrivacy">《用户隐私政策》</text>
</text>
</view> </view>
<!-- 立即注册按钮 --> <!-- 立即注册按钮 -->
<button class="register-btn" @click="handleRegister"> <button class="register-btn" @click="handleRegister">立即注册</button>
立即注册
</button>
<!-- 跳转登录链接 --> <!-- 跳转登录链接 -->
<view class="login-link"> <view class="login-link">
@@ -86,79 +94,68 @@
</template> </template>
<script setup> <script setup>
import { import { ref, computed, onUnmounted } from 'vue';
ref, import { getRegisterUser, getSendCode } from '../api/api.js';
computed,
onUnmounted
} from 'vue';
import {
getRegisterUser,
getSendCode
} from '../api/api.js'
// ========== 响应式数据 ========== // ========== 响应式数据 ==========
// 表单数据 // 表单数据
import { showApiError } from '../api/request.js' import { showApiError, imgBaseUrl } from '../api/request.js';
const phoneNumber = ref(''); const phoneNumber = ref('');
const verifyCode = ref(''); const verifyCode = ref('');
const account = ref(''); const account = ref('');
const password = ref(''); const password = ref('');
const placeholderStyle = ref('font-size:24rpx') const placeholderStyle = ref('font-size:24rpx');
// 协议勾选 // 协议勾选
const agreeAgreement = ref(false); const agreeAgreement = ref(false);
// 验证码倒计时 // 验证码倒计时
const countDown = ref(0); const countDown = ref(0);
let timer = null; let timer = null;
// ========== 计算属性 ========== // ========== 计算属性 ==========
// 是否可获取验证码（手机号格式正确） // 是否可获取验证码（手机号格式正确）
const canGetVerify = computed(() => { const canGetVerify = computed(() => {
const phoneReg = /^1[3-9]\d{9}$/; const phoneReg = /^1[3-9]\d{9}$/;
return phoneReg.test(phoneNumber.value); return phoneReg.test(phoneNumber.value);
});
// 是否可注册（所有表单项+协议都满足）
const canRegister = computed(() => {
const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位
const verifyReg = /^\d{6}$/; // 验证码6位
const accountReg = /^.{4,20}$/; // 账号4-20位
const pwdReg = /^.{6,16}$/; // 密码6-16位
return phoneReg.test(phoneNumber.value) && verifyReg.test(verifyCode.value) && accountReg.test(account.value) && pwdReg.test(password.value) && agreeAgreement.value;
});
// ========== 方法 ==========
// 返回上一页
const goBack = () => {
uni.navigateBack();
};
// 切换协议勾选状态
const toggleAgreement = () => {
agreeAgreement.value = !agreeAgreement.value;
};
// 跳转隐私协议
const goToPrivacy = () => {
uni.navigateTo({
url: '/pageSubPack/loginSub/privacy'
}); });
};
// 检查表单状态（实时更新按钮状态）
const checkForm = () => {};
// 是否可注册（所有表单项+协议都满足） // 获取验证码
const canRegister = computed(() => { const getVerifyCode = () => {
const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位 if (!canGetVerify.value) return;
const verifyReg = /^\d{6}$/; // 验证码6位 let params = {
const accountReg = /^.{4,20}$/; // 账号4-20位 phone: phoneNumber.value,
const pwdReg = /^.{6,16}$/; // 密码6-16位 scene: 'register'
return phoneReg.test(phoneNumber.value) &&
verifyReg.test(verifyCode.value) &&
accountReg.test(account.value) &&
pwdReg.test(password.value) &&
agreeAgreement.value;
});
// ========== 方法 ==========
// 返回上一页
const goBack = () => {
uni.navigateBack();
}; };
getSendCode(params)
// 切换协议勾选状态 .then((res) => {
const toggleAgreement = () => {
agreeAgreement.value = !agreeAgreement.value;
};
// 跳转隐私协议
const goToPrivacy = () => {
uni.navigateTo({
url: '/pageSubPack/loginSub/privacy',
})
}
// 检查表单状态（实时更新按钮状态）
const checkForm = () => {};
// 获取验证码
const getVerifyCode = () => {
if (!canGetVerify.value) return;
let params = {
phone: phoneNumber.value,
scene: 'register'
}
getSendCode(params).then(res => {
if (res.code === 200) { if (res.code === 200) {
uni.showToast({ uni.showToast({
title: '验证码已发送', title: '验证码已发送',
@@ -174,72 +171,72 @@ import { showApiError } from '../api/request.js'
} }
}, 1000); }, 1000);
// } else { // } else {
// uni.showToast({ // uni.showToast({
// title: '验证码发送失败', // title: '验证码发送失败',
// icon: 'error' // icon: 'error'
// }); // });
} }
}).catch(err => {
showApiError(err)
}) })
.catch((err) => {
showApiError(err);
};
// 处理注册逻辑
const handleRegister = () => {
if (!phoneNumber.value) {
uni.showToast({ title: '请输入手机号', icon: 'none' });
return;
}
if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
return;
}
if (!verifyCode.value) {
uni.showToast({ title: '请输入验证码', icon: 'none' });
return;
}
if (!/^\d{6}$/.test(verifyCode.value)) {
uni.showToast({ title: '验证码为 6 位数字', icon: 'none' });
return;
}
if (!account.value) {
uni.showToast({ title: '请输入账号', icon: 'none' });
return;
}
if (account.value.length < 4 || account.value.length > 20) {
uni.showToast({ title: '账号长度需为 4-20 位', icon: 'none' });
return;
}
if (!password.value) {
uni.showToast({ title: '请输入密码', icon: 'none' });
return;
}
if (password.value.length < 6) {
uni.showToast({ title: '密码至少输入 6 位', icon: 'none' });
return;
}
if (password.value.length > 16) {
uni.showToast({ title: '密码不能超过 16 位', icon: 'none' });
return;
}
if (!agreeAgreement.value) {
uni.showToast({ title: '请勾选协议', icon: 'none' });
return;
}
uni.showLoading({
title: '注册中...',
mask: true
}); });
let params = { };
phone: phoneNumber.value,
smsCode: verifyCode.value, // 处理注册逻辑
username: account.value, const handleRegister = () => {
password: password.value if (!phoneNumber.value) {
} uni.showToast({ title: '请输入手机号', icon: 'none' });
getRegisterUser(params).then(res => { return;
}
if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
return;
}
if (!verifyCode.value) {
uni.showToast({ title: '请输入验证码', icon: 'none' });
return;
}
if (!/^\d{6}$/.test(verifyCode.value)) {
uni.showToast({ title: '验证码为 6 位数字', icon: 'none' });
return;
}
if (!account.value) {
uni.showToast({ title: '请输入账号', icon: 'none' });
return;
}
if (account.value.length < 4 || account.value.length > 20) {
uni.showToast({ title: '账号长度需为 4-20 位', icon: 'none' });
return;
}
if (!password.value) {
uni.showToast({ title: '请输入密码', icon: 'none' });
return;
}
if (password.value.length < 6) {
uni.showToast({ title: '密码至少输入 6 位', icon: 'none' });
return;
}
if (password.value.length > 16) {
uni.showToast({ title: '密码不能超过 16 位', icon: 'none' });
return;
}
if (!agreeAgreement.value) {
uni.showToast({ title: '请勾选协议', icon: 'none' });
return;
}
uni.showLoading({
title: '注册中...',
mask: true
});
let params = {
phone: phoneNumber.value,
smsCode: verifyCode.value,
username: account.value,
password: password.value
};
getRegisterUser(params)
.then((res) => {
if (res.code === 200) { if (res.code === 200) {
uni.hideLoading(); uni.hideLoading();
uni.showToast({ uni.showToast({
@@ -252,199 +249,200 @@ import { showApiError } from '../api/request.js'
}); });
}, 1500); }, 1500);
// } else { // } else {
// uni.showToast({ // uni.showToast({
// title: '注册失败', // title: '注册失败',
// icon: 'error' // icon: 'error'
// }); // });
} }
}).catch((err) => {
showApiError(err)
}) })
// 注册成功后跳转到登录页 .catch((err) => {
// uni.redirectTo({ showApiError(err);
// url: '/pages/login/pwd-login' });
// }); // 注册成功后跳转到登录页
// uni.redirectTo({
// url: '/pages/login/pwd-login'
// });
// setTimeout(() => { // setTimeout(() => {
// }, 1500); // }, 1500);
}; };
// ========== 生命周期 ========== // ========== 生命周期 ==========
// 页面卸载时清除定时器 // 页面卸载时清除定时器
onUnmounted(() => { onUnmounted(() => {
if (timer) { if (timer) {
clearInterval(timer); clearInterval(timer);
} }
}); });
</script> </script>
<style scoped> <style scoped>
/* 页面容器 */ /* 页面容器 */
.register-page { .register-page {
padding: 20rpx 40rpx 40rpx; padding: 20rpx 40rpx 40rpx;
/* background-color: #f8f9fa; */ /* background-color: #f8f9fa; */
min-height: 100vh; min-height: 100vh;
background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF); background: repeating-linear-gradient(180deg, #e2f0ff, #f6faff);
} }
.status_bar { .status_bar {
height: 46px; height: 46px;
width: 100%; width: 100%;
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
.nav-bar { .nav-bar {
display: flex; display: flex;
align-items: center; align-items: center;
/* height: 88rpx; */ /* height: 88rpx; */
margin-bottom: 70rpx; margin-bottom: 70rpx;
} }
.nav-title { .nav-title {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 36rpx; font-size: 36rpx;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
margin-right: 100rpx; margin-right: 100rpx;
} }
/* 注册标题 */ /* 注册标题 */
.register-title { .register-title {
font-size: 40rpx; font-size: 40rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 60rpx; margin-bottom: 60rpx;
} }
/* 输入框通用样式 */ /* 输入框通用样式 */
.input-item { .input-item {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
border-radius: 40rpx; border-radius: 40rpx;
padding: 0 30rpx; padding: 0 30rpx;
height: 88rpx; height: 88rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
} }
/* 验证码输入项特殊布局 */ /* 验证码输入项特殊布局 */
.verify-item { .verify-item {
position: relative; position: relative;
padding-right: 220rpx; padding-right: 220rpx;
} }
/* 输入框图标 */ /* 输入框图标 */
.input-icon { .input-icon {
margin-right: 20rpx; margin-right: 20rpx;
color: #999; color: #999;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
} }
/* 输入框内容 */ /* 输入框内容 */
.input-content { .input-content {
flex: 1; flex: 1;
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
height: 100%; height: 100%;
} }
/* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */ /* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */
.input-content :deep(.uni-easyinput__content) { .input-content :deep(.uni-easyinput__content) {
height: 100% !important; height: 100% !important;
min-height: unset !important; min-height: unset !important;
padding: 0 !important; padding: 0 !important;
background-color: transparent !important; background-color: transparent !important;
} }
.input-content :deep(.uni-easyinput__content-input) { .input-content :deep(.uni-easyinput__content-input) {
height: 100% !important; height: 100% !important;
min-height: unset !important; min-height: unset !important;
padding: 0 !important; padding: 0 !important;
line-height: 88rpx; line-height: 88rpx;
} }
.verify-input { .verify-input {
padding-right: 20rpx; padding-right: 20rpx;
} }
/* 获取验证码按钮 */ /* 获取验证码按钮 */
.get-verify-btn { .get-verify-btn {
position: absolute; position: absolute;
right: 10rpx; right: 10rpx;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 200rpx; width: 200rpx;
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
border-radius: 35rpx; border-radius: 35rpx;
font-size: 26rpx; font-size: 26rpx;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.get-verify-btn:disabled { .get-verify-btn:disabled {
background-color: #ccc; background-color: #ccc;
color: #fff; color: #fff;
} }
.get-verify-btn::after { .get-verify-btn::after {
border-radius: 50px; border-radius: 50px;
} }
/* 协议勾选项 */ /* 协议勾选项 */
.agreement-item { .agreement-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 70rpx 0 28rpx 0; margin: 70rpx 0 28rpx 0;
padding-left: 10rpx; padding-left: 10rpx;
} }
.agreement-text { .agreement-text {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
margin-left: 10rpx; margin-left: 10rpx;
} }
.agreePrivacy { .agreePrivacy {
color: #2F77FD; color: #2f77fd;
} }
/* 立即注册按钮 */ /* 立即注册按钮 */
.register-btn { .register-btn {
width: 100%; width: 100%;
height: 88rpx; height: 88rpx;
line-height: 88rpx; line-height: 88rpx;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
border-radius: 8rpx; border-radius: 8rpx;
font-size: 28rpx; font-size: 28rpx;
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
button:after { button:after {
border-radius: 8px; border-radius: 8px;
} }
.register-btn:disabled { .register-btn:disabled {
background-color: #99c8ff; background-color: #99c8ff;
color: #fff; color: #fff;
} }
/* 跳转登录链接 */ /* 跳转登录链接 */
.login-link { .login-link {
text-align: center; text-align: center;
} }
.link-item { .link-item {
font-size: 28rpx; font-size: 28rpx;
color: #007aff; color: #007aff;
text-decoration: none; text-decoration: none;
} }
</style> </style>

825
huakai-app/pageSubPack/payment-list/addHydropower.vue
View File

@@ -1,18 +1,17 @@
<template> <template>
<view class="contentStyle" style=""> <view class="contentStyle" style="">
<view class="status-bar"></view> <view class="status-bar"></view>
<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" <uni-nav-bar :title="'新增' + paymentType + '缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false"></uni-nav-bar>
:border="false">
</uni-nav-bar>
<!-- 表单区域 --> <!-- 表单区域 -->
<scroll-view class="page" scroll-y="true"> <scroll-view class="page" scroll-y="true">
<view class="card-box"> <view class="card-box">
<!-- 头部水表标题+水滴图标 --> <!-- 头部水表标题+水滴图标 -->
<view class="card-header"> <view class="card-header">
<image class="iconStyle" <image
:src="paymentType=='水表'?'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png':'https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png'"> class="iconStyle"
</image> :src="paymentType == '水表' ? `${imgBaseUrl}/images/propertyImgs/water.png` : `${imgBaseUrl}/images/propertyImgs/electric.png`"
<text class="card-title">{{paymentType}}</text> ></image>
<text class="card-title">{{ paymentType }}</text>
</view> </view>
<!-- 分割线 --> <!-- 分割线 -->
<view class="line"></view> <view class="line"></view>
@@ -27,12 +26,9 @@
<view class="input-label">缴费设备号</view> <view class="input-label">缴费设备号</view>
<view class="input-wrap"> <view class="input-wrap">
<!-- 输入框 --> <!-- 输入框 -->
<input class="input" placeholder="请输入设备号" placeholder-class="input-placeholder" <input class="input" placeholder="请输入设备号" placeholder-class="input-placeholder" v-model="deviceNo" />
v-model="deviceNo" />
<!-- 右边扫码图标 text标签直接用 双端不乱码 --> <!-- 右边扫码图标 text标签直接用 双端不乱码 -->
<image class="scanTheCodeIconStyle" <image class="scanTheCodeIconStyle" :src="`${imgBaseUrl}/images/propertyImgs/scanTheCodeIcon.png`" @click="scanCode"></image>
src="https://wuyeadmin.bugtc.com/images/propertyImgs/scanTheCodeIcon.png" @click="scanCode">
</image>
</view> </view>
</view> </view>
@@ -40,7 +36,6 @@
<view class="line"></view> <view class="line"></view>
</view> </view>
<!-- 底部协议和提交按钮 --> <!-- 底部协议和提交按钮 -->
<view class="bottom-area"> <view class="bottom-area">
<!-- <view class="agreement"> <!-- <view class="agreement">
@@ -51,495 +46,459 @@
<text class="agreement-link" @click="handleProtocol">《协议链接》</text> <text class="agreement-link" @click="handleProtocol">《协议链接》</text>
</view> --> </view> -->
<button class="submit-btn" @click="goPay">提交</button>
<button class="submit-btn" @click="goPay">
提交
</button>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { ref, onMounted, computed } from 'vue';
ref, import { onShow, onReady, onReachBottom, onLoad, onUnload, onPullDownRefresh } from '@dcloudio/uni-app';
onMounted,
computed
} from 'vue' import { getTopUpBindDevice, getopenIdByCode } from '/pageSubPack/api/apiSub.js';
import { import { showApiError, baseUrl, imgBaseUrl } from '/pageSubPack/api/request.js';
onShow,
onReady,
onReachBottom,
onLoad,
onUnload,
onPullDownRefresh
} from '@dcloudio/uni-app'
import { // 响应式数据
getTopUpBindDevice, const paymentType = ref(uni.getStorageSync('addPaymentType'));
getopenIdByCode const deviceNo = ref('');
} from '/pageSubPack/api/apiSub.js' const isAgree = ref(false);
import { showApiError } from '/pageSubPack/api/request.js' // 生命周期
onMounted(() => {});
// 响应式数据 // 扫码
const paymentType = ref(uni.getStorageSync('addPaymentType')) const scanCode = async () => {
const deviceNo = ref('') try {
const isAgree = ref(false) uni.showLoading({
// 生命周期 title: '扫码中...',
onMounted(() => {}) mask: true
});
// 扫码 const res = await uni.scanCode({
const scanCode = async () => { onlyFromCamera: false,
try { scanType: ['qrCode', 'barCode']
uni.showLoading({ });
title: '扫码中...',
mask: true
})
const res = await uni.scanCode({ // 扫码成功，赋值
onlyFromCamera: false, deviceNo.value = res.result;
scanType: ['qrCode', 'barCode'] uni.hideLoading();
}) uni.showToast({
title: '扫码成功',
icon: 'success'
});
} catch (err) {
uni.hideLoading();
console.log('扫码失败', err);
uni.showToast({
title: '扫码取消/失败',
icon: 'none'
});
}
};
// 扫码成功，赋值 // 提交缴费
deviceNo.value = res.result const goPay = async () => {
uni.hideLoading() if (!deviceNo.value) {
uni.showToast({ uni.showToast({
title: '扫码成功', title: '请输入设备号',
icon: 'success' icon: 'none'
}) });
} catch (err) { return;
uni.hideLoading()
console.log('扫码失败', err)
uni.showToast({
title: '扫码取消/失败',
icon: 'none'
})
}
} }
// 提交缴费 uni.showModal({
const goPay = async () => { title: '确认提交',
if (!deviceNo.value) { content: '确认要提交吗?',
uni.showToast({ success: async (res) => {
title: '请输入设备号', if (res.confirm) {
icon: 'none' uni.showLoading({
}) title: '提交中...',
return mask: true
} });
uni.showModal({ try {
title: '确认提交', // // 获取 openid
content: '确认要提交吗?', // const loginRes = await wx.login()
success: async (res) => { // if (!loginRes.code) {
if (res.confirm) { // uni.hideLoading()
uni.showLoading({ // uni.showToast({
title: '提交中...', // title: '登录失败',
mask: true // icon: 'none'
}) // })
// return
try { // }
// // 获取 openid // // 用 code 换 openid
// const loginRes = await wx.login() // const openIdRes = await getopenIdByCode({
// if (!loginRes.code) { // code: loginRes.code
// uni.hideLoading() // })
// uni.showToast({ // if (openIdRes.code !== 200 || !openIdRes.data) {
// title: '登录失败', // uni.hideLoading()
// icon: 'none' // uni.showToast({
// }) // title: '获取openid失败',
// return // icon: 'none'
// } // })
// // 用 code 换 openid // return
// const openIdRes = await getopenIdByCode({ // }
// code: loginRes.code const openid = uni.getStorageSync('openid');
// }) await getTopUpBindDevice({
// if (openIdRes.code !== 200 || !openIdRes.data) { deviceType: paymentType.value == '水表' ? '2' : '1',
// uni.hideLoading() deviceCode: deviceNo.value,
// uni.showToast({ openid: openid,
// title: '获取openid失败', residentUserId: uni.getStorageSync('userId')
// icon: 'none' });
// }) uni.hideLoading();
// return uni.showToast({
// } title: '提交成功',
const openid = uni.getStorageSync('openid') icon: 'success'
await getTopUpBindDevice({ });
deviceType: paymentType.value=='水表'?'2':'1', setTimeout(() => {
deviceCode: deviceNo.value, goNext();
openid: openid, }, 1500);
residentUserId: uni.getStorageSync('userId') } catch (err) {
}) uni.hideLoading();
uni.hideLoading() showApiError(err);
uni.showToast({ console.error('绑定设备失败：', err);
title: '提交成功',
icon: 'success'
})
setTimeout(() => {
goNext()
}, 1500)
} catch (err) {
uni.hideLoading()
showApiError(err)
console.error('绑定设备失败：', err)
}
} }
} }
}) }
} });
};
// 跳转成功页
const goNext = () => {
uni.redirectTo({
url: '/pageSubPack/payment-list/addPaymentSuccess'
});
};
// 返回
// 跳转成功页 const goBack = () => {
const goNext = () => { uni.switchTab({
uni.redirectTo({ url: '/pages/paymentIndex/paymentIndex'
url: '/pageSubPack/payment-list/addPaymentSuccess' });
}) };
}
// 返回
const goBack = () => {
uni.switchTab({
url: '/pages/paymentIndex/paymentIndex'
})
}
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
background: #f2f1f6; background: #f2f1f6;
} }
</style> </style>
<style scoped> <style scoped>
.contentStyle { .contentStyle {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
/* 关键：占满屏幕高度 */ /* 关键：占满屏幕高度 */
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.page { .page {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 0px 40rpx; padding: 0px 40rpx;
box-sizing: border-box; box-sizing: border-box;
} }
/* 白色卡片容器 */
.card-box {
background: #ffffff;
border-radius: 24rpx;
padding: 32rpx;
}
/* 白色卡片容器 */ /* 头部水表标题 */
.card-box { .card-header {
background: #ffffff; display: flex;
border-radius: 24rpx; align-items: center;
padding: 32rpx; gap: 16rpx;
} margin-bottom: 32rpx;
}
/* 头部水表标题 */ .iconStyle {
.card-header { width: 88rpx;
display: flex; height: 88rpx;
align-items: center; }
gap: 16rpx;
margin-bottom: 32rpx;
}
.iconStyle { .scanTheCodeIconStyle {
width: 88rpx; width: 48rpx;
height: 88rpx; height: 48rpx;
} padding-left: 20rpx;
}
.scanTheCodeIconStyle { .water-icon {
width: 48rpx; font-size: 32rpx;
height: 48rpx; }
padding-left: 20rpx;
}
.water-icon { .card-title {
font-size: 32rpx; font-size: 32rpx;
} color: #333;
font-weight: 500;
}
.card-title { /* 分割线 */
font-size: 32rpx; .line {
color: #333; width: 100%;
font-weight: 500; height: 1rpx;
} background: #eeeeee;
}
/* 分割线 */ /* 输入项整体 */
.line { .input-item {
width: 100%; padding: 32rpx 0;
height: 1rpx; }
background: #eeeeee;
}
/* 输入项整体 */ .input-label {
.input-item { font-size: 28rpx;
padding: 32rpx 0; color: #333;
} margin-bottom: 24rpx;
}
.input-label { /* 输入框+扫码图标横向布局 */
font-size: 28rpx; .input-wrap {
color: #333; display: flex;
margin-bottom: 24rpx; align-items: center;
} justify-content: space-between;
}
/* 输入框+扫码图标横向布局 */ .input {
.input-wrap { flex: 1;
display: flex; font-size: 32rpx;
align-items: center; color: #333;
justify-content: space-between; }
}
.input { /* 占位符样式 */
flex: 1; .input-placeholder {
font-size: 32rpx; color: #cccccc;
color: #333; }
}
/* 占位符样式 */ /* 底部协议+按钮区域 */
.input-placeholder { .bottom-area {
color: #cccccc; margin-top: 60rpx;
} padding: 0 10rpx;
}
/* 协议勾选 */
.agree-item {
display: flex;
align-items: center;
gap: 16rpx;
margin-bottom: 40rpx;
}
.radio-box {
width: 36rpx;
height: 36rpx;
display: flex;
align-items: center;
justify-content: center;
}
/* 底部协议+按钮区域 */ .radio-icon {
.bottom-area { font-size: 32rpx;
margin-top: 60rpx; color: #999;
padding: 0 10rpx; }
}
/* 协议勾选 */ .agree-text {
.agree-item { font-size: 28rpx;
display: flex; color: #666;
align-items: center; }
gap: 16rpx;
margin-bottom: 40rpx;
}
.radio-box { .agree-link {
width: 36rpx; font-size: 28rpx;
height: 36rpx; color: #007aff;
display: flex; }
align-items: center;
justify-content: center;
}
.radio-icon { /* 立即缴费按钮 */
font-size: 32rpx; .pay-btn {
color: #999; width: 100%;
} height: 96rpx;
background: #007aff;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
}
.agree-text { .pay-text {
font-size: 28rpx; font-size: 36rpx;
color: #666; color: #ffffff;
} }
.agree-link { /* 白色卡片容器 */
font-size: 28rpx; .card-box {
color: #007aff; background: #ffffff;
} border-radius: 24rpx;
padding: 32rpx;
}
/* 立即缴费按钮 */ /* 头部水表标题 */
.pay-btn { .card-header {
width: 100%; display: flex;
height: 96rpx; align-items: center;
background: #007aff; gap: 16rpx;
border-radius: 16rpx; margin-bottom: 32rpx;
display: flex; }
align-items: center;
justify-content: center;
}
.pay-text { .water-icon {
font-size: 36rpx; font-size: 48rpx;
color: #ffffff; }
}
/* 白色卡片容器 */ .card-title {
.card-box { font-size: 36rpx;
background: #ffffff; color: #333;
border-radius: 24rpx; font-weight: 500;
padding: 32rpx; }
}
/* 头部水表标题 */ /* 分割线 */
.card-header { .line {
display: flex; width: 100%;
align-items: center; height: 1rpx;
gap: 16rpx; background: #eeeeee;
margin-bottom: 32rpx; }
}
.water-icon { /* 输入项整体 */
font-size: 48rpx; .input-item {
} padding: 32rpx 0;
}
.card-title { .input-label {
font-size: 36rpx; font-size: 32rpx;
color: #333; color: #333;
font-weight: 500; margin-bottom: 24rpx;
} }
/* 分割线 */ /* 输入框+扫码图标横向布局 */
.line { .input-wrap {
width: 100%; display: flex;
height: 1rpx; align-items: center;
background: #eeeeee; justify-content: space-between;
} }
/* 输入项整体 */ .input {
.input-item { flex: 1;
padding: 32rpx 0; font-size: 32rpx;
} color: #333;
}
.input-label { /* 占位符样式 */
font-size: 32rpx; .input-placeholder {
color: #333; color: #cccccc;
margin-bottom: 24rpx; }
}
/* 输入框+扫码图标横向布局 */ /* 右边扫码图标 text标签直接用 双端不乱码 */
.input-wrap { .scan-icon {
display: flex; font-size: 40rpx;
align-items: center; color: #999;
justify-content: space-between; padding-left: 20rpx;
} }
.input { /* 底部协议+按钮区域 */
flex: 1; .bottom-area {
font-size: 32rpx; margin-top: 60rpx;
color: #333; padding: 0 10rpx;
} }
/* 占位符样式 */ /* 协议勾选 */
.input-placeholder { .agree-item {
color: #cccccc; display: flex;
} align-items: center;
gap: 16rpx;
margin-bottom: 40rpx;
}
/* 右边扫码图标 text标签直接用 双端不乱码 */ .radio-box {
.scan-icon { width: 36rpx;
font-size: 40rpx; height: 36rpx;
color: #999; display: flex;
padding-left: 20rpx; align-items: center;
} justify-content: center;
}
/* 底部协议+按钮区域 */ .radio-icon {
.bottom-area { font-size: 32rpx;
margin-top: 60rpx; color: #999;
padding: 0 10rpx; }
}
/* 协议勾选 */ .agree-text {
.agree-item { font-size: 28rpx;
display: flex; color: #666;
align-items: center; }
gap: 16rpx;
margin-bottom: 40rpx;
}
.radio-box { .agree-link {
width: 36rpx; font-size: 28rpx;
height: 36rpx; color: #007aff;
display: flex; }
align-items: center;
justify-content: center;
}
.radio-icon { /* 立即缴费按钮 */
font-size: 32rpx; .pay-btn {
color: #999; width: 100%;
} height: 96rpx;
background: #007aff;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
}
.agree-text { .pay-text {
font-size: 28rpx; font-size: 36rpx;
color: #666; color: #ffffff;
} }
.agree-link { .status-bar {
font-size: 28rpx; width: 100vw;
color: #007aff; height: 46px;
} }
/* 立即缴费按钮 */ /* 底部区域 */
.pay-btn { .bottom-area {
width: 100%; position: fixed;
height: 96rpx; bottom: 0;
background: #007aff; left: 0;
border-radius: 16rpx; right: 0;
display: flex; padding: 30rpx;
align-items: center; box-sizing: border-box;
justify-content: center; }
}
.pay-text { .agreement {
font-size: 36rpx; display: flex;
color: #ffffff; align-items: center;
} margin-bottom: 20rpx;
}
.status-bar { .agreement checkbox {
width: 100vw; transform: scale(0.8);
height: 46px; margin-right: 10rpx;
} }
/* 底部区域 */ .agreement-text {
.bottom-area { font-size: 24rpx;
position: fixed; color: #333;
bottom: 0; }
left: 0;
right: 0;
padding: 30rpx;
box-sizing: border-box;
}
.agreement { .agreement-link {
display: flex; font-size: 28rpx;
align-items: center; color: #4080ff;
margin-bottom: 20rpx; margin-left: 10rpx;
} }
.agreement checkbox { .submit-btn {
transform: scale(0.8); width: 100%;
margin-right: 10rpx; height: 90rpx;
} line-height: 90rpx;
background-color: #4080ff;
color: #fff;
border-radius: 10rpx;
font-size: 36rpx;
font-weight: 500;
border: none;
outline: none;
}
.agreement-text { .submit-btn[disabled] {
font-size: 24rpx; background-color: #a0c4ff;
color: #333; color: #fff;
} opacity: 0.7;
}
.agreement-link { </style>
font-size: 28rpx;
color: #4080ff;
margin-left: 10rpx;
}
.submit-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
background-color: #4080ff;
color: #fff;
border-radius: 10rpx;
font-size: 36rpx;
font-weight: 500;
border: none;
outline: none;
}
.submit-btn[disabled] {
background-color: #a0c4ff;
color: #fff;
opacity: 0.7;
}
</style>

990
huakai-app/pageSubPack/payment-list/addPayment.vue
View File

File diff suppressed because it is too large Load Diff

1326
huakai-app/pageSubPack/payment-list/arrearsPayment.vue
View File

File diff suppressed because it is too large Load Diff

683
huakai-app/pageSubPack/payment-list/noArrearsPayment.vue
View File

@@ -1,9 +1,7 @@
<template> <template>
<view class="contentStyle" style=""> <view class="contentStyle" style="">
<view class="status-bar"></view> <view class="status-bar"></view>
<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" <uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false"></uni-nav-bar>
:border="false">
</uni-nav-bar>
<!-- 表单区域 --> <!-- 表单区域 -->
<scroll-view class="page" scroll-y="true"> <scroll-view class="page" scroll-y="true">
@@ -11,15 +9,14 @@
<!-- 1. 物业费详情页 --> <!-- 1. 物业费详情页 -->
<view class="pay-page"> <view class="pay-page">
<!-- 未欠费 --> <!-- 未欠费 -->
<!-- v-if="arrearsPayment=='暖气费'" --> <!-- v-if="arrearsPayment=='暖气费'" -->
<view class="no-arrears-section"> <view class="no-arrears-section">
<image src="https://wuyeadmin.bugtc.com/images/propertyImgs/noArrears.png" <image :src="`${imgBaseUrl}/images/propertyImgs/noArrears.png`" class="background-image-style"></image>
class="background-image-style"></image>
<text class="noArrearsText">暂未查到欠费</text> <text class="noArrearsText">暂未查到欠费</text>
<view class="recordText"> <view class="recordText">
<text>{{'最近充值：'+paymentItem.LastRechargeTime || '-'}}</text> <text>{{ '最近充值：' + paymentItem.LastRechargeTime || '-' }}</text>
<text class="lineStyle">{{'|'}}</text> <text class="lineStyle">{{ '|' }}</text>
<text>{{'充值金额：'+paymentItem.LastRechargeAmount+'元' || '-'}}</text> <text>{{ '充值金额：' + paymentItem.LastRechargeAmount + '元' || '-' }}</text>
</view> </view>
</view> </view>
<!-- <view> <!-- <view>
@@ -30,11 +27,10 @@
</view> --> </view> -->
<!-- 缴费信息 --> <!-- 缴费信息 -->
<view class="info-section" style=""> <view class="info-section" style="">
<view v-if="arrearsPayment=='物业费'"> <view v-if="arrearsPayment == '物业费'">
<view class="info-item"> <view class="info-item">
<text class="info-label">户名</text> <text class="info-label">户名</text>
<text <text class="info-value">{{ paymentItem.villageName + paymentItem.fullAddress || '-' }}</text>
class="info-value">{{paymentItem.villageName+ paymentItem.fullAddress || '-' }}</text>
</view> </view>
<view class="info-item"> <view class="info-item">
<text class="info-label">户主</text> <text class="info-label">户主</text>
@@ -79,404 +75,391 @@
</template> </template>
<script setup> <script setup>
import { import { ref, reactive, onMounted, computed } from 'vue';
ref, import { onShow, onReady, onReachBottom, onLoad, onUnload, onPullDownRefresh } from '@dcloudio/uni-app';
reactive, import { baseUrl, imgBaseUrl } from '/pageSubPack/api/request.js';
onMounted, // 响应式数据
computed const statusBarHeight = ref(20);
const paymentItem = reactive(uni.getStorageSync('arrearsPayment') || {});
const arrearsPayment = computed(() => paymentItem.type || '缴费');
} from 'vue' // 生命周期
import { onShow(() => {});
onShow, onMounted(() => {});
onReady, onReady(() => {});
onReachBottom,
onLoad,
onUnload,
onPullDownRefresh
} from '@dcloudio/uni-app'
// 响应式数据 // 方法
const statusBarHeight = ref(20) const goBack = () => {
const paymentItem = reactive(uni.getStorageSync('arrearsPayment') || {}) uni.switchTab({
const arrearsPayment = computed(() => paymentItem.type || '缴费') url: '/pages/paymentIndex/paymentIndex'
});
};
// 生命周期 // 以下为原代码保留的方法（未使用但保持功能完整）
onShow(() => {}) const handlePay = () => {};
onMounted(() => {}) const closePasswordModal = () => {};
onReady(() => {}) const selectBank = () => {};
const inputPassword = () => {};
// 方法 const deletePassword = () => {};
const goBack = () => { const handleConfirmPay = () => {};
uni.switchTab({ const handleBackToList = () => {};
url: '/pages/paymentIndex/paymentIndex'
});
}
// 以下为原代码保留的方法（未使用但保持功能完整）
const handlePay = () => {}
const closePasswordModal = () => {}
const selectBank = () => {}
const inputPassword = () => {}
const deletePassword = () => {}
const handleConfirmPay = () => {}
const handleBackToList = () => {}
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
background: #f9f9f9; background: #f9f9f9;
} }
</style> </style>
<style scoped> <style scoped>
.contentStyle { .contentStyle {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.page { .page {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 0px 40rpx; padding: 0px 40rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.pay-page { .pay-page {
width: 100%; width: 100%;
} }
.amount-section { .amount-section {
padding: 60rpx 0; padding: 60rpx 0;
text-align: center; text-align: center;
} }
.no-arrears-section { .no-arrears-section {
padding: 30rpx 0; padding: 30rpx 0;
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: #999999; color: #999999;
} }
.amount-text { .amount-text {
font-size: 56rpx; font-size: 56rpx;
font-weight: 600; font-weight: 600;
color: #007aff; color: #007aff;
} }
.background-image-style { .background-image-style {
width: 466rpx; width: 466rpx;
height: 250rpx; height: 250rpx;
margin-bottom: 140rpx; margin-bottom: 140rpx;
} }
.noArrearsText { .noArrearsText {
padding-bottom: 50rpx; padding-bottom: 50rpx;
width: 100%; width: 100%;
border-bottom: 2rpx solid #ededed; border-bottom: 2rpx solid #ededed;
} }
.recordText { .recordText {
font-size: 24rpx; font-size: 24rpx;
color: #222; color: #222;
margin-top: 20rpx; margin-top: 20rpx;
font-weight: 600; font-weight: 600;
} }
.lineStyle { .lineStyle {
margin: 0rpx 30rpx; margin: 0rpx 30rpx;
} }
.info-item { .info-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 80rpx; height: 80rpx;
} }
.info-label { .info-label {
font-size: 30rpx; font-size: 30rpx;
color: #666; color: #666;
} }
.info-value { .info-value {
font-size: 30rpx; font-size: 30rpx;
color: #333; color: #333;
} }
.info-payAmountItem { .info-payAmountItem {
height: 100rpx; height: 100rpx;
line-height: 100rpx; line-height: 100rpx;
margin-bottom: 60rpx; margin-bottom: 60rpx;
} }
.info-payAmount { .info-payAmount {
font-size: 50rpx; font-size: 50rpx;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
} }
.input-section { .input-section {
padding: 0 30rpx; padding: 0 30rpx;
margin-bottom: 60rpx; margin-bottom: 60rpx;
} }
.amount-input { .amount-input {
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
font-size: 48rpx; font-size: 48rpx;
border: none; border: none;
outline: none; outline: none;
} }
.btn-section { .btn-section {
padding: 0 30rpx; padding: 0 30rpx;
} }
.pay-btn { .pay-btn {
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
line-height: 100rpx; line-height: 100rpx;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
border-radius: 16rpx; border-radius: 16rpx;
font-size: 32rpx; font-size: 32rpx;
border: none; border: none;
outline: none; outline: none;
} }
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 999; z-index: 999;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
.password-modal { .password-modal {
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
border-radius: 24rpx 24rpx 0 0; border-radius: 24rpx 24rpx 0 0;
padding-bottom: 40rpx; padding-bottom: 40rpx;
} }
.modal-header { .modal-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 100rpx; height: 100rpx;
padding: 0 30rpx; padding: 0 30rpx;
border-bottom: 2rpx solid #f0f0f0; border-bottom: 2rpx solid #f0f0f0;
} }
.close-icon { .close-icon {
font-size: 44rpx; font-size: 44rpx;
width: 80rpx; width: 80rpx;
height: 100rpx; height: 100rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.modal-title { .modal-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 500; font-weight: 500;
color: #000; color: #000;
} }
.header-right { .header-right {
width: 80rpx; width: 80rpx;
} }
.pay-info { .pay-info {
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
text-align: center; text-align: center;
} }
.merchant-name { .merchant-name {
display: block; display: block;
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.pay-amount { .pay-amount {
font-size: 64rpx; font-size: 64rpx;
font-weight: 500; font-weight: 500;
color: #000; color: #000;
} }
.pay-way { .pay-way {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 30rpx; padding: 30rpx;
border-bottom: 2rpx solid #f0f0f0; border-bottom: 2rpx solid #f0f0f0;
} }
.way-label { .way-label {
font-size: 30rpx; font-size: 30rpx;
color: #666; color: #666;
} }
.way-content { .way-content {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.bank-icon { .bank-icon {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin-right: 6rpx; margin-right: 6rpx;
} }
.bank-name { .bank-name {
font-size: 30rpx; font-size: 30rpx;
color: #333; color: #333;
margin-right: 16rpx; margin-right: 16rpx;
} }
.arrow-icon { .arrow-icon {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
} }
.bank-list { .bank-list {
padding: 0 30rpx; padding: 0 30rpx;
border-bottom: 2rpx solid #f0f0f0; border-bottom: 2rpx solid #f0f0f0;
} }
.bank-item { .bank-item {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100rpx; height: 100rpx;
border-bottom: 2rpx solid #f5f5f5; border-bottom: 2rpx solid #f5f5f5;
} }
.bank-item:last-child { .bank-item:last-child {
border-bottom: none; border-bottom: none;
} }
.bank-item-icon { .bank-item-icon {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
margin-right: 20rpx; margin-right: 20rpx;
} }
.bank-item-name { .bank-item-name {
flex: 1; flex: 1;
font-size: 30rpx; font-size: 30rpx;
color: #333; color: #333;
} }
.check-icon { .check-icon {
font-size: 36rpx; font-size: 36rpx;
color: #007aff; color: #007aff;
} }
.password-input { .password-input {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
} }
.password-item { .password-item {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
background-color: #efefef; background-color: #efefef;
border-radius: 8rpx; border-radius: 8rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.password-dot { .password-dot {
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
background-color: #000; background-color: #000;
border-radius: 50%; border-radius: 50%;
} }
.keyboard { .keyboard {
width: 100%; width: 100%;
} }
.keyboard-row { .keyboard-row {
display: flex; display: flex;
} }
.keyboard-item { .keyboard-item {
flex: 1; flex: 1;
height: 54px; height: 54px;
line-height: 54px; line-height: 54px;
text-align: center; text-align: center;
font-size: 48rpx; font-size: 48rpx;
color: #000; color: #000;
border: 2rpx solid #f0f0f0; border: 2rpx solid #f0f0f0;
background-color: #fff; background-color: #fff;
} }
.keyboard-item:active { .keyboard-item:active {
background-color: #e5e5e5; background-color: #e5e5e5;
} }
.keyboard-item.empty { .keyboard-item.empty {
background-color: #f5f5f5; background-color: #f5f5f5;
border: none; border: none;
} }
.keyboard-item.delete { .keyboard-item.delete {
background-color: #f5f5f5; background-color: #f5f5f5;
border: none; border: none;
} }
.success-page { .success-page {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background-color: #fff; background-color: #fff;
text-align: center; text-align: center;
} }
.icon-box { .icon-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100vw; width: 100vw;
height: 1100rpx; height: 1100rpx;
padding: 60rpx 0px; padding: 60rpx 0px;
} }
.success-icon { .success-icon {
margin-bottom: 40rpx; margin-bottom: 40rpx;
width: 100px; width: 100px;
height: 100px; height: 100px;
font-size: 80px; font-size: 80px;
color: #007aff; color: #007aff;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
} }
.success-text { .success-text {
font-size: 40rpx; font-size: 40rpx;
font-weight: 600; font-weight: 600;
color: #000; color: #000;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.success-desc { .success-desc {
font-size: 30rpx; font-size: 30rpx;
color: #999; color: #999;
margin-bottom: 100rpx; margin-bottom: 100rpx;
} }
.status-bar { .status-bar {
width: 100vw; width: 100vw;
height: 46px; height: 46px;
} }
</style> </style>

653
huakai-app/pageSubPack/payment-list/paymentRecord.vue
View File

@@ -1,12 +1,8 @@
<template> <template>
<view class="contentStyle" style=""> <view class="contentStyle" style="">
<view class="status-bar"></view> <view class="status-bar"></view>
<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false"> <uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false"></uni-nav-bar>
</uni-nav-bar> <view class="page">
<!-- 表单区域 -->
<scroll-view class="page" scroll-y="true">
<!-- 累计缴费 --> <!-- 累计缴费 -->
<view class="total-box"> <view class="total-box">
<view class="top-box"> <view class="top-box">
@@ -16,13 +12,13 @@
<view class="chart-box"> <view class="chart-box">
<view v-if="chartData.length === 0" class="empty-state"> <view v-if="chartData.length === 0" class="empty-state">
<uni-icons type="info" size="60" color="#ccc"></uni-icons> <uni-icons type="info" size="30" color="#ccc"></uni-icons>
<text class="empty-text"> <text class="empty-text">
{{ '暂无数据'}} {{ '暂无数据' }}
</text> </text>
</view> </view>
<!-- 循环6个月柱状图 --> <!-- 循环6个月柱状图 -->
<view class="chart-item" v-for="(item,index) in chartData" :key="index"> <view class="chart-item" v-for="(item, index) in chartData" :key="index">
<!-- 柱子顶部金额文字 --> <!-- 柱子顶部金额文字 -->
<view class="chart-label">{{ item.price }}元</view> <view class="chart-label">{{ item.price }}元</view>
<!-- 柱状图柱子 --> <!-- 柱状图柱子 -->
@@ -31,367 +27,402 @@
<view class="chart-month">{{ item.month }}</view> <view class="chart-month">{{ item.month }}</view>
</view> </view>
</view> </view>
</view> </view>
<!-- 缴费明细 --> <!-- 缴费明细（分页滚动） -->
<view class="list-wrapper"> <scroll-view class="list-scroll" scroll-y="true" @scrolltolower="loadMore">
<!-- 按月份分组渲染 --> <view class="list-wrapper">
<view v-if="monthGroups.length === 0" class="empty-state"> <!-- 按月份分组渲染 -->
<uni-icons type="info" size="60" color="#ccc"></uni-icons> <view v-if="monthGroups.length === 0" class="empty-state">
<text class="empty-text"> <uni-icons type="info" size="30" color="#ccc"></uni-icons>
{{ '暂无数据'}} <text class="empty-text">暂无数据</text>
</text>
</view>
<view class="month-group" v-for="(item, idx) in monthGroups" :key="idx">
<view class="month-title">
{{ item.month }}月 缴费 ¥{{ item.total }}元
</view> </view>
<view class="month-group" v-for="(item, idx) in monthGroups" :key="idx">
<view class="month-title">{{ item.month }}月 缴费 ¥{{ item.total }}</view>
<view class="item-list"> <view class="item-list">
<view class="bill-item" v-for="bill in item.list" :key="bill.id"> <view class="bill-item" v-for="bill in item.list" :key="bill.id">
<view class="bill-icon"> <view class="bill-icon">
<image class="iconStyle" src="https://wuyeadmin.bugtc.com/images/propertyImgs/water.png" <image class="iconStyle" :src="bill.icon"></image>
v-if="bill.name=='水表'"></image> </view>
<image class="iconStyle" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png" <view class="bill-info">
v-if="bill.name=='电表'"></image> <view class="name">{{ bill.name }}</view>
<view class="account">{{ bill.account }}</view>
</view>
<view class="bill-price">-{{ bill.amount }}</view>
</view> </view>
<view class="bill-info">
<view class="name">{{ bill.name }}</view>
<view class="account">{{ bill.account }}</view>
</view>
<view class="bill-price">-{{ bill.amount }}</view>
</view> </view>
</view> </view>
</view> </view>
</view> </scroll-view>
</view>
</scroll-view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { ref, onMounted, computed } from 'vue';
ref, import { onShow, onReady, onReachBottom, onLoad, onUnload, onPullDownRefresh } from '@dcloudio/uni-app';
onMounted, import { getTopupRecordWithStat } from '/pageSubPack/api/apiSub.js';
computed import { imgBaseUrl } from '../api/request.js';
} from 'vue' // 响应式数据
import { const statusBarHeight = ref(20);
onShow, const pageNum = ref(1);
onReady, const pageSize = ref(10);
onReachBottom, const total = ref(0);
onLoad, const totalAmount = ref('0.00');
onUnload, const chartData = ref([]);
onPullDownRefresh const maxPrice = ref(100);
} from '@dcloudio/uni-app' const barMaxHeight = ref(300);
const allInfo = ref(null);
const billList = ref([]);
import { let isFirstLoading = true;
getTopupRecordWithStat
} from '/pageSubPack/api/apiSub.js'
// 响应式数据
const statusBarHeight = ref(20)
const pageNum = ref(1)
const pageSize = ref(10)
const totalAmount = ref('0.00')
const chartData = ref([])
const maxPrice = ref(100)
const barMaxHeight = ref(300)
const billList = ref([]) // 费用名称映射
// topup（水电表充值）：type 1=电费, 2=水费
// 图标映射 // bill（物业账单）：type 0=物业费, 1=车位费, 2=垃圾处理费
const iconMap = { const getNameByType = (item) => {
'水表': 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png', if (item.recordType === 'topup') {
'电表': 'https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png', return item.type == '1' ? '电费' : item.type == '2' ? '水费' : '充值';
'物业费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/property.png', } else if (item.recordType === 'bill') {
'暖气费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/heating.png', return item.type == '0' ? '物业费' : item.type == '1' ? '车位费' : item.type == '2' ? '垃圾处理费' : '账单';
'燃气费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/gas.png'
} }
return '';
};
// 获取缴费记录 // 图标映射
const getRecords = async () => { const iconMap = {
try { 电费: `${imgBaseUrl}/images/propertyImgs/electric.png`,
const res = await getTopupRecordWithStat({ 水费: `${imgBaseUrl}/images/propertyImgs/water.png`
residentUserId: uni.getStorageSync('userId'), };
pageNum: pageNum.value, // 获取缴费记录（loadMore=true 时分页追加）
pageSize: pageSize.value const getRecords = async (loadMore = false) => {
}) try {
if (res.code === 200) { // 全部加载完毕了
const records = res.data.records || []
// 转换记录格式 if (!loadMore) pageNum.value = 1;
billList.value = records.map(item => ({ const res = await getTopupRecordWithStat({
residentUserId: uni.getStorageSync('userId'),
pageNum: pageNum.value,
pageSize: pageSize.value,
queryType: 1
});
if (res.code === 200) {
isFirstLoading = false;
allInfo.value = res.data;
total.value = res.data.total;
const records = res.data.records || [];
// 转换记录格式
const mappedList = records.map((item) => {
const payDate = item.payTime ? item.payTime.split(' ')[0] : '';
const parts = payDate.split('-');
const name = getNameByType(item);
return {
id: item.id, id: item.id,
month: item.rechargeTime && item.rechargeTime.split('-')[1] ? parseInt(item.rechargeTime.split('-')[1], 10) : 1, year: parts[0] ? parseInt(parts[0], 10) : new Date().getFullYear(),
name: item.type == 1 ? '电表' : item.type == 2 ? '水表' : '', month: parts[1] ? parseInt(parts[1], 10) : 1,
account: item.deviceCode || '-', name,
amount: Number(item.rechargeAmount) || 0, account: item.deviceCode || '',
icon: iconMap[item.type == 1 ? '电表' : item.type == 2 ? '水表' : ''] || 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png' amount: item.amount || 0,
})) recordType: item.recordType || '',
// 累计缴费金额 icon: iconMap[name] || iconMap['账单']
const total = records.reduce((sum, item) => sum + (Number(item.rechargeAmount) || 0), 0) };
totalAmount.value = total.toFixed(2) });
// 更新图表数据（根据 records 计算最近6个月） billList.value = loadMore ? [...billList.value, ...mappedList] : mappedList;
updateChartData() // 累计缴费金额
} totalAmount.value = res.data.totalAmount || '0.00';
} catch (err) { // 柱状图数据（使用API返回的monthlyStats）
console.error('获取缴费记录失败', err) updateChartData(res.data.monthlyStats || {});
} }
} catch (err) {
console.error('获取缴费记录失败', err);
} }
};
// 更新图表数据（根据 records 计算最近6个月） // 加载更多（触底分页）
const updateChartData = () => { const loadMore = () => {
// 按月份汇总金额 const allSize = pageNum.value * pageSize.value;
const monthTotal = {} if (!isFirstLoading && total.value <= allSize) {
billList.value.forEach(bill => { return;
const monthKey = bill.month }
if (!monthTotal[monthKey]) { pageNum.value++;
monthTotal[monthKey] = 0 getRecords(true);
} };
monthTotal[monthKey] += bill.amount
}) // 更新图表数据（使用API返回的monthlyStats）
// 取最近6个月（当前月往前） // monthlyStats格式: { "2026-04": "04月 30.00元", "2026-05": "05月 25.00元", ... }
const now = new Date() const updateChartData = (monthlyStats) => {
const currentMonth = now.getMonth() + 1 // 1-12 const statsMap = {};
const currentYear = now.getFullYear() Object.entries(monthlyStats).forEach(([key, value]) => {
const months = [] const priceMatch = value.match(/([\d.]+)元/);
for (let i = 0; i < 6; i++) { if (priceMatch && key.includes('-')) {
let month = currentMonth - i const [y, m] = key.split('-');
let year = currentYear statsMap[key] = {
if (month <= 0) { year: parseInt(y, 10),
month += 12 month: parseInt(m, 10),
year -= 1 price: parseFloat(priceMatch[1]) || 0
} };
months.push({
month,
year
})
} }
chartData.value = months.map((m, i) => ({ });
// 取最近6个月（当前月往前）
const now = new Date();
const currentMonth = now.getMonth() + 1;
const currentYear = now.getFullYear();
const months = [];
for (let i = 0; i < 6; i++) {
let month = currentMonth - i;
let year = currentYear;
if (month <= 0) {
month += 12;
year -= 1;
}
const key = `${year}-${String(month).padStart(2, '0')}`;
const data = statsMap[key];
months.push({
month,
year,
price: data ? data.price : 0
});
}
chartData.value = months
.map((m, i) => ({
month: (m.year + '').slice(-2) + '年' + m.month + '月', month: (m.year + '').slice(-2) + '年' + m.month + '月',
year: m.year, year: m.year,
sortMonth: m.year * 12 + m.month, sortMonth: m.year * 12 + m.month,
price: monthTotal[m.month] || 0, price: m.price,
index: i index: i
})).sort((a, b) => a.sortMonth - b.sortMonth) }))
const prices = chartData.value.map(c => c.price) .sort((a, b) => a.sortMonth - b.sortMonth);
maxPrice.value = Math.max(...prices, 100) const prices = chartData.value.map((c) => c.price);
} maxPrice.value = Math.max(...prices, 100);
};
// 计算属性 —— 月份分组 // 计算属性 —— 按年-月分组缴费明细
const monthGroups = computed(() => { const monthGroups = computed(() => {
let map = {} const map = {};
billList.value.forEach(bill => { if (allInfo.value !== null) {
if (!map[bill.month]) { const list = Object.entries(allInfo.value.monthlyStats);
map[bill.month] = { list.forEach(([yearmonth, moneyString]) => {
month: bill.month, const money = moneyString.match(/([\d.]+)元/);
total: 0, const month = yearmonth.split('-')[1];
list: [] map[yearmonth] = {
} month: parseFloat(yearmonth.split('-')[1]),
} year: yearmonth.split('-')[0],
map[bill.month].list.push(bill) total: money[1],
map[bill.month].total += bill.amount list: []
}) };
return Object.values(map).sort((a, b) => b.month - a.month)
})
// 生命周期
onShow(() => {})
onMounted(() => {})
onLoad(() => {
getRecords()
})
onReady(() => {})
// 方法
const barHeight = (price) => {
const height = (price / maxPrice.value) * barMaxHeight.value
return `${height}rpx`
}
const goBack = () => {
uni.switchTab({
url: '/pages/paymentIndex/paymentIndex'
}); });
} }
billList.value.forEach((item) => {
const key = `${item.year}-${String(item.month).padStart(2, '0')}`;
map[key].list.push(item);
});
// 按年月降序排列
return Object.values(map).sort((a, b) => {
if (a.year !== b.year) return b.year - a.year;
return b.month - a.month;
});
});
// 生命周期
onLoad(() => {
getRecords();
});
// 方法
const barHeight = (price) => {
const height = (price / maxPrice.value) * barMaxHeight.value;
return `${height}rpx`;
};
const goBack = () => {
uni.navigateBack();
};
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
// background: #f2f1f6; // background: #f2f1f6;
} }
</style> </style>
<style scoped> <style scoped>
.contentStyle { .contentStyle {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
} }
.page { .page {
flex: 1; flex: 1;
overflow-y: auto; display: flex;
padding: 0px 40rpx; flex-direction: column;
box-sizing: border-box; padding: 0px 40rpx;
} box-sizing: border-box;
overflow: hidden;
}
.total-box { .list-scroll {
margin-bottom: 30rpx; flex: 1;
} overflow-y: auto;
}
.empty-state { .total-box {
display: flex; margin-bottom: 30rpx;
flex-direction: column; }
align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #ccc;
}
.empty-text { .empty-state {
font-size: 32rpx; display: flex;
color: #999; flex-direction: column;
margin-top: 20rpx; align-items: center;
margin-bottom: 10rpx; justify-content: center;
} padding: 100rpx 0;
color: #ccc;
}
.top-box { .empty-text {
display: flex; font-size: 32rpx;
justify-content: space-between; color: #999;
align-items: center; margin-top: 20rpx;
} margin-bottom: 10rpx;
}
.total-title { .top-box {
font-size: 32rpx; display: flex;
font-weight: 600; justify-content: space-between;
color: #333; align-items: center;
} }
.total-price { .total-title {
font-size: 48rpx; font-size: 32rpx;
font-weight: bold; font-weight: 600;
margin-top: 10rpx; color: #333;
margin-bottom: 20rpx; }
}
.chart-canvas { .total-price {
width: calc(100vw - 60rpx); font-size: 48rpx;
height: 30vh; font-weight: bold;
} margin-top: 10rpx;
margin-bottom: 20rpx;
}
.list-wrapper { .chart-canvas {
padding: 10rpx 0rpx; width: calc(100vw - 60rpx);
} height: 30vh;
}
.month-group { .list-wrapper {
border-bottom: 2rpx solid #f2f2f2; padding: 10rpx 0rpx;
padding: 30rpx; }
background-color: #fff;
margin-bottom: 30rpx;
border-radius: 10rpx;
}
.month-title { .month-group {
font-size: 32rpx; border-bottom: 2rpx solid #f2f2f2;
font-weight: 600; padding: 30rpx;
margin-bottom: 30rpx; background-color: #fff;
} margin-bottom: 30rpx;
border-radius: 10rpx;
}
.bill-item { .month-title {
display: flex; font-size: 32rpx;
align-items: center; font-weight: 600;
margin-bottom: 30rpx; margin-bottom: 30rpx;
padding-bottom: 30rpx; }
border-bottom: 1px solid #ebebeb;
}
.bill-item:last-child { .bill-item {
border-bottom: none; display: flex;
margin-bottom: 0rpx; align-items: center;
padding-bottom: 0rpx; margin-bottom: 30rpx;
} padding-bottom: 30rpx;
border-bottom: 1px solid #ebebeb;
}
.bill-icon { .bill-item:last-child {
width: 80rpx; border-bottom: none;
height: 80rpx; margin-bottom: 0rpx;
border-radius: 50%; padding-bottom: 0rpx;
display: flex; }
align-items: center;
justify-content: center;
color: #4080FF;
margin-right: 24rpx;
font-size: 36rpx;
}
.iconStyle { .bill-icon {
width: 100%; width: 80rpx;
height: 100%; height: 80rpx;
} border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #4080ff;
margin-right: 24rpx;
font-size: 36rpx;
}
.bill-info { .iconStyle {
flex: 1; width: 100%;
} height: 100%;
}
.name { .bill-info {
font-size: 28rpx; flex: 1;
color: #333; }
font-weight: 600;
}
.account { .name {
font-size: 24rpx; font-size: 28rpx;
color: #999; color: #333;
margin-top: 8rpx; font-weight: 600;
} }
.bill-price { .account {
font-size: 32rpx; font-size: 24rpx;
color: #333; color: #999;
} margin-top: 8rpx;
}
.status-bar { .bill-price {
width: 100vw; font-size: 32rpx;
height: 46px; color: #333;
} }
.status-bar {
width: 100vw;
height: 46px;
}
</style> </style>
<style scoped> <style scoped>
.chart-box { .chart-box {
width: 100%; width: 100%;
height: 444rpx; height: 444rpx;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-around; justify-content: space-around;
box-sizing: border-box; box-sizing: border-box;
} }
.chart-item { .chart-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
width: 120rpx; width: 120rpx;
font-size: 24rpx; font-size: 24rpx;
} }
.chart-label { .chart-label {
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.chart-bar { .chart-bar {
width: 40rpx; width: 40rpx;
background: #3388ff; background: #3388ff;
border-radius: 40rpx 40rpx 0 0; border-radius: 40rpx 40rpx 0 0;
} }
.chart-month { .chart-month {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #666;
margin-top: 24rpx; margin-top: 24rpx;
} }
</style> </style>

293
huakai-app/pages/navigation/navigation.vue
View File

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

674
huakai-app/pages/paymentIndex/paymentIndex.vue
View File

@@ -1,35 +1,33 @@
<template> <template>
<view class="contentStyle" style=""> <view class="contentStyle" style="">
<view class="status-bar"></view> <view class="status-bar"></view>
<uni-nav-bar title="生活缴费" backgroundColor="transparent" :border="false"> <uni-nav-bar title="生活缴费" backgroundColor="transparent" :border="false"></uni-nav-bar>
</uni-nav-bar>
<view class="topbox"> <view class="topbox">
<image class="titleImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payTitle.png"></image> <image class="titleImg" :src="`${imgBaseUrl}/images/propertyImgs/payTitle.png`"></image>
<image class="payImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payImg.png"></image> <image class="payImg" :src="`${imgBaseUrl}/images/propertyImgs/payImg.png`"></image>
</view> </view>
<scroll-view class="page" scroll-y="true"> <scroll-view class="page" scroll-y="true">
<view class="container"> <view class="container">
<!-- 未登录提示条 --> <!-- 未登录提示条 -->
<view class="login-tip" v-if="!isLogin" @click="handleLoginPrompt"> <view class="login-tip" v-if="!isLogin" @click="handleLoginPrompt">
<image class="login-tip-icon" src="https://wuyeadmin.bugtc.com/images/login/phone.png"></image> <image class="login-tip-icon" :src="`${imgBaseUrl}/images/login/phone.png`"></image>
<text class="login-tip-text">登录后可查看缴费账单</text> <text class="login-tip-text">登录后可查看缴费账单</text>
<text class="login-tip-link">去登录</text> <text class="login-tip-link">去登录</text>
</view> </view>
<!-- 账单列表（仅登录后显示） --> <!-- 账单列表（仅登录后显示） -->
<view class="bill-list" v-if="isLogin && paymentList.length > 0"> <view class="bill-list" v-if="isLogin && paymentList.length > 0">
<view class="bill-item" @click="goToBill(item)" v-for="(item, index) in paymentList" :key="index">
<image class="billIcon" :src="waterImg" v-if="item.type == '水费'"></image>
<image class="billIcon" :src="electricImg" v-if="item.type == '电费'"></image>
<view class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/water.png"
v-if="item.type=='水费'"></image>
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png"
v-if="item.type=='电费'"></image>
<view class="bill-info"> <view class="bill-info">
<view class="bill-title">{{item.type}} <view class="bill-title">
<view class="bill-status debt" v-if="item.balance<0">已欠费</view> {{ item.type }}
<text :class="item.balance<0 ? 'balance-debt' : 'balance-normal'">(余额：{{item.balance|| 0.00}}元)</text> <view class="bill-status debt" v-if="item.balance < 0">已欠费</view>
<text :class="item.balance < 0 ? 'balance-debt' : 'balance-normal'">(余额：{{ item.balance || 0.0 }}元)</text>
</view> </view>
<view class="bill-desc">{{item.villageName+"-"+item.buildingName+'-'+formatAddress(item.fullAddress)}}</view> <view class="bill-desc">{{ item.villageName + '-' + item.buildingName + '-' + formatAddress(item.fullAddress) }}</view>
</view> </view>
<view class="arrow"></view> <view class="arrow"></view>
</view> </view>
@@ -47,380 +45,398 @@
<view class="icon-box" :class="item.iconClass"> <view class="icon-box" :class="item.iconClass">
<image class="iconStyle" :src="item.icon"></image> <image class="iconStyle" :src="item.icon"></image>
</view> </view>
<text class="item-name">{{ item.name}}</text> <text class="item-name">{{ item.name }}</text>
</view> </view>
</view> </view>
</view> </view>
<view style="width: 100%;height: 30rpx;"></view> <view style="width: 100%; height: 30rpx"></view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app' import { onShow, onLoad } from '@dcloudio/uni-app';
import { getTopUpSelectByResident, getopenIdByCode, postInsertOpenId } from '/pageSubPack/api/apiSub.js' import { getTopUpSelectByResident, getopenIdByCode, postInsertOpenId } from '/pageSubPack/api/apiSub.js';
import { isLoggedIn, requireAuth } from '/pageSubPack/api/auth.js' import { isLoggedIn, requireAuth } from '/pageSubPack/api/auth.js';
import { imgBaseUrl } from '/pageSubPack/api/request.js';
const isLogin = ref(false) const isLogin = ref(false);
const paymentList = ref([]) const paymentList = ref([]);
const addList = ref([ const waterImg = imgBaseUrl + '/images/propertyImgs/water.png';
{ const electricImg = imgBaseUrl + '/images/propertyImgs/electric.png';
name: "水表",
type: "water",
icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/water.png",
iconClass: "water"
},
])
// ===== 刷新登录状态 ===== const addList = ref([
const refreshLoginState = () => { {
isLogin.value = isLoggedIn(); name: '水表',
if (!isLogin.value) { type: 'water',
// 未登录时清空账单数据 icon: waterImg,
paymentList.value = []; iconClass: 'water'
},
{
name: '电表',
type: 'electric',
icon: electricImg,
iconClass: 'electric'
}
]);
// ===== 刷新登录状态 =====
const refreshLoginState = () => {
isLogin.value = isLoggedIn();
if (!isLogin.value) {
// 未登录时清空账单数据
paymentList.value = [];
}
};
// ===== openid 相关（仅登录后） =====
const postOpenId = async () => {
if (!isLogin.value) return;
const openid = uni.getStorageSync('openid');
if (openid && typeof openid === 'string' && openid.trim() !== '') {
return openid;
}
try {
const loginRes = await wx.login();
// uni.login;
if (!loginRes.code) {
console.error('wx.login 失败');
return;
} }
}; const openIdRes = await getopenIdByCode({ code: loginRes.code });
if (openIdRes.code !== 200 || !openIdRes.data) {
// ===== openid 相关（仅登录后） ===== console.error('获取openid失败');
const postOpenId = async () => { return;
if (!isLogin.value) return;
try {
const loginRes = await wx.login()
if (!loginRes.code) {
console.error('wx.login 失败')
return
}
const openIdRes = await getopenIdByCode({ code: loginRes.code })
if (openIdRes.code !== 200 || !openIdRes.data) {
console.error('获取openid失败')
return
}
uni.setStorageSync('openid', openIdRes.data)
await postInsertOpenId({
openid: openIdRes.data,
residentUserId: uni.getStorageSync('userId')
})
} catch (err) {
console.error('postOpenId 报错：', err)
} }
}; uni.setStorageSync('openid', openIdRes.data);
await postInsertOpenId({
openid: openIdRes.data,
residentUserId: uni.getStorageSync('userId')
});
} catch (err) {
console.error('postOpenId 报错：', err);
}
};
// ===== 获取缴费列表 ===== // ===== 获取缴费列表 =====
const getPayList = async () => { const getPayList = async () => {
if (!isLogin.value) return; if (!isLogin.value) return;
try { try {
const res = await getTopUpSelectByResident({ const res = await getTopUpSelectByResident({
residentUserId: uni.getStorageSync('userId') residentUserId: uni.getStorageSync('userId')
}) });
paymentList.value = res.data || [] paymentList.value = res.rows || [];
} catch (err) { } catch (err) {
console.error('列表接口报错：', err) console.error('列表接口报错：', err);
} }
}; };
// ===== 生命周期 ===== // ===== 生命周期 =====
onLoad(() => { onLoad(() => {
refreshLoginState(); refreshLoginState();
uni.hideTabBar({ animation: false }); uni.hideTabBar({ animation: false });
if (isLogin.value) { if (isLogin.value) {
postOpenId(); getPayList();
}
});
onShow(() => {
refreshLoginState();
if (isLogin.value) {
postOpenId();
getPayList();
}
});
// ===== 点击事件（统一用 isLogin 判断） =====
// 点击"去登录"提示条
const handleLoginPrompt = () => {
if (isLogin.value) return;
requireAuth({
title: '查看缴费账单',
onLoggedIn: () => {
refreshLoginState();
getPayList(); getPayList();
} }
}); });
};
onShow(() => { // 点击账单明细
refreshLoginState(); const goToBill = (item) => {
if (isLogin.value) { if (!isLogin.value) {
getPayList();
}
});
// ===== 点击事件（统一用 isLogin 判断） =====
// 点击"去登录"提示条
const handleLoginPrompt = () => {
if (isLogin.value) return;
requireAuth({ requireAuth({
title: '查看缴费账单', title: '查看缴费详情',
onLoggedIn: () => { onLoggedIn: () => {
refreshLoginState(); refreshLoginState();
getPayList(); goToBill(item);
} }
}); });
}; return;
}
uni.setStorageSync('arrearsPayment', item);
uni.navigateTo({ url: '/pageSubPack/payment-list/arrearsPayment' });
};
// 点击账单明细 // 点击缴费记录
const goToBill = (item) => { const goToRecord = () => {
if (!isLogin.value) { if (!isLogin.value) {
requireAuth({ requireAuth({
title: '查看缴费详情', title: '查看缴费记录',
onLoggedIn: () => { onLoggedIn: () => {
refreshLoginState(); refreshLoginState();
goToBill(item); goToRecord();
} }
}); });
return; return;
} }
uni.setStorageSync('arrearsPayment', item) uni.navigateTo({ url: '/pageSubPack/payment-list/paymentRecord' });
uni.redirectTo({ url: '/pageSubPack/payment-list/arrearsPayment' }) };
};
// 点击缴费记录 // 点击新增缴费（水表/电表等）
const goToRecord = () => { const goToAdd = (type) => {
if (!isLogin.value) { if (!isLogin.value) {
requireAuth({ requireAuth({
title: '查看缴费记录', title: '新增缴费',
onLoggedIn: () => { onLoggedIn: () => {
refreshLoginState(); refreshLoginState();
goToRecord(); goToAdd(type);
} }
}); });
return; return;
} }
uni.redirectTo({ url: '/pageSubPack/payment-list/paymentRecord' }) if (type.name == '燃气' || type.name == '暖气') {
}; uni.navigateTo({ url: '/pageSubPack/payment-list/selectPaymentEntity' });
} else if (type.name == '水表' || type.name == '电表') {
uni.navigateTo({ url: '/pageSubPack/payment-list/addHydropower' });
}
uni.setStorageSync('addPaymentType', type.name);
};
// 点击新增缴费（水表/电表等） const formatAddress = (addr) => {
const goToAdd = (type) => { if (!addr) return '';
if (!isLogin.value) { return addr
requireAuth({ .replace(/\d+[层楼]\s*/g, '')
title: '新增缴费', .replace(/单元\s*/g, '-')
onLoggedIn: () => { .replace(/\s+/g, '');
refreshLoginState(); };
goToAdd(type);
}
});
return;
}
if (type.name == '燃气' || type.name == '暖气') {
uni.redirectTo({ url: '/pageSubPack/payment-list/selectPaymentEntity' })
} else if (type.name == '水表' || type.name == '电表') {
uni.redirectTo({ url: '/pageSubPack/payment-list/addHydropower' })
}
uni.setStorageSync('addPaymentType', type.name)
};
const formatAddress = (addr) => {
if (!addr) return ''
return addr.replace(/\d+[层楼]\s*/g, '').replace(/单元\s*/g, '-').replace(/\s+/g, '')
};
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
background: linear-gradient(180deg, #dfedfd, #F6FAFF); background: linear-gradient(180deg, #dfedfd, #f6faff);
} }
</style> </style>
<style scoped> <style scoped>
.contentStyle { .contentStyle {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background: linear-gradient(180deg, #dfedfd, #F6FAFF); background: linear-gradient(180deg, #dfedfd, #f6faff);
} }
.page { .page {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 0px 40rpx; padding: 0px 40rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.topbox { .topbox {
height: 150rpx; height: 150rpx;
width: 100%; width: 100%;
position: relative; position: relative;
} }
.titleImg { .titleImg {
width: 262rpx; width: 262rpx;
height: 74rpx; height: 74rpx;
position: absolute; position: absolute;
left: 40rpx; left: 40rpx;
bottom: 20rpx; bottom: 20rpx;
} }
.payImg { .payImg {
width: 349.97rpx; width: 349.97rpx;
height: 313.57rpx; height: 313.57rpx;
position: absolute; position: absolute;
right: -80rpx; right: -80rpx;
bottom: -140rpx; bottom: -140rpx;
} }
/* ===== 未登录提示条 ===== */ /* ===== 未登录提示条 ===== */
.login-tip { .login-tip {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
padding: 24rpx 30rpx; padding: 24rpx 30rpx;
border-radius: 10rpx; border-radius: 10rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05); box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
} }
.login-tip-icon { .login-tip-icon {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin-right: 16rpx; margin-right: 16rpx;
} }
.login-tip-text { .login-tip-text {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #666;
} }
.login-tip-link { .login-tip-link {
font-size: 28rpx; font-size: 28rpx;
color: #1677ff; color: #1677ff;
font-weight: 500; font-weight: 500;
} }
.bill-list { .bill-list {
margin-bottom: 40rpx; margin-bottom: 40rpx;
background-color: #fff; background-color: #fff;
padding: 30rpx; padding: 30rpx;
border-radius: 10rpx; border-radius: 10rpx;
} }
.bill-item { .bill-item {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #F6F9FE; background-color: #f6f9fe;
border-radius: 12rpx; border-radius: 12rpx;
padding: 20rpx 20rpx 20rpx 0px; padding: 20rpx 20rpx 20rpx 0px;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.bill-item:last-child { .bill-item:last-child {
margin-bottom: 0rpx; margin-bottom: 0rpx;
} }
.bill-info { .bill-info {
width: calc(90% - 100rpx); width: calc(90% - 100rpx);
flex: 1; flex: 1;
} }
.billIcon { .billIcon {
width: 64rpx; width: 64rpx;
height: 64rpx; height: 64rpx;
margin: 20rpx; margin: 20rpx;
} }
.bill-title { .bill-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 10rpx; margin-bottom: 10rpx;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10rpx; gap: 10rpx;
} }
.bill-desc { .bill-desc {
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
color: #999; color: #999;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.bill-status { .bill-status {
padding: 2rpx 16rpx; padding: 2rpx 16rpx;
border-radius: 30rpx; border-radius: 30rpx;
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
background-color: #E34D59; background-color: #e34d59;
} }
.balance-normal { .balance-normal {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
} }
.balance-debt { .balance-debt {
font-size: 28rpx; font-size: 28rpx;
color: #E34D59; color: #e34d59;
} }
.arrow { .arrow {
width: 12rpx; width: 12rpx;
height: 12rpx; height: 12rpx;
border-right: 4rpx solid #ccc; border-right: 4rpx solid #ccc;
border-bottom: 4rpx solid #ccc; border-bottom: 4rpx solid #ccc;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.add-section { .add-section {
background-color: #fff; background-color: #fff;
padding: 30rpx; padding: 30rpx;
border-radius: 10rpx; border-radius: 10rpx;
} }
.section-header { .section-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.section-title { .section-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
.record-link { .record-link {
font-size: 28rpx; font-size: 28rpx;
color: #1677ff; color: #1677ff;
} }
.grid-list { .grid-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
gap: 26rpx; gap: 26rpx;
} }
.grid-item { .grid-item {
width: calc(25% - 50rpx); width: calc(25% - 50rpx);
background-color: #F6F9FE; background-color: #f6f9fe;
border-radius: 12rpx; border-radius: 12rpx;
padding: 20rpx; padding: 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.icon-box { .icon-box {
width: 88rpx; width: 88rpx;
height: 88rpx; height: 88rpx;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 40rpx; font-size: 40rpx;
} }
.iconStyle { .iconStyle {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.item-name { .item-name {
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
.status-bar { .status-bar {
width: 100vw; width: 100vw;
height: 46px; height: 46px;
} }
</style> </style>