jyy-smart-canteen-h5/pages/feedback/index.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="feedback-page"> 

    <!-- 反馈内容 -->
    <view class="content-box">
      <view class="border-box">
		<view style="font-size: 32rpx;margin-bottom: 5px;"><span style="color: red;">*</span>食堂 </view>
		<view @click="showCarteen=true" style="width: 100%;height: auto;">
			 <view style="border: 1px solid #dadbde;padding: 12rpx;height: 30px;">
				 {{canteenName}}
			 </view>
		</view>
		<u-action-sheet
				:show="showCarteen"
				:actions="actions"
				title="请选择食堂" 
				@close="showCarteen = false"
				@select="carteenSelect"
		>
		</u-action-sheet>
		  
		<view style="font-size: 32rpx;margin-bottom: 5px;"><span style="color: red;">*</span>投诉建议 </view>
        <u--textarea
          v-model="content"
          placeholder="请详细补充您的问题或建议"
          :maxlength="300"
          height="200"
          count
        >
		<text slot="count" class="word-count">{{ content.length }}/300</text>
        </u--textarea>
		
        <!-- 图片上传 -->
        <view class="upload-box">
			<view style="font-size: 32rpx;margin-bottom: 5px;">图片(选填) </view>
			<u-upload
				:fileList="fileList"
				@afterRead="afterRead"
				@delete="deletePic"
				:maxCount="5"
				multiple
			>
            <view class="upload-btn">
              <u-icon name="camera" size="44" color="#666666"></u-icon>
              <text class="upload-text">添加图片</text>
            </view>
          </u-upload>
        </view>
		
		<!-- 联系方式 -->
		<view class="contact-box">
		  <text class="contact-title">请留下您的联系方式</text>
		  <u--input
		    v-model="contactInfo"
		    placeholder="电话号码/电子邮箱（仅工作人员可见）"
		    border="bottom" maxlength="30"
		  ></u--input>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn">
		  <u-button 
		    shape="squrd"
		    @click="submitFeedback"
			style="margin-bottom: 10px;font-size: 28rpx;"
		    :customStyle="{
		      width: '100%',
		      height: '88rpx',
		      background: '#ff6633',
		      color: '#ffffff',
		      border: 'none'
		    }"
		  >提交</u-button>
		  <u-button
		    shape="squrd"
			@click="goHistory"
		    :customStyle="{
		      width: '100%',
		      height: '88rpx',
		      background: '#fff',
		      color: '#000',
		      border: '1px solid #000'
		    }" style="font-size: 28rpx;"
		  >历史记录</u-button>
		</view>
      </view>
    </view>

    
  </view>
</template>

<script>
import { getAllCanteenStallApi,postCanteenPlaintApi } from "@/api/mine/index.js"
import { pathToBase64, base64ToPath } from 'image-tools';
import { uploadBase64 } from "@/api/upload"
import config from '@/config'
import { getToken } from '@/utils/auth'
import { encryptWithSM4 } from '@/utils/sm'
export default {
  data() {
    return {
	  fontValue:uni.getStorageSync('fontSize') || 8, 
	  carteenName:"",
	  showCarteen:false,
	  actions:[{name:"1"}],
	  canteenId:"",
	  canteenName:"",
      currentTab: 0,
      content: '',
      fileList: [],
      contactInfo: '',
	  isSubmit:false
    }
  },
  onLoad() {
  	this.getAllCanteenStall()
  },
  methods: {
	  //获取食堂列表
	  async getAllCanteenStall() {
	  	const res = await getAllCanteenStallApi({"canteenType":1})
		console.log(res)
		let arr=[]
		if(res.rows.length>0){
			res.rows.forEach(item=>{
				let obj={
					id:item.canteenId,
					name:item.canteenName
				}
				arr.push(obj)
			})
		} 
		this.actions = arr 
		
	  },
	  carteenSelect(e){
		  console.log(e)
		  this.canteenId = e.id
		  this.canteenName = e.name
	  },
	  //提交按钮
	  async submitFeedback() { 
		if(!this.isSubmit){
			this.isSubmit=true 
			if(this.canteenId==""){
				uni.$u.toast('请选择食堂')
				return
			} 
			if(this.content==""){
				uni.$u.toast('请认真填写建议')
				return
			}
			let arr = []
			this.fileList.forEach(item=>{
				let obj = {
					imgUrl:item.url
				}
				arr.push(obj)
			})
			let param = {
				  "canteenId": this.canteenId,
				  "canteenName": this.canteenName,
				  "suggestionPictures": arr,
				  "content": this.content,
				  "contactTel": encryptWithSM4(this.contactInfo), 
				  "userId": uni.getStorageSync('userId')
			}
			console.log(param)
			const res = await postCanteenPlaintApi(param)
			if(res.code==200){
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				});
				setTimeout(()=>{
					uni.navigateBack()
				},800)
			}else{
				this.isSubmit=false
			}
		}
	  },
	  //历史记录
	  goHistory(){
		  uni.navigateTo({
		    url: `/pages/feedback/history`
		  })
	  },
	  // 新增图片
	  async afterRead(event) {
			console.log(event)
	  		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
	  		let lists = [].concat(event.file);
	  		let fileListLen = this[`fileList${event.name}`].length;
	  		lists.map((item) => {
	  			this[`fileList${event.name}`].push({
	  				...item,
	  				status: "uploading",
	  				message: "上传中",
	  			});  
	  		});
	  		console.log(lists)
	  		for (let i = 0; i < lists.length; i++) {
	  		  const result = await this.uploadFilePromise(lists[i].url);
	  		  console.log(result)
	  		  let item = this[`fileList${event.name}`][fileListLen];
	  		  this[`fileList${event.name}`].splice(
	  			fileListLen,
	  			1,
	  			Object.assign(item, {
	  			  status: "success",
	  			  message: "",
	  			  url: result.url,
	  			})
	  		  );
	  		  fileListLen++;
	  		}
	  },
	  //上传接口
	  uploadFilePromise(url) { 
	  		return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: config.baseUrl+`/file/upload`, //服务器地址 
					filePath: url,
					formData: {
						"fileType":'face', 
					},
					header: {
						'Authorization': 'Bearer ' + getToken(), 
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data)   
						if(res.code==200){
							resolve(res.data)
						}else{
							uni.$u.toast('上传失败');
						}
					},
					fail: err => {
						uni.$u.toast('上传失败');
						console.log(err)
					}
				});  
			});  
	  },
	  imgToBase64(data) {
	    return new Promise((resolve, reject) => {
	  			pathToBase64(data).then(base64 => {
	  				resolve(base64)
	  			}).catch(error => {
	  				console.error(error)
	  				reject(error)
	  			})
	    })
	  },
	  deletePic(event) {
	  		this.fileList.splice(event.index, 1);
	  },
	}
}
</script>

<style lang="scss" scoped>
/deep/.u-action-sheet__item-wrap {
	overflow: auto;
	max-height: 50vh;
}
.feedback-page {
	height:94vh;
	overflow-y: auto;
	// background-color: #f8f8f8;

	.content-box {
		margin-top: 20rpx; 
		padding: 20rpx;

		.border-box{
			background-color: #ffffff;
			padding: 16rpx;
			border-radius: 8px;
			height:auto;
		}

		.word-count {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.upload-box {
		margin-top: 30rpx;

		.upload-btn {
			width: 160rpx;
			height: 160rpx;
			background-color: #f7f8fa;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
	
			.upload-text {
				font-size: 24rpx;
				color: #666666;
				margin-top: 10rpx;
			}
		}
	}

	.contact-box {
		margin-top: 40rpx;
		background-color: #ffffff;
		padding: 20rpx 16rpx 16rpx 16rpx;
		border-radius: 8px;

		.contact-title {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}
	}

	.submit-btn {
		padding: 20rpx 30rpx;
		margin-top: 20px;
	}
}

::v-deep .u-textarea {
  padding: 20rpx;
  background-color: #f7f8fa;
  border-radius: 8rpx;
}

::v-deep .u-input {
  &__content {
    &__field-wrapper {
      &__field {
        font-size: 28rpx;
      }
    }
  }
}

::v-deep .u-upload {
  &__wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }
}
.u-textarea {
  background-color: #ffffff;
}
.upload-btn {
  background-color: #ffffff !important;
  border: 1px solid #dadbde;
}
</style>