yiliangyiyun-app/pages/business/editRelease.vue

<template>
	<view class="content">
		<view class="content1">
			<view class="top">
				<textarea v-model="dataObj.publishingContent" placeholder="请发布粮食类商品交易信息，建议包含联系方" maxlength='200'
					placeholder-class='placeholder-class' class="textarea" />
				<view class="number">
					{{dataObj.publishingContent.length}}/200个字
				</view>
			</view>
			<view style="padding-left: 10rpx;">
				<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="交易地" :title-style="titleStyle">
					<selectAddress @selectAddress='selectAddress' series='3' :textStyle='textStyle' :edit='true'
						:text='dataObj.placeDelivery'></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 upload from '@/components/upload_small.vue';
	import selectAddress from "@/components/selectAddress.vue"
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload,
			selectAddress
		},
		data() {
			return {
				id: '',
				imgList: [],
				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": '27rpx'
				},
				list: [{
						name: '采购',
						disabled: false
					},
					{
						name: '销售',
						disabled: false
					}
				],
				businesslicense: [],
				value: '',
				action: this.$uploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				isAdd: false,
			};
		},
		onLoad(options) {
			this.id = options.id
			console.log(this.id)
			this.init()
			// this.dataObj.userId = this.userInfo.id
			// this.dataObj.publisher = this.userInfo.wechatNo
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			uni.navigateTo({
				url: 'record'
			})
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'clientId']),
		},

		methods: {
			init() {
				let _obj = {
					id: this.id
				}
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				this.$api.doRequest('get', '/transactionExchangeInfo/selectExchangeInfo', _obj).then(res => {
					console.log(res.data)
					if (res.data.code == 200) {
						this.dataObj = res.data.data

						this.imgList = res.data.data.urlImg.split(',')
						for (let i = 0; i < this.imgList.length; i++) {
							this.businesslicense.push({
								url: this.imgList[i]
							})
						}
						console.log("this.businesslicense", this.businesslicense)
					}
					uni.hideLoading()
				})
			},
			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() {
				this.showNickname = true
			},
			submit() {
				uni.showLoading({
					title: '数据加载中',
					mask: true

				})

				this.dataObj.urlImg = this.imgList.toString()
				this.$api.doRequest('post', '/transactionExchangeInfo/editInfo', this.dataObj).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: "系统异常，请联系管理员",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			selectAddress(val) {
				console.log(val)
				this.dataObj.placeDelivery = val
			},
			radioChange(e) {
				// console.log(e);
			},
			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("this.businesslicense", this.businesslicense)
				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;
	}

	.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;
	}

	.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 {
		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;
	}
</style>