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" @click="examine(imageList[index])"></image>
							</view>
						</view>
						<view class="imgvideo_video" v-for="(item,index) in 1">
							<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]">
								<video :src="BASE_URL+selfList" :controls="false" class="uploading" ></video>
								<view class="yulan" @click="yulan(index)">
									预览
								</view>
								<view class="deletes" @click="deletes(index+3)">
									删除
								</view>
							</view>
						</view>
					</view>
					<button @click="btn" :disabled="btnisTorF">提 交</button>
				</view>
		</view>
		</view>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="imgs" :fixed="false" :blob="false" :maxWidth="500" :maxHeight="500"></kps-image-cutter>
		<u-modal v-model="videoshow" :mask-close-able="true" :show-confirm-button="false" title="视频预览" class="model">
			<view class="model_box">
				<video :src="BASE_URL+selfList" controls style="width:90%;"></video>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		components:{
			kpsImageCutter
		},
		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,//手机号判断
				imgs:'',
				imgindex:null,
				videoindex:0,
				videoshow:false
			}
		},
		methods: {
			clickLeft(){//返回
				uni.navigateTo({
					url:"./index"
				})
			},
			gainimg(index){//添加图片
				this.imgindex = index
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: (res)=> {
						this.imgs = res.tempFilePaths[0]
					}
				});
			},
			gainvideo(index){//添加视频
				uni.chooseVideo({
				    count: 1,
					sourceType:['album', 'camera'],
				    success:(res)=> {
						console.log(res)
						uni.uploadFile({
						    url: 'http://182.92.193.64:8002/api/api_gateway?method=after_sale.after_sale_manage.video_upload', //仅为示例，非真实的接口地址
						    filePath: res.tempFilePath,
						    name: 'upload',
							fileType:"video",
						    formData: {
						        'user': 'test'
						    },
						    success: (uploadFileRes) => {
								console.log(uploadFileRes)
								if(uploadFileRes.statusCode == 200){
									this.selfList=JSON.parse(uploadFileRes.data).data.data.src
									this.$forceUpdate() //强制刷新视图
									this.uploadingTF[index+3] = true
								}else{
									uni.showToast({
									    title: '请将视频压缩后上传!',
									    duration: 2000,
										icon:"none"
									});
								}
						    }
						});
				    }
				});
			},
			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)
			},
			examine(url) {
				var imgarr =[]
				imgarr.push(url)
				console.log(imgarr)
				uni.previewImage({
					urls: imgarr
				});
			},
			onok(ev){
				uni.uploadFile({
				    url: 'http://182.92.193.64:8002/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
					filePath: ev.path,
				    name: 'img_file',
				    formData: {
				        'user': 'test'
				    },
				    success: (uploadFileRes) => {
						this.imageList[this.imgindex]=JSON.parse(uploadFileRes.data).data.src
						this.$forceUpdate() //强制刷新视图
						this.uploadingTF[this.imgindex]=true
				    }
				});
				this.imgs = ""
			},
			oncancle(){
				this.imgs = ""
			},
			yulan(index){
				this.videoindex = index
				this.videoshow = !this.videoshow
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #71CD9A;
	}
	.addafter_con{
		width: 100%;
		position: absolute;
		top: 54px;
		.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;
			flex-wrap: wrap;
			.imgvideo_img,.imgvideo_video{
				width: 30%;
				height: 160rpx;
				border: 2rpx dashed #A3DABD;
				text-align: center;
				line-height: 160rpx;
				margin:0 10rpx 20rpx 8rpx;
				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;
				}
				.deletes{
					width: 80%;
					height: 50rpx;
					margin-left: 110%;
					font-size: 24rpx;
					background-color: #FE0000;
					color: #FFFDEF;
					line-height: 50rpx;
				}
				.yulan{
					width: 80%;
					height: 50rpx;
					margin: 0 0 20rpx 110%;
					font-size: 24rpx;
					background-color: #62BF89;
					color: #FFFDEF;
					line-height: 50rpx;
				}
			}
		}
		button{
			width: 100%;
			height: 60rpx;
			font-size: 30rpx;
			line-height: 60rpx;
			color: #FFFFFF;
			background-color: #50CE87;
			margin-top: 60rpx;
		}
	}
	.model {
		width: 90%;
		.model_box {
			width: 90%;
			margin: 40rpx auto 48rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>