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: 6rpx;font-size: 30rpx;">
							<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" @click="location">
					<view style="width: 30%;color: #71747C;font-size: 30rpx;">城市</view>
					<view class="flex"
						style="width: 70%;justify-content: flex-end;margin-right: 6rpx;font-size: 30rpx;">
						{{release.city == null || release.city == "" ? "请选择城市": release.city}}
					</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" maxlength="1000" placeholder="请发布粮食类商品交易信息，建议包含联系方式、地址等信息，不超过1000个字"
						@input="wordJiSuan" :clearable="clear" />
				</view>
				<view style="text-align: right;color: #C5CAD4;font-size: 30rpx;margin-right: 20rpx;">{{wordCount}}/1000字
				</view>
				<upload class="upload" ref="upload" :action="action" :max-count="9" :size-type="['compressed']"
					@on-success="getImgUrl"  @on-remove="onRemove" :options="uploadOptions"
					@on-uploaded="isAdd = true"  :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: {},
				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: {},
				companyType1: [],
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onShow() {
			var city = uni.getStorageSync("nowRegion")
			if(city.positionName.cityName){
				this.release.city = city.positionName.cityName
			}
			this.companyList()
		},
		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 > 1000) {
						this.$api.msg('动态内容不能超过1000字')
						return
					}
				}
				if (!this.release.content && this.address.length == 0) {
					this.$api.msg("动态内容和图片不能同时为空")
					return
				}
				var that = this
				that.$api.doRequest('get', '/settledCompanyDynamics/count', {
						phone: this.userInfo.phone
					})
					.then(res => {
						if (res.data.code == 200) {
							if (res.data.data > 5) {
								uni.showToast({
									title: '今日发布已达上限！',
									icon: 'none',
									duration: 2000,
								})
							} else {
								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.showToast({
															title: '发布成功！',
															icon: 'none',
															duration: 2000,
															success() {
																setTimeout(function() {
																	uni.navigateBack(1)
																}, 1000);
															}
														})
													}
												})
										}
									}
								})
							}
						}
					})
			},
			location() {
				// uni.navigateTo({
				// 	url: `/pages/grain_pulse/position/position`
				// })
				uni.navigateTo({
					url: "/pages/grain_pulse/selectCity/selectCity"
				})
			}
		}
	}
</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>