555 lines
9.7 KiB
Vue
555 lines
9.7 KiB
Vue
<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>
|
|
<!-- 表单区域 -->
|
|
<scroll-view class="page" scroll-y="true">
|
|
<view class="card-box">
|
|
<!-- 头部物业费A标题+水滴图标 -->
|
|
<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>
|
|
</view>
|
|
<!-- 分割线 -->
|
|
<view class="line"></view>
|
|
<view class="input-item">
|
|
<view class="input-label">缴费单位</view>
|
|
<text class="company-name">花开物业</text>
|
|
</view>
|
|
<!-- 分割线 -->
|
|
<view class="line"></view>
|
|
<!-- 设备号输入项 -->
|
|
<view class="input-item">
|
|
<view class="input-label">缴费设备号</view>
|
|
<view class="input-wrap">
|
|
<!-- 输入框 -->
|
|
<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>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部分割线 -->
|
|
<view class="line"></view>
|
|
</view>
|
|
|
|
|
|
<!-- 底部协议和提交按钮 -->
|
|
<view class="bottom-area">
|
|
<!-- <view class="agreement">
|
|
<checkbox-group @change="handleAgreeChange">
|
|
<checkbox :checked="isAgree" />
|
|
</checkbox-group>
|
|
<text class="agreement-text">我已阅并同意</text>
|
|
<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
|
|
</view> -->
|
|
|
|
|
|
<button class="submit-btn" @click="goPay">
|
|
提交
|
|
</button>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
computed
|
|
|
|
} from 'vue'
|
|
import {
|
|
onShow,
|
|
onReady,
|
|
onReachBottom,
|
|
onLoad,
|
|
onUnload,
|
|
onPullDownRefresh
|
|
} from '@dcloudio/uni-app'
|
|
|
|
import {
|
|
getTopUpBindDevice,
|
|
getopenIdByCode
|
|
} from '/pageSubPack/api/apiSub.js'
|
|
|
|
// 响应式数据
|
|
const paymentType = ref(uni.getStorageSync('addPaymentType'))
|
|
const deviceNo = ref('')
|
|
const isAgree = ref(false)
|
|
// 生命周期
|
|
onMounted(() => {})
|
|
|
|
// 扫码
|
|
const scanCode = () => {
|
|
// uni.showLoading({
|
|
// title: '扫码中...',
|
|
// mask: true
|
|
// })
|
|
|
|
uni.scanCode({
|
|
onlyFromCamera: false,
|
|
scanType: ['qrCode', 'barCode'],
|
|
success: (res) => {
|
|
// uni.hideLoading()
|
|
console.log('扫码成功', res)
|
|
// 过滤模拟器/调试模式返回的 mock 数据
|
|
if (!res.result || res.result.toUpperCase() === 'TEST') {
|
|
uni.showToast({ title: '扫码识别失败，请手动输入设备号', icon: 'none' })
|
|
return
|
|
}
|
|
deviceNo.value = res.result
|
|
uni.showToast({ title: '扫码成功', icon: 'success' })
|
|
},
|
|
fail: (err) => {
|
|
// uni.hideLoading()
|
|
console.log('扫码失败', err)
|
|
uni.showToast({ title: '扫码取消/失败', icon: 'none' })
|
|
},
|
|
complete: () => {
|
|
// uni.hideLoading()
|
|
}
|
|
})
|
|
}
|
|
|
|
// 提交缴费
|
|
const goPay = async () => {
|
|
if (!deviceNo.value) {
|
|
uni.showToast({
|
|
title: '请输入设备号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showModal({
|
|
title: '确认提交',
|
|
content: '确认要提交吗?',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
uni.showLoading({
|
|
title: '提交中...',
|
|
mask: true
|
|
})
|
|
|
|
try {
|
|
// // 获取 openid
|
|
// const loginRes = await wx.login()
|
|
// if (!loginRes.code) {
|
|
// uni.hideLoading()
|
|
// uni.showToast({
|
|
// title: '登录失败',
|
|
// icon: 'none'
|
|
// })
|
|
// return
|
|
// }
|
|
// // 用 code 换 openid
|
|
// const openIdRes = await getopenIdByCode({
|
|
// code: loginRes.code
|
|
// })
|
|
// if (openIdRes.code !== 200 || !openIdRes.data) {
|
|
// uni.hideLoading()
|
|
// uni.showToast({
|
|
// title: '获取openid失败',
|
|
// icon: 'none'
|
|
// })
|
|
// return
|
|
// }
|
|
const openid = uni.getStorageSync('openid')
|
|
// if (!openid) {
|
|
// uni.hideLoading()
|
|
// uni.showToast({
|
|
// title: '获取用户信息失败，请重新登录',
|
|
// icon: 'none'
|
|
// })
|
|
// return
|
|
// }
|
|
await getTopUpBindDevice({
|
|
deviceType: paymentType.value=='水费'?'2':'1',
|
|
deviceCode: deviceNo.value,
|
|
// openid: openid,
|
|
residentUserId: uni.getStorageSync('userId')
|
|
})
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'success'
|
|
})
|
|
setTimeout(() => {
|
|
goNext()
|
|
}, 1500)
|
|
} catch (err) {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: err.msg || '网络异常',
|
|
icon: 'none'
|
|
})
|
|
console.error('绑定设备失败：', err)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
// 跳转成功页
|
|
const goNext = () => {
|
|
uni.navigateTo({
|
|
url: '/pageSubPack/payment-list/addPaymentSuccess?type=bind'
|
|
})
|
|
}
|
|
|
|
// 返回
|
|
const goBack = () => {
|
|
uni.navigateBack();
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
page {
|
|
background: #f2f1f6;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.contentStyle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
/* 关键：占满屏幕高度 */
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.page {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0px 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
/* 白色卡片容器 */
|
|
.card-box {
|
|
background: #ffffff;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
}
|
|
|
|
/* 头部物业费A标题 */
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.iconStyle {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
}
|
|
|
|
.scanTheCodeIconStyle {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.water-icon {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 分割线 */
|
|
.line {
|
|
width: 100%;
|
|
height: 1rpx;
|
|
background: #eeeeee;
|
|
}
|
|
|
|
/* 输入项整体 */
|
|
.input-item {
|
|
padding: 32rpx 0;
|
|
}
|
|
|
|
.input-label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
/* 输入框+扫码图标横向布局 */
|
|
.input-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
|
|
/* 占位符样式 */
|
|
.input-placeholder {
|
|
color: #cccccc;
|
|
}
|
|
|
|
|
|
|
|
/* 底部协议+按钮区域 */
|
|
.bottom-area {
|
|
margin-top: 60rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
/* 协议勾选 */
|
|
.agree-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.radio-box {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.radio-icon {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.agree-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.agree-link {
|
|
font-size: 28rpx;
|
|
color: #007aff;
|
|
}
|
|
|
|
/* 立即缴费按钮 */
|
|
.pay-btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
background: #007aff;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pay-text {
|
|
font-size: 36rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* 白色卡片容器 */
|
|
.card-box {
|
|
background: #ffffff;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
}
|
|
|
|
/* 头部物业费A标题 */
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.water-icon {
|
|
font-size: 48rpx;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 36rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 分割线 */
|
|
.line {
|
|
width: 100%;
|
|
height: 1rpx;
|
|
background: #eeeeee;
|
|
}
|
|
|
|
/* 输入项整体 */
|
|
.input-item {
|
|
padding: 32rpx 0;
|
|
}
|
|
|
|
.input-label {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
/* 输入框+扫码图标横向布局 */
|
|
.input-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
|
|
/* 占位符样式 */
|
|
.input-placeholder {
|
|
color: #cccccc;
|
|
}
|
|
|
|
/* 右边扫码图标 text标签直接用 双端不乱码 */
|
|
.scan-icon {
|
|
font-size: 40rpx;
|
|
color: #999;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
/* 底部协议+按钮区域 */
|
|
.bottom-area {
|
|
margin-top: 60rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
/* 协议勾选 */
|
|
.agree-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.radio-box {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.radio-icon {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.agree-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.agree-link {
|
|
font-size: 28rpx;
|
|
color: #007aff;
|
|
}
|
|
|
|
/* 立即缴费按钮 */
|
|
.pay-btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
background: #007aff;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pay-text {
|
|
font-size: 36rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.status-bar {
|
|
width: 100vw;
|
|
height: 46px;
|
|
}
|
|
|
|
/* 底部区域 */
|
|
.bottom-area {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.agreement {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.agreement checkbox {
|
|
transform: scale(0.8);
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.agreement-text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.agreement-link {
|
|
font-size: 28rpx;
|
|
color: #4080ff;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background-color: #4080ff;
|
|
color: #fff;
|
|
border-radius: 10rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.submit-btn[disabled] {
|
|
background-color: #a0c4ff;
|
|
color: #fff;
|
|
opacity: 0.7;
|
|
}
|
|
</style> |