jsm-mall-h5-front/src/packageMaterial/pages/sale/orderDetail.vue

<template>
  <view class="all-container">
    <view class="bg"></view>
    <Loading :type="3" :loadStatus="loadStatus" :showText="errorText" />
    <zj-page-layout
      v-if="detail"
      :hasFooter="true"
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh"
    >
      <view class="content-container">
        <view class="status-container">{{ detail.payStatus | statusFilter }}</view>
        <view class="product-container card">
          <view class="title">产品信息</view>
          <view class="product">
            <view class="it" v-for="(item, index) in detail.workerOrderItems" :key="index">
              <view class="name"
                >{{ item.goodsName }}<text>×{{ item.num }}{{ item.unit }}</text></view
              >
              <view class="price">¥{{ item.totalAmount | priceFilter }}</view>
            </view>
            <view class="total">
              <view class="text">合计：</view>
              <view class="price">¥{{ detail.totalAmount | priceFilter }}</view>
            </view>
          </view>
        </view>
        <view class="info-container card">
          <view class="title">下单信息</view>
          <view class="row">
            <view class="label">订单单号</view>
            <view class="value">{{ detail.orderId }}</view>
            <view class="tag" @tap="$copy(detail.orderId)">复制</view>
          </view>
          <view class="row">
            <view class="label">关联工单</view>
            <view class="value">{{ detail.workerOrderId }}</view>
            <view class="tag" @tap="$copy(detail.workerOrderId)">复制</view>
          </view>
          <view class="row">
            <view class="label">客户电话</view>
            <view class="value">{{ detail.userMobile }}</view>
          </view>
          <view class="row">
            <view class="label">销售方式</view>
            <view class="value">{{ detail.settlementType | salesTypeFilter }}</view>
          </view>
          <view class="row">
            <view class="label">所属网点</view>
            <view class="value">{{ detail.websitName }}</view>
          </view>
          <view class="row">
            <view class="label">下单人员</view>
            <view class="value">{{ detail.workerName }}</view>
          </view>
          <view class="row">
            <view class="label">下单时间</view>
            <view class="value">{{ detail.createTime }}</view>
          </view>
          <view class="row">
            <view class="label">支付方式</view>
            <view class="value">{{ detail.payType | payTypeFilter }}</view>
          </view>
          <view class="row">
            <view class="label">备注信息</view>
            <view class="value">{{ detail.remark }}</view>
          </view>
        </view>
      </view>
      <template slot="footer">
        <view class="bottom-container" v-if="detail.payStatus == 'WAIT'">
          <view class="left"></view>
          <view class="right">
            <u-button text="取消订单" @click="cancelOrder"></u-button>
          </view>
        </view>
      </template>
    </zj-page-layout>
  </view>
</template>

<script>
export default {
  filters: {
    statusFilter(val) {
      const MAP = {
        WAIT: '待支付',
        PAID: '已支付',
        CANCEL: '已取消'
      }
      return MAP[val]
    },
    salesTypeFilter(val) {
      const MAP = {
        OWN: '自有出库',
        OUT: '外购销售'
      }
      return MAP[val]
    },
    payTypeFilter(val) {
      const MAP = {
        WECHAT: '微信支付',
        LINE: '线下支付'
      }
      return MAP[val]
    }
  },

  data() {
    return {
      id: null,
      refresherTriggered: false,
      loadStatus: 0,
      errorText: '',
      detail: null
    }
  },

  onLoad({ id }) {
    this.id = id
    this.getDetail()
  },

  methods: {
    getDetail() {
      this.$api
        .post('/pay/getOrder', {
          orderId: this.id
        })
        .then(res => {
          this.detail = res.data
          this.loadStatus = 0
        })
        .catch(res => {
          this.errorText = res.message
          this.loadStatus = 2
        })
        .finally(res => {
          this.refresherTriggered = false
        })
    },

    // 下拉刷新
    refresherrefresh() {
      this.refresherTriggered = true
      this.getDetail()
    },

    // 取消订单
    cancelOrder() {
      this.$modal({
        content: '确认取消订单吗？'
      })
        .then(() => {
          this.$api
            .post('/pay/cancel', {
              orderId: this.id
            })
            .then(res => {
              this.$successToast()
              this.getDetail()
            })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.all-container {
  position: relative;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300rpx;
  background: linear-gradient(179.48deg, rgba(200, 224, 251, 1) 0.45%, rgba(247, 247, 247, 1) 98.96%);
}
.card {
  @include zj-card;
  margin-top: 30rpx;
  padding: 30rpx;
  .title {
    font-size: 32rpx;
    font-weight: 600;
  }
}
.content-container {
  padding: 20rpx;
}
.status-container {
  font-size: 36rpx;
  font-weight: 500;
  margin-left: 30rpx;
  text {
    margin-left: 12rpx;
  }
}
.product-container {
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      font-size: 32rpx;
      font-weight: 600;
    }
    .right {
      font-size: 28rpx;
      color: $theme-color;
    }
  }
  .product {
    background: #f5f5f5;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    .it {
      display: flex;
      align-items: flex-end;
      margin-bottom: 20rpx;
      .name {
        flex: 1;
        font-size: 28rpx;
        font-weight: 500;
        text {
          color: $sec-font;
          margin-left: 12rpx;
          font-weight: normal;
        }
      }
      .price {
        margin-left: 30rpx;
        font-size: 28rpx;
        font-weight: 500;
      }
    }
    .total {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 30rpx;
      .text {
        font-size: 28rpx;
        color: $sec-font;
      }
      .price {
        font-size: 28rpx;
        color: $minor-color;
        font-weight: 500;
      }
    }
  }
}
.info-container {
  .row {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
    }
    .value {
      flex: 1;
      font-size: 28rpx;
      text {
        color: $minor-color;
      }
      &.price {
        color: $theme-color;
      }
    }
    .tag {
      font-size: 28rpx;
      color: $theme-color;
    }
  }
}
.bottom-container {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  .right {
    display: flex;
    ::v-deep .u-button {
      margin-left: 20rpx;
    }
  }
}
</style>