discounts-minapp/my/order/detail.vue

<template>
  <view class="order-detail">
    <view class="status-box">
      <view class="text-box">
        <view class="status" v-if="info.goodsList[0].goodsState == 'WAIT_PAYMENT' && !isNotTime">
          等待支付，剩余<u-count-down :time="closeTime" format="mm:ss" @finish="finish"></u-count-down>
        </view>
        <view 
          v-else
          class="status">
          {{ filterType(info.goodsList[0].goodsState) || "订单错误" }}
        </view>
      </view>
    </view>

    <view class="content progress" v-if="
      info.goodsList[0].goodsState == 'APPLY_REFUND' ||
      info.goodsList[0].goodsState == 'REFUNDED'
    " @click="refundDetail">
      <view class="progress-title"> 退款进度 </view>

      <view class="progress-desc"> 查看退款详情 </view>
    </view>


    <view class="content info">
      <view class="order-info">
        <image class="icon" :src="info.goodsList[0].goodsInfo.goodsPath" mode=""></image>
        <view class="shop-info">
          <view class="title">
            {{ info.goodsList[0].goodsInfo.goodsName }}
          </view>
          <view class="goods-desc">
            {{ info.goodsList[0].goodsInfo.goodsDescribe }}
          </view>
          <view class="price-box">
            <view class="price">
              ￥{{ info.goodsList[0].goodsInfo.realPrice }}
            </view>
          </view>

          <!-- 有extend并且不是虚拟商品 -->
          <!-- <view class="start-time" v-if="info.extend&&!isVisual">
							出发时间：{{info.extend}}
						</view> -->
        </view>
      </view>
    </view>


    <view class="input-box-address" @click="toMap()">
      <view class="label"> 到店自取地址 </view>
      <view class="value">
        <!-- {{ info.address }} -->
        印象贵大文创店
      </view>
      <view class="label"> 贵州大学西校区西一区体育场楼下</view>
    </view>


    <view class="content code-box" v-if="
      info.goodsList[0].goodsState == 'WAIT_USE' &&
      info.goodsList[0].goodsName != '二维码支付'
    ">
      <view class="left">
        <view class="title"> 券码信息 </view>
        <view class="codeNum"> </view>
      </view>
      <view class="code-btn" @click="checkCode">
        查看券码
        <image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
      </view>
    </view>
    <view class="content" v-if="info.goodsList[0].goodsState == 'USED'">
      <view class="title"> 消费记录 </view>

      <view class="item">
        <view class="label"> 消费时间 </view>
        <view class="value">
          {{
            $u.timeFormat(
              info.goodsList[0].verifyModel.checkTime,
              "yyyy-mm-dd hh:MM:ss"
            )
          }}
        </view>
      </view>
      <view class="item">
        <view class="label"> 消费门店 </view>
        <view class="value">
          {{ info.goodsList[0].verifyModel.shopName }}
        </view>
      </view>
    </view>

    <view class="content">
      <view class="title"> 订单信息 </view>
      <view class="item">
        <view class="label"> 订单编号 </view>
        <view class="value">
          {{ info.orderNo }}
        </view>
      </view>

      <view class="item">
        <view class="label"> 付款方式 </view>
        <view class="value">
          {{ info.payment.pay ? filterPay(info.payment.paymentWay) : "未支付" }}
        </view>
      </view>
      <view class="item">
        <view class="label"> 下单时间 </view>
        <view class="value">
          {{
            $u.timeFormat(info.createTime, "yyyy-mm-dd hh:MM:ss") || "未支付"
          }}
        </view>
      </view>

      <view class="item" v-if="
        info.goodsList[0].goodsState != 'WAIT_PAYMENT' &&
        info.goodsList[0].goodsState != 'CLOSE'
      ">
        <view class="label"> 支付时间 </view>
        <view class="value">
          {{ $u.timeFormat(info.payment.paymentTime, "yyyy-mm-dd hh:MM:ss") }}
        </view>
      </view>

      <view class="item">
        <view class="label" style="word-break: keep-all; margin-right: 20rpx;"> 订单备注 </view>
        <view class="value" style="word-break: break-word;">
          {{
            info.extend.remark || "无"
          }}
        </view>
      </view>
    </view>

    <view class="content">
      <view class="title"> 交易信息 </view>

      <view class="item">
        <view class="label"> 商品金额 </view>
        <view class="value black">
          ￥{{ info.goodsList[0].goodsInfo.realPrice }}
        </view>
      </view>

      <view class="item">
        <view class="label"> 优惠券 </view>
        <view class="value red"> -￥{{ info.discountAmount }} </view>
      </view>

      <view class="item">
        <view class="label"> 合计 </view>
        <view class="value">
          <text class="red fs28">￥{{ info.payAmount }}</text>
        </view>
      </view>
    </view>

    <view class="input-box" v-if="isVisual">
      <view class="label"> 充值账号 </view>
      <view class="value">
        {{ JSON.parse(info.extend).account }}
      </view>
    </view>

    <template v-if="info.goodsList[0].goodsState == 'APPLY_REFUND'">
      <view class="content refund-box">
        <view class="title"> 退款原因 </view>

        <view class="refund-msg">
          {{ info.goodsList[0].refundLog.remark }}
        </view>
      </view>
      <button type="default" :loading="btnLoading" v-if="!info.payment.transferAll" class="pay-btn"
        @click="cancelReply">
        取消退款
      </button>
    </template>

    <button type="default" :loading="btnLoading" class="pay-btn" v-if="info.goodsList[0].goodsState == 'WAIT_PAYMENT'"
      @click="pay">
      立即支付
    </button>
    <view class="content apply-box" v-else-if="
      (info.goodsList[0].goodsState == 'WAIT_USE' ||
        info.goodsList[0].goodsState == 'USED') &&
      isRefund()
    " @click="apply">
      <view class="label"> 退款申请 </view>
      <view class="value"> 如引发商品争议，可申请平台介入处理 </view>
      <image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
    </view>

    <!-- 二维码 -->
    <u-overlay :show="show" v-if="show" :opacity="0.6">
      <view class="wrap" @click.stop="close">
        <uqrcode ref="uqrcode" type="2d" auto canvas-id="qrcode" :value="codeData" :loading="loading"
          :options="{ margin: 20 }">
          <template v-slot:loading>
            <text style="color: black">拼命加载中...</text>
          </template>
        </uqrcode>
      </view>
    </u-overlay>
  </view>
</template>

<script>
import { qrCode } from "@/api/order.js";
import { payDetails, queryPayOrder, unRefund } from "@/api/payment.js";
export default {
  data() {
    return {
      isVisual: false, //是否是虚拟商品
      codeData: "123",
      show: false,
      isJumped: false,
      loading: false,
      btnLoading: false,
      oldBright: 0,
      info: {
        goodsList: [{ goodsState: "" }],
        payment: {
          paymentWay: "",
          pay: false
        },
        extend: "",
      },
      isNotTime: false,
    };
  },
  watch: {
    // isNotTime(val) {
    // 	if(this.isNotTime){
    // 		this.payDetails(this.info.orderNo)
    // 	}
    // }
  },
  filters: {

  },
  computed: {
    closeTime() {
      // if((this.info.createTime + 1000*60*15) - new Date().getTime()){
      // 	this.isNotTime = false
      // }else{
      // 	this.isNotTime = true
      // }
      return (this.info.createTime + 1000 * 60 * 30) - new Date().getTime()
    },
  },
  methods: {
    filterType: function (val) {
      if (val == "APPLY_REFUND") {
        return "退款审核中";
      } else if (val == "CLOSE") {
        return "关闭订单";
      } else if (val == "REFUNDED") {
        return "已退款";
      } else if (val == "REFUSAL_REFUND") {
        return "拒绝退款";
      } else if (val == "USED") {
        return "订单已完成";
      } else if (val == "WAIT_PAYMENT") {
        return "待付款";
      } else if (val == "HAVE_PAID") {
        return "待使用";
      } else if (val == "WAIT_USE") {
        return "待使用";
      }
    },
    filterPay(val) {
      if (val == "wx.unifiedOrder") {
        return "微信支付";
      } else if (val == "trade.create") {
        return "支付宝支付";
      } else if (val == "uac.miniOrder") {
        return "云闪付支付";
      } else if (val == "wx.miniPreOrder") {
        return "银联支付"
      } else {
        return "-";
      }
    },
    isRefund() {
      if (!this.info.goodsList[0].verifyModel) {
        //没核销
        return true;
      } else if (
        this.info.goodsList[0].verifyModel &&
        new Date().getTime() <
        this.info.goodsList[0].verifyModel.checkTime + 1000 * 60 * 60 * 48
      ) {
        // 已核销 并且没超过48小时
        return true;
      } else {
        return false;
      }
    },
    finish() {
      this.isNotTime = true;
      console.log(222222, this.isNotTime);
      this.payDetails(this.info.orderNo);
    },
    refundDetail() {
      uni.navigateTo({
        url: `/my/order/refundDetail?id=${this.info.orderNo}`,
      });
    },
    checkCode() {
      this.codeData = "";
      this.$nextTick(() => {
        this.show = true;
        this.loading = true;
        let that = this;
        // uni.getScreenBrightness({
        // 	success(res) {
        // 		// 获取用户手机亮度 保存起来
        // 		that.oldBright = res.value
        // 		setTimeout(()=>{
        // 			uni.setScreenBrightness({
        // 				value:1
        // 			})
        // 		},200)
        // 	}
        // })
        qrCode(this.info.goodsList[0].id).then((res) => {
          this.loading = false;
          if (res.state == "Success") {
            this.codeData = res.content;
          }
        });
      });
    },
    close() {
      this.show = false;
      // uni.setScreenBrightness({
      // 	value:this.oldBright
      // })
    },
    apply() {
      let that = this;
      uni.navigateTo({
        url: "./refund",
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit("orderInfo", that.info);
        },
      });
    },
    // 获取订单详情
    payDetails(orderNo) {
      payDetails(orderNo).then((res) => {
        this.info = res.content;
        if (!this.info.payment) {
          this.info.payment = {
            paymentWay: "",
            pay: false
          }
        }
        queryPayOrder(this.info.orderNo).then(res => {
          // console.log('res111',res);
          if (res.state == "Fail") {
            uni.showToast({
              title: "支付信息获取失败,请稍后再试.",
              icon: "none",
            });
          }
        })
        this.info.extend = JSON.parse(this.info.goodsList[0].extend);
        if (this.isJumped) {
          this.isJumped = false;
          const that = this;
          let checkTime = 0;
          uni.showLoading({
            title: "支付中",
          });
          const checkOrder = setInterval(() => {
            queryPayOrder(that.info.orderNo)
              .then((res1) => {
                // 支付成功
                if (res1.content.status == "TRADE_SUCCESS") {
                  that.payDetails(that.info.orderNo);
                  uni.showToast({
                    title: "支付成功！",
                    icon: "none",
                  });
                  clearInterval(checkOrder)
                  uni.hideLoading();
                  that.btnLoading = false;
                } else {
                  checkTime++;
                }
                if (checkTime > 5) {
                  clearInterval(checkOrder)
                  that.btnLoading = false;
                  uni.showToast({
                    title: "订单查询失败",
                    icon: "none",
                  });
                  uni.hideLoading();
                }
              }).catch(() => {
                if (checkOrder) {
                  clearInterval(checkOrder)
                  checkOrder = null
                }
                that.btnLoading = false;
                uni.showToast({
                  title: "订单查询失败",
                  icon: "none",
                });
                uni.hideLoading();
              })
          }, 1000);
        }
      });
    },
    toMap() {
      uni.openLocation({
        latitude: 26.4401,
        longitude: 106.664,
        name: "印象贵大文创店",
        address: "贵州大学西校区西一区体育场楼下",
      });
    },
    // 支付
    pay() {
      if (this.btnLoading) return;
      this.btnLoading = true;
      uni.showLoading({
        title: "支付中",
      });
      let that = this;
      let miniPayRequest = this.info.payment.miniPayRequest;
      miniPayRequest = JSON.parse(miniPayRequest);
      let query = encodeURIComponent(JSON.stringify({
        sign: miniPayRequest.sign,
        prepayid: miniPayRequest.prepayid,
      }))

      // 打开银联小程序
      uni.navigateToMiniProgram({
        appId: miniPayRequest.miniuser,
        path: `${miniPayRequest.minipath}?appPayRequest=${query}`,
        success: (res) => {
          // 打开成功
          this.isJumped = true;
        },
        fail: (err) => {
          // console.log(err);
          uni.hideLoading();
          uni.showToast({
            title: "取消支付",
            icon: "none",
          });
          that.btnLoading = false
        },
      });

    },
    // 取消退款申请
    cancelReply() {
      if (this.btnLoading) return;
      this.btnLoading = true;
      uni.showLoading({
        title: "取消中",
      });
      unRefund({ id: this.info.goodsList[0].id }).then((res) => {
        this.btnLoading = false;
        uni.hideLoading();

        if (res.state == "Success") {
          this.payDetails(this.info.orderNo);
          uni.showToast({
            title: "取消成功",
            icon: "success",
          });
        }
      });
    },
  },
  onReady() { },
  onLoad(options) {
    this.info.orderNo = options.id;
  },
  onShow() {
    this.payDetails(this.info.orderNo);
  },
  created() {
    // this.info = JSON.parse(uni.getStorageSync('order'))
  },
};
</script>

<style lang="scss">
.order-detail {
  background: #f9f9f9;
  min-height: 100vh;

  // padding-bottom: 100rpx;
  .status-box {
    padding: 24rpx 24rpx 4rpx;
    display: flex;
    justify-content: space-between;

    .text-box {
      color: #181818;

      .status {
        font-weight: bold;
        font-size: 32rpx;
        display: flex;

        .u-count-down__text {
          color: #ff4d3a !important;
        }
      }

      .notice {
        font-size: 24rpx;
        margin-top: 20rpx;
      }
    }
  }

  .progress {
    .progress-title {
      font-weight: 600;
      font-size: 32rpx;
      color: #181818;
    }

    .progress-desc {
      font-weight: 300;
      font-size: 24rpx;
      color: #aaaaaa;
      margin-top: 15rpx;
    }
  }

  .shop-box {
    width: 690rpx;
    // margin: 0 30rpx;
    // padding: 24rpx 24rpx 30rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-top: -30rpx;
    box-sizing: border-box;

    .shop-name {
      font-weight: 600;
      font-size: 32rpx;
      color: #181818;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .address {
      font-weight: 300;
      font-size: 24rpx;
      color: #aaaaaa;
      margin-top: 20rpx;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .black {
    color: #222222 !important;
  }

  .red {
    color: red !important;
  }

  .fs28 {
    font-size: 28rpx !important;
    font-weight: bold;
  }

  .code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      .title {
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
      }

      .codeNum {
        font-weight: 300;
        font-size: 24rpx;
        color: #aaaaaa;
        margin-top: 15rpx;
      }
    }

    .code-btn {
      display: flex;
      align-items: center;
      font-weight: 300;
      font-size: 24rpx;
      color: #aaaaaa;

      .jiantou {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .input-box {
    margin: 20rpx 30rpx;
    padding: 28rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .label {
      color: #222;
      font-size: 28rpx;
    }

    .value {
      font-size: 28rpx;
      color: #aaaaaa;
    }
  }

  .input-box-address {
    margin: 20rpx 30rpx;
    padding: 28rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;

    .value {
      color: #222;
      font-size: 28rpx;
    }

    .label {
      font-size: 28rpx;
      margin: 10rpx 0;
      color: #aaaaaa;
    }
  }


  .content {
    margin: 20rpx 30rpx;
    padding: 28rpx 24rpx;
    border-radius: 16rpx;
    background: #fff;

    .title {
      font-weight: 600;
      font-size: 28rpx;
      color: #222222;
    }

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 28rpx;

      .label {
        color: #222222;
        font-size: 28rpx;
      }

      .value {
        color: #999999;
        font-size: 28rpx;
      }
    }
  }

  .pay-btn {
    background: $uni-color-primary;
    width: 688rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 46rpx;
    color: #fff;
    margin-top: 50rpx;
  }

  .refund-box {
    .refund-msg {
      font-weight: 300;
      font-size: 24rpx;
      color: #222222;
      margin-top: 15rpx;
      line-height: 40rpx;
    }
  }

  .apply-box {
    position: relative;

    .label {
      font-weight: 600;
      font-size: 28rpx;
      color: #222222;
    }

    .value {
      color: #999999;
      font-size: 24rpx;
      margin-top: 15rpx;
    }

    .jiantou {
      position: absolute;
      top: 50%;
      right: 24rpx;
      transform: translateY(-50%);
      width: 24rpx;
      height: 24rpx;
    }
  }

  .info {
    .order-info {
      display: flex;

      .icon {
        width: 164rpx;
        height: 164rpx;
        border-radius: 16rpx;
        flex-shrink: 0;
      }

      .shop-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 24rpx;
        flex: 1;
        box-sizing: border-box;

        .title {
          color: #181818;
          font-size: 28rpx;
          width: 450rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .price-box {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .price {
            color: #181818;
            font-size: 32rpx;
            font-weight: bold;
          }
        }

        .start-time,
        .goods-desc {
          font-size: 24rpx;
          color: #aaaaaa;
          width: 450rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
  }
}
</style>