1

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

@@ -14,10 +14,14 @@
 					</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">XXXXXXXX有限公司</text>
+				</view>
+				<!-- 分割线 -->
+				<view class="line"></view>
 				<!-- 设备号输入项 -->
 				<view class="input-item">
 					<view class="input-label">缴费设备号</view>
@@ -26,8 +30,9 @@
 						<input class="input" placeholder="请输入设备号" placeholder-class="input-placeholder"
 							v-model="deviceNo" />
 						<!-- 右边扫码图标 text标签直接用 双端不乱码 -->
-						<image class="scanTheCodeIconStyle" src="http://47.104.199.163:9090/images/propertyImgs/scanTheCodeIcon.png"
-							@click="scanCode"></image>
+						<image class="scanTheCodeIconStyle"
+							src="http://47.104.199.163:9090/images/propertyImgs/scanTheCodeIcon.png" @click="scanCode">
+						</image>
 					</view>
 				</view>
 
@@ -38,13 +43,13 @@
 
 			<!-- 底部协议和提交按钮 -->
 			<view class="bottom-area">
-				<view class="agreement">
+				<!-- <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>
+				</view> -->
 
 
 				<button class="submit-btn" @click="goPay">
@@ -68,124 +73,124 @@
 
 </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'
 
-		computed: {
+	// 响应式数据
+	const paymentType = ref(uni.getStorageSync('addPaymentType'))
+	const deviceNo = ref('')
+	const isAgree = ref(false)
+	const scanResult = ref('')
 
+	// 生命周期
+	onMounted(() => {})
 
+	// 协议勾选
+	const handleAgreeChange = (e) => {
+		isAgree.value = e.detail.value.length > 0
+	}
 
-
-		},
-		created() {
-
-		},
-		onShow() {
-
-		},
-
-		mounted() {},
-
-		onReady() {
-			this.$nextTick(() => {
-
+	// 扫码
+	const scanCode = async () => {
+		try {
+			uni.showLoading({
+				title: '扫码中...',
+				mask: true
 			})
-		},
-		data() {
-			return {
-				paymentType: uni.getStorageSync('addPaymentType'),
-				deviceNo: '', // 设备号
-				isAgree: false, // 是否同意协议
 
+			const res = await uni.scanCode({
+				onlyFromCamera: false,
+				scanType: ['qrCode', 'barCode']
+			})
 
+			// 扫码成功，赋值
+			deviceNo.value = res.result
+			scanResult.value = res.result
+			uni.hideLoading()
+			uni.showToast({
+				title: '扫码成功',
+				icon: 'success'
+			})
+		} catch (err) {
+			uni.hideLoading()
+			console.log('扫码失败', err)
+			uni.showToast({
+				title: '扫码取消/失败',
+				icon: 'none'
+			})
+		}
+	}
 
+	// 提交缴费
+	const goPay = () => {
+		if (!deviceNo.value) {
+			uni.showToast({
+				title: '请输入设备号',
+				icon: 'none'
+			})
+			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
-			},
-			// 扫码获取设备号 【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: '/pageSubPack/payment-list/addPaymentSuccess',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-
-		},
+		})
+	}
+	const handleProtocol = () => {
 
+	}
+	// 跳转成功页
+	const goNext = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/addPaymentSuccess'
+		})
+	}
 
+	// 返回
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
 	}
 </script>
 <style lang="scss">

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

@@ -23,7 +23,7 @@
  				<view class="info-card">
  					<view class="form-item" @click="goToChange()">
  						<text class="label">缴费单位</text>
- 						<text class="company-name">XXXXXXXX燃气有限公司</text>
+ 						<text class="company-name">XXXXXXXX有限公司</text>
  					</view>
 
  					<view class="form-item">

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

@@ -41,7 +41,7 @@
 					</view>
 
 					<view class="grid-list">
-						
+
 						<view class="grid-item" v-for="(item, index) in addList" :key="index" @click="goToAdd(item)">
 							<view class="icon-box" :class="item.iconClass">
 								<image class="iconStyle" :src="item.icon"></image>
@@ -98,7 +98,9 @@
 					},
 					{
 						id: 2,
-						name: '暖气费',
+						// name: '暖气费',
+						name: '物业费',
+
 						status: '',
 						address: '山东省日照市东港区桂花园（别墅）2号楼2层',
 						icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
@@ -106,7 +108,8 @@
 					},
 					{
 						id: 3,
-						name: '电费',
+						// name: '电费',
+						name: '物业费',
 						status: '已欠费',
 						address: '山东省日照市东港区桂花园（别墅）2号楼2层',
 						icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
@@ -115,37 +118,43 @@
 				],
 				// 新增缴费列表数据
 				addList: [{
-						name: "燃气",
+						// name: "燃气",
+						name: '物业',
 						type: "gas",
 						icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
 						iconClass: "gas"
 					},
 					{
-						name: "水",
+						// name: "水",
+						name: '物业',
 						type: "water",
 						icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
 						iconClass: "water"
 					},
 					{
-						name: "物业",
+						// name: "物业",
+						name: '物业',
 						type: "property",
 						icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
 						iconClass: "property"
 					},
 					{
-						name: "电",
+						// name: "电",
+						name: '物业',
 						type: "electric",
 						icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
 						iconClass: "electric"
 					},
 					{
-						name: "暖气",
+						// name: "暖气",
+						name: '物业',
 						type: "heating",
 						icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
 						iconClass: "heating"
 					},
 					{
-						name: "车位",
+						// name: "车位",
+						name: '物业',
 						type: "parking",
 						icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
 						iconClass: "parking"
@@ -187,6 +196,7 @@
 			},
 			// 跳转到新增缴费
 			goToAdd(type) {
+				// else if (type.name == '水' || type.name == '电')
 				if (type.name == '燃气' || type.name == '暖气') {
 					uni.redirectTo({
 						url: '/pageSubPack/payment-list/selectPaymentEntity',
@@ -194,7 +204,7 @@
 						fail: () => {},
 						complete: () => {}
 					});
-				} else if (type.name == '水' || type.name == '电') {
+				} else if (type.name == '物业' || type.name == '物业') {
 					uni.redirectTo({
 						url: '/pageSubPack/payment-list/addHydropower',
 						success: res => {},