From cbe07e6d9a12df3537194f255577e78cae2868d9 Mon Sep 17 00:00:00 2001
From: xiaoliiiiii <1609765836@qq.com>
Date: Tue, 18 Jul 2023 16:55:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E7=8F=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 my-vue-app/src/components/u_photosPage.vue | 241 ++++++++++++---------
 1 file changed, 136 insertions(+), 105 deletions(-)

diff --git a/my-vue-app/src/components/u_photosPage.vue b/my-vue-app/src/components/u_photosPage.vue
index e9277af..4a942ce 100644
--- a/my-vue-app/src/components/u_photosPage.vue
+++ b/my-vue-app/src/components/u_photosPage.vue
@@ -1,119 +1,150 @@
 <template>
-  <div><h1>我的相册</h1></div>
-  <div>
-    <el-menu :default-active="activeCategory" mode="horizontal" @select="handleCategorySelect">
-      <el-menu-item v-for="category in categories" :key="category.id" :index="category.id">{{ category.album_name }}</el-menu-item>
-    </el-menu>
 
-    <el-row :gutter="20">
-      <el-col :span="6" v-for="photo in filteredPhotos" :key="photo.id">
-        <el-card :body-style="{ padding: '0px' }">
-          
-          <img :src="photo.url" style="width: 100%" @click="openPhoto(photo)">
-           <!-- 下拉框 -->
-           <el-select v-model="selectedValue" filterable placeholder="排序方式" @change="handleRequest">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-            </el-select>
-        </el-card>
-      </el-col>
+  <!-- 对话框：添加、修改功能 -->
+  <el-dialog v-model="dialogFormVisible" title="新增相册">
+           <el-form :model="form">
+           <el-form-item label="相册名称" :label-width="formLabelWidth">
+               <el-input v-model="form.photosName" />
+           </el-form-item>
+           <el-form-item label="相册描述" :label-width="formLabelWidth">
+               <el-input v-model="form.photosDescript" />
+           </el-form-item>
+           </el-form>
+           <template #footer>
+           <span class="dialog-footer">
+               <el-button @click="dialogFormVisible = false">取消</el-button>
+               <el-button type="primary" @click="btnAddUpdate(form)">新增</el-button>
+           </span>
+           </template>
+       </el-dialog>
 
-      <el-upload
-          class="avatar-uploader"
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-          :show-file-list="false"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-        >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-      </el-upload>
-    </el-row>
-    <el-dialog :visible.sync="dialogVisible" :before-close="closePhoto">
-      <img :src="selectedPhoto.url" style="width: 100%">
-    </el-dialog>
-  </div> 
+ <div><h1>我的相册</h1></div>
+ <div>
+   <el-button type="primary" @click="handleAdd">新增相册</el-button>
+   <el-button type="success"><RouterLink to="/u_defaultPhotoPage"><div>默认相册</div></RouterLink></el-button>
+ </div>
+ <div>
+   <el-menu :default-active="activeCategory" mode="horizontal" @select="handleCategorySelect" background-color="#545c64">
+     <el-menu-item v-for="category in categories" :key="category.id" :index="category.id">{{ category.name }}</el-menu-item>
+   </el-menu>
+
+   <el-row :gutter="20">
+     <el-col :span="6" v-for="photo in filteredPhotos" :key="photo.id">
+       <el-card :body-style="{ padding: '0px' }">
+         
+         <img :src="photo.url" style="width: 100%" @click="openPhoto(photo)">
+          <!-- 下拉框 -->
+          <el-select v-model="selectedValue" filterable placeholder="排序方式" @change="handleRequest">
+           <el-option
+             v-for="item in options"
+             :key="item.value"
+             :label="item.label"
+             :value="item.value"
+           />
+           </el-select>
+       </el-card>
+     </el-col>
+
+     <el-upload
+         class="avatar-uploader"
+         action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+         :show-file-list="false"
+         :on-success="handleAvatarSuccess"
+         :before-upload="beforeAvatarUpload"
+       >
+         <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+         <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+     </el-upload>
+   </el-row>
+   <el-dialog :visible.sync="dialogVisible" :before-close="closePhoto">
+     <img :src="selectedPhoto.url" style="width: 100%">
+   </el-dialog>
+ </div> 
+
+     
+       
 </template>
 
 <script>
 import { reactive } from 'vue';
 import { ref } from 'vue'
 import { Plus } from '@element-plus/icons-vue'
-import axios from 'axios';
 
 export default {
-  data() {
-    return {
-      categories: [
-        { id: 1, album_name: '风景' },
-        { id: 2, album_name: '动物' },
-        { id: 3, album_name: '人物' },
-      ],
-      photos: [
-        { id: 1, album_id: 4, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.9e45a633e95179a37c907fa2797999ad?rik=aMuPS4TunAh5ZA&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214Q2.jpg&ehk=P%2firfYpARc1fHht%2bWpapYR4W15p6SLABE8CBexoeon4%3d&risl=&pid=ImgRaw&r=0' },
-        { id: 2, album_id: 4, path: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK?pid=ImgDet&rs=1' },
-        { id: 3, album_id: 5, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.b7e2aa7df9555d4777e3a04aa0bb8242?rik=O4HJ1yRYJYwcTg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305130P1.jpg&ehk=PrtmnkVTBD6mGRhndwEhBOPfolKK6W9OVIPkX4J%2bTrM%3d&risl=&pid=ImgRaw&r=0' },
-        { id: 4, album_id: 5, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.462f061a9142a1dfcad938b0239a56bf?rik=fXziJWNywsZ1aQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131005.jpg&ehk=4nwV39CXlpLR%2fOmwYriWmyc86no2zgC9D9KVlSuRvv0%3d&risl=&pid=ImgRaw&r=0' },
-        { id: 5, album_id: 3, path: 'https://img.zcool.cn/community/0196395640045e6ac7259e0fc657f0.jpg@1280w_1l_2o_100sh.jpg' },
-        { id: 6, album_id: 3, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.44324efca6e852d9e09ceb46406c76e3?rik=s%2f2cbaShbrOpxA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fitbbs%2f1503%2f16%2fc22%2f3936655_1426478737629_mthumb.jpg&ehk=PlTEBr9xmKanJV6YELdm1Gbbtb1djCcwf8DEMFzRWgo%3d&risl=&pid=ImgRaw&r=0' },
-        { id: 7, album_id: 1, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.c2f6165e1acf6b986a20e8b676f13bdd?rik=Dm%2bD%2fgeM4oqgBw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303215045.jpg&ehk=sdIsCQj%2bvjKfUs%2fDw%2fZekILroLb1ALwbKghApSPIq4U%3d&risl=&pid=ImgRaw&r=0'},
-        { id: 8, album_id: 2, path: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/02/ChMkJlbKxZyIGFNMAATlhTeYCRsAALHYgOXS9sABOWd753.jpg'},
-        { id: 9, album_id: 3, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.0487cbf71da6269a55b4bd82eeea2b2d?rik=9PqZrG7dgzHlZg&riu=http%3a%2f%2fimg.daimg.com%2fuploads%2fallimg%2f160401%2f3-160401225608.jpg&ehk=M%2bUTMpstHRcSxJ8FeMBaNzlrnqc0TeFZGmAD0eeilTY%3d&risl=&pid=ImgRaw&r=0'},
-      ],
-      activeCategory: '1',
-      selectedPhoto: null,
-      dialogVisible: false,
-    };
-  },
-  computed: {
-    filteredPhotos() {
-      return this.photos.filter(photo => photo.album_id === parseInt(this.activeCategory));
-    },
-  },
-  methods: {
-    handleCategorySelect(categoryId) {
-      this.activeCategory = categoryId;
-      console.log(categoryId)
-      axios.post("http://localhost:8081/Photo/FindPhotoByAlbumId",null,{
-            params:{id:categoryId}
-        }).then(response=>{
-          console.log(response)
-          this.photos=response.data
-          //this.photos.path="my-vue-app\\src\\photos\\"+response.data.path
-          console.log("..\\photos\\"+response.data[0].path)
-          console.log(this.photos[0].path)
-          for(let a=0;a<response.data.length;a++)
-          {
-            this.photos[a].path="photos\\"+response.data[a].path
-            //this.photo[a].path='assets\\bg1.jpeg'
-          }
-          console.log(this.photos)
-          
-        })
-    },
-    openPhoto(photo) {
-      this.selectedPhoto = photo;
-      this.dialogVisible = true;
-    },
-    closePhoto(done) {
-      this.dialogVisible = false;
-      this.selectedPhoto = null;
-      done();
-    },
-  },
-  mounted(){
-    console.log(sessionStorage.getItem('userId'))
-    axios.post("http://localhost:8081/Photo/FindAlbumByUser_id",null,{
-            params:{id:sessionStorage.getItem('userId')}
-        }).then(response=>{
-          console.log(response)
-          this.categories=response.data
-        })
-  }
+ data() {
+   return {
+     categories: [
+       { id: 1, name: '风景' },
+       { id: 2, name: '动物' },
+       { id: 3, name: '人物' },
+     ],
+     photos: [
+       { id: 1, category: 1, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.9e45a633e95179a37c907fa2797999ad?rik=aMuPS4TunAh5ZA&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214Q2.jpg&ehk=P%2firfYpARc1fHht%2bWpapYR4W15p6SLABE8CBexoeon4%3d&risl=&pid=ImgRaw&r=0' },
+       { id: 2, category: 1, url: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK?pid=ImgDet&rs=1' },
+       { id: 3, category: 2, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.b7e2aa7df9555d4777e3a04aa0bb8242?rik=O4HJ1yRYJYwcTg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305130P1.jpg&ehk=PrtmnkVTBD6mGRhndwEhBOPfolKK6W9OVIPkX4J%2bTrM%3d&risl=&pid=ImgRaw&r=0' },
+       { id: 4, category: 2, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.462f061a9142a1dfcad938b0239a56bf?rik=fXziJWNywsZ1aQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131005.jpg&ehk=4nwV39CXlpLR%2fOmwYriWmyc86no2zgC9D9KVlSuRvv0%3d&risl=&pid=ImgRaw&r=0' },
+       { id: 5, category: 3, url: 'https://img.zcool.cn/community/0196395640045e6ac7259e0fc657f0.jpg@1280w_1l_2o_100sh.jpg' },
+       { id: 6, category: 3, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.44324efca6e852d9e09ceb46406c76e3?rik=s%2f2cbaShbrOpxA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fitbbs%2f1503%2f16%2fc22%2f3936655_1426478737629_mthumb.jpg&ehk=PlTEBr9xmKanJV6YELdm1Gbbtb1djCcwf8DEMFzRWgo%3d&risl=&pid=ImgRaw&r=0' },
+       { id: 7, category: 1, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.c2f6165e1acf6b986a20e8b676f13bdd?rik=Dm%2bD%2fgeM4oqgBw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303215045.jpg&ehk=sdIsCQj%2bvjKfUs%2fDw%2fZekILroLb1ALwbKghApSPIq4U%3d&risl=&pid=ImgRaw&r=0'},
+       { id: 8, category: 2, url: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/02/ChMkJlbKxZyIGFNMAATlhTeYCRsAALHYgOXS9sABOWd753.jpg'},
+       { id: 9, category: 3, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.0487cbf71da6269a55b4bd82eeea2b2d?rik=9PqZrG7dgzHlZg&riu=http%3a%2f%2fimg.daimg.com%2fuploads%2fallimg%2f160401%2f3-160401225608.jpg&ehk=M%2bUTMpstHRcSxJ8FeMBaNzlrnqc0TeFZGmAD0eeilTY%3d&risl=&pid=ImgRaw&r=0'},
+     ],
+     activeCategory: '1',
+     selectedPhoto: null,
+     dialogVisible: false,
+     dialogFormVisible:false, //对话框是否显示
+     form: {},
+   };
+ },
+ computed: {
+   filteredPhotos() {
+     return this.photos.filter(photo => photo.category === parseInt(this.activeCategory));
+   },
+ },
+ methods: {
+   handleCategorySelect(categoryId) {
+     this.activeCategory = categoryId;
+   },
+   openPhoto(photo) {
+     this.selectedPhoto = photo;
+     this.dialogVisible = true;
+   },
+   closePhoto(done) {
+     this.dialogVisible = false;
+     this.selectedPhoto = null;
+     done();
+   },
+   handleAdd(){   //新增相册
+               this.btnName = "新增"
+               this.title = "新增用户信息"
+               this.dialogFormVisible = true 
+               console.log("openHandleAdd")
+       
+ },
+ btnAddUpdate(form)
+ {
+               console.log("新增操作")
+               var _this = this;
+               //接口
+               this.$http.post("$http").then(function(response){
+               console.log(response.data);
+               if(response.data == 1){
+               ElMessage({
+                   message: '用户信息添加成功！',
+                   type: 'success',
+               })
+               }
+               else{
+               ElMessage({
+                   message: '用户信息添加失败！',
+                   type: 'waring',
+               })
+               }
+               } ) 
+               console.log(this.form)
+           },
+ },
+ 
 };
 </script>
 
-- 
Gitee