cbz/page_index/pages/repair/repairOrder.vue

<template>
	<view class="content">
		<view class="box">
			<view class="cell">
				<view class="label required">产品图片</view>
				<view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" :maxCount="9" name="1" multiple :previewFullImage="true" width="200rpx" height="200rpx">
						<image src="/static/images/comment/add-img.png" style="width: 200rpx;height: 200rpx;"></image>
					</u-upload>
				</view>
			</view>
			<view class="cell">
				<view class="label required">维修时间</view>
				<view class="hflex acenter jbetween">
					<view @click="open(1)">
						<u-input v-model="startTime" border="none" placeholder="开始时间"></u-input>
					</view>
					<u-datetime-picker title="开始时间" :show="show_time1" :minDate="newDate" v-model="newDate" ref="datetimePicker" @confirm="confirmTime1" @cancel="cancel" :formatter="formatter" mode="date"></u-datetime-picker>
					<view style="margin: 0 20rpx;">-</view>
					<view @click="open(2)">
						<u-input v-model="endTime" border="none" placeholder="结束时间"></u-input>
					</view>
					<u-datetime-picker title="结束时间" :show="show_time2" :minDate="newDate" v-model="newDate" ref="datetimePicker" @confirm="confirmTime2" @cancel="cancel" :formatter="formatter" mode="date"></u-datetime-picker>
				</view>
			</view>
			<view class="cell" @click="selectmap">
				<view class="label required">维修地点</view>
				<view>
					<u-input v-model="address" border="none" disabled disabledColor="#fff" placeholder="请选择"  suffixIcon="arrow-right"></u-input>
				</view>
			</view>
			<view class="cell">
				<view class="label required">故障描述</view>
				<view>
					<u--textarea v-model="fault" maxlength="300" placeholder="请详细描述故障情况及原因,方便师傅带齐工具,并为您提供准确合理的维修" border="none" count></u--textarea>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="hflex acenter jbetween">
				<view class="label">是否快修</view>
				<u-switch v-model="is_quick" activeColor="#506dff" @change="change"></u-switch>
			</view>
		</view> 
		<view class="bottom">
			<view class="bottom_btn" @click="release">立即发布</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				fileList1: [],
				fault: '',
				is_quick: false,
				startTime: '',
				endTime: '',
				address: '',
				show_time1: false,
				show_time2: false,
				newDate: Number(new Date()),
			}
		},
		onLoad() {
			that = this
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			selectmap() {
				console.log('选择地址');
				uni.getLocation({
					type: 'wgs84',
					success: (res)=>{
						console.log(res);
						if(res.longitude && res.latitude){
							$api.jump('/pages/user/map?lng='+res.longitude+'&lat='+res.latitude)
						}
					},
					fail:()=>{
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if(!status['scope.userLocation']){
									uni.showModal({
										title:"是否授权当前位置",
										content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success:(tip)=>{
											if(tip.confirm){
												uni.openSetting({
													success:(data)=>{
														if(data.authSetting['scope.userLocation']===true){
															uni.showToast({
																title:"授权成功",
																icon:"success",
																duration:1000
															})
															uni.getLocation({
																type: 'wgs84',
																success: (res)=>{
																	console.log('当前位置的经度：' + res.longitude);
																	console.log('当前位置的纬度：' + res.latitude);
																	$api.jump('/pages/user/map?lng='+res.longitude+'&lat='+res.latitude)
																}
															})
														}else{
															uni.showToast({
																title:"授权失败",
																icon:"none",
																duration:1000
															})
														}
													}
												})
											}
										}
									})
								}else{
									uni.getLocation({
										type: 'wgs84',
										success: (res)=>{
											console.log('当前位置的经度：' + res.longitude);
											console.log('当前位置的纬度：' + res.latitude);
											$api.jump('/pages/user/map?lng='+res.longitude+'&lat='+res.latitude)
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title:"调用授权窗口失败",
									icon:"none",
									duration:1000
								})
							}
						})
					}
				})
			},
			// 格式化日期选择
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			// 是否快修
			change(e) {
				that.is_quick = e
			},
			// 打开选择器
			open(index) {
				if(index == 1) {
					that.show_time1 = true
				} else {
					that.show_time2 = true
				}
			},
			cancel() {
				that.show_time1 = false
				that.show_time2 = false
			},
			confirmTime1(e) {
				that.startTime = $api.formatDate(e)
				that.cancel()
			},
			confirmTime2(e) {
				that.endTime = $api.formatDate(e)
				that.cancel()
			},
			// 立即发布
			release() {
				if($api.formCheck(that.fileList1,'required') &&$api.formCheck(that.fault,'required') && $api.formCheck(that.startTime,'required') && $api.formCheck(that.endTime,'required')&& $api.formCheck(that.endTime,'required') ) {
					
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F4F4F4;
		.box {
			width: 690rpx;
			margin: 20rpx 30rpx 0;
			background: #FFFFFF;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 20rpx;
			.cell {
				padding: 32rpx 0 0;
				.label {
					font-size: 26rpx;
					font-weight: 400;
					color: #222222;
					padding-bottom: 28rpx;
				}
				.required {
					position: relative;
					padding-left: 15rpx;
				}
				.required::after {
					content: '*';
					position: absolute;
					top: 5rpx;
					left: 0;
					font-size: 26rpx;
					font-weight: 400;
					color: #FF3232;
				}
			}
		}
		.bottom {
			width: 100%;
			z-index: 9;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 40rpx 74rpx;
			.bottom_btn {
				width: 100%;
				height: 84rpx;
				background: #506DFF;
				border-radius: 42rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 84rpx;
			}
			
		}
	}
</style>