Jelajahi Sumber

1. 图片预览时,点击非图片区域也能关闭预览
2. 还原 hdApp/vue.config.js
3. 其它页面小优化

shizhongqi 1 tahun lalu
induk
melakukan
8854d641f2

+ 2 - 2
hdApp/src/admin/goods/category.vue

@@ -13,10 +13,10 @@
 
             <text style="position: absolute; bottom: 8upx; left: 150upx; color: #cccccc">序号 {{ item.inTurn }}</text>
             <!-- <text style="position:absolute;top:65upx;right:150upx;color:blue;" @click.stop="delCategory(item.id)">删除</text> -->
-            <button style="position: absolute; top: 6upx; right: 150upx" class="admin-button-com middle" @click.stop="delCategory(item.id)">
+            <button v-if="item.default != 1" style="position: absolute; top: 6upx; right: 150upx" class="admin-button-com middle" @click.stop="delCategory(item.id)">
               删除
             </button>
-            <button style="position: absolute; top: 6upx; right: 30upx" class="admin-button-com middle blue" @click="edit(item)">修改</button>
+            <button v-if="item.default != 1" style="position: absolute; top: 6upx; right: 30upx" class="admin-button-com middle blue" @click="edit(item)">修改</button>
             <button v-if="item.picTextId == 0" style="position: absolute; bottom: 6upx; right: 30upx" class="admin-button-com middle" @click.stop="selectPicText(item.id, item.picTextId)">
               设置图文
             </button>

+ 2 - 2
hdApp/src/admin/goods/picTextAdd-Edit.vue

@@ -2,7 +2,7 @@
   <view class="app-content">
     <form @submit="formSubmit" @reset="formReset">
       <view class="module-com input-line-wrap">
-        <tui-list-cell class="line-cell" :hover="false">
+        <tui-list-cell class="line-cell" :hover="false" v-if="false">
           <view class="tui-title required">标题</view>
           <input
             v-model="form.title"
@@ -230,7 +230,7 @@ export default {
     },
     formSubmit(e) {
       let rules = [
-        { name: 'title', rule: ['required', 'notEmpty'], msg: ['请输入标题'] }
+        //{ name: 'title', rule: ['required', 'notEmpty'], msg: ['请输入标题'] }
         //{ name: "imageTextVos", rule: ["notEmpty"], msg: ["请添加图文内容"] }
       ];
       let formData = e.detail.value;

+ 2 - 1
hdApp/src/admin/goods/price-increase.vue

@@ -11,11 +11,12 @@
 			<div class="input-line-wrap new-wrap">
 				<tui-list-cell class="line-cell" :hover="false">
 					<div class="tui-title">涨价方式</div>
-					<div class="button-selector flex-center-between">
+					<div class="button-selector">
 						<button 
 							class="admin-button-com big"
 							:class="form.riseType == 0 ? 'blue' : 'default'"
 							@click="selectRiseType(0)"
+							style="margin-right: 28rpx;"
 						>
 							按百分比
 						</button>

+ 2 - 2
hdApp/src/admin/picText/picTextList.vue

@@ -36,8 +36,8 @@
     </view>
 
     <view class="app-footer">
-      <button class="admin-button-com" @click="svgDemoFn">SVG示例</button>
-      <button class="admin-button-com" @click="demoPicTextFn">图文示例</button>
+      <!-- <button class="admin-button-com" @click="svgDemoFn">SVG示例</button>
+      <button class="admin-button-com" @click="demoPicTextFn">图文示例</button> -->
       <button class="admin-button-com big blue" @click="addPicTextFn">新增图文</button>
     </view>
   </view>

+ 13 - 6
hdApp/src/components/RichMediaViewer/index.vue

@@ -69,8 +69,8 @@
     </view>
 
     <!-- 图片预览弹窗 -->
-    <view v-if="showImagePreview" class="image-preview-modal" @click="closeImagePreview">
-      <view class="preview-container" @click.stop>
+    <view v-if="showImagePreview" class="image-preview-modal" @click="handleMaskClick">
+      <view ref="previewContainer" class="preview-container">
         <!-- 预览头部 -->
         <view class="preview-header">
           <view class="preview-info">
@@ -104,7 +104,7 @@
                   @scale="onScale"
                   @touchend="onScaleEnd"
                 >
-                  <view class="preview-image-wrapper">
+                  <view class="preview-image-wrapper" @click.stop>
                     <!-- 预览占位符 -->
                     <view v-if="!previewImageStatus[index]" class="preview-placeholder">
                       <view class="placeholder-content">
@@ -114,7 +114,7 @@
                     </view>
                     <!-- 预览图片 -->
                     <image
-                      v-show="previewImageStatus[index]"
+                      :style="{ opacity: previewImageStatus[index] ? 1 : 0 }"
                       :src="img"
                       mode="widthFix"
                       class="preview-image"
@@ -131,7 +131,7 @@
           <!-- 单张图片预览 -->
           <movable-area v-else class="movable-area">
             <movable-view class="movable-view" direction="all" scale :scale-value="imageScales[0]" @scale="onScale" @touchend="onScaleEnd">
-              <view class="preview-image-wrapper">
+              <view class="preview-image-wrapper" @click.stop>
                 <!-- 预览占位符 -->
                 <view v-if="!previewImageStatus[0]" class="preview-placeholder">
                   <view class="placeholder-content">
@@ -141,7 +141,7 @@
                 </view>
                 <!-- 预览图片 -->
                 <image
-                  v-show="previewImageStatus[0]"
+                  :style="{ opacity: previewImageStatus[0] ? 1 : 0 }"
                   :src="currentPreviewImage"
                   mode="widthFix"
                   class="preview-image single"
@@ -388,6 +388,13 @@ export default {
       this.currentScale = 1;
     },
 
+    // 点击遮罩层关闭预览
+    handleMaskClick() {
+      if (this.currentScale === 1) {
+        this.closeImagePreview();
+      }
+    },
+
     // 关闭图片预览
     closeImagePreview() {
       this.showImagePreview = false;

+ 43 - 43
hdApp/vue.config.js

@@ -4,50 +4,50 @@ module.exports = {
             fallback: {
                 timers: require.resolve('timers-browserify'),
                 // webpack 5 需要的 Node.js polyfills
-                // path: require.resolve('path-browserify'),
-                // crypto: require.resolve('crypto-browserify'),
-                // fs: false,
-                // stream: require.resolve('stream-browserify'),
-                // buffer: require.resolve('buffer'),
-                // util: require.resolve('util'),
-                // assert: require.resolve('assert'),
-                // url: require.resolve('url'),
-                // querystring: require.resolve('querystring-es3')
+                path: require.resolve('path-browserify'),
+                crypto: require.resolve('crypto-browserify'),
+                fs: false,
+                stream: require.resolve('stream-browserify'),
+                buffer: require.resolve('buffer'),
+                util: require.resolve('util'),
+                assert: require.resolve('assert'),
+                url: require.resolve('url'),
+                querystring: require.resolve('querystring-es3')
             }
         },
-        // plugins: [
-        //     // 为 webpack 5 提供 Buffer polyfill
-        //     new (require('webpack')).ProvidePlugin({
-        //         Buffer: ['buffer', 'Buffer'],
-        //         process: 'process/browser'
-        //     })
-        // ],
-        // // 忽略一些不需要的模块
-        // ignoreWarnings: [
-        //     {
-        //         module: /node_modules/,
-        //         message: /Can't resolve/
-        //     }
-        // ]
+        plugins: [
+            // 为 webpack 5 提供 Buffer polyfill
+            new (require('webpack')).ProvidePlugin({
+                Buffer: ['buffer', 'Buffer'],
+                process: 'process/browser'
+            })
+        ],
+        // 忽略一些不需要的模块
+        ignoreWarnings: [
+            {
+                module: /node_modules/,
+                message: /Can't resolve/
+            }
+        ]
     },
-    // chainWebpack: config => {
-    //     // 修复可能的 url-loader 配置问题
-    //     const staticTypes = ['images', 'media', 'fonts']
-    //     staticTypes.forEach(staticType => {
-    //         if (config.module.rules.has(staticType)) {
-    //             config.module.rule(staticType).uses.clear()
-    //             config.module
-    //                 .rule(staticType)
-    //                 .type('asset')
-    //                 .set('generator', {
-    //                     filename: `static/${staticType}/[name].[hash:8][ext]`
-    //                 })
-    //                 .set('parser', {
-    //                     dataUrlCondition: {
-    //                         maxSize: 4096
-    //                     }
-    //                 })
-    //         }
-    //     })
-    // }
+    chainWebpack: config => {
+        // 修复可能的 url-loader 配置问题
+        const staticTypes = ['images', 'media', 'fonts']
+        staticTypes.forEach(staticType => {
+            if (config.module.rules.has(staticType)) {
+                config.module.rule(staticType).uses.clear()
+                config.module
+                    .rule(staticType)
+                    .type('asset')
+                    .set('generator', {
+                        filename: `static/${staticType}/[name].[hash:8][ext]`
+                    })
+                    .set('parser', {
+                        dataUrlCondition: {
+                            maxSize: 4096
+                        }
+                    })
+            }
+        })
+    }
 }

+ 3 - 3
mallApp/src/components/RichMediaViewer/index.vue

@@ -70,7 +70,7 @@
 
     <!-- 图片预览弹窗 -->
     <view v-if="showImagePreview" class="image-preview-modal" @click="closeImagePreview">
-      <view class="preview-container" @click.stop>
+      <view class="preview-container">
         <!-- 预览头部 -->
         <view class="preview-header">
           <view class="preview-info">
@@ -104,7 +104,7 @@
                   @scale="onScale"
                   @touchend="onScaleEnd"
                 >
-                  <view class="preview-image-wrapper">
+                  <view class="preview-image-wrapper"  @click.stop>
                     <!-- 预览占位符 -->
                     <view v-if="!previewImageStatus[index]" class="preview-placeholder">
                       <view class="placeholder-content">
@@ -130,7 +130,7 @@
           <!-- 单张图片预览 -->
           <movable-area v-else class="movable-area">
             <movable-view class="movable-view" direction="all" scale :scale-value="imageScales[0]" @scale="onScale" @touchend="onScaleEnd">
-              <view class="preview-image-wrapper">
+              <view class="preview-image-wrapper"  @click.stop>
                 <!-- 预览占位符 -->
                 <view v-if="!previewImageStatus[0]" class="preview-placeholder">
                   <view class="placeholder-content">

+ 2 - 2
mallApp/src/pages/goods/detail.vue

@@ -52,11 +52,11 @@
         <view class="module-det-text">
           <view class="preview-page">
             <!-- 页面头部 -->
-            <view class="page-header">
+            <!-- <view class="page-header">
               <view class="header-content">
                 <text class="page-title">{{ title || "内容预览" }}</text>
               </view>
-            </view>
+            </view> -->
 
             <!-- 预览内容区域 -->
             <view class="preview-content">