Dining_Hall/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="11"
		  ></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 Cookies from "js-cookie";
import { uploadBase64 } from "@/api/upload"
export default {
	data() {
		return {
			fontValue:Cookies.get('fontSize') || 8,
			tabList: ['优化建议', '功能问题', '其他'],
			carteenName:"",
			showCarteen:false,
			actions:[],
			canteenId:"",
			canteenName:"",
			currentTab: 0,
			content: '',
			fileList: [],
			contactInfo: ''
		}
	},
	onLoad() {
		this.getAllCanteenStall()
	},
	methods: {
		//获取食堂列表
		async getAllCanteenStall() {
			const res = await getAllCanteenStallApi({})
			let arr=[]
			if(res.length>0){
				res.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() {
			console.log(this.fileList)
			if(this.canteenId==""){
				uni.$u.toast('请选择食堂')
				return
			} 
			if(this.content==""){
				uni.$u.toast('请认真填写建议')
				return
			}
			let arr = []
			this.fileList.forEach(item=>{
				arr.push(item.url)
			})
			let param = {
				  "canteenId": this.canteenId,
				  "canteenName": this.canteenName,
				  "complaintPictureList": arr,
				  "content": this.content,
				  "mobile": this.contactInfo,
				  // "starLevel": 6,
				  "custId": Cookies.get('custId')
			}
			console.log(param)
			const res = await postCanteenPlaintApi(param)
			if(res.code==200){
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				});
				setTimeout(()=>{
					uni.navigateBack()
				},800)
			}
		},
		//历史记录
		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.fileNameUrl,
				})
			  );
			  fileListLen++;
			}
		},
		//上传接口
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				this.imgToBase64(url).then(base64 => {
					 let param = {
						"MERCHANT-ID":"378915229716713472",
						"uploadKey":'system',
						"base64File":base64
					 }
					 uploadBase64(param).then(res => { 
						if(res.code==200){
							resolve(res.data) 
						}
					 })
				})
			});
		},
		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>
.feedback-page {
  height:94vh;
  // background-color: #f8f8f8; 

  .type-section {
    background-color: #ffffff;
    padding: 30rpx 30rpx 20rpx;

    .section-title {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 20rpx;
      font-weight: 550;
      display: block;
    }
  }

  .tab-box {
    display: flex; 
    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #666666;
      padding: 16rpx 0;
      position: relative;
      border: 1px solid rgba(15,39,75,0.4);;
      margin-right: 20rpx;
      border-radius: 2px;

      &.active {
        color: #333333;
        background-color: #fff2ef;
        border: 1px solid #FF6816;

      }
    }
  }

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

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

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