fix: 解决冲突

feat: 上传图片
2025-04-10 14:23:09 +08:00 · 2025-04-10 14:21:16 +08:00
9 changed files with 368 additions and 121 deletions
--- a/App.vue
+++ b/App.vue
@ -74,7 +74,7 @@ export default {
      console.log(data, "data--");
      uni.setStorageSync(
        "token",
-        "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9zaWQiOiIwOGRkNzFiZC01N2MxLTQ1YmMtODBiYS0xMjkzYjU4MTViMmEiLCJ1bmlxdWVfbmFtZSI6IuS_nea0gSIsInJvbGUiOiJVc2VyIiwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbW9iaWxlcGhvbmUiOiIxODE3NDAxMDU2MiIsImdyb3Vwc2lkIjoiNGIyZDk2NjItYTc2OC0wOGYyLWEwYzgtNzYyYjhjNzZkYTJhIiwibmJmIjoxNzQ0MjUxNjY1LCJleHAiOjE3NDQyNTUyNjUsImlhdCI6MTc0NDI1MTY2NX0.4xEKtdOQNijnQAZttfbUlrtRkMYu69YvtNOV4conUIk"
+        "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9zaWQiOiIwOGRkNzFiZC01N2MxLTQ1YmMtODBiYS0xMjkzYjU4MTViMmEiLCJ1bmlxdWVfbmFtZSI6IuS_nea0gSIsInJvbGUiOiJVc2VyIiwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbW9iaWxlcGhvbmUiOiIxODE3NDAxMDU2MiIsImdyb3Vwc2lkIjoiNGIyZDk2NjItYTc2OC0wOGYyLWEwYzgtNzYyYjhjNzZkYTJhIiwibmJmIjoxNzQ0MjYzMTAyLCJleHAiOjE3NDQyNjY3MDIsImlhdCI6MTc0NDI2MzEwMn0.ZJTwC7rWCcywoM7ncysw-JRIiwXz4y_6hlmqctN-gMM"
      );

      uni.switchTab({
--- a/api/apiList.js
+++ b/api/apiList.js
@ -45,8 +45,8 @@ export const ReportingNFCDanger = (data) =>
  request.post("/api/App/ReportingNFCDanger", data);

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

 // 上传
 export const UploadArea = (data) =>
--- a/pages/index/cleanDetails.vue
+++ b/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>
--- a/pages/index/cleanPlan.vue
+++ b/pages/index/cleanPlan.vue
@ -178,9 +178,10 @@ export default {

  methods: {
    minutesToTime,
-    nfcResFn(data){
-      if(data){
-        console.log('%c%s', 'color:red', 'nfc刷卡成功');
+
+    nfcResFn(data) {
+      if (data) {
+        console.log("%c%s", "color:red", "nfc刷卡成功");
        this.successShow = true;
      } else {
        console.log("%c%s", "color:red", "刷卡失败");
--- a/pages/index/uploadPhoto.vue
+++ b/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
-            src="/static/images/logo.png"
-            mode="scaleToFill"
-            style="width: 160rpx; height: 160rpx"
-          />
+          <view class="plan-content-top-uploadBox" @click="takePhoto">
+            <image
+              src="/static/images/icon-camera.png"
+              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>
+          <!-- <view class="plan-content-remark-text">
+            备注备注备注备注备注备注备注备注备注备注备注备注
+          </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;
-    background: #ddd;
+    height: 180rpx;
    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;
-        align-items: center;
-        .place {
-          font-size: 32rpx;
-          color: #333;
+        flex-wrap: wrap;
+        gap: 32rpx;
+
+        &-uploadBox {
+          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;
-    bottom: 32rpx;
-    left: 0;
-    right: 0;
+    margin: 60rpx 32rpx 0rpx;
+    // position: fixed;
+    // bottom: 32rpx;
+    // left: 0;
+    // right: 0;
  }
 }

--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@ -3,15 +3,32 @@
    <!-- 设置 -->
    <view class="head">
      <view class="personInfo">
-        <view>张三</view>
-        <view class="account">勤工岗</view>
+        <view>{{ baseInfo.name }}</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: "",
-        registerDate: "",
-        login_code: "",
-        auth: 0,
+        companyName: "南昌理工",
+        name: "保洁",
+        sex: 0, // 0 男 1 女
+        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;
-      });
-    },
-
-    service_center() {
-      toast("未设置跳转，请自行定义");
-    },
-
-    setting() {
-      useRouter("/pages/my/account/setting", {}, "navigateTo");
+        this.cellList[0].content = this.baseInfo.time;
+      }
    },

    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;
+      }
    }
  }

--- a/static/images/icon-camera.png
+++ b/static/images/icon-camera.png
--- a/static/images/region-bg.png
+++ b/static/images/region-bg.png
--- a/utils/request.js
+++ b/utils/request.js
@ -1,67 +1,125 @@
-
-
-import BASE_URL from '@/api/env.js' //引入接口共用地址
-import RequestManager from '@/utils/requestManager.js'
-import {toast, clearStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
-import systemConfig from '@/config/config.js';
-const manager = new RequestManager()
-
+import BASE_URL from "@/api/env.js"; //引入接口共用地址
+import RequestManager from "@/utils/requestManager.js";
+import {
+  toast,
+  clearStorageSync,
+  getStorageSync,
+  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) =>{
-	let requestId = manager.generateId(method, url, data)
-	if(!requestId) {
-		console.log('重复请求')
-	}
-	if(!requestId)return false;
-	
-	const header = {}
-	header.Authorization = getStorageSync(systemConfig.token) || ''
-	return new Promise((reslove, reject) => {
-		loading && uni.showLoading({title: 'loading'})
-		uni.request({
-			url: BASE_URL + url,
-			method: method || 'GET',
-			header: header,
-			timeout: 10000,
-			data: data || {},
-			complete: ()=>{
-				uni.hideLoading()
-				manager.deleteById(requestId)
-			},
-			success: (successData) => {
-				//console.log(successData)
-				const res = successData.data
-				if(successData.statusCode == 200){
-					// 业务逻辑，自行修改，401是服务器上返回该token过期，过期后跳转到登陆页面
-					if(res.code > 400){
-						clearStorageSync('token')
-						useRouter(systemConfig.login_page, 'reLaunch')
-					}else{
-						reslove(res)
-					}
-				}else{
-					console.log('网络连接失败，请稍后重试' ,url)
-					toast('网络连接失败，请稍后重试')
-					reject(res)
-				}
-			},
-			fail: (msg) => {
-				console.log("请求："+BASE_URL + url +'，发生错误：', err)
-				toast('网络连接失败，请稍后重试')
-				reject(msg)
-			}
-		})
-	})
-}
+  const header = {};
+  header.Authorization = getStorageSync(systemConfig.token) || "";
+  return new Promise((reslove, reject) => {
+    loading && uni.showLoading({ title: "loading" });
+    uni.request({
+      url: BASE_URL + url,
+      method: method || "GET",
+      header: header,
+      timeout: 10000,
+      data: data || {},
+      complete: () => {
+        uni.hideLoading();
+        manager.deleteById(requestId);
+      },
+      success: (successData) => {
+        //console.log(successData)
+        const res = successData.data;
+        if (successData.statusCode == 200) {
+          // 业务逻辑，自行修改，401是服务器上返回该token过期，过期后跳转到登陆页面
+          if (res.code > 400) {
+            clearStorageSync("token");
+            useRouter(systemConfig.login_page, "reLaunch");
+          } else {
+            reslove(res);
+          }
+        } else {
+          console.log("网络连接失败，请稍后重试", url);
+          toast("网络连接失败，请稍后重试");
+          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) => {
-	request[method] = (api, data, loading) => baseRequest(api, method, data, loading)
-})
+// 将 upload 方法添加到 request 对象中
+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;
Author	SHA1	Message	Date
yangzhe	5537a69779	fix: 解决冲突	2025-04-10 14:23:09 +08:00
yangzhe	45dfcd1a7b	feat: 上传图片	2025-04-10 14:21:16 +08:00