C56-GZH-UI/pages/index/index.vue

<template>
	<view class="u-page">
		<u--input placeholder="请输入手机号或订单" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
			v-model="numValue"></u--input>
		<u-list @scrolltolower="scrolltolower">
      <view v-for="(item, index) in orderList" :key="index">
        <u-cell :value="item.CURRENT_VALUE" :isLink="true" :url="item.URL" :stop="false">
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text">{{item.ORDER_CENTER_ORDER_ID}}</text>
            <u-tag  :text="item.STATUS_TEXT" size="mini" :type="item.TEXT_TYPE"></u-tag>
          </view>
          <view style="display: flex;flex-direction: column;align-items: flex-start;padding-top: 10px" slot="label">
            <u-row>
              <u-button  type="primary" size="mini" @click.native.stop="handleEvaluation($event,item)">{{item.EVALUATION_STATUS}}</u-button>
            </u-row>
          </view>
        </u-cell>
      </view>
		</u-list>
    <u-modal 
      :show="show" 
      :title="evaluationTitle" 
      :showConfirmButton="true" 
      :showCancelButton="true" 
      @confirm="evaluationConfirm" 
      @cancel="evaluationCancel"
      confirmText="提交评价"
      cancelText="取消"
      :closeOnClickOverlay="true"
    >
      <view class="evaluation-container">
        <view class="evaluation-item" v-for="(item, index) in evaluationItems" :key="index">
          <view class="evaluation-label">
            <text>{{item.label}}</text>
          </view>
          <view class="evaluation-rate">
            <u-rate 
              :count="item.count" 
              v-model="evaluation[item.field]"
              activeColor="#ff9900"
              inactiveColor="#dcdcdc"
              gutter="8"
              size="22"
            ></u-rate>
          </view>
        </view>
        
        <view class="evaluation-textarea">
          <view class="textarea-label">评价建议</view>
          <u--textarea
            v-model="evaluation.evaluationRemark"
            placeholder="请输入您的评价和建议..."
            count
            maxlength="200"
            height="100"
            :customStyle="{
              backgroundColor: '#f5f5f5',
              padding: '12rpx',
              borderRadius: '8rpx'
            }"
          ></u--textarea>
        </view>
      </view>
    </u-modal>

	</view>

</template>

<script>
import {evaluationOrder, getOrderList} from "@/api";

  export default {
		data() {
			return {
        accountId:undefined,
        show:false,
        numValue:undefined,
        triggered:false,
        // evaluationShow:false,
        orderList: [],
        driverEvaluationCount: 4,
        customerServiceEvaluationCount: 4,
        warehouseEvaluationCount: 4,
        timelinessEvaluationCount: 4,
        goodsEvaluationCount: 4,
        evaluation: {
          orderCenterOrderId: undefined,
          driverEvaluation: 0,
          customerServiceEvaluation: 0,
          warehouseEvaluation: 0,
          timelinessEvaluation: 0,
          goodsEvaluation: 0,
          evaluationRemark: undefined,
        },
        evaluationTitle: '服务评价',
        evaluationItems: [
          { label: '司机服务', field: 'driverEvaluation', count: 4 },
          { label: '客服态度', field: 'customerServiceEvaluation', count: 4 },
          { label: '仓库服务', field: 'warehouseEvaluation', count: 4 },
          { label: '配送时效', field: 'timelinessEvaluation', count: 4 },
          { label: '货物状态', field: 'goodsEvaluation', count: 4 }
        ],
				indexList: [],
				urls: [
					"https://xxx.com/album/1.jpg",
					"https://xxx.com/album/2.jpg",
					"https://xxx.com/album/3.jpg",
					"https://xxx.com/album/4.jpg",
					"https://xxx.com/album/5.jpg",
					"https://xxx.com/album/6.jpg",
					"https://xxx.com/album/7.jpg",
					"https://xxx.com/album/8.jpg",
					"https://xxx.com/album/9.jpg",
					"https://xxx.com/album/10.jpg",
				],
			};
		},
    created() {
      if (uni.getStorageSync('accountId')) {
        this.accountId = uni.getStorageSync('accountId')
      }
        this.getList(this.accountId)
    },
		onLoad() {
			this.loadmore();
		},
		methods: {
      getList(accountId){
        // 获取当前订单list
        let params = {
          accountId: accountId
        }
        getOrderList(params).then(res => {
          if (res.data){
            // 对数据进行处理
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].DRIVER_EVALUATION || res.data[i].WAREHOUSE_EVALUATION
                  || res.data[i].CUSTOMER_SERVICE_EVALUATION || res.data[i].TIMELINESS_EVALUATION
                  || res.data[i].GOODS_EVALUATION) {
                res.data[i].EVALUATION_STATUS = "已评价";
              } else {
                res.data[i].EVALUATION_STATUS = "待评价";
              }
              if (res.data[i].ORDER_CENTER_ORDER_STATUS === 300010) {
                res.data[i].STATUS_TEXT = "已审核";
              }
              else if (res.data[i].ORDER_CENTER_ORDER_STATUS === 300015 || res.data[i].ORDER_CENTER_ORDER_STATUS === 300020
                  || res.data[i].ORDER_CENTER_ORDER_STATUS === 300025){
                res.data[i].STATUS_TEXT = "运输中";
                res.data[i].CURRENT_VALUE = "物流轨迹";
                res.data[i].URL = "/pages/index/tracktrace?id=" + res.data[i].ORDER_CENTER_ORDER_ID;
                res.data[i].TEXT_TYPE = "warning";
              }else if (res.data[i].ORDER_CENTER_ORDER_STATUS === 300030){
                res.data[i].STATUS_TEXT = "已签收";
                res.data[i].CURRENT_VALUE = "签收详情";
                res.data[i].URL = "/pages/index/signInfo?id=" + res.data[i].ORDER_CENTER_ORDER_ID;
                res.data[i].TEXT_TYPE = "success";
              }
            }
            this.orderList = res.data;
          }
        }).catch(err => {
          console.error(err);
        });
      },


      handleEvaluation(event,item) {
        // 阻止事件冒泡，这样点击按钮就不会触发 u-cell 的点击事件了
        event.stopPropagation();
        if (item.EVALUATION_STATUS === "已评价") {
          uni.showToast({
            title: "当前已评价",
            icon: "none"
          })
          return
        }
        else {
          this.evaluation.orderCenterOrderId = item.ORDER_CENTER_ORDER_ID
          this.show = true
          console.log(this.show)
        }
      },

      evaluationConfirm() {
        // 提交评价
        evaluationOrder(this.evaluation).then(res => {
          if (res.code === "success") {
            uni.showToast({
              title: "评价成功",
              icon: "success"
            })
            this.getList()
          }
        }).catch(err => {
          uni.showToast({
            title: "评价失败",
            icon: err
          })
        })
        this.show = false
      },
      evaluationCancel() {
        // 取消评价
        this.evaluation = {
          orderCenterOrderId: undefined,
          driverEvaluation: 0,
          customerServiceEvaluation: 0,
          warehouseEvaluation: 0,
          timelinessEvaluation: 0,
          goodsEvaluation: 0,
          evaluationRemark: undefined
        },
        this.show = false
      },


      scrolltolower() {
        this.loadmore();
      },
      loadmore() {
        for (let i = 0; i < 30; i++) {
          this.indexList.push({
            url: this.urls[uni.$u.random(0, this.urls.length - 1)],
          });
        }
      },
		},
	};
</script>

<style lang="scss" scoped>
@import '@/common/adaptive.scss';

.cell-page {
  padding-bottom: 20px;
}

.cell-box {
  &__title {
    font-size: 14px;
    color: rgb(143, 156, 162);
    margin: 20px 0px 0px 15px;
  }

  &__block {
    // background-color: #fff;
    margin-top: 20px;
  }
}

.u-page {
  padding: 0;

  &__item {

    &__title {
      color: $u-tips-color;
      background-color: $u-bg-color;
      padding: 15px;
      font-size: 15px;

      &__slot-title {
        color: $u-primary;
        font-size: 14px;
      }
    }
  }
}

.u-slot-title {
  @include flex;
  flex-direction: row;
  align-items: center;
}

.u-cell-text {
  font-size: 15px;
  line-height: 22px;
  color: #303133;
  margin-right: 5px;
}

.u-slot-value {
  line-height: 17px;
  text-align: center;
  font-size: 10px;
  padding: 0 5px;
  height: 17px;
  color: #FFFFFF;
  border-radius: 100px;
  background-color: #f56c6c;
}

.evaluation-container {
  padding: 20rpx 30rpx;
  
  .evaluation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
    
    .evaluation-label {
      font-size: 28rpx;
      color: #333;
      min-width: 140rpx;
    }
    
    .evaluation-rate {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
  
  .evaluation-textarea {
    margin-top: 20rpx;
    
    .textarea-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
    }
  }
}

.u-modal {
  /deep/ .u-modal__title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
  }
  
  /deep/ .u-modal__content {
    padding: 30rpx 0;
  }
  
  /deep/ .u-modal__button {
    &--confirm {
      color: #2979ff;
      font-weight: bold;
    }
    
    &--cancel {
      color: #909399;
    }
  }
}

.your-component {
  @include respond-to('tablet') {
    // 平板样式
  }
  
  @include respond-to('desktop') {
    // 桌面样式
  }
}
</style>