feat: 上传图片

App.vue

@@ -6,7 +6,7 @@ import appUpdate from "@/components/appUpdate/appUpdate.js";
 export default {
   onLaunch: function () {
     console.log("%c%s", "color:red", "onLaunch---");
-    uni.showLoading({ title: "等待参数传入" });
+    // uni.showLoading({ title: "等待参数传入" });
     // uni.setStorageSync("token", "");
     window.initFn = this.initFn;
     // this.initFn();
@@ -74,7 +74,7 @@ export default {
       console.log(data, "data--");
       uni.setStorageSync(
         "token",
-        "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9zaWQiOiIwOGRkNzFiZC01N2MxLTQ1YmMtODBiYS0xMjkzYjU4MTViMmEiLCJ1bmlxdWVfbmFtZSI6IuS_nea0gSIsInJvbGUiOiJVc2VyIiwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbW9iaWxlcGhvbmUiOiIxODE3NDAxMDU2MiIsImdyb3Vwc2lkIjoiNGIyZDk2NjItYTc2OC0wOGYyLWEwYzgtNzYyYjhjNzZkYTJhIiwibmJmIjoxNzQ0MjQ3MTcwLCJleHAiOjE3NDQyNTA3NzAsImlhdCI6MTc0NDI0NzE3MH0.ljZeF0Q1H8rMeh69x2N6e_qID_Y72KwmXQ1-tlOGTYc"
+        "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9zaWQiOiIwOGRkNzFiZC01N2MxLTQ1YmMtODBiYS0xMjkzYjU4MTViMmEiLCJ1bmlxdWVfbmFtZSI6IuS_nea0gSIsInJvbGUiOiJVc2VyIiwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbW9iaWxlcGhvbmUiOiIxODE3NDAxMDU2MiIsImdyb3Vwc2lkIjoiNGIyZDk2NjItYTc2OC0wOGYyLWEwYzgtNzYyYjhjNzZkYTJhIiwibmJmIjoxNzQ0MjYzMTAyLCJleHAiOjE3NDQyNjY3MDIsImlhdCI6MTc0NDI2MzEwMn0.ZJTwC7rWCcywoM7ncysw-JRIiwXz4y_6hlmqctN-gMM"
       );
 
       uni.switchTab({

api/apiList.js

@@ -45,8 +45,8 @@ export const ReportingNFCDanger = (data) =>
   request.post("/api/App/ReportingNFCDanger", data);
 
 // 上传图片
-export const UploadFiles = (data) =>
+export const UploadFiles = (formData) =>
-  request.post("/api/App/UploadFiles", data);
+  request.upload("/api/App/UploadFiles", formData);
 
 // 上传
 export const UploadArea = (data) =>

pages/index/cleanDetails.vue

@@ -41,9 +41,26 @@
 </template>
 
 <script>
+import { GetPlanInfoAre } from "@/api/apiList";
 export default {
   data() {
-    return {};
+    return {
+      id: "",
+    };
+  },
+
+  onLoad(options) {
+    this.id = options.id;
+    this.getAreaInfo();
+  },
+
+  methods: {
+    async getAreaInfo() {
+      const res = await GetPlanInfoAre({
+        id: this.id,
+      });
+      console.log(res);
+    },
   },
 };
 </script>

pages/index/cleanPlan.vue

@@ -174,7 +174,7 @@ export default {
 
   methods: {
     minutesToTime,
-    
+
     nfcResFn(data) {
       if (data) {
         console.log("%c%s", "color:red", "nfc刷卡成功");

pages/index/uploadPhoto.vue

@@ -27,7 +27,7 @@
           <image
             src="/static/iconfont/more.svg"
             mode="scaleToFill"
-            style="width: 40rpx; height: 40rpx; margin-right: 32rpx"
+            style="width: 48rpx; height: 48rpx; margin-right: 32rpx"
             @click="toggleMenu"
           />
         </view>
@@ -35,7 +35,9 @@
     </u-navbar>
 
     <view class="content-header">
-      <view class="content-header-title"> 区域名称——所属计划 </view>
+      <view class="content-header-title">
+        {{ areaName }} — {{ planName }}
+      </view>
     </view>
 
     <view class="planList">
@@ -44,17 +46,40 @@
       </view>
       <view class="plan-content">
         <view class="plan-content-top">
-          <image
+          <view class="plan-content-top-uploadBox" @click="takePhoto">
-            src="/static/images/logo.png"
+            <image
-            mode="scaleToFill"
+              src="/static/images/icon-camera.png"
-            style="width: 160rpx; height: 160rpx"
+              mode="aspectFit"
-          />
+              style="width: 49rpx; height: 43rpx"
+            />
+            <view class="plan-content-top-uploadBox-text">添加照片</view>
+          </view>
+
+          <view
+            class="plan-content-top-imgList"
+            v-for="(item, index) in imageList"
+            :key="index"
+          >
+            <image
+              :src="item"
+              mode="scaleToFill"
+              style="width: 180rpx; height: 180rpx"
+              @click="previewImage(index)"
+            />
+            <view class="delete-icon" @click="handleDelete(index)">×</view>
+          </view>
         </view>
         <view class="plan-content-remark">
           <view class="plan-content-remark-title">备注</view>
-          <view class="plan-content-remark-text">
+          <!-- <view class="plan-content-remark-text">
-            备注备注备注备注备注备注备注备注备注备注备注备注备注
+            备注备注备注备注备注备注备注备注备注备注备注备注
-          </view>
+          </view> -->
+          <u-input
+            v-model="remark"
+            type="textarea"
+            placeholder="请输入"
+            :border="false"
+          />
         </view>
       </view>
     </view>
@@ -63,7 +88,6 @@
       class="bottom-btn"
       shape="circle"
       type="primary"
-      style="margin: 0 32rpx"
       @click="submitForm"
       >上传</u-button
     >
@@ -71,12 +95,23 @@
 </template>
 
 <script>
+import { UploadFiles, UploadArea } from "@/api/apiList";
+
 export default {
   data() {
     return {
       activeTab: "completed",
       showMenu: false,
-      menuItems: ["教学楼楼道", "南广场跑道", "食堂大厅", "食堂大厅"],
+      menuItems: ["教学楼楼道", "南广场跑道", "食堂大厅"],
+      // 区域名称
+      areaName: "操场",
+      // 所属计划
+      planName: "保洁计划",
+
+      // 备注
+      remark: "",
+
+      imageList: ["/static/images/logo.png"], // 存储图片临时路径
     };
   },
   created() {},
@@ -90,17 +125,87 @@ export default {
     selectMenuItem(item) {
       // 处理菜单项选择
       console.log("选择了:", item);
+      this.areaName = item;
       // 这里可以添加选择后的逻辑
       this.showMenu = false;
     },
+
+    // 拍照获取图片
+    takePhoto() {
+      uni.chooseImage({
+        count: 1, // 每次拍摄1张
+        sourceType: ["camera"], // 仅限拍照
+        sizeType: ["compressed"], // 压缩图片
+        success: async (res) => {
+          console.log("拍照成功", res);
+
+          this.uploadFiles(res.tempFilePaths[0]);
+        },
+        fail: (err) => {
+          uni.showToast({ title: "拍照失败，请重试", icon: "none" });
+        },
+      });
+    },
+
+    // 上传图片
+    async uploadFiles(filePath) {
+      const res = await UploadFiles(filePath);
+      if (res.succeed) {
+        this.imageList = [...this.imageList, res.data];
+      }
+    },
+
+    // 删除图片
+    handleDelete(index) {
+      this.imageList.splice(index, 1);
+    },
+
+    // 图片预览
+    previewImage(index) {
+      uni.previewImage({
+        urls: this.imageList,
+        current: index,
+      });
+    },
+
+    // 提交表单
+    async submitForm() {
+      if (this.imageList.length === 0) {
+        uni.showToast({ title: "请上传图片", icon: "none" });
+        return;
+      }
+
+      const picturesDto = this.imageList.map((item) => {
+        return {
+          path: item,
+        };
+      });
+
+      console.log("提交表单", picturesDto, this.remark);
+
+      const res = await UploadArea({
+        id: this.id,
+        picturesDto: picturesDto,
+        note: this.remark,
+      });
+
+      if (res.succeed) {
+        // 成功的处理
+        uni.showToast({ title: "上传成功", icon: "success" });
+      }
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+page {
+  background: #f7f8fc;
+}
 .content {
   position: relative;
-  height: 100vh;
+  // height: 100vh;
+  padding-bottom: 32rpx;
   background: #f7f8fc;
 
   .mask {
@@ -112,14 +217,15 @@ export default {
     background-color: rgba(0, 0, 0, 0.2);
     z-index: 999;
   }
-  
+
   .content-header {
-    height: 160rpx;
+    height: 180rpx;
-    background: #ddd;
     border-radius: 16rpx;
     margin: 32rpx;
     display: flex;
     flex-direction: column-reverse;
+    background: url("/static/images/region-bg.png") no-repeat center center;
+    background-size: 100% 100%;
 
     &-title {
       font-size: 32rpx;
@@ -130,7 +236,8 @@ export default {
       text-align: center;
       background-color: #fff;
       border-radius: 32rpx;
-      width: 70%;
+      min-width: 80%;
+      padding: 0 32rpx;
       margin: 0 auto 32rpx;
     }
   }
@@ -150,17 +257,44 @@ export default {
       padding: 32rpx;
       &-top {
         display: flex;
-        justify-content: space-between;
+        flex-wrap: wrap;
-        align-items: center;
+        gap: 32rpx;
-        .place {
+
-          font-size: 32rpx;
+        &-uploadBox {
-          color: #333;
+          border: 1px dashed #526fa3;
+          width: 180rpx;
+          height: 180rpx;
+          background-color: #edf2ff;
+          border-radius: 16rpx;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 20rpx;
+        }
+
+        &-imgList {
+          position: relative;
+          .delete-icon {
+            position: absolute;
+            right: -10rpx;
+            top: -10rpx;
+            width: 36rpx;
+            height: 36rpx;
+            background: #6d6d6d;
+            border-radius: 50%;
+            color: white;
+            text-align: center;
+            line-height: 36rpx;
+            font-size: 28rpx;
+          }
         }
       }
       &-remark {
         margin-top: 32rpx;
         border-radius: 16rpx;
         &-title {
+          margin-bottom: 16rpx;
           font-size: 32rpx;
           color: #333;
           font-weight: 500;
@@ -185,10 +319,11 @@ export default {
   }
 
   .bottom-btn {
-    position: fixed;
+    margin: 60rpx 32rpx 0rpx;
-    bottom: 32rpx;
+    // position: fixed;
-    left: 0;
+    // bottom: 32rpx;
-    right: 0;
+    // left: 0;
+    // right: 0;
   }
 }
 

pages/user/index.vue

@@ -3,15 +3,32 @@
     <!-- 设置 -->
     <view class="head">
       <view class="personInfo">
-        <view>张三</view>
+        <view>{{ baseInfo.name }}</view>
-        <view class="account">勤工岗</view>
+        <view class="account">{{ baseInfo.personType }}</view>
+      </view>
+      <view class="avatar-box">
+        <u-avatar
+          :src="baseInfo.avatar || '/static/images/avatar.png'"
+          size="140"
+          mode="circle"
+          class="avatar"
+        ></u-avatar>
+        <view
+          class="sex-icon"
+          :class="{
+            'sex-icon-man': baseInfo.sex === 0,
+            'sex-icon-woman': baseInfo.sex === 1,
+          }"
+        >
+          <u-icon
+            v-if="baseInfo.sex === 0"
+            name="man"
+            color="#fff"
+            size="26"
+          ></u-icon>
+          <u-icon v-else name="woman" color="#fff" size="26"></u-icon>
+        </view>
       </view>
-      <u-avatar
-        src="/static/images/avatar.png"
-        size="140"
-        mode="circle"
-        class="avatar"
-      ></u-avatar>
     </view>
 
     <view class="cell-list-box">
@@ -46,6 +63,8 @@
 </template>
 
 <script>
+import { GetCompanyInformation } from "@/api/apiList.js";
+
 import {
   toast,
   clearStorageSync,
@@ -58,14 +77,14 @@ export default {
   data() {
     return {
       baseInfo: {
-        name: "",
-        phone: "",
         avatar: "",
-        company_name: "",
+        companyName: "南昌理工",
-        registerDate: "",
+        name: "保洁",
-        login_code: "",
+        sex: 0, // 0 男 1 女
-        auth: 0,
+        time: "2025/4/2-2026/4/2",
+        personType: "保洁员",
       },
+
       version: "",
 
       cellList: [
@@ -99,6 +118,7 @@ export default {
     // });
   },
   onShow() {
+    this.getCompanyInformation();
     // uni.$on("refresh", (e) => {
     //   this.getUserInfo();
     //   uni.$off("refresh");
@@ -147,25 +167,18 @@ export default {
         },
       });
     },
-    getUserInfo() {
+
-      this.$api.baseInfo().then((res) => {
+    // 获取单位信息
-        //console.log(res)
+    async getCompanyInformation() {
+      const res = await GetCompanyInformation();
+      if (res.succeed) {
         this.baseInfo = res.data;
-        this.avatar_src = res.data.avatar;
+        this.cellList[0].content = this.baseInfo.time;
-      });
+      }
-    },
-
-    service_center() {
-      toast("未设置跳转，请自行定义");
-    },
-
-    setting() {
-      useRouter("/pages/my/account/setting", {}, "navigateTo");
     },
 
     toPage(path) {
       if (!path) return;
-      console.log("path", path);
 
       useRouter(path, {}, "navigateTo");
     },
@@ -198,8 +211,31 @@ export default {
         margin-top: 10rpx;
       }
     }
-    .avatar {
+
-      margin-left: 50rpx;
+    .avatar-box {
+      width: 140rpx;
+      height: 140rpx;
+      border-radius: 50%;
+      position: relative;
+      .avatar {
+        width: 100%;
+      }
+      .sex-icon {
+        width: 32rpx;
+        height: 32rpx;
+        line-height: 32rpx;
+        text-align: center;
+        border-radius: 50%;
+        position: absolute;
+        top: 20rpx;
+        right: 0;
+      }
+      .sex-icon-man {
+        background-color: #007aff;
+      }
+      .sex-icon-woman {
+        background-color: #ff4d4f;
+      }
     }
   }
 

utils/request.js

@@ -1,67 +1,125 @@
-
+import BASE_URL from "@/api/env.js"; //引入接口共用地址
-
+import RequestManager from "@/utils/requestManager.js";
-import BASE_URL from '@/api/env.js' //引入接口共用地址
+import {
-import RequestManager from '@/utils/requestManager.js'
+  toast,
-import {toast, clearStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
+  clearStorageSync,
-import systemConfig from '@/config/config.js';
+  getStorageSync,
-const manager = new RequestManager()
+  useRouter,
-
+} from "@/utils/utils.js";
+import systemConfig from "@/config/config.js";
+const manager = new RequestManager();
 
 // 先写死调接口
 // uni.setStorageSync('token', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9zaWQiOiI1YmJiYTBhMi04YmJmLTcxMmUtMjMxMy1kYTc0N2E1MGUxYzEiLCJ1bmlxdWVfbmFtZSI6Iua1i-ivlSIsInJvbGUiOiJBZG1pbiIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL21vYmlsZXBob25lIjoiMTgxNzQwMTA1NjEiLCJncm91cHNpZCI6IjRiMmQ5NjYyLWE3NjgtMDhmMi1hMGM4LTc2MmI4Yzc2ZGEyYSIsIm5iZiI6MTc0NDE3OTY2NiwiZXhwIjoxNzQ0MTgzMjY2LCJpYXQiOjE3NDQxNzk2NjZ9.TTLt3vwefdrd8rx3zNN4rr0OI4yp14m781N3PC3lIHw')
 
+const baseRequest = async (url, method, data = {}, loading = true) => {
+  let requestId = manager.generateId(method, url, data);
+  if (!requestId) {
+    console.log("重复请求");
+  }
+  if (!requestId) return false;
 
-const baseRequest = async (url, method, data = {}, loading = true) =>{
+  const header = {};
-	let requestId = manager.generateId(method, url, data)
+  header.Authorization = getStorageSync(systemConfig.token) || "";
-	if(!requestId) {
+  return new Promise((reslove, reject) => {
-		console.log('重复请求')
+    loading && uni.showLoading({ title: "loading" });
-	}
+    uni.request({
-	if(!requestId)return false;
+      url: BASE_URL + url,
-	
+      method: method || "GET",
-	const header = {}
+      header: header,
-	header.Authorization = getStorageSync(systemConfig.token) || ''
+      timeout: 10000,
-	return new Promise((reslove, reject) => {
+      data: data || {},
-		loading && uni.showLoading({title: 'loading'})
+      complete: () => {
-		uni.request({
+        uni.hideLoading();
-			url: BASE_URL + url,
+        manager.deleteById(requestId);
-			method: method || 'GET',
+      },
-			header: header,
+      success: (successData) => {
-			timeout: 10000,
+        //console.log(successData)
-			data: data || {},
+        const res = successData.data;
-			complete: ()=>{
+        if (successData.statusCode == 200) {
-				uni.hideLoading()
+          // 业务逻辑，自行修改，401是服务器上返回该token过期，过期后跳转到登陆页面
-				manager.deleteById(requestId)
+          if (res.code > 400) {
-			},
+            clearStorageSync("token");
-			success: (successData) => {
+            useRouter(systemConfig.login_page, "reLaunch");
-				//console.log(successData)
+          } else {
-				const res = successData.data
+            reslove(res);
-				if(successData.statusCode == 200){
+          }
-					// 业务逻辑，自行修改，401是服务器上返回该token过期，过期后跳转到登陆页面
+        } else {
-					if(res.code > 400){
+          console.log("网络连接失败，请稍后重试", url);
-						clearStorageSync('token')
+          toast("网络连接失败，请稍后重试");
-						useRouter(systemConfig.login_page, 'reLaunch')
+          reject(res);
-					}else{
+        }
-						reslove(res)
+      },
-					}
+      fail: (msg) => {
-				}else{
+        console.log("请求：" + BASE_URL + url + "，发生错误：", err);
-					console.log('网络连接失败，请稍后重试' ,url)
+        toast("网络连接失败，请稍后重试");
-					toast('网络连接失败，请稍后重试')
+        reject(msg);
-					reject(res)
+      },
-				}
+    });
-			},
+  });
-			fail: (msg) => {
+};
-				console.log("请求："+BASE_URL + url +'，发生错误：', err)
+
-				toast('网络连接失败，请稍后重试')
+// 添加文件上传的基础方法
-				reject(msg)
+const baseUpload = async (api, filePath, formData = {}, loading = true) => {
-			}
+  if (loading) {
-		})
+    uni.showLoading({
-	})
+      title: "上传中...",
-}
+      mask: true,
+    });
+  }
+
+  const header = {};
+  header.Authorization = getStorageSync(systemConfig.token) || "";
+
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url: BASE_URL + api,
+      filePath: filePath,
+      name: "Files", // 文件对应的 key
+      formData: formData,
+      header: header,
+      success: (res) => {
+        if (loading) uni.hideLoading();
+
+        // 处理响应数据
+        if (res.statusCode === 200) {
+          const data = JSON.parse(res.data);
+          if (data.succeed) {
+            resolve(data);
+          } else {
+            uni.showToast({
+              title: data.msg || "上传失败",
+              icon: "none",
+            });
+            reject(data);
+          }
+        } else {
+          reject(res);
+        }
+      },
+      fail: (err) => {
+        if (loading) uni.hideLoading();
+        uni.showToast({
+          title: "上传失败",
+          icon: "none",
+        });
+        reject(err);
+      },
+    });
+  });
+};
 
 const request = {};
 
-['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
+// 将 upload 方法添加到 request 对象中
-	request[method] = (api, data, loading) => baseRequest(api, method, data, loading)
+request.upload = (api, filePath, formData, loading) =>
-})
+  baseUpload(api, filePath, formData, loading);
 
-export default request
+["options", "get", "post", "put", "head", "delete", "trace", "connect"].forEach(
+  (method) => {
+    request[method] = (api, data, loading) =>
+      baseRequest(api, method, data, loading);
+  }
+);
+
+export default request;