add:bendi xiugai

api/technical.js

+import sendRequest from '~/utils/request.js';
+
+export const fetchLifeCycle = () =>
+  sendRequest('/business/lifeCycle/tree', 'get', {});
+
+export const fetchUnitList = () =>
+  sendRequest('/business/technicalService/list', 'get', {
+    chkqCompanyType: "6",
+    chkqCompanyUnitCategory: "1"
+  });
+
+export const fetchExpertList = () =>
+  sendRequest('/business/expExpert/type/list', 'get', {});
\ No newline at end of file

nuxt.config.js

@@ -20,7 +20,6 @@ export default {
 
     ],
     script: [
-      { src: 'js/swiper-bundle.min.js', body: true },
       {
         type: 'text/javascript',
         src: '/js/sj.js',
@@ -46,16 +45,19 @@ export default {
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
+    // 引入 Swiper 样式
+    'swiper/swiper-bundle.css',
     "static/css/reset.css",
     "static/css/common.css",
     'element-ui/lib/theme-chalk/index.css',
-    'animate.css/animate.css'  //这里使用的wowjs库里面的css，如果需要animate官方的动画，可自行下载、配置
+    'animate.css/animate.css'
   ],
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
     { src: '~/plugins/element-ui.js', ssr: false },
     { src: '~/plugins/amap.js', mode: 'client' },
-    { src: '~/plugins/wow.js', ssr: false }
+    { src: '~/plugins/wow.js', ssr: false },
+    { src: '~/plugins/swiper.js', ssr: false }
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -73,14 +75,26 @@ export default {
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
-    extend(config, ctx) {
+    extend(config, { isDev, isClient }) {
+      // 跳过图片文件打包
+      config.module.rules.forEach(rule => {
+        if (rule.test.toString().includes('png|jpe?g|gif|webp')) {
+          rule.use = [{
+            loader: 'file-loader',
+            options: {
+              name: isDev ? '[path][name].[ext]' : 'img/[name].[hash:7].[ext]',
+              emitFile: false  // 关键配置：禁止生成打包文件
+            }
+          }]
+        }
+      })
     },
     vendor: ['axios', 'element-ui'] // 为防止重复打包
   },
   env: {
     VUE_APP_File_VIEW: "https://cfkyw-package.oss-cn-beijing.aliyuncs.com",
-    // API_URL: "http://192.168.2.16:12051/chkq" || '/prod-api',
-    API_URL: "https://www.cfkyw.com.cn/prod-api" || '/prod-api',
+    API_URL: "http://192.168.2.16:12051/chkq" || '/prod-api',
+    // API_URL: "https://www.cfkyw.com.cn/prod-api" || '/prod-api',
     GLOBAL_VARIABLE: {
       company: {
         name: '赤峰矿业（集团）有限责任公司',

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "nuxt",
+    "dev": "node --max-old-space-size=8096 ./node_modules/nuxt/bin/nuxt.js",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate"
@@ -16,10 +16,9 @@
     "loadjs": "^4.3.0-rc1",
     "nuxt": "^2.15.8",
     "qs": "^6.9.1",
-    "swiper": "^5.4.5",
+    "swiper": "^8.4.7",
     "vue": "^2.7.10",
     "vue-amap": "^0.5.10",
-    "vue-awesome-swiper": "^4.1.1",
     "vue-lazyload": "^1.3.3",
     "vuex": "3.6.0",
     "wowjs": "^1.1.3"
@@ -29,6 +28,8 @@
     "sass": "^1.49.7",
     "sass-loader": "^10",
     "vue-server-renderer": "^2.7.10",
-    "vue-template-compiler": "^2.7.10"
+    "vue-template-compiler": "^2.7.10",
+    "increase-memory-limit": "^1.0.7",
+    "cross-env": "^7.0.2"
   }
 }

pages/TechnicalDocking/index2.vue

-<template>
-  <div class="seller">
-    <BackToTopButton />
-    <CustomHeader :activeItem="5" />
-    <div class="m2zrCon m2pubCon background-attachment">
-      <div class="container">
-        <div class="banner-inner">
-          <img src="~/static/images/technicalDocking/banner.png" alt="" />
-        </div>
-      </div>
-    </div>
-    <section class="page1">
-      <div class="inner">
-        <TopList
-          class="toplist"
-          :topArr="mineralDictList"
-          @li-click="handleManageClick"
-          :num="Number(page1Num)"
-        >
-          <MineralManage :dataList="MineralManageData" :num="6"></MineralManage>
-        </TopList>
-      </div>
-    </section>
-    <section class="page2">
-      <div class="inner">
-        <h4 class="por">专家库</h4>
-        <TopList
-          class="toplist"
-          :topArr="page2TopArr"
-          @li-click="handleLiClick"
-          :num="Number(page2Num)"
-        >
-          <Expert :dataList="expData" :num="4"></Expert>
-        </TopList>
-      </div>
-    </section>
-    <section class="page3">
-      <div class="inner">
-        <h4 class="por">技术支持单位</h4>
-        <company-carousel :arr="comNameList"></company-carousel>
-      </div>
-    </section>
-    <div class="clear"></div>
-    <Footer></Footer>
-  </div>
-</template>
-<script>
-import sendRequest from "~/utils/request.js";
-import { getDictLabelFromVal, filterByFields } from "~/utils/tyler";
-import CustomHeader from "~/components/CustomHeader.vue";
-import Footer from "~/components/Footer.vue";
-import BackToTopButton from "~/components/BackToTopButton.vue";
-import TopList from "~/components/tech/TopList.vue";
-import MineralManage from "~/components/tech/MineralManage.vue";
-import Expert from "~/components/tech/Expert.vue";
-export default {
-  components: {
-    CustomHeader,
-    sendRequest,
-    Footer,
-    BackToTopButton,
-    TopList,
-    MineralManage,
-    Expert,
-  },
-  data() {
-    return {
-      baseApi: process.env.VUE_APP_File_VIEW,
-      pageTitle: "赤峰矿权-技术服务支持",
-      pageDescription: "赤峰矿权",
-      pageKeywords: "赤峰矿权,赤峰矿业,矿权信息，技术服务支持",
-      carouselNum: 0,
-      activeIndex: 0,
-      active: {
-        color: "#fff",
-        background: "#1961C5",
-      },
-      mineralDictList: [],
-      page2TopArr: [],
-      page2Num: null,
-      page1Num: null,
-      mmqManagementData: [],
-      MineralManageData: [
-        {
-          id: 1,
-          name: "矿业权新立",
-          infor:
-            "1、非油气探（采）矿权新立申请登记书（附电子报盘、原件,申请书含坐标页）。\r\n2、申请人的企业营业执照副本或事业单位法人证书（扫描原件，提交复印件）。\r\n3、勘查工作计划、勘查合同或委托勘查的证明文件（原件）。矿权人自行勘查的无需提供勘查合同或委托勘查的证明文件。\r\n4、勘查实施方案（原件）。\r\n5、探（采）矿权申请人银行资金证明（原件）。\r\n6、旗自然资源主管部门意见（原件）。\r\n7、矿业权出让收益或有偿处置证明材料，包括（复印件）:提供缴款通知书、分期缴款批复或包含矿业权出让收益缴纳时间、方式的矿业权成交确认书、矿业权出让合同以及矿业权出让收益缴纳票据和相关凭证等材料。",
-          icon1: "~/static/images/icon/icon-01-1.png",
-          icon2: "~/static/images/icon/icon-01-2.png",
-        },
-      ],
-      expertNowData: [],
-      expData: [],
-      comNameList: [],
-    };
-  },
-  head() {
-    return {
-      title: this.pageTitle,
-      meta: [
-        { name: "keywords", content: this.pageKeywords },
-        { name: "description", content: this.pageDescription },
-      ],
-    };
-  },
-
-  created() {},
-  mounted() {
-    this.$nextTick(() => {
-      this.getMineralData();
-      this.mmqManagementList();
-      this.expertTypeList();
-
-      this.expertNowList();
-      this.getComData();
-    });
-  },
-  methods: {
-    getDictLabelFromVal,
-    filterByFields,
-    handleManageClick(val) {
-      let that = this;
-      this.page1Num = val;
-      this.MineralManageData = this.filterByFields(that.mmqManagementData, [
-        { type: val },
-      ]);
-    },
-    handleLiClick(val) {
-      console.log(val);
-      let that = this;
-      this.page2Num = val;
-      this.expData = this.filterByFields(that.expertNowData, [{ type: val }]);
-    },
-    async getMineralData() {
-      //矿业权管理类型
-      const dict = await sendRequest("/system/dict/data/list", "get", {
-        dictType: "mineral_manage_category",
-      });
-      this.page1Num = dict.rows[0].dictValue;
-      this.mineralDictList = dict.rows.map((item) => {
-        return {
-          name: item.dictLabel,
-          id: item.dictValue,
-        };
-      });
-    },
-    async mmqManagementList() {
-      //矿业权列表
-      let that = this;
-      const mmqManagement = await sendRequest(
-        "/business/mmqManagement/list",
-        "get",
-        {}
-      );
-
-      this.mmqManagementData = mmqManagement.rows.map((item) => {
-        return {
-          id: item.id,
-          name: item.mmqTitle,
-          icon1: item.mmqIcon1,
-          infor: item.mmqContent,
-          type: item.mmqType,
-        };
-      });
-      this.MineralManageData = this.filterByFields(that.mmqManagementData, [
-        { type: that.page1Num },
-      ]);
-    },
-
-    async expertTypeList() {
-      const expertType = await sendRequest("/system/dict/data/list", "get", {
-        dictType: "cfkq_expert_category",
-      });
-      this.page2Num = expertType.rows[0].dictValue;
-      this.page2TopArr = expertType.rows.map((item) => {
-        return {
-          name: item.dictLabel,
-          id: item.dictValue,
-        };
-      });
-    },
-    async expertNowList() {
-      let that = this;
-      const expertNow = await sendRequest(
-        "/business/expExpert/list",
-        "get",
-        {}
-      );
-      this.expertNowData = expertNow.rows.map((item) => {
-        return {
-          id: item.id,
-          name: item.expName,
-          icon1: item.expImage,
-          infor: item.expNationality,
-          type: item.expType,
-        };
-      });
-      this.expData = this.filterByFields(that.expertNowData, [
-        { type: that.page2Num },
-      ]);
-    },
-    async getComData() {
-      try {
-        let that = this;
-        const comData = await sendRequest(
-          "/business/companyInformation/list",
-          "get",
-          {
-            chkqCompanyType: 6,
-          }
-        );
-        this.comNameList = comData.rows.map((item) => {
-          return {
-            id: item.chkqCompanyId,
-            name: item.chkqCompanyName,
-            logo: item.chkqCompanyLogo,
-            pic: item.chkqCompanyImage,
-            dis: item.chkqCompanyDescription,
-          };
-        });
-      } catch (error) {
-        console.error("Error fetching data:", error);
-      }
-    },
-  },
-
-  beforeDestroy() {
-    window.removeEventListener("resize", this.handleResize);
-  },
-};
-</script>
-<style scoped>
-.container {
-  margin: 0 auto;
-}
-.page1 {
-  background: url(~/static/images/technicalDocking/page1.png) no-repeat center;
-  background-size: cover;
-  overflow: hidden;
-}
-.page2 {
-  background: url(~/static/images/technicalDocking/page2.png) no-repeat center;
-  background-size: cover;
-  overflow: hidden;
-}
-.page3 {
-  width: 100%;
-  background: url("~/static/images/transaction/bg3.png") center no-repeat;
-  background-size: cover;
-  overflow: hidden;
-}
-
-.page2 .inner > h4,
-.page3 .inner > h4 {
-  margin-top: 0.8rem;
-  font-size: 0.4rem;
-  font-weight: 500;
-  color: #fff;
-  line-height: 0.8rem;
-  margin-bottom: 0.3rem;
-  margin-left: 0.3rem;
-}
-.page2 .inner > h4 {
-  color: #1961c5;
-}
-.page2 .inner > h4.por::before,
-.page3 .inner > h4.por::before {
-  content: "";
-  width: 0.89rem;
-  height: 3px;
-  background: #1961c5;
-  border-radius: 1px;
-  position: absolute;
-  bottom: 2px;
-  left: 0;
-}
-@media (min-width: 769px) {
-}
-@media (min-width: 993px) {
-  .toplist {
-    margin-top: 80px;
-  }
-  .page2 .inner > h4,
-  .page3 .inner > h4 {
-    margin-top: 80px;
-    font-size: 40px;
-    font-weight: 500;
-    line-height: 80px;
-    margin-bottom: 30px;
-    margin-left: 0;
-  }
-  .page2 .inner > h4.por::before,
-  .page3 .inner > h4.por::before {
-    content: "";
-    width: 90px;
-    height: 6px;
-    border-radius: 1px;
-    position: absolute;
-    bottom: 2px;
-    left: 0;
-  }
-}
-@media (min-width: 1200px) {
-}
-@media (min-width: 1799px) {
-}
-</style>

pages/Transaction/detail/_id.vue

@@ -246,6 +246,8 @@ export default {
       return result ? result[field] : null;
     },
     changePage(pageNum) {
+      console.log(pageNum, this.searchForm.pageNum, "changePage");
+      this.searchForm.pageNum = pageNum;
       this.getSuggestList();
     },
     clickVolume(id, index) {
@@ -290,7 +292,10 @@ export default {
         this.searchForm
       );
 
-      this.suggestList = result.data.rows;
+      this.suggestList = result.data.rows.map((item) => ({
+        ...item,
+        websiteMiningImage: item.websiteMiningImage || [], // 确保是数组
+      }));
       this.total = result.data.total;
       return Promise.resolve();
     },

pages/Transaction/minDet/_id.vue

@@ -95,7 +95,8 @@
 
                     <div class="small-img">
                       <div
-                        class="swiper mySwiper3 swiper-initialized swiper-horizontal"
+                        class="swiper mySwiper3 swiper-container swiper-initialized swiper-horizontal"
+                        v-swiper:mySwiper="swiperOption"
                       >
                         <div
                           class="swiper-wrapper"
@@ -5246,6 +5247,17 @@ export default {
       positionY: 0,
       isOutside: true,
       companyInfor: null,
+      swiperOption: {
+        // loop: true, //循环
+        slidesPerView: 1, //slide容器能够同时显示的slides数量
+        slidesPerGroup: 1, //多少个slide为一组
+        spaceBetween: 10, //sliders之间的距离
+        direction: "horizontal",
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
     };
   },
   head() {
@@ -5273,6 +5285,21 @@ export default {
   mounted() {
     let that = this;
     nextTick(() => {
+      // 将Swiper初始化代码移到这里
+      // this.$nextTick(() => {
+      //   new Swiper(".mySwiper3", {
+      //     modules: [Navigation, Pagination],
+      //     spaceBetween: 10,
+      //     direction: "horizontal",
+      //     navigation: {
+      //       nextEl: ".swiper-button-next",
+      //       prevEl: ".swiper-button-prev",
+      //     },
+      //     pagination: {
+      //       el: ".swiper-pagination",
+      //     },
+      //   });
+      // });
       this.getDictData();
       this.getMinData();
       that.pageView(that.$route.query.id);
@@ -5280,20 +5307,20 @@ export default {
       this.getMoreDetail();
       this.target = this.$refs.target;
       this.target.addEventListener("mousemove", this.handleMouseMove);
-      setTimeout(() => {
-        var swiper3 = new Swiper(".mySwiper3", {
-          spaceBetween: 10,
-          direction: "horizontal",
-          navigation: {
-            nextEl: ".swiper-button-next",
-            prevEl: ".swiper-button-prev",
-          },
-          // 如果需要分页器
-          pagination: {
-            el: ".swiper-pagination",
-          },
-        });
-      }, 3000);
+      //  setTimeout(() => {
+      //     var swiper3 = new Swiper(".mySwiper3", {
+      //       spaceBetween: 10,
+      //       direction: "horizontal",
+      //       navigation: {
+      //         nextEl: ".swiper-button-next",
+      //         prevEl: ".swiper-button-prev",
+      //       },
+      //       // 如果需要分页器
+      //       pagination: {
+      //         el: ".swiper-pagination",
+      //       },
+      //     });
+      //   }, 3000);
     });
   },
   methods: {

pages/test/index.vue

 <template>
   <div class="">
     <div class="swiper w-100% flex flex-row justify-between mt-30px">
-        <div class="swiper-button-prev" slot="swiper-button-prev"></div>
-          <swiper class="w-100%" ref="mySwiper" :options="swiperOptions" @mouseenter.native="mouseEnter" @mouseleave.native="mouseLeave">
-                <swiper-slide class="" v-for="item in 5" :key="item">
-                      //设置宽高
-                    <div class="w-100% h-110px" alt="">{{item}}</div>
-                </swiper-slide>
-            </swiper>
-        <div class="swiper-button-next" slot="swiper-button-next"></div>
+      <div class="swiper-button-prev" slot="swiper-button-prev"></div>
+      <swiper
+        class="w-100%"
+        ref="mySwiper"
+        :options="swiperOptions"
+        @mouseenter.native="mouseEnter"
+        @mouseleave.native="mouseLeave"
+      >
+        <swiper-slide class="" v-for="item in 5" :key="item">
+          //设置宽高
+          <div class="w-100% h-110px" alt="">{{ item }}</div>
+        </swiper-slide>
+      </swiper>
+      <div class="swiper-button-next" slot="swiper-button-next"></div>
     </div>
   </div>
 </template>
 <script>
-import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
-import 'swiper/css/swiper.css'
 export default {
-    components: {
-        Swiper,
-        SwiperSlide
-    },
-    mounted() {
-    },
-    data() {
-        return {
-            swiperOptions: {
-                loop: true,
-                autoplay: {
-                    delay: 3000,
-                    stopOnLastSlide: false,
-                    disableOnInteraction: false,
-                },
-                slidesPerView: 1, // 一次展示几张图片
-                spaceBetween: 30, // 图片间隔
-                slideToClickedSlide: true, // 是否显示左右跳转按钮
-                // 这部分用来展示按钮: 查看上一张下一张区域
-                // 此处定义的类名需与页面展示左右按钮定义的slot一致
-                // 这里类名和slot都保持统一了
-                navigation: {
-                    nextEl: '.swiper-button-next',
-                    prevEl: '.swiper-button-prev',
-                },
-                // 此处为分页展示 本次案例没有用到可能页面上没展示出来 类名调整下即可
-                // 其他配置请转移至官网查看配置
-                pagination: {
-                    el: '.swiper-pagination',
-                    clickable: true,
-                    type: 'fraction',
-                },
-            },
-        };
-    },
-    methods: {
-        mouseEnter() {
-            this.$refs.mySwiper.$swiper.autoplay.stop();
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  mounted() {},
+  data() {
+    return {
+      swiperOptions: {
+        loop: true,
+        autoplay: {
+          delay: 3000,
+          stopOnLastSlide: false,
+          disableOnInteraction: false,
         },
-        mouseLeave() {
-            this.$refs.mySwiper.$swiper.autoplay.start();
+        slidesPerView: 1, // 一次展示几张图片
+        spaceBetween: 30, // 图片间隔
+        slideToClickedSlide: true, // 是否显示左右跳转按钮
+        // 这部分用来展示按钮: 查看上一张下一张区域
+        // 此处定义的类名需与页面展示左右按钮定义的slot一致
+        // 这里类名和slot都保持统一了
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
         },
-    }
+        // 此处为分页展示 本次案例没有用到可能页面上没展示出来 类名调整下即可
+        // 其他配置请转移至官网查看配置
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true,
+          type: "fraction",
+        },
+      },
+    };
+  },
+  methods: {
+    mouseEnter() {
+      this.$refs.mySwiper.$swiper.autoplay.stop();
+    },
+    mouseLeave() {
+      this.$refs.mySwiper.$swiper.autoplay.start();
+    },
+  },
 };
 </script>
 <style>
 .el-carousel__item {
-    text-align: center;
+  text-align: center;
 }
-.swiper{
-    position: relative;
+.swiper {
+  position: relative;
 }
-.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
-    left: -40px;
-    color: rgb(39, 95, 171);
-    font-size: 18px;
+.swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+  left: -40px;
+  color: rgb(39, 95, 171);
+  font-size: 18px;
 }
-.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
-    right: -40px;
-    color: rgb(39, 95, 171);
-    font-size: 18px;
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+  right: -40px;
+  color: rgb(39, 95, 171);
+  font-size: 18px;
 }
-.slide{
-    height: 100px;
-    width: 100%;
-    background-color: bisque;
-    text-align: center;
-    line-height: 100px;
+.slide {
+  height: 100px;
+  width: 100%;
+  background-color: bisque;
+  text-align: center;
+  line-height: 100px;
 }
-</style>
+</style>
\ No newline at end of file

plugins/swiper.js

+import Vue from 'vue';
+import Swiper from 'swiper';
+import 'swiper/swiper-bundle.css';
+export default {
+  install(Vue) {
+    Vue.prototype.$swiper = Swiper;
+  }
+}
\ No newline at end of file

utils/formRules.js

+export const technicalDialog = {
+  omContactName: [
+    { required: true, message: '请输入姓名', trigger: 'blur' },
+    { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
+  ],
+  omContactTel: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^[0-9]{11}$/, message: '请输入有效的手机号', trigger: 'blur' }
+  ],
+  omInquiryContent: [
+    { required: true, message: '请输入需求内容', trigger: 'blur' }
+  ]
+};
\ No newline at end of file