{"version":3,"file":"Pay-2.0.5.js","sources":["../../../../components/Pay.vue"],"sourcesContent":["<template>\r\n  <div>\r\n    <el-dialog\r\n      :modelValue=\"props.show\"\r\n      width=\"450px\"\r\n      destroy-on-close\r\n      style=\"padding: 0\"\r\n      :close-on-click-modal=\"false\"\r\n      @close=\"handleClose\"\r\n      :show-close=\"false\"\r\n    >\r\n      <img class=\"close\" @click=\"handleClose\" src=\"https://static.ppkao.com/www/images/icon-close.png\"/>\r\n\r\n      <div class=\"wrap\">\r\n        <div class=\"box\">\r\n          <div class=\"head\">\r\n            <img src=\"https://static.ppkao.com/www/images/bg-tip.png\"/>\r\n            <p class=\"discount_time\">优惠倒计时：\r\n              <span class=\"swing animated\"> {{ countDown }} </span>\r\n            </p>\r\n          </div>\r\n          <div class=\"tips\" >\r\n            <p class=\"p1\">{{ price.GroupBuyRemark }}</p>\r\n            <p :class=\"{ 'show-discount': showDiscount, 'price': true }\">\r\n              <span class=\"original-price\">\r\n                <span v-if=\"showDiscount\">原价</span>\r\n                <span v-if=\"price.OrigPrice\">{{ price.OrigPrice }}元</span>\r\n              </span>\r\n              <span class=\"discount-price\">{{ price.CurrentPrice }}元</span>\r\n            </p>\r\n            <p class=\"p3\">{{ price.Remarks }}</p>\r\n          </div>\r\n          <div class=\"body\">\r\n            <div class=\"qrcode-box\" :class=\"{'show-desc': unfoldDesc}\">\r\n              <div class=\"qrcode-img\" >\r\n                <el-skeleton style=\"width: 200px\" :loading=\"loading\" animated >\r\n                  <template #template>\r\n                    <el-skeleton-item variant=\"image\" style=\"width: 200px; height: 200px\" />\r\n                  </template>\r\n                  <template #default>\r\n                    <img class=\"icon\" src=\"https://static.ppkao.com/www/images/icon-wechatpay.png\">\r\n                  </template>\r\n                </el-skeleton>\r\n                 <img class=\"qrcode\"\r\n                      :src=\"price.payUrl\"\r\n                      :style=\"{opacity: loading ? '0': '1'}\"\r\n                      @load=\"loading = false\">\r\n                <div v-if=\"timeout\" class=\"timeout-box\" @click=\"refreshQrcode\">\r\n                  <RefreshSvg />\r\n                </div>\r\n              </div>\r\n              <div class=\"footer\">\r\n                <img src=\"https://static.ppkao.com/www/images/icon-scan.png\"/>\r\n                <p>\r\n                  打开微信扫一扫<br>\r\n                  扫描二维码付款\r\n                </p>\r\n              </div>\r\n            </div>\r\n            <div class=\"desc-table\" :class=\"{'hide-table': !unfoldDesc}\" >\r\n              <div class=\"table-box\">\r\n                <p>1. 搜题包次数扣减规则：</p>\r\n                <table>\r\n                  <thead>\r\n                  <tr>\r\n                    <th rowspan=\"2\">功能(查看答案)</th>\r\n                    <th colspan=\"2\">扣减规则</th>\r\n                  </tr>\r\n                  <tr>\r\n                    <th>基础费</th>\r\n                    <th>加收费<br>（AI功能）</th>\r\n                  </tr>\r\n                  </thead>\r\n                  <tbody>\r\n                    <tr>\r\n                      <td>文字搜题</td>\r\n                      <td>1次/题</td>\r\n                      <td>0/每次</td>\r\n                    </tr>\r\n                    <tr>\r\n                      <td>语音搜题</td>\r\n                      <td>1次/题</td>\r\n                      <td>0/每次</td>\r\n                    </tr>\r\n                    <tr>\r\n                      <td>拍照识别</td>\r\n                      <td>1次/题</td>\r\n                      <td>0/每次</td>\r\n                    </tr>\r\n                  </tbody>\r\n                </table>\r\n                <p>2.充值条款：搜题次数单价0.2元/次，本搜题包为优惠套餐，不退款，过期后不进行补发或延长有效期</p>\r\n              </div>\r\n            </div>\r\n            <div class=\"description\" @click=\"unfoldDesc = !unfoldDesc\">\r\n              <div class=\"circle\">\r\n                <div class=\"triangle\" :style=\"{transform: unfoldDesc ? 'rotate(180deg)' : 'rotate(0deg)'}\"></div>\r\n              </div>\r\n              <span>权益说明</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"btn\">\r\n            <button v-wave @click=\"() => queryOrder()\" :class=\"{'loading': querying}\">\r\n              <img src=\"https://static.ppkao.com/www/images/icon-refresh.png\">\r\n              <span>点击查询支付结果</span>\r\n            </button>\r\n          <el-popover\r\n            trigger=\"click\"\r\n            placement=\"top\"\r\n            :effect=\"effect\"\r\n          >\r\n            <template #reference>\r\n              <span class=\"kf-btn\" >已付款但还是不能看答案？</span>\r\n            </template>\r\n            <div class=\"kf-box\">\r\n              <img src=\"https://static.ppkao.com/public/wxqrcode/pptiku.jpg\" alt=\"联系客服\"/>\r\n              <span>微信扫一扫后联系客服</span>\r\n            </div>\r\n          </el-popover>\r\n\r\n        </div>\r\n      </div>\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nimport { getSearchPack, getActivityDate, placeOrder, getOrderID } from '~/api';\r\nimport RefreshSvg from '@/assets/svgs/refresh.svg'\r\n\r\nconst modalStore = useModalStore()\r\nconst props = defineProps({\r\n  show: {\r\n    type: Boolean,\r\n    required: true,\r\n    default: false\r\n  }\r\n});\r\nconst effect = computed(() => useNuxtApp().$darkMode.isDarkMode.value ? 'dark' : 'light');\r\nlet timer; // 倒计时\r\nconst loading = ref(true); // 购买二维码图片是否加载中\r\nconst querying = ref(false); // 查询订单状态\r\nconst countDown = ref(''); // 页面的定时器\r\nconst showDiscount = ref(false); // 显示折扣价的控制动画\r\nconst unfoldDesc = ref(false); // 控制权益列表展开显示\r\nconst timeout = ref(false);\r\nlet price = reactive({});\r\nconst emit = defineEmits();\r\n\r\nconst handleClose = () => {\r\n  clearInterval(timer);\r\n  modalStore.setModal('pay', false);\r\n  showDiscount.value = false;\r\n  loading.value = true;\r\n  countDown.value = null;\r\n  price = reactive({});\r\n  timeout.value = false;\r\n};\r\n\r\n// 监听 prop 的变化，并更新本地状态\r\nwatch(() => props.show, (newValue) => {\r\n  if (newValue) {\r\n    getActivityDate(countDown);\r\n    // 获取搜题包价格\r\n    refreshQrcode();\r\n  }\r\n});\r\nconst refreshQrcode = () => {\r\n  timeout.value = false;\r\n  loading.value = true;\r\n  getSearchPack()\r\n    .then(res => {\r\n      let count = 0;\r\n      price =  res.pList[0];\r\n      price.GroupBuyRemark = price.GroupBuyRemark.replace(new RegExp(`${price.CurrentPrice}元`, 'g'), '');\r\n\r\n      placeOrder({\r\n        PID: price.ID,\r\n        PaymentID: 17\r\n      }).then(res => {\r\n        const { payUrl, OrderID } = res;\r\n        Object.assign(price,{ payUrl, OrderID});\r\n        timer = setInterval(() => {\r\n          if (count >= 60) { // 1分钟查询一次\r\n            clearInterval(timer);// 查询了两分钟后没有结果就关闭查询\r\n            return;\r\n          }\r\n\r\n          queryOrder(OrderID);\r\n          count++;\r\n        }, 2000)\r\n      })\r\n      setTimeout(() => {\r\n        showDiscount.value = true;\r\n      }, 750);  // 0.75秒延迟\r\n    }).catch(err => {\r\n      timeout.value = true;\r\n      loading.value = false;\r\n      console.error('[捕获请求超时]:', err)\r\n  });\r\n}\r\nconst queryOrder = (OrderID) => {\r\n  if (!OrderID) {\r\n    clearInterval(timer);\r\n    if (querying.value) return;\r\n    querying.value = true;\r\n  }\r\n  getOrderID({ OrderID: OrderID || price.OrderID })\r\n    .then(res => {\r\n      if (res.S === '1' && res.OrderModel[0].Status === '1') {\r\n         // 支付成功\r\n        ElMessage.success('支付成功~');\r\n        handleClose();\r\n        emit('success');\r\n      } else if(!OrderID){\r\n        ElMessage({\r\n          type: 'warning',\r\n          message: '未查询到购买成功的结果,如有问题请点击联系客服',\r\n          grouping: true\r\n        });\r\n      }\r\n    }).finally(() =>  querying.value = false);\r\n}\r\n</script>\r\n<style>\r\n:root {\r\n  --pay-btn-border: #ff5655;\r\n  --pay-btn-bg: #fff3f3;\r\n  --pay-btn-color: #ff5655;\r\n  --orig-color: #999;\r\n  --p1-color: #333333;\r\n}\r\nhtml.dark {\r\n  --pay-btn-border: var(--primary-text-color);\r\n  --pay-btn-bg: var(--black-btn-border);\r\n  --pay-btn-color: var(--btn-search-text-color);\r\n  --orig-color: #d9d9d9;\r\n  --p1-color: #a9a9a9;\r\n}\r\n.el-message {\r\n  z-index: 3333 !important;\r\n}\r\n</style>\r\n<style scoped lang=\"scss\">\r\n:deep(.el-dialog__header) {\r\n  display: none;\r\n}\r\n.close {\r\n  position: absolute;\r\n  right: -50px;\r\n  width: 38px;\r\n  cursor: pointer;\r\n}\r\n.wrap {\r\n  background-color: var(--card-bg-color);\r\n}\r\n.box {\r\n  overflow: hidden;\r\n  padding: 2px;\r\n  .head {\r\n    background: url(\"https://static.ppkao.com/www/images/bg-pay.png\") no-repeat;\r\n    width: 100%;\r\n    height: 100px;\r\n    background-size: 100% 100%;\r\n    position: relative;\r\n    img {\r\n      position: absolute;\r\n      top: 10px;\r\n      left: 2px;\r\n    }\r\n    .discount_time {\r\n      @include font(#fff, 14px);\r\n      display: flex;\r\n      align-items: flex-end;\r\n      position: absolute;\r\n      left: 10px;\r\n      bottom: 10px;\r\n      span {\r\n        display: block;\r\n        @include font(#f5e507, 24px);\r\n        text-shadow: 1px 1px 8px #f54340;\r\n      }\r\n    }\r\n\r\n  }\r\n  .tips {\r\n    @include flex-col-center;\r\n    padding: 15px 0;\r\n    .p1 {\r\n      @include font(var(--p1-color), 16px);\r\n    }\r\n    .price {\r\n      width: 100%;\r\n      height: 40px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center; // 保持内容居中\r\n      position: relative;\r\n\r\n      .original-price {\r\n        @include font(var(--title-color), 20px, 600);\r\n        transition: transform 0.4s ease, opacity 0.4s ease; // 延长动画时间\r\n        display: inline-block;\r\n        opacity: 1;\r\n\r\n      }\r\n\r\n      .discount-price {\r\n        @include font(var(--title-color), 24px, 600);\r\n        transform: scale(0.1); // 初始缩小\r\n        opacity: 0;\r\n        transition: transform 0.4s ease, opacity 0.3s ease;\r\n        transition-delay: 0.3s; /* 整体延迟 */\r\n        display: inline-block;\r\n        position: absolute;\r\n      }\r\n    }\r\n\r\n    .show-discount {\r\n      .original-price {\r\n        @include font(var(--orig-color), 14px);\r\n        transform: translate(-84px, 3px) scale(0.8); // 左滑并缩小\r\n        opacity: 0.6;\r\n        span:last-child {\r\n          text-decoration: line-through;\r\n        }\r\n      }\r\n      .discount-price {\r\n        opacity: 1;\r\n        transform: scale(1); // 居中并放大\r\n      }\r\n    }\r\n\r\n    .p3 {\r\n      @include font(#a5a5a5, 14px);\r\n    }\r\n  }\r\n  .body {\r\n    border-radius: 10px;\r\n    justify-content: center;\r\n    margin: 0 auto;\r\n    position: relative;\r\n    @include flex-y-center;\r\n    .description {\r\n      position: absolute;\r\n      right: 0;\r\n      @include flex-y-center;\r\n      cursor: pointer;\r\n      .circle {\r\n        padding: 6px;\r\n        background-color: rgba(0,0,0,0.05);\r\n        border-radius: 50%;\r\n        @include flex-center;\r\n        animation: moveLeftRight 1.5s infinite alternate;\r\n      }\r\n\r\n      .triangle {\r\n        width: 0;\r\n        height: 0;\r\n        border-top: 4px solid transparent;\r\n        border-bottom: 4px solid transparent;\r\n        border-right: 7px solid #ff5655;\r\n      }\r\n      span {\r\n        writing-mode: vertical-rl;\r\n        @include font(#ff5655, 14px, 600);\r\n        padding: 0 6px;\r\n      }\r\n    }\r\n\r\n    .qrcode-box {\r\n      transition: all .4s;\r\n      background: var(--bg-color);\r\n      border: 1px solid var(--border-2-color);\r\n      box-shadow: 0 2px 6px 0 rgba(228, 215, 215, 0);\r\n      font-size: 14px;\r\n      .qrcode-img {\r\n        width: 200px;\r\n        height: 200px;\r\n        transition: all .4s;\r\n        position: relative;\r\n        @include flex-center;\r\n        .qrcode {\r\n          width: 100%;\r\n          height: 100%;\r\n          position: absolute;\r\n          z-index: 1;\r\n        }\r\n        .icon {\r\n          width: 32px;\r\n          position: absolute;\r\n          z-index: 2;\r\n          transition: all .4s;\r\n        }\r\n      }\r\n      .footer {\r\n        width: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 6px;\r\n        justify-content: center;\r\n        img {\r\n          width: 30px;\r\n          transition: all .4s;\r\n        }\r\n        p {\r\n          @include font(var(--primary-text-color), 14px, 500);\r\n          line-height: 18px;\r\n          margin-left: 12px;\r\n          transition: all .4s;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n.btn {\r\n  padding: 10px 60px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  button {\r\n    border: 1px solid var(--pay-btn-border);\r\n    font-weight: 600;\r\n    @include btn(100%, 50px, var(--pay-btn-bg), 5px, 16px, var(--pay-btn-color));\r\n    span {\r\n      margin-left: 10px;\r\n    }\r\n  }\r\n  .loading {\r\n    cursor: not-allowed;\r\n    img {\r\n      animation: rotate 0.6s linear infinite;\r\n    }\r\n  }\r\n  .kf-btn {\r\n    cursor: pointer;\r\n    @include font(var(--primary-text-color), 14px);\r\n    text-decoration-line: underline;\r\n    margin-top: 10px;\r\n  }\r\n}\r\n\r\n@keyframes swing {\r\n   20% {\r\n     transform: rotate(4deg);\r\n   }\r\n   40% {\r\n     transform: rotate(-2deg);\r\n   }\r\n   60% {\r\n     transform: rotate(0deg);\r\n   }\r\n   80% {\r\n     transform: rotate(-2deg);\r\n   }\r\n   to {\r\n     transform: rotate(0deg);\r\n   }\r\n }\r\n\r\n.animated {\r\n  transform-origin: top center;\r\n  animation: swing 1s infinite;\r\n}\r\n@keyframes moveLeftRight {\r\n  0% {\r\n    transform: translateX(4px); /* 右移到圆心右侧 */\r\n  }\r\n  100% {\r\n    transform: translateX(-2px); /* 左移到圆心左侧 */\r\n  }\r\n}\r\n@keyframes rotate {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n.show-desc {\r\n  .qrcode-img {\r\n    width: 150px !important;\r\n    height: 150px !important;\r\n  }\r\n  .icon {\r\n    width: 26px !important;\r\n  }\r\n  .footer {\r\n    img {\r\n      width: 26px !important;\r\n    }\r\n    p {\r\n      font-size: 12px !important;\r\n      margin-left: 8px !important;\r\n    }\r\n  }\r\n}\r\n.hide-table {\r\n  max-width: 0 !important;\r\n}\r\n.desc-table {\r\n  align-self: flex-start;\r\n  max-width: 50%;\r\n  transition: max-width .3s;\r\n  overflow: hidden;\r\n  max-height: 250px;\r\n  .table-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 0 14px;\r\n    text-align: justify;\r\n    @include font(#657180, 12px);\r\n    line-height: 16px;\r\n\r\n    p {\r\n      padding: 6px 0;\r\n      font-size: 12px;\r\n    }\r\n    p:nth-child(1) {\r\n      padding-top: 0;\r\n    }\r\n    table {\r\n      width: 100%;\r\n      border: 1px solid #C7C7C7;\r\n      border-top: 0;\r\n      border-right: 0;\r\n      th {\r\n        vertical-align: middle;\r\n        background-color: #9AA7B8;\r\n        @include font(#FFFFFF, 12px, 600);\r\n        text-align: center;\r\n        border-top: 1px solid #C7C7C7;\r\n        border-right: 1px solid #C7C7C7;\r\n        padding: 2px 0;\r\n      }\r\n      td {\r\n        text-align: center;\r\n        @include font(var(--primary-text-color), 12px);\r\n        border-right: 1px solid #C7C7C7;\r\n        border-bottom: 1px solid #C7C7C7;\r\n        padding: 4px;\r\n      }\r\n\r\n    }\r\n  }\r\n}\r\n.kf-box {\r\n  @include flex-col-center;\r\n  img {\r\n    width: 120px;\r\n  }\r\n  span {\r\n    text-align: center;\r\n    margin-top: 6px;\r\n    @include font(var(--title-color))\r\n  }\r\n}\r\n.timeout-box {\r\n  cursor: pointer;\r\n  @include flex-center;\r\n  width: 100%;\r\n  height: 100%;\r\n  position: absolute;\r\n  z-index: 100;\r\n  backdrop-filter: blur(4px);\r\n  -webkit-filter: blur(.6);\r\n  filter: blur(.6);\r\n  text-align: center;\r\n  @include font(var(--primary-text-color), 16px, 600);\r\n  background: hsla(0, 0%, 100%, .6);\r\n  -webkit-backdrop-filter: blur(4px);\r\n  span {\r\n    line-height: 24px;\r\n    @include font(#050505, 16px, 600);\r\n  }\r\n  svg {\r\n    background-color: #fff;\r\n    width: 2em;\r\n    fill: #ff5655;\r\n    border-radius: 50%;\r\n    overflow: hidden;\r\n  }\r\n}\r\n\r\n</style>\r\n"],"names":["modalStore","useModalStore","props","__props","effect","computed","useNuxtApp","timer","loading","ref","querying","countDown","showDiscount","unfoldDesc","timeout","price","reactive","emit","__emit","handleClose","watch","newValue","getActivityDate","refreshQrcode","getSearchPack","res","count","placeOrder","payUrl","OrderID","setInterval","queryOrder","err","getOrderID","ElMessage"],"mappings":"g2BAoIA,MAAAA,EAAAC,EAAA,EACAC,EAAAC,EAOAC,EAAAC,EAAA,IAAAC,EAAA,EAAA,UAAA,WAAA,MAAA,OAAA,OAAA,EACA,IAAAC,EACA,MAAAC,EAAAC,EAAA,EAAA,EACAC,EAAAD,EAAA,EAAA,EACAE,EAAAF,EAAA,EAAA,EACAG,EAAAH,EAAA,EAAA,EACAI,EAAAJ,EAAA,EAAA,EACAK,EAAAL,EAAA,EAAA,EACA,IAAAM,EAAAC,EAAA,EAAA,EACA,MAAAC,EAAAC,EAEAC,EAAA,IAAA,CACA,cAAAZ,CAAA,EACAP,EAAA,SAAA,MAAA,EAAA,EACAY,EAAA,MAAA,GACAJ,EAAA,MAAA,GACAG,EAAA,MAAA,KACAI,EAAAC,EAAA,EAAA,EACAF,EAAA,MAAA,EACA,EAGAM,EAAA,IAAAlB,EAAA,KAAAmB,GAAA,CACAA,IACAC,EAAAX,CAAA,EAEAY,EAAA,EAEA,CAAA,EACA,MAAAA,EAAA,IAAA,CACAT,EAAA,MAAA,GACAN,EAAA,MAAA,GACAgB,EAAA,EACA,KAAAC,GAAA,CACA,IAAAC,EAAA,EACAX,EAAAU,EAAA,MAAA,CAAA,EACAV,EAAA,eAAAA,EAAA,eAAA,QAAA,IAAA,OAAA,GAAAA,EAAA,YAAA,IAAA,GAAA,EAAA,EAAA,EAEAY,EAAA,CACA,IAAAZ,EAAA,GACA,UAAA,EACA,CAAA,EAAA,KAAAU,GAAA,CACA,KAAA,CAAA,OAAAG,EAAA,QAAAC,CAAA,EAAAJ,EACA,OAAA,OAAAV,EAAA,CAAA,OAAAa,EAAA,QAAAC,CAAA,CAAA,EACAtB,EAAAuB,EAAA,IAAA,CACA,GAAAJ,GAAA,GAAA,CACA,cAAAnB,CAAA,EACA,MACA,CAEAwB,EAAAF,CAAA,EACAH,GACA,EAAA,GAAA,CACA,CAAA,EACA,WAAA,IAAA,CACAd,EAAA,MAAA,EACA,EAAA,GAAA,CACA,CAAA,EAAA,MAAAoB,GAAA,CACAlB,EAAA,MAAA,GACAN,EAAA,MAAA,GACA,QAAA,MAAA,YAAAwB,CAAA,CACA,CAAA,CACA,EACAD,EAAAF,GAAA,CACA,GAAA,CAAAA,EAAA,CAEA,GADA,cAAAtB,CAAA,EACAG,EAAA,MAAA,OACAA,EAAA,MAAA,EACA,CACAuB,EAAA,CAAA,QAAAJ,GAAAd,EAAA,OAAA,CAAA,EACA,KAAAU,GAAA,CACAA,EAAA,IAAA,KAAAA,EAAA,WAAA,CAAA,EAAA,SAAA,KAEQS,EAAS,QAAA,OAAA,EACjBf,EAAA,EACAF,EAAA,SAAA,GACAY,GACQK,EAAS,CACjB,KAAA,UACA,QAAA,0BACA,SAAA,EACA,CAAA,CAEA,CAAA,EAAA,QAAA,IAAAxB,EAAA,MAAA,EAAA,CACA"}