实物招领页面接口对接+页面细节优化

my/setting/LostandFound.vue

@@ -17,16 +17,16 @@
 		<view class="section-title">我丢失的物品</view>
 		<!-- 卡片列表 -->
 		<view class="card-list" style="padding: 0rpx 30rpx;">
-			<view class="card" v-for="(item, index) in lostItems" :key="index">
-				<image src="@/static/image/logo.png" class="item-img" mode="aspectFill" />
+			<view class="card" v-for="(item, index) in lostItems" :key="index" @click="goToDetail(item)">
+				<image :src="item.image" class="item-img" mode="aspectFill" />
 				<view class="item-info">
 					<view class="flex" style="justify-content: space-between;">
 						<view class="item-title">{{ item.name }}</view>
 						<view class="status-tag" :class="'status-' + item.statusType">{{ item.statusText }}</view>
 					</view>
 					<view style="border-top: 1rpx solid #e4e7ed; margin-top: 10rpx;margin-bottom: 20rpx;"></view>
-					<view class="item-subtitle" style="margin-bottom: 10rpx;">丢失于：{{ item.carNumber }}</view>
-					<view class="item-time">{{ item.time }}</view>
+					<view class="item-subtitle" style="margin-bottom: 10rpx;">{{ item.loss === 1 ? '丢失于' : ''}}：{{ item.carNum }}</view>
+					<view class="item-time">{{ item.createTime }}</view>
 				</view>
 			</view>
 		</view>
@@ -43,33 +43,16 @@
 		data() {
 			return {
 				globalImages: getApp().globalData.globalImages || '', // 图片前缀路径
-				lostItems: [{
-						// img: 'https://example.com/img1.jpg',
-						name: '白色 · 蓝牙耳机',
-						statusText: '寻找中',
-						statusType: 'searching',
-						carNumber: '苏A111111',
-						time: '2036/09/10 22:24'
-					},
-					{
-						// img: 'https://example.com/img2.jpg',
-						name: '黑色 · 苹果手机',
-						statusText: '已找回',
-						statusType: 'found',
-						carNumber: '苏A111111',
-						time: '2036/09/10 22:24'
-					},
-					{
-						// img: 'https://example.com/img1.jpg',
-						name: '白色 · 蓝牙耳机',
-						statusText: '待领取',
-						statusType: 'pending',
-						carNumber: '苏A111111',
-						time: '2036/09/10 22:24'
-					}
-				]
+				lostItems: []
 			};
 		},
+		onLoad() {
+			this.$Request.getT('/app/lostFound/select?type=2&loss=1').then(res => {
+				if (res.code === 0) {
+					this.lostItems = res.data;
+				}
+			});
+		},
 		methods: {
 			goNav(url) {
 				uni.navigateTo({
@@ -78,6 +61,13 @@
 			},
 			goBack() {
 				uni.navigateBack();
+			},
+			goToDetail(item) {
+				// 建议用 JSON.stringify 序列化数据传参
+				const encoded = encodeURIComponent(JSON.stringify(item));
+				uni.navigateTo({
+					url: `/my/setting/LostandFoundtext?data=${encoded}`
+				});
 			}
 		}
 	};

my/setting/LostandFoundadd.vue

@@ -1,25 +1,35 @@
 <template>
 	<view class="padding">
 		<u-form labelPosition="top" :model="model1" :rules="rules" ref="uForm">
-			<u-form-item label="订单号码" prop="userInfo.name" borderBottom ref="item1">
-				<u-input v-model="model1.userInfo.name" border="none"></u-input>
+			<u-form-item label="订单号码" prop="ordersId" borderBottom ref="item1">
+				<u-input v-model="model1.ordersId" border="none"></u-input>
 			</u-form-item>
-			<u-form-item label="联系人" prop="userInfo.name" borderBottom ref="item1">
-				<u-input v-model="model1.userInfo.name" border="none"></u-input>
+			<u-form-item label="联系人" prop="name" borderBottom ref="item1">
+				<u-input v-model="model1.name" border="none"></u-input>
 			</u-form-item>
-			<u-form-item label="联系方式" prop="userInfo.name" borderBottom ref="item1">
-				<u-input v-model="model1.userInfo.name" border="none"></u-input>
+			<u-form-item label="联系方式" prop="phone" borderBottom ref="item1">
+				<u-input v-model="model1.phone" border="none"></u-input>
 			</u-form-item>
-			<u-form-item label="其他信息" prop="userInfo.other" borderBottom>
-				<u-input v-model="model1.userInfo.name" border="none"></u-input>
-			 <!-- <u-textarea 
-			    v-model="model1.userInfo.other" 
-			    placeholder="简要描述物品其他信息" 
-			    border="none"
-			  /> -->
+			<u-form-item label="其他信息" prop="description" borderBottom>
+				<textarea placeholder="简要描述物品其他信息" v-model="model1.description"
+						class="feedback-textare" />
 			</u-form-item>
-			<u-button @click="submit">提交</u-button>
 		</u-form>
+		<view class="">
+			<view class="flex" style="justify-content: space-between;">
+				<view>物品照片</view>
+				<view>请上传丢失的物品照片</view>
+			</view>
+			<u-upload
+				:action="uploadAction"
+				:file-list="fileList"
+				@on-success="handleUploadSuccess"
+				@on-error="handleUploadError"
+				:max-count="1"
+				:multiple="false"
+			></u-upload>
+		</view>
+		<view class="pay_btns" @click="submit">发布信息</view>
 	</view>
 </template>
 
@@ -28,21 +38,78 @@
 		data() {
 			return {
 				model1: {
-					userInfo: {
-						name: '',
-						sex: '',
-						other: ''
-					},
+					name: '',
+					ordersId: '',
+					phone: '',
+					description: '',
+					image: '',
+					loss: 1,
 				},
+				// 上传组件配置
+				uploadAction: 'http://192.168.50.122:8179/sqx_fast/alioss/upload', // 上传接口地址
+				fileList: [], // 已上传的文件列表
 			}
 		},
 		methods: {
-				
+			// 上传成功回调
+			handleUploadSuccess(response) {
+				console.log('上传成功', response.data);
+				// 将上传成功的文件添加到 fileList
+				this.model1.image = response.data; // 保存图片 URL
+				this.fileList = response.data
+			},
+			// 上传失败回调
+			handleUploadError(error) {
+				console.error('上传失败', error);
+				uni.showToast({
+					title: '上传失败，请重试',
+					icon: 'none',
+				});
+			},
 			submit() {
+				this.$Request.postT("/app/lostFound/insert", this.model1).then(res => {
+					if (res.code === 0) {
+						uni.showToast({
+							title: '新增成功',
+							icon: 'success',
+						});
+						uni.navigateBack(); // 返回上一页
+					}
+				});
 			}
 		}
 	}
 </script>
 
 <style scoped>
+	.feedback-textare {
+		height: 200upx;
+		font-size: 24upx;
+		line-height: 50upx;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 20upx 20upx 0;
+		border: #e4e7ed 1rpx solid;
+		background: #fff;
+		border-radius: 15rpx;
+		/* margin-top: 20rpx; */
+	}
+	
+	.pay_btns {
+		width: calc(100% - 60rpx);
+		margin: 0 auto 40rpx;
+		text-align: center;
+		background: #fe6b01;
+		height: 80rpx;
+		border-radius: 16rpx;
+		color: #ffffff;
+		line-height: 80rpx;
+		margin-top: 20rpx;
+		position: fixed;
+		bottom: 0rpx;
+	}
+	
+	/deep/ .u-flex {
+		background: #fff !important;
+	}
 </style>

my/setting/LostandFoundtext.vue

@@ -0,0 +1,150 @@
+<template>
+	<view class="padding">
+		<u-form labelPosition="top" :model="model1" :rules="rules" ref="uForm">
+			<u-form-item label="订单号码" prop="ordersId" borderBottom ref="item1">
+				<u-input v-model="model1.ordersId" border="none"></u-input>
+			</u-form-item>
+			<u-form-item label="联系人" prop="name" borderBottom ref="item1">
+				<u-input v-model="model1.name" border="none"></u-input>
+			</u-form-item>
+			<u-form-item label="联系方式" prop="phone" borderBottom ref="item1">
+				<u-input v-model="model1.phone" border="none"></u-input>
+			</u-form-item>
+			<u-form-item label="其他信息" prop="description" borderBottom>
+				<textarea placeholder="简要描述物品其他信息" v-model="model1.description"
+						class="feedback-textare" />
+			</u-form-item>
+		</u-form>
+		<view class="">
+			<view class="flex" style="justify-content: space-between;">
+				<view>物品照片</view>
+				<view>请上传丢失的物品照片</view>
+			</view>
+			<u-upload
+				:action="uploadAction"
+				:file-list="fileList"
+				@on-success="handleUploadSuccess"
+				@on-error="handleUploadError"
+				:max-count="3"
+				:multiple="false"
+			></u-upload>
+		</view>
+		<view class="pay_btns" @click="submit">联系平台</view>
+		<u-popup v-model="show" mode="bottom" length="260rpx">
+			<view class="pay_btns1">
+				<image v-if="globalImages" :src="globalImages + 'images/my/chat2.png'" style="width: 26rpx;height: 26rpx; margin-right: 10rpx;" mode=""></image>
+				在线客服
+			</view>
+			<view class="pay_btns2">
+				<image v-if="globalImages" :src="globalImages + 'images/my/phone2.png'" style="width: 26rpx;height: 26rpx; margin-right: 10rpx;" mode=""></image>
+				热线电话
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import { waitForGlobalImages } from '@/utils/globalImageLoader'
+	export default {
+		data() {
+			return {
+				model1: {
+					name: '',
+					ordersId: '',
+					phone: '',
+					description: '',
+					image: '',
+					loss: 1,
+				},
+				action: 'http://www.example.com/upload',
+				fileList: [],
+				// 上传组件配置
+				uploadAction: 'http://192.168.50.122:8179/sqx_fast/alioss/upload', // 上传接口地址
+				fileList: [], // 已上传的文件列表
+				show: false,
+				globalImages: ''
+			}
+		},
+		onLoad(options) {
+			waitForGlobalImages().then((path) => {
+			    console.log('✅ 全局图片路径:', path)
+			    this.globalImages = path
+			  })
+			if (options.data) {
+				try {
+					const item = JSON.parse(decodeURIComponent(options.data));
+					this.model1 = { ...item }; // 填充表单数据
+					this.fileList = item.image ? [{ url: item.image, status: 'success', name: 'image' }] : [];
+				} catch (e) {
+					console.error('解析参数失败', e);
+				}
+			}
+		},
+		methods: {
+			submit() {
+				this.show = true
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.feedback-textare {
+		height: 200upx;
+		font-size: 24upx;
+		line-height: 50upx;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 20upx 20upx 0;
+		border: #e4e7ed 1rpx solid;
+		background: #fff;
+		border-radius: 15rpx;
+		/* margin-top: 20rpx; */
+	}
+	
+	.pay_btns {
+		width: calc(100% - 60rpx);
+		margin: 0 auto 40rpx;
+		text-align: center;
+		background: #fe6b01;
+		height: 80rpx;
+		border-radius: 16rpx;
+		color: #ffffff;
+		line-height: 80rpx;
+		margin-top: 20rpx;
+		position: fixed;
+		bottom: 0rpx;
+	}
+	
+	.pay_btns1 {
+		width: calc(100% - 60rpx);
+		margin: 0rpx auto 40rpx;
+		text-align: center;
+		background: #e8fbf6;
+		height: 80rpx;
+		border-radius: 16rpx;
+		line-height: 80rpx;
+		margin-top: 20rpx;
+		position: absolute;
+		top: 20rpx;
+		left: 30rpx;
+	}
+	
+	.pay_btns2 {
+		width: calc(100% - 60rpx);
+		margin: 0rpx auto 40rpx;
+		text-align: center;
+		background: #fee8d9;
+		height: 80rpx;
+		border-radius: 16rpx;
+		line-height: 80rpx;
+		margin-top: 20rpx;
+		position: absolute;
+		bottom: 0rpx;
+		left: 30rpx;
+	}
+	
+	/deep/ .u-flex {
+		background: #fff !important;
+	}
+</style>

pages.json

@@ -341,6 +341,12 @@
 				"navigationBarTitleText": "发布丢失物品信息",
 				"enablePullDownRefresh": false
 			}
+		},{
+			"path": "setting/LostandFoundtext",
+			"style": {
+				"navigationBarTitleText": "物品信息",
+				"enablePullDownRefresh": false
+			}
 		}, {
 			"path": "setting/login",
 			"style": {