pk-mall/src/view/user/evaluate/index.vue

<template>
  <div class="login-wrapper">
    <RightSliderBar/>

    <el-dialog v-model="contentFlag" :show-close="true" align-center title="评价内容">
	    <div class="size-s">
			{{content}}
		</div>

	  </el-dialog>
    <el-dialog v-model="evaluateFlag" :show-close="true" align-center title="评价商品">
      <el-input style="font-size: 16px"   v-model="textarea"
                  :rows="5"
                  type="textarea"
                  placeholder="请留下您宝贵的意见…">

      </el-input>
      <div class="buttons" @click="submits">确认</div>
    </el-dialog>
    <div>
      <indexHeaders/>
    </div>
    <div class="register">
      <div class="register-left">
        <CentreNav :navIndexs="1"/>
      </div>
      <div class="register-content">
        <div class="collect-tops">
          <div class="icons">
            <img src="http://screen.zhousi.hdlkeji.com/aksdbn/img/mine-icon1.png">
          </div>
          <div>我的评价</div>
        </div>
        <div class="evaluate-nav">
          <div class="evaluate-nav-view" @click="clickTap(index)" v-for="(item,index) in evaluateNav">
              <div>{{item}}</div>
              <div class="line" v-show="nacIndex==index"></div>
          </div>

        </div>
        <div class="news-no" v-if="evalList.arr==''">
          <img src="http://screen.zhousi.hdlkeji.com/aksdbn/img/news-no-bg2.png">
          <div>暂无相关信息</div>
        </div>
        <div class="content">
          <div class="list" v-for="item in evalList.arr">
            <div>
              <div class="list-tops">
                <div class="money-top">
                  <div class="list-time">{{detailTime(item.create_time)}}</div>
                  <div class="orderNo">订单号：{{item.orders.order_no}}</div>
                </div>
                <div class="money-text">金额</div>
                <div class="money-status">状态</div>
                <div class="money-oper">操作</div>
              </div>
              <div class="evaluate-goods">
                <div class="order-info">
                  <div class="order-img">
                    <img :src="item.logo">
                  </div>
                  <div class="order-name overflow1">{{item.goods_name}}</div>
                </div>
                <div class="order-money color-s">¥{{item.amount_pay}}</div>
                <div class="order-status order-money" style="color: #4171B3">已完成</div>
                <div class=" order-money " style="border-right: none">
                  <div class="order-button" v-if="nacIndex==0" @click="clickTaps(item.goods_id,item.order_id)">去评价</div>
				   <div class="order-button" v-if="nacIndex==1" @click="show_pj(item)">查看评价</div>
                </div>
              </div>
            </div>
          </div>
          <div class="pages">
            <el-pagination
                v-if="totalNumber>10"
                background
                layout="prev, pager, next"
                :total="totalNumber"
                class="mt-4"
                :page-size="limit"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>

      </div>


    </div>
  </div>
  <Footer/>
</template>

<script setup>
//记录访问次数
if(localStorage.getItem('USER__INFO__')){
  user_lsp().then((res)=>{
  })
}
const show_pj=(item)=>{
	contentFlag.value=true;
	// console.error(item)
	console.error(item.eval)
	content.value=item.eval.content
}
import { ElMessage, ElMessageBox } from 'element-plus'
let textarea=ref('')
let evaluateFlag=ref(false)
let page=ref(1)
let limit=ref(10)
let totalNumber=ref(null)
let goodsIds=ref('')
let orderIds=ref('')
let contentFlag=ref(false)
const handleCurrentChange=(size)=>{
  page.value=size
  siteLists()
}
const siteLists=()=>{
  let data={
    type:nacIndex.value+1,
    page:page.value,
    limit:limit.value
  }
  get_eval_list(data).then((res)=>{
    if(res.code==1){
      evalList.arr=res.data.data
      totalNumber.value=res.data.total
    }
  })
}
let content=ref('')
import {inject, provide, reactive, ref,onMounted} from 'vue'
import indexHeaders from '@/components/Index/indexHeaders.vue'

import LeftSliderBar from '@/components/Index/LeftSliderBar.vue'
import RightSliderBar from '@/components/Index/RightSliderBar.vue'
import CountDate from '@/components/Index/CountDate.vue'
import Footer from '@/components/Tool/Footer.vue'
import CentreNav from '@/components/User/CentreNav.vue'
import {detailTime, isLogin, timestampToTime} from "@/utils";
import {creates, get_eval_list, orderEval, user_lsp} from "@/api/menu1";
const guide = ref(['资讯中心'])
const evaluateNav = ref(['待评价','已评价'])
let nacIndex = ref(0)
let guideIndex =ref(0)
const clickTaps=(goodsId,orderId)=>{
  goodsIds.value=goodsId
  orderIds.value=orderId
  evaluateFlag.value=true
}
const submits=()=>{
  if(textarea.value==''){
    ElMessage.error('请输入评价内容')
    return;
  }
  let data={
    goods_id:goodsIds.value,
    order_id:orderIds.value,
    content:textarea.value,
  }
  orderEval(data).then((res)=>{
    if(res.code==1){
      ElMessage.success('评价成功')
      getEvalList()
      evaluateFlag.value=false
    }else{
      ElMessage.error(res.msg)

    }
  })
}
const clickTap = (index) =>{
  nacIndex.value=index;
  getEvalList();
}
const newsList =[
  { id: '1', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-goods.png' ,goods: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-bg.png' },
  { id: '2', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-bg2.png' ,goods: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-bg.png'},
]
const evalList=reactive({
  arr:[]
})
isLogin()
onMounted(()=>{
  getEvalList();
})
const getEvalList=()=>{
  let data={
    type:nacIndex.value+1,
    page:page.value,
    limit:limit.value
  }
  get_eval_list(data).then((res)=>{
    if(res.code==1){
      evalList.arr=res.data.data
      totalNumber.value=res.data.total
    }
  })
}
</script>

<style lang="less" scoped >
.size-s{
	font-size: 16px;
	color: #333;
}
.buttons{
  cursor: pointer;
  width: 140px;
  height: 30px;
  background: #FFFFFF;
  color: #3171B8;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #3171B8;
  margin: 30px auto 20px auto;
}
/deep/ .el-dialog__header{
  text-align: center;
}
.login-wrapper{
  background-color: #F7F8FA;
  .register{
    display: flex;
    padding: 0 260px 40px 260px;
    .register-content{
      background-color: #fff;
      margin: 10px 0 0 10px;
      width: 100%;
      min-height: 700px;
      .evaluate-nav{
        display: flex;
        .evaluate-nav-view{
          cursor: pointer;
          padding: 0 30px;
          height: 50px;
          line-height: 50px;
          color: #333333;
          font-size: 18px;
          box-sizing: border-box;
          .line{
            width: 72px;
            height: 5px;
            background: linear-gradient(270deg, #FFFFFF 0%, #4171B3 100%);
            border-radius: 3px;
            margin-left:  -10px;
          }
        }
      }
      .content{
        margin-top: 10px;
        .list{
          height: 174px;
          background: #FFFFFF;
          border: 1px solid #D7DBE0;
          margin: 0 20px 10px 20px;
          .evaluate-goods{
            display: flex;
            justify-content: space-between;
            height: 140px;
            .color-s{
              color: #333330;
              font-size: 18px;
            }
            .order-button{
              width: 100px;
              height: 36px;
              background: #4171B3;
              border-radius: 2px;
              line-height: 140px;
              cursor: pointer;
            }
            .order-money{
              width: 20%;
              border-right: 1px solid #f4f4f4;
              // flex: 1;
              line-height: 140px;
              text-align: center;
              .order-button{
                width: 100px;
                height: 36px;
                background: #4171B3;
                border-radius: 2px;
                text-align: center;
                line-height: 36px;
                color: #fff;
                font-size: 16px;
                margin: 50px auto;
              }
            }
            .order-info{
              display: flex;
              border-right: 1px solid #f4f4f4;
              width: 40%;
              box-sizing: border-box;
              padding: 20px;
              .order-img{
                img{
                  width: 100px;
                  height: 100px;
                }
              }
              .order-name{
                font-size: 18px;
                color: #333;
                margin-left: 30px;
                margin-top: 30px;
                line-height: 24px;
              }
            }

          }
          .list-tops{
            height: 34px;
            background: #F0F2F5;
            display: flex;
            line-height: 34px;
            padding: 0 0 0 0;
            box-sizing: border-box;
            .money-top {
              width: 40%;
              display: flex;
            box-sizing: border-box;

              padding-left: 20px;
            }
            .list-time{
              color: #999;
              font-size: 14px;
            }
            .orderNo{
              color: #999;
              font-size: 14px;
              margin-left: 20px;
            }
            .money-text{
              color: #333333;
              text-align: center;
              // margin-left: 120px;
              font-size: 16px;
              width: 20%;
            }
            .money-status{
              color: #333333;
              width: 20%;
              text-align: center;
              // margin-left: 190px;
              font-size: 16px;
            }
            .money-oper{
              color: #333333;
              width: 20%;
              text-align: center;
              // margin-left: 180px;
              font-size: 16px;
            }
          }
        }
      }
      .collect-tops{
        display: flex;
        font-size: 18px;
        color: #333;
        border-bottom: 1px solid #f4f4f4;
        height: 65px;
        line-height: 65px;
        padding: 0 20px;
        div{
          margin-right: 10px;
        }
        .icons{
          margin-top: 8px;
          img{
            width: 29px;
            height: 29px;
          }
        }
      }
      .news-no{
        margin: 120px auto;
        text-align: center;
        font-size: 20px;
        color: #999;
        img{
          width: 316px;
          height: 252px;
        }
      }
    }
    .register-left{
      width: 320px;
      height: 100px;
      background: #FFFFFF;
      border-radius: 2px;
      margin-top: 10px;
      text-align: center;
      .colorStyle{
        color: #4B71AE!important;
      }
      .register-list{
        cursor: pointer;
        height: 100px;
        line-height: 100px;
        color: #333;
        font-size: 22px;
      }
    }
  }
}
</style>