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="https://ship.shipcc.cn/common/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" disabled disabledColor="#fff" border="none" placeholder="开始时间"></u-input>
					</view>
					<u-datetime-picker title="开始时间" dis :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"  disabled disabledColor="#fff" 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="addressObj.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" inactiveColor="rgb(230, 230, 230)" @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 {
				id: '',
				fileList1: [],
				imgs: '',
				fault: '',
				is_quick: false,
				startTime: '',
				endTime: '',
				address: '',
				show_time1: false,
				show_time2: false,
				newDate: Number(new Date()),
				addressObj: {},
			}
		},
		onLoad(options) {
			that = this
			if(options.data) {
				var data = JSON.parse(options.data)
				that.getData(data)
				console.log(data);
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			getData(data) {
				that.id = data.id
				var imgs = data.imgs
				let obj = {}
				for(let key in imgs) {
					obj[key] = imgs[key]
				}
				var fileList1 = Object.keys(obj).map(item => ({
					url: obj[item]
				}))
				that.fileList1 = fileList1
				that.imgs = data.imgs
				that.fault = data.describe
				if(data.quick == 1) {
					that.is_quick = false
				} else {
					that.is_quick = true
				}
				that.startTime = data.start_time
				that.endTime = data.end_time
				that.address = data.address
				that.addressObj = {
					address: data.address,
					province: data.province,
					city:data.city,
					area:data.area,
				}
			},
			selectmap() {
				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)
				that.imgs = ''
				if(that[`fileList${event.name}`].length > 0) {
					for(var i=0;i<that[`fileList${event.name}`].length;i++) {
						if(i == that[`fileList${event.name}`].length -1) {
							that.imgs += that[`fileList${event.name}`][i].url
						} else {
							that.imgs += that[`fileList${event.name}`][i].url + ','
						}
					}
				}
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				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.url
					}))
					fileListLen++
					if(lists.length - 1 == i) {
						uni.hideLoading()
					}
				}
				that.imgs = ''
				if(that[`fileList${event.name}`].length > 0) {
					for(var i=0;i<that[`fileList${event.name}`].length;i++) {
						if(i == that[`fileList${event.name}`].length -1) {
							that.imgs += that[`fileList${event.name}`][i].url
						} else {
							that.imgs += that[`fileList${event.name}`][i].url + ','
						}
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $api.config.baseUrl + '/data/api.auth.Center/upload',  
						filePath: url,
						name: 'file',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'api-token': uni.getStorageSync('token').token?uni.getStorageSync('token').token:'',
							'api-name': 'wxapp'
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								var data = JSON.parse(res.data)
								resolve(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() {
				uni.showLoading({
					title: '发布中',
					mask:true
				})
				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') ) {
					$api.req({
						url: '/data/api.auth.ShipEngineMaintenance/subrepair',
						method: 'POST',
						data: {
							imgs: that.imgs,
							start_time: that.startTime,
							end_time: that.endTime,
							province: that.addressObj.province,
							city: that.addressObj.city,
							area: that.addressObj.area,
							address: that.addressObj.address,
							describe: that.fault,
							quick: that.is_quick?2:1,
							id: that.id
						}
					}, function(res) {
						uni.hideLoading()
						if(res.code == 1) {
							$api.info(res.info)
							$api.jump(-1)
						}
					})
				}
			}
		},
	}
</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>