<template>
  <div class="pay-bg">
    <img src="../../assets/images/pages.png" alt="">
    <div class="pay-btn">
      <div class="num">¥<span>199</span>.00</div>
      <div class="btn" @click="goPay">立即购买</div>
    </div>
    <!-- <van-button type="primary" @click="goPay" class="pay-btn">购买</van-button> -->
    <!-- <pay-h5 :requestParam="requestParam"></pay-h5> -->
    <pay-we-chart :requestParam="requestParam"></pay-we-chart>
  </div>
</template>
<script>
import * as api from '@/api/pay.js'
import { getUser } from '@/api/account'
import { Toast } from 'vant'
export default {
  components: {
    [Toast.name]: Toast
  },
  data() {
    return {
      userId: '',
      requestParam: {
        product_id: '6684359515615264768', // 提前设定
        open_id: '', // 通过微信授权获取
        prepay_id: '', // 通过调用接口获取
        app_id: '', // 提前设定
        app_secret: '' // 提前设定
      }
    }
  },
  mounted() {
    this.getOpenid()
    this.getGoodsDetail()
  },
  methods: {
    getOpenid() {
      getUser().then(res => {
        api.getOpenid({ id: res.id, identity: 'transport' }).then(res => {
          if (res.code === 0) {
            this.requestParam.open_id = res.data.openid
          }
        })
      })
    },
    getGoodsDetail() {
      // api.getGoodsDetails('6682927830365372416').then(res => {
      //   console.log(res)
      // })
    },
    goPay () {
      // this.VueEvent.$emit('pay-wx-h5', {})
      // this.VueEvent.$off('pay-wx-h5-callback').$on('pay-wx-h5-callback', obj => {
      //   if (obj.code === 200) {
      //     this.$router.back()
      //   } else {
      //     // this.$router.go(-2)
      //     Toast(obj.msg)
      //   }
      //   console.log(obj, '======')
      // })
      this.VueEvent.$emit('pay-wx-chart', {})
      this.VueEvent.$off('pay-wx-chart-callback').$on('pay-wx-chart-callback', obj => {
        if (obj.code === 200) {
          if (window.__wxjs_environment === 'miniprogram') {
            wx.miniProgram.navigateTo({
              url: '/pages/pay/index',
              events: {
                // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                acceptDataFromOpenedPage: function (data) {
                  console.log(data)
                }
              },
              success: function (res) {
                console.log('开始传数据', res, res.eventChannel)
                // 通过eventChannel向被打开页面传送数据
                res.eventChannel.emit('acceptDataFromOpenerPage', { data: obj.data })
              }
            })
          }
        } else {
          // this.$router.go(-2)
          Toast(obj.msg)
        }
        console.log(obj, '======')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.pay-bg{
  width: 100%;
  img{
    width: 100%;
  }
}
.pay-btn{
  position: fixed;
  bottom: 0;
  left: 0;
  width:7.5rem;
  height:1rem;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 6px 0px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  padding: 0 .4rem;
  .num{
    font-size: .26rem;
    color: #FF6767;
    span{
      font-size: .4rem;
    }
  }
  .btn{
    width:4.65rem;
    height:.7rem;
    background:rgba(255,103,103,1);
    border-radius:.12rem;
    margin-left: auto;
    text-align: center;
    line-height: .7rem;
    color: #fff;
    font-size: .3rem;
  }
}
</style>
