<template>
  <div class="successOrder">
    <img src="./img/success.png" alt="">
    <div v-if="goodsInfo.type == 0">
      <h3>提交成功</h3>
      <p>提交「免费兑」订单成功，扣减 <span>{{integralPrice}}积分</span></p>
      <div class="btn-flex">
        <div @click="back">返回</div>
        <div @click="toOrderList">查看订单</div>
      </div>
    </div>
    <div v-else>
      <h3>兑换成功</h3>
      <p>提交「京东低价商品」订单成功，扣减 <span>{{integralPrice}}积分</span>
        可点击下方按钮前往京东商城进行低价购买
      </p>
      <div class="btn" @click="openJd">去购买</div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'successOrder',
  appName: '提交订单',
  data() {
    return {
      integralPrice: 0,
      backLevel: 1,
      shopGoodsId: '',
      goodsInfo: {}
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad(option) {
    this.integralPrice = option.integralPrice
    this.backLevel = option.backLevel
    this.shopGoodsId = option.shopGoodsId
    this.getDetail()
  },
  onShow() {
    document.title = '提交订单'
  },
  methods: {
    getDetail() {
      this.$http.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
        if (res.code === 0) {
          this.goodsInfo = res.data
        }
      })
    },
    openJd() {
      if(this.goodsInfo.type == 1) {
        uni.navigateTo({url: `./jdH5?goodsJdUrl=${this.goodsInfo.jdUrl}`})
      }else {
        uni.navigateToMiniProgram({
          appId: this.goodsInfo.jdAppid,
          path: this.goodsInfo.jdUrl
        })
      }
    },
    back() {
      uni.navigateBack({delta: Number(this.backLevel)})
    },
    toOrderList() {
      uni.redirectTo({
        url: './myOrderList'
      })
    }
  },
}
</script>

<style lang="scss" scoped>
uni-page-body{
  background-color: #fff;
}
.successOrder {
  padding: 0 60px;
  text-align: center;
  img {
    width: 240px;
    height: 232px;
    margin: 168px auto 32px auto;
  }
  h3 {
    font-family: PingFangSC-SNaNpxibold;
    font-weight: 600;
    font-size: 40px;
    color: #333;
    line-height: 56px;
    margin-bottom: 16px;
  }
  p {
    color: #333;
    font-size: 30px;
    font-family: PingFangSC;
    line-height: 50px;
    text-align: center;
    margin-bottom: 80px;
    span {
      color: #FF6900;
    }
  }
  .btn {
    width: 410px;
    height: 88px;
    line-height: 88px;
    background: #2D7DFF;
    border-radius: 44px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 34px;
    color: #FFF;
    text-align: center;
    margin: 0 auto;
  }
  .btn-flex {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 34px;
    margin: 0 auto;
    div {
      display: inline-block;
      width: 272px;
      text-align: center;
      height: 88px;
      line-height: 88px;
      border-radius: 44px;
      color: #FFF;
      background-color: #2D7DFF;
    }
    div:nth-of-type(1) {
      background-color: #E5EFFF;
      color: #2D7DFF;
      margin-right: 26px;
    }
  }
  
}
</style>
