fanxing-shop/pages/order/success.vue

<!-- 支付成功 -->
<template>
  <view class="success" :style="{ background: 'url(' + bgImg + ') #F4F5F9' }">
    <view class="success_status">
      <view class="status flex aic">
        <image class="pay_img" :src="payImg"></image>
        <view class="status_text">支付成功</view>
      </view>
      <view class="status_tip">套餐购买成功 请查看账单明细</view>
    </view>
    <view class="success_content">
      <view class="success_info">
        <view class="">
          <view class="success_item flex jcsb aic">
            <view class="flex aic">
              <view class="label">收件地址</view>
              <text class="bold">{{ orderInfo.email }}</text>
            </view>
<!--            <view class="success_btn" @click="copyText()">复制</view>-->
          </view>

          <view class="success_item flex aic">
            <view class="label">收件人</view>
            <text>{{ orderInfo.recipientName }}({{orderInfo.email}})</text>
          </view>
        </view>
      </view>
      <view class="line" :style="{ background: `url(${successImg}) no-repeat` }">
        <view class="line-circle"></view>
      </view>
      <view class="detail">
        <view class="detail_item flex aic jcsb">
          <text>订单金额</text>
          <view class="datas flex">
            <text>{{orderInfo.totalAmount}}元</text>
          </view>
        </view>
        <view class="detail_item flex aic jcsb">
          <text>套餐名称</text>
          <view class="datas flex">
            <text>{{ orderInfo.packageName }}</text>
            <view class="copy">详情</view>
          </view>
        </view>
        <view class="detail_item flex aic jcsb">
          <text>套餐内容</text>
          <view class="datas flex">
            <text>{{orderInfo.quantity}}条 (每条15-20s)</text>
          </view>
        </view>
        <view class="detail_item flex aic jcsb">
          <text>支付方式</text>
          <view class="datas flex">
            <text>微信支付</text>
          </view>
        </view>
        <view class="detail_item flex aic jcsb">
          <text>订单编号</text>
          <view class="datas flex">
            <text>{{ orderInfo.orderNumber }}</text>
            <view class="copy" @click="copyText()">复制</view>
          </view>
        </view>
        <view class="detail_item flex aic jcsb">
          <text>订单时间</text>
          <view class="datas flex">
            <text>{{orderInfo.createDate}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="btns">
      <view class="bind" @click="bindCard">查看详情</view>
      <view class="back" @click="goHome">返回首页</view>
    </view>
  </view>
</template>

<script>
import {copy} from "@/utils/utils";
import {getOrderDetail} from "../../apis/order";
import {goHome} from "../../utils/utils";


export default {
  components: {},
  data() {
    return {
      orderId: '',
      orderInfo: {
        packageName:"",
        createDate:"",
        orderNumber:'',
        shootingRequirements:'',
        email:'',
      },
      bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
      payImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_paysuccess.png",
      successImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_quekou.png'
    };
  },
  onLoad(options) {
    if (options.orderId) this.orderId = options.orderId
    this.getData()
  },
  computed: {

  },
  watch: {},
  methods: {
    getData() {
      getOrderDetail({orderId: this.orderId}).then(res => {
        this.orderInfo = res
      })
    },
    goHome(){
      goHome()
    },
    // 复制
    copyText(num) {
      copy(num)
    }
  },
  created() {

  },
  mounted() {

  },
}
</script>
<style lang='scss' scoped>
.success {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: top;
  padding: 0 24rpx;

  .success_status {
    margin-top: 64rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .pay_img {
      width: 48rpx;
      height: 48rpx;
      margin-left: 16rpx;
    }

    .status_text {
      font-weight: 500;
      font-size: 40rpx;
      color: #0D121A;
    }

    .status_tip {
      font-weight: 400;
      font-size: 28rpx;
      color: #9EA3B1;
      margin-top: 20rpx;
    }
  }

  .success_content {
    border-radius: 32rpx;
    overflow: hidden;
    margin-top: 64rpx;

    .success_info {
      background-color: #fff;
      padding: 36rpx 32rpx 8rpx;

      .success_item {
        margin-bottom: 20rpx;

        .label {
          min-width: 120rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #9EA3B1;
          margin-right: 16rpx;
        }

        text {
          font-size: 32rpx;
          color: #0D121A;
        }

      }

    }

    .success_btn {
      width: 80rpx;
      height: 40rpx;
      font-weight: 500;
      background: #F4F5F9;
      border-radius: 48rpx;
      font-size: 24rpx;
      color: #0D121A;
      text-align: center;
      line-height: 40rpx;
    }

    .line {
      width: 100%;
      height: 40rpx;
      background-size: cover !important;
      padding: 0 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .line-circle {
        width: 100%;
        border: 2rpx dashed #EDEDED;
        height: 2rpx;
      }
    }

    .detail {
      background-color: #fff;
      padding: 32rpx 32rpx 40rpx;

      .detail_item {
        margin-bottom: 36rpx;

        text {
          white-space: nowrap;
          font-weight: 400;
          font-size: 28rpx;
          color: #0D121A;
        }

        .datas {
          .copy {
            width: 80rpx;
            height: 40rpx;
            background: #F4F5F9;
            border-radius: 48rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #061714;
            text-align: center;
            line-height: 40rpx;
            margin-left: 16rpx;
          }
        }
      }

      .detail_item:nth-last-child(1) {
        margin-bottom: 0;
      }
    }

    .success_title {
      color: #9DA3A2;
    }
  }

  .btns {
    padding: 96rpx 32rpx;

    view {
      width: 100%;
      height: 84rpx;
      // border-radius: 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
    }

    .bind {
      color: #061714;
      margin-bottom: 32rpx;
      font-weight: 500rpx;
      background: linear-gradient(140deg, #246AF1 0%, #2F98EF 100%);
    }

    .back {
      font-weight: bold;
      background: #FFFFFF;
      // border: 4rpx solid #E7EAEA;
      color: #061714;
    }
  }

  .ml16 {
    margin-left: 16rpx;
  }
}
</style>