uniapp-qxk/packages/sonpingDetail/sonpingDetail.vue

<template>
  <view class="flex-col page">
    <view class="flex-col group_4">
		<view class="flex-row section_2">
		  <view class="flex-row group_5">
			<text class="text_2">订单编号：</text>
			<text class="text_3">{{ details.order.order_num || '暂无编号' }}</text>
		  </view>
		  <text class="text_4" style="color: #999999;" @click="setClipboardData(details.order.order_num || '')">复制</text>
		</view>
      <view class="flex-row section_2" style="padding-top: 0;">
        <view class="flex-row group_5">
          <text class="text_2">发货单号：</text>
          <text class="text_3">{{ details.order.back_express_numb || '暂无单号' }}</text>
        </view>
        <text class="text_4" :style="{color: details.order.status_text_color}">{{ details.order.status_text }}</text>
      </view>
      <view class="section_3 flex-col">
        <view class="justify-between" @click="$url('/packages/sonpingDetail/viewDetail?id='+ id)">
          <view class="flex-row">
            <text class="text_5">明细：</text>
            <text class="text_6">共{{ details.order.num }}件</text>
          </view>
          <image
            src="@/static/icon/rightArrow.png"
            class="image_6"
          />
        </view>
        <view class="justify-between group_8" @click="details.order.amount && $url('/packages/sonpingDetail/expenseDetail?id='+ id)" v-if="details.order.amount">
          <view class="flex-row">
            <text class="text_7">费用：</text>
            <text class="text_8">{{ details.order.amount || '暂无' }}</text>
          </view>
          <image
            src="@/static/icon/rightArrow.png"
            class="image_6"
          />
        </view>
        <view class="flex-col group_10" @click="$url('/packages/address/address')">
          <view class="justify-between">
            <view class="flex-row lf-flex">
              <view class="text_9">收货人：</view>
              <view class="text_10">{{ details.order.address.name }}</view>
              <view class="text_11">{{ details.order.address.tel }}</view>
            </view>
            <image
              src="@/static/icon/rightArrow.png"
              class="image_6"
            />
          </view>
          <view class="text_12">{{ details.order.address.area_name }}{{ details.order.address.desc }}</view>
        </view>
      </view>
      <view class="section_3 flex-col">
        <view class="flex-col group_13" @click="$url('/packages/sonpingDetail/ratingTrajectory?id='+ id)">
          <view class="flex-row">
            <image
              :src="details.logs && details.logs.icon_url"
              class="image_10"
            />
            <text class="text_13">{{ details.logs && details.logs.title }}</text>
            <image
              src="@/static/icon/rightArrow.png"
              class="image_6 image_11"
            />
          </view>
          <text class="text_14">{{ details.logs && details.logs.created_at }}</text>
        </view>
        <view class="flex-row group_15">
          <image
            src="@/static/icon/aixin.png"
            class="image_12"
          />
          <text class="text_15">温馨提示：如需发票，请在订单完成后一个月内到官网申请</text>
        </view>
      </view>
      <view class="flex-col section_4">
        <text class="text_16">送评信息</text>
        <view class="justify-between group_16" @click="$url('/packages/sonpingDetail/ratingTrajectory?id='+ id)">
          <view class="flex-row">
            <text class="text_17">寄送藏品：</text>
            <text class="text_18">{{ details.order.express_type }} {{ details.order.express_numb }}</text>
          </view>
          <image
            src="@/static/icon/rightArrow.png"
            class="image_6"
          />
        </view>
        <view class="flex-row group_18">
          <text class="text_19">送评公司：</text>
          <text class="text_20">北京评分卡部</text>
        </view>
        <view class="flex-row group_19">
          <text class="text_21">送评人：</text>
          <text class="text_22">{{ details.order.owner }}</text>
        </view>
        <view class="flex-row group_20">
          <text class="text_23">联系方式：</text>
          <text class="text_24">{{ details.order.tel }}</text>
        </view>
        <view class="flex-row group_21">
          <text class="text_25">是否快评：</text>
          <text class="text_26">{{ ['否','是'][details.order.is_fast] }}</text>
        </view>
        <!-- <view class="flex-row group_22">
          <text class="text_27">保价：</text>
          <text class="text_28">暂无</text>
        </view> -->
        <view class="flex-col group_23">
          <view class="flex-col">
            <view class="flex-row">
              <text class="text_29">打包照片</text>
              <text class="text_30">送评前请拍照，可确保权益</text>
            </view>
            <view class="flex-row equal-division">
              <image
				mode="aspectFill"
                :src="item"
                class="equal-division-item image_14"
				v-for="(item, index) in showImages"
				:key="index"
				@click="previewImage(index)"
              />
            </view>
          </view>
          <view class="flex-col group_26">
            <view class="flex-col items-center text-wrapper" @click="$url('/packages/address/address?is_select=1')" v-if="details.order.status == 2">
              <text>更改地址</text>
            </view>
			<view class="flex-col items-center text-wrapper text-wrapper-1" @click="orderConfirm" v-else-if="details.order.status == 4">
              <text>确认收货</text>
            </view>
            <view class="section_5"> </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import { gradingDetail } from '@/service/grading.js'
	import { confirmOrder, changOrderAddress } from '@/service/order.js';
	
  export default {
    data() {
      return {
		  address: {},
		  id: '',
		  details: {}
	  };
    },
	watch: {
		address(){
			this.changOrderAddress();
		}
	},
	computed: {
		showImages(){
			if(this.details.order && this.details.order.images){
				return String(this.details.order.images).split(',');
			}else{
				return []
			}
		}
	},
	onLoad(options){
		this.id = options.id;
		this.getGradingDetail();
	},
	methods: {
		async getGradingDetail(){
			let res = await gradingDetail(this.id);
			console.log("res", res);
			this.details = res.data.datas;
		},
		previewImage(current){
			uni.previewImage({
				urls: this.showImages,
				current: current
			})
		},
		// 确认收货
		async orderConfirm(){
			await confirmOrder(this.details.order.order_id);
			this.$msg('确认收货成功');
			this.getGradingDetail();
		},
		// 更换收货地址
		async changOrderAddress(){
			await changOrderAddress({order_id: this.details.order.order_id, addr_id: this.address.id});
			this.$msg('地址修改成功');
			this.getGradingDetail();
		},
		// 复制
		setClipboardData(data){
			uni.setClipboardData({
				data: data
			})
		}
	}
  };
</script>

<style scoped lang="css">
  .section_3 {
    margin-top: 30rpx;
    padding: 40rpx 30rpx 40rpx 32rpx;
    background-color: rgb(255, 255, 255);
  }
  .image_6 {
    margin: 10rpx 0 8rpx;
    width: 44rpx;
    height: 44rpx;
  }
  .equal-division-item {
    margin-left: 28rpx;
    /* flex: 1 1 210rpx; */
    width: 80px;
    height: 80px;
  }
  .page {
    background-color: #f6f6f6;
    width: 100%;
    overflow-y: auto;
    height: 100%;
  }
  .group_4 {
    padding-top: 2rpx;
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .section_2 {
    padding: 40rpx 32rpx;
    background-color: rgb(255, 255, 255);
  }
  .section_4 {
    margin-top: 30rpx;
    padding: 40rpx 30rpx 16rpx 32rpx;
    background-color: rgb(255, 255, 255);
  }
  .group_5 {
    flex: 1 1 auto;
  }
  .text_4 {
    margin-left: 40rpx;
    /* color: rgb(172, 205, 35); */
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .group_8 {
    margin-top: 50rpx;
  }
  .group_10 {
    margin-top: 50rpx;
  }
  .group_13 {
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .group_15 {
    margin-top: 40rpx;
    color: rgb(153, 153, 153);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 34rpx;
    white-space: nowrap;
  }
  .text_16 {
    color: rgb(51, 51, 51);
    font-size: 36rpx;
    font-weight: 600;
    line-height: 50rpx;
    white-space: nowrap;
  }
  .group_16 {
    margin-top: 40rpx;
  }
  .group_18 {
    margin-top: 50rpx;
  }
  .group_19 {
    margin-top: 50rpx;
  }
  .group_20 {
    margin-top: 50rpx;
  }
  .group_21 {
    margin-top: 50rpx;
  }
  .group_22 {
    margin-top: 50rpx;
  }
  .group_23 {
    margin-top: 50rpx;
  }
  .text_2 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_3 {
    margin-left: 10rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_12 {
    margin-top: 10rpx;
    align-self: center;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
	width: 100%;
	box-sizing: border-box;
	padding-left: 160rpx;
	padding-right: 32rpx;
  }
  .text_14 {
    margin-left: 66rpx;
  }
  .image_12 {
    width: 30rpx;
    height: 30rpx;
  }
  .text_15 {
    margin-left: 10rpx;
    margin-right: 24rpx;
  }
  .text_19 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_20 {
    margin-left: 10rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	width: 522rpx;
	display: inline-block;
  }
  .text_21 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_22 {
    margin-left: 42rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_23 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_24 {
    margin-left: 10rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_25 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_26 {
    margin-left: 10rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_27 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_28 {
    margin-left: 74rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .group_26 {
    margin-top: 40rpx;
    padding: 0 2rpx;
    color: rgb(153, 153, 153);
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
    white-space: nowrap;
  }
  .text_5 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_6 {
    margin-left: 74rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_7 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_8 {
    margin-left: 74rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .image_10 {
    width: 56rpx;
    height: 56rpx;
  }
  .text_13 {
    margin-left: 10rpx;
	display: inline-block;
	width: 557rpx;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
  }
  .image_11 {
    margin-top: 10rpx;
    margin-bottom: 0;
    margin-left: 30rpx;
    margin-right: 0;
  }
  .text_17 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_18 {
    margin-left: 10rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .equal-division {
    margin-top: 20rpx;
  }
  .text-wrapper {
    padding: 10rpx 0;
    align-self: flex-end;
    border-radius: 32rpx;
    width: 160rpx;
    border: solid 2rpx rgb(153, 153, 153);
  }
  .text-wrapper-1{
	  border-color: #E7A23F;
	  color: #E7A23F;
  }
  .section_5 {
    margin-top: 40rpx;
    align-self: center;
    border-radius: 4rpx;
    width: 196rpx;
    height: 8rpx;
  }
  .text_9 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_10 {
    margin-left: 42rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
	max-width: 280rpx;
	overflow:hidden;
	text-overflow:ellipsis;
  }
  .text_11 {
    margin-left: 30rpx;
    color: rgb(51, 51, 51);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_29 {
    color: rgb(119, 119, 119);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .text_30 {
    margin-left: 20rpx;
    margin-top: 8rpx;
    color: rgb(153, 153, 153);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 34rpx;
    white-space: nowrap;
  }
  .image_14 {
    margin-left: 0;
  }
</style>