JiangxiMiniProgram/pages/indexEntry/consult/pubConsult/pubConsult.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="我要咨询"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="h2">咨询内容</view>
				<view class="textareaBg">
					<view class="flex">
						<view class="icon">
							<image src="@/static/images/index/edit.png" mode=""></image>
						</view>
						<view class="inputBox">
							<u-textarea v-model="value" ref="textarea"  placeholder="详细说明问题，以便获得更好的回答~"></u-textarea>
						</view>
					</view>
					<view class="phoneBox">
						<view class="imgBox">
							<view class="img">
								<view class="minusCircle">
									<u-icon name="close-circle-fill"  size="20" color="#b9061d"></u-icon>
								</view>
								<image src="../../../../static/logo.png" mode=""></image>
							</view>
						</view>
						<view class="phone" @click="chooseImages">
							<view class="phoneIcon">
								<image src="@/static/images/index/btn_tupian.png" mode=""></image>
							</view>
							<view class="lab">添加图片</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card" style="padding-bottom: 0;">
				<view class="phone_row">
					<view class="label">联系电话</view>
					<view class="uInput my">
						<u--input placeholder="输入手机号码，以便我们回复您！"  v-model="value" border="none" type="number" fontSize="14"></u--input>
					</view>
				</view>
			</view>
			
			<view class="btn active">提交</view>
		</view>
	</view>
</template>

<script>
	import { APP_API, APP_HOST } from '@/site.config.js';
	const _url = APP_HOST + APP_API + '/util/manage/uploadFile.do';
	export default {
		data() {
			return {
				value: '',
				imgArr: [],
			}
		},
		methods: {
			//选择图片
			chooseImages(type) {
				let imgNum = 3 - (this.imgArr.length)
				uni.chooseImage({
					count: imgNum, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success:  res => {
						uni.showLoading({
							title: '图片上传中...'
						});
						res.tempFilePaths.forEach( (item,index)=>{
							 this.uploadImgApi(item)
						})
					}
				})
			},
			uploadImgApi(filePath) {
				console.log(filePath)
				let _this = this
				// 上传图片到服务器
				uni.uploadFile({
					url: _url,//接口
					filePath: filePath,//要上传的图片的本地路径
					name: 'file',
					
					formData: {
						fileType: 1,
						fileSuffix: "png"
					},
					header: {
						token: uni.getStorageSync("Authorization") || '',
					},
					success(res) {
						console.log('上传成功')
						let res2 = JSON.parse(res.data)
						_this.imgArr.push(res2.data)
						console.log(res2)
						uni.hideLoading();
					},
					complete: ()=> {}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageBgImg {
		.pad {}
	  .card {
		  padding: 0 24rpx 24rpx 24rpx ; margin-top: 20rpx;
	    .h2 {
			font-size: 32rpx;
			font-weight: 600;
			line-height: 96rpx;
	    }
	
	    .textareaBg {
			min-height: 364rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			border: 2rpx solid #E8E9EC;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
	      .flex {
			  padding: 20rpx;
			  align-items: flex-start;
	        .icon {
	          width: 24rpx;
			  height: 24rpx;
			  margin: 0 14rpx 0 24rpx;
	        }
	
	        .inputBox {
				flex: 1;
	         
	        }
			/deep/ .inputBox .u-textarea {
				padding: 0 !important;
				border: none !important;
				background: none !important;
				font-size: 24rpx
			}
	      }
	
	      .phoneBox {
			  display: flex;
			  padding: 0 10rpx 20rpx 20rpx;
	        .imgBox {
				display: flex;
	          .img {
				margin-right: 14rpx;
				position: relative;
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					overflow: hidden;
				}
				.minusCircle {
					position: absolute;
					right: -14rpx;
					top: -20rpx;
					z-index: 9;
					
				}
	          }
	        }
	
	        .phone {
				border: 2rpx dashed #CDCED0;
				width: 160rpx;
				height: 160rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
	          .phoneIcon {
				width: 60rpx;
				height: 60rpx;
	          }
	
	          .lab {
				font-size: 20rpx;
				color: #686B73;
				margin-top: 8rpx;
	          }
	        }
	      }
	    }
	  }
	.phone_row {
		display: flex;
		height: 104rpx;
		padding: 0 28rpx;
		line-height: 104rpx;
		.label {
			font-size: 32rpx;
			font-weight: 600;
			margin-right: 50rpx;
		}
		.uInput {
			flex: 1;
		}
	}
	  .btn {
			width: 396rpx;
			height: 72rpx;
			background: #D1E7FE;
			border-radius: 8rpx;
			font-size: 28rpx;
			text-align: center;
			line-height: 72rpx;
			margin: 100rpx auto 114rpx auto;
			color: #fff;
			&.active {
				background: $themC;
			}
	  }
	}
</style>