From bc10b50fefa1f778bc333e905501b63f3b679d90 Mon Sep 17 00:00:00 2001
From: zsk <710162063@qq.com>
Date: Thu, 15 May 2025 17:03:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=91=E9=81=93=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/base.js                |   7 ++
 src/utils/request.js           |  14 +--
 src/views/homePage/channel.vue | 260 ++++++++++++++++++++---------------------
 src/views/homePage/index.vue   |   3 +
 4 files changed, 141 insertions(+), 143 deletions(-)

diff --git a/src/api/base.js b/src/api/base.js
index a7694fb..978d992 100644
--- a/src/api/base.js
+++ b/src/api/base.js
@@ -11,6 +11,13 @@ export function uploadImage(data) {
     method: "get",
   });
 }
+// 图片上传 改个名字
+export function getOssPolicy(data) {
+  return request({
+    url: "/oss/policy",
+    method: "get",
+  });
+}
 
 // 检查token信息
 export function checkTokenApi(data) {
diff --git a/src/utils/request.js b/src/utils/request.js
index fcf75ae..73f996d 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -8,15 +8,15 @@ import {
 } from 'ant-design-vue';
 import commonJS from './common.js';
 const router = useRouter()
-// const baseURL = "https://admin.ibocai.com.cn/api_prod"; // 正式环境线上
-const baseURL = "http://192.168.3.83:8003"; // 正式环境线上
+const baseURL = "https://admin.ibocai.com.cn/api_prod"; // 正式环境线上
+// const baseURL = "http://192.168.3.83:8003"; // 正式环境线上
 // const baseURL2 = "https://a.matripe.com.cn/api_stock"; // 正式环境线上
-let protocol = location.protocol
-let trueUrl = protocol == 'http:' ? baseURL : baseURL2
-console.log(protocol);
+// let protocol = location.protocol
+// let trueUrl = protocol == 'http:' ? baseURL : baseURL2
+// console.log(protocol);
 axios.defaults.withCredentials = true; //添加这行代码
 const service = axios.create({
-  baseURL: trueUrl, //  baseURL: "/api", // url = base url + request url 正式
+  baseURL: baseURL, //  baseURL: "/api", // url = base url + request url 正式
   withCredentials: true, // send cookies when cross-domain requests
   timeout: 60000, // request timeout
   crossDomain: true,
@@ -100,5 +100,5 @@ service.interceptors.response.use(
     console.log(error);
   }
 );
-service.userCustom = trueUrl
+// service.userCustom = trueUrl
 export default service;
diff --git a/src/views/homePage/channel.vue b/src/views/homePage/channel.vue
index d3bef98..4eea06c 100644
--- a/src/views/homePage/channel.vue
+++ b/src/views/homePage/channel.vue
@@ -68,7 +68,7 @@
 						<div class="g_flex_1 g_mr_32 ms">
 							<a-form-item name="image" label="图片" :rules="[{ required: true, message: '请上传图片' }]">
 								<div class="g_flex_row_start">
-									<div class="g_flex_none">
+									<!-- <div class="g_flex_none">
 										<a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" @change="handleChangs" :accept="accept">
 											<img v-if="submitForm.image" :src="submitForm.image" alt="avatar" style="width: 100px; height: 100px; border-radius: 6px" />
 											<div v-else>
@@ -76,10 +76,20 @@
 												<div class="ant-upload-text">上传图片</div>
 											</div>
 										</a-upload>
+									</div> -->
+									<div class="upload-container">
+										<div v-if="submitForm.image" class="image-preview">
+											<img :src="submitForm.image" alt="Banner" @click="triggerUpload" />
+										</div>
+										<div v-else class="upload-placeholder" @click="triggerUpload">
+											<plus-outlined />
+											<div>上传图片</div>
+										</div>
+										<input type="file" ref="fileInput" style="display: none" @change="handleFileChange" accept="image/*" />
 									</div>
 									<div class="g_flex_1 g_flex_column_end">
 										<div class="g_flex_row_start" style="position: relative; top: -4px">
-											<div class="g_c_main g_fs_14 g_cursor_point g_mr_4" @click="openSource">资源选择</div>
+											<div class="g_c_main g_fs_14 g_cursor_point g_mr_4 g_ml_12" @click="openSource">资源选择</div>
 											<div class="g_fs_14">/ 上传图片</div>
 										</div>
 									</div>
@@ -283,12 +293,12 @@
 
 <script setup>
 import { ref, onMounted, getCurrentInstance, h, watch, onBeforeUnmount, createVNode } from "vue";
-import { getCmsListNew, delCms, getCmsDetail,getPositionList, addPositionApi, delPositionApi, updatePositionApi,getList } from "../../api/channel.js";
+import { getCmsListNew, delCms, getCmsDetail, getPositionList, addPositionApi, delPositionApi, updatePositionApi, getList } from "../../api/channel.js";
 import { ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons-vue";
 
-import { uploadImage } from "../../api/base.js";
+import { getOssPolicy } from "../../api/base.js";
 import { Modal, Switch, message } from "ant-design-vue";
- 
+
 const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
 import $ from "jquery";
 const submitForm = ref({
@@ -424,59 +434,68 @@ const tableHeight = ref(552);
 commonJS.gResize(() => {
 	tableHeight.value = window.innerHeight - 381;
 });
-const handleChange = (e) => {
-	console.log("改变：", e);
-	uploadImage().then((res) => {
-		let dataObj = {};
-		dataObj.policy = res.data.data.policy;
-		dataObj.signature = res.data.data.signature;
-		dataObj.ossaccessKeyId = res.data.data.accessid;
-		dataObj.key = res.data.data.dir + commonJS.getUUID() + "_${filename}";
-		dataObj.dir = res.data.data.dir;
-		dataObj.host = res.data.data.host.replace("http://", "https://");
-		let url = "//bocai-cms.oss-cn-beijing.aliyuncs.com";
-		var formData = new FormData();
-		var idcardFormData = new FormData();
-		idcardFormData.append("uploadFile", e.file);
 
-		//注意formData里append添加的键的大小写
-		formData.append("key", dataObj.key); //存储在oss的文件路径
-		formData.append("OSSAccessKeyId", dataObj.ossaccessKeyId); //accessKeyId
-		formData.append("policy", dataObj.policy); //policy
-		formData.append("Signature", dataObj.signature); //签名
-		formData.append("success_action_status", "200"); // 上传成功返回的状态码，不设置则是204
-		formData.append("file", e.file); // 一定在最后
+const triggerUpload = () => {
+	fileInput.value.click();
+};
 
-		console.log(dataObj.host);
+const handleFileChange = async (event) => {
+	const file = event.target.files[0];
 
-		// 创建请求的选项对象
-		$.ajax({
-			type: "post",
-			url: commonJS.env() == "prod" ? dataObj.host : url,
-			// url,
-			data: formData,
-			contentType: false, // 不设置Content-Type请求头
-			processData: false,
-			success: function (data) {
-				console.log("image.value", dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name));
-				submitForm.value.fileList = [];
-				submitForm.value.fileList.push({
-					uid: "2",
-					name: "yyy.png",
-					status: "done",
-					url: dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name),
-				});
-			},
-			fail: function (err) {
-				console.log("上传异常：", err);
-			},
-		});
-	});
-};
-const handleDrop = (e) => {
-	console.log("拖拽：", e);
+	console.log(file);
+
+	if (!file) return;
+
+	try {
+		const response = await getOssPolicy();
+
+		if (response.data) {
+			const { policy, signature, accessid, dir, host } = response.data.data;
+
+			dataObj.policy = policy;
+			dataObj.signature = signature;
+			dataObj.ossaccessKeyId = accessid;
+			dataObj.key = dir + getUUID() + "_${filename}";
+			dataObj.dir = dir;
+			dataObj.host = host;
+
+			const formData = new FormData();
+			formData.append("key", dataObj.key);
+			formData.append("OSSAccessKeyId", dataObj.ossaccessKeyId);
+			formData.append("policy", dataObj.policy);
+			formData.append("Signature", dataObj.signature);
+			formData.append("success_action_status", "200");
+			formData.append("file", file);
+
+			const uploadResponse = await fetch(dataObj.host, {
+				method: "POST",
+				body: formData,
+			});
+
+			if (uploadResponse.ok) {
+				const imgUrl = dataObj.host + "/" + dataObj.key.replace("${filename}", file.name);
+				submitForm.value.image = imgUrl;
+				message.success("图片上传成功");
+			} else {
+				throw new Error("Upload failed");
+			}
+		}
+	} catch (error) {
+		console.error("文件上传失败:", error);
+		message.error("图片上传失败");
+	}
+
+	event.target.value = "";
 };
 
+// Generate UUID for file names
+const getUUID = () => {
+	return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+		const r = (Math.random() * 16) | 0;
+		const v = c === "x" ? r : (r & 0x3) | 0x8;
+		return v.toString(16);
+	});
+};
 onMounted(() => {
 	setType();
 	getTable();
@@ -858,58 +877,16 @@ const handleChangeTip = ($data) => {
 	console.log("$data", $data);
 	// submitForm.value.tipStr = $data;
 };
+const fileInput = ref(null);
+const dataObj = ref({
+	policy: "",
+	signature: "",
+	ossaccessKeyId: "",
+	key: "",
+	dir: "",
+	host: "",
+});
 
-const handleChangs = (e) => {
-	console.log("改变：", e);
-	uploadImage().then((res) => {
-		let dataObj = {};
-		dataObj.policy = res.data.data.policy;
-		dataObj.signature = res.data.data.signature;
-		dataObj.ossaccessKeyId = res.data.data.accessid;
-		dataObj.key = res.data.data.dir + commonJS.getUUID() + "_${filename}";
-		dataObj.dir = res.data.data.dir;
-		dataObj.host = res.data.data.host.replace("http", "https");
-
-		let url = "//bocai-cms.oss-cn-beijing.aliyuncs.com";
-		var formData = new FormData();
-		var idcardFormData = new FormData();
-		idcardFormData.append("uploadFile", e.file);
-
-		//注意formData里append添加的键的大小写
-		formData.append("key", dataObj.key); //存储在oss的文件路径
-		formData.append("OSSAccessKeyId", dataObj.ossaccessKeyId); //accessKeyId
-		formData.append("policy", dataObj.policy); //policy
-		formData.append("Signature", dataObj.signature); //签名
-		formData.append("success_action_status", "200"); // 上传成功返回的状态码，不设置则是204
-		formData.append("file", e.file); // 一定在最后
-
-		console.log(dataObj.host);
-
-		// 创建请求的选项对象
-		$.ajax({
-			type: "post",
-			url: commonJS.env() == "prod" ? dataObj.host : url,
-			// url,
-			data: formData,
-			contentType: false, // 不设置Content-Type请求头
-			processData: false,
-			success: function (data) {
-				console.log("image.value", dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name));
-				// submitForm.value.fileList = [];
-				// submitForm.value.fileList.push({
-				// 	uid: '2',
-				// 	name: 'yyy.png',
-				// 	status: 'done',
-				// 	url: dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name),
-				// });
-				submitForm.value.image = dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name);
-			},
-			fail: function (err) {
-				console.log("上传异常：", err);
-			},
-		});
-	});
-};
 watch(
 	() => channelShow.value,
 	(val) => {
@@ -957,36 +934,6 @@ const poiModal = ref({
 	lng: "",
 	type: "",
 });
-const handleOpenMap = ($type) => {
-	// 打开地图弹窗
-	poiModal.value = {
-		isShow: true,
-		// name: submitForm.value.aliasName,
-		address: submitForm.value.address,
-		lat: commonJS.isEmptyCheck(submitForm.value.lat) ? submitForm.value.lat : 0,
-		lng: commonJS.isEmptyCheck(submitForm.value.lng) ? submitForm.value.lng : 0,
-		type: $type,
-	};
-	console.log("poiModal.value", poiModal.value);
-};
-const getPoiInfo = (e) => {
-	console.log("获取地图选择信息：", e, " -- 类型：", poiModal.value.type);
-	// 关闭弹窗
-	poiModal.value.isShow = false;
-	// 赋值
-	var reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
-	if (poiModal.value.type == "address") {
-		submitForm.value.address = e.pointInfo.address;
-		submitForm.value.district = e.initInfo.district
-			.match(reg)
-			.filter((item, index) => item)
-			.join(",");
-		submitForm.value.lat = e.initInfo.lat;
-		submitForm.value.lng = e.initInfo.lng;
-		submitForm.value.mdistrict = e.initInfo.mdistrict;
-	}
-	console.log(submitForm.value);
-};
 
 // 门店图片的数组
 const shopImg = ref([]);
@@ -1094,8 +1041,7 @@ const getJoblist = () => {
 		keys: jobModal.value.keyword,
 		status: 1, // 过滤掉待审核和未通过
 	}).then((res) => {
-
-    console.log(res);
+		console.log(res);
 
 		jobModal.value.loading = false;
 		jobModal.value.count = res.data.pageBean.recordCount;
@@ -1214,6 +1160,48 @@ const setType = (clear = "clear") => {
 </script>
 
 <style lang="less" scoped>
+.upload-container {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 8px;
+}
+
+.image-preview {
+	width: 100px;
+	height: 100px;
+	overflow: hidden;
+	border-radius: 4px;
+}
+
+.image-preview img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.upload-placeholder {
+	width: 100px;
+	height: 100px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	background-color: #fafafa;
+	border: 1px dashed #d9d9d9;
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+.upload-placeholder:hover {
+	border-color: #1890ff;
+}
+
+.upload-hint {
+	font-size: 12px;
+	color: #999;
+	margin-top: 4px;
+}
+
 .i-x-item {
 	width: 100px;
 	height: 100px;
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 483895e..20844de 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -357,6 +357,9 @@ const triggerUpload = () => {
 
 const handleFileChange = async (event) => {
   const file = event.target.files[0];
+
+  console.log(file);
+
   if (!file) return;
 
   try {