From c37240d4642914c4994f1527590e9c496387bf06 Mon Sep 17 00:00:00 2001
From: gukai15D <1522776404@qq.com>
Date: Sun, 28 Apr 2024 11:32:20 +0800
Subject: [PATCH] 1

---
 mall/goods/edit.vue | 153 ++++++++++++++++++++---------------
 package-lock.json   | 192 ++++++++++++++++++++------------------------
 2 files changed, 177 insertions(+), 168 deletions(-)

diff --git a/mall/goods/edit.vue b/mall/goods/edit.vue
index 2bcd537..43ff356 100644
--- a/mall/goods/edit.vue
+++ b/mall/goods/edit.vue
@@ -127,63 +127,77 @@
 				<skuEdit ref="skuEditRef" :skuGroup="skuGroup"
 					:Pdata="{ skuDefault, skuLibrary, skuGroup, use_sku: model.use_sku }">
 				</skuEdit>
-				
+
 				<view class="h-2 bg-gray-100"></view>
-				<view>
-					<view style="font-size: 36rpx;border-bottom: 1rpx solid #F0F0F0;display: flex;flex-wrap: wrap;align-items: center;">
-						<view
-						:style="{
-							margin: '20rpx',
-							fontWeight: formats.bold ? '800' : '400'
-						}"
-						@click="format('bold', (formats.bold ? false : true))">加粗</view>
-						<view
-						:style="{
-							margin: '20rpx',
-							fontWeight: formats.italic ? '800' : '400'
-						}"
-						@click="format('italic', (formats.italic ? false : true))">斜体</view>
-						<view
-						:style="{
-							margin: '20rpx',
-							fontWeight: formats.underline ? '800' : '400'
-						}"
-						@click="format('underline', (formats.underline ? false : true))">下划线</view>
-						<view
-						:style="{
-							margin: '20rpx',
-							fontWeight: formats.align == 'center' ? '800' : '400'
-						}"
-						@click="format('align', (formats.align == 'center' ? 'left' : 'center'))">居中</view>
-						
-						<view style="margin: 20rpx;" >
-							<yUpload :width="40" :height="40" v-model="editor_upload" :size="4"></yUpload>
-						</view>
-						
+
+				<view class="p-3 rounded mb-2"
+					style="display: flex;justify-content: space-between; align-items: center;margin-bottom: 0;">
+					<div class="name mb-2 text-xs">商品详情</div>
+					<view class="bg-white px-3 py-2 rounded flex items-center" @click="show_detail = true"
+						style="color: #0083ff;align-items: center;display: flex;">
+						编辑<wd-icon name="arrow-right" color="#0083ff" />
 					</view>
-					<view style="padding: 10px;">
-						<editor style="min-height: 70vh;" id="editor" class="ql-container"
-						placeholder="开始输入..." show-img-size show-img-toolbar
-						@statuschange="onStatusChange"
-						show-img-resize :read-only="false" @ready="onEditorReady">
-						</editor>
+				</view>
+
+				<view style="position: fixed;left: 0;right: 0;bottom: 0;top: 0;z-index: 999;" v-if="show_detail">
+					<view class="wrapper" style="background: #FFF;height: 100vh;">
+						<view>
+							<view
+								style="font-size: 36rpx;border-bottom: 1rpx solid #F0F0F0;display: flex;flex-wrap: wrap;align-items: center;">
+								<view :style="{
+				    			margin: '20rpx',
+				    			fontWeight: formats.bold ? '800' : '400'
+				    		}" @click="format('bold', (formats.bold ? false : true))">加粗</view>
+								<view :style="{
+				    			margin: '20rpx',
+				    			fontWeight: formats.italic ? '800' : '400'
+				    		}" @click="format('italic', (formats.italic ? false : true))">斜体</view>
+								<view :style="{
+				    			margin: '20rpx',
+				    			fontWeight: formats.underline ? '800' : '400'
+				    		}" @click="format('underline', (formats.underline ? false : true))">下划线</view>
+								<view :style="{
+				    			margin: '20rpx',
+				    			fontWeight: formats.align == 'center' ? '800' : '400'
+				    		}" @click="format('align', (formats.align == 'center' ? 'left' : 'center'))">居中</view>
+
+								<view style="margin: 20rpx;">
+									<yUpload :width="40" :height="40" v-model="editor_upload" :size="4"></yUpload>
+								</view>
+
+							</view>
+							<view
+								style="padding: 10px 30rpx;height: calc(100vh - var(--window-top) - var(--status-bar-height) - 260rpx);">
+								<editor style="min-height: 30vh;height: 100%;" id="editor" class="ql-container"
+									placeholder="开始输入..." show-img-size show-img-toolbar @statuschange="onStatusChange"
+									show-img-resize :read-only="false" @ready="onEditorReady">
+								</editor>
+							</view>
+							<view
+								style="display: flex;justify-content: space-around;align-items: center;border-top: 1rpx solid #F0F0F0;padding: 20rpx;">
+								<wd-button type="info" @click="show_detail = false">取消</wd-button>
+								<wd-button type="primary" @click="yDetail">确认</wd-button>
+							</view>
+						</view>
 					</view>
 				</view>
-				
+
+
+
 
 			</wd-cell-group>
 			<view class="footer mt-4">
 				<wd-button @click="saveGoods" type="primary" size="large" block>保存</wd-button>
 			</view>
 		</wd-form>
-		
+
 	</view>
 </template>
 
 <script setup>
 	import quill from "quill";
 	window.Quill = quill;
-	
+
 	import {
 		ref,
 		watch
@@ -278,13 +292,14 @@
 		fileList.value.splice(index, 1);
 		resolve(true);
 	};
-	
+
 	const editorCtx = ref(null);
+	const show_detail = ref(false)
 	const onEditorReady = () => {
 		// #ifdef MP-BAIDU
 		editorCtx.value = requireDynamicLib('editorLib').createEditorContext('editor');
 		// #endif
-	
+
 		// #ifdef APP-PLUS || MP-WEIXIN || H5
 		uni.createSelectorQuery().select('#editor').context((res) => {
 			editorCtx.value = res.context
@@ -295,11 +310,11 @@
 	const onStatusChange = (e) => {
 		formats.value = e.detail
 	}
-	
+
 	const format = (name, value) => {
 		editorCtx.value.format(name, value)
 	}
-	
+
 	const editor_upload = ref([]);
 	watch(editor_upload, (newX) => {
 		if (newX && newX.length > 0) {
@@ -312,12 +327,38 @@
 					}
 				})
 			})
-			
+
 			editor_upload.value = []
 		}
-	  // console.log(newX, `newX is`)
 	})
 
+	watch(show_detail, (newX) => {
+		if (newX) {
+			uni.showLoading({
+				title: '加载中'
+			})
+			setTimeout(() => {
+				uni.hideLoading()
+				editorCtx.value.setContents({
+					html: model.value.detail
+				})
+			}, 1000)
+		}
+	})
+	const yDetail = async (e) => {
+		let detail = ''
+		await editorCtx.value.getContents({
+			success(res) {
+				model.value.detail = res.html
+			}
+		})
+		show_detail.value = false
+		console.log(model.value.detail, 'model.value')
+	}
+
+
+
+
 	/** @type {Ref<Model>} */
 	const model = ref({
 		classify_list: [], // 商品分类组
@@ -409,13 +450,7 @@
 				skuLibrary.value = res.data.goods_sku;
 			}
 			skuGroup.value = res.data.sku_group ? res.data.sku_group : [];
-			
-			setTimeout(() => {
-				editorCtx.value.setContents({
-					html: res.data.detail
-				})
-			}, 1000)
-			
+
 			load.value = true;
 		} else {
 			load.value = true;
@@ -506,21 +541,13 @@
 
 		const shop_classify_list = model.value.shop_classify_list.map(item => JSON.parse(item));
 		const classify_list = model.value.classify_list.map(item => JSON.parse(item));
-		
-		let detail = ''
-		await editorCtx.value.getContents({
-			success(res) {
-				detail = res.html
-			}
-		})
 
 		const res = await goods.goodsEdit({
 			...model.value,
 			pic_list,
 			freight_id,
 			shop_classify_list,
-			classify_list,
-			detail
+			classify_list
 		});
 
 		if (res.code == 0) {
diff --git a/package-lock.json b/package-lock.json
index 65dac29..682aa01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -152,6 +152,93 @@
         "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
         "wrap-ansi": "^8.1.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "string-width-cjs": {
+          "version": "npm:string-width@4.2.3",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.1"
+          },
+          "dependencies": {
+            "strip-ansi": {
+              "version": "6.0.1",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^5.0.1"
+              }
+            }
+          }
+        },
+        "strip-ansi-cjs": {
+          "version": "npm:strip-ansi@6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "wrap-ansi-cjs": {
+          "version": "npm:wrap-ansi@7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          },
+          "dependencies": {
+            "string-width": {
+              "version": "4.2.3",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+              "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+              "dev": true,
+              "requires": {
+                "emoji-regex": "^8.0.0",
+                "is-fullwidth-code-point": "^3.0.0",
+                "strip-ansi": "^6.0.1"
+              }
+            },
+            "strip-ansi": {
+              "version": "6.0.1",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^5.0.1"
+              }
+            }
+          }
+        }
       }
     },
     "@jridgewell/gen-mapping": {
@@ -1279,40 +1366,6 @@
         "strip-ansi": "^7.0.1"
       }
     },
-    "string-width-cjs": {
-      "version": "npm:string-width@4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "requires": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.1"
-          }
-        }
-      }
-    },
     "strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -1322,23 +1375,6 @@
         "ansi-regex": "^6.0.1"
       }
     },
-    "strip-ansi-cjs": {
-      "version": "npm:strip-ansi@6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^5.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        }
-      }
-    },
     "sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -1510,60 +1546,6 @@
         "strip-ansi": "^7.0.1"
       }
     },
-    "wrap-ansi-cjs": {
-      "version": "npm:wrap-ansi@7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
-        "string-width": {
-          "version": "4.2.3",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.1"
-          }
-        },
-        "strip-ansi": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.1"
-          }
-        }
-      }
-    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",