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

31
huakai-app/App.vue
View File

@@ -1,25 +1,33 @@
<script setup>
import { onLaunch } from '@dcloudio/uni-app'
import { onLaunch, onShow } from '@dcloudio/uni-app';
import { captureAppLaunchData, capturePaymentResult } from '/pageSubPack/api/apiSub.js';
// 应用启动时执行
onLaunch(() => {
console.log('App 启动')
console.log('App 启动');
// #ifdef APP-PLUS
// 只有 App 平台才获取 CID
getPushCID()
getPushCID();
// #endif
})
});
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,9 +36,9 @@
// })
},
fail: (err) => {
console.error('获取推送 CID 失败', err)
console.error('获取推送 CID 失败', err);
}
})
});
}
// export default {
// on
@@ -41,12 +49,11 @@
// console.log('App Hide')
// },
// }
</script>
<style lang="scss">
@import "@/uni_modules/uview-plus/index.scss";
@import '@/uni_modules/uview-plus/index.scss';
/*每个页面公共css */
</style>

5
huakai-app/manifest.json
View File

@@ -96,7 +96,7 @@
"quickapp": {},
/* 小程序特有相关 */
"mp-weixin": {
"appid" : "wx40625124315d2de1",
"appid": "wxa6184796ceba80ca",
"setting": {
"urlCheck": false
},
@@ -104,9 +104,6 @@
"permission": {
"scope.camera": {
"desc": "用于扫码"
},
"scope.userLocation" : {
"desc" : "你的位置信息将用于定位选择"
}
},
"usingComponents": true

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": {

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

@@ -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
}
}
/**

81
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');
// ========== 计算属性 ==========
// 是否可获取验证码（手机号格式正确）
@@ -68,8 +71,9 @@ const getVerifyCode = () => {
let params = {
phone: phoneNumber.value,
scene: 'reset'
}
getSendCode(params).then(res =>{
};
getSendCode(params)
.then((res) => {
if (res.code === 200) {
uni.showToast({
title: '验证码已发送',
@@ -91,19 +95,17 @@ 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 = () => {
@@ -114,23 +116,22 @@ const handleNext = () =>{
});
if (!canRegister.value) {
uni.showToast({ title: '请输入', icon: 'error' });
return
return;
}
uni.navigateTo({
url: '/pageSubPack/loginSub/change-pwd'
});
}
};
// 返回上一页
const goBack = () => {
uni.navigateBack();
};
</script>
<style scoped>
.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 {
width: 100%;
@@ -248,6 +249,4 @@ const goBack = () => {
.forget-btn:after {
border-radius: 8px;
}
</style>

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

@@ -15,26 +15,34 @@
<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>
@@ -42,29 +50,17 @@
<!-- 协议勾选 -->
<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,9 +127,9 @@ const toggleAgreement = () => {
// 跳转隐私协议
const goToPrivacy = () => {
uni.navigateTo({
url:'/pageSubPack/loginSub/privacy',
})
}
url: '/pageSubPack/loginSub/privacy'
});
};
// 获取验证码
const getVerifyCode = () => {
@@ -141,9 +137,10 @@ const getVerifyCode = () => {
let params = {
phone: phoneNumber.value,
scene: 'login'
}
};
uni.showLoading({ title: '发送中...', mask: true });
getSendCode(params).then(res =>{
getSendCode(params)
.then((res) => {
if (res.code === 200) {
uni.hideLoading();
uni.showToast({
@@ -160,10 +157,10 @@ const getVerifyCode = () => {
}
}, 1000);
}
}).catch(err => {
showApiError(err)
})
.catch((err) => {
showApiError(err);
});
};
// 登录处理
@@ -192,9 +189,10 @@ const handleLogin = () => {
let params = {
phone: phoneNumber.value,
smsCode: verifyCode.value,
scene:'login',
}
getLoginBySms(params).then(res =>{
scene: 'login'
};
getLoginBySms(params)
.then((res) => {
if (res.code === 200) {
if (res.data) {
saveLoginData(res.data);
@@ -207,15 +205,15 @@ const handleLogin = () => {
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
}
});
},1500)
}, 1500);
}
}
}).catch(err => {
showApiError(err)
})
.catch((err) => {
showApiError(err);
});
uni.hideLoading()
uni.hideLoading();
};
// ========== 生命周期 ==========
@@ -233,7 +231,7 @@ 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 {
height: var(--status-bar-height, 88rpx);
@@ -363,7 +361,7 @@ onUnmounted(() => {
margin-left: 10rpx;
}
.agreePrivacy {
color: #2F77FD;
color: #2f77fd;
}
/* 登录按钮 */
.login-btn {

94
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;
@@ -156,8 +147,9 @@ const handleLogin = () => {
let params = {
username: phoneNumber.value,
password: password.value
}
getLoginPassword(params).then(res =>{
};
getLoginPassword(params)
.then((res) => {
if (res.code === 200) {
saveLoginData(res.data);
uni.hideLoading();
@@ -169,14 +161,13 @@ const handleLogin = () => {
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
}
});
},1000)
}, 1000);
}
}).catch(err => {
// console.log(err)
showApiError(err)
})
.catch((err) => {
// console.log(err)
showApiError(err);
});
};
</script>
@@ -185,7 +176,7 @@ 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 {
height: var(--status-bar-height, 88rpx);
@@ -276,7 +267,7 @@ const handleLogin = () => {
margin-left: 10rpx;
}
.agreePrivacy {
color: #2F77FD;
color: #2f77fd;
}
.forget-pwd {
@@ -299,7 +290,6 @@ const handleLogin = () => {
.login-btn:disabled {
background-color: #99c8ff;
color: #fff;
}
/* 禁用按钮边框 */
button:after {

118
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,24 +94,17 @@
</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'
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 placeholderStyle = ref('font-size:24rpx');
// 协议勾选
const agreeAgreement = ref(false);
// 验证码倒计时
@@ -124,11 +125,7 @@ import { showApiError } from '../api/request.js'
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;
});
// ========== 方法 ==========
@@ -144,21 +141,21 @@ import { showApiError } from '../api/request.js'
// 跳转隐私协议
const goToPrivacy = () => {
uni.navigateTo({
url: '/pageSubPack/loginSub/privacy',
})
}
url: '/pageSubPack/loginSub/privacy'
});
};
// 检查表单状态（实时更新按钮状态）
const checkForm = () => {};
// 获取验证码
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,11 +177,10 @@ import { showApiError } from '../api/request.js'
// icon: 'error'
// });
}
}).catch(err => {
showApiError(err)
})
.catch((err) => {
showApiError(err);
});
};
// 处理注册逻辑
@@ -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'
@@ -286,7 +284,7 @@ import { showApiError } from '../api/request.js'
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 {
@@ -413,7 +411,7 @@ import { showApiError } from '../api/request.js'
}
.agreePrivacy {
color: #2F77FD;
color: #2f77fd;
}
/* 立即注册按钮 */

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

@@ -1,17 +1,16 @@
<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>
<image
class="iconStyle"
:src="paymentType == '水表' ? `${imgBaseUrl}/images/propertyImgs/water.png` : `${imgBaseUrl}/images/propertyImgs/electric.png`"
></image>
<text class="card-title">{{ paymentType }}</text>
</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,56 +46,25 @@
<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 } from '/pageSubPack/api/request.js'
import { getTopUpBindDevice, getopenIdByCode } from '/pageSubPack/api/apiSub.js';
import { showApiError, baseUrl, imgBaseUrl } from '/pageSubPack/api/request.js';
// 响应式数据
const paymentType = ref(uni.getStorageSync('addPaymentType'))
const deviceNo = ref('')
const isAgree = ref(false)
const paymentType = ref(uni.getStorageSync('addPaymentType'));
const deviceNo = ref('');
const isAgree = ref(false);
// 生命周期
onMounted(() => {})
onMounted(() => {});
// 扫码
const scanCode = async () => {
@@ -108,29 +72,29 @@ import { showApiError } from '/pageSubPack/api/request.js'
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 () => {
@@ -138,8 +102,8 @@ import { showApiError } from '/pageSubPack/api/request.js'
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,46 +139,44 @@ 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',
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 = () => {
uni.redirectTo({
url: '/pageSubPack/payment-list/addPaymentSuccess'
})
}
});
};
// 返回
const goBack = () => {
uni.switchTab({
url: '/pages/paymentIndex/paymentIndex'
})
}
});
};
</script>
<style lang="scss">
page {
@@ -238,7 +200,6 @@ import { showApiError } from '/pageSubPack/api/request.js'
box-sizing: border-box;
}
/* 白色卡片容器 */
.card-box {
background: #ffffff;
@@ -311,8 +272,6 @@ import { showApiError } from '/pageSubPack/api/request.js'
color: #cccccc;
}
/* 底部协议+按钮区域 */
.bottom-area {
margin-top: 60rpx;

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

@@ -1,10 +1,7 @@
<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,9 +9,9 @@
<!-- 顶部蓝色标题栏 -->
<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>
</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,55 +68,39 @@
<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 { 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)
const statusBarHeight = ref(20);
const paymentType = ref(uni.getStorageSync('addPaymentType'));
const userNo = ref('');
const isAgree = ref(false);
const showPopup = ref(false);
// 生命周期
onShow(() => {})
onMounted(() => {})
onShow(() => {});
onMounted(() => {});
onReady(() => {
// nextTick 用法
// nextTick(() => {})
})
});
// 勾选协议
const handleAgreeChange = (e) => {
isAgree.value = e.detail.value.length > 0
}
isAgree.value = e.detail.value.length > 0;
};
// 协议链接点击
const handleProtocol = () => {
uni.navigateTo({})
}
uni.navigateTo({});
};
// 提交
const handleSubmit = () => {
@@ -133,16 +108,16 @@
uni.showToast({
title: '请输入户号',
icon: 'none'
})
return
});
return;
}
if (!isAgree.value) {
uni.showToast({
title: '请先同意协议',
icon: 'none'
})
return
});
return;
}
uni.showModal({
@@ -153,42 +128,42 @@
uni.showLoading({
title: '提交中...',
mask: true
})
});
setTimeout(() => {
uni.showToast({
title: '提交成功',
icon: 'success'
})
}, 1000)
});
}, 1000);
setTimeout(() => {
uni.hideLoading()
goNext()
}, 2500)
uni.hideLoading();
goNext();
}, 2500);
}
}
})
}
});
};
// 跳转成功页
const goNext = () => {
uni.redirectTo({
url: '/pageSubPack/payment-list/addPaymentSuccess'
})
}
});
};
// 切换（注释保留）
const goToChange = () => {
// uni.redirectTo({
// url: '/pageSubPack/payment-list/selectPaymentEntity'
// })
}
};
// 返回
const goBack = () => {
uni.switchTab({ url: '/pages/paymentIndex/paymentIndex' });
}
};
</script>
<style lang="scss">
page {
@@ -223,7 +198,6 @@
display: flex;
align-items: center;
border-bottom: 2rpx solid #ededed;
}
.header-icon {
@@ -235,7 +209,6 @@
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.iconStyle {
@@ -414,7 +387,6 @@
/* 弹窗列表 */
.popup-list {
padding: 0 10rpx;
}
.popup-item {

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

@@ -1,32 +1,25 @@
<template>
<view class="contentStyle" style="">
<view class="status-bar"></view>
<uni-nav-bar :title="paymentItem.type || '缴费'" left-icon="left" @clickLeft="goBack"
backgroundColor="transparent" :border="false">
</uni-nav-bar>
<uni-nav-bar :title="paymentItem.type || '缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false"></uni-nav-bar>
<!-- 表单区域 -->
<scroll-view class="page" scroll-y="true">
<view class="container">
<!-- 1. 缴费详情 -->
<view v-if="currentStep === 1" class="pay-page">
<!-- 物业费缴费 -->
<!-- 金额展示 -->
<view class="amount-section" v-if="outstandingPayment">
<text class="amount-text"
:class="{ 'outstandingPaymentClass':outstandingPayment }">{{outstandingPayment?'-¥'+payAmount:'¥'+payAmount}}</text>
<text class="amount-text" :class="{ outstandingPaymentClass: outstandingPayment }">{{ outstandingPayment ? '-¥' + payAmount : '¥' + payAmount }}</text>
</view>
<view class="amount-section" v-else>
<text class="amount-text paymentClass">{{ '¥' + payAmount }}</text>
</view>
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
<view style="border-bottom: 2rpx solid #ededed; margin: 10rpx 0rpx"></view>
<!-- 缴费信息 -->
<view class="info-section" style="">
<view>
<view class="info-item">
<text class="info-label">户号</text>
<text class="info-value">{{ paymentItem.deviceCode || '-' }}</text>
@@ -41,23 +34,22 @@
</view>
<!-- <view style="border-bottom: 2rpx solid #c7c7c7;padding-bottom:20rpx;"></view> -->
<!-- 缴费金额输入 -->
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
<!-- <view style="border-bottom: 2rpx solid #ededed; margin: 10rpx 0rpx"></view>
<view class="input-section" style="display: flex;">
<text class="amount-input" style="width: auto;margin: 0rpx 20rpx;">¥</text>
<input type="digit" v-model="payNum" class="amount-input" placeholder="点击输入缴费金额">
</input>
</view>
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
</view> -->
<view style="border-bottom: 2rpx solid #ededed; margin: 10rpx 0rpx"></view>
<view class="arrears-row" v-if="outstandingPayment == true">
<text class="arrears-text">当前欠费金额¥{{ arrearsAmount }}元</text>
<text class="auto-fill-btn" @click="handleAutoFill">点击自动填入</text>
<!-- <text class="auto-fill-btn" @click="handleAutoFill">点击自动填入</text> -->
</view>
<view class="arrears-row" v-if="outstandingPayment == false">
<text class="arrears-text">暂未查询到欠费</text>
</view>
</view>
</view>
</view>
<!-- 2. 缴费成功页 -->
@@ -66,110 +58,96 @@
<view class="success-icon">
<text class="icon-check">✓</text>
</view>
<!-- 主标题 -->
<view class="title">缴费成功</view>
<!-- 提示文案 -->
<view class="desc">
成功缴纳{{ paymentItem.type || '' }}费用 ¥{{ payNum || payAmount }}元
<view class="desc">成功缴纳{{ paymentItem.type || '' }}费用 ¥{{ payNum || payAmount }}元</view>
</view>
<view class="container" v-if="currentStep === 3">
<view class="fail-icon"><text class="icon-fail">✕</text></view>
<view class="title">缴费失败</view>
<view class="desc">未能完成缴费，请重新尝试</view>
</view>
</view>
</scroll-view>
<!-- 立即缴费按钮 -->
<view class="btn-section" v-if="currentStep === 1">
<button class="pay-btn" @click="handlePay">立即缴费</button>
</view>
<!-- 返回按钮 -->
<view class="btn-section" v-if="currentStep === 2">
<view class="btn-section" v-if="currentStep === 2 || currentStep === 3">
<button class="pay-btn" @click="handleBackToList">返回生活缴费</button>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed
} from 'vue'
import {
onShow,
onReady,
onReachBottom,
onLoad,
onUnload,
onPullDownRefresh
} from '@dcloudio/uni-app'
import { showApiError } from '../api/request.js';
import { ref, reactive, onMounted, computed } from 'vue';
import { onShow, onReady, onReachBottom, onLoad, onUnload, onPullDownRefresh } from '@dcloudio/uni-app';
import {
getTopUp,
getToWxPay,
getopenIdByCode,
postSubscribeAuth
} from '/pageSubPack/api/apiSub.js'
postSubscribeAuth,
getBankMiniProgramParams,
resolvePaymentResult,
getPaymentReturnResult,
clearPaymentReturnResult
} from '/pageSubPack/api/apiSub.js';
// 响应式数据
const statusBarHeight = ref(20)
const outstandingPayment = ref(true)
const storageValue = uni.getStorageSync('arrearsPayment')
const paymentItem = reactive(typeof storageValue === 'object' && storageValue !== null ? storageValue : {})
const currentStep = ref(1)
const payAmount = ref('0.00')
const arrearsAmount = ref('0.00')
const payNum = ref('')
const statusBarHeight = ref(20);
const outstandingPayment = ref(true);
const storageValue = uni.getStorageSync('arrearsPayment');
const paymentItem = reactive(typeof storageValue === 'object' && storageValue !== null ? storageValue : {});
const currentStep = ref(1);
const payAmount = ref('0.00');
const arrearsAmount = ref('0.00');
const payNum = ref('');
// 页面加载时初始化数据
onLoad(() => {
initPaymentData()
checkAllSubscribeStatus()
})
initPaymentData();
checkAllSubscribeStatus();
});
// 初始化缴费数据
const initPaymentData = () => {
if (paymentItem) {
arrearsAmount.value = Math.abs(paymentItem.balance || 0).toFixed(2)
payAmount.value = Math.abs(paymentItem.balance || 0)
outstandingPayment.value = paymentItem.balance < 0
}
arrearsAmount.value = Math.abs(paymentItem.balance || 0).toFixed(2);
payAmount.value = Math.abs(paymentItem.balance || 0);
outstandingPayment.value = paymentItem.balance < 0;
}
};
// 自动填充欠费金额
const handleAutoFill = () => {
payNum.value = arrearsAmount.value
payNum.value = arrearsAmount.value;
uni.vibrateShort({
type: 'light'
})
}
});
};
// 返回
const goBack = () => {
uni.switchTab({
url: '/pages/paymentIndex/paymentIndex'
});
}
};
// 立即缴费
const handlePay = () => {
if (!payNum.value || Number(payNum.value) <= 0) {
uni.showToast({
title: '请输入正确的缴费金额',
icon: 'none'
})
return
}
requestPayOrder()
}
// if (!payNum.value || Number.isNaN(Number(payNum.value)) || Number(payNum.value) <= 0) {
// uni.showToast({
// title: '请输入正确的缴费金额',
// icon: 'none'
// });
// return;
// }
requestPayOrder();
};
// 统一下单后后端返回的支付参数
const payInfo = ref({
appId: '', // 公众号/小程序ID
@@ -178,14 +156,14 @@
package: '', // 数据包 如 prepay_id=xxx
signType: 'MD5', // 签名方式
paySign: '' // 签名
})
});
// 1. 先请求后端接口生成预支付订单
const requestPayOrder = async () => {
try {
uni.showLoading({
title: '发起支付中'
})
});
// // 获取 openid
// const loginRes = await wx.login()
@@ -210,7 +188,10 @@
// return
// }
// const openid = openIdRes.data
const openid = uni.getStorageSync('openid')
const openid = uni.getStorageSync('openid');
// 对接日照银行
RZBank();
return;
// 调用充值接口创建订单
console.log('1111111111', paymentItem);
@@ -221,185 +202,248 @@
deviceCode: paymentItem.deviceCode,
// type: paymentItem.type == '水表' ? '2' : paymentItem.type == '电表' ? '1' : ''
type: '2'
})
uni.hideLoading()
});
uni.hideLoading();
const topUpData = topUpRes
const topUpData = topUpRes;
console.log(topUpData);
if (topUpData.code !== 200) {
uni.showToast({
title: topUpData.msg || '下单失败',
icon: 'none'
})
return
});
return;
}
// 调用微信支付接口获取支付参数
const payRes = await getToWxPay({
orderId: topUpData.data.orderId,
openid: openid,
openid: openid
// rechargeAmount: payNum.value || payAmount.value,
// type: paymentItem.type == '水表' ? '2' : paymentItem.type == '电表' ? '1' : ''
})
});
if (payRes.code !== 200) {
uni.showToast({
title: payRes.msg || '获取支付参数失败',
icon: 'none'
})
return
});
return;
}
const payData = payRes.data
const payData = payRes.data;
console.log('payData', payData);
// 赋值支付参数
payInfo.value = {
appId: payData.appId,
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package.startsWith('prepay_id=') ? payData.package : 'prepay_id=' + payData
.package,
package: payData.package.startsWith('prepay_id=') ? payData.package : 'prepay_id=' + payData.package,
signType: payData.signType,
paySign: payData.paySign
}
};
// 2. 调起微信支付
wx.requestPayment({
...payInfo.value,
success(res) {
console.log('支付成功', res)
currentStep.value = 2
console.log('支付成功', res);
currentStep.value = 2;
},
fail(err) {
console.log('支付失败', err)
console.log('支付失败', err);
uni.showToast({
title: '支付取消或失败',
icon: 'none'
})
});
}
})
handleWaterElecSubscribe()
});
handleWaterElecSubscribe();
} catch (err) {
uni.hideLoading()
console.log('请求异常', err)
showApiError(err)
uni.hideLoading();
console.log('请求异常', err);
showApiError(err);
}
};
// RZBank 日照银行
const deviceTypeMap = { 电费: '1', 水费: '2' };
const navigatedToPayment = ref(false);
async function RZBank() {
// 1. 准备参数
const token = uni.getStorageSync('token') || '';
const userId = uni.getStorageSync('userId') || '';
if (token) {
// 设备类型映射：电费→1(电表)，水费→2(水表)
const mappedDeviceType = deviceTypeMap[paymentItem.type] || paymentItem.deviceType || '';
// 直接从本地参数拼 path 查询字符串传给支付小程序，不走接口
const params = {
acct: userId,
orderType: '20',
deviceCode: paymentItem.deviceCode || '',
deviceType: mappedDeviceType,
billId: paymentItem.billId || '',
residentUserId: userId,
token: token
};
const queryString = Object.keys(params)
.map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
.join('&');
// 2. 拉起小程序
uni.hideLoading();
uni.showLoading({ title: '加载中...', mask: true });
try {
const res = await getBankMiniProgramParams(params);
uni.hideLoading();
if (res.code !== 200 || !res.data) {
uni.showToast({ title: res.msg || '获取支付参数失败', icon: 'none' });
return;
}
navigatedToPayment.value = true;
wx.navigateToMiniProgram({
appId: 'wxc0189436c58b59cd',
path: 'pages/pay/pay',
extraData: res.data.extraData,
envVersion: 'trial',
success: () => {
console.log('已跳转到日照银行支付小程序');
},
fail: (err) => {
navigatedToPayment.value = false;
console.error('跳转日照银行支付失败', err);
uni.showToast({ title: '拉起支付失败', icon: 'none' });
}
});
} catch (error) {
console.log(error);
}
} else {
// 没有token， 重新登录
}
}
onShow(() => {
// 从日照银行支付小程序返回后，根据返回结果显示成功/失败页
if (navigatedToPayment.value) {
navigatedToPayment.value = false;
const info = getPaymentReturnResult();
// 有缴费，返回缴费金额，显示成功缴费xx元。
if (info !== null) {
payNum.value = info.orderAmt;
}
const result = resolvePaymentResult(info);
clearPaymentReturnResult();
currentStep.value = result === 'success' ? 2 : 3;
}
});
// 【双模板ID】你提供的 水表+电表 催缴模板
const TEMPLATE_IDS = {
water: 'DowYnoGKNtl_eYycRCq-nt7DAoFjH7aVcGUQciZl1v0',
elec: 'PE7Neemv0z77JnBIPmb-Qg2Q3pJSUDGaILCryFCxmaw'
}
};
// 转成数组（微信API要求）
const TEMPLATE_ID_ARRAY = Object.values(TEMPLATE_IDS)
const TEMPLATE_ID_ARRAY = Object.values(TEMPLATE_IDS);
// 1. 检测 水表+电表 订阅状态
const checkAllSubscribeStatus = () => {
uni.getSetting({
withSubscriptions: true,
success: (res) => {
const itemSettings = res.subscriptionsSetting?.itemSettings || {}
console.log('水表订阅状态：', itemSettings[TEMPLATE_IDS.water])
console.log('电表订阅状态：', itemSettings[TEMPLATE_IDS.elec])
}
})
const itemSettings = res.subscriptionsSetting?.itemSettings || {};
console.log('水表订阅状态：', itemSettings[TEMPLATE_IDS.water]);
console.log('电表订阅状态：', itemSettings[TEMPLATE_IDS.elec]);
}
});
};
// 2. 点击开启订阅（主方法）
const handleWaterElecSubscribe = () => {
uni.getSetting({
withSubscriptions: true,
success: (res) => {
const itemSettings = res.subscriptionsSetting?.itemSettings || {}
const waterStatus = itemSettings[TEMPLATE_IDS.water]
const elecStatus = itemSettings[TEMPLATE_IDS.elec]
const itemSettings = res.subscriptionsSetting?.itemSettings || {};
const waterStatus = itemSettings[TEMPLATE_IDS.water];
const elecStatus = itemSettings[TEMPLATE_IDS.elec];
// 如果任意一个被永久拒绝 → 引导去设置
if ((waterStatus === 'reject' || waterStatus === 'ban') ||
(elecStatus === 'reject' || elecStatus === 'ban')) {
if (waterStatus === 'reject' || waterStatus === 'ban' || elecStatus === 'reject' || elecStatus === 'ban') {
uni.showModal({
title: '开启消息通知',
content: '请前往设置页打开水表/电表提醒开关',
confirmText: '去设置',
success: (modalRes) => {
if (modalRes.confirm) uni.openSetting()
if (modalRes.confirm) uni.openSetting();
}
})
return
});
return;
}
// 正常弹出授权框
requestMultiSubscribe()
}
})
requestMultiSubscribe();
}
});
};
// 3. 调用微信授权（根据类型传对应模板）
const requestMultiSubscribe = () => {
const tmplIds = paymentItem.type == '水表' ? [TEMPLATE_IDS.water] : paymentItem.type == '电表' ? [TEMPLATE_IDS.elec] : TEMPLATE_ID_ARRAY
const tmplIds = paymentItem.type == '水表' ? [TEMPLATE_IDS.water] : paymentItem.type == '电表' ? [TEMPLATE_IDS.elec] : TEMPLATE_ID_ARRAY;
uni.requestSubscribeMessage({
tmplIds: tmplIds,
success: async (res) => {
console.log('双模板授权结果：', res)
console.log('双模板授权结果：', res);
let successCount = 0
let successCount = 0;
// 水表授权成功
if (res[TEMPLATE_IDS.water] === 'accept') successCount++
if (res[TEMPLATE_IDS.water] === 'accept') successCount++;
// 电表授权成功
if (res[TEMPLATE_IDS.elec] === 'accept') successCount++
if (res[TEMPLATE_IDS.elec] === 'accept') successCount++;
if (successCount > 0) {
uni.showToast({
title: `已开启${successCount}项提醒`,
icon: 'success'
})
});
// 保存用户openid到后端
await saveUserSubscribe()
await saveUserSubscribe();
} else {
uni.showToast({
title: '已取消授权',
icon: 'none'
})
});
}
},
fail: () => {
uni.showToast({
title: '授权失败',
icon: 'none'
})
}
})
});
}
});
};
// 4. 传给后端：保存订阅信息
const saveUserSubscribe = async () => {
const res = await postSubscribeAuth({
openid: uni.getStorageSync('openid'),
templateIds: paymentItem.type == '水表' ? [TEMPLATE_IDS.water] : paymentItem.type == '电表' ? [TEMPLATE_IDS.elec] : TEMPLATE_ID_ARRAY,
templateIds: paymentItem.type == '水表' ? [TEMPLATE_IDS.water] : paymentItem.type == '电表' ? [TEMPLATE_IDS.elec] : TEMPLATE_ID_ARRAY
// deviceCode: paymentItem.deviceCode,
// deviceType: paymentItem.type == '水表' ? '2' : paymentItem.type == '电表' ? '1' : ''
})
});
if (res.data == 200) {
console.log('111111111111111：', res)
console.log('111111111111111：', res);
} else {
uni.showToast({
title: `${res.msg}`,
icon: 'none'
})
}
});
}
};
// 返回缴费列表
const handleBackToList = () => {
uni.switchTab({
url: '/pages/paymentIndex/paymentIndex'
});
}
};
</script>
<style lang="scss">
page {
@@ -421,12 +465,9 @@
overflow-y: auto;
padding: 0px 40rpx;
box-sizing: border-box;
background-color: #
/* fff */
;
background-color: #/* fff */;
}
/* 1. 物业费详情页 */
.pay-page {
width: 100%;
@@ -445,7 +486,7 @@
}
.outstandingPaymentClass {
color: #E34D59;
color: #e34d59;
}
.paymentClass {
@@ -455,7 +496,6 @@
.info-section {
padding-top: 20rpx;
/* margin-bottom: 40rpx; */
}
.info-item {
@@ -486,12 +526,10 @@
font-size: 50rpx;
color: #333;
font-weight: 600;
}
.input-section {
/* padding: 030rpx; */
}
.amount-input {
@@ -533,7 +571,6 @@
z-index: 999;
display: flex;
align-items: flex-end;
}
.password-modal {
@@ -787,4 +824,21 @@
width: 100vw;
height: 46px;
}
.fail-icon {
width: 220rpx;
height: 220rpx;
border-radius: 50%;
background-color: #fa5151;
display: flex;
align-items: center;
justify-content: center;
margin-top: 200rpx;
margin-bottom: 60rpx;
}
.icon-fail {
color: #fff;
font-size: 130rpx;
font-weight: bold;
}
</style>

57
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,8 +11,7 @@
<!-- 未欠费 -->
<!-- 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>
@@ -33,8 +30,7 @@
<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,47 +75,34 @@
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed
} from 'vue'
import {
onShow,
onReady,
onReachBottom,
onLoad,
onUnload,
onPullDownRefresh
} from '@dcloudio/uni-app'
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 || '缴费')
const statusBarHeight = ref(20);
const paymentItem = reactive(uni.getStorageSync('arrearsPayment') || {});
const arrearsPayment = computed(() => paymentItem.type || '缴费');
// 生命周期
onShow(() => {})
onMounted(() => {})
onReady(() => {})
onShow(() => {});
onMounted(() => {});
onReady(() => {});
// 方法
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">

281
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,7 +12,7 @@
<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>
@@ -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,155 +54,191 @@
</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'
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)
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([]);
const billList = ref([])
let isFirstLoading = true;
// 费用名称映射
// 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 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'
}
// 获取缴费记录
const getRecords = async () => {
电费: `${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 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)
})
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;
});
});
// 生命周期
onShow(() => {})
onMounted(() => {})
onLoad(() => {
getRecords()
})
onReady(() => {})
getRecords();
});
// 方法
const barHeight = (price) => {
const height = (price / maxPrice.value) * barMaxHeight.value
return `${height}rpx`
}
const height = (price / maxPrice.value) * barMaxHeight.value;
return `${height}rpx`;
};
const goBack = () => {
uni.switchTab({
url: '/pages/paymentIndex/paymentIndex'
});
}
uni.navigateBack();
};
</script>
<style lang="scss">
@@ -233,9 +257,16 @@
.page {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
padding: 0px 40rpx;
box-sizing: border-box;
overflow: hidden;
}
.list-scroll {
flex: 1;
overflow-y: auto;
}
.total-box {
@@ -321,7 +352,7 @@
display: flex;
align-items: center;
justify-content: center;
color: #4080FF;
color: #4080ff;
margin-right: 24rpx;
font-size: 36rpx;
}

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;

120
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-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>
<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>
@@ -52,29 +50,39 @@
</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 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 = () => {
@@ -88,24 +96,29 @@
// ===== 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);
}
};
@@ -115,10 +128,10 @@
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);
}
};
@@ -127,7 +140,6 @@
refreshLoginState();
uni.hideTabBar({ animation: false });
if (isLogin.value) {
postOpenId();
getPayList();
}
});
@@ -135,6 +147,7 @@
onShow(() => {
refreshLoginState();
if (isLogin.value) {
postOpenId();
getPayList();
}
});
@@ -165,8 +178,8 @@
});
return;
}
uni.setStorageSync('arrearsPayment', item)
uni.redirectTo({ url: '/pageSubPack/payment-list/arrearsPayment' })
uni.setStorageSync('arrearsPayment', item);
uni.navigateTo({ url: '/pageSubPack/payment-list/arrearsPayment' });
};
// 点击缴费记录
@@ -181,7 +194,7 @@
});
return;
}
uni.redirectTo({ url: '/pageSubPack/payment-list/paymentRecord' })
uni.navigateTo({ url: '/pageSubPack/payment-list/paymentRecord' });
};
// 点击新增缴费（水表/电表等）
@@ -197,22 +210,25 @@
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, '')
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);
background: linear-gradient(180deg, #dfedfd, #f6faff);
}
</style>
@@ -221,7 +237,7 @@
display: flex;
flex-direction: column;
height: 100vh;
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
background: linear-gradient(180deg, #dfedfd, #f6faff);
}
.page {
@@ -289,7 +305,7 @@
.bill-item {
display: flex;
align-items: center;
background-color: #F6F9FE;
background-color: #f6f9fe;
border-radius: 12rpx;
padding: 20rpx 20rpx 20rpx 0px;
margin-bottom: 20rpx;
@@ -335,7 +351,7 @@
font-size: 24rpx;
font-weight: 500;
color: #fff;
background-color: #E34D59;
background-color: #e34d59;
}
.balance-normal {
@@ -345,7 +361,7 @@
.balance-debt {
font-size: 28rpx;
color: #E34D59;
color: #e34d59;
}
.arrow {
@@ -389,7 +405,7 @@
.grid-item {
width: calc(25% - 50rpx);
background-color: #F6F9FE;
background-color: #f6f9fe;
border-radius: 12rpx;
padding: 20rpx;
margin-bottom: 20rpx;