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="pay-info">
      <view class="goods-info">
        <image class="goods-img"
          src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/School.png/5.png"
          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">
          {{ reserve.reserveTime }}
        </view>
      </view>
    </view>

    <view class="card-box"
      v-if="info.goodsList[0].jobFlowMap != 'P802' && info.goodsList[0].goodsState == 'WAIT_USE' && info.goodsList[0].goodsName != '二维码支付'">
      <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" style="margin-bottom: 160rpx;">
      <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="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: []
      },
      reserve: {
        persons: [],
      },
      codeData: '123',
      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
      if (this.info.goodsList[0].jobFlowMap == 'XiaoJu') {
        uni.navigateTo({
          url: './webView'
        })
      } else {
        uni.navigateTo({
          url: './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].jobFlowMap != 'P802' && this.info.goodsList[0].goodsState == 'WAIT_USE' && this.info.goodsList[0].goodsName != '二维码支付') {

          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
        }
      })
    },
    // 取消支付
    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'
          })
        }
      })
    }
  },
  filters: {
    filterType: function (val) {
      if (val.refundLog && val.refundLog.refund == 'REFUSAL_REFUND' && !val.change) {
        return '拒绝退款'
      }
      else if (val.goodsState == 'APPLY_REFUND') {
        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() {
      if (this.info.goodsList[0].extend && !JSON.parse(this.info.goodsList[0].extend).hasOwnProperty('account')) {
        if (JSON.parse(this.info.goodsList[0].extend).hasOwnProperty('notifyOrderInfo')) {
          return JSON.parse(this.info.goodsList[0].extend).notifyOrderInfo.payTime
        } else {
          return '-'
        }
      } else {
        if (this.info.payment && this.info.payment.paymentTime) {
          return uni.$u.timeFormat(this.info.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-top: 1px solid #F0F0F0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      padding-top: 24rpx;

      .text {
        color: #222222;
      }

      .date {
        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;
    }
  }
}
</style>