uniapp-shunfengche/my/setting/LostandFoundtext.vue

<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>