mobile_uniapp_mmhy/pages/PaySuccess/PaySuccess.vue

<template>
  <view class="PayFail">
    <view class="main-view">
      <view class="flex-view">
        <image class="icon" src="../../static/img/image44.png" />
        <view class="text1">支付失败，请重新支付</view>
      </view>
      <view class="text2">因网络等原因可能导致订单状态未及时更新</view>
      <view class="button1" @click="show()">查询订单最新状态</view>

      <view class="text-view">
        <view class="icon-view" />
        <view>客服电话:</view>
        <view class="phone">
          <a :href="'tel:' + configAll.service_mobile"
            >{{ configAll.service_mobile }}(点击拨打)</a
          ></view
        >
      </view>
      <view class="text-view">
        <view class="icon-view" />
        <view>客服工作时间:</view>
        <view>({{configAll.service_work_time}})</view>
      </view>
      <view class="text-view">
        <view class="icon-view" />
        <view
          >如有疑问，可关注微信公众号:{{ configAll.wxp_name }}与我们联系</view
        >
      </view>

      <view class="flex-view">
        <view class="wx-name">微信公众号:{{ configAll.wxp_name }}</view>
        <view class="button" @tap="copyNumHandle()">复制</view>
      </view>

      <img class="wx-image" :src="configAll.wxp_qrcode" />

      <view class="wx-text">长按上方二维码关注公众号，以便查询快递信息</view>

      <view class="button-view">
        <view class="button-1" @click="index()">继续选号</view>
        <view class="button-2" @click="payment()">查询订单</view>
        <view class="button-2" @click="payment()">继续支付</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      showData: {},
    };
  },
  onLoad(option) {
    if (option.id) {
      this.id = option.id;
      this.show();
    }
  },
  methods: {
    // 号码详情界面
    show() {
      this.$http.order_detail({ id: this.id }).then((res) => {
        if (res.data.code == 1) {
          console.log(res.data.data);
          this.showData = res.data.data;
          if (this.showData.status != 0) {
            uni.navigateTo({
              url: '/pageA/orderSuccess/orderSuccess?id=' + this.id,
            });
          }
        }
      });
    },
    // 复制
    copyNumHandle() {
      let this_ = this;
      uni.setClipboardData({
        data: this.configAll.wxp_name, // data的值为你要复制的内容
        success: (res) => {
          uni.showToast({
            title: '复制成功',
            duration: 1000,
            icon: 'none',
          });
        },
      });
    },
	index(){
		uni.reLaunch({
		  url: '/pages/index/index',
		})
	},
	payment(){
		uni.navigateTo({
		  url: '/pages/payment/payment?id='+ this.id,
		})
	}
  },
};
</script>

<style lang="scss">
.PayFail {
  .main-view {
    display: flex;
    flex-direction: column;
    align-items: center;

    .flex-view {
      display: flex;
      align-items: center;
      margin-top: 70rpx;

      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }

      .text1 {
        font-size: 36rpx;
        color: #333333;
        font-weight: 500;
      }

      .button {
        width: 100rpx;
        height: 44rpx;
        background: #d52e4c;
        border-radius: 22rpx;
        margin-left: 20rpx;

        font-size: 24rpx;
        color: #ffffff;

        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .text2 {
      font-size: 26rpx;
      color: #333333;
      margin-top: 50rpx;
      letter-spacing: 3rpx;
    }

    .button1 {
      height: 60rpx;
      background-color: #d1665d;
      border-radius: 12rpx;
      margin-top: 70rpx;
      margin-bottom: 70rpx;
      padding: 0rpx 25rpx;
      line-height: 60rpx;
      font-size: 28rpx;
      color: #ffffff;
    }

    .text-view {
      display: flex;
      font-size: 26rpx;
      color: #333333;
      width: 600rpx;
      margin-top: 15rpx;

      .icon-view {
        width: 30rpx;
        height: 30rpx;
        background-color: #333333;
        border-radius: 15rpx;
        margin-right: 15rpx;
      }

      .phone {
        a {
          color: #2c2bc2;
        }
      }
    }

    .wx-name {
      font-size: 32rpx;
      color: #d4504e;
      letter-spacing: 3rpx;
    }

    .wx-image {
      width: 300rpx;
      height: 300rpx;
      margin-top: 30rpx;
    }

    .wx-text {
      font-size: 26rpx;
      color: #333333;
      margin-top: 30rpx;
    }

    .button-view {
      width: 600rpx;
      margin-top: 70rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .button-1 {
        width: 150rpx;
        height: 50rpx;
        border-radius: 8rpx;
        border: 1px solid #d4504e;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #d4504e;
      }

      .button-2 {
        width: 150rpx;
        height: 50rpx;
        background-color: #d4504e;
        border-radius: 8rpx;
        border: 1px solid #d4504e;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }
}
</style>