shunfengche-sfd/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="foundTime" borderBottom ref="item1">
				<view class="flex align-center addboxs bg" style="padding: 0 30rpx; justify-content: space-between;" @click="openTime()">
					<view class="flex align-center">
						<image v-if="globalImages" :src="globalImages + 'imgs/static/upload/time.png'" style="width: 34rpx;height: 34rpx;"></image>
						<view class="add_tit margin-left-xs" v-if="!yuyueTime">选择预约时间</view>
						<view class="add_tit margin-left-xs" v-else>{{yuyueTime}}</view>
					</view>
					<view class="margin-left-xs">
						<image v-if="globalImages" :src="globalImages + 'imgs/static/image/right.png'" style="width: 12rpx;height: 20rpx;">
						</image>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="其他信息" prop="description" borderBottom>
				<textarea placeholder="简要描述物品其他信息" v-model="model1.description"
						class="feedback-textare" />
			</u-form-item>
		</u-form>
		<u-picker v-model="Timeshow" mode="time" :params="params"
					@confirm="timeConfirm"></u-picker>
		<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: '',
				Timeshow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				yuyueTime: '',
			}
		},
		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.yuyueTime = item.foundTime
					this.fileList = item.image ? [{ url: item.image, status: 'success', name: 'image' }] : [];
				} catch (e) {
					console.error('解析参数失败', e);
				}
			}
		},
		methods: {
			submit() {
				this.show = true
			},
			timeConfirm(e) {
				console.log(e, e.year);
				this.yuyueTime = e.year + '/' + e.month + '/' + e.day + '/' + '' + e.hour + ':' + e.minute
			},
			openTime() {
				this.Timeshow = true
				console.log('123123123');
			}
		}
	}
</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: #00c18a;
		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>