我的房屋流程对接接口，缴费页面功能修改一版

property-uniapp-project/pageSubPack/payment-list/addPayment.vue

@@ -13,8 +13,8 @@
  				<view class="header-card">
  					<view class="header-icon">
  						<image class="iconStyle"
-						:src="paymentType=='燃气'?'http://47.104.199.163:9090/images/propertyImgs/gas.png':'http://47.104.199.163:9090/images/propertyImgs/heating.png'">
-						></image>
+ 							:src="paymentType=='燃气'?'http://47.104.199.163:9090/images/propertyImgs/gas.png':'http://47.104.199.163:9090/images/propertyImgs/heating.png'">
+ 							></image>
  					</view>
  					<text class="header-title">{{paymentType+'费'}}</text>
  				</view>
@@ -87,130 +87,109 @@
 
  </template>
 
- <script>
- 	export default {
- 		onReady: function(e) {},
- 		components: {
+ <script setup>
+ 	import {
+ 		ref,
+ 		onMounted,
+ 		computed
 
- 		},
+ 	} from 'vue'
+ 	import {
+ 		onShow,
+ 		onReady,
+ 		onReachBottom,
+ 		onLoad,
+ 		onUnload,
+ 		onPullDownRefresh
+ 	} from '@dcloudio/uni-app'
+ 	// 响应式数据
+ 	const statusBarHeight = ref(20)
+ 	const paymentType = ref(uni.getStorageSync('addPaymentType'))
+ 	const userNo = ref('')
+ 	const isAgree = ref(false)
+ 	const showPopup = ref(false)
 
- 		computed: {
+ 	// 生命周期
+ 	onShow(() => {})
+ 	onMounted(() => {})
+ 	onReady(() => {
+ 		// nextTick 用法
+ 		// nextTick(() => {})
+ 	})
 
- 			style() {
- 				var statusBarHeight = this.statusBarHeight;
- 				return statusBarHeight;
- 			},
+ 	// 勾选协议
+ 	const handleAgreeChange = (e) => {
+ 		isAgree.value = e.detail.value.length > 0
+ 	}
 
+ 	// 协议链接点击
+ 	const handleProtocol = () => {
+ 		uni.navigateTo({})
+ 	}
 
- 		},
- 		created() {
- 			let statusBarObj = this.getPhoneInfo()
- 			this.statusBarHeight = statusBarObj.statusBarHeight
- 		},
- 		onShow() {
-
- 		},
-
- 		mounted() {},
-
- 		onReady() {
- 			this.$nextTick(() => {
-
+ 	// 提交
+ 	const handleSubmit = () => {
+ 		if (!userNo.value) {
+ 			uni.showToast({
+ 				title: '请输入户号',
+ 				icon: 'none'
  			})
- 		},
- 		data() {
- 			return {
- 				/* 设定状态栏默认高度 */
- 				statusBarHeight: 20,
- 				paymentType: uni.getStorageSync('addPaymentType'),
- 				userNo: '',
- 				isAgree: false,
- 				showPopup: false, // 控制弹窗显示
+ 			return
+ 		}
+
+ 		if (!isAgree.value) {
+ 			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()
+ 						goNext()
+ 					}, 2500)
+ 				}
  			}
- 		},
+ 		})
+ 	}
 
- 		methods: {
- 			handleAgreeChange(e) {
- 				// e.detail.value 是数组，有值 = 选中，空 = 未选中
- 				this.isAgree = e.detail.value.length > 0
- 			},
- 			// 处理协议链接点击
- 			handleProtocol() {
- 				uni.navigateTo({
-
- 				})
- 			},
- 			// 处理提交
- 			handleSubmit() {
- 				if (!this.userNo) {
- 					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: '/pageSubPack/payment-list/addPaymentSuccess',
- 					success: res => {},
- 					fail: () => {},
- 					complete: () => {}
- 				});
- 			},
- 			goToChange() {
- 				// uni.redirectTo({
- 				// 	url: '/pageSubPack/payment-list/selectPaymentEntity',
- 				// 	success: res => {},
- 				// 	fail: () => {},
- 				// 	complete: () => {}
- 				// });
- 			},
- 			goBack() {
- 				uni.redirectTo({
- 					url: '/pageSubPack/payment-list/paymentIndex',
- 					success: res => {},
- 					fail: () => {},
- 					complete: () => {}
- 				});
- 			},
-
- 		},
+ 	// 跳转成功页
+ 	const goNext = () => {
+ 		uni.redirectTo({
+ 			url: '/pageSubPack/payment-list/addPaymentSuccess'
+ 		})
+ 	}
 
+ 	// 切换（注释保留）
+ 	const goToChange = () => {
+ 		// uni.redirectTo({
+ 		//   url: '/pageSubPack/payment-list/selectPaymentEntity'
+ 		// })
+ 	}
 
+ 	// 返回
+ 	const goBack = () => {
+ 		uni.redirectTo({
+ 			url: '/pageSubPack/payment-list/paymentIndex'
+ 		})
  	}
  </script>
  <style lang="scss">