<template>
  <div>
    <Myheader></Myheader>
    <div class="rc-main">
      <div class="rc-hearder">
        <div class="rc-userpay">
         <div class="paysucess">
          <span>订单提交成功等待付款</span>

         </div>
                   <div class="rc-all">
          <div class="rc-payprice">
            <span>付款金额:</span>
            <i>{{ userprice }}</i>
          </div>
          <div class="rc-receiving">
            <span>收货信息:</span>
            <i>{{ userinformation }}</i>
          </div>
          </div>
          <div class="rc-usermaina">
    <div class="rc-title" id="qrcode" ref="qrcode" >
     </div> 
     </div>

        </div>
        <div class="rc-paystype">
          <span>请选择支付方式</span>
        </div>

        <div class="paystype">
          <div
            class="payAlipay"
            v-for="(item, index) in userpaystype"
            :key="index"
            @click="selectGoods(item, index)"
            :class="activeIndex == index ? 'active' : 'unactive'"
          >
            <div class="rc-payype">
              <img :src="item.payimage" alt="" />
              <span>{{ item.price }}</span>
            </div>
            <div class="user-righticon">
                <img src="../../assets/image/rc-left.png" alt="" />
                </div>
          </div>
        </div>
      </div>

  
      <div class="paycord" @click="usershow()" id="qrcode" ref="qrcode">
         <!-- <img src="../../assets/image/rc-discount.png" alt="" />
          <span>微信扫一扫立即支付</span> -->
      </div>
    </div>

    
  
    <el-dialog
    :visible.sync="dialogInfo1"
    hegight="700px"
@close='closeDialog'
  >

    <div class="rc-header">
      <div class="rc-titled" >
     <img src="../../assets/image/usersucess.png" alt="">
     </div> 
       <div class="rc-logmain">
            <h3>支付成功</h3>
            <span>{{usermessage}}</span>

       </div>

       <div class="userer">

         <img src="../../assets/image/rc-discount.png" alt="">
         <span>微信扫一扫，识别二维码</span>
         <i>加入社群0元试用商品随单发放</i>
       </div>
    </div>


  </el-dialog>
  </div>
</template>

<script>
import Myheader from "~/components/header.vue";
import QRCode from 'qrcodejs2'
import { generateOrderWX } from "../../ajax/getData";
export default {
  data() {
    return {
      userdata:null,
        activeIndex: 0,
        usermessage:'您的商品我们正在抓紧打包，请耐心等候！',
      userprice: "￥167.00",
      userinformation: "李某某  151****7917",
      userpaystype: [
        {
          price: "支付宝支付",
          payimage: require("../../assets/image/rc-cat.png"),
          catimage: require("../../assets/image/rc-left.png"),
        },
        {
          price: "微信支付",
          payimage: require("../../assets/image/rc-cat.png"),
          catimage: require("../../assets/image/rc-left.png"),
        },
      ],
           dialogInfo1:false,
    };
  },
  mounted() {
       this.userdata=this.$route.query.wxdata;
       this.userpay(this.userdata);
       console.log(this.userdata);
    this.$nextTick(() => {

this.userpay();
})
  },
  methods: {

closeDialog(){
  this.qrcode=null;
  console.log('关闭的')
},

        async userpay(userdata) {
             
      console.log("-----");
      let data = await generateOrderWX();
      console.log();
                this.qrcode(userdata);
    },
    qrcode (e) {
      console.log(e);
let qrcode = new QRCode('qrcode',{
width: 150, // 设置宽度，单位像素
height: 150, // 设置高度，单位像素
text: e// 设置二维码内容或跳转地址
})

},
      selectGoods(item,index){
        let _that=this
        _that.dialogInfo1=true;
          _that.activeIndex=index;
          if(item.price=='微信支付'){
          // this.userpay();

          }
      },
      usershow(){
      console.log('这是支付')        
          this.dialogInfo1=true;
      }
  },
  components: {
    Myheader,
  },
};
</script>

<style lang="less" scoped >
@media screen and (max-width: 768px) {

  .rc-usermaina{
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
  }
  .rc-userpay{
    display: none;
  }
      /deep/.el-dialog {
 width:80%;
 height: 500px;
}
  .rc-header{
 display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    h3{
      color:#333333;
      font-size: 26px;
    }
  .rc-title{
     img{
       width: 96px;
       height: 96px;

     }
  }
   .rc-titled{
     img{
       width: 96px;
       height: 96px;

     }
  }
  .userer{
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
      width: 96px;
      height: 96px;
      display: flex;
    justify-content: center;
    flex-direction: column;

    } 

    span{
        font-size: 16px;

color: #333333;
    }
    i{
        font-size: 18px;
          font-style: normal;
           display: block;
           margin-top: 32px;
color: #E1001A;
    }
  }
}
  .rc-main {
    width: 100%;
    .paysucess{
        display: none;
    }
    .paycord{
        display: none;
    }
    .rc-hearder {
      width: 93%;
      margin: 0 auto;
      i em {
        font-style: normal;
      } 
      .rc-userpay {
        width: 100%;
        // height: 96px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .rc-all{
          display: none;
        }
        .rc-payprice {
          display: flex;
          justify-content: space-between;
          span {
            font-size: 14px;

            color: #333333;
          }
          i {
            font-size: 14px;
            font-style: normal;

            color: #e1001a;
          }
        }
        .rc-receiving {
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          span {
            font-size: 14px;

            color: #333333;
          }
          i {
            font-style: normal;
            color: #666666;
            font-size: 14px;
          }
        }

        strong {
          font-size: 16px;
          display: block;
          margin-top: 53px;
          color: #e1001a;
        }
      }

      .rc-paystype {
        margin-top: 53px;
        span {
          font-size: 16px;

          color: #e1001a;
        }
      }

      .payAlipay {
          .user-righticon{
              display: flex;
              align-items: center;
              img{
                 width: 8px;
          height: 16px;
              }
          }
        display: flex;
        justify-content: space-between;
        height: 80px;
        border-bottom: 1px solid #d8d8d8;
        .rc-payype {
          display: flex;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }

          span {
            color: #333333;
            font-size: 14px;
            margin-left: 16px;
          }
        }
     
     
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1920px) {

    /deep/.el-dialog {
 width: 440px;
 height: 677px;
}
.rc-header{
 display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    h3{
      color:#333333;
      font-size: 26px;
    }
    .rc-titled{
       img{
       width: 96px;
       height: 96px;

     }
    }
  
  .rc-title{
    position: absolute;
    left: 50%;
    margin-left: -75px;
    top: 59%;
     img{
       width: 96px;
       height: 96px;

     }
  }
  .userer{
    img{
      width: 210px;
      height: 210px;
      display: flex;
    justify-content: center;
    flex-direction: column;

    } 

    span{
        font-size: 16px;

color: #333333;
    }
    i{
        font-size: 18px;
          font-style: normal;
           display: block;
           margin-top: 32px;
color: #E1001A;
    }
  }
}
.rc-main {
      .active {
  border: 1px solid #E2001A;
  cursor: pointer;
    width: 200px;
           height: 56px;
          
}
.unactive {
   border:1px solid #3D3D3D;
  cursor: pointer;
      width: 200px;
           height: 56px;
}
    width: 100%;
    .rc-hearder {
      width: 93%;
      margin: 0 auto;
      i em {
        font-style: normal;
      }
      .rc-userpay {
        width: 100%;
        height: 96px;
        // display: flex;
        // justify-content: space-between;
      .paysucess{
        
          display: flex;
          align-items: center;
          span{
              font-size: 20px;
                 display: block;
                 width: 61%;
color: #E2001A;
          }
      }
    .rc-all{
        display: flex;
    flex-direction: column;
    justify-content: center;
    }
        .rc-payprice {
          display: flex;
          justify-content: flex-end;
          span {
            font-size: 16px;

            color: #333333;
          }
          i {
            font-size: 16px;
            font-style: normal;

            color: #e1001a;
          }
        }
        .rc-receiving {
          margin-top: 8px;
          display: flex;
        justify-content: flex-end;
          span {
            font-size: 16px;

            color: #333333;
          }
          i {
            font-style: normal;
            color: #666666;
            font-size: 16px;
          }
        }

        strong {
          font-size: 16px;
          display: block;
          margin-top: 53px;
          color: #e1001a;
        }
      }
     .paystype{
    display: flex;
    align-items: center;
        

}
      .rc-paystype {
           height: 100px;
    display: flex;
    align-items: center;
        span {
          font-size: 26px;

          color: #E2001A;
        }
    
      }

      .payAlipay {
         
           margin-left: 20px;
          .user-righticon{
                display: none;
           
              img{
                 width: 8px;
          height: 16px;
              }
          }
        display: flex;
        justify-content: space-between;
        height: 56px;

        .rc-payype {
         display: flex;
    align-items: center;
    font-size: 16px;
    color: #E2001A;
    justify-content: center;
    width: 100%;
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }

          span {
         
            margin-left: 16px;
          }
        }
     
     
      }
    }

    .paycord{
       width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
        img{
            width: 260px;
            height: 260px;
            display: block;
        }
        span{
           font-size: 20px;
      display: block;
color: #333333; 


        }
    }
  }


}
</style>