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

75
huakai-app/App.vue
View File

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

147
huakai-app/manifest.json
View File

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

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

@@ -92,14 +92,14 @@ export const upDateMyHouse = (data) => {
// =========问卷调查=========
// 问卷列表
export const getQuestionnaireList = (data) => {
return get('/api/resident/questionnaire/list',data)
return get('/api/resident/questionnaire/list', 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)
}
// =====投诉意见=======
@@ -109,19 +109,19 @@ export const getComplainType = () => {
}
// 获取投诉列表
export const getComplainList = (data) => {
return get('/complain/getComplainList',data)
return get('/complain/getComplainList', data)
}
// 提交投诉建议
export const addComplain = (data) => {
return post('/complain/add',data)
return post('/complain/add', data)
}
// 投诉详情
export const getComplainDetail = (data) => {
return get('/complain/detail',data)
return get('/complain/detail', 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) => {
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
}

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

@@ -1,18 +1,34 @@
let baseUrl = '';
if (process.env.NODE_ENV === 'development') {
// baseUrl = 'https://wuyeapi.ckdzkj.com'; // 开发环境
baseUrl = "https://wuyeapi.bugtc.com"
baseUrl = 'https://wuyeapi.ckdzkj.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 {
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 字段的错误对象
*/
export function showApiError(msg) {
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") {
@@ -36,7 +52,10 @@ export default function request(url, data = {}, method = "GET") {
// HTTP 失败
if (res.statusCode !== 200) {
reject({ msg: `请求异常 ${res.statusCode}`, code: res.statusCode });
reject({
msg: `请求异常 ${res.statusCode}`,
code: res.statusCode
});
return;
}
@@ -44,7 +63,11 @@ export default function request(url, data = {}, method = "GET") {
// token 过期 — 清除登录态，提示用户，但不强制跳转（用户可继续浏览非敏感页面）
if (resData.code === 401) {
uni.showToast({ title: '登录已过期，请重新登录', icon: 'none', duration: 2000 });
uni.showToast({
title: '登录已过期，请重新登录',
icon: 'none',
duration: 2000
});
uni.removeStorageSync('token');
uni.removeStorageSync('userId');
// 使用 navigateTo 而非 reLaunch，用户可通过返回按钮退出登录页
@@ -53,11 +76,16 @@ export default function request(url, data = {}, method = "GET") {
url: '/pageSubPack/loginSub/pwd-login',
fail: () => {
// 如果 navigateTo 失败（如页面栈满），则用 reLaunch
uni.reLaunch({ url: '/pageSubPack/loginSub/pwd-login' });
uni.reLaunch({
url: '/pageSubPack/loginSub/pwd-login'
});
}
});
}, 1500);
reject({ msg: '登录过期', code: 401 });
reject({
msg: '登录过期',
code: 401
});
return;
}
@@ -68,14 +96,26 @@ export default function request(url, data = {}, method = "GET") {
// 业务失败（code === 500 统一 showToast 展示完整 msg）
else {
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) => {
uni.hideLoading();
reject({ msg: '网络异常', code: -1, raw: err });
reject({
msg: '网络异常',
code: -1,
raw: err
});
}
});
});

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

@@ -1,5 +1,9 @@
// 服务器地址（与 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
@@ -7,7 +11,9 @@ const baseUrl = 'http://192.168.0.239:8080';
* 解决编辑回显后重新上传的问题
*/
import { reactive } from 'vue'
import {
reactive
} from 'vue'
/**
* @param {Object} options 配置
@@ -87,12 +93,16 @@ export function useImageUpload(options = {}) {
const uploadImage = () => {
// 如果没有新选择临时文件，直接返回已有的服务器URL
if (!state.tempFilePath) {
return Promise.resolve({ url: state.serverUrl })
return Promise.resolve({
url: state.serverUrl
})
}
// 如果已经有服务器URL且没有重新选择，也直接返回
if (state.serverUrl && !state.tempFilePath) {
return Promise.resolve({ url: state.serverUrl })
return Promise.resolve({
url: state.serverUrl
})
}
state.uploading = true
@@ -118,11 +128,14 @@ export function useImageUpload(options = {}) {
const data = JSON.parse(res.data)
if (data.code === 200 && data.data) {
// 更新服务器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.tempFilePath = null
resolve({ url })
resolve({
url
})
} else {
uni.showToast({
title: data.msg || '上传失败',
@@ -164,7 +177,9 @@ export function useImageUpload(options = {}) {
return await uploadImage()
}
// 否则返回已有的服务器URL
return { url: state.serverUrl }
return {
url: state.serverUrl
}
}
/**

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

@@ -8,52 +8,55 @@
<!-- 手机号输入框 -->
<view class="input-item">
<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>
<uni-easyinput class="input-content" type="number" v-model="phoneNumber" trim="all"
placeholder="请输入手机号" :inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle">
</uni-easyinput>
<uni-easyinput
class="input-content"
type="number"
v-model="phoneNumber"
trim="all"
placeholder="请输入手机号"
:inputBorder="false"
maxlength="11"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
</view>
<!-- 验证码输入 + 获取验证码按钮 -->
<view class="input-item verify-item">
<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> -->
</view>
<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" trim="all"
placeholder="请输入验证码" :inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle">
</uni-easyinput>
<button
class="get-verify-btn"
:disabled="!canGetVerify || countDown > 0"
@click="getVerifyCode"
>
<uni-easyinput
class="input-content verify-input"
type="number"
v-model="verifyCode"
trim="all"
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>
<!-- 下一步 -->
<button
class="forget-btn"
:disabled="!canRegister"
@click="handleNext"
>
下一步
</button>
<button class="forget-btn" :disabled="!canRegister" @click="handleNext">下一步</button>
</view>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue';
import {getSendCode} from '../api/api.js'
import { showApiError } from '../api/request.js'
import { getSendCode } from '../api/api.js';
import { showApiError, imgBaseUrl } from '../api/request.js';
// ====响应式数据======
const phoneNumber = ref('')
const verifyCode = ref('')
const phoneNumber = ref('');
const verifyCode = ref('');
const countDown = ref(0)
const countDown = ref(0);
let timer = null;
const placeholderStyle = ref('font-size:24rpx')
const placeholderStyle = ref('font-size:24rpx');
// ========== 计算属性 ==========
// 是否可获取验证码（手机号格式正确）
@@ -66,11 +69,12 @@ const canGetVerify = computed(() => {
const getVerifyCode = () => {
if (!canGetVerify.value) return;
let params = {
phone:phoneNumber.value,
scene:'reset'
}
getSendCode(params).then(res =>{
if(res.code === 200){
phone: phoneNumber.value,
scene: 'reset'
};
getSendCode(params)
.then((res) => {
if (res.code === 200) {
uni.showToast({
title: '验证码已发送',
icon: 'success'
@@ -91,48 +95,45 @@ const getVerifyCode = () => {
// icon: 'error'
// });
}
}).catch(err =>{
showApiError(err)
})
.catch((err) => {
showApiError(err);
});
};
// 是否下一步
const canRegister = computed(() => {
const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位
const verifyReg = /^\d{6}$/; // 验证码6位
return phoneReg.test(phoneNumber.value)
&& verifyReg.test(verifyCode.value)
return phoneReg.test(phoneNumber.value) && verifyReg.test(verifyCode.value);
});
// 下一步
const handleNext = () =>{
const handleNext = () => {
// 把参数存到本地缓存
uni.setStorageSync('tempChangePwdParams', {
phoneNumber:phoneNumber.value,
phoneNumber: phoneNumber.value,
verifyCode: verifyCode.value
});
if(!canRegister.value){
uni.showToast({ title: '请输入',icon: 'error'});
return
if (!canRegister.value) {
uni.showToast({ title: '请输入', icon: 'error' });
return;
}
uni.navigateTo({
url: '/pageSubPack/loginSub/change-pwd'
});
}
};
// 返回上一页
const goBack = () => {
uni.navigateBack();
};
</script>
<style scoped>
.forget-page{
.forget-page {
padding: 20rpx 40rpx 40rpx;
min-height: 100vh;
background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF );
background: repeating-linear-gradient(180deg, #e2f0ff, #f6faff);
}
.status_bar{
.status_bar {
width: 100%;
height: 46px;
}
@@ -225,11 +226,11 @@ const goBack = () => {
background-color: #ccc;
color: #fff;
}
.get-verify-btn::after{
.get-verify-btn::after {
border-radius: 50px;
}
/* 下一步按钮 */
.forget-btn{
.forget-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
@@ -240,14 +241,12 @@ const goBack = () => {
margin-bottom: 40rpx;
margin-top: 66rpx;
}
.forget-btn:disabled{
.forget-btn:disabled {
background-color: #99c8ff;
color: #fff;
}
/* 禁用按钮边框 */
.forget-btn:after{
.forget-btn:after {
border-radius: 8px;
}
</style>

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

@@ -15,56 +15,52 @@
<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>
<image :src="`${imgBaseUrl}/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>
<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>
<image :src="`${imgBaseUrl}/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"
>
<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 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>
<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>
<text class="agreement-text" @click.stop="goToPrivacy">
我已阅读并同意
<text class="agreePrivacy" @click.stop="goToPrivacy">《用户隐私政策》</text>
</text>
</view>
<!-- 登录按钮 -->
<button
class="login-btn"
@click="handleLogin"
>
登录
</button>
<button class="login-btn" @click="handleLogin">登录</button>
<!-- 底部链接 -->
<view class="bottom-link">
@@ -76,16 +72,16 @@
<script setup>
import { ref, computed, onUnmounted } from 'vue';
import {getLoginBySms,getSendCode} from '../api/api.js'
import { showApiError } from '../api/request.js'
import { saveLoginData } from '../api/auth.js'
import { getLoginBySms, getSendCode } from '../api/api.js';
import { showApiError, imgBaseUrl } from '../api/request.js';
import { saveLoginData } from '../api/auth.js';
// ========== 响应式数据 ==========
// 手机号
const phoneNumber = ref('');
// 验证码
const verifyCode = ref('');
const placeholderStyle = ref('font-size:24rpx')
const placeholderStyle = ref('font-size:24rpx');
// 是否同意协议
const agreeAgreement = ref(false); // 默认不勾选
// 倒计时（秒）
@@ -131,20 +127,21 @@ const toggleAgreement = () => {
// 跳转隐私协议
const goToPrivacy = () => {
uni.navigateTo({
url:'/pageSubPack/loginSub/privacy',
})
}
url: '/pageSubPack/loginSub/privacy'
});
};
// 获取验证码
const getVerifyCode = () => {
if (!canGetVerify.value) return;
let params = {
phone:phoneNumber.value,
scene:'login'
}
phone: phoneNumber.value,
scene: 'login'
};
uni.showLoading({ title: '发送中...', mask: true });
getSendCode(params).then(res =>{
if(res.code === 200){
getSendCode(params)
.then((res) => {
if (res.code === 200) {
uni.hideLoading();
uni.showToast({
title: '验证码已发送',
@@ -160,10 +157,10 @@ const getVerifyCode = () => {
}
}, 1000);
}
}).catch(err => {
showApiError(err)
})
.catch((err) => {
showApiError(err);
});
};
// 登录处理
@@ -190,32 +187,33 @@ const handleLogin = () => {
}
uni.showLoading({ title: '登录中...', mask: true });
let params = {
phone:phoneNumber.value,
smsCode:verifyCode.value,
scene:'login',
}
getLoginBySms(params).then(res =>{
if(res.code === 200){
if(res.data){
phone: phoneNumber.value,
smsCode: verifyCode.value,
scene: 'login'
};
getLoginBySms(params)
.then((res) => {
if (res.code === 200) {
if (res.data) {
saveLoginData(res.data);
uni.hideLoading();
uni.showToast({ title: '登录成功', icon: 'success' });
setTimeout(() =>{
setTimeout(() => {
// 登录成功后返回来源页
uni.navigateBack({
fail: () => {
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
}
});
},1500)
}, 1500);
}
}
}).catch(err => {
showApiError(err)
})
.catch((err) => {
showApiError(err);
});
uni.hideLoading()
uni.hideLoading();
};
// ========== 生命周期 ==========
@@ -233,12 +231,12 @@ onUnmounted(() => {
padding: 80rpx 40rpx 40rpx;
/* background-color: #f8f9fa; */
min-height: 100vh;
background: repeating-linear-gradient(to bottom, #E2F0FF, #F6FAFF );
background: repeating-linear-gradient(to bottom, #e2f0ff, #f6faff);
}
.status_bar {
.status_bar {
height: var(--status-bar-height, 88rpx);
width: 100%;
}
}
/* ===== 自定义导航：返回/取消按钮 ===== */
.custom-nav {
@@ -248,9 +246,9 @@ onUnmounted(() => {
display: inline-flex;
align-items: center;
padding: 10rpx 20rpx;
background: rgba(255,255,255,0.9);
background: rgba(255, 255, 255, 0.9);
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 {
font-size: 28rpx;
@@ -344,7 +342,7 @@ onUnmounted(() => {
color: #fff;
border-radius: 50px;
}
.get-verify-btn::after{
.get-verify-btn::after {
border-radius: 50px;
}
@@ -362,8 +360,8 @@ onUnmounted(() => {
color: #666;
margin-left: 10rpx;
}
.agreePrivacy{
color: #2F77FD;
.agreePrivacy {
color: #2f77fd;
}
/* 登录按钮 */
.login-btn {
@@ -383,7 +381,7 @@ onUnmounted(() => {
color: #fff;
}
/* 禁用按钮边框 */
button:after{
button:after {
border-radius: 8px;
}

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

@@ -15,44 +15,44 @@
<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>
<image :src="`${imgBaseUrl}/images/login/phone.png`" mode="" style="height: 100%; width: 100%"></image>
</view>
<uni-easyinput class="input-content" type="text" v-model="phoneNumber"
placeholder="请输入帐号" :inputBorder="false" :placeholderStyle="placeholderStyle">
</uni-easyinput>
<uni-easyinput
class="input-content"
type="text"
v-model="phoneNumber"
placeholder="请输入帐号"
:inputBorder="false"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
</view>
<!-- 密码输入框 -->
<view class="input-item">
<view class="input-icon">
<!-- <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>
<uni-easyinput class="input-content" type="password" v-model="password"
placeholder="请输入密码" :inputBorder="false" :placeholderStyle="placeholderStyle">
</uni-easyinput>
<uni-easyinput
class="input-content"
type="password"
v-model="password"
placeholder="请输入密码"
:inputBorder="false"
:placeholderStyle="placeholderStyle"
></uni-easyinput>
</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>
<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="agreement-text" @click.stop="goToPrivacy">
我已阅读并同意
<text class="agreePrivacy" @click.stop="goToPrivacy">《用户隐私政策》</text>
</text>
</view>
@@ -60,12 +60,7 @@
</view>
<!-- 登录按钮 -->
<button
class="login-btn"
@click="handleLogin"
>
登录
</button>
<button class="login-btn" @click="handleLogin">登录</button>
<!-- 底部链接 -->
<view class="bottom-link">
@@ -77,17 +72,16 @@
<script setup>
import { ref, computed } from 'vue';
import {onLoad} from "@dcloudio/uni-app"
import {getLoginPassword} from '../api/api.js'
import { showApiError } from '../api/request.js'
import { saveLoginData } from '../api/auth.js'
import { onLoad } from '@dcloudio/uni-app';
import { getLoginPassword } from '../api/api.js';
import { showApiError, imgBaseUrl } from '../api/request.js';
import { saveLoginData } from '../api/auth.js';
// 响应式数据
const phoneNumber = ref('');
const password = ref('');
const agreeAgreement = ref(false); // 默认勾选
const placeholderStyle = ref('font-size:24rpx')
const placeholderStyle = ref('font-size:24rpx');
// 计算属性：是否可登录（帐号+密码+协议都满足）
const canLogin = computed(() => {
@@ -104,9 +98,9 @@ const toggleAgreement = () => {
// 跳转隐私协议
const goToPrivacy = () => {
uni.navigateTo({
url:'/pageSubPack/loginSub/privacy',
})
}
url: '/pageSubPack/loginSub/privacy'
});
};
// 检查表单
const checkForm = () => {};
@@ -121,13 +115,10 @@ const handleCancel = () => {
}
};
onLoad(() =>{
});
onLoad(() => {});
// 登录逻辑
const handleLogin = () => {
if (!phoneNumber.value) {
uni.showToast({ title: '请输入账号', icon: 'none' });
return;
@@ -148,35 +139,35 @@ const handleLogin = () => {
uni.showToast({ title: '密码不能超过 16 位', icon: 'none' });
return;
}
if(!agreeAgreement.value){
if (!agreeAgreement.value) {
uni.showToast({ title: '请勾选协议', icon: 'none' });
return;
}
uni.showLoading({ title: '登录中...', mask: true });
let params = {
username:phoneNumber.value,
password:password.value
}
getLoginPassword(params).then(res =>{
if(res.code === 200){
username: phoneNumber.value,
password: password.value
};
getLoginPassword(params)
.then((res) => {
if (res.code === 200) {
saveLoginData(res.data);
uni.hideLoading();
uni.showToast({ title: '登录成功', icon: 'success' });
setTimeout(() =>{
setTimeout(() => {
// 登录成功后返回来源页
uni.navigateBack({
fail: () => {
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
}
});
},1000)
}, 1000);
}
}).catch(err => {
// console.log(err)
showApiError(err)
})
.catch((err) => {
// console.log(err)
showApiError(err);
});
};
</script>
@@ -185,12 +176,12 @@ const handleLogin = () => {
padding: 80rpx 40rpx 40rpx;
/* background-color: #f8f9fa; */
min-height: 100vh;
background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF );
background: repeating-linear-gradient(180deg, #e2f0ff, #f6faff);
}
.status_bar {
.status_bar {
height: var(--status-bar-height, 88rpx);
width: 100%;
}
}
/* ===== 自定义导航：返回/取消按钮 ===== */
.custom-nav {
@@ -200,9 +191,9 @@ const handleLogin = () => {
display: inline-flex;
align-items: center;
padding: 10rpx 20rpx;
background: rgba(255,255,255,0.9);
background: rgba(255, 255, 255, 0.9);
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 {
font-size: 28rpx;
@@ -275,8 +266,8 @@ const handleLogin = () => {
color: #666;
margin-left: 10rpx;
}
.agreePrivacy{
color: #2F77FD;
.agreePrivacy {
color: #2f77fd;
}
.forget-pwd {
@@ -299,10 +290,9 @@ const handleLogin = () => {
.login-btn:disabled {
background-color: #99c8ff;
color: #fff;
}
/* 禁用按钮边框 */
button:after{
button:after {
border-radius: 8px;
}

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

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

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

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

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

@@ -1,10 +1,7 @@
<template>
<template>
<view class="contentStyle" style="">
<view class="status-bar"></view>
<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
:border="false">
</uni-nav-bar>
<uni-nav-bar :title="'新增' + paymentType + '缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false"></uni-nav-bar>
<!-- 表单区域 -->
<scroll-view class="page" scroll-y="true">
@@ -12,11 +9,11 @@
<!-- 顶部蓝色标题栏 -->
<view class="header-card">
<view class="header-icon">
<image class="iconStyle"
:src="paymentType=='燃气'?'https://wuyeadmin.bugtc.com/images/propertyImgs/gas.png':'https://wuyeadmin.bugtc.com/images/propertyImgs/heating.png'">
></image>
<image class="iconStyle" :src="paymentType == '燃气' ? `${imgBaseUrl}/images/propertyImgs/gas.png` : `${imgBaseUrl}/images/propertyImgs/heating.png`">
>
</image>
</view>
<text class="header-title">{{paymentType+'费'}}</text>
<text class="header-title">{{ paymentType + '费' }}</text>
</view>
<!-- 缴费信息卡片 -->
@@ -34,12 +31,8 @@
</view>
</view>
</view>
</view>
<!-- 快速获取户号 底部弹窗 -->
<view v-if="showPopup" class="popup-mask" @click="showPopup = false">
<view class="popup-content" @click.stop>
@@ -65,8 +58,6 @@
</view>
</view>
</view>
</scroll-view>
<!-- 底部协议和立即缴费按钮 -->
<view class="bottom-area">
@@ -77,72 +68,56 @@
<text class="agreement-text">我已阅并同意</text>
<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
</view>
<button class="submit-btn" @click="handleSubmit">
立即缴费
</button>
<button class="submit-btn" @click="handleSubmit">立即缴费</button>
</view>
</view>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { onShow, onReady, onReachBottom, onLoad, onUnload, onPullDownRefresh } from '@dcloudio/uni-app';
import { baseUrl, imgBaseUrl } from '/pageSubPack/api/request.js';
// 响应式数据
const statusBarHeight = ref(20);
const paymentType = ref(uni.getStorageSync('addPaymentType'));
const userNo = ref('');
const isAgree = ref(false);
const showPopup = ref(false);
</template>
<script setup>
import {
ref,
onMounted,
computed
} from 'vue'
import {
onShow,
onReady,
onReachBottom,
onLoad,
onUnload,
onPullDownRefresh
} from '@dcloudio/uni-app'
// 响应式数据
const statusBarHeight = ref(20)
const paymentType = ref(uni.getStorageSync('addPaymentType'))
const userNo = ref('')
const isAgree = ref(false)
const showPopup = ref(false)
// 生命周期
onShow(() => {})
onMounted(() => {})
onReady(() => {
// 生命周期
onShow(() => {});
onMounted(() => {});
onReady(() => {
// nextTick 用法
// nextTick(() => {})
})
});
// 勾选协议
const handleAgreeChange = (e) => {
isAgree.value = e.detail.value.length > 0
}
// 勾选协议
const handleAgreeChange = (e) => {
isAgree.value = e.detail.value.length > 0;
};
// 协议链接点击
const handleProtocol = () => {
uni.navigateTo({})
}
// 协议链接点击
const handleProtocol = () => {
uni.navigateTo({});
};
// 提交
const handleSubmit = () => {
// 提交
const handleSubmit = () => {
if (!userNo.value) {
uni.showToast({
title: '请输入户号',
icon: 'none'
})
return
});
return;
}
if (!isAgree.value) {
uni.showToast({
title: '请先同意协议',
icon: 'none'
})
return
});
return;
}
uni.showModal({
@@ -153,80 +128,79 @@
uni.showLoading({
title: '提交中...',
mask: true
})
});
setTimeout(() => {
uni.showToast({
title: '提交成功',
icon: 'success'
})
}, 1000)
});
}, 1000);
setTimeout(() => {
uni.hideLoading()
goNext()
}, 2500)
uni.hideLoading();
goNext();
}, 2500);
}
}
})
}
});
};
// 跳转成功页
const goNext = () => {
// 跳转成功页
const goNext = () => {
uni.redirectTo({
url: '/pageSubPack/payment-list/addPaymentSuccess'
})
}
});
};
// 切换（注释保留）
const goToChange = () => {
// 切换（注释保留）
const goToChange = () => {
// uni.redirectTo({
// url: '/pageSubPack/payment-list/selectPaymentEntity'
// })
}
};
// 返回
const goBack = () => {
// 返回
const goBack = () => {
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
}
</script>
<style lang="scss">
page {
};
</script>
<style lang="scss">
page {
background: #f9f9f9;
}
</style>
}
</style>
<style scoped>
.contentStyle {
<style scoped>
.contentStyle {
display: flex;
flex-direction: column;
height: 100vh;
/* 关键：占满屏幕高度 */
background-color: #f9f9f9;
}
}
.page {
.page {
flex: 1;
overflow-y: auto;
padding: 0px 40rpx;
box-sizing: border-box;
}
}
.container {
.container {
border-radius: 10rpx;
}
}
/* 顶部标题栏 */
.header-card {
/* 顶部标题栏 */
.header-card {
background: #fff;
padding: 30rpx;
display: flex;
align-items: center;
border-bottom: 2rpx solid #ededed;
}
}
.header-icon {
.header-icon {
width: 56rpx;
height: 56rpx;
background-color: #fff;
@@ -235,115 +209,114 @@
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
}
.iconStyle {
.iconStyle {
width: 100%;
height: 100%;
}
}
.icon-fire {
.icon-fire {
font-size: 32rpx;
color: #4080ff;
}
}
.header-title {
.header-title {
font-size: 32rpx;
font-weight: bold;
}
}
/* 信息卡片 */
.info-card {
/* 信息卡片 */
.info-card {
background-color: #fff;
border-radius: 10rpx;
/* padding: 30rpx; */
margin-bottom: 40rpx;
}
}
.form-item {
.form-item {
/* margin-bottom: 40rpx; */
border-bottom: 2rpx solid #ededed;
padding: 30rpx;
}
}
.form-item:last-child {
.form-item:last-child {
margin-bottom: 0;
}
}
.label {
.label {
display: block;
font-size: 28rpx;
color: #222;
margin-bottom: 20rpx;
}
}
.company-name {
.company-name {
display: block;
font-size: 32rpx;
color: #333;
font-weight: 600;
}
}
.input-wrapper {
.input-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.input-field {
.input-field {
flex: 1;
font-size: 32rpx;
color: #333;
padding: 10rpx 0;
border: none;
outline: none;
}
}
.input-field::placeholder {
.input-field::placeholder {
color: #ccc;
}
}
.help-link {
.help-link {
font-size: 28rpx;
color: #4080ff;
white-space: nowrap;
margin-left: 20rpx;
}
}
/* 底部区域 */
.bottom-area {
/* 底部区域 */
.bottom-area {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
box-sizing: border-box;
}
}
.agreement {
.agreement {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
}
.agreement checkbox {
.agreement checkbox {
transform: scale(0.8);
margin-right: 10rpx;
}
}
.agreement-text {
.agreement-text {
font-size: 24rpx;
color: #333;
}
}
.agreement-link {
.agreement-link {
font-size: 28rpx;
color: #4080ff;
margin-left: 10rpx;
}
}
.submit-btn {
.submit-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
@@ -354,16 +327,16 @@
font-weight: 500;
border: none;
outline: none;
}
}
.submit-btn[disabled] {
.submit-btn[disabled] {
background-color: #a0c4ff;
color: #fff;
opacity: 0.7;
}
}
/* 弹窗遮罩层 */
.popup-mask {
/* 弹窗遮罩层 */
.popup-mask {
position: fixed;
top: 0;
left: 0;
@@ -373,27 +346,27 @@
z-index: 999;
display: flex;
align-items: flex-end;
}
}
/* 弹窗内容 */
.popup-content {
/* 弹窗内容 */
.popup-content {
width: 100%;
background-color: #fff;
border-radius: 20rpx 20rpx 0 0;
padding: 30rpx 40rpx 60rpx;
box-sizing: border-box;
animation: slideUp 0.3s ease-out;
}
}
/* 弹窗标题栏 */
.popup-header {
/* 弹窗标题栏 */
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40rpx;
}
}
.popup-title {
.popup-title {
font-size: 32rpx;
line-height: 60rpx;
font-weight: bold;
@@ -403,31 +376,30 @@
/* align-items: center; */
justify-content: space-evenly;
border-bottom: 2rpx solid #ebebeb;
}
}
.popup-close {
.popup-close {
font-size: 48rpx;
color: #999;
line-height: 1;
}
}
/* 弹窗列表 */
.popup-list {
/* 弹窗列表 */
.popup-list {
padding: 0 10rpx;
}
}
.popup-item {
.popup-item {
display: flex;
align-items: flex-start;
margin-bottom: 40rpx;
}
}
.popup-item:last-child {
.popup-item:last-child {
margin-bottom: 0;
}
}
.item-number {
.item-number {
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
@@ -439,29 +411,29 @@
color: #4080ff;
margin-right: 20rpx;
flex-shrink: 0;
}
}
.item-content {
.item-content {
flex: 1;
display: flex;
flex-direction: column;
}
}
.item-title {
.item-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 16rpx;
}
}
.item-desc {
.item-desc {
font-size: 28rpx;
color: #666;
line-height: 1.5;
}
}
/* 弹窗动画 */
/* @keyframes slideUp {
/* 弹窗动画 */
/* @keyframes slideUp {
from {
transform: translateY(100%);
}
@@ -471,8 +443,8 @@
}
} */
/* 成功提示弹窗 */
.toast-mask {
/* 成功提示弹窗 */
.toast-mask {
position: fixed;
top: 0;
left: 0;
@@ -483,9 +455,9 @@
justify-content: center;
background-color: transparent;
z-index: 9999;
}
}
.toast-content {
.toast-content {
background-color: rgba(0, 0, 0, 0.8);
padding: 40rpx 60rpx;
border-radius: 8rpx;
@@ -493,9 +465,9 @@
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.toast-icon {
.toast-icon {
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
@@ -508,15 +480,15 @@
display: flex;
align-items: center;
justify-content: center;
}
}
.toast-text {
.toast-text {
color: #fff;
font-size: 28rpx;
}
}
.status-bar {
.status-bar {
width: 100vw;
height: 46px;
}
</style>
}
</style>

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

File diff suppressed because it is too large Load Diff

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

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

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

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

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

@@ -2,19 +2,12 @@
<view class="guide-page">
<view class="status-bar"></view>
<!-- 引导内容滑动容器 -->
<swiper
class="guide-swiper"
:current="currentStep"
@change="handleSwiperChange"
:disable-scroll="false"
:indicator-dots="false"
:mode="mode"
>
<swiper class="guide-swiper" :current="currentStep" @change="handleSwiperChange" :disable-scroll="false" :indicator-dots="false" :mode="mode">
<!-- 便捷服务 -->
<swiper-item>
<view class="guide-item">
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide1.png" mode="aspectFit" class="img-content"></image>
<image :src="`${imgBaseUrl}/images/guide1.png`" mode="aspectFit" class="img-content"></image>
</view>
<view class="guide-text">
<view class="guide-title">便捷服务</view>
@@ -27,7 +20,7 @@
<swiper-item>
<view class="guide-item">
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide2.png" mode="aspectFit" class="img-content"></image>
<image :src="`${imgBaseUrl}/images/guide2.png`" mode="aspectFit" class="img-content"></image>
</view>
<view class="guide-text">
<view class="guide-title">高效管理</view>
@@ -40,7 +33,7 @@
<swiper-item>
<view class="guide-item">
<view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide3.png" mode="aspectFit" class="img-content"></image>
<image :src="`${imgBaseUrl}/images/guide3.png`" mode="aspectFit" class="img-content"></image>
</view>
<view class="guide-text">
<view class="guide-title">安全保障</view>
@@ -59,11 +52,7 @@
<!-- 操作按钮 -->
<view class="guide-btn-wrap">
<button
class="guide-btn"
:class="{ primary: currentStep === 2 }"
@click="handleBtnClick"
>
<button class="guide-btn" :class="{ primary: currentStep === 2 }" @click="handleBtnClick">
{{ currentStep === 2 ? '立即体验' : '下一步' }}
</button>
</view>
@@ -72,11 +61,11 @@
<script setup>
import { ref } from 'vue';
import { imgBaseUrl } from '@/pageSubPack/api/request.js';
// ========== 响应式数据 ==========
// 当前引导步骤（0/1/2）
const currentStep = ref(0);
const mode = ref("default")
const mode = ref('default');
// ========== 方法 ==========
// 滑动swiper切换步骤
@@ -104,7 +93,7 @@ const handleBtnClick = () => {
.guide-page {
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, #E2F0FF, #F6FAFF);
background: linear-gradient(to bottom, #e2f0ff, #f6faff);
display: flex;
flex-direction: column;
align-items: center;

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

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