cbz-sj/pages/release/waixie/waixie.vue

<template>
	<view class="content">
		<view class="title">订单信息</view>
		<view class="box">
			<view class="box_item hflex acenter">
				<view class="left">联系人</view>
				<u-input v-model="name" border="none" placeholder="请输入联系人姓名"></u-input>
			</view>
			<view class="box_item hflex acenter">
				<view class="left">联系电话</view>
				<u-input v-model="phone" border="none" placeholder="请输入手机号"></u-input>
			</view>
		</view>
		<view class="hflex acenter jbetween" style="padding-right: 30rpx;">
			<view class="title">商品信息</view>
			<view class="hflex acenter " @click="addGood">
				<image src="/static/images/common/add_icon2.png" style="width: 36rpx;height: 36rpx;"></image>
				<view class="add_text">添加</view>
			</view>
		</view>
		<block v-for="(item,index) in items" :key="index">
			<view class="box">
				<view class="box_item hflex acenter">
					<view class="left">商品{{index + 1}}</view>
					<u-input v-model="item.name" border="none" placeholder="请输入标题"></u-input>
				</view>
				<view class="box_item hflex acenter">
					<view class="left">规格</view>
					<u-input v-model="item.spec" border="none" placeholder="如颜色/尺寸等"></u-input>
				</view>
				<view class="box_item hflex acenter">
					<view class="left">数量</view>
					<u-input v-model="item.number" border="none" placeholder="请输入数量"></u-input>
				</view>
				<view class="box_item hflex acenter jbetween">
					<view class="left">附件</view>
					<view class="center vflex">
						<block v-for="(item2,index2) in item.enclosure" :key="index2">
							<view>{{item2.filename}}</view>
						</block>
					</view>
					<view class="right" @click="upload(index)">上传附件</view>
				</view>
				<view class="hflex acenter jend">
					<view class="dte_btn hflex acenter jcenter" @click="delGood(index)">删除</view>
				</view>
			</view>
		</block>
		
		<view class="box">
			<view class="box_item1">
				<view class="left">生产技术标准</view>
				<u-textarea v-model="standard_tech" confirmType="done" placeholder="请填写生产技术的标准"></u-textarea>
			</view>
			<view class="box_item1">
				<view class="left">生产验收标准</view>
				<u-textarea v-model="standard_check" confirmType="done" placeholder="请填写生产验收的标准"></u-textarea>
			</view>
			<view class="box_item hflex acenter">
				<view class="left">交货地址</view>
				<u-input v-model="post_address" border="none" placeholder="请填写交货地址"></u-input>
			</view>
			<view class="box_item hflex acenter" @click="showTime">
				<view class="left">交货时间</view>
				<u-input v-model="post_time" border="none" disabled disabledColor="#fff" placeholder="请选择交货时间" suffixIcon="arrow-right"></u-input>
			</view>
			<u-datetime-picker :show="show_time"  :minDate="Number(new Date())"  mode="date" @cancel="close" @confirm="selectTime"></u-datetime-picker>
		</view>
		<view class="box">
			<view class="box_title">图片/视频</view>
			<view class="hflex acenter fwrap" style="padding-bottom: 20rpx;">
				<block v-for="(item,index) in fileList1" :key="index">
					<view v-if="item.type == 'image'" style="position: relative;">
						<image :src="item.url" class="img" mode="aspectFill" v-if="item.type == 'image'"></image>
						<image src="/static/images/common/popu_close.png" class="close_icon" @click="deletePic2(index)"></image>
					</view>
					<view v-if="item.type == 'video'" style="position: relative;">
						<video :src="item.url" direction="0" class="img" v-if="item.type == 'video'"></video>
						<image src="/static/images/common/popu_close.png" class="close_icon" @click="deletePic2(index)"></image>
					</view>
					<!-- <image :src="item.url" class="img" mode="aspectFill" v-if="item.type == 'image'"></image>
					<video :src="item.url" direction="0" class="img" v-if="item.type == 'video'"></video> -->
				</block>
				<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9" width="200rpx" height="200rpx"></u-upload> -->
				<image src="/static/images/common/upload_img.png" class="img" @click="choose"></image>
			</view>
		</view>
		<view class="btn hflex acenter jcenter" @click="release">立即发布</view>
		<u-popup :show="show_choose" @close="close">
			<view class="vflex acenter">
				<view class="hflex acenter jcenter choose" @click="choose_img">
					<view>图片</view>
				</view>
				<view class="hflex acenter jcenter choose" @click="choose_video">
					<view>视频</view>
				</view>
				<view class="hflex acenter jcenter choose" @click="close">
					<view>取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				name: '',
				phone: '',
				items: [
					{
						name: '',
						spec: '',
						number: '',
						enclosure: [
							{
								filename: '',
								fileurl: '',
							}
						]
					}
				],
				good: {
					name: '',
					spec: '',
					number: '',
					enclosure: [
						{
							filename: '',
							fileurl: '',
						}
					]
				},
				back: false,
				show: false,
				fileList1: [],
				post_address: '',
				post_time: '',
				show_time: false,
				standard_tech: '',
				standard_check: '',
				id: '',
				show_choose: false
			}
		},
		onLoad(options) {
			that = this
			if(options.id) {
				that.id = options.id
				that.getData()
			}
			if(options.back) {
				that.back = options.back
			}
		},
		methods: {
			getData() {
				$api.req({
					url: '/data/api.business.Purchase/show',
					data: {
						tab: 3,
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.name = res.data.real_name
						that.phone = res.data.mobile
						that.items = res.data.items
						that.fileList1 = res.data.file
						that.post_address = res.data.post_address
						that.post_time = res.data.post_time
						that.standard_tech = res.data.standard_tech
						that.standard_check = res.data.standard_check
					}
				})
			},
			showTime() {
				that.show_time = true
			},
			close() {
				that.show_time = false
				that.show_choose = false
			},
			selectTime(e) {
				that.post_time = $api.formatDate(e)
				that.close()
			},
			upload(index) {
				let platform = '';
				uni.getSystemInfo({ 
				    success:function(res){ platform = res.platform; } 
				}) 
				if(platform == 'ios'){ 
				    const iOSFileSelect = uni.requireNativePlugin('YangChuan-YCiOSFileSelect'); 
				    // apple document-types 文件类型参数 https://developer.apple.com/library/archive/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html 
				    // 文件类型参数
				    let params = { "document-types":["public.text","public.zip","public.data","com.adobe.pdf", "com.microsoft.word.doc","com.adobe.postscript", "com.microsoft.excel.xls","com.adobe.encapsulated- postscript", "com.microsoft.powerpoint.ppt","com.adobe.photoshop- image", "com.microsoft.word.rtf","com.microsoft.advanced- systems-format", "com.microsoft.advanced- stream-redirector"], "isBase64":0 } 
				    iOSFileSelect.show(params, result => { 
				        let status = parseInt(result.status); 
				        // 状态200选取成功
				        if(status == 200){ 
							console.log(result);
				            let url = result.url; 
				            uni.downloadFile({ url:url, success:function(res){ 
				                if(res.statusCode == 200){ 
				                    // filePath 可用于 uni.uploadFile 上传的路径
				                    let filePath = res.tempFilePath; 
										uni.uploadFile({
											url: $api.config.baseUrl + '/data/api.auth.Center/upload', //仅为示例，非真实的接口地址
											filePath: filePath,
											name: 'file',
											header: {
												'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
												'api-name': 'iosapp'
											},
											formData: {
												'user': 'test'
											},
											success: (uploadFileRes) => {
												var data = JSON.parse(uploadFileRes.data)
												var enclosure = {
													filename: result.lastName,
													fileurl: data.data.url
												}
												if(that.items[index].enclosure[0].filename == '') {
													that.items[index].enclosure.splice(0,1,enclosure)
												} else {
													that.items[index].enclosure.push(enclosure)
												}
												console.log('items',that.items);
											}
										});
				                    } 
				                } 
				            }); 
				        }
					}); 
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			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',
						type: result.type,
						url: result.url
					}))
					fileListLen++
					if(lists.length - 1 == i) {
						uni.hideLoading()
					}
				}
				console.log(that.fileList1);
			},
			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: {
							'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
							'api-name': 'iosapp'
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								var data = JSON.parse(res.data)
								console.log('data:',data);
								var type = data.data.key.split('.')
								if(type[1] == 'mp4') {
									that.$set(data.data,'type','video')
								} else {
									that.$set(data.data,'type','image')
								}
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
			addGood() {
				that.items.push(that.good)
			},
			delGood(index) {
				that.items.splice(index,1)
			},
			release() {
				console.log(that.fileList1);
				var images = []
				var image = {}
				for(var i=0;i<that.fileList1.length;i++) {
					image = {
						type: that.fileList1[i].type,
						src: that.fileList1[i].url,
						url: that.fileList1[i].url
					}
					images.push(image)
				}
				for(var i=0;i<that.items.length;i++) {
					if(!that.items[i].name || !that.items[i].spec || !that.items[i].number) {
						$api.info('商品不能为空')
						return
					}
					if(!that.items[i].enclosure) {
						that.items[i].enclosure = {
							filename: '',
							fileurl: ''
						}
					}
				}
				if(images.length <=0) {
					$api.info('请选择图片')
					return
				}
				$api.req({
					url: '/data/api.business.Purchase/coordination_order',
					method: 'POST',
					data: {
						id: that.id,
						real_name: that.name,
						mobile: that.phone,
						standard_tech: that.standard_tech,
						standard_check: that.standard_check,
						post_time: that.post_time,
						post_address: that.post_address,
						file: JSON.stringify(images),
						item: JSON.stringify(that.items)
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						if(that.back) {
							$api.jump(-1)
						} else {
							$api.jump('/pages/tabbar/index/index',2)
						}
					}
				})
			},
			choose() {
				that.show_choose = true
			},
			choose_img() {
				that.close()
				
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						let fileListLen = that.fileList1.length
						let file = res.tempFiles[0].path
						console.log(file);
						uni.uploadFile({
							url: $api.config.baseUrl + '/data/api.auth.Center/upload',  
							filePath: file,
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
								'api-name': 'iosapp'
							},
							formData: {
								user: 'test'
							},
							success: (res2) => {
								var data = JSON.parse(res2.data)
								console.log('data:',data);
								let item = {
									type: 'image',
									url: data.data.url
								}
								that.fileList1.push(item)
								uni.hideLoading()
							},
							fail(err) {
								console.log(err);
							}
						});
						
					}
				});
			},
			choose_video() {
				that.close()
				
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function (res) {
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						let fileListLen = that.fileList1.length
						let file = res.tempFilePath
						console.log(file);
						uni.uploadFile({
							url: $api.config.baseUrl + '/data/api.auth.Center/upload',  
							filePath: file,
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
								'api-name': 'iosapp'
							},
							formData: {
								user: 'test'
							},
							success: (res2) => {
								var data = JSON.parse(res2.data)
								let item = {
									type: 'video',
									url: data.data.url
								}
								that.fileList1.push(item)
								uni.hideLoading()
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			},
			deletePic2(index) {
				that.fileList1.splice(index,1)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F5F5F5;
		.title {
			font-size: 30rpx;
			font-weight: 500;
			color: #222222;
			line-height: 42rpx;
			padding: 24rpx 0 14rpx 30rpx;
		}
		.add_text {
			font-size: 28rpx;
			font-weight: 500;
			color: #222222;
			line-height: 40rpx;
			padding-left: 2rpx;
		}
		.box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.box_title {
				font-size: 28rpx;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
				padding: 24rpx 0 20rpx;
			}
			.img {
				width: 200rpx;
				height: 200rpx;
				margin: 0 20rpx 20rpx 0;
				border-radius: 16rpx;
			}
			video {
				width: 200rpx;
				height: 200rpx;
				margin: 0 20rpx 20rpx 0;
			}
			.close_icon {
				position: absolute;
				top: 0;
				right: 15rpx;
				width: 30rpx;
				height: 30rpx;
			}
			.box_item {
				padding: 28rpx 0;
				border-bottom: 1rpx solid #F5F5F5;
				.left {
					width: 156rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
				}
				.center {
					width: calc(100% - 276rpx);
				}
				.right {
					font-size: 30rpx;
					font-weight: 400;
					color: #5471FF;
					line-height: 42rpx;
				}
				
			}
			.box_item1 {
				padding: 28rpx 0;
				.left {
					// width: 156rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
				}
				.u-textarea {
					margin: 28rpx 0 0;
					border: none;
					background: #F5F5F5;
					border-radius: 16rpx;
				}
			}
			.dte_btn {
				width: 132rpx;
				height: 52rpx;
				margin: 30rpx 0;
				border-radius: 26rpx;
				border: 1rpx solid #D3D3D3;
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				line-height: 36rpx;
			}
		}
		.btn {
			margin: 28rpx auto;
			width: 690rpx;
			height: 84rpx;
			background: #5471FF;
			border-radius: 46rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
		.popu_title {
			font-size: 36rpx;
			font-weight: 500;
			color: #222222;
			line-height: 50rpx;
		}
	}
</style>