recycle-mobile/src/pages/mine/myBuy/detail.vue

<template>
  <!-- #ifdef H5 -->
  <view>
    <Loading
    	:type="3"
    	:loadStatus="loadStatus"
    	:showText="errorText"
    />
    <zj-page-layout
      v-if="detail"
    	:hasFooter="true"
    	:isScroll="true"
    	:refresherTriggered="refresherTriggered"
    	@refresherrefresh="refresherrefresh">

      <view class="address-container">
        <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
        <view class="hasdata">
          <view class="name">{{detail.userName}}<text>{{detail.phone}}</text></view>
          <view class="address ellipsis-2">{{detail.province}}{{detail.city}}{{detail.area}}{{detail.street}}{{detail.address}}</view>
        </view>
      </view>

      <view class="goods-container">
        <view class="title">商品信息</view>
        <view class="goods">
          <image :src="imageUrl + detail.goodsPicUrl" mode="aspectFill"></image>
          <view class="main">
            <view class="name">{{detail.goodsTitle}}</view>
            <view class="des">{{detail.content}}</view>
            <view class="price"><text>{{detail.goodsAmount | priceFilter2}}</text>数量：{{detail.num}}</view>
          </view>
        </view>
        <view class="total">订单总金额<text>{{detail.price | priceFilter2}}</text></view>
      </view>

      <view class="order-container">
        <view class="title">订单信息</view>
        <view class="row">订单编号：{{detail.orderId}}</view>
        <view class="row">创建时间：{{detail.createTime}}</view>
        <view class="row">付款时间：{{detail.payTime}}</view>
        <view class="row">支付方式：{{detail.payType | payTypeFilter}}</view>
        <view class="row">支付单号：{{detail.transactionId}}</view>
        <view class="row">发货时间：{{detail.logisticsTime}}</view>
        <view class="row">收货时间：{{detail.completeTime}}</view>
      </view>

      <template slot="footer">
        <view class="bottom-container">
          <block v-if="detail.status == 'WAIT'">
            <u-button text="取消订单" shape="circle" @click="cancelOrder(detail.orderId)"></u-button>
            <u-button text="去支付" shape="circle" type="primary" plain @tap="toPay(detail.goodsId, detail.orderId)"></u-button>
          </block>

          <block v-if="detail.status == 'WAIT_SEND'">
            <u-button text="联系卖家" shape="circle" @tap="toContact(detail.goodsId)"></u-button>
          </block>

          <block v-if="~['SEND', 'COMPLETE'].indexOf(detail.status)">
            <u-button text="查看物流" shape="circle" @tap="toLogistics(detail.logisticsNum)"></u-button>
          </block>

          <block v-if="detail.status == 'SEND'">
            <u-button text="确认收货" shape="circle" type="primary" plain @tap="confirmReceipt(detail.orderId)"></u-button>
          </block>

          <block v-if="detail.status == 'COMPLETE'">
            <u-button text="申请售后" shape="circle" @tap="toReturn(detail.orderId)"></u-button>
          </block>
        </view>
      </template>

    </zj-page-layout>
  </view>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref('/pages/mine/myBuy/detail', pam)"  @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    filters: {
      payTypeFilter(val) {
        const MAP = {
          WECHAT: '微信支付'
        }
        return MAP[val];
      }
    },

    data() {
      return {
        orderId: null,
        detail: null,
        imageUrl: this.$imageUrl,
        loadStatus: 0,
				errorText: '',
        refresherTriggered: false,
      }
    },

    onLoad({orderId}) {
      this.orderId = orderId;
      this.getDetail();
    },

    methods: {
      getDetail() {
        this.$api.postJson('/orderPay/detail', {
          orderId: this.orderId
        }).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(orderId) {
        this.$modal({
          content: '确认取消支付吗？'
        }).then(() => {
          this.$api.postJson('/orderPay/wait/notPay', {
            userId: this.$store.state.user.userId,
            orderId: orderId,
          }).then(res => {
            this.$successToast();
            this.getDetail();
          })
        }).catch(() => {})
      },
      
      // 确认收货
      confirmReceipt(orderId) {
        this.$modal({
          content: '确定要确认收货吗？'
        }).then(() => {
          this.$api.postJson('/orderPay/confirm', {
            userId: this.$store.state.user.userId,
            orderId: orderId,
          }).then(res => {
            this.$successToast();
            this.refreshLish();
          })
        }).catch(() => {})
      },

      // 查看物流
      toLogistics(logisticsNum) {
        this.$navToPage({
          url: `/pages/mine/myBuy/logistics?logisticsNum=${logisticsNum}`
        })
      },

      // 去支付
      toPay(goodsId, orderId) {
        this.$navToPage({
          url: `/pages/goods/order?goodsId=${goodsId}&orderId=${orderId}`
        })
      },

      // 去申请售后
      toReturn(orderId) {
        this.$navToPage({
          url: `/pages/mine/myBuy/return?orderId=${orderId}`
        })
      },

      // 去联系
      toContact(goodsId) {
        this.$navToPage({
          url: `/pages/message/msgView?goodsId=${goodsId}`
        })
      },
    }
  }
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },

    onLoad(pam) {
      this.pam = pam;
    },
  }
  // #endif
</script>

<style lang="scss" scoped>
.address-container {
  background: #FFFFFF;
  display: flex;
  align-items: center;
  height: 150rpx;
  padding: 0 20rpx;
  margin-top: 30rpx;
  .icon {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    background: $theme-color;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
    .iconfont {
      font-size: 36rpx;
      color: #ffffff;
    }
  }
  .hasdata {
    .name {
      font-size: 32rpx;
      color: #333333;
      text {
        color: #999999;
        font-size: 28rpx;
        margin-left: 16rpx;
      }
    }
    .address {
      font-size: 28rpx;
      color: #666666;
      line-height: 34rpx;
      margin-top: 10rpx;
    }
  }
}

.goods-container {
  background: #ffffff;
  margin-top: 30rpx;
  padding: 30rpx 30rpx 0;
  .title {
    font-weight: 500;
  }
  .goods {
    display: flex;
    padding: 30rpx 0;
    image {
      width: 120rpx;
      height: 120rpx;
    }
    .main {
      flex: 1;
      margin-left: 20rpx;
      .name {
        font-size: 32rpx;
      }
      .des {
        margin-top: 12rpx;
        font-size: 28rpx;
        color: $reg-font;
      }
      .price {
        margin-top: 12rpx;
      	text {
      		color: $assist-color;
      		font-weight: 500;
      		font-size: 32rpx;
          margin-right: 12rpx;
      	}
      }
    }
  }
  .total {
    border-top: 1px solid #eaeaea;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 28rpx;
    text {
      margin-left: 12rpx;
      color: $assist-color;
    }
  }
}

.order-container {
  background: #ffffff;
  margin-top: 30rpx;
  padding: 30rpx;
  .title {
    font-weight: 500;
    margin-bottom: 20rpx;
  }
  .row {
    margin-top: 12rpx;
    font-size: 28rpx;
    text {
      color: $assist-color;
    }
  }
}

.bottom-container {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .u-button {
    width: auto;
    height: 60rpx;
    margin: 0;
    margin-left: 20rpx;
  }
}

</style>