wx-qhb/pageC/orderFormDetail/orderFormDetail.vue

<template>
  <view class="page" @click="closeShow">
    <!-- 订单状态 -->
    <view class="title">
      <view v-if="orderDetail.simplify_status == 'unpaid'">
        <view class="payment"> 等待付款 </view>
        <text class="timer">剩22小时52分自动关闭</text>
      </view>
      <view class="payment" v-else-if="orderDetail.status == 'closed'">
        超时未付款，订单已取消
      </view>
      <view class="payment" v-else-if="status == 3"> 未发货，退款成功 </view>
      <view class="payment" v-else-if="status == 4"> 未发货，退款中 </view>
      <view
        class="payment"
        v-else-if="orderDetail.simplify_status == 'unreview'"
      >
        拼团中
      </view>
      <view
        class="payment"
        v-else-if="
          orderDetail.simplify_status == 'paid' ||
          orderDetail.simplify_status == 'undelivered'
        "
      >
        已付款，等待发货
      </view>
      <view
        class="payment"
        v-else-if="orderDetail.simplify_status == 'delivered'"
      >
        已发货，等待收货
      </view>
      <view
        class="payment"
        v-else-if="orderDetail.simplify_status == 'finished'"
      >
        订单已完成，交易成功
      </view>
      <view
        class="payment"
        v-else-if="orderDetail.simplify_status == 'undifference'"
      >
        待补邮费
      </view>
    </view>
    <!-- 订单状态 -->

    <!-- 地址信息 -->
    <view class="address">
      <view class="name-phone">
        <u-icon name="map" size="22"></u-icon>
        <view style="margin: 0 20rpx; font-size: 32rpx">{{
          orderDetail.address_name
        }}</view>
        <text class="phone">{{ orderDetail.address_mobile }}</text>
      </view>
      <view class="address-detail">
        {{ orderDetail.full_address }}
      </view>
    </view>
    <view class="photo" v-if="orderDetail.simplify_status == 'undifference'">
      <view class="_weight">
        <text>称重重量</text>
        <text>{{ orderDetail.call_weight }}kg</text>
      </view>
      <view class="_weight">
        <text>称重图片</text>
        <!-- <view class="_image"> </view> -->
        <image
          :src="orderDetail.call_image"
          mode="scaleToFill"
          class="_image"
        />
      </view>
      <view class="photo-bottom">
        <text class="_text-1">需补邮费</text>
        <view class="price">
          <text style="font-size: 20rpx">￥</text>
          <text>{{ orderDetail.fill_price.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{
            orderDetail.fill_price.split(".")[1]
          }}</text>
        </view>
      </view>
    </view>

    <commodityDetailVue :status="status" :orderDetail="orderDetail" />

    <view class="order">
      <view class="order-number">
        <text> 订单编号 </text>
        <view>
          {{ orderDetail.order_no }} |
          <text decode @click="cope(orderDetail.order_no)">{{
            "&nbsp;" + "复制"
          }}</text>
        </view>
      </view>
      <view
        class="order-number"
        v-if="
          orderDetail.simplify_status == 'unreview' ||
          orderDetail.status == 'paid' ||
          orderDetail.status == 'merdelivered' ||
          orderDetail.simplify_status == 'finished' ||
          orderDetail.simplify_status == 'delivered' ||
          orderDetail.simplify_status == 'undelivered'
        "
      >
        <text> 支付方式 </text>
        <view> {{ orderDetail.pay_type_name }} </view>
      </view>
      <view
        class="order-number"
        v-if="
          orderDetail.simplify_status == 'unreview' ||
          orderDetail.status == 'paid' ||
          orderDetail.simplify_status == 'finished' ||
          orderDetail.simplify_status == 'undelivered' ||
          orderDetail.simplify_status == 'delivered'
        "
      >
        <text> 支付时间 </text>
        <view> {{ orderDetail.paid_at }} </view>
      </view>
      <view class="order-number">
        <text> 下单时间 </text>
        <view>{{ orderDetail.created_at }} </view>
      </view>
    </view>
    <view
      class="contact"
      v-if="
        orderDetail.status == 'unpaid' ||
        orderDetail.status == 'paid' ||
        orderDetail.status != 'merdelivered' ||
        orderDetail.simplify_status == 'undelivered'
      "
    >
      联系团长
    </view>
    <view
      class="footer"
      v-if="
        orderDetail.status != 'paid' &&
        orderDetail.status != 'merdelivered' &&
        orderDetail.status != 'unreview' &&
        orderDetail.status != 'undelivered'
      "
    >
      <button
        class="status-1"
        v-if="
          orderDetail.status == 'unpaid' ||
          orderDetail.simplify_status == 'unreview'
        "
        @click="cancelOrder"
      >
        取消订单
      </button>
      <button class="status-2" v-if="orderDetail.status == 'unpaid'">
        继续付款
      </button>
      <button
        class="status-1"
        v-if="orderDetail.status == 'closed' || status == 3 || status == 4"
      >
        删除订单
      </button>
      <button
        class="status-2"
        v-if="orderDetail.status == 'closed' || status == 3 || status == 4"
      >
        再次购买
      </button>
      <button
        class="status-1"
        v-if="orderDetail.simplify_status == 'delivered'"
      >
        查看物流
      </button>
      <button
        class="status-2"
        v-if="orderDetail.simplify_status == 'delivered'"
        @click="confirmReceipt"
      >
        确认收货
      </button>
      <view
        style="margin-right: 40rpx; color: #777; font-size: 28rpx"
        v-if="orderDetail.simplify_status == 'finished'"
        @click="more"
        >更多</view
      >
      <button class="status-1" v-if="orderDetail.simplify_status == 'finished'">
        查看物流
      </button>
      <button class="status-1" v-if="orderDetail.simplify_status == 'finished'">
        再来一单
      </button>
      <button
        class="status-2"
        v-if="orderDetail.simplify_status == 'finished'"
        @click.stop="toEvaluate"
      >
        评价
      </button>
      <button
        class="status-2"
        v-if="orderDetail.simplify_status == 'undifference'"
        @click.stop="toEvaluate"
      >
        立即付款
      </button>
    </view>

    <u-transition :show="show">
      <view class="transition">删除订单</view>
    </u-transition>
    <agreePopup title="是否确认收货" :agreeShow="agreeShow" @close="close" />
  </view>
</template>

<script>
import commodityDetailVue from "./component/commodityDetail.vue";
import agreePopup from "../mineComponent/agreePopup.vue";
export default {
  components: {
    commodityDetailVue,
    agreePopup,
  },
  data() {
    return {
      status: 6,
      show: false,
      orderDetail: {},
      agreeShow: false,
    };
  },
  methods: {
    //复制
    cope(e) {
      uni.setClipboardData({
        data: e,
        success() {
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },
    //跳转评论
    toEvaluate() {
      uni.navigateTo({
        url: `/pageD/evaluate/evaluate?orderId=${this.orderDetail.id}`,
      });
    },
    more() {
      this.show = true;
    },
    //确认收货
    confirmReceipt() {
      this.agreeShow = true;
      // uni.$u.http
      //   .post(`/api/order/receive/${this.orderDetail.id}`)
      //   .then((res) => {});
    },
    //value为true时，确认收货
    close(value) {
      if (value) {
        uni.$u.http
          .post(`/api/order/receive/${this.orderDetail.id}`)
          .then((res) => {
            this.agreeShow = false;
            this.getDetail();
            uni.showToast({
              title: "订单已确认收货",
              icon: "none",
            });
          });
      } else {
        this.agreeShow = false;
      }
    },
    closeShow(e) {
      if (
        e._relatedInfo.anchorTargetText != "更多" &&
        e._relatedInfo.anchorTargetText != "删除订单"
      ) {
        this.show = false;
      }
    },
    //取消订单
    cancelOrder() {
      uni.$u.http
        .post(`/api/order/cancel/${this.orderDetail.id}`)
        .then((res) => {
          this.getDetail();
          uni.showToast({
            title: "已取消",
            icon: "none",
          });
        });
    },
    getDetail() {
      uni.$u.http.get(`/api/order/read?id=${this.status}`).then((res) => {
        this.orderDetail = res;
      });
    },
  },
  created() {},
  mounted() {
    this.getDetail();
  },
  onLoad(option) {
    this.status = option.orderId;
  },
};
</script>

<style scoped lang="scss">
.page {
  padding: 20rpx 24rpx 180rpx;

  .title {
    .payment {
      font-size: 44rpx;
      font-weight: 600;
      margin-bottom: 20rpx;
    }

    .timer {
      font-size: 28rpx;
      color: #666;
    }
  }

  .address {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 34rpx 24rpx 28rpx;
    margin-top: 24rpx;

    .name-phone {
      display: flex;
      align-items: center;
      align-items: flex-end;

      .phone {
        font-size: 26rpx;
        color: #666;
      }
    }

    .address-detail {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #444;
      margin-left: 60rpx;
    }
  }

  .photo {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx 20rpx;
    margin-top: 20rpx;

    ._weight {
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      color: rgba(34, 34, 34, 0.8);
      margin-bottom: 32rpx;

      ._image {
        width: 160rpx;
        height: 90rpx;
        // background-color: #d8d8d8;
        border-radius: 4rpx;
      }
    }

    .photo-bottom {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 2rpx solid rgba(151, 151, 151, 0.1);
      padding-top: 24rpx;

      .price {
        color: #f83224;
        font-weight: 600;
      }

      ._text-1 {
        font-size: 26rpx;
      }
    }
  }
  .order {
    background-color: #fff;
    border-radius: 16rpx;
    color: rgba(54, 54, 54, 0.7);
    font-size: 28rpx;
    margin-top: 20rpx;
    padding: 20rpx 20rpx;

    .order-number {
      display: flex;
      justify-content: space-between;
      margin-bottom: 32rpx;
    }
  }

  .contact {
    padding: 20rpx 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16rpx;
    margin-top: 20rpx;
    margin-bottom: 160rpx;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20rpx;
    padding-bottom: 80rpx;
    height: 66rpx;
    width: 100%;

    .status-1 {
      background-color: #fff;
      border-radius: 34rpx;
      margin: 0;
      padding: 0;
      font-size: 28rpx;
      color: #222;
      width: 168rpx;
      height: 68rpx;
      margin-right: 20rpx;
      border: 2rpx solid #979797;
    }

    .status-2 {
      background-color: #ffffff;
      border-radius: 34rpx;
      margin: 0;
      padding: 0;
      font-size: 28rpx;
      color: #f83224;
      width: 168rpx;
      height: 68rpx;
      border: 2rpx solid #f83224;
      margin-right: 24rpx;
    }
  }

  .transition {
    width: 164rpx;
    height: 88rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx -6rpx rgba(0, 0, 0, 0.3);
    position: fixed;
    bottom: 160rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 26rpx;
    color: #222;
  }
}
</style>