From a604ae8a357009afcae1b5cc500e3e49dfab008b Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 24 Aug 2026 11:23:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E5=B0=8F=E7=A8=8B=E5=BA=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 src/views/weChatMiniProgram/baseSetting.vue   | 132 ++++-----
 src/views/weChatMiniProgram/bookrecommend.vue |   4 +-
 .../weChatMiniProgram/module/wecharQrCode.vue | 268 ++++++++++++++++++
 4 files changed, 324 insertions(+), 84 deletions(-)
 create mode 100644 src/views/weChatMiniProgram/module/wecharQrCode.vue

diff --git a/.env.development b/.env.development
index a745ea4..38b38d0 100644
--- a/.env.development
+++ b/.env.development
@@ -3,8 +3,8 @@ ENV = 'development'
 # 接口地址
 
 # 许镇-本地服地址
-VUE_APP_BASE_API  = 'http://192.168.99.63:14000'
-# VUE_APP_BASE_API  = 'https://wechatapi.aiyxlib.com'
+# VUE_APP_BASE_API  = 'http://192.168.99.63:14000'
+VUE_APP_BASE_API  = 'https://wechatapi.aiyxlib.com'
 VUE_APP_WECHAT_URL = 'https://wechatapi.aiyxlib.com'
 
 
diff --git a/src/views/weChatMiniProgram/baseSetting.vue b/src/views/weChatMiniProgram/baseSetting.vue
index f9e1032..e0b5885 100644
--- a/src/views/weChatMiniProgram/baseSetting.vue
+++ b/src/views/weChatMiniProgram/baseSetting.vue
@@ -5,7 +5,6 @@
         <div class="config-item">
           <div class="config-item-main">
             <span class="data-title">数据接口</span>
-            <!-- 原数据接口表单 -->
             <el-form ref="openForm" :model="openForm" size="small" label-width="100px">
               <el-form-item label="域名地址" prop="open_lib_http">
                 <el-tooltip
@@ -39,7 +38,6 @@
                   placement="top"
                 >
                   <span
-
                     class="edit-readonly"
                     @dblclick="handleDblClick('openForm', 'open_lib_appId')"
                   >
@@ -125,7 +123,6 @@
               </el-form-item>
             </el-form>
           </div>
-          <!-- <div class="config-remarks">双击输入框可进行编辑。</div> -->
         </div>
         <div class="config-item">
           <div class="config-item-main">
@@ -210,9 +207,19 @@
               </el-form-item>
             </el-form>
           </div>
-          <!-- <div class="config-remarks">双击输入框可进行编辑。</div> -->
         </div>
-        <wecharQrCode ref="wecharQrCodeRef" :is-mini-program="true" :qr-code-url="wecharQrCodeUrl" @triggerInit="initScreenSetting" @ready="onWechatQrCodeReady" />
+        <!-- 监听子组件 update:qr‑code‑url 更新父组件本地变量 -->
+        <WeChatQrCode
+          ref="wecharQrCodeRef"
+          :is-mini-program="true"
+          :qr-code-url="wecharQrCodeUrl"
+          :record-id="wechatQrRecordId"
+          @update:qr-code-url="val => wecharQrCodeUrl = val"
+          @update:record-id="val => wechatQrRecordId = val"
+          @triggerInit="initScreenSetting"
+          @ready="onWechatQrCodeReady"
+        />
+
       </div>
     </div>
   </div>
@@ -221,16 +228,17 @@
 <script>
 import { FetchInitScreenSetting, FetchEditScreenSetting } from '@/api/digitalScreen/index'
 import { mapGetters } from 'vuex'
-import wecharQrCode from '../digitalScreen/module/wecharQrCode'
+import WeChatQrCode from './module/wecharQrCode'
 
 export default {
   name: 'WeChatMiniProgram',
   components: {
-    wecharQrCode
+    WeChatQrCode
   },
   data() {
     return {
       wecharQrCodeUrl: null,
+      wechatQrRecordId: null,
       openForm: {
         open_lib_http: null,
         open_lib_appId: null,
@@ -272,22 +280,23 @@ export default {
     ...mapGetters([
       'baseApi',
       'user'
-    ])
-  },
-  created() {
+    ]),
+    imgHttpsUrl() {
+      if (process.env.NODE_ENV === 'production') {
+        return (window.g && window.g.ApiUrl) || ''
+      } else {
+        return process.env.VUE_APP_WECHAT_URL
+      }
+    }
   },
   mounted() {
-    this.$nextTick(() => {
-      this.initScreenSetting()
-    })
+    this.initScreenSetting()
   },
-  methods: { // 初始化智慧大屏基本数据
+  methods: {
     initScreenSetting() {
       FetchInitScreenSetting({ 'libcode': this.user.fonds.fondsNo }).then(res => {
         Object.values(res).forEach(item => {
-          const { code, context } = item
-
-          // 处理数据接口相关
+          const { code, context, id } = item
           if (code === 'open_lib_http') {
             this.openForm.open_lib_http = context
           } else if (code === 'open_lib_appId') {
@@ -299,31 +308,36 @@ export default {
           } else if (code === 'opac_url') {
             this.openForm.opac_url = context
           }
-
-          // 处理微信小程序绑定相关
           if (code === 'vx_mini_appId') {
             this.vxForm.vx_mini_appId = context
           } else if (code === 'vx_mini_secret') {
             this.vxForm.vx_mini_secret = context
           }
-
-          // 处理管理员绑定
           if (code === 'op_user') {
             this.adminForm.op_user = context
           }
-
-          // 处理公众号二维码
-          if (code === 'wechar_qr_code') {
-            this.wecharQrCodeUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + context
+          if (code === 'wechat_qr_code') {
+            this.wechatQrRecordId = id
+            console.log('id', id)
+            // context为后端存的相对文件路径
+            console.log('context', context)
+            // this.wecharQrCodeUrl = context ? this.baseApi + '/files/' + context : null
+            this.wecharQrCodeUrl = context ? this.imgHttpsUrl + '/files/' + context : null
           }
         })
-      }).catch(() => {
+        // 数据加载完后，通知子组件刷新图片
+        this.$nextTick(() => {
+          if (this.$refs.wecharQrCodeRef) {
+            this.$refs.wecharQrCodeRef.reloadImage()
+          }
+        })
+      }).catch((err) => {
+        console.error('大屏配置初始化失败', err)
       })
     },
     onWechatQrCodeReady() {
-      this.$refs.wecharQrCodeRef.reloadImage()
+      // ready不再主动调用reloadImage，交给initScreenSetting数据回来之后nextTick执行
     },
-    // 其他表单编辑框
     handleDblClick(formName, field) {
       this.originalValues[formName][field] = this[formName][field]
       this.editStatus[formName][field] = true
@@ -338,71 +352,29 @@ export default {
         this.saveEdit(formName, field)
       }
     },
-    saveEdit(formName, field) {
-      console.log(this.user)
+    async saveEdit(formName, field) {
       const code = field
       const context = this[formName][field]
       const libcode = this.user.fonds.fondsNo
       const remarks = ''
-
       if (!context && context !== 0) {
-        // 其他字段的非空校验
         this.$message.warning(`${this.getFieldLabel(formName, field)}不能为空`)
         this.rollbackValue(formName, field)
         return
       }
-
-      // 3. 构建提交参数
       const submitParam = { code, context, libcode, remarks }
-
-      // 4. 调用接口保存
-      FetchEditScreenSetting(submitParam)
-        .then(() => {
-          this.$message.success(`${this.getFieldLabel(formName, field)}更新成功`)
-          // 更新原始值为新值
-          // if (formName === 'title') {
-          //   this.originalTitle = this.screen_title
-          //   this.originalValues.title = this.screen_title
-          // } else if (formName === 'specialFields' && field.startsWith('show') && field !== 'show_screen') {
-          //   // 更新屏幕的originalTime
-          //   const screenItem = this.screenItems.find(item => item.code === field)
-          //   if (screenItem) {
-          //     screenItem.originalTime = context
-          //   }
-          //   this.originalValues[formName][field] = context
-          // } else if (formName !== 'specialFields' || field !== 'show_screen') {
-          //   this.originalValues[formName][field] = context
-          // }
-        })
-        .catch(() => {
-          this.$message.error(`${this.getFieldLabel(formName, field)}更新失败`)
-          this.rollbackValue(formName, field)
-        })
+      try {
+        await FetchEditScreenSetting(submitParam)
+        this.$message.success(`${this.getFieldLabel(formName, field)}更新成功`)
+        this.originalValues[formName][field] = context
+      } catch (err) {
+        this.$message.error(`${this.getFieldLabel(formName, field)}更新失败`)
+        this.rollbackValue(formName, field)
+      }
     },
-    // 新增：回滚值的通用方法
     rollbackValue(formName, field) {
       if (this.originalValues[formName]?.[field] !== undefined) {
-        if (formName === 'title') {
-          this.screen_title = this.originalValues[formName][field]
-        } else if (formName === 'specialFields' && field.startsWith('show') && field !== 'show_screen') {
-          // 回滚屏幕时长
-          const screenItem = this.screenItems.find(item => item.code === field)
-          if (screenItem) {
-            screenItem.time = this.originalValues[formName][field]
-            screenItem.originalTime = this.originalValues[formName][field]
-          }
-        } else if (formName === 'specialFields') {
-          this[field] = this.originalValues[formName][field]
-        } else {
-          this[formName][field] = this.originalValues[formName][field]
-          // 回滚复选框状态
-          if (formName === 'librarySettingForm') {
-            const originalChecked = this.originalValues[formName][`${field}_checked`]
-            if (originalChecked !== undefined) {
-              this[formName][`${field}_checked`] = originalChecked
-            }
-          }
-        }
+        this[formName][field] = this.originalValues[formName][field]
       }
     },
     getFieldLabel(formName, field) {
diff --git a/src/views/weChatMiniProgram/bookrecommend.vue b/src/views/weChatMiniProgram/bookrecommend.vue
index 154fdee..967134f 100644
--- a/src/views/weChatMiniProgram/bookrecommend.vue
+++ b/src/views/weChatMiniProgram/bookrecommend.vue
@@ -31,7 +31,7 @@
         <el-table-column label="著者" prop="author" />
         <el-table-column label="出版社" prop="publisher" />
         <el-table-column label="ISBN" prop="isbn" />
-        <el-table-column label="分类号" prop="classNo" />
+        <el-table-column label="分类号" prop="callnos" />
         <el-table-column label="出版年份" prop="publisherdate" />
         <el-table-column label="上传时间" prop="create_time" width="160">
           <template slot-scope="scope">
@@ -64,7 +64,7 @@
           <span>ISBN：</span><p>{{ detailData.isbn || '-' }}</p>
         </div>
         <div class="detail-item">
-          <span>分类号：</span><p>{{ detailData.classNo || '-' }}</p>
+          <span>分类号：</span><p>{{ detailData.callnos || '-' }}</p>
         </div>
         <div class="detail-item">
           <span>出版日期：</span><p>{{ detailData.publisherdate || '-' }}</p>
diff --git a/src/views/weChatMiniProgram/module/wecharQrCode.vue b/src/views/weChatMiniProgram/module/wecharQrCode.vue
new file mode 100644
index 0000000..f5b459c
--- /dev/null
+++ b/src/views/weChatMiniProgram/module/wecharQrCode.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="config-item">
+    <div class="config-item-main">
+      <span class="data-title">二维码</span>
+      <div class="upload-item" style="margin-bottom: 20px;">
+        <p>公众号二维码</p>
+        <div style="display: flex; justify-content: flex-start;">
+          <div class="image-container">
+            <!-- loading遮罩 -->
+            <div v-if="isLoadingImg" class="image-loading">
+              <div class="spinner" />
+              <span class="loading-text">加载中...</span>
+            </div>
+            <img
+              v-show="!isLoadingImg"
+              :key="imageKey"
+              style="display: block; height: 120px; margin-right: 15px; transition: opacity 0.3s ease-in-out;"
+              :src="currentQrCodeUrl"
+              :class="{ 'image-loaded': !isLoadingImg && currentQrCodeUrl }"
+              alt="公众号二维码"
+              @load="handleImageLoad"
+              @error="handleImageError"
+            >
+            <!-- 错误提示 -->
+            <div v-if="imageError && !isLoadingImg" class="image-error">
+              <i class="iconfont icon-error" />
+              <span>加载失败</span>
+            </div>
+          </div>
+          <div class="upload-img-input">
+            <input
+              ref="fileInput"
+              type="file"
+              accept="image/*"
+              style="display: none;"
+              @change="changeFile($event)"
+            >
+            <div
+              class="upload-libImg"
+              :class="{ 'is-disabled': uploadLoading }"
+              @click="handleClickUpload"
+            >
+              <i class="iconfont icon-shangchuan2" />
+              <span>{{ uploadLoading ? '上传中...' : '点击上传' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="!isMiniProgram" class="config-remarks">二维码用于“总览屏”、“媒体屏”，在任意分屏编辑均可生效！</div>
+  </div>
+</template>
+
+<script>
+import { FetchEditScreenSetting } from '@/api/digitalScreen/index'
+import { mapGetters } from 'vuex'
+import { upload } from '@/utils/upload'
+
+export default {
+  name: 'WeChatQrCode',
+  props: {
+    qrCodeUrl: {
+      type: String,
+      default: null
+    },
+    isMiniProgram: {
+      type: Boolean,
+      default: false
+    },
+    recordId: { // 新增 prop
+      type: [Number, String],
+      default: null
+    }
+  },
+  data() {
+    return {
+      defaultImg: require('@/assets/images/cover-bg.png'),
+      imageKey: 0,
+      localQrCodeUrl: null,
+      isLoadingImg: false,
+      imageError: false,
+      uploadLoading: false
+    }
+  },
+  computed: {
+    ...mapGetters(['baseApi', 'user']),
+    currentQrCodeUrl() {
+      if (this.localQrCodeUrl) {
+        return this.localQrCodeUrl
+      }
+      if (this.qrCodeUrl) {
+        // 父组件已经处理好完整url，子组件直接使用，不再拼接baseApi
+        return this.qrCodeUrl
+      }
+      return this.defaultImg
+    }
+  },
+  watch: {
+    qrCodeUrl(newVal) {
+      this.localQrCodeUrl = newVal
+      this.reloadImage()
+    }
+  },
+  created() {
+    this.localQrCodeUrl = this.qrCodeUrl
+  },
+  mounted() {
+    this.$emit('ready')
+  },
+  methods: {
+    handleClickUpload() {
+      if (this.uploadLoading) return
+      this.$refs.fileInput.click()
+    },
+
+    async changeFile(e) {
+      const file = e.target.files[0]
+      this.$refs.fileInput.value = ''
+      if (!file) return
+
+      if (!file.type.startsWith('image/')) {
+        this.$message({ message: '只可上传图片', type: 'error', offset: 8 })
+        return
+      }
+      // 文件大小校验 5MB
+      const MAX_SIZE = 5 * 1024 * 1024
+      if (file.size > MAX_SIZE) {
+        this.$message.error('图片不能超过5MB')
+        return
+      }
+
+      try {
+        this.uploadLoading = true
+        const res = await upload(this.baseApi + '/api/fileRelevant/uploadHttpsImg', file)
+        console.log('uploadHttpsImgres', res)
+        if (res.data.code === 200) {
+          const filePath = res.data.data
+          console.log('filePath', filePath)
+          await this.submitCover(filePath)
+        } else {
+          this.$message.error('图片上传失败')
+        }
+      } catch (err) {
+        console.error('上传异常：', err)
+        this.$message.error('图片上传失败')
+      } finally {
+        this.uploadLoading = false
+      }
+    },
+
+    async submitCover(imgUrl) {
+      const param = {
+        code: 'wechat_qr_code',
+        context: imgUrl,
+        remarks: null,
+        libcode: this.user.fonds.fondsNo,
+        id: this.recordId
+      }
+      console.log('param', param)
+      try {
+        await FetchEditScreenSetting(param)
+        this.$message.success('公众号二维码更新成功')
+        this.localQrCodeUrl = this.imgHttpsUrl + '/files/' + imgUrl
+        this.reloadImage()
+        this.$emit('update:qrCodeUrl', this.imgHttpsUrl + '/files/' + imgUrl)
+        this.$emit('triggerInit')
+      } catch (err) {
+        console.error('保存二维码失败', err)
+        this.$message.error('保存二维码失败')
+        throw err
+      }
+    },
+
+    reloadImage() {
+      this.isLoadingImg = true
+      this.imageError = false
+      this.imageKey++
+    },
+    handleImageLoad() {
+      this.isLoadingImg = false
+      this.imageError = false
+    },
+    handleImageError() {
+      this.isLoadingImg = false
+      this.imageError = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/digitalScreen.scss";
+.image-container {
+  position: relative;
+  min-width: 120px;
+  height: 120px;
+}
+
+.image-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #eee;
+  border-top: 2px solid #0348f3;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 8px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+  font-size: 12px;
+  color: #666;
+}
+
+.image-loaded {
+  opacity: 1;
+}
+
+.image-error {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  color: #ED4A41;
+  font-size: 12px;
+}
+
+.image-error .icon-error {
+  font-size: 20px;
+  margin-bottom: 8px;
+}
+
+.upload-libImg {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.upload-libImg.is-disabled {
+  cursor: not-allowed;
+  color: #999;
+}
+</style>