519 lines
8.2 KiB
Vue
519 lines
8.2 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">
|
|
<!-- 头部水费标题+水滴图标 -->
|
|
<view class="card-header">
|
|
<image class="iconStyle"
|
|
:src="paymentType=='水'?'/static/propertyImgs/water.png':'/static/propertyImgs/electric.png'">
|
|
</image>
|
|
<text class="card-title">{{paymentType+'费'}}</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="/static/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>
|
|
export default {
|
|
onReady: function(e) {},
|
|
components: {
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
|
|
mounted() {},
|
|
|
|
onReady() {
|
|
this.$nextTick(() => {
|
|
|
|
})
|
|
},
|
|
data() {
|
|
return {
|
|
paymentType: uni.getStorageSync('addPaymentType'),
|
|
deviceNo: '', // 设备号
|
|
isAgree: false, // 是否同意协议
|
|
|
|
|
|
|
|
|
|
}
|
|
},
|
|
|
|
|
|
methods: {
|
|
handleAgreeChange(e) {
|
|
// e.detail.value 是数组，有值 = 选中，空 = 未选中
|
|
this.isAgree = e.detail.value.length > 0
|
|
},
|
|
// 扫码获取设备号 【uniapp+微信小程序双端兼容】
|
|
async scanCode() {
|
|
try {
|
|
const res = await uni.scanCode({
|
|
onlyFromCamera: false, // 允许相册+相机
|
|
scanType: ['qrCode', 'barCode'] // 支持二维码+条形码
|
|
})
|
|
// 扫码结果赋值给设备号输入框
|
|
this.deviceNo = res.result
|
|
} catch (err) {
|
|
console.log('扫码取消/失败', err)
|
|
}
|
|
},
|
|
// 缴费提交
|
|
goPay() {
|
|
if (!this.deviceNo) {
|
|
uni.showToast({
|
|
title: '请输入设备号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!this.isAgree) {
|
|
uni.showToast({
|
|
title: '请同意协议',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title: '确认提交',
|
|
content: '确认要提交吗?',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.showLoading({
|
|
title: '提交中...',
|
|
mask: true
|
|
});
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'success'
|
|
});
|
|
}, 1000);
|
|
setTimeout(() => {
|
|
// 提交成功后跳转列表页
|
|
uni.hideLoading();
|
|
this.goNext()
|
|
}, 2500);
|
|
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
goNext() {
|
|
uni.redirectTo({
|
|
url: '/pages/payment-list/addPaymentSuccess',
|
|
success: res => {},
|
|
fail: () => {},
|
|
complete: () => {}
|
|
});
|
|
},
|
|
goBack() {
|
|
uni.switchTab({
|
|
url: '/pages/payment/paymentIndex',
|
|
success: res => {},
|
|
fail: () => {},
|
|
complete: () => {}
|
|
});
|
|
},
|
|
|
|
},
|
|
|
|
|
|
}
|
|
</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;
|
|
}
|
|
|
|
/* 头部水费标题 */
|
|
.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;
|
|
}
|
|
|
|
/* 头部水费标题 */
|
|
.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> |