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="HH:mm:ss"
            @finish="finish"
          ></u-count-down>
        </view>
        <view class="status" v-else>
          {{ info.goodsList[0].goodsState | filterType }}
        </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 shop-box"  v-if="!isVisual">
				<view class="shop-name">
					{{info.shopInfo.shopName}}
				</view>
				<view class="address">
					{{info.shopInfo.address}}
				</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="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.paymentWay || filterPay || "未支付" }}
        </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>

    <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: "",
        },
      },
      isNotTime: false,
    };
  },
  watch: {
    // isNotTime(val) {
    // 	if(this.isNotTime){
    // 		this.payDetails(this.info.orderNo)
    // 	}
    // }
  },
  filters: {
    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 == "WAIT_USE") {
        return "待使用";
      }
    },
    filterPay(val) {
      if (val == "wx.unifiedOrder") {
        return "微信支付";
      } else if (val == "trade.create") {
        return "支付宝支付";
      } else if (val == "uac.miniOrder") {
        return "云闪付支付";
      } else {
        return "-";
      }
    },
  },
  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: {
    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;
        try {
          let extend = JSON.parse(this.info.extend);
          if (extend.account) {
            this.isVisual = true;
          }
        } catch (e) {
          //TODO handle the exception
        }

        // 跳转了但是没支付
        if(this.isJumped && this.info.goodsList[0].goodsState == "WAIT_PAYMENT"){
          this.btnLoading = false;
          uni.showToast({
            title: "支付取消",
            icon: "warning",
          });
        }else{

        }
      });
    },
    // 支付
    pay() {
      if (this.btnLoading) return;
      this.btnLoading = true;
      uni.showLoading({
        title: "支付中",
      });
      let that = this;
      let miniPayRequest = this.info.payment.miniPayRequest;
			// 打开慧研学
      uni.navigateToMiniProgram({
        appId: "wx3be1d6d84d46cdf7",
        path: "pages/index/index",
        success: (res) => {
          // 打开成功
          // console.log("打开成功", res);
          this.isJumped = true;
        },
        fail: (err) => {
          // console.log(err);
					uni.hideLoading();
					uni.showToast({
							title: "支付失败",
							icon: "none",
						});
						that.btnLoading = false
        },
      });

      // uni.requestPayment({
      // 	"provider": "wxpay",
      // 	"orderInfo": miniPayRequest,
      // 	"appid": "wxbc64403830bb13c5", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
      // 	"paySign": miniPayRequest.paySign,
      // 	"nonceStr": miniPayRequest.nonceStr, // 随机字符串
      // 	"package": miniPayRequest.package, // 固定值
      // 	// "prepayid":  miniPayRequest.package, // 统一下单订单号
      // 	"timeStamp": miniPayRequest.timeStamp, // 时间戳（单位：秒）
      // 	"signType": miniPayRequest.signType, //签名算法
      // 	success(msg) {
      // 		console.log('msg', msg);
      // 		queryPayOrder(that.info.orderNo).then(res1 => {
      // 			if (res1.state == 'Success') {
      // 				uni.hideLoading()
      // 				uni.showToast({
      // 					title: '支付成功',
      // 					icon: 'success'
      // 				})
      // 				that.btnLoading = false
      // 				that.payDetails(that.info.orderNo)
      // 			}
      // 		})
      // 	},
      // 	fail(e) {
      // 		that.btnLoading = false
      // 		uni.hideLoading()
      // 		uni.showToast({
      // 			title: '取消支付',
      // 			icon: 'fail'
      // 		})
      // 		// 取消支付后，获取支付信息以备再次支付
      // 		that.payDetails(that.info.orderNo)
      // 		console.log('err', e,this);
      // 	}
      // })
    },
    // 取消退款申请
    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;
    }
  }

  .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>