<template>
  <!-- 确认订单 -->
  <div class="confirmOrder">
    <!-- 头部确认订单 -->
    <div class="headerOrder">
      <p class="congratulations">恭喜您，名额已锁定</p>
      <p class="countDown">
        <span>请在</span
        ><van-count-down
          @finish="BackOff"
          :time="time"
          class="count"
        />内完成支付
      </p>
    </div>
    <!-- 内容 -->
    <div class="orderContent">
      <!-- 商品展示 -->
      <div class="goodsExhibition">
        <!-- 顶部颜色条 -->
        <div class="topLine"></div>
        <!-- 商品 -->
        <div class="goods">
          <!-- 商品信息 -->
          <div class="goodsInformation">
            <!-- 商品图片 -->
            <div class="goodsImg"></div>

            <!-- 商品描述 -->
            <div class="goodsDescribe">
              <!-- 商品标题 -->
              <p class="goodsTitle">
                限时活动【40元抽手机】苹果现 iPho苹果现 iPho苹果现 iPho
              </p>
              <!-- 商品价格 -->
              <p class="goodsPrice">¥39</p>
            </div>
          </div>
          <!-- 商品轮播图 -->
          <div class="goodsCarousel">
            <!-- 轮播 -->
            <div class="carousel">
              <!-- 信息 -->
              <div class="carouselInformation">
                <!-- 图片 -->
                <div class="carouselImg"></div>
                <!-- 标题价格 -->
                <p class="carouselTitle">无线蓝无线蓝牙</p>
                <p class="carouselPrice">¥39</p>
              </div>
              <!-- 信息 -->
              <div class="carouselInformation">
                <!-- 图片 -->
                <div class="carouselImg"></div>
                <!-- 标题价格 -->
                <p class="carouselTitle">无线蓝无线蓝牙</p>
                <p class="carouselPrice">¥39</p>
              </div>
              <!-- 信息 -->
              <div class="carouselInformation">
                <!-- 图片 -->
                <div class="carouselImg"></div>
                <!-- 标题价格 -->
                <p class="carouselTitle">无线蓝无线蓝牙</p>
                <p class="carouselPrice">¥39</p>
              </div>
              <!-- 信息 -->
              <div class="carouselInformation">
                <!-- 图片 -->
                <div class="carouselImg"></div>
                <!-- 标题价格 -->
                <p class="carouselTitle">无线蓝无线蓝牙</p>
                <p class="carouselPrice">¥39</p>
              </div>
            </div>
            <!-- 图片 -->
            <img
              class="moreImg"
              @click="probability"
              src="../image/more.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <!-- 支付方式 -->
      <div class="payType">
        <!-- 选择支付方式 -->
        <div class="choiceType">选择支付方式</div>
        <!-- 支付宝 -->
        <div class="zhifubao">
          <!-- 左 -->
          <div class="zhifubaoLeft">
            <!-- 支付宝图标 -->
            <img class="zfbIcon" src="../image/zfb.png" alt="" />
            <!-- zfbName -->
            <p class="zfbName">支付宝</p>
            <!-- 首单立减 -->
            <div class="firstOrder">首单随机立减，最高至免单</div>
          </div>
          <van-checkbox
            class="affirm"
            v-model="zfbTrue"
            checked-color="red"
          ></van-checkbox>
        </div>
      </div>
      <!-- 输入手机号 -->
      <div class="inputPhone">
        <!-- 线条 -->
        <img class="lineImg" src="../image/line.png" alt="" />
        <!-- 手机号 -->
        <div class="phone">
          <p>手机号</p>
          <input
            type="text"
            placeholder="请输入您的收件手机号"
            v-model="phone"
          />
        </div>
        <!-- 注意 -->
        <div class="careful">
          <p>*注意，手机号填错可能导致订单无法发货</p>
          <p>*支付成功后，请留意手机短信，尽快下载APP开盒提货</p>
        </div>
      </div>
      <!-- 定位支付按钮 -->
      <div class="payBtn">
        <div class="payBtnLeft">专享价 ¥39</div>
        <div class="payBtnRight" @click="navLottery">确认支付</div>
      </div>
    </div>

    <!-- 左边固定导航条 -->
    <div class="navigationBar">
      <!-- 每一列服务 -->
      <div class="serviceList" @click="probability">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/gailv.png" alt="" />
          <p>商品 概率</p>
        </div>
      </div>
      <div class="serviceList noBor" @click="kefuchaxun">
        <div class="serviceListBox">
          <img class="gailvImg" src="./image/service.png" alt="" />
          <p>联系 客服</p>
        </div>
      </div>
    </div>

    <!-- 下拉框概率 -->
    <van-action-sheet
      v-model="probabilityShow"
      title="奖品抽奖存在概率性，付费请谨慎"
    >
      <!-- 内容 -->
      <div class="probabilityContent">
        <!-- 商品概率类型 -->
        <div class="probabilityType">
          <!-- 标题 -->
          <div class="probabilityTypeTitle">盒内商品类型概率</div>
          <!-- 概率详细 -->
          <div class="probabilityDetailed">
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType PT">普通款</div>
              <p class="percentage">86.434%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType ZG">尊贵款</div>
              <p class="percentage">12.314%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType SS">史诗款</div>
              <p class="percentage">0.834%</p>
            </div>
            <!-- 每个类型 -->
            <div class="TypeList">
              <!-- 等级类型 -->
              <div class="GradeType CS">传说款</div>
              <p class="percentage">0.418%</p>
            </div>
          </div>
        </div>
        <!-- 盒内全部商品标题 -->
        <!-- 大标题 -->
        <div class="bigTitle">ALL GOOD THINGS</div>
        <!-- 小标题 -->
        <div class="smallTitle">盒内全部商品</div>

        <!-- 商品大全 -->
        <div class="wholeCommodity">
          <!-- 每一件商品 -->
          <div class="commodity">
            <!-- 商品图片 -->
            <div class="commodityImg"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              限时活动【40元抽手机】苹果现货 iPhone12 256g
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize"><span>参考价 ￥</span>40</p>
            </div>
          </div>
          <!-- 每一件商品 -->
          <div class="commodity">
            <!-- 商品图片 -->
            <div class="commodityImg"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              限时活动【40元抽手机】苹果现货 iPhone12 256g
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize">
                <span>参考价 ￥</span>
                40
              </p>
            </div>
          </div>
          <!-- 每一件商品 -->
          <div class="commodity">
            <!-- 商品图片 -->
            <div class="commodityImg"></div>
            <!-- 商品名字 -->
            <div class="commodityName">
              限时活动【40元抽手机】苹果现货 iPhone12 256g
            </div>
            <!-- 商品价钱 -->
            <div class="commodityPrice">
              <p class="commodityPriceSize">
                <span>参考价 ￥</span>
                40
              </p>
            </div>
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>

export default {
  name: "ConfirmOrder",
  data() {
    return {
      // 概率显示与展示
      probabilityShow: false,
      //   支付宝勾选
      zfbTrue: false,
      //   手机号
      phone: "",
      // 倒计时
      time: 20 * 60 * 1000,
    };
  },
  methods: {
    // 显示概率
    probability() {
      this.probabilityShow = !this.probabilityShow;
    },
    // 弹出层显示与隐藏
    PopupShowCli() {
      this.PopupShow = !this.PopupShow;
    },
    // 客服查询跳转
    kefuchaxun() {
      (function (w, d, n, a, j) {
        w[n] =
          w[n] ||
          function () {
            return (w[n].a = w[n].a || []).push(arguments);
          };
        j = d.createElement("script");
        j.async = true;
        j.src =
          "https://qiyukf.com/script/e79536c3a3b3b8b8ae2fcd16084fd137.js?hidden=1";
        d.body.appendChild(j);
      })(window, document, "ysf");
      ysf("onready", function () {
        // todo
        ysf("open");
      });
      // var isSdkReady = true;
      // if (isSdkReady) {
      //
      // }
    },
    // 倒计时结束
    BackOff() {
      this.$router.go(-1);
    },
    //跳转支付
    navLottery(){
      this.$router.push({
        name:"Lottery"
      })
    }
  },
  mounted() {
            
  },
};
</script>

<style lang="scss" scoped>
// 页面适配
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}
// 确认订单
.confirmOrder {
  width: vw(720);
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  background-color: #fafafa;
  //   头部确认订单
  .headerOrder {
    width: vw(660);
    height: vw(110);
    border-radius: vw(8);
    background-size: contain;
    background-image: url("../image/topOrderf.png");
    background-position: center;
    background-repeat: no-repeat;
    margin: vw(65) 0 vw(35) 0;
    font-size: vw(22);
    color: #ffffff;
    // 恭喜
    .congratulations {
      font-size: vw(28);
      margin: vw(19) 0 0 vw(107);
      color: #ffffff;
      font-weight: 400;
    }
    // 倒计时
    .countDown {
      font-size: vw(22);
      color: #ffffff;
      margin-left: vw(107);
    }
    .count {
      font-size: vw(22);
      color: #ffffff;
      display: inline-block;
    }
  }
  //   内容
  .orderContent {
    width: vw(720);
    display: flex;
    flex-direction: column;
    align-items: center;
    // 商品展示
    .goodsExhibition {
      width: vw(720);
      display: flex;
      flex-direction: column;
      align-items: center;
      // 顶部颜色条
      .topLine {
        width: vw(720);
        height: vw(10);
        background: linear-gradient(
          59deg,
          #ffe7be 0%,
          #ca81f7 62%,
          #79ecff 100%
        );
      }
      //商品
      .goods {
        width: vw(720);
        height: vw(356);
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        // 商品信息
        .goodsInformation {
          width: vw(680);
          height: vw(104);
          display: flex;
          align-items: center;
          justify-content: space-between;
          //   商品图片
          .goodsImg {
            width: vw(102);
            height: vw(102);
            background: #f4f4f4;
          }
          //   商品描述
          .goodsDescribe {
            // 商品标题
            .goodsTitle {
              width: vw(559);
              font-size: vw(28);
              font-weight: 400;
              color: #000000;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            //   商品价格
            .goodsPrice {
              font-size: vw(36);
              color: #000000;
              letter-spacing: vw(2);
            }
          }
        }
        //商品轮播
        .goodsCarousel {
          width: vw(680);
          height: vw(242);
          display: flex;
          align-items: center;
          //   轮播
          .carousel {
            width: vw(570);
            height: vw(242);
            display: flex;
            overflow: hidden;
            // 信息
            .carouselInformation {
              width: vw(140);
              height: vw(242);
              margin-right: vw(20);
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              //   图片
              .carouselImg {
                width: vw(140);
                height: vw(140);
                background-color: sandybrown;
              }
              //   标题
              .carouselTitle {
                width: vw(130);
                height: vw(37);
                font-size: vw(26);
                font-weight: 400;
                color: #000000;
                line-height: vw(37);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
              }
              //   价钱
              .carouselPrice {
                width: vw(43);
                height: vw(38);
                font-size: vw(32);
                font-weight: 400;
                color: #000000;
                line-height: vw(38);
                text-align: left;
              }
            }
          }
          // 查看更多
          .moreImg {
            width: vw(110);
            height: vw(242);
          }
        }
      }
    }
    //   支付方式
    .payType {
      width: vw(720);
      height: vw(202);
      background: rgb(255, 255, 255);
      margin: vw(20) 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      //   选择支付方式
      .choiceType {
        width: vw(680);
        height: vw(92);
        line-height: vw(92);
        font-size: vw(26);
        color: black;
        border-bottom: vw(1) solid #979797;
      }
      //   支付宝
      .zhifubao {
        width: vw(680);
        height: vw(110);
        display: flex;
        align-items: center;
        justify-content: space-between;
        // 左
        .zhifubaoLeft {
          display: flex;
          width: vw(482);
          height: vw(49);
          display: flex;
          align-items: center;
          justify-content: space-between;

          // 支付宝图标
          .zfbIcon {
            width: vw(49);
            height: vw(49);
          }
          .zfbName {
            font-size: vw(28);
          }
          // 首单立减
          .firstOrder {
            width: vw(300);
            height: vw(32);
            font-size: vw(24);
            text-align: center;
            padding: vw(2);
            line-height: vw(36);
            color: #ffffff;
            background-color: #ff4d4d;
          }
        }

        //
      }
    }
    // 输入手机号
    .inputPhone {
      width: vw(720);
      height: vw(237);
      background-color: white;
      display: flex;
      align-items: center;
      flex-direction: column;
      // 线条
      .lineImg {
        width: vw(720);
        height: vw(12);
      }
      // 手机号
      .phone {
        width: vw(650);
        height: vw(72);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: vw(20) 0;
        p {
          font-size: vw(28);
        }
        input {
          width: vw(500);
          height: vw(72);
          outline: none;
          border: none;
          font-size: vw(28);
          border-radius: vw(5);
          padding-left: vw(20);
          background-color: #eeeeee;
        }
      }
      //   注意
      .careful {
        width: vw(650);
        height: vw(67);
        color: #d74242;
        font-size: vw(22);
      }
    }
    // 定位支付按钮
    .payBtn {
      width: vw(720);
      height: vw(120);
      position: fixed;
      bottom: 0;
      display: flex;

      font-size: vw(40);
      color: white;
      .payBtnLeft {
        width: vw(370);
        height: vw(120);
        line-height: vw(120);
        text-align: center;
        background-color: #3e3e3e;
      }
      .payBtnRight {
        width: vw(370);
        height: vw(120);
        text-align: center;
        line-height: vw(120);
        background-color: #ec5542;
      }
    }
  }
  // 导航条
  .navigationBar {
    width: vw(64);
    position: fixed;
    top: vw(181);
    left: vw(656);
    background: #ffffff;
    border-radius: vw(26) vw(0) vw(0) vw(26);
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 每一列服务
    .serviceList {
      width: vw(48);
      height: vw(107);
      border-bottom: 1px solid #a5a4a1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // 每一列盒子
      .serviceListBox {
        width: vw(48);
        height: vw(92);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .gailvImg {
          width: vw(30);
          height: vw(30);
        }
        p {
          width: vw(48);
          font-size: vw(18);
          text-align: center;
        }
      }
      // 概率
    }
    // 无边框
    .noBor {
      border: none;
    }
  }
  // 下拉框概率
  .van-popup--round {
    overflow: visible !important;
    align-items: center;
    padding-top: vw(17);
    border-top: vw(15) solid black;
    border-image: linear-gradient(to right, #ffe7be, #ca81f7, #79ecff) 1 10;
    border-radius: 0;
    background-color: #1e3250;
    // 标题头
    .van-action-sheet__header {
      width: vw(700);
      height: vw(60);
      background: #314b6f;
      border-radius: vw(8);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: vw(24);
      color: white;
      // icon图标
      .van-icon {
        width: vw(65) !important;
        height: vw(65) !important;
        background-color: rgba(0, 0, 0, 0.8);
        border: 1px solid white;
        position: absolute;
        top: vw(-100);
        right: vw(50);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: vw(45);
      }
    }
    // 内容
    .probabilityContent {
      margin-top: vw(20);
      display: flex;
      flex-direction: column;
      align-items: center;
      // 商品类型概率
      .probabilityType {
        width: vw(700);
        height: vw(248);
        background: #314b6f;
        border-radius: vw(8);
        display: flex;
        flex-direction: column;
        align-items: center;
        // 标题
        .probabilityTypeTitle {
          width: vw(192);
          height: vw(33);
          font-size: vw(24);
          font-weight: 400;
          color: #ffffff;
          line-height: vw(33);
          margin-top: vw(23);
        }
        // 概率详细
        .probabilityDetailed {
          width: vw(600);
          height: vw(120);
          margin-top: vw(57);
          display: flex;
          align-items: center;
          justify-content: space-between;
          // 每个类型
          .TypeList {
            width: vw(110);
            height: vw(95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            // 等级类型
            .GradeType {
              width: vw(100);
              height: vw(40);
              font-size: vw(22);
              text-align: center;
              line-height: vw(40);
              border-radius: vw(8);
              font-weight: 700;
            }
            // 普通 尊贵 史诗 传说
            .PT {
              background: linear-gradient(200deg, #0c4cf9 0%, #64e7ff 100%);
            }
            .ZG {
              background: linear-gradient(
                90deg,
                #ffead3 0%,
                #d587ff 57%,
                #8b82ff 100%
              );
            }
            .SS {
              background: linear-gradient(320deg, #f0ce83 0%, #c88c32 100%);
            }
            .CS {
              background: linear-gradient(
                55deg,
                #03ebf1 0%,
                #c3fdff 34%,
                #f8c6e7 69%,
                #fffee1 100%
              );
            }
            // 百分比
            .percentage {
              width: vw(110);
              height: vw(34);
              font-size: vw(28);
              font-weight: 500;
              color: #ffffff;
              line-height: vw(34);
              text-align: center;
            }
          }
        }
      }
      // 盒内全部商品标题
      // 大标题
      .bigTitle {
        height: vw(60);
        font-size: vw(48);
        font-weight: normal;
        color: #ffffff;
        line-height: vw(60);
        font-weight: 700;
        margin-top: vw(41);
        align-self: flex-start;
      }
      // 小标题
      .smallTitle {
        width: vw(192);
        height: vw(45);
        font-size: vw(32);
        font-weight: 600;
        color: #ffffff;
        line-height: vw(45);
        margin-bottom: vw(30);
        align-self: flex-start;
      }
      // 商品大全
      .wholeCommodity {
        width: vw(688);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #1e3250;
        // 每一件商品
        .commodity {
          width: vw(336);
          height: vw(518);
          background-color: #314b6f;
          border-radius: vw(8);
          margin-bottom: vw(18);
          display: flex;
          flex-direction: column;
          align-items: center;
          // 商品图片
          .commodityImg {
            width: vw(214);
            height: vw(268);
            background-color: red;
            margin: vw(31) 0 vw(43);
          }
          // 商品名字
          .commodityName {
            width: vw(304);
            height: vw(65);
            font-size: vw(24);
            font-weight: 400;
            color: #ffffff;
            line-height: vw(33);
            letter-spacing: vw(1);
            margin-bottom: vw(15);
          }
          // 商品价钱
          .commodityPrice {
            width: vw(336);
            height: vw(70);
            line-height: vw(70);
            .commodityPriceSize {
              font-size: vw(56);
              font-weight: 700;
              color: white;
              margin-left: vw(23);
              span {
                font-size: vw(24);
                font-weight: 100;
              }
            }
          }
        }
      }
    }
  }
}
</style>