<template>
  <div>
    <div class="order-list">
      <ul>
        <template v-for="(item, index) in order">
          <li :key="index">
            <div class="order-info">
              <img :src="item.product_image" alt="">
              <div class="txt">{{item.product_name}}</div>
            </div>
            <div class="deti">
              <div class="tit">课程状态：</div>
              <div class="val">{{item.status === 1 ? '已付款' : '未付款' }}</div>
            </div>
            <div class="deti">
              <div class="tit">共计：</div>
              <div class="val">{{item.total_fee}}</div>
            </div>
            <div class="deti">
              <div class="val col" v-if="item.status == 1">购买成功</div>
              <div class="val col" v-else @click="goBuy">继续购买</div>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/pay.js'
import { getUser } from '@/api/account'
import { Toast } from 'vant'
export default {
  data() {
    return {
      order: [],
      requestParam: {
        product_id: '6684359515615264768', // 提前设定
        open_id: '', // 通过微信授权获取
        prepay_id: '', // 通过调用接口获取
        app_id: '', // 提前设定
        app_secret: '' // 提前设定
      }
    }
  },
  mounted() {
    this.getOpenid()
    this.getMyOrder()
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    }
  },
  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
          }
        })
      })
    },
    getMyOrder() {
      api.getMyOrder().then(res => {
        if (res.code === 0) {
          this.order = res.data.orders
        }
      })
    },
    goBuy() {
      Toast('1111112')
      if (window.__wxjs_environment === 'miniprogram') {
        Toast('111111')
        wx.miniProgram.navigateTo({
          // url: '/pages/pay/index?data=' + JSON.stringify(obj.data),
          url: '/pages/pay/index?data=' + this.requestParam.product_id,
          events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: function (data) {
              console.log(data)
            }
          },
          success: function (res) {}
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.order-list{
  padding-bottom: 1.5rem;
  li{
    padding: .1rem .4rem;
    margin-bottom: .4rem;
  }
  .order-info{
    display: flex;
    img{
      width: 2.4rem;
      height: 2.4rem;
      display: block;
    }
    .txt{
      margin-left: .2rem;
      font-size: .3rem;
      color: #222;
      word-wrap: break-word;
    }
  }
  .deti{
    display: flex;
    margin-top: .4rem;
    .tit{
      font-size: .26rem;
      color: #222;
    }
    .val{
      font-size: .26rem;
      color: #222;
      margin-left: auto;
    }
    .col{
      color: #FF6767;
      font-size: .3rem;
    }
  }
}
</style>
