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

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="rating-page">
	  <view style="width: 98%;margin: 0px auto;background-color: #ffffff;padding: 10px 20px;border-radius: 10rpx;display: flex;justify-content: space-between;">
		  <view style="width: 100rpx;height: 100rpx;background: #ffa361;margin: 10px;">
		    <u-icon name="home-fill" color="#fff" size="50"></u-icon>
		  </view>
		  <view style="width: 70%;">
		  	<view style="width: 100%;height: 30px;display: flex;align-items: center;border-bottom: 1px solid #CCC;padding-bottom: 10px;">
				<text>食堂</text>
				<view @click="showCarteen=true" style="width: 80%;height: 30px;margin-left: 10px;line-height: 30px;"> 
					{{canteenName}} 
				</view>
			</view>
			<view style="width: 100%;height: 30px;display: flex;align-items: center;padding-top: 10px;">
				<text>档口</text>
				<view @click="showStall=true" style="width: 80%;height: 30px;margin-left: 10px;line-height: 30px; overflow: hidden;"> 
					{{stallName}} 
				</view>
			</view>
		  </view>
	  </view>
	  <u-action-sheet
		:show="showCarteen"
		:actions="actions"
		title="请选择食堂" 
		@close="showCarteen = false"
		@select="carteenSelect"
	  ></u-action-sheet>
	  <u-action-sheet
	  		:show="showStall"
	  		:actions="actions2"
	  		title="请选择档口" 
	  		@close="showStall = false"
	  		@select="stallSelect"
	  ></u-action-sheet> 
    <!-- 分项评分 -->
    <view class="detail-rating">
      <view class="rating-item" v-for="(item, index) in decorationList" :key="index">
        <text class="item-label">{{ item.functionName }}</text>
        <view class="hearts-row">
          <u-icon v-for="n in 5" :key="n" :name="n <= item.value ? 'star-fill' : 'star'" :color="n <= item.value ? '#ffa361' : '#e5e5e5'"
            size="32" @click="changStar(item,n)"
          ></u-icon>
        </view>
      </view>
    </view>

    <!-- 评价输入 -->
    <view class="comment-box">
		<view class="">您的意见和建议：</view>
      <u--textarea
        v-model="comment"
        placeholder="口味、服务、环境如何？有哪些想要提的建议？"
        height="120"
      ></u--textarea>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn">
      <u-button 
        shape="squrd"
		@click="sumbitCartennnEvaluate"
        :customStyle="{
          width: '100%',
          height: '88rpx',
          background: '#ffa361',
          color: '#ffffff',
          border: 'none'
        }" style="font-size: 28rpx;margin-top: 20px;"
      >提交</u-button>
    </view>
  </view>
</template>

<script>
import { getAllCanteenStallApi,getStallByCanteenApi } from "@/api/mine/index.js"
import { addCartennnEvaluateApi } from "@/api/mine/review.js" 

export default {
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			allCanteenData:[],
			showCarteen:false,
			areaId:"",
			actions:[],
			canteenId:"",
			canteenName:"",  
			showStall:false,
			actions2:[],
			stallId:"",
			stallName:"",
			decorationList:[
				{functionName:"仪容仪表评分",value:0,name:"appearance"},
				{functionName:"员工服务态度评分",value:0,name:"attitude"},
				{functionName:"菜品口味评分",value:0,name:"taste"},
				{functionName:"菜肴花色品种评分",value:0,name:"varieties"},
				{functionName:"菜肴食品卫生评分",value:0,name:"hygiene"},
				{functionName:"饭菜价格评分",value:0,name:"price"},
				{functionName:"饭菜份量评",value:0,name:"weight"}
			],
			
			
		  overallRating: 5,
		  ratingTexts: ['非常差', '较差', '一般', '推荐', '超赞'],
		  ratingItems: [
			{ label: '口味', value: 5 },
			{ label: '环境', value: 0 },
			{ label: '服务', value: 0 }
		  ],
		  comment: ''
		}
	},
	onLoad() {
		this.getAllCanteen() 
	},
	methods: {
		changStar(item,n){
			item.value = n
			this.$forceUpdate()
		},
		//提交按钮
		async sumbitCartennnEvaluate(){
			if(this.canteenId==""){
				uni.$u.toast('请选择食堂')
				return
			}
			if(this.stallId==""){
				uni.$u.toast('请选择档口')
				return
			}
			if(this.comment==""){
				uni.$u.toast('请认真填写建议')
				return
			} 
			let param = {
				  "userId": uni.getStorageSync('userId'),
				  "areaId": this.areaId,
				  "canteenId": this.canteenId,
				  "stallId": this.stallId, 
				  "proposal": this.comment
			}
			this.decorationList.forEach(item=>{
				param[item.name]=item.value
			})
			console.log(param)
			const res = await addCartennnEvaluateApi(param)
			if(res.code==200){
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				});
				setTimeout(()=>{
					uni.navigateBack()
				},800)
			}
		},
		//获取食堂列表
		async getAllCanteen() {
			const res = await getAllCanteenStallApi({})
				console.log(res)
				this.allCanteenData = res.rows
				let arr=[]
				if(res.rows.length>0){
					res.rows.forEach(item=>{
						let obj={
							areaId:item.areaId,
							id:item.canteenId,
							name:item.canteenName
						}
						arr.push(obj)
					})
				} 
				this.actions = arr
		}, 
		carteenSelect(e){ 
			this.areaId = e.areaId
			this.canteenId = e.id
			this.canteenName = e.name;
			this.getAllStall()
		},
		//获取食堂列表
		async getAllStall() {
			const res = await getStallByCanteenApi({canteenId:this.canteenId})
				console.log(res)
				this.allCanteenData = res.rows
				let arr=[]
				if(res.rows.length>0){
					res.rows.forEach(item=>{
						let obj={
							id:item.stallId,
							name:item.stallName
						}
						arr.push(obj)
					})
				} 
				this.actions2 = arr
		}, 
		stallSelect(e){
			this.stallId = e.id
			this.stallName = e.name;
		}
		
	}
}
</script>

<style lang="scss" scoped>
.rating-page {
  height: 94vh;
  // background-color: #ffffff;
  padding: 20rpx;
  padding-bottom: 120rpx;

  .rating-box {
    margin-bottom: 60rpx;

    .rating-row {
      display: flex;
      justify-content: space-between;
      padding: 0 20rpx;
    }

    .rating-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .rating-text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;

        &.active {
          color: #333333;
        }
      }
    }
  }

  .detail-rating {
	  width: 98%;margin: 10px auto;background-color: #ffffff;padding: 10px 20px;border-radius: 10rpx;
    .rating-item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
	  background-color: #FFF;

      .item-label {
        width: 240rpx;
        font-size: 28rpx;
        color: #333333;
      }

      .hearts-row {
        display: flex;
        gap: 0rpx;
      }
    }
  }

  .comment-box {
	  width: 98%;margin: 0px auto;background-color: #ffffff;padding: 10px 20px;border-radius: 10rpx; 
  }

  .submit-btn {
    // position: fixed;
    // left: 30rpx;
    // right: 30rpx;
    // bottom: 40rpx;
  }
}

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