<!--收银台 页面
-->
<script>
import ImagesConstant from "@/common/ImagesConstant";
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import commonTool from "../../../common/js/commonTool";
import {stringIsNotEmpty} from "../../../common/util";

let request = new Request()
export default {
  name: "checkoutCounter",
  components: {},
  computed: {
    ImagesConstant() {
      return ImagesConstant
    },
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      playerType: '艺术类',
      orderCode: '',//订单号
      totalAmount: '',//金额
      signStr:''
    }
  },
  onLoad(e) {
    this.playerType = commonTool.getPlayerType()
    if (e.orderCode) {
      this.orderCode = e.orderCode
      this.getOrderDetail()
    }
  },
  methods: {
    getOrderDetail() {
      request.get(ApiConstant.VIP.orderDetail, {orderCode: this.orderCode}).then(r => {
        console.log(r)
        if (r.success) {
          // #ifdef MP-WEIXIN
          this.signStr = r.result.orderSign
          // #endif
          // #ifdef MP-TOUTIAO
          this.signStr = r.result.orderSign
          // #endif
          this.totalAmount = parseFloat(r.result.totalAmount)
        } else {
          uni.showToast({title: r.message, icon: "none"});
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    goto(url) {
      uni.navigateTo({
        url: url
      })
    },
    paySubmit() {
      if (!this.signStr) {
        uni.showToast({title: '获取订单异常!', icon: "none"});
        return
      }
      let sign = JSON.parse(this.signStr);
      let that = this
      uni.requestPayment({
        provider: uni.getStorageSync('providerpayment'),
        //微信参数
        // #ifdef MP-WEIXIN
        timeStamp: sign.timeStamp,
        nonceStr: sign.nonceStr,
        package: sign.package,
        signType: sign.signType,
        paySign: sign.paySign,
        // #endif
        //抖音参数
        // #ifdef MP-TOUTIAO
        orderInfo: sign.data,
        service: 5,//固定值：5-抖音小程序收银台,3-微信,4-支付宝;3、4，仅在1.35.0.1+基础库(头条743+)支持
        //_debug: 1,//0/1仅限调试用，上线前去掉该参数。_debug=1时，微信支付期间可以看到中间报错信息，方便调试
        //getOrderStatus: '',//商户前端实现的查询支付订单状态方法（该方法需要返回个Promise对象）。 service=3、4时不需要传。
        // #endif
        //结果
        success: function (res) {
          console.log('==== uni.requestPayment success', res);
          let code = ''
          // #ifdef MP-TOUTIAO
          code = res.code
          if(0 === code){
            //支付成功
            console.log('支付成功!')
            setTimeout(function () {
              commonTool.reloadVipInfo()
              uni.showToast({title:'支付成功', icon: "none"});
            }, 500)
            setTimeout(function () {
              uni.switchTab({
                url: '/pages/zyb/home'
              });
            }, 1000)
          }else{
            uni.showToast({
              title: 1===code?'支付超时':2===code?'支付失败':3===code?'支付关闭':4===code?'支付取消':"支付失败",
              icon: 'none'
            })
          }
          // #endif

          // #ifdef MP-WEIXIN
          code = res.errMsg
          if("requestPayment:ok" === code){
            //支付成功
            console.log('支付成功!')
            setTimeout(function () {
              commonTool.reloadVipInfo()
              that.openPopup2()
            }, 500)
          }else{
            uni.showToast({
              title: 1===code?'支付超时':2===code?'支付失败':3===code?'支付关闭':4===code?'支付取消':"支付失败",
              icon: 'none'
            })
          }
          // #endif
        },
        fail: function (err) {
          console.log('取消支付')
          console.log('fail:' + JSON.stringify(err));
        }
      });
    },
    openPopup2() {
      this.$refs.popup2.open("center")
    },
    maskClick() {
      this.$refs.popup2.close()
      //回到首页
      uni.switchTab({
        url: '/pages/zyb/home'
      });
    },
    previewImage(e) {
      console.log('e', e);
      uni.previewImage({
        // 需要预览的图片链接列表
        urls: [],
        // 为当前显示图片的链接/索引值
        current: ImagesConstant.customerServiceQrCode,
        // 图片指示器样式
        indicator: 'default',
        // 是否可循环预览
        loop: false,
        // 长按图片显示操作菜单，如不填默认为保存相册
        // longPressActions:{
        // 	itemList:[this.l('发送给朋友'),this.l]
        // },
        success: res => {
          console.log('res', res);
        },
        fail: err => {
          console.log('err', err);
        }
      });
    }
  }
}
</script>

<template>
  <uni-popup ref="popup2" background-color="#fff" class="radius15" :maskClick='false'>
    <view class="popup-content radius15" style="padding: 30rpx 30rpx">
      <view class="font-size-mini4 font-weight-b" style="text-align: center">支付成功，请添加老师微信</view>
      <image @click="previewImage" :show-menu-by-longpress="true" :src="ImagesConstant.customerServiceQrCode"
             style="width: 600rpx;height: 800rpx"/>
      <view class="font-size-mini4 font-weight-b margin-top-20 margin-top-20" @click="maskClick"
            style="text-align: center">知道了
      </view>
    </view>
  </uni-popup>
  <view class="background-white">
    <view class="border-top"></view>
    <view style="padding: 0 40rpx">
      <view class="card">
        <text class="z-h6">使用须知</text>
        <view class="text-body">
          <text class="text-item">适用考生：{{playerType}}考生</text>
          <text class="text-item">使用专业类别：省内统考</text>
          <text class="text-item">适用批次：{{playerType}}本科及专科批</text>
          <text class="text-item">适用范围：河南省</text>
        </view>
      </view>
      <view class="card">
        <text class="z-h6">如何使用</text>
        <view class="text-body">
          <text class="text-item">下单购买后或激活VIP卡密之后，可在小程序端登录使用，解锁所有VIP功能。</text>
        </view>
      </view>
      <view class="card">
        <text class="z-h6">开通提示</text>
        <view class="text-body">
          <text class="text-item">1、高考出分前，可填写模拟成绩体验产品，专业成绩/文化成绩信息每日可修改10次。</text>
          <text class="text-item">2、出分后，仅可修改1次信息，将模拟信息修改为最终成绩。</text>
          <text class="text-item">3、激活后，如若未生效请尝试重新登录账号</text>
          <text class="text-item">4、使用过程中，有任何疑问请及时反馈！</text>
        </view>
      </view>
    </view>
  </view>
  <view class="bottom">
    <view class="flex padding30">
      <view class="flex-item-3">
        <view style="color: #df4e44;line-height: 120rpx">
          <text>￥</text>
          <text class="font-weight-600 font-size-big2">{{ totalAmount }}</text>
        </view>
      </view>
      <view class="flex-item-7">
        <view @click="paySubmit" style="line-height:90rpx;float: right"
              class="padding10-30 background-red2 font-size-medium radius60">
          <view class="white">立即支付</view>
        </view>

      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.card {
  border-bottom: 2rpx solid #f5f6f8;
  padding: 0 30rpx 30rpx 30rpx;
}

.card .z-h6 {
  margin: 50rpx 0 30rpx 0;
}

/*使用须知 start*/
.text-body {
  margin-top: 30rpx;
}

.text-body .text-item {
  display: flex;
  justify-items: left;
  font-size: 26rpx;
  color: #999999;
  line-height: 50rpx;
}

/*使用须知 end*/

/*底部 start*/
.bottom {
  border-top: 1rpx solid #f5f6f8;
  position: fixed;
  bottom: 0;
  height: 180rpx;
  width: 100%;
  background-color: white;
}

/*底部 end*/
</style>
