yiliangyiyun-app/pages/business/release.vue

<template>
	<view class="content">
		<view class="content1">
			<view class='row'>
				<view class="textarea">
					<textarea placeholder-style="color:#AFB3BF;" placeholder="请发布粮食类商品交易信息，建议包含联系方式" maxlength="2000"
						v-model="dataObj.publishingContent"></textarea>
					<view class="textarea-left">
						<view class="clear" @click="clear()">清除全部</view>
					</view>
					<view class="textarea-bottom">
						{{dataObj.publishingContent?dataObj.publishingContent.length:'0'}}/2000字
					</view>
				</view>

				<!-- <view class="number">
					{{dataObj.publishingContent.length}}/2000个字
				</view> -->
			</view>
			<view style="padding-left: 10rpx;">
				<view style='flex-wrap:wrap;' class='flex'>
					<view v-for='(item,index) in imgList2' v-if="imgList2 && imgList2.length > 0"
					style="position: relative;margin-left: 20rpx;">
					<view class="delete_img" @click="deleteImg(index)">
						<u-icon size='4' name="close"></u-icon>
					</view>
					<image :src="item.appendixPath" mode="" style="width: 100px;height: 100px;border:1px solid #ccc;border-radius: 5rpx;"></image>
					</view>
					<view class="biankuang" @click="uploadClick" v-if="imgList2.length < 9">
						<view class="tubiao">
							<image class="upload" src="../../static/img/jiaoyi/tianjiazhaopian.png" mode="">
							</image>
						</view>
					</view>
				</view>
				
			<!-- 	<upload :file-list='businesslicense' class="upload" ref="upload" :action="action" :max-size="maxSize"
					delIconSize='30' delBgColor='rgba(0,0,0,0.4)' delIcon="trash" :max-count="9"
					:size-type="['compressed']" @on-success="getImgUrl" @on-remove="onRemove"
					:before-upload="filterFileType"></upload> -->
			</view>
		</view>
		<view class="content2">
			<u-cell-group class='wrap'>
				<u-cell-item title="交易类型" :arrow="false" :title-style="titleStyle">
					<u-radio-group v-model="dataObj.tranType">
						<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
							:disabled="item.disabled" active-color="#303030">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-cell-item>
				<u-cell-item :title="placeTitle" :title-style="titleStyle">
					<selectAddress :disabled="true" @selectAddress='selectAddress' series='3' :textStyle='textStyle'
						:searchPlace='searchPlaceHolder'>
					</selectAddress>

				</u-cell-item>
				<u-cell-item title="发布者昵称" :title-style="titleStyle" :border-bottom='false' @click="editNicknamee">
					<view :style='textStyle'>
						{{dataObj.publisher}}
					</view>
					<!-- <selectAddress @selectAddress='selectAddress' series='3' :textStyle='textStyle'></selectAddress> -->
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="submit" @click="submit">
			发布
		</view>
		<u-popup v-model="showNickname" mode='center' border-radius="14" width='70%' @close='closePopup'>
			<view class="edit-nickname">
				<view>昵称长度限制在2-24个字符内</view>
				<u-input v-model="dataObj.publisher" border class='nickname-input' />
				<view style="text-align: center;">
					<u-button type="success" size="medium" class="nickname-btn" @click="nickNamesubmit">保存</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
		import * as config from '../../config'
	import upload from '@/components/upload_small.vue';
	import selectAddress from "@/components/selectAddress.vue"
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload,
			selectAddress
		},
		data() {
			return {
				searchPlaceHolder: '选择地区',
				placeTitle: '交货地',
				imgList: [],
				imgList2:[],
				disabled:false,
				showNickname: false,
				dataObj: {
					userId: '',
					tranType: '采购',
					placeDelivery: '',
					urlImg: '',
					publishingContent: '',
					publisher: '',
				},
				titleStyle: {
					"font-size": "28rpx",
					"color": "#333333",
					// "font-weight": 700
				},
				textStyle: {
					"font-size": "32rpx",
					// "font-weight": 700,
					"color": "#333333",
					"margin-right": '16rpx'
				},
				list: [{
						name: '采购',
						disabled: false
					},
					{
						name: '销售',
						disabled: false
					}
				],
				businesslicense: [],
				value: '',
				action: this.$uploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				isAdd: false,
				num:0
			};
		},
		onShow() {
			let _tl = uni.getStorageSync('transactionPlace')
			if (_tl) {
				this.dataObj.placeDelivery = _tl.address
			} else {

			}
		},
		onLoad() {
			console.log("user", this.userInfo)
			this.dataObj.userId = this.userInfo.id
			this.dataObj.publisher = this.userInfo.wechatNo
			this.dataObj.remark = this.userInfo.phone
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			uni.navigateTo({
				url: 'record'
			})
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'clientId']),
		},
		watch: {
			imgList: {
				handler: function() {
					var that = this
					setTimeout(()=>{
						that.$api.doRequest('get', 'appendix/query/getFileList', {
						appendixIds: that.imgList.toString()
					}).then(res => {
						that.imgList2 = res.data.data
						that.$forceUpdate()
					})
					},1000)
					
				},
				deep: true,
				immediate:true
			}
		},
		methods: {
			deleteImg(index) {
				this.num=this.imgList.length
				this.imgList.splice(index, 1)
			},
			async uploadClick() {
				let baseUrlNew = config.def().baseUrlNew
				let pcUserInfo = uni.getStorageSync('pcUserInfo')
				console.log('baseUrlNew',baseUrlNew)
				if(!pcUserInfo){
					uni.showToast({
						title:"登录已失效，请重新登录"
					})
					return 
				}
				await uni.chooseImage({
					count:9,
					success: (chooseImageRes) => {
						console.log('chooseImageRes',chooseImageRes)
						let files = []
						for (let item of chooseImageRes.tempFiles) {
							files.push({
								name: 'fileName',
								url : item.path
							});
						}
						console.log(files)
						for (let i = 0; i < files.length; i++) {
							this.num++
							if(this.num<10){
								console.log(this.num)
								uni.uploadFile({
									url: baseUrlNew + 'appendix/api/uploadFiles',
									// url: baseUrlNew+'appendix/api/uploadFiles', //仅为示例，非真实的接口地址
									// files: files[i],
									filePath:files[i].url,
									name:files[i].name,
									formData: {
										// fileName: chooseImageRes.tempFiles[0],
										companyId: pcUserInfo.compId,
										modelId: '',
										vesselId: '',
									},
									success: (uploadFileRes) => {
										console.log(JSON.parse(uploadFileRes.data))
										var data = JSON.parse(uploadFileRes.data).data
										data.compId = pcUserInfo.compId
										this.$api.doRequest('post', '/appendix/api/saveFilesApp', {
											newAppendixs: [data],
											oldAppendixIds: ""
										}).then(res => {
											
											console.log(res.data.data)
											this.imgList.push(res.data.data[0])
											
											
										})
										console.log(uploadFileRes.data);
									},
									fail(res) {
										console.log(res);
									}
								});
							}else{
								break;
							}
							
						}
						
					}
				});
			},
			clear() {
				this.dataObj.publishingContent = ''
			},
			closePopup() {
				this.dataObj.publisher = this.userInfo.wechatNo
			},
			nickNamesubmit() {
				if (this.dataObj.publisher == null || this.dataObj.publisher == "") {
					this.$api.msg('请输入昵称！')
					return
				}
				if (this.dataObj.publisher.length < 2 || this.dataObj.publisher.length > 24) {
					this.$api.msg('请正确输入昵称！')
					return
				}
				let _obj = {
					wechatNo: this.dataObj.publisher,
					id: this.userInfo.id
				}
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				let that = this
				that.$api.doRequest('post', '/commonUser/editUserInfo', _obj).then(
						res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '修改成功！',
									icon: 'success',
									duration: 2000,
									success() {
										setTimeout(() => {
											var _student = uni.getStorageSync('userInfo');
											_student.wechatNo = that.dataObj.publisher;
											uni.setStorageSync('userInfo', _student);
											var name = 'userInfo';
											var value = _student;
											that.$store.commit('$uStore', {
												name,
												value
											});
											uni.hideLoading()
											that.showNickname = false
										}, 2000)
									}
								})
							}
						})
					.catch(res => {
						if (res.errmsg) {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
			},
			editNicknamee() {
				console.log(this.dataObj)
				this.showNickname = true
			},
			submit() {

				if (!this.dataObj.publishingContent && this.businesslicense.length == 0) {
					uni.showToast({
						title: "图片和文字不能同时为空，错误提示“发布内容不能为空",
						icon: 'none',
						duration: 2000
					})
				}
				uni.showLoading({
					title: '数据加载中',
					mask: true

				})

				this.dataObj.urlImg = this.imgList.toString()
				this.dataObj.remark3 = this.dateFormat(new Date().getTime())
				this.$api.doRequest('post', '/transactionExchangeInfo/addInfo', this.dataObj).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.num=0
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			dateFormat(time) {
			                let date = new Date(time);
			                let year = date.getFullYear();
			                // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			                let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			                let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			                let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			                let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			                let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			                // 拼接
			                return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			                // return year + "-" + month + "-" + day;
			            },
			selectAddress(val) {
				console.log(val)
				console.log(this.dataObj.tranType)
				if (!val.check) {
					uni.showToast({
						title: '地点必须选到区县一级',
						icon: 'none',
						duration: 2000
					})
					return
				}
				try {
					uni.setStorageSync('transactionPlace', val);
					this.dataObj.placeDelivery = val.address
				} catch (e) {
					// error
				}
			},
			radioChange(e) {
				console.log(e);
				if (e == '销售') {
					this.placeTitle = '货源地'
					// this.searchPlaceHolder = '选择货源地区'
				} else {
					this.placeTitle = '交货地'
					// this.searchPlaceHolder = '选择交货地区'
				}

			},
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			onRemove(index) {
				console.log("index", index)
				this.imgList.splice(index, 1)
				console.log(this.imgList)
			},
			getImgUrl(res) {
				console.log(res)
				console.log('------------res-----------')
				this.imgList.push(res)
				console.log(this.imgList)

			},
			onUploaded(lists) {
				this.filesArr = lists;
				let res = lists[0];
				if (res.response === undefined) {
					uni.showToast({
						title: '文件错误',
						icon: 'none'
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		// overflow: hidden;
		padding-bottom: 100rpx;
	}

	.content1 {
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding-bottom: 40rpx;

	}

	/deep/.placeholder-class {
		color: #C5CAD4;
		font-size: 28rpx;
	}

	// .textarea {
	// 	padding: 20rpx 20rpx 50rpx 20rpx;
	// 	width: 100%;
	// 	font-size: 28rpx;
	// 	background: red
	// }

	.top {
		position: relative;

		.number {
			position: absolute;
			right: 32rpx;
			bottom: 0;
			color: #C5CAD4;
			font-size: 26rpx;
		}
	}

	.content2 {
		padding: 20rpx;
	}

	/deep/.u-cell-item-box,
	/deep/.u-cell-box {
		border-radius: 20rpx;
	}

	.submit {
		margin: 40rpx auto;
		width: 654rpx;
		height: 92rpx;
		background: #22C572;
		border-radius: 46rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
		// position: fixed;
		// bottom: 76rpx;
		// left: 0;
		// right: 0;
		// margin: auto;
	}

	.edit-nickname {
		padding: 40rpx 80rpx;
	}

	.nickname-input {
		margin: 20rpx 0;
	}

	.nickname-btn {
		margin-top: 20rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		position: relative;
		background: #fff;

		border-radius: 20rpx;

		input {
			font-size: 28rpx;
			// color: #333333;
		}

		.left {
			display: flex;
			align-items: center;
			color: #333333;
			font-size: 34rpx;
			font-weight: 600;
		}
	}

	.row_css {
		font-size: 26rpx;
		color: #333333;
		margin-top: 60rpx;
		font-weight: 500;
	}

	.textarea {
		background: #F9F9FA;
		font-size: 28rpx;
		text-align: left;
		width: 100%;
		padding: 30rpx 30rpx;
		border-radius: 5px;
		margin: 30rpx;
		height: 46vh;
		padding-bottom: 20rpx;
		color: #333;
	}

	.textarea textarea {
		height: 90%;
	}

	.textarea-left {
		position: absolute;
		bottom: 40rpx;
		left: 50rpx;
		color: #606266;
	}

	.textarea-bottom {
		position: absolute;
		bottom: 40rpx;
		right: 40rpx;
		color: #AFB3BF;
	}

	.clear {
		/* width: 90%; */
		// background: #ffffff;
		color: #22C572;
		// border: 1px solid #22C572;
		// border-radius: 50rpx;
		// font-size: 28rpx;
		// padding: 9rpx 24rpx;
	}

	.bottom-btn {
		position: fixed;
		bottom: 30rpx;
		width: 90%;
	}
	.biankuang {
		// border: 1px dashed #AFB3BF;
		border-radius: 10rpx;
		width: 200rpx;
		height: 200rpx;
		margin-left: 20rpx;
		text-align:center;
		line-height: 220rpx;
		background:#F5F6FA;
		.upload {
			width: 46rpx;
			height: 46rpx;
		}
	}
	.delete_img {
		position: absolute;
		z-index: 100;
		right: 0px;
		border-radius:0 5rpx 0 10px;
		color: #ffffff;
		font-size: 28rpx;
		
		border: 1px;
		// border-radius: 5rpx;
		width: 40rpx;
		height: 38rpx;
		background-color: rgba(17, 26, 52, 0.50);
		text-align: center;
	}
	/deep/.pickerClass{
		width: 80%;
		position: absolute;
		right:11px;
		padding:0 30px 0 0;
		top:50%;
		transform: translateY(-50%);
		z-index:2
	}
</style>