hospital-accompaniment-wechat/pages/mine/exchangeOrderDetails.vue

<template>
  <view class="container">
    <u-navbar title="详情" leftIconColor="#ffffff" titleStyle="color:#fff" :autoBack="true" placeholder></u-navbar>
    <view class="box">
      <view class="logistics" v-if="details.orderStatus!=30">
        <view class="title">物流</view>
        <view class="content" v-if="details.orderStatus==10">暂无物流信息</view>
        <view class="logistics_content" v-if="details.orderStatus==20" @click="goLogisticsInfo">
          <view class="logistics_content_l">{{details.orderPackages[0].expressContentJSON.list[0].status}}</view>
          <view class="logistics_content_r">
            <text class="iconfont icon-jiantou"></text>
          </view>
        </view>
      </view>
      <view class="logistics">
        <view class="title">收货地址</view>
        <view class="content">
          <view class="content_l">
            <u-icon name="map" color="#C90700" size="30"></u-icon>
          </view>
          <view class="content_r">
            <view class="content_r_text" v-if="details.shopOrderAddress.provinceName">{{details.shopOrderAddress.provinceName+details.shopOrderAddress.cityName+details.shopOrderAddress.areaName+details.shopOrderAddress.addressDetail}}</view>
            <view class="content_r_user" v-if="details.shopOrderAddress.receiverName">{{details.shopOrderAddress.receiverName}} <text>{{details.shopOrderAddress.receiverPhone}}</text></view>
          </view>
        </view>
      </view>
      <!-- <view class="item">
        <view class="item_no">
          <view>
            <view class="item_no_lab">备注</view>
            <view class="item_no_val">{{details.buyerRemark}}</view>
          </view>
        </view>
      </view> -->
      <view class="item">
        <view class="item_t">订单号： <text>{{details.orderNo}}</text>
        </view>
        <view class="item_b" v-for="(v,i) in details.orderDetails" :key="i">
          <image :src="v.productCover" mode="" />
          <view class="item_b_r">
            <view class="item_b_r_title">{{v.productTitle}}</view>
            <view class="item_b_r_num">X1</view>
            <view class="item_b_r_price">
              <view class="item_b_r_price_l">￥{{v.productPriceTotal}}</view>
              <view class="item_b_r_price_r">{{v.pointsTotal}}兑换豆</view>
            </view>
          </view>
        </view>
        <view class="item_line"></view>
        <view class="item_no">
          <view>
            <view class="item_no_lab">订单编号：</view>
            <view class="item_no_val">{{details.orderNo}}</view>
          </view>
          <view>
            <view class="item_no_lab">下单时间</view>
            <view class="item_no_val">{{details.orderTime?details.orderTime.replace(/-/g,'.'):'--'}}</view>
          </view>
          <template v-if="details.orderPackages&&details.orderPackages.length>0">
            <view>
              <view class="item_no_lab">快递单号：</view>
              <view class="item_no_val">{{details.orderPackages[0].expressNo}}</view>
            </view>
            <view>
              <view class="item_no_lab">发货时间：</view>
              <view class="item_no_val">{{details.orderPackages[0].shipTime.replace(/-/g,'.')}}</view>
            </view>
          </template>
        </view>
      </view>
      <view class="logistics">
        <view class="title">备注</view>
        <view class="content">{{details.buyerRemark||'无'}}</view>
      </view>
    </view>
    <view class="btnBox" v-if="details.orderStatus==20">
      <view class="red" @click="confirmReceipt">确认收货</view>
    </view>
    <view class="btnBox" v-if="details.orderStatus==30">
      <view class="gary" @click="goLogisticsInfo">查看物流</view>
      <view class="red" v-if="details.orderDetails[0].commentStatus==0" @click="goPath('/pages/mine/evaluate?orderId='+details.orderDetails[0].orderId+'&productTitle='+details.orderDetails[0].productTitle+'&productCover='+details.orderDetails[0].productCover+'&productId='+details.orderDetails[0].productId)">评价</view>
    </view>
  </view>
</template>

<script>
import { shoporderInfo, simpleReceiving } from "@/api/giftPackageCenter.js"
export default {
  data () {
    return {
      type: 2,//0 待发货详情  1已发货详情  2确认收货详情
      details: {
        shopOrderAddress: {},
        orderPackages: []
      },
      orderId: undefined
    }
  },
  onLoad (options) {
    if (options.orderId) {
      this.orderId = options.orderId;
    }
  },
  onShow () {
    this.getDetails()
  },
  methods: {
    goPath (path) {
      uni.navigateTo({
        url: path
      })
    },
    getDetails () {
      shoporderInfo(this.orderId).then(res => {
        if (res.data.orderPackages && res.data.orderPackages.length > 0) {
          res.data.orderPackages.map(v => {
            if (v.expressContent) {
              v.expressContentJSON = JSON.parse(v.expressContent)
            }
          })
        }
        console.log(res.data);
        this.details = res.data;
      })
    },
    goLogisticsInfo () {
      uni.navigateTo({
        url: '/pages/mine/logisticsInfo?packageId=' + this.details.orderPackages[0].packageId + '&address=' + this.details.shopOrderAddress.provinceName + this.details.shopOrderAddress.cityName + this.details.shopOrderAddress.areaName + this.details.shopOrderAddress.addressDetail
      })
    },
    // 确认收货
    confirmReceipt () {
      uni.showModal({
        title: '提示',
        content: '确定收到商品？',
        success: (res) => {
          if (res.confirm) {
            simpleReceiving({ orderId: this.details.orderId }).then(res => {
              uni.showToast({
                title: '确认收货成功',
                icon: 'none'
              })
              this.getDetails(this.details.orderId)
            })
          }
        }
      })
    },
  }
}
</script>

<style lang='scss' scoped>
::v-deep .u-navbar__content,
::v-deep .u-status-bar {
  background-color: #c90700 !important;
}
.container {
  background: #f8f8f8;
  min-height: calc(100vh - 200rpx);
  padding-bottom: 150rpx;
  .box {
    padding: 30rpx;
    .logistics {
      background: #ffffff;
      border-radius: 30rpx;
      margin-bottom: 30rpx;
      .title {
        font-size: 30rpx;
        color: #242424;
        font-family: FZCuYuan-M03;
        padding: 38rpx 20rpx 23rpx;
        border-bottom: 1px solid #e6e6e6;
      }
      .logistics_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 27rpx 20rpx 48rpx;
        .logistics_content_l {
          font-size: 28rpx;
          color: #1a1a1a;
        }
        .logistics_content_r {
          text {
            font-size: 36rpx;
            color: #808080;
          }
        }
      }
      .content {
        padding: 27rpx 20rpx 48rpx;
        font-size: 28rpx;
        color: #808080;
        display: flex;
        .content_l {
          margin-right: 29rpx;
        }
        .content_r {
          .content_r_text {
            font-size: 28rpx;
            color: #1a1a1a;
            line-height: 38rpx;
          }
          .content_r_user {
            font-size: 24rpx;
            color: #1a1a1a;
            margin-top: 15rpx;
            text {
              font-size: 24rpx;
              color: #808080;
              display: inline-block;
              margin-left: 15rpx;
            }
          }
        }
      }
    }
    .item {
      background: #ffffff;
      border-radius: 30rpx;
      margin-bottom: 32rpx;
      .item_t {
        font-size: 29rpx;
        color: #1a1a1a;
        font-family: FZCuYuan-M03;
        padding: 50rpx 20rpx 30rpx;
        border-bottom: 1px solid #cccccc;
        position: relative;
        text {
          color: #808080;
          font-family: FZCuYuan-M03;
        }
        .tag {
          width: 136rpx;
          height: 50rpx;
          border-radius: 0rpx 30rpx 0rpx 30rpx;
          font-size: 24rpx;
          line-height: 50rpx;
          text-align: center;
          position: absolute;
          top: 0;
          right: 0;
        }
        .red {
          background: #ffdbd9;
          color: #fb0b03;
        }
        .green {
          background: #e6ffec;
          color: #00bf02;
        }
        .gary {
          background: #e6e6e6;
          color: #333333;
        }
      }
      .item_b {
        display: flex;
        padding: 30rpx 20rpx 30rpx;
        > image {
          width: 172rpx;
          height: 172rpx;
          border-radius: 12rpx;
          margin-right: 20rpx;
          flex-shrink: 0;
        }
        .item_b_r {
          flex-grow: 1;
          .item_b_r_title {
            font-size: 28rpx;
            color: #1a1a1a;
            min-height: 74rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 42rpx;
          }
          .item_b_r_num {
            font-size: 26rpx;
            color: #1a1a1a;
            margin-top: 10rpx;
          }
          .item_b_r_price {
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            .item_b_r_price_l {
              font-size: 26rpx;
              color: #1a1a1a;
            }
            .item_b_r_price_r {
              font-size: 32rpx;
              color: #fb0b03;
              font-family: FZCuYuan-M03;
            }
          }
        }
      }
      .item_line {
        width: 650rpx;
        height: 0rpx;
        border-bottom: 1rpx solid #e6e6e6;
        margin: auto;
      }
      .item_no {
        padding: 30rpx 20rpx;
        > view {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12rpx 0;
          .item_no_lab {
            font-size: 26rpx;
            color: #1a1a1a;
          }
          .item_no_val {
            font-size: 26rpx;
            color: #666666;
          }
        }
      }
    }
  }
}
.btnBox {
  width: 100%;
  background: #ffffff;
  padding: 45rpx 50rpx 33rpx;
  box-sizing: border-box;
  border-top: 1rpx solid #e7e7e7;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  > view {
    width: 200rpx;
    height: 70rpx;
    border-radius: 35rpx;
    text-align: center;
    font-size: 26rpx;
    line-height: 72rpx;
    text-align: center;
    color: #ffffff;
    margin-left: 25rpx;
  }
  .red {
    background: #fb0b03;
  }
  .gary {
    background: #999999;
  }
}
</style>