h5增加协议弹窗

src/components/base/PreviewFiles.vue

-<script setup lang="ts">
-const props = defineProps({
-  item: {
-    type: Object,
-    require: true
-  }
-})
-
-let isShowType = 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/main.ts

@@ -8,7 +8,7 @@ import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import 'element-plus/dist/index.css'
 
-import { Overlay } from 'vant';
+import { Overlay} from 'vant';
 // 2. 引入组件样式
 import 'vant/lib/index.css';
 import Vconsole from 'vconsole'

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'
@@ -208,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' : ''"
@@ -300,15 +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"
-            @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' : ''"
@@ -323,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>
@@ -454,16 +464,35 @@ 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;
       margin: 3.5rem -0.3rem 0;
       height: 1.2rem;
       background: #fff;
@@ -579,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;
@@ -664,4 +711,8 @@ const changeProtocol = () => {
     color: #666666;
   }
 }
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background: #e3a232;
+  border-color: #e3a232;
+}
 </style>

src/modules/shop/views/Index.vue

 <script lang="ts" setup>
 import CourseList from '../components/CourseList.vue'
 import { useShopStore } from '@/stores/shop'
-
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
 const shopStore = useShopStore()
 const handleTabClick = (tab: any) => {
   if (tab.index === '4') {
@@ -152,4 +153,19 @@ const handleTabClick = (tab: any) => {
     display: none;
   }
 }
+:deep(.van-tab--active) {
+  .van-tab__text {
+    color: #c1ab85 !important;
+    font-size: 0.28rem;
+  }
+}
+:deep(.van-tab) {
+  .van-tab__text {
+    color: #333333;
+    font-size: 0.28rem;
+  }
+}
+:deep(.van-tabs__line) {
+  background: #c1ab85 !important;
+}
 </style>