cbz-sj/pages/release/ocean/ocean.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.weight" border="none" placeholder="请输入商品数量"></u-input>
				</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_item hflex acenter" @click="showTime">
				<view class="left">包装形式</view>
				<u-input v-model="form" border="none" disabled disabledColor="#fff" placeholder="去选择" suffixIcon="arrow-right"></u-input>
			</view>
			<view class="box_item hflex acenter">
				<view class="left">到货码头</view>
				<u-input v-model="wharf_to" border="none" placeholder="请输入装货码头"></u-input>
			</view>
			<view class="box_item hflex acenter">
				<view class="left">到港码头</view>
				<u-input v-model="wharf_for" border="none" placeholder="请输入到港码头"></u-input>
			</view>
		</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_time" round="10" mode="bottom" @close="close" :safeAreaInsetBottom="false">
			<view class="popu">
				<image src="/static/images/common/popu_close.png" class="close" @click="close"></image>
				<view class="popu_title">选择包装形式(可多选)</view>
				<view class="hflex acenter fwrap">
					<block v-for="(item,index) in formList" :key="index">
						<view class="popu_item hflex acenter jcenter" :class="active.indexOf(index) !== -1?'active':''" @click="select(index)">{{item}}</view>
					</block>
				</view>
				<view class="btn hflex acenter jcenter" @click="sure">确定</view>
			</view>
		</u-popup>
		<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: '',
						weight: '',
						
					}
				],
				good: {
					name: '',
					weight: '',
					
				},
				fileList1: [],
				form: '',
				formList: [],
				active: [],
				wharf_to: '',
				wharf_for: '',
				show_time: false,
				id: '',
				back: false,
				show_choose: false
			}
		},
		onLoad(options) {
			that = this
			if(options.id) {
				that.id = options.id
				that.getData()
			}
			if(options.back) {
				that.back = options.back
			}
			that.getformList()
		},
		methods: {
			getData() {
				$api.req({
					url: '/data/api.business.Purchase/show',
					data: {
						tab: 4,
						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.form = res.data.form
						that.wharf_to = res.data.wharf_to
						that.wharf_for = res.data.wharf_for
					}
				})
			},
			getformList() {
				$api.req({
					url: '/data/api.business.Purchase/config'
				}, function(res) {
					if(res.code == 1) {
						that.formList = res.data.packing
					}
				})
			},
			showTime() {
				that.show_time = true
			},
			close() {
				that.show_time = false
				that.show_choose = false
			},
			select(index) {
				for(var i=0;i<that.active.length;i++) {
					if(index == that.active[i]) {
						that.active.splice(i,1)
						return;
					}
				}
				that.active.push(index)
			},
			sure() {
				for(var i=0;i<that.active.length;i++) {
					that.form += that.formList[that.active[i]] + ','
				}
				that.form = that.form.substring(0,that.form.length - 1)
				that.close()
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			deletePic2(index) {
				that.fileList1.splice(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() {
				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].weight) {
						$api.info('商品不能为空')
						return
					}
				}
				if(images.length <=0) {
					$api.info('请选择图片')
					return
				}
				$api.req({
					url: '/data/api.business.Purchase/ocean_order',
					method: 'POST',
					data: {
						id: that.id,
						real_name: that.name,
						mobile: that.phone,
						form: that.form,
						wharf_to: that.wharf_to,
						wharf_for: that.wharf_for,
						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);
							}
						});
					}
				});
			}
		},
	}
</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 {
			box-sizing: border-box;
			padding: 36rpx 30rpx;
			position: relative;
			width: 100%;
			// height: 520rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0px 0px;
			.close {
				position: absolute;
				width: 48rpx;
				height: 48rpx;
				right: 30rpx;
				top: -60rpx;
			}
			.popu_title {
				width: 100%;
				text-align: center;
				padding: 0 0 36rpx 0;
				font-size: 36rpx;
				font-weight: 500;
				color: #222222;
				line-height: 50rpx;
			}
			.popu_item {
				height: 60rpx;
				background: #F3F3F7;
				border-radius: 34rpx;
				padding: 0 66rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #222222;
				margin: 28rpx 28rpx 0 0;
			}
			.active {
				background: #E7EBFF;
				border: 1px solid #5471FF;
				color: #5471FF;
			}
		}
		
	}
</style>