cte-share/pages/pinglun/Addshehuizuzhifk.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('user.tijiaofk')" titledetl=""></customNav>
		<view class="contentColumnC">
			<view class="contentColumnC" style="width: 750rpx;margin-top: 50rpx;">
				<text style="width: 90%;">{{$t('user.shehuizzmc')}}</text>
				<textarea class="textinput" auto-height="true"
					:always-embed='false' 
					:adjust-position='false'
					cursor-spacing='30'
					confirm-hold='true'
					:focus='false'
					maxlength='600'
					:placeholder="$t('user.qsrshehuizzmc')"
					v-model='nameThe'
				></textarea>
			</view>
			<view class="contentColumnC" style="width: 750rpx;margin-top: 30rpx;">
				<text style="width: 90%;">{{$t('index.xiangxidz')}}</text>
				<textarea class="textinput" auto-height="true"
					:always-embed='false' 
					:adjust-position='false'
					cursor-spacing='30'
					confirm-hold='true'
					:focus='false'
					maxlength='600'
					:placeholder="$t('index.qsrxiangxidz')"
					v-model='address'
				></textarea>
			</view>
			<view class="contentColumnC" style="width: 750rpx;margin-top: 30rpx;">
				<text style="margin-left: 5%;">{{$t('user.dianhuayoux')}}</text>
				<textarea class="textinput" auto-height="true"
					:always-embed='false' 
					:adjust-position='false'
					cursor-spacing='30'
					confirm-hold='true'
					:focus='false'
					maxlength='600'
					:placeholder="$t('index.qingshuru')"
					v-model='contactDetails'
				></textarea>
			</view>
			<view class="contentColumnC" style="width: 750rpx;margin-top: 30rpx;">
				<text style="width: 90%;">{{$t('user.maijiamc')}}</text>
				<textarea class="textinput" auto-height="true"
					:always-embed='false' 
					:adjust-position='false'
					cursor-spacing='30'
					confirm-hold='true'
					:focus='false'
					maxlength='600'
					:placeholder="$t('user.qsrmaijiamc')"
					v-model='sellersName'
				></textarea>
			</view>
			<view class="contentColumnC" style="width: 750rpx;margin-top: 30rpx;">
				<text style="width: 90%;">{{$t('user.fankuineir')}}</text>
				<textarea class="textinput" auto-height="true"
					:always-embed='false' 
					:adjust-position='false'
					cursor-spacing='28'
					confirm-hold='true'
					:focus='false'
					maxlength='1000'
					:placeholder="$t('index.qingshuru')"
					v-model='feedback'
				></textarea>
			</view>
			<view class="contentColumnC" style="width: 750rpx;margin-top: 30rpx;">
				<text style="width: 90%;">{{$t('user.fankuifujian')}}</text>
				<view class="item_list">
					<view class="item_content" v-for="(itemi,indexi) in annexList" @click="imagesel(indexi)">
						<netImage v-if="itemi!=''" width="220" height="220" bradius="4" :mysrc="itemi" mymode="scaleToFill" ></netImage>
					</view>
					<view class="item_content" @click="updataImage">
						<image class="upimagV" src="/static/images/shangctp.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="contentColumnC" style="margin-top: 80rpx;">
			<text class="tuichudl" @click="tijiao">{{$t('user.tijiaofk')}}</text>
		</view>
	</view>
</template>

<script>
	 import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				nameThe:'', //社会组织名称
				address:'', //地址
				contactDetails:'', //电话/邮箱
				sellersName:'', //卖家名称
				feedback:'', //反馈内容
				annexes:'', //附件
				annexList:[]
			}
		},
		methods: {
			tijiao(){
				console.log('tijiao',this.nameThe);
				if(this.nameThe.length<=0){
					uni.showToast({
					    title: this.$t('user.qsrshehuizzmc'),
					    icon: 'none',
					    duration: 3500
					})
					return;
				}
				if(this.address.length<=0){
					uni.showToast({
					    title: this.$t('index.qsrxiangxidz'),
					    icon: 'none',
					    duration: 3500
					})
					return;
				}
				if(this.contactDetails.length<=0){
					uni.showToast({
					    title: this.$t('user.dianhuayoux'),
					    icon: 'none',
					    duration: 3500
					})
					return;
				}
				if(this.sellersName.length<=0){
					uni.showToast({
					    title: this.$t('user.qsrmaijiamc'),
					    icon: 'none',
					    duration: 3500
					})
					return;
				}
				if(this.feedback.length<=0){
					uni.showToast({
					    title: this.$t('user.fankuineir'),
					    icon: 'none',
					    duration: 3500
					})
					return;
				}
				if(this.annexList.length<=0){
					uni.showToast({
					    title: this.$t('user.fankuifujian'),
					    icon: 'none',
					    duration: 3500
					})
					return;
				}
				api('addFeedback',{
					nameThe:this.nameThe, //社会组织名称
					address:this.address, //地址
					contactDetails:this.contactDetails, //电话/邮箱
					sellersName:this.sellersName, //卖家名称
					feedback:this.feedback, //反馈内容
					annexes:this.annexList+''//附件
				},res=>{
					console.log(res.data)
					uni.navigateBack();
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			updataImage(){
				this.selectImage();
			},
			selectImage(){
				var that = this;
				uni.chooseImage({
					count: 1,  // 图片数量
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						//console.log('-----',tempFilePaths)
						uni.uploadFile({
							url:this.$upImagurl,//上传图片api
							filePath: tempFilePaths[0],
							name: 'file',
							header:{
								//"Authorization": userinfo.token
							},
							success: (res) => {
								//console.log('-------',res);
								let group =  JSON.parse(res.data);
								that.mpImage=group.data;
								var temp=[];
								for(var i=0;i<that.annexList.length;i++ ){
									if(that.annexList[i]){
										temp.push(that.annexList[i]);
									}
								}
								temp.push(group.data);
								that.annexList=temp;
								uni.showToast({
									title:"图片上传成功",
									icon:"success"
								})
								console.log(that.annexList)
							},
							fail(e) {
								console.log('________',e)
							}
						});
					}
				});
			},
			imagesel(index){
				var that=this;
				uni.showModal({
					title:this.$t('api.message'),
					content:this.$t('order.shanchutp'),
					success: function (res) {
						if (res.confirm) { //这里是点击了确定以后
							that.annexList.splice(index,1);
						} else { //这里是点击了取消以后
						  console.log('点击取消')
						}
					}
				})
				
			}
		}
	}
</script>

<style>
.textinput{
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	margin-left: 2rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	width: 90%;
	border-radius: 6rpx;
	border: 1rpx solid darkgray;
	font-size: 32upx;
}

.tuichudl{
	padding: 10rpx 50rpx 10rpx 50rpx;
	border-radius: 20rpx;
	border: solid #00A6FF;
	border-width: 0px 0px 6rpx 0px;
	text-align: center;
	justify-content: center;
	background-color: #00A6FF;
	color: white;
	box-shadow: 0rpx 0rpx 10rpx 0rpx #00A6FF;
}
.item_list{
	/* padding: 0 15rpx; */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	.item_content{
		width:210rpx;
		height:210rpx;
		margin: 10rpx;
		box-sizing: border-box;
	}
}
.upimagV{
	width: 210rpx;
	height:210rpx;
}
</style>