h5新增协议弹窗

src/components/base/PreviewFiles.vue

-<script setup lang="ts">
-const props = defineProps({
-  item: {
-    type: Object,
-    require: true
-  }
-})
-
-const isShowType: any = ref(1)
-// 判断用什么标签展示内容
-if (
-  props.item?.url?.indexOf('.pdf') !== -1 ||
-  props.item?.url?.indexOf('.txt') !== -1
-) {
-  isShowType.value = 2
-} else if (props.item?.url?.indexOf('.mp4') !== -1) {
-  isShowType.value = 3
-} else if (props.item?.url?.indexOf('.mp3') !== -1) {
-  isShowType.value = 4
-} else if (
-  props.item?.url?.indexOf('.png') !== -1 ||
-  props.item?.url?.indexOf('.jpg') !== -1 ||
-  props.item?.url?.indexOf('.jpeg') !== -1
-) {
-  isShowType.value = 5
-} else if (
-  props.item?.url?.indexOf('.rar') !== -1 ||
-  props.item?.url?.indexOf('.zip') !== -1
-) {
-  isShowType.value = 6
-}
-</script>
-
-<template>
-  <el-card>
-    <div class="max-w-h">
-      <iframe
-        v-if="isShowType === 1"
-        :src="`https://view.officeapps.live.com/op/view.aspx?src=${props.item?.url}`"
-      ></iframe>
-      <embed :src="props.item?.url" v-else-if="isShowType === 2" />
-      <video v-else-if="isShowType === 3" controls id="video">
-        <source :src="props.item?.url" />
-      </video>
-      <audio
-        v-else-if="isShowType === 4"
-        :src="props.item?.url"
-        controls
-      ></audio>
-      <img v-else-if="isShowType === 5" :src="props.item?.url" />
-      <div v-else-if="isShowType === 6" class="zip_con">
-        <a :href="props.item?.url" style="color: #aa1941">
-          <img
-            v-if="props.item?.url?.indexOf('.rar') !== -1"
-            src="https://webapp-pub.ezijing.com/center_resource/rar.png"
-            class="img_zip"
-          />
-
-          <img
-            v-else-if="props.item?.url?.indexOf('.zip') !== -1"
-            src="https://webapp-pub.ezijing.com/center_resource/zip.png"
-            class="img_zip"
-          />
-          {{ props.item?.name }}
-        </a>
-
-        <div class="zip_tips">
-          * 该文件格式暂不支持预览,可点击上方文件名下载
-        </div>
-      </div>
-    </div>
-  </el-card>
-</template>
-<style lang="scss" scoped>
-.max-w-h {
-  // max-width: 1200px;
-  width: 100%;
-  height: 600px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  iframe,
-  embed,
-  video {
-    width: 100%;
-    height: 100%;
-  }
-  .zip_con {
-    border: 1px solid #ccc;
-    width: 100%;
-    display: block;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-  .img_zip {
-    width: 100px;
-    height: 100px;
-    margin: auto;
-  }
-  .zip_tips {
-    font-size: 14px;
-    margin-top: 10px;
-  }
-  img {
-    width: 100%;
-    display: block;
-  }
-}
-</style>

src/modules/pay/components/Confirm.vue

 <script setup lang="ts">
-import PreviewFiles from '@/components/base/PreviewFiles.vue'
 import { ElMessage } from 'element-plus'
 import { Check } from '@element-plus/icons-vue'
 import { useUserStore } from '@/stores/user'
 import { useDevice } from '@/composables/useDevice'
-import queryString from 'query-string'
-import { getOpenId, wxJSPay } from '@/utils/wxpay'
+import { wxJSPay, getOpenId } from '@/utils/wxpay'
 import { createOrder, getOrderList } from '../api'
+import queryString from 'query-string'
 const router = useRouter()
 const { mobile, wechat, alipay } = useDevice()
 const user = useUserStore()
@@ -19,14 +18,11 @@ const dialogVisible = ref(false)
 const item = ref({
   url: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/%E7%B4%AB%E8%8D%86%E6%95%99%E8%82%B2%E7%94%A8%E6%88%B7%E5%85%A5%E9%A9%BB%E5%8F%8A%E7%BD%91%E7%BB%9C%E6%95%99%E5%AD%A6%E8%B5%84%E6%BA%90%E5%8D%8F%E8%AE%AE(1).docx'
 })
-const orderInfo: any = ref([])
-const orderInfoDetail: any = ref([])
+const orderInfo: any = ref({})
 const payMode = ref(1)
 const isAgree = ref(false)
-const currentCheck = ref('12')
-const query = $computed(() => {
-  return queryString.parse(location.search, { parseBooleans: true })
-})
+const currentCheck = ref('4')
+const orderInfoDetail: any = ref([])
 function getDateTime(dayNum: any) {
   const dateDay = new Date()
   dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期
@@ -41,77 +37,41 @@ function getDateTime(dayNum: any) {
 }
 const start_time = getDateTime(0)
 const end_time = getDateTime(90)
+
 const emit = defineEmits<{
   (e: 'success', params: object): void
 }>()
-
-// 创建订单
-const handleCreateOrder = () => {
-  if (wechat) {
-    const openId = localStorage.getItem('openId')
-    if (!openId) {
-      getOpenId(query.code, pay)
-      return Promise.reject('openId不存在')
-    }
-    pay()
-  } else if (alipay) {
-    pay()
-  }
+const checkdChange = (val: string) => {
+  currentCheck.value = val
 }
-// 去支付
-function pay() {
-  const params: any = {
+const optionParams = reactive({
   shop_id: '6998523899570814976',
   spu_id: '6998525810348916736',
   sku_id: '6998525810365693952',
   redirect_url: '',
   buy_count: '1',
+  payment_method: '',
   notify_url: `https://ep-lms-api.ezijing.com/v2/student/push?tenant=paa&sso_id=${user.user?.id}&class_id=${props.shopItem?.class_id}&course_flag=1&course_id=${props.shopItem?.course_id}`
-  }
-  if (payMode.value === 4 && wechat) {
-    params.payment_method = '4'
-    // 微信扫码支付
-  } else if (payMode.value === 12 && alipay) {
-    params.payment_method = '12'
-  }
-  createOrder(params).then((order) => {
-    orderInfo.value = order
-    if (wechat) {
-      wxJSPay(order, getOrder())
-    } else if (alipay) {
-      location.href = orderInfo.value[0]?.payment_url
-    }
-  })
-}
+})
 
-// 获取订单
-function getOrder() {
-  return getOrderList({
-    order_detail_id: orderInfo.value[0].order_detail_id
-  }).then((resp) => {
-    orderInfoDetail.value = resp.data[0]
-    const params = {
-      status: 'success',
-      orderId: orderInfoDetail.value.order_id,
-      payPrice: orderInfoDetail.value.payment_money,
-      payStatus: orderInfoDetail.value.order_status
-    }
-    emit('success', params)
-  })
-}
+// 点击立即购买
 const handlePay = () => {
   if (isAgree.value === false) {
     ElMessage.warning('请先勾选紫荆金保服务协议')
   } else {
     if (user.isLogin) {
       if (!mobile.value) {
+        //pc
         const params = {
           payMode: payMode.value,
           status: 'order'
         }
         emit('success', params)
       } else {
-        handleCreateOrder()
+        //H5
+        if (mobile && (wechat || alipay)) {
+          pay()
+        }
       }
     } else {
       window.location.href = `${
@@ -120,8 +80,72 @@ const handlePay = () => {
     }
   }
 }
-const checkdChange = (val: string) => {
-  currentCheck.value = val
+
+// 去支付
+const pay = () => {
+  console.log('999')
+  createOrderHandle().then((order: any) => {
+    orderInfo.value = order
+    if (wechat) {
+      wxJSPay(order, payCallback(optionParams))
+    } else {
+      location.href = order.payment_url // '4' \ '12'
+      getOrder()
+    }
+  })
+}
+
+// 支付回调
+const payCallback = async (options: any) => {
+  const { callback } = options
+  const order = await getOrder()
+  callback && callback(order)
+
+  const params = {
+    status: 'success',
+    orderId: order.order_id,
+    payPrice: order.payment_money,
+    payStatus: order.order_status
+  }
+  orderInfoDetail.value = order.order_status
+  emit('success', params)
+}
+
+// 创建订单
+const createOrderHandle = () => {
+  let defaultParams = {}
+  // 微信内
+  if (wechat) {
+    const openId = localStorage.getItem('openId')
+    if (!openId) {
+      getOpenId(
+        queryString.parse(location.search, { parseBooleans: true }).code,
+        pay
+      )
+      return Promise.reject('openId不存在')
+    }
+    defaultParams = { open_id: openId, payment_method: '3' }
+  }
+
+  // 支付宝网页支付
+  if (currentCheck.value === '12') {
+    defaultParams = { payment_method: '12' }
+  }
+  //微信外微信h5支付
+  if (currentCheck.value === '4') {
+    defaultParams = { payment_method: '4' }
+  }
+  const params = Object.assign(optionParams, defaultParams)
+  return createOrder(params).then((resp: any) => resp.data)
+}
+
+// 获取订单
+function getOrder() {
+  return getOrderList({
+    order_detail_id: orderInfo.value.order_detail_id
+  }).then((resp) => {
+    return resp.data[0]
+  })
 }
 const handlePrev = () => {
   router.push({
@@ -135,7 +159,6 @@ const changeProtocol = () => {
   dialogVisible.value = false
 }
 </script>
-
 <template>
   <div>
     <div class="main_con" v-if="!mobile">
@@ -184,15 +207,10 @@ const changeProtocol = () => {
         </div>
         <div class="con_footer">
           <div class="footer_left">
-            <el-checkbox v-model="isAgree"
-              ><span style="color: #666666; font-size: 16px; font-weight: 400"
-                >同意</span
-              ><a
-                style="color: #e3a232; font-size: 16px; font-weight: 400"
-                @click="dialogVisible = true"
-                >紫荆金保服务协议</a
-              ></el-checkbox
-            >
+            <div class="left_top">
+              <el-checkbox v-model="isAgree"> <span>同意</span></el-checkbox
+              ><a @click="dialogVisible = true">紫荆金保服务协议</a>
+            </div>
             <div
               class="left_desc"
               :class="isAgree === false ? 'left_desc_active' : ''"
@@ -221,7 +239,13 @@ const changeProtocol = () => {
         <div class="nav_title">确认订单</div>
       </div>
       <div class="course_con">
-        <img :src="shopItem?.image_url" alt="" />
+        <img
+          :src="
+            shopItem?.image_url ||
+            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F56e7995e3501f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671671981&t=0eb627c761e6567a3a0a29163b31aac0'
+          "
+          alt=""
+        />
         <div class="course_dec">
           <div class="info_title">{{ shopItem?.title }}</div>
           <div class="info_date">
@@ -241,7 +265,9 @@ const changeProtocol = () => {
             />
             <div class="radio_tit">支付宝支付</div>
             <div
-              :class="payMode === 1 ? 'radio_check_active' : 'radio_check'"
+              :class="
+                currentCheck === '12' ? 'radio_check_active' : 'radio_check'
+              "
               @click="checkdChange('12')"
             >
               <template v-if="currentCheck === '12'">
@@ -255,7 +281,9 @@ const changeProtocol = () => {
             />
             <div class="radio_tit">微信支付</div>
             <div
-              :class="payMode === 2 ? 'radio_check_active' : 'radio_check'"
+              :class="
+                currentCheck === '4' ? 'radio_check_active' : 'radio_check'
+              "
               @click="checkdChange('4')"
             >
               <template v-if="currentCheck === '4'">
@@ -266,13 +294,12 @@ const changeProtocol = () => {
         </div>
       </div>
       <div class="argreement_con">
-        <el-checkbox v-model="isAgree"
-          ><span style="color: #666666; font-size: 16px; font-weight: 400"
-            >同意</span
-          ><a style="color: #e3a232; font-size: 16px; font-weight: 400"
-            >紫荆金保服务协议</a
-          ></el-checkbox
-        >
+        <div class="left_top">
+          <el-checkbox v-model="isAgree">
+            <span>同意</span>
+          </el-checkbox>
+          <a @click="dialogVisible = true">紫荆金保服务协议</a>
+        </div>
         <div
           class="left_desc"
           :class="isAgree === false ? 'left_desc_active' : ''"
@@ -287,10 +314,29 @@ const changeProtocol = () => {
         </div>
       </div>
     </div>
-    <el-dialog v-model="dialogVisible" title="提示" width="850px">
-      <PreviewFiles :item="item"></PreviewFiles>
+    <el-dialog v-model="dialogVisible" :width="!mobile ? '50%' : '90%'">
+      <div style="height: 600px" v-if="!mobile">
+        <iframe
+          :src="`https://view.officeapps.live.com/op/view.aspx?src=${item?.url}`"
+          frameborder="0"
+          width="100%"
+          height="100%"
+        ></iframe>
+      </div>
+      <div v-else style="height: 8rem">
+        <iframe
+          :src="`https://view.xdocin.com/xdoc?_xdoc=${item?.url}`"
+          frameborder="0"
+          width="100%"
+          height="100%"
+        ></iframe>
+      </div>
+
       <template #footer>
-        <el-button type="primary" @click="changeProtocol"
+        <el-button
+          type="primary"
+          @click="changeProtocol"
+          style="background-color: #e3a232; border: none"
           >我已阅读并同意</el-button
         >
       </template>
@@ -346,11 +392,11 @@ const changeProtocol = () => {
           color: #333333;
         }
         .info_date {
-          height: 0.22rem;
           font-size: 0.22rem;
           font-weight: 400;
           line-height: 0.3rem;
           color: #999999;
+          white-space: nowrap;
         }
       }
     }
@@ -418,17 +464,36 @@ const changeProtocol = () => {
     }
     .argreement_con {
       text-align: center;
+      .left_top {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .el-checkbox__label {
+          span {
+            color: #666666;
+            font-size: 0.24rem;
+            font-weight: 400;
+          }
+        }
+        a {
+          font-weight: 400;
+          font-size: 0.24rem;
+          color: #e3a232 !important;
+          margin-top: 0.02rem;
+        }
+      }
       .left_desc {
-        color: #8888;
-        margin-left: 0.3rem;
+        color: #999999;
+        font-size: 0.24rem;
+        margin-left: 0.9rem;
+        cursor: pointer;
+      }
+      .left_desc_active {
+        color: #aa1941;
       }
     }
     .to_pay_main {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
+      margin: 3.5rem -0.3rem 0;
       height: 1.2rem;
       background: #fff;
       opacity: 1;
@@ -543,11 +608,29 @@ const changeProtocol = () => {
       justify-content: space-between;
       .footer_left {
         padding-top: 12px;
+        .left_top {
+          display: flex;
+          align-items: center;
+          .el-checkbox__label {
+            span {
+              color: #666666;
+              font-size: 16px;
+              font-weight: 400;
+            }
+          }
+          a {
+            color: #e3a232;
+            font-size: 16px;
+            font-weight: 400;
+            margin-top: -1px;
+          }
+        }
         .left_desc {
           font-size: 14px;
           font-weight: 400;
           color: #999999;
           margin: 14px 0 0 21px;
+          cursor: pointer;
         }
         .left_desc_active {
           color: #aa1941;
@@ -628,4 +711,8 @@ const changeProtocol = () => {
     color: #666666;
   }
 }
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background: #e3a232;
+  border-color: #e3a232;
+}
 </style>