hospital-accompaniment-wechat/components/checkoutSuccess/index.vue

<template>
  <u-popup :show="popupShow" bgColor="transparent" :safeAreaInsetBottom="false" @close="close">
    <view class="popupBox">
      <view class="popupBox_title">
        <image src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img6.png" mode="" />
        <view>
          <view class="popupBox_title_l">下单成功</view>
        </view>
      </view>
      <view class="popupBox_content">
        <view>
          <view class="popupBox_content_price" v-if="form.orderAmount">
            ￥
            <text>{{form.orderAmount.split('.')[0]}}</text>
            .{{form.orderAmount.split('.')[1]}}
          </view>
          <view class="popupBox_content_status">支付成功</view>
          <view class="popupBox_content_point" v-if="form.giftPoints">完成订单核销即可获得{{form.givePointsExpect}}个礼包兑换豆</view>
          <view class="popupBox_content_giftCenter" @click="$utils.openPage(banner)" v-if="form.giftPoints">
            <image :src="banner.image" mode="" />
          </view>
          <view class="popupBox_content_btn">
            <view class="popupBox_content_btn_l" @click="goBack()">返回景点</view>
            <view class="popupBox_content_btn_r" @click="goDetails()">订单详情</view>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { orderInfo, bannerList } from "@/api/home.js"
export default {
  data () {
    return {
      popupShow: false,
      form: {},
      banner: {}
    }
  },
  mounted () {
    this.getBanner()
  },
  methods: {
    close () {
      this.popupShow = false
    },
    open (orderNo) {
      this.getOrderInfo(orderNo)
      this.popupShow = true
    },
    goBack () {
      uni.navigateBack()
    },
    goDetails () {
      uni.redirectTo({
        url: '/pages/order/orderDetails?orderNumber=' + this.form.orderNumber
      });
    },
    getOrderInfo (orderNo) {
      orderInfo(orderNo).then(res => {
        this.form = res.data
      })
    },
    // 获取广告
    getBanner () {
      bannerList('order_success_banner').then(res => {
        this.banner = res.data && res.data.length > 0 ? res.data[0] : {}
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.popupBox {
  position: relative;
  .popupBox_title {
    width: 100%;
    position: absolute;
    top: -93rpx;
    z-index: 10;
    > image {
      width: 720rpx;
      height: 204rpx;
    }
    > view {
      display: flex;
      align-items: center;
      padding: 75rpx 0 0 30rpx;
      position: absolute;
      top: 0;
      left: 0;
      .popupBox_title_l {
        font-size: 48rpx;
        color: #ffffff;
        font-family: FZCuYuan-M03;
        margin-right: 100rpx;
      }
    }
  }
  .popupBox_content {
    padding: 60rpx 0rpx 0;
    background: linear-gradient(180deg, #c90700 0%, #ffe8e6 58%, #ffffff 32%);
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    background-size: 100% 1900rpx;
    background-position-y: -100rpx;
    > view {
      background: linear-gradient(180deg, #ffedec, #ffffff);
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      margin-top: 4rpx;
      position: relative;
      padding-top: 50rpx;
      z-index: 10;
      .popupBox_content_price {
        font-size: 40rpx;
        color: #fa353b;
        font-family: FZCuYuan-M03;
        text-align: center;
        text {
          font-size: 80rpx;
          font-family: FZCuYuan-M03;
        }
      }
      .popupBox_content_status {
        font-size: 26rpx;
        color: #666666;
        text-align: center;
      }
      .popupBox_content_point {
        background: #ffe3e2;
        border-radius: 29rpx;
        width: 533rpx;
        height: 58rpx;
        text-align: center;
        line-height: 60rpx;
        margin: 40rpx auto 0;
        font-size: 26rpx;
        color: #ff0008;
      }
      .popupBox_content_giftCenter {
        text-align: center;
        margin: 60rpx 0 50rpx;
        image {
          width: 690rpx;
          height: 148rpx;
        }
      }
      .popupBox_content_btn {
        padding: 4rpx 30rpx 60rpx;
        display: flex;
        justify-content: space-between;
        .popupBox_content_btn_l {
          width: 331rpx;
          height: 80rpx;
          border-radius: 40rpx;
          font-size: 32rpx;
          text-align: center;
          line-height: 80rpx;
          color: #fb0b03;
          border: 1rpx solid #fb0b03;
        }
        .popupBox_content_btn_r {
          width: 331rpx;
          height: 80rpx;
          border-radius: 41px;
          font-size: 32rpx;
          background: #fb0b03;
          color: #ffffff;
          text-align: center;
          line-height: 80rpx;
        }
      }
    }
  }
}
</style>