bigDataApp/pages/afterSale/addafter.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="设备报修"></uni-nav-bar>
			</view>
			<view class="addafter_con">
				<view class="addafter_con_top">
					<p>基本信息</p>
					<input type="number" v-model="adddata.id" placeholder="请填写设备ID" placeholder-style="color: #62BF89;font-size:24rpx"
					 @blur="addID" />
					<input type="select" v-model="adddata.type" placeholder="请选择设备类型" placeholder-style="color: #62BF89;font-size:24rpx"
					 @click="show = true" disabled />
					<input type="text" v-model="adddata.name" placeholder="请填写联系人名称" placeholder-style="color: #62BF89;font-size:24rpx" />
					<input type="number" v-model="adddata.phone" placeholder="请填写联系人电话" placeholder-style="color: #62BF89;font-size:24rpx"
					 @blur="iphone" />
					<input type="text" v-model="adddata.site" placeholder="请填写联系人地址" placeholder-style="color: #62BF89;font-size:24rpx" />
					<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
				</view>
				<view class="addafter_con_connect">
					<image src="../../static/image/afterSale/5d9b8db91f11175aa5277fef40581ab.png" mode=""></image>
					<image src="../../static/image/afterSale/5d9b8db91f11175aa5277fef40581ab.png" mode=""></image>
				</view>
				<view class="addafter_con_bot">
					<p class="addafter_con_bot_title">保修详情</p>
					<textarea v-model="adddata.text" placeholder="请描述设备问题" class="textarea" placeholder-style="color: #62BF89;font-size:26rpx" />
					<p style="color: #808080;font-size: 24rpx;">{{adddata.text.length}}/140</p>
					<view class="imgvideo">
						<view class="imgvideo_img" v-for="(item,index) in 3">
							<view @click="gainimg(index)">
								<image src="../../static/image/afterSale/eee1e84bb85f6f6ff5c5866a3a42779.png" mode="" v-if="!uploadingTF[index]"></image>
							</view>
							<view class="uploading" v-if="uploadingTF[index]">
								<u-icon name="close" class="delete" @click="deletes(index)"></u-icon>
								<image :src="imageList[index]" mode="" class="uploading"></image>
							</view>
						</view>
						<view class="imgvideo_video" v-for="(item,index) in 3">
							<view @click="gainvideo(index)">
								<image src="../../static/image/afterSale/80314eaa07c32e9c76537a8a8224130.png" mode="" v-if="!uploadingTF[index+3]"></image>
							</view>
							<view class="uploading" v-if="uploadingTF[index+3]">
								<u-icon name="close" class="delete" @click="deletes(index+3)"></u-icon>
								<video :src="BASE_URL+selfList[index]" controls class="uploading"></video>
							</view>
						</view>
					</view>
					<button @click="btn" :disabled="btnisTorF">提 交</button>
				</view>
		</view>
		
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				BASE_URL: 'http://182.92.193.64:8002',
				adddata:{//设备参数
					id:'',
					name:'',
					phone:'',
					text:'',
					site:'',
					type:'',
					type_id:''
				},
				imageList:[],//图片链接
				uploadingTF:[false,false,false,false,false,false],//图片的删除
				selfList:[],//视频链接
				actionSheetList: [//设备选项
					{
						text: '杀虫灯'
					},
					{
						text: '测报灯'
					},
					{
						text: '智能性诱'
					},
					{
						text: '环境检测'
					},
					{
						text: '监控设备'
					},
					{
						text: '孢子仪'
					},
					{
						text: '性诱设备'
					},
				],
				show:false,//选择器的显示
				btnisTorF:false,
				deviceid:false,//设备号判断
				imageFile:[],
				phoneTF:true//手机号判断
			}
		},
		methods: {
			clickLeft(){//返回
				uni.navigateTo({
					url:"./index"
				})
			},
			gainimg(index){//添加图片
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: (res)=> {
						uni.uploadFile({
						    url: 'http://182.92.193.64:8002/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
						    name: 'img_file',
						    formData: {
						        'user': 'test'
						    },
						    success: (uploadFileRes) => {
								this.imageList[index]=JSON.parse(uploadFileRes.data).data.src
								this.$forceUpdate() //强制刷新视图
								this.uploadingTF[index]=true
						    }
						});
					}
				});
			},
			gainvideo(index){//添加视频
				uni.chooseVideo({
				    count: 1,
					mediaType:['video'],
				    success:(res)=> {
						uni.uploadFile({
						    url: 'http://182.92.193.64:8002/api/api_gateway?method=after_sale.after_sale_manage.video_upload', //仅为示例，非真实的接口地址
						    file: res.tempFile,
						    name: 'upload',
						    formData: {
						        'user': 'test'
						    },
						    success: (uploadFileRes) => {
								this.selfList[index]=JSON.parse(uploadFileRes.data).data.data.src
								this.$forceUpdate() //强制刷新视图
								this.uploadingTF[index+3]=true
						    }
						});
				    }
				});
			},
			deletes(index){//删除
				this.uploadingTF[index]=false
				this.$forceUpdate() //强制刷新视图
			},
			async getaddafter(data) {//提交数据
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=after_sale.after_sale_manage.aftersale_apply',
					data:{
						    device_id:data.id,
						    d_type:data.type,
						    errordesc:data.text,
						    errorimg:data.imageList,
							errorvideo:data.selfList,
						    addr:data.site,
						    user:data.name,
						    userphone:data.phone,
						    is_pc:0
					}
				})
			},
			async getID(data) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=after_sale.after_sale_manage.device_check',
					data:{
						device_id:data
					}
				})
				if(res!=''){
					this.deviceid=true
				}else{
					this.deviceid=false
				}
			},
			btn(){//提交按钮
				let obj ={}
				obj.id=this.adddata.id
				obj.type=this.adddata.type_id
				obj.text=this.adddata.text
				obj.imageList=JSON.stringify(this.imageList)
				obj.site=this.adddata.site
				obj.name=this.adddata.name
				obj.phone=this.adddata.phone
				obj.selfList=JSON.stringify(this.selfList)
				console.log(obj.imageList)
				if(this.deviceid && this.adddata.type_id!=''&&this.phoneTF){
					this.getaddafter(obj)
				}else{
					console.log(1)
					uni.showToast({
					    title: '设备ID和设备类型不能为空',
					    duration: 2000,
						icon:"none"
					});
				}
			},
			actionSheetCallback(index) {//选择器选择
				this.adddata.type = this.actionSheetList[index].text;
				this.adddata.type_id=index+2
			},
			iphone(){//检测手机
				if(!/^1[23456789]\d{9}$/.test(this.adddata.phone)){
					uni.showToast({
					    title: '手机号格式不正确',
					    duration: 2000,
						icon:'none'
					});
					this.phoneTF=false
				}
			},
			addID(){
				this.getID(this.adddata.id)
			}
		}
	}
</script>

<style lang="scss">
	.addafter_con{
		width: 100%;
		padding: 110rpx 0;
		background-color: #71CD9A;
		box-sizing: border-box;
		.addafter_con_top{
			width: 90%;
			margin: 0 auto;
			background-color: #FFFFFF;
			padding: 16rpx 30rpx 36rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			p{
				text-align: center;
				font-size: 30rpx;
				color: #62BF89;
			}
			input{
				margin-top: 20rpx;
				background-color: #F1FAF5;
				color: #62BF89;
				font-size:26rpx;
				padding: 8rpx 26rpx;
				border-radius: 20rpx;
			}
		}
		.addafter_con_connect{
			width: 90%;
			margin: -20rpx auto;
			display: flex;
			justify-content: space-between;
			padding: 0 16rpx;
			box-sizing: border-box;
			image{
				width: 20rpx;
				height: 60rpx;
			}
		}
		.addafter_con_bot{
			width: 90%;
			margin: 0 auto;
			background-color: #FFFFFF;
			padding: 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			.addafter_con_bot_title{
				text-align: center;
				font-size: 30rpx;
				color: #62BF89;
			}
			.textarea{
				width: 94%;
				height: 240rpx;
				padding: 20rpx;
				background-color: #F1FAF5;
				margin-top: 20rpx;
				font-size: 26rpx;
				border-radius: 20rpx;
				color: #62BF89;  
			}
		}
		.imgvideo{
			width: 100%;
			margin-top: 20rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.imgvideo_img,.imgvideo_video{
				width: 30%;
				height: 160rpx;
				border: 2rpx dashed #A3DABD;
				text-align: center;
				line-height: 160rpx;
				margin-bottom: 20rpx;
				position: relative;
				image{
					width: 40rpx;
					height: 32rpx;
				}
				.uploading{
					width: 100%;
					height: 160rpx;
					position: absolute;
					top: 0;
					left: 0;
					.delete{
						position: absolute;
						top: -12rpx;
						right: -12rpx;
						font-size: 36rpx;
						background-color: #FE0000;
						border-radius: 50%;
						color: #ffffff;
						z-index: 50;
					}
				}
			}
		}
		button{
			width: 100%;
			height: 60rpx;
			font-size: 30rpx;
			line-height: 60rpx;
			color: #FFFFFF;
			background-color: #50CE87;
			margin-top: 40rpx;
		}
	}
</style>