jsm-mall-h5-front/src/packageWorkorder/pages/appraise.vue

<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :hasFooter="true">
    <view class="page-container">
      <view class="card-container">
        <view class="top">
          <view class="title"><text>*</text>服务评价</view>
          <u-rate count="5" :size="24" v-model="star"></u-rate>
          <!-- <view class="text">非常好</view> -->
        </view>
        <u--textarea
          v-model="remarkVal"
          height="100"
          placeholder="根据本次服务，写出您的真实感受~"
          fixed
          border="none"
        ></u--textarea>
        <view class="images">
          <block v-for="(item, index) in imageList" :key="index">
            <view class="img">
              <image :src="item.url" mode="aspectFill" @tap="prevImg(item.url)"></image>
              <text class="iconfont icon-guanbi1" @tap="delImage(index)"></text>
            </view>
          </block>
          <view class="add" @tap="addImage" v-if="imageList.length < 3">
            <text class="iconfont icon-xiangji"></text>
            <text class="text">添加图片</text>
          </view>
        </view>
      </view>

      <view class="goods-container" v-if="!noData">
        <view class="orderid">
          <view class="row" v-if="detail.saleOrderNo">
            <view class="ellipsis"
              >订单号<text>{{ detail.saleOrderNo }}</text></view
            >
            <view class="copy" @tap.stop="copy(detail.saleOrderNo)">复制</view>
          </view>
          <view class="row">
            <view class="ellipsis"
              >工单号<text>{{ id }}</text></view
            >
            <view class="copy" @tap.stop="copy(id)">复制</view>
          </view>
        </view>
        <view class="goods" :class="'goods' + idx" v-for="(it, idx) in detail.products" :key="idx">
          <image :src="imageUrl + it.mainImg" mode="aspectFill" v-if="it.mainImg"></image>
          <image :src="configInfo.minLogo3" mode="aspectFill" v-else></image>
          <view class="main">
            <view class="name ellipsis-2">{{ it.productName || '' }}</view>
            <!-- <view class="des">{{it.small_name}}</view> -->
            <view class="tags">
              <view class="tag1">{{ detail.orderTypeName }}</view>
              <view class="tag2">{{ detail.mainName }}</view>
            </view>
          </view>
        </view>
        <view class="info" v-show="isShowGoodsMore">
          <view class="row" v-if="detail.appointmentTime">
            <view class="label">预约时间</view>
            <view class="value">{{ detail.appointmentTime }}</view>
          </view>
          <view class="row" v-if="detail.workerName">
            <view class="label">工程师</view>
            <view class="value">{{ detail.workerName }}</view>
            <text class="iconfont icon-call" @tap="callPhone"></text><text class="call" @tap="callPhone">联系Ta</text>
            <block v-if="locationData">
              <text class="iconfont icon-dingwei1" @tap="toLocation"></text
              ><text class="call" @tap="toLocation">查看位置</text>
            </block>
          </view>
          <view class="row">
            <view class="label">用户信息</view>
            <view class="value">{{ detail.userName || '' }}-{{ detail.userMobile || '' }}</view>
          </view>
          <view class="row">
            <view class="label">服务地址</view>
            <view class="value"
              >{{ detail.province }}{{ detail.city }}{{ detail.area }}{{ detail.street }}{{ detail.address }}</view
            >
          </view>
          <view class="row">
            <view class="label">备注</view>
            <view class="value">{{ detail.remark }}</view>
          </view>
        </view>
        <view class="ctrl" @tap="isShowGoodsMore = !isShowGoodsMore">
          <text class="iconfont icon-jinru" :class="isShowGoodsMore ? 'open' : ''"></text>
          <text class="text">{{ isShowGoodsMore ? '收起' : '查看更多' }}</text>
        </view>
      </view>
    </view>

    <template slot="footer">
      <view class="btn-group">
        <u-button text="发布" type="primary" size="large" @click="submitData"></u-button>
      </view>
    </template>
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view
    :src="webViewHref(`/packageWorkorder/pages/appraise`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
 // #ifdef H5
import { uploadImgFull } from '@/common/utils/util.js';

export default {
	data() {
		return {
			configInfo: {},
			imageUrl: this.$imageUrl,
			id: null,
			type: null,
			star: 0,
			remarkVal: '',
			imageList: [],
			isShowGoodsMore: false,
			detail: {}, // 详情数据
			noData: true,
		}
	},

	async onLoad({id, type}) {
		this.id = id;
		this.type = type;
		// this.getOrderDetail();
     this.configInfo = await this.$getConfigInfo();
	},

	methods: {
		getOrderDetail() {
			this.$api
       .post('/order/customer/detail',{
         userMobile: this.userInfo.mobile,
         id: this.id,
			}).then(res => {
				if(res.data) {
					this.noData = false;
					this.detail = res.data;
				}else {
					this.noData = true;
				}
			})
		},

		// 添加图片
		async addImage() {
			uni.chooseImage({
				count: 3 - this.imageList.length,
				success: res => {
					uni.showLoading();
					res.tempFilePaths.forEach(async item => {
						let data = await uploadImgFull(item);
						this.imageList.push(data);
					});
					uni.hideLoading();
				},
				fail: err => {}
			})
		},


		callPhone() {
			uni.makePhoneCall({
			    phoneNumber: this.detail.workerMobile
			});
		},

		// 删除图片
		delImage(index) {
			this.imageList.splice(index, 1);
		},

		//预览图片
		prevImg(current) {
			uni.previewImage({
				current,
				urls: this.imageList.map(item => {
					return item.url
				})
			})
		},

		submitData() {
			if(!this.star) return this.$toast('请选择服务评价');

			this.$api.postJson('/pg/order/base/appraise', {
         orderBaseId: this.id,
         level: this.star,
         appraiseContent: this.remarkVal,
         appraiseImgUrl: this.imageList.map(item => {
           return item.url
         }).join(','),
			}).then(res => {
				this.$successToast('评价成功');
				this.crossPage.$emit('refreshUserWorkorderList', '');
				this.$navToPage({
					delta: 1
				}, 'navigateBack')
			})
		}

	}
}

 // #endif
 // #ifndef H5
 export default {
   data() {
     return {
       pam: {},
     }
   },
   onLoad(pam) {
     this.pam = pam;
   }
 }
 // #endif
</script>

<style lang="scss" scoped>
.page-container {
  padding: 30rpx;
}

.card-container {
  @include zj-card;
  padding: 0 30rpx 30rpx;
  .top {
    height: 100rpx;
    display: flex;
    align-items: center;
    .title {
      font-size: 32rpx;
      margin-right: 12rpx;
      text {
        color: $minor-color;
      }
    }
    .text {
      color: $sec-font;
      margin-left: 8rpx;
    }
  }
  ::v-deep .u-textarea {
    padding: 0;
  }
  .images {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .add {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 146rpx;
      height: 146rpx;
      border: 2rpx dashed #dadada;
      border-radius: 10rpx;
      margin-top: 20rpx;
      .iconfont {
        font-size: 48rpx;
        color: #999999;
      }
      .text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;
      }
    }
    .img {
      position: relative;
      margin-right: 20rpx;
      margin-top: 20rpx;
      &:nth-child(4n) {
        margin-right: 0;
      }
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        overflow: hidden;
        display: block;
      }
      text {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #ff3f42;
        font-size: 24rpx;
        color: #ffffff;
        text-align: center;
        line-height: 40rpx;
        display: block;
      }
    }
  }
}

.goods-container {
  @include zj-card;
  margin-top: 30rpx;
  padding: 30rpx;
  .orderid {
    .row {
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      view {
        color: $sec-font;
        text {
          margin-left: 20rpx;
          color: $main-font;
          font-weight: 500;
        }
      }
      .copy {
        flex-shrink: 0;
        margin-left: 10rpx;
        font-size: 28rpx;
        color: $theme-color;
      }
    }
  }
  .goods {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    image {
      width: 140rpx;
      height: 140rpx;
      display: block;
      flex-shrink: 0;
      margin-right: 20rpx;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      .name {
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
      }
      .des {
        font-size: 28rpx;
        color: #999999;
        margin-top: 16rpx;
      }
      .tags {
        margin-top: 16rpx;
        display: flex;
        .tag1 {
          font-size: 24rpx;
          height: 42rpx;
          line-height: 42rpx;
          padding: 0 16rpx;
          margin-right: 10rpx;
          border: 1px solid $minor-color;
          color: $minor-color;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          flex-direction: row;
          border-radius: 10rpx;
        }
        .tag2 {
          height: 42rpx;
          padding: 0 16rpx;
          line-height: 42rpx;
          border-radius: 10rpx;
          background: #e8e8e8;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
  .info {
    margin-top: 20rpx;
    .row {
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 20rpx;
      display: flex;
      .label {
        color: $sec-font;
        flex-shrink: 0;
        width: 128rpx;
      }
      .value {
      }
      .iconfont {
        margin-left: 16rpx;
      }
      text {
        color: $theme-color;
      }
    }
  }
  .ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    color: $sec-font;
    margin-top: 30rpx;
    .iconfont {
      margin-right: 10rpx;
      transform: rotate(90deg);
      &.open {
        transform: rotate(270deg);
      }
    }
  }
}

.btn-group {
  padding: 25rpx 30rpx;
  display: flex;
  align-items: center;
  ::v-deep .u-button {
    height: 88rpx;
    font-size: 32rpx;
    margin-right: 30rpx;
    border-radius: 88rpx;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>