yiliangyiyun-app/pages/grain_pulse/release.vue

<template>
	<view class="center">
		<u-form class="forList">
			<view class="modular">
				<view class="c-row b-b ">
					<view style="width: 30%;color: #71747C;font-size: 30rpx;">发布主体</view>
					<view class="flex" style="width: 70%;justify-content: flex-end;">
						<picker :range="companyType" @change="companyChange($event)" style="margin-right: 0px;">
							<view>{{companyIndex > -1?companyType[companyIndex]:'请选择发布主体'}}</view>
						</picker>
						<u-icon name="arrow-right" color="#AFB3BF" :custom-style="{'marginRight':'10rpx'}"></u-icon>
					</view>

				</view>
				<view class="c-row">
					<view style="width: 30%;color: #71747C;font-size: 30rpx;">城市</view>
					<view class="flex" style="width: 70%;justify-content: flex-end;">
						{{chengshi == null || chengshi == "" ? "请选择城市": chengshi}}

					</view>
					<u-icon name="arrow-right" color="#AFB3BF" :custom-style="{'marginRight':'10rpx'}"></u-icon>
				</view>
			</view>
			<view class="modular">
				<view style="margin: 20rpx 30rpx 0;border-bottom: 1px solid #C5CAD4;">
					<input type="text" placeholder="标题(2-16个字)" style="font-size: 44rpx;" maxlength="16"
						v-model="release.title" />
				</view>
				<view class="inputText">
					<u-input v-model="release.content" type="textarea" :border="border" :height="height"
						:auto-height="autoHeight" class="a" maxlength="200"
						placeholder="请发布粮食类商品交易信息，建议包含联系方式、地址等信息，不超过200个字" @input="wordJiSuan" :clearable="clear" />
				</view>
				<view style="text-align: right;color: #C5CAD4;font-size: 30rpx;margin-right: 20rpx;">{{wordCount}}/200字
				</view>
				<upload class="upload" ref="upload" :action="action" :max-count="9" :size-type="['compressed']"
					@on-success="getImgUrl" @on-error="onError" @on-remove="onRemove" :options="uploadOptions"
					@on-uploaded="isAdd = true" @on-progress="onProgress" :before-upload="filterFileType"></upload>
			</view>
		</u-form>
		<u-button type="success" shape="circle" style="margin-top: 40rpx;" @click="submit">发布</u-button>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload
		},
		data() {
			return {
				deptList: {},
				chengshi: "", //城市
				clear: false,
				border: false,
				height: 300,
				autoHeight: true,
				wordCount: 0,
				action: "https://www.zthymaoyi.com/upload/admin",
				uploadOptions: {
					"text": "上传照片",
					"bgc": ""
				},
				companyIndex: 0,
				companyType: [],
				release: {},
				address: [],
				getCompany: {}
			}
		},
		onShow() {
			this.companyList()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			companyList() {
				this.getCompany.loginPhone = this.userInfo.phone
				this.$api.doRequest('get', '/settledCompanyInfo/companyList', this.getCompany)
					.then(res => {
						if (res.data.code == 200) {
							this.release.compName = res.data.data[0].compName
							for (let i = 0; i < res.data.data.length; i++) {
								this.companyType.push(res.data.data[i].compName)
							}
						}
					})
			},
			wordJiSuan() {
				this.wordCount = this.release.content.length
			},
			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;
				}
			},
			companyChange(e) {
				this.companyIndex = e.detail.value
				this.release.compName = this.companyType[this.companyIndex]
			},
			getImgUrl(e) {
				this.address.push(e)
			},
			onRemove(e) {
				this.address.splice(e, 1)
			},
			submit() {
				if (!this.release.compName) {
					this.$api.msg('发布主体不能为空')
					return
				}
				if (!this.release.city) {
					this.$api.msg('城市不能为空,功能没完成')
					// return
				}
				if (!this.release.title) {
					this.$api.msg('标题不能为空')
					return
				}
				if (this.release.title.length < 2 || this.release.title.length > 16) {
					this.$api.msg('标题长度2-16个字')
					return
				}
				if (this.release.content != null) {
					if (this.release.content.length > 200) {
						this.$api.msg('动态内容不能超过200字')
						return
					}
				}
				if (!this.release.content && this.address.length == 0) {
					console.log("进入")
					this.$api.msg("动态内容和图片不能同时为空")
					return
				}
				this.release.city = "营口"
				this.release.address = this.address.toString()
				this.release.phone = this.userInfo.phone
				var that = this
				uni.showModal({
					content: "确定发布动态？",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							that.$api.doRequest('post',
									'/settledCompanyDynamics/api/addSettledCompanyDynamics', that.release)
								.then(res => {
									if (res.data.code == 200) {
										uni.navigateBack(1)
									}
								})
						}
					}
				})
			}


		}
	}
</script>

<style>
	.center {
		padding: 10rpx 20rpx;
	}

	.modular {
		padding-top: 10rpx;
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 20px;
	}

	.title {
		margin-left: 20rpx;
		color: #71747C;
	}

	.titles {
		font-size: 44rpx;
		color: #C5CAD4;
	}

	.write {
		margin-right: 20px;
		color: #71747C;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.inputText {
		padding: 2rpx 32rpx;
		font-size: 30rpx;
		color: #C5CAD4;
		margin-top: 20rpx;
	}
</style>