jsm-mall-h5-front/src/components/zhifutanchuan.vue

<template>
  <view :style="{ top: 0 }" class="z-popup">
    <view class="zhuangtaitubiao" v-if="[1].includes(type)">
      <image src="@/static/common/jiazai.gif" mode="aspectFill" style="width: 240rpx; height: 240rpx"></image>
      <view class="textclass"> 支付中请耐心等待 </view>
    </view>
    <view class="zhuangtaitubiao" v-if="[2].includes(type)">
      <view class="icon">
        <text class="iconfont icon-chenggong true" style="font-size: 100rpx; color: greenyellow"></text>
      </view>
      <view class="textclass"> 支付成功 </view>
      <view class="textclass" style="margin-top: 20rpx"> ￥{{ 133 }} </view>
    </view>
    <view class="zhuangtaitubiao" v-if="[3].includes(type)">
      <view class="icon">
        <text class="iconfont icon-shibai false" style="font-size: 100rpx; color: red"></text>
      </view>
      <view class="textclass"> 支付失败 </view>
      <view class="textclass" style="margin-top: 20rpx"> ￥{{ 133 }} </view>
    </view>

    <view class="zhuangtaitubiao" style="justify-content: flex-start !important" v-if="[2].includes(type)">
      <view class="title">支付信息</view>
      <view class="row">
        <view class="label">支付单号：</view>
        <view class="value">{{ orderId }}</view>
      </view>
      <view class="row">
        <view class="label">支付金额：</view>
        <view class="price">¥{{ detail.totalAmount || '' }}</view>
      </view>
      <view class="row">
        <view class="label">支付时间：</view>
        <view class="value">{{ detail.payTime || '' }}</view>
      </view>
      <view class="row">
        <view class="label">支付结果：</view>
        <view class="value">成功</view>
      </view>
      <view class="row">
        <view class="label">支付方式：</view>
        <view class="value">{{ detail.payType | payTypeFilter }}</view>
      </view>
    </view>

    <view class="anniukuang" v-if="[1].includes(type)">
      <u-button text="取消" @click="back"></u-button>
    </view>
    <view class="anniukuang" v-if="[1, 3].includes(type)">
      <u-button type="primary" text="重新扫描" @click="scan"></u-button>
    </view>
    <view class="anniukuang" v-if="[2].includes(type)">
      <u-button type="primary" text="返回订单" @click="back"></u-button>
    </view>
    <view class="anniukuang" v-if="[3].includes(type)">
      <u-button type="primary" text="查询支付结果" @click="KeepWaiting"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    orderId: {
      type: [String, Number],
      default: ''
    },
    state: {
      type: [String, Number],
      default: 3
    }
  },
  filters: {
    payTypeFilter(val) {
      const MAP = {
        WECHAT: '微信支付',
        LINE: '线下支付'
      }
      return MAP[val]
    }
  },
  data() {
    return {
      type: this.state,
      miao: 30
    }
  },
  watch: {
    state() {
      if (this.state == 2) {
        if (this.timeId) {
          clearTimeout(this.timeId)
        }
      }
      this.type = this.state
    },
    miao: {
      handler(newVal, oldVal) {
        if (newVal > 0) {
          if (this.timeId) {
            clearTimeout(this.timeId)
          }
          this.timeId = setTimeout(() => {
            this.miao--
          }, 1000)
        } else {
          this.type = 3
        }
      },
      immediate: true
    }
  },
  methods: {
    scan() {
      if (this.timeId) {
        clearTimeout(this.timeId)
      }
      this.$emit('scan')
    },
    KeepWaiting() {
      this.type = 1
      this.miao = 30
    },
    back() {
      if (this.timeId) {
        clearTimeout(this.timeId)
      }
      this.$emit('back')
    }
  }
}
</script>

<style scoped lang="scss">
.z-popup {
  position: fixed;
  background: #efefef;
  width: 100%;
  height: 100vh;
  z-index: 1000000000;
  left: 0;
  right: 0;
  transition: top 0.5s;
  box-sizing: border-box;
  padding: 40rpx;
  .zhuangtaitubiao {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 40rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .textclass {
      font-size: 42rpx;
      font-weight: 500;
    }
  }
  .anniukuang {
    width: 100%;
    margin-bottom: 20rpx;
  }
  .title {
    font-size: 32rpx;
    font-weight: 500;
    align-items: left;
  }
  .row {
    display: flex;
    align-items: left;
    margin-top: 30rpx;
    width: 100%;
    .label {
      color: $sec-font;
    }
    .price {
      color: $minor-color;
      font-weight: 500;
    }
  }
}
</style>