discounts-minapp/study/pay/orderPay.vue

<template>
  <view class="pay">
    <view class="state" v-if="info.goodsList[0].goodsState == 'WAIT_PAYMENT' && !isNotTime">
      等待支付，剩余<u-count-down :time="closeTime" format="mm:ss" @finish="finish"></u-count-down>
    </view>
    <view class="state" v-else>
      {{ info.goodsList[0] | filterType }}
    </view>

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

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

    <view class="pay-info">
      <view class="goods-info">
        <image class="goods-img"
          :src="info.goodsList[0].goodsInfo.goodsPath + '?x-oss-process=image/resize,h_164,w_164,m_fixed'" mode="">
        </image>
        <view class="info">
          <view class="goods-name">
            {{ info.goodsList[0].goodsInfo.goodsName }}
          </view>
          <view class="num">
            {{ info.goodsList[0].goodsInfo.goodsDescribe }}
          </view>
          <view class="priceColumn">
            <view class="price">
              <text class="unit">￥</text>{{ info.goodsList[0].goodsInfo.realPrice }}
            </view>
            <view class="goodsNum">
              x{{ reserve.persons.length || 1 }}
            </view>
          </view>
        </view>
      </view>

      <view class="setoff">
        <view class="text">
          出发时间
        </view>
        <view class="date" @click="openCalendar">
          {{ $u.timeFormat(new Date(reserve.reserveTime).getTime(), 'yyyy年mm月dd日') }}
        </view>
      </view>

      <view class="footer" v-if="info.goodsList[0].goodsState == 'WAIT_USE'" @click="toDetailStudy(info.orderNo)">
        <view class="slogan">
          研学在即，课程相信
        </view>
        <view class="action">
          立即学习
        </view>
      </view>
    </view>

    <view class="card-box" v-if="info.goodsList[0].goodsState == 'WAIT_USE'">
      <view class="title-top">
        <view class="title-text">
          券码信息
        </view>
      </view>
      <view class="code-box">
        <view class="qrcode">
          <uqrcode ref="uqrcode" :size="qrsize" type="2d" auto canvas-id="qrcode" :value="codeData" :loading="loading">
            <template v-slot:loading>
              <text style="color: black;">拼命加载中...</text>
            </template>
          </uqrcode>
        </view>
        <view class="coode">{{ codeData }}</view>
      </view>

    </view>


    <view class="card-box">
      <view class="title-top">
        <view class="title-text">
          预定人信息
        </view>
      </view>

      <view class="info border">
        <view class="label">
          姓名
        </view>
        <view class="value">
          {{ reserve.reserveName }}
        </view>
      </view>
      <view class="info">
        <view class="label">
          手机号
        </view>
        <view class="value">
          {{ reserve.reservePhone }}
        </view>
      </view>

    </view>


    <view class="card-box">
      <view class="title-top">
        <view class="title-text">
          出游人信息
        </view>
      </view>

      <template v-for="item in reserve.persons">
        <view class="info border">
          <view class="label">
            姓名
          </view>
          <view class="value">
            {{ item.userName }}
          </view>
        </view>
        <view class="info">
          <view class="label">
            手机号
          </view>
          <view class="value">
            {{ item.phone }}
          </view>
        </view>
      </template>
    </view>

    <view class="card-box">
      <view class="title-top">
        <view class="title-text">
          订单信息
        </view>
      </view>

      <view class="info ">
        <view class="label">
          订单编号
        </view>
        <view class="value">
          {{ info.orderNo }}
        </view>
      </view>
      <view class="info">
        <view class="label">
          付款方式
        </view>
        <view class="value">
          {{ info.payment | filterPay }}
        </view>
      </view>

      <view class="info ">
        <view class="label">
          下单时间
        </view>
        <view class="value">
          {{ $u.timeFormat(info.createTime, 'yyyy-mm-dd hh:MM:ss') }}
        </view>
      </view>
      <view class="info">
        <view class="label">
          支付时间
        </view>
        <view class="value">
          {{ payTime }}
        </view>
      </view>

    </view>

    <view class="card-box">
      <view class="title-top">
        <view class="title-text">
          交易信息
        </view>
      </view>

      <view class="info ">
        <view class="label">
          金额
        </view>
        <view class="value">
          ￥{{ info.totalAmount }}
        </view>
      </view>
      <view class="info">
        <view class="label">
          优惠券
        </view>
        <view class="value">
          -￥{{ info.discountAmount }}
        </view>
      </view>

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

    <view class="content apply-box" v-if="(info.goodsList[0].goodsState == 'WAIT_USE' ||
      info.goodsList[0].goodsState == 'USED') &&
      info.goodsList[0].refundLog.refund != 'REFUSAL_REFUND' &&
      isRefund() &&
      info.goodsList[0].jobFlowMap !== 'XiaoJu'" @click="apply">
      <view class="label">
        退款申请
      </view>
      <view class="value">
        如引发商品争议，可申请平台介入处理
      </view>
      <image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
    </view>

    <view class="content apply-box"
      v-if="info.goodsList[0].refundLog && info.goodsList[0].refundLog.refund == 'REFUSAL_REFUND'">
      <view class="title">
        已拒绝
      </view>
      <view class="value">
        拒绝理由：{{ info.goodsList[0].refundLog.conclusion }}
      </view>
    </view>


    <template>
      <view class="content refund-box"
        v-if="info.goodsList[0].goodsState == 'APPLY_REFUNDING' || (info.goodsList[0].refundLog && info.goodsList[0].refundLog.remark)">
        <view class="title">
          退款原因
        </view>

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


    <button type="default" :loading="btnLoading1"
      v-if="info.goodsList[0].refundLog && info.goodsList[0].refundLog.refund == 'REFUSAL_REFUND' && !info.goodsList[0].refundLog.platInter"
      class="pay-btn" @click="refundIntervene">申请介入处理</button>


    <view class="btn-box" v-if="info.goodsList[0].goodsState == 'WAIT_PAYMENT'">
      <button class="cancel-btn" @click="cancel" :loading="btnLoading">
        取消订单
      </button>
      <button class="btn" @click="pay" :loading="btnLoading">
        立即支付
      </button>
    </view>

  </view>
</template>

<script>
import { qrCode, getReserve } from '@/api/order.js'
import { payDetails, queryPayOrder, unRefund, refundIntervene } from '@/api/payment.js';
import { cancelOrder } from '@/api/refuel.js'
export default {
  data() {
    return {
      info: {
        goodsList: [
          {
            goodsState: '',
            refundLog: {
              refund: ''
            }
          }
        ]
      },
      reserve: {
        persons: [],
      },
      codeData: 'qrcode',
      show: false,
      loading: false,
      pageLoading: true,
      btnLoading: false,
      btnLoading1: false,
      oldBright: 0,
      isNotTime: false,
      qrsize: uni.upx2px(200)
    };
  },
  methods: {
    // 申请客服介入
    refundIntervene() {
      let that = this
      uni.showModal({
        title: '提示',
        content: '确认申请客服介入吗？',
        success: function (res) {
          if (res.confirm) {
            that.btnLoading1 = true
            refundIntervene(that.info.goodsList[0].id).then(res => {
              that.btnLoading1 = false
              if (res.state == 'Success') {
                that.payDetails(that.info.orderNo)
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });

    },
    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
      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
      // })
    },
    handleCall() {
      uni.makePhoneCall({
        phoneNumber: '4000016553'//仅为示例
      });
    },
    apply() {
      let that = this
      uni.navigateTo({
        url: '/my/order/refund',
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('orderInfo', that.info)
        }
      })

    },
    // 获取订单详情
    payDetails(orderNo) {
      payDetails(orderNo).then(res => {
        this.pageLoading = false
        this.info = res.content
        if (this.info.goodsList[0].jobFlowMap == 'P802') {
          this.isVisual = true
        }
        if (!this.info.goodsList[0].refundLog) {
          this.info.goodsList[0].refundLog = {}
        }
        if (this.info.goodsList[0].goodsState == 'WAIT_USE') {

          qrCode(this.info.goodsList[0].id).then(res => {
            this.loading = false
            if (res.state == 'Success') {
              this.codeData = res.content
            }
          })
        }

      })

      getReserve(orderNo).then(res => {
        if (res.state == 'Success') {
          this.reserve = res.content
          if (!this.reserve.persons) {
            this.reserve.persons = []
          }
        }
      })
    },
    // 取消支付
    cancel() {
      uni.showLoading({
        title: '取消中'
      })


      let obj = {}
      try {
        obj = JSON.parse(this.info.goodsList[0].extend)
      } catch (error) {
        obj = {}
      }

      cancelOrder(obj).then(res => {
        if (res.state == 'Success') {
          uni.showToast({
            title: '取消成功',
            icon: 'success'
          })
          this.payDetails(this.info.orderNo)
        }
      })
    },
    // 支付
    pay() {
      let that = this
      if (this.info.goodsList[0].jobFlowMap == 'XiaoJu') {
        let { xjOrderId, tradeId } = JSON.parse(this.info.goodsList[0].extend)
        uni.navigateToMiniProgram({
          appId: "wx0d252f6ed9755862", // 滴滴加油小程序appId
          path: `packageA/pages/open-energy-pay/index?orderId=${xjOrderId}&tradeId=${tradeId}`, // 滴滴加油收银台页面地址，需要拼接orderId和tradeId
          envVersion: 'release', // 固定release
        })
      } else {
        if (this.btnLoading) return
        this.btnLoading = true
        uni.showLoading({
          title: '支付中'
        })
        let miniPayRequest = JSON.parse(this.info.payment.miniPayRequest)
        uni.requestPayment({
          "provider": "wxpay",
          "orderInfo": miniPayRequest,
          "appid": miniPayRequest.appId, // 微信开放平台 - 应用 - 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: '取消中'
      })
      console.log(this.info.goodsList[0])
      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'
          })
        }
      })
    },
    toDetailStudy(orderNo) {
      uni.navigateTo({
        url: '/pages/activity/detail?orderNo=' + orderNo
      })
    }
  },
  filters: {
    filterType: function (val) {
      if (val.refundLog && val.refundLog.refund == 'REFUSAL_REFUND' && !val.change) {
        return '拒绝退款'
      }
      else if (val.goodsState == 'APPLY_REFUNDING') {
        return '退款审核中'
      } else if (val.goodsState == 'CLOSE') {
        return '关闭订单'
      } else if (val.goodsState == 'REFUNDED') {
        return '已退款'
      } else if (val.goodsState == 'REFUSAL_REFUND') {
        return '拒绝退款'
      } else if (val.goodsState == 'APPLY_REFUNDING') {
        return '退款中'
      } else if (val.goodsState == 'USED') {
        return '订单已完成'
      } else if (val.goodsState == 'WAIT_PAYMENT') {
        return '待付款'
      } else if (val.goodsState == 'WAIT_USE') {
        return '待使用'
      } else {
        return ''
      }
    },
    filterPay(val) {
      if (val) {
        if (val.paymentWay == 'wx.unifiedOrder') {
          return '微信支付'
        } else if (val.paymentWay == 'trade.create') {
          return '支付宝支付'
        } else if (val.paymentWay == 'uac.miniOrder') {
          return '云闪付支付'
        }
      }
      else {
        return '-'
      }
    }
  },
  computed: {
    closeTime() {
      return (this.info.createTime + 1000 * 60 * 30) - new Date().getTime()
    },
    payTime() {
      const goodsList = this.info.goodsList;
      if (goodsList && goodsList[0] && goodsList[0].extend) {
        let extend;
        try {
          extend = JSON.parse(goodsList[0].extend);
        } catch (e) {
          // 如果解析JSON失败，返回默认值 '-'
          return '-';
        }
        if (!extend.hasOwnProperty('account')) {
          if (extend.hasOwnProperty('notifyOrderInfo')) {
            return extend.notifyOrderInfo.payTime;
          } else {
            return '-';
          }
        }
      }
      const payment = this.info.payment;
      if (payment && payment.paymentTime) {
        return uni.$u.timeFormat(payment.paymentTime, 'yyyy-mm-dd hh:MM:ss');
      } else {
        return '-';
      }
    }
  },
  onLoad(options) {
    this.info.orderNo = options.id
  },
  onShow() {
    this.pageLoading = true
    this.payDetails(this.info.orderNo)
  },
};
</script>

<style lang="scss" scoped>
.pay {
  background: #F9F9F9;
  min-height: 100vh;
  padding: 20rpx;

  .state {
    display: flex;
    color: #222222;
    font-size: 32rpx;
    font-weight: bold;
    margin: 8rpx 0 28rpx 0;
  }

  .pay-info {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx;

    .goods-info {
      display: flex;
      margin-bottom: 26rpx;

      .goods-img {
        width: 164rpx;
        height: 164rpx;
        border-radius: 16rpx;
      }

      .info {
        margin-left: 28rpx;
        flex: 1;

        .goods-name {
          font-weight: bold;
          color: #181818;
          font-size: 32rpx;
          width: 100%;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 这里是超出几行省略 */
        }

        .num {
          color: #999999;
          font-size: 24rpx;
          margin-top: 16rpx;
        }

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

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

            .unit {
              font-size: 20rpx;
            }
          }

          .goodsNum {
            font-size: 24rpx;
            color: #AAAAAA;
          }

        }

      }
    }

    .setoff {
      border-bottom: 1px solid #F0F0F0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      padding-bottom: 24rpx;

      .text {
        color: #222222;
      }

      .date {
        color: #AAAAAA;
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      background: #F9F9F9;
      border-radius: 16rpx;
      padding: 24rpx;

      .slogan,
      .action {
        font-size: 24rpx;
        color: #AAAAAA;
      }
    }
  }

  .card-box {
    padding: 24rpx;
    background: #FFFFFF;
    margin: 20rpx 0;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .title-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

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

      // margin-bottom: 24rpx;
    }

    .border {
      border-top: 1px solid #F0F0F0;
      margin-top: 20rpx;
    }

    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20rpx;

      .label {
        color: #AAAAAA;

        font-size: 24rpx;
      }

      .value {
        color: #222222;
        font-size: 24rpx;
      }
    }

    .code-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .qrcode {
        width: 200rpx;
        height: 200rpx;
      }

      .coode {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #222222;
      }
    }
  }

  .btn-box {
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10rpx 24rpx env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1rpx solid #EEEEEE;

    .cancel-btn {
      width: 344rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
      font-weight: 600;
      font-size: 28rpx;
      border: 1px solid #AAAAAA;
      color: #AAAAAA;
      margin: 0;
    }

    .btn {
      width: 344rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #3B83FF;
      border-radius: 40rpx;
      font-weight: 600;
      font-size: 28rpx;
      color: #FFFFFF;
      margin: 0;
      margin-left: 20rpx;
    }
  }

  .pay-btn {
    background: #3B83FF;
    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;
    }
  }

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

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

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

    margin-bottom: 20rpx;
  }


}
</style>