wx-qhb/pageC/orderFormDetail/orderFormDetail.vue

<template>
  <view class="page" @click="closeShow">
    <!-- 订单状态 -->
    <view class="title">
      <view class="payment">{{ orderDetail.simplify_status_text }}</view>

      <text class="timer" v-if="orderDetail.simplify_status == 'unpaid'"
        >剩<text v-if="loseEfficacy / 60 > 1">{{ hours }}小时</text
        >{{ minute }}分自动关闭</text
      >
      <text
        v-else-if="orderDetail.simplify_status == 'undifference'"
        class="timer"
        >商品已打包称重，等待用户补邮费</text
      >
    </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.simplify_status == 'paid' ||
          orderDetail.simplify_status == 'merdelivered' ||
          orderDetail.simplify_status == 'finished' ||
          orderDetail.simplify_status == 'delivered' ||
          orderDetail.simplify_status == 'undelivered' ||
          orderDetail.simplify_status == 'undifference'
        "
      >
        <text> 支付方式 </text>
        <view> {{ orderDetail.pay_type_name }} </view>
      </view>
      <view
        class="order-number"
        v-if="
          orderDetail.simplify_status == 'unreview' ||
          orderDetail.simplify_status == 'paid' ||
          orderDetail.simplify_status == 'finished' ||
          orderDetail.simplify_status == 'undelivered' ||
          orderDetail.simplify_status == 'delivered' ||
          orderDetail.simplify_status == 'undifference'
        "
      >
        <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.simplify_status == 'unpaid' ||
          orderDetail.simplify_status == 'paid' ||
          orderDetail.simplify_status != 'merdelivered' ||
          orderDetail.simplify_status == 'undelivered') &&
        orderDetail.simplify_status != 'closed'
      "
    >
      联系团长
    </view>
    <view
      class="footer"
      v-if="
        orderDetail.simplify_status != 'paid' &&
        orderDetail.simplify_status != 'merdelivered' &&
        orderDetail.simplify_status != 'unreview' &&
        orderDetail.simplify_status != 'undelivered'
      "
    >
      <button
        class="status-1"
        v-if="
          orderDetail.simplify_status == 'unpaid' ||
          orderDetail.simplify_status == 'unreview'
        "
        @click="cancelOrder"
      >
        取消订单
      </button>
      <button
        class="status-2"
        v-if="orderDetail.simplify_status == 'unpaid'"
        @click="toUnPay"
      >
        继续付款
      </button>
      <button
        class="status-1"
        v-if="
          orderDetail.simplify_status == 'closed' || status == 3 || status == 4
        "
      >
        删除订单
      </button>
      <button
        class="status-2"
        v-if="
          orderDetail.simplify_status == 'closed' || status == 3 || status == 4
        "
      >
        再次购买
      </button>
      <button
        class="status-1"
        v-if="
          orderDetail.simplify_status == 'domestic_delivered' ||
          orderDetail.simplify_status == 'delivered'
        "
        @click="toLogistics"
      >
        查看物流
      </button>
      <button
        class="status-2"
        v-if="
          orderDetail.simplify_status == 'domestic_delivered' ||
          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'"
        @click="toLogistics"
      >
        查看物流
      </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="toPay"
      >
        立即付款
      </button>
    </view>

    <u-transition :show="show">
      <view class="transition" @click.stop="deleteOrder">删除订单</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,
      hours: "",
      minute: "",
      loseEfficacy: "", //失效时间
    };
  },
  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时，确认收货

    //跳转支付
    toPay() {
      uni.navigateTo({
        url: `/pageA/payorder?sum=${this.orderDetail.fill_price}&orderid=${this.orderDetail.id}&orderType=difference`,
      });
    },

    //跳转支付
    toUnPay() {
      uni.navigateTo({
        url: `/pageA/payorder?sum=${this.orderDetail.amount}&orderid=${this.orderDetail.id}`,
      });
    },

    //删除订单
    deleteOrder() {
      uni.$u.http
        .post(`/api/order/order_del`, { order_id: this.orderDetail.id })
        .then((res) => {
          this.getDetail();
          this.show = false;
          uni.showToast({
            title: "删除成功",
            icon: "none",
          });
        });
    },

    //查看物流进度
    toLogistics(value) {
      uni.navigateTo({
        url: "/pageD/logisticsProgress/logisticsProgress",
      });
    },

    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",
          });
        });
    },

    //获取时间，倒计时
    getCountdown(timer) {
      const nowTime = new Date().getTime(); //当前时间的毫秒数
      const appointTime = new Date(timer).getTime(); //创建订单时间的毫秒数
      const count = nowTime - appointTime; //当前时间到创建订单时间的毫秒数
      const loseEfficacyTime = this.loseEfficacy * 60 * 1000; //失效时间转换为毫秒

      //86400000  24小时
      if (count < loseEfficacyTime) {
        const currentTime = loseEfficacyTime - count;
        this.hours = Math.floor(currentTime / (1000 * 60 * 60)); //获取小时
        //获取分钟
        this.minute = Math.floor(
          (currentTime % (1000 * 60 * 60)) / (1000 * 60)
        );
      }
    },

    //获取订单信息
    getDetail() {
      uni.$u.http.get(`/api/order/read?id=${this.status}`).then((res) => {
        this.orderDetail = res;
        this.getCountdown(this.orderDetail.created_at);
      });
    },

    //获取配置信息
    getConfig() {
      uni.$u.http
        .get(`/api/config?module=basic&key=order_pay_termine`)
        .then((res) => {
          this.loseEfficacy = res;
        });
    },
  },
  onShow() {
    this.getConfig();
    this.getDetail();
  },
  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>