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">
			<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 hflex">
						<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" placeholder="请填写生产技术的标准"></u-textarea>
			</view>
			<view class="box_item1">
				<view class="left">生产验收标准</view>
				<u-textarea v-model="standard_check" 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" :formatter="formatter" :minDate="Number(new Date())" mode="datetime" @close="close" @confirm="selectTime"></u-datetime-picker>
		</view>
		<view class="box">
			<view class="box_title">图片/视频</view>
			<u-upload :fileList="fileList1" :accept='accept'  @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9" width="200rpx" height="200rpx"></u-upload>
		</view>
		<view class="btn hflex acenter jcenter" @click="release">立即发布</view>
	</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: '',
						}
					]
				},
				show: false,
				accept: ['image','video'],
				fileList1: [],
				post_address: '',
				post_time: '',
				show_time: false,
				standard_tech: '',
				standard_check: '',
				id: '',
			}
		},
		onLoad(options) {
			that = this
			if(options.id) {
				that.id = options.id
				that.getData()
			}
		},
		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
			},
			selectTime(e) {
				that.post_time = $api.formatDate(e)
				that.close()
			},
			upload(index) {
				uni.chooseFile({
					count: 9, //默认100
					type:'all',
					success: function (res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: $api.config.baseUrl + '/data/api.auth.Center/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							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: res.tempFiles[0].name,
									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);
							}
						});
					},
					fail: function(res) {
						console.log('fail',res);
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				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++
				}
				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)
				}
				$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)
					}
				})
			}
		},
	}
</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;
			}
			.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>